<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/navigationBar.css" type="text/css">
    <link rel="stylesheet" href="css/condition.css" type="text/css">
    <script src="https://kit.fontawesome.com/e0ade2e31e.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
        integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />

    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="index.php">Mapa</a></li>
        <li><a href="configurator.php">Konfigurátor topologie</a></li>
        <li><a class="active" href="#"><i class="fa-solid fa-screwdriver-wrench"></i></a></li>
        <li><a href="update.php"><i class="fa-solid fa-rotate"></i></a></li>
        <li><a href="backup.php"><i class="fa-solid fa-cloud-arrow-up"></i></a></li>
        <li onclick="napoveda()"><a href="#"><i class="fa-solid fa-question"></i></a></li>
    </ul>

    <div class="text"></div>
    <div id="map"></div>

    <div class="formular"></div>
    <div class="tabulka"></div>

    <div class="detail"></div>


    <?php
    include "php/_CONSTANTS.php";
    include "php/mySQLSetup.php";
    include "php/loadAllFromSQL.php";
    ?>

    <script>
        function napoveda() {
            Swal.fire({
                title: '<strong>Nápověda</strong>',
                icon: 'info',
                width: '75%',
                html:
                    '<div class="swal2-html-container">' +
                    '<strong><u>Nastavení filtru: </u></strong>' +
                    '<ol>' +
                    '<li class="swal2-li">Filtr se nastavuje pomocí formuláře v pravém horním rohu stránky.</li>' +
                    '<li class="swal2-li">V rozbalovací nabídce <i><b>\"Topologie\"</i></b> lze vybrat buď konkrétní topologii, nebo volbou <b>\"Všechny topologie\"</b> všechny topologie. <i>V nabídce se zobrazují pouze topologie, které obsahují nějaké spoje!</i></li>' +
                    '<li class="swal2-li">Do políčka <i><b>\"Koeficient\"</i></b> je nutné zadat hodnotu, podle které se budou spoje filtrovat.</li>' +
                    '</ol>' +
                    '</div>' +
                    '<div class="swal2-html-container">' +
                    '<strong><u>Odeslání formuláře: </u></strong>' +
                    '<ol>' +
                    '<li class="swal2-li">Je-li pod formulářem políčko <i><b>\"Potvrdit odeslání formuláře\"</i></b>, tak odeslání formuláře prověďte jeho stisknutím.</li>' +
                    '<li class="swal2-li">Je-li pod formulářem tabulka, najetím na hlavičku do sloupce <i><b>\"Spoj\"</i></b> dojde k zobrazení možnosti <i><b>\"Potvrdit odeslání formuláře\"</i></b>. Kliknutím na tuto možnost dojde k odeslání formuláře.</li>' +
                    '</ol>' +
                    '</div>' +
                    '<div class="swal2-html-container">' +
                    '<strong><u>Informace o koeficientu konkrétního spoje: </u></strong>' +
                    '<ol>' +
                    '<li class="swal2-li">Vyfiltrované spoje jsou zobrazeny v tabulce pod formulářem.</li>' +
                    '<li class="swal2-li">Kliknutím na konkrétní spoj dojde k vykreslení další tabulky pod mapou. Tato tabulka zobrazuje informace o dílčích parametrech spoje. Zároveň se mapa vycentruje na spoj a zobrazí se v ní okno s detailními informacemi o spoji.</li>' +
                    '</ol>' +
                    '</div>' +
                    '<div class="swal2-html-container">' +
                    '<strong><u>Interakce s mapou: </u></strong>' +
                    '<ol>' +
                    '<li class="swal2-li">Podklad mapy lze měnit pomocí rozbalovací nabídky v pravém horním rohu mapy.</li>' +
                    '<li class="swal2-li">Při kliknutí na vykreslený objekt dojde k rozbalení okna, jenž zobrazuje informace o konkrétním objektu.</li>' +
                    '</ol>' +
                    '</div>',
                showCloseButton: true,
                focusConfirm: false,
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Díky, už to chápu!',
                customClass: {
                    title: 'swal-title',
                    popup: 'swal-popup',
                    closeButton: 'swal-close-button',
                    confirmButton: 'swal-button'
                }
            })
        }
    </script>


</body>

</html>


<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
    integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>

<script type="module">
    import * as Objekty from "./js/object.js";
    const Constants = <?php echo json_encode($all_vars); ?>;
    import * as FunkceMapy from './js/mapa.js';
    import { Tabulka, pridatRadek } from './js/tabulka.js';
    import { Formular, odstranitFormular, formularUpdateLabel, formularUpdateInput, upravitProgressBar, odstranitVsechnyFormulare } from './js/formular.js';
    import { createButton, zobrazitHlasku } from './js/configurator.js';

    // Proměnné pro marker
    let sirkaMarkeru = window.innerWidth * 0.0075;
    let pomerStranMarkeru = Constants.POMER_STRAN_MARKERU;
    if (sirkaMarkeru < 10) sirkaMarkeru = 10;
    if (sirkaMarkeru > 18) sirkaMarkeru = 18;
    Constants.markerIconBlack = L.icon({                 // Černý marker
        iconUrl: 'markerIcon.png',
        iconSize: [sirkaMarkeru, sirkaMarkeru * pomerStranMarkeru],
        iconAnchor: [sirkaMarkeru / 2, sirkaMarkeru * pomerStranMarkeru]       // Nastavení "souřadnic" špičky markeru vzhledem k levému hornímu rohu
    });

    // Funguje pouze v případě vypnutého anonymního módu
    if (!Constants.ANONYMOUS_MODE) {


        var vysledekSQLTopologie = <?php echo json_encode($navratovaHodnotaTopologie); ?>;
        var vysledekSQLSpoje = <?php echo json_encode($navratovaHodnotaSpoje); ?>;
        var vysledekSQLStanice = <?php echo json_encode($navratovaHodnotaStanice); ?>;

        var poleTopologii = <?php echo json_encode($poleTopologii); ?>;
        var poleSpoju = <?php echo json_encode($poleSpoju); ?>;
        var poleStanic = <?php echo json_encode($poleStanic); ?>;


        if (poleSpoju.length > 0) {

            Objekty.Topologie.vytvoritTopologieSQL(poleTopologii);
            Objekty.Stanice.vytvoritStaniceSQL(poleStanic);
            Objekty.Spoj.vytvoritSpojeSQL(poleSpoju);


            Objekty.poleTopologii.forEach(topologie => {
                Objekty.poleStanic.forEach(stanice => {
                    if (stanice.nazevTopologie == topologie.nazev) topologie.poleStanic.push(stanice);
                })

                Objekty.poleSpoju.forEach(spoj => {

                    if (spoj.topologie == topologie.nazev) {
                        topologie.poleSpoju.push(spoj);
                    }
                })
            })

            if (Constants.LOGOVANI) {

                console.log(vysledekSQLTopologie);
                console.log(vysledekSQLSpoje);
                console.log(vysledekSQLStanice);
                console.log("\n");

                console.log("Načtená data z mySQL:");
                console.log("Topologie");
                console.log(poleTopologii);
                console.log("Spoje");
                console.log(poleSpoju);
                console.log("Stanice");
                console.log(poleStanic);
                console.log("\nVytvořené objekty:");
                console.log(Objekty.poleTopologii);
            }


            Objekty.poleTopologii.forEach(topologie => {
                topologie.poleStanic.sort(function (a, b) {
                    return a.poradi - b.poradi;
                });
                for (let i = 0; i < topologie.poleStanic.length; i++) {
                    topologie.poleStanic[i].poradi = i + 1;
                }
            })


            const tabulkaContainer = document.querySelector(".tabulka");
            const detailContainer = document.querySelector(".detail");
            const formularContainer = document.querySelector(".formular");
            const map = FunkceMapy.nacistMapu(49.195061, 16.606836, 16);


            var vybranaTopologie = Objekty.poleTopologii; var lastKoef; var spoje = [];
            var blockHandle = false;            // pomocná proměnná   

            // Vytvoření formuláře pro výběr filtru
            var formular = new Formular(Constants, "condition", null, Objekty.poleTopologii);
            formularContainer.appendChild(formular.form);
            // Zvýraznění nevyplněného pole koeficient
            formularUpdateInput(formular.koeficientInput, "", "", "", "lightcoral", "");

            // Vytvoření tabulky se spoji (zpočátku obsahuje jen klikací hlavičku, která slouží jako submit button pro formulář)
            var tabulkaSpoju = new Tabulka(Constants, "condition", undefined, Objekty.poleTopologii, map);
            tabulkaContainer.appendChild(tabulkaSpoju.tabulka);
            var tabulkaDetail = undefined;


            // Reakce na změnu hodnoty koeficientu
            formular.koeficientInput.addEventListener("input", function (event) {
                // Pokud není vyplněna hodnota koeficientu nebo je mimo meze, bude toto políčko zvýrazněno
                if (formular.koeficientInput.value == "" || formular.koeficientInput.value < 0 || formular.koeficientInput.value > 1) {
                    formularUpdateInput(formular.koeficientInput, "", "", "", "lightcoral", "");
                    tabulkaSpoju.nadpis.style.cursor = "not-allowed";
                } else {
                    formularUpdateInput(formular.koeficientInput, "", "", "", "", "");
                    tabulkaSpoju.nadpis.style.cursor = "pointer";
                }

            });

            // Přidání event Listenerů pro tabulku
            eventListeners(tabulkaSpoju);

            function eventListeners(tabulka) {
                tabulka.nadpis.addEventListener("click", function (event) {
                    // Zablokuje eventlistener, který reaguje na kliknutí na jakýkoliv prvek tabulky
                    blockHandle = true;
                    // Pokud není vyplněna hodnota koeficientu nebo je mimo meze, bude toto políčko zvýrazněno a nic dalšího nebude provedeno
                    if (formular.koeficientInput.value == "" || formular.koeficientInput.value < 0 || formular.koeficientInput.value > 1) {
                        formularUpdateInput(formular.koeficientInput, "", "", "", "lightcoral", "");
                        tabulka.nadpis.style.cursor = "not-allowed";
                        blockHandle = false;
                        return;
                    } else {
                        // Pokud je vybraná topologie a koeficient stejný, neprovede se nic
                        if (formular.topologieSelect.selectedIndex == 0 && vybranaTopologie == Objekty.poleTopologii && formular.koeficientInput.value == lastKoef){
                            blockHandle = false;
                            return;
                        } 
                        if (formular.topologieSelect.selectedIndex != 0 && vybranaTopologie.nazev == formular.topologieSelect.value && formular.koeficientInput.value == lastKoef){
                            blockHandle = false;
                            return;
                        }

                        lastKoef = formular.koeficientInput.value;

                        // Všechny spoje a stanice jsou z mapy odstraněny
                        spoje.forEach(spoj => {

                            // Odebrání spoje
                            FunkceMapy.skrytSpoj(spoj, null, null, false, map);

                            // Odebrání stanic
                            if (spoj.A.visible) FunkceMapy.skrytBod(spoj.A, null, null, false, map);
                            if (spoj.B.visible) FunkceMapy.skrytBod(spoj.B, null, null, false, map);

                        })

                        // Tabulka je odstraněna
                        tabulkaContainer.removeChild(tabulka.tabulka);
                        if (tabulkaDetail != undefined) {
                            detailContainer.removeChild(tabulkaDetail.tabulka);
                            tabulkaDetail = undefined;
                        }

                        // Pole spojů je vyprázdněno
                        spoje = [];

                        // Pokud byly vybrány všechny topologie
                        if (formular.topologieSelect.selectedIndex == 0) {
                            // Prochází se všechny spoje, a pokud je koeficient spoje menší nebo roven zadanému koeficientu, je tento spoj přidán do pole spoje
                            Objekty.poleSpoju.forEach(spoj => {
                                if (spoj.koeficient <= formular.koeficientInput.value) spoje.push(spoj);
                            })

                            vybranaTopologie = Objekty.poleTopologii;

                        } else {
                            // Pokud byla vybrána určitá topologie, prochází se všechny její spoje, a pokud je koeficient spoje menší nebo roven zadanému koeficientu, je tento spoj přidán do pole spoje
                            for (let i = 0; i < Objekty.poleTopologii.length; i++) {
                                if (Objekty.poleTopologii[i].nazev == formular.topologieSelect.value) {
                                    vybranaTopologie = Objekty.poleTopologii[i];
                                    break;
                                }
                            }

                            // Pokud topologie obsahuje n stanic, mapa se vycentruje na stanici s n/2
                            if (vybranaTopologie.poleStanic.length > 0) map.setView([vybranaTopologie.poleStanic[(vybranaTopologie.poleStanic.length / 2).toFixed(0)].lat, vybranaTopologie.poleStanic[(vybranaTopologie.poleStanic.length / 2).toFixed(0)].long], 13);


                            vybranaTopologie.poleSpoju.forEach(spoj => {
                                if (spoj.koeficient <= formular.koeficientInput.value) spoje.push(spoj);
                            })
                        }

                        // Vykreslení stanic a spojů do mapy
                        let stanicekVykresleni = [];
                        spoje.forEach(spoj => {
                            // Pokud už byl spoj vykreslen, je definována jeho čára, kterou stačí přidat do mapy. Pokud ne, je potřeba ji vygenerovat.
                            if (spoj.polyline != undefined) FunkceMapy.zobrazitSpoj(spoj, null, null, false, map);
                            else FunkceMapy.vykreslitCestu(Constants, spoj, map);

                            // Následující kód řeší vykreslení stanic. Pokud stanice není na mapě:
                            // Pokud už někdy vykreslena byla, je definován její marker, který stačí přidat do mapy. Pokud ne, je potřeba jej vygenerovat.
                            if (!spoj.A.visible) {
                                if (spoj.A.marker != undefined) FunkceMapy.zobrazitBod(spoj.A, null, null, false, map);
                                else stanicekVykresleni.push(spoj.A);
                            }

                            if (!spoj.B.visible) {
                                if (spoj.B.marker != undefined) FunkceMapy.zobrazitBod(spoj.B, null, null, false, map);
                                else stanicekVykresleni.push(spoj.B);
                            }
                        })

                        if (stanicekVykresleni.length > 0) FunkceMapy.vykreslitStanice(Constants, stanicekVykresleni, map, Constants.markerIconBlack);

                        // Pokud nebyly vykresleny žádné spoje, vypíše se hláška + na stránce zůstane pouze úvodní tabulka
                        // Vytvoření tabulky se spoji (zpočátku obsahuje jen klikací hlavičku, která slouží jako submit button pro formulář)
                        if (spoje.length == 0) {
                            tabulkaSpoju = new Tabulka(Constants, "condition", undefined, Objekty.poleTopologii, map);
                            tabulkaContainer.appendChild(tabulkaSpoju.tabulka);
                            zobrazitHlasku(Constants, Constants.CONDITIONERROR, null, "error", "false", Constants.HLASKADURATION);
                        } else {
                            // Vykreslení tabulky - zvláštní případ:
                            // Parametr vybranaTopologie je pouze informativní, zda-li se jedná o první formulář či nikoliv
                            // Místo parametru poleTopologií se zde předává poleSpojů k vypsání a obsluze
                            tabulkaSpoju = new Tabulka(Constants, "condition", "Does not matter", spoje, map);
                            tabulkaContainer.appendChild(tabulkaSpoju.tabulka);
                        }
                        // Přidání event Listenerů pro tabulku
                        eventListeners(tabulkaSpoju);

                        // Bug fix, který způsoboval problémy při změně filtru a zobrazeném detailu o spoji
                        tabulka.tabulka.kliknutySpoj = undefined;
                        blockHandle = false;

                    }

                });

                // Reakce na kliknutí do tabulky - zobrazení detailů o spoji
                tabulka.tabulka.addEventListener("click", function (event) {
                    // Pokud bylo kliknuto na hlavičku tabulky, tak její obslužná funkce zablokuje provádění této funkce, dokud nedojde k dokončení obsluhy
                    // události
                    if (blockHandle)return;
                    // Pokud není vybrán žádný spoj a je vykreslena tabulka, tak bude tabulka odstraněna
                    if (tabulka.tabulka.kliknutySpoj == undefined) {
                        if (tabulkaDetail != undefined) {
                            detailContainer.removeChild(tabulkaDetail.tabulka);
                            tabulkaDetail = undefined;
                        }
                    } else {
                        // Pokud je vybrán spoj, vykreslí se nová tabulka, otevře se popUP spoje a mapa se na něj vycentruje
                        let lat = parseFloat(tabulka.tabulka.kliknutySpoj.A.lat) + parseFloat(tabulka.tabulka.kliknutySpoj.B.lat);
                        let long = parseFloat(tabulka.tabulka.kliknutySpoj.A.long) + parseFloat(tabulka.tabulka.kliknutySpoj.B.long);
                        map.setView([lat/2, long/2], 15);
                        tabulka.tabulka.kliknutySpoj.polyline.openPopup();

                        if (tabulkaDetail != undefined) {
                            detailContainer.removeChild(tabulkaDetail.tabulka);
                            tabulkaDetail = undefined;
                        }

                        let koeficient = new Objekty.Koeficient(Constants, tabulka.tabulka.kliknutySpoj, true);
                        // Vykreslení tabulky - zvláštní případ:
                        // Místo parametru vybranaTopologie se zde předává objekt koeficient
                        tabulkaDetail = new Tabulka(Constants, "detail", koeficient, null, null);
                        detailContainer.appendChild(tabulkaDetail.tabulka);

                    }
                });
            }
        } else {
            // Hláška o žádném spoji v DB
            const textContainer = document.querySelector(".text");
            textContainer.innerHTML = "<b>Databáze neobsahuje žádné spoje.</i>";
            textContainer.style.marginTop = '10vh';
        }
    } else {
        // Hláška o anonymním módu
        const textContainer = document.querySelector(".text");
        textContainer.style.marginTop = '10vh';
        textContainer.innerHTML = Constants.ANONYMOUS_MODE_HLASKA;
    }


</script>