oazaSrdceWeb / admin_edit / editlector.php
editlector.php
Raw
<?php

/**
 * @file editlector.php
 * @brief Administrace pro úpravu a mazání lektorů.
 *
 * Tento skript umožňuje administrátorovi:
 *  - Vybrat lektora ze seznamu a načíst jeho data.
 *  - Upravit všechny údaje lektora (jméno, obor, hlavní fotka, video, další fotky, informace, weby, telefon, email).
 *  - Nahrát novou hlavní fotku s možností ořezu (Cropper.js).
 *  - Nahrát hlavní video a další fotografie.
 *  - Označit stávající fotky nebo video ke smazání.
 *  - Odeslat změny k uložení (updatelector.php).
 *  - Smazat celého lektora (deletelector.php).
 *  - Zobrazit úspěšné nebo chybové hlášky po akcích.
 * Přístup je povolen pouze přihlášeným uživatelům.
 */
session_start();

/**
 * Kontrola, zda je uživatel přihlášen.
 * Pokud není, přesměruje na přihlašovací stránku.
 */
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header('Location: login.php');
    exit();
}
?>
<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upravit lektora</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../admin.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
    <style>
        .preview-box img,
        .preview-box video {
            width: 120px;
            height: 120px;

        }

        .deleteLector {
            width: 120px;
        }

        #photoMainPreview {
            max-height: 500px;
            /* Zvětší max výšku náhledu*/
        }
    </style>
</head>

<body>
    <div class="container mt-5">
        <a href="../admin.php" class="backbtn">Zpět na panel</a>
        <h2 class="text-center mb-4 hedingForm">Upravit Lektora</h2>
        <?php if (isset($_SESSION['success'])) {
            echo '<div class="alert alert-success text-center">' . $_SESSION['success'] . '</div>';
            unset($_SESSION['success']);
        } ?>
        <?php if (isset($_SESSION['error'])) {
            echo '<div class="alert alert-danger text-center">' . $_SESSION['error'] . '</div>';
            unset($_SESSION['error']);
        } ?>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="updatelector.php" method="post" enctype="multipart/form-data">
                    <input type="hidden" id="lectorId" name="lectorId">
                    <input type="hidden" id="croppedPhotoMain" name="croppedPhotoMain">
                    <div class="form-group">
                        <label for="name">Jméno</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="field">Obor</label>
                        <input type="text" class="form-control" id="field" name="field" required>
                    </div>
                    <div class="form-group">
                        <label for="photoMain">Hlavní Fotografie</label>
                        <input type="file" class="form-control" id="photoMain" name="photoMain">
                        <div id="photoMainPreview" class="preview-box"></div>
                        <button type="button" id="cropButton" style="display:none;">Crop</button>
                    </div>
                    <div class="form-group">
                        <label for="videoMain">Hlavní Video</label>
                        <input type="file" class="form-control" id="videoMain" name="videoMain">
                        <div id="videoMainPreview" class="preview-box"></div>
                    </div>
                    <div class="form-group">
                        <label for="videoLink">Odkaz na video</label>
                        <input type="text" class="form-control" id="videoLink" name="videoLink">
                    </div>
                    <div class="form-group">
                        <label for="photo1">Fotografie 1</label>
                        <input type="file" class="form-control" id="photo1" name="photo1">
                        <div id="photo1Preview" class="preview-box"></div>
                    </div>
                    <div class="form-group">
                        <label for="photo2">Fotografie 2</label>
                        <input type="file" class="form-control" id="photo2" name="photo2">
                        <div id="photo2Preview" class="preview-box"></div>
                    </div>
                    <div class="form-group">
                        <label for="photo3">Fotografie 3</label>
                        <input type="file" class="form-control" id="photo3" name="photo3">
                        <div id="photo3Preview" class="preview-box"></div>
                    </div>
                    <div class="form-group">
                        <label for="info">Informace</label>
                        <textarea class="form-control" id="info" name="info" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="web1">Web 1</label>
                        <input type="text" class="form-control" id="web1" name="web1">
                    </div>
                    <div class="form-group">
                        <label for="web2">Web 2</label>
                        <input type="text" class="form-control" id="web2" name="web2">
                    </div>
                    <div class="form-group">
                        <label for="tel">Telefon</label>
                        <input type="number" class="form-control" id="tel" name="tel">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Upravit</button>
                </form>
                <form id="deleteLectorForm" action="deletelector.php" method="post">
                    <input type="hidden" id="deleteLectorId" name="lectorId">
                    <button type="button" class="btn btn-danger btn-block mt-2 deleteLector" onclick="confirmDelete()">Smazat</button>
                </form>
            </div>
            <div class="col-md-1">
                <select name="lectorSelect" id="lectorSelect" onchange="loadLectorData()">
                    <option value="">Vyberte lektora</option>
                    <?php
                    include '../db_connection.php'; ///< Připojení k databázi.
                    $conn->set_charset("utf8mb4");
                    ///Načtení seznamu lektorů z databáze pro další práci.
                    $sql = "SELECT id, name FROM lectors ORDER BY name ASC";
                    $result = $conn->query($sql);
                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            echo '<option value="' . $row["id"] . '">' . $row["name"] . '</option>';
                        }
                    }
                    ?>
                </select>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
    <script>
        /**
         * Načte data vybraného lektora přes AJAX a předvyplní formulář.
         */
        function loadLectorData() {
            var lectorId = document.getElementById('lectorSelect').value;
            if (lectorId) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'get_lector.php?id=' + lectorId, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var lector = JSON.parse(xhr.responseText);
                        document.getElementById('lectorId').value = lector.id;
                        document.getElementById('name').value = lector.name;
                        document.getElementById('field').value = lector.field;
                        document.getElementById('videoLink').value = lector.videoLink;
                        document.getElementById('info').value = lector.info;
                        document.getElementById('web1').value = lector.web1;
                        document.getElementById('web2').value = lector.web2;
                        document.getElementById('tel').value = lector.tel;
                        document.getElementById('email').value = lector.email;

                        // Aktualizace náhledů a checkboxů pro smazání
                        updatePreview('photoMain', lector.photoMain);
                        updatePreview('videoMain', lector.videoMain);
                        updatePreview('photo1', lector.photo1);
                        updatePreview('photo2', lector.photo2);
                        updatePreview('photo3', lector.photo3);

                        // Nastaví ID lektora pro možnost smazání
                        document.getElementById('deleteLectorId').value = lector.id;
                    }
                };
                xhr.send();
            }
        }

        /**
         * Zobrazí aktuální náhled spolu s pomocnými daty.
         */
        function updatePreview(field, value) {
            var previewDiv = document.getElementById(field + 'Preview');
            previewDiv.innerHTML = '';
            if (value) {
                if (field.includes('photo')) {
                    previewDiv.innerHTML = '<img id="' + field + 'Img" src="../' + value + '" alt="' + field + '"><label><input type="checkbox" name="delete' + capitalizeFirstLetter(field) + '" value="1"> Smazat ' + field + '</label>';
                } else if (field.includes('video')) {
                    previewDiv.innerHTML = '<video src="../' + value + '" controls></video><label><input type="checkbox" name="delete' + capitalizeFirstLetter(field) + '" value="1"> Smazat ' + field + '</label>';
                }
            }
        }

        /**
         * Inicializuje Cropper.js pro hlavní fotku.
         */
        function initializeCropper(imgId) {
            const img = document.getElementById(imgId);
            const cropper = new Cropper(img, {
                aspectRatio: 2 / 3,
                viewMode: 1,
                autoCropArea: 1,
                cropBoxResizable: true,
                cropBoxMovable: true,
                ready: function() {
                    cropper.setCropBoxData({
                        width: 200,
                        height: 300
                    });
                }
            });
            document.getElementById('cropButton').addEventListener('click', function() {
                const canvas = cropper.getCroppedCanvas({
                    width: 200,
                    height: 300
                });
                document.getElementById('croppedPhotoMain').value = canvas.toDataURL().split(',')[1];
                cropper.destroy();
                img.style.display = 'none';
                this.style.display = 'none';
            });
        }

        /**
         * Pomocná funkce pro estetiku na admin panelu.
         */
        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        /**
         * Po výběru nové hlavní fotky zobrazí náhled a aktivuje ořez.
         */
        document.getElementById('photoMain').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = document.getElementById('photoMainPreview');
                    img.innerHTML = '<img id="photoMainImg" src="' + event.target.result + '" style="max-width:100%; max-height:500px;" />'; // Increase the max height
                    document.getElementById('cropButton').style.display = 'block';
                    initializeCropper('photoMainImg');
                };
                reader.readAsDataURL(file);
            }
        });

        function confirmDelete() {
            if (confirm('Opravdu chcete smazat tohoto lektora?')) {
                document.getElementById('deleteLectorForm').submit();
            }
        }
    </script>
</body>

</html>