<!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/style.css" type="text/css">
  <script src="https://kit.fontawesome.com/e0ade2e31e.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
    integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <title>Mapa</title>
</head>

<body>
  <ul>
    <li><a class="active" href="#">Mapa</a></li>
    <li><a href="configurator.php">Konfigurátor topologie</a></li>
    <li><a href="condition.php"><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="tabulka"></div>
  <div class="tlacitka"></div>

  <!-- <div id ="tlacitko">
    <input onclick="change()" type="button" value="Skrýt všechny stanice" id="buttonShowHideAll" />
  </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>Ovládání: </u></strong>' +
          '<ol>' +
          '<li class="swal2-li">Na záložce <i><b>\"Přehled Topologií"</i></b> <b style=\"color:red\">vyberte</b> cílovou topologii <b style=\"color:red\">kliknutím do tabulky <u>se stisknutou klávesou Ctrl</u></b> na její název.</li>' +
          '<li class="swal2-li">Vybranou topologii lze poznat tak, že její název je v tabulce zvýrazněn tučným písmem + lze interagovat s tlačítkem <i><b>\"Detail Topologie\"</i></b></li>' +
          '<li class="swal2-li">Tlačítko stanice lze použít pouze tehdy, jsou-li ve <b>vybrané</b> topologii nějaké stanice. </li>' +
          '<li class="swal2-li">Tlačítko spoje lze použít pouze tehdy, jsou-li ve <b>vybrané</b> topologii nějaké spoje. </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>' +
          '<li class="swal2-li">Klikáním do tabulky na stránce <i><b>\"Přehled Topologií"</i></b> lze z mapy skrývat <i><b>jednotlivé topologie</i></b>.</li>' +
          '<li class="swal2-li">Klikáním do tabulky na stránce <i><b>\"Spoje"</i></b> lze z mapy skrývat <i><b>jednotlivé spoje</i></b> v rámci dané topologie.</li>' +
          '<li class="swal2-li">Klikáním do tabulky na stránce <i><b>\"Stanice"</i></b> lze z mapy skrývat <i><b>jednotlivé stanice</i></b> v rámci dané topologie.</li>' +
          '<li class="swal2-li">Kliknutím do <b>hlavičky</b> tabulky lze z mapy objekty skrývat <b>hromadně</b>.</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 { createButton, zvyrazneniStisknutehoTlacitka, removeAllButtons, errorHlaska, hlaska, getTypTopologieIndex, shodnySpoj, formularSetDataForSpoj, formularSpojUpdateInput } 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
  });

  // Pokud je zapnut anonymní režim, stránka nebude funkční
  // Načtení dat z mySQL databáze
  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 (poleStanic.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 formularContainer = document.querySelector(".formular");
      const map = FunkceMapy.nacistMapu(49.195061, 16.606836, 16);

      var aktivniTabulka = undefined;
      var tabulkaVsechTopologii = new Tabulka(Constants, "vsechnyTopologie", null, Objekty.poleTopologii, map);
      var tabulkaStanic = undefined; var tabulkaTopologie = undefined; var tabulkaSpoju = undefined;
      var vybranaTopologie = undefined;


      // Funkce pro tvorbu tlačítek pro přepínání stránek
      var aktivniStrankaButton;
      var poleTlacitekStranek = [];
      var poleNazvu = ["Přehled topologií", "Detail Topologie", "Spoje", "Stanice"];
      var aktivniStranka = poleNazvu[0];




      // Pokud byla načtena nějaká data, bude stránka funční
      if (Objekty.poleTopologii.length != 0) {

        // Vykreslení všech topologií
        FunkceMapy.zobrazitVsechnyTopologie(Constants, Objekty.poleTopologii, map);

        // Vykreslení tlačítek
        vytvoritTlacitkaStranek();

        // Vykreslení tabulky se seznamem všech topologií
        tabulkaContainer.appendChild(tabulkaVsechTopologii.tabulka);
        aktivniTabulka = tabulkaVsechTopologii;

        // Reakce na kliknutí na tabulku. Detekuje, zda-li uživatel vybral nějakou konkrétní topologii
        aktivniTabulka.tabulka.addEventListener("click", function (event) {

          // Detekce změny vybrané topologie
          if (vybranaTopologie != aktivniTabulka.tabulka.kliknutaTopologie) {
            vybranaTopologie = aktivniTabulka.tabulka.kliknutaTopologie;
          }

          // Podle vlastností vybrané topologie rozhodne o možnostech volby

          // Pokud není vybraná žádná topologie, zablokuje volby detail topologie, spoje a stanice
          if (vybranaTopologie == undefined) {
            zablokovatTlacitko(poleTlacitekStranek[1], true);
            zablokovatTlacitko(poleTlacitekStranek[2], true);
            zablokovatTlacitko(poleTlacitekStranek[3], true);
          } else {
            zablokovatTlacitko(poleTlacitekStranek[1], false);

            // Obsahuje-li topologie spoje - bude zpřístupněno tlačítko spoje
            if (vybranaTopologie.poleSpoju.length > 0) zablokovatTlacitko(poleTlacitekStranek[2], false);
            else zablokovatTlacitko(poleTlacitekStranek[2], true);

            // Obsahuje-li topologie stanice - bude zpřístupněno tlačítko stanice
            if (vybranaTopologie.poleStanic.length > 0) zablokovatTlacitko(poleTlacitekStranek[3], false)
            else zablokovatTlacitko(poleTlacitekStranek[3], true)

          }

        });

      }


      function zablokovatTlacitko(tlacitko, zablokovat) {
        if (tlacitko == undefined) return;

        if (zablokovat) {
          tlacitko.disabled = true;
          tlacitko.style.cursor = "not-allowed";
          tlacitko.style.backgroundColor = "gray";
          tlacitko.style.color = "white";
        } else {
          tlacitko.disabled = false;
          tlacitko.style.cursor = "";
          tlacitko.style.backgroundColor = "";
          tlacitko.style.color = "";
        }
      }

      //Funkce pro obsluhu stisknutí tlačítka pro přepínání stránek
      function strankaButtonPressed(button, nazev, aktivniButton) {

        // Pokud uživatel nemá vybranou topologii, není co zobrazovat
        if (vybranaTopologie == undefined) return;

        // Pokud byla pro danou stránku vykreslena i tabulka, dojde k jejímu smazání
        if (aktivniTabulka != undefined) {
          tabulkaContainer.removeChild(aktivniTabulka.tabulka);
          aktivniTabulka = undefined;
        }

        // Konkrétní kód pro jednotlivá tlačíka (stránky)
        switch (nazev) {
          // Přehled všech topologií
          case poleNazvu[0]:
            // Vykreslení tabulky se seznamem všech topologií (již existuje a nebude se měnit, není tedy třeba její konstrukce)
            tabulkaContainer.appendChild(tabulkaVsechTopologii.tabulka);
            aktivniTabulka = tabulkaVsechTopologii;

            // Na mapu jsou vykresleny všechny topologie
            FunkceMapy.zobrazitVsechnyTopologie(Constants, Objekty.poleTopologii, map);

            break;

          // Informace o konkrétní topologii
          case poleNazvu[1]:
            // Vykreslení tabulky s informacemi o konkrétní topologii
            tabulkaTopologie = new Tabulka(Constants, "topologie", vybranaTopologie, Objekty.poleTopologii, map)
            tabulkaContainer.appendChild(tabulkaTopologie.tabulka);
            aktivniTabulka = tabulkaTopologie;

            // Všechny ostatní topologie budou z mapy odebrány
            Objekty.poleTopologii.forEach(topologie => {
              if (topologie != vybranaTopologie && topologie.visible == true) FunkceMapy.skrytTopologii(topologie, false, map);
            })

            // 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);


            break;

          case poleNazvu[2]:
            // Pokud (vybraná) topologie obsahuje nějaké spoje, tak bude vykreslena informační tabulka
            if (vybranaTopologie.poleSpoju.length != 0) {
              tabulkaSpoju = new Tabulka(Constants, "spoje", vybranaTopologie, poleTopologii, map)
              tabulkaContainer.appendChild(tabulkaSpoju.tabulka);
              aktivniTabulka = tabulkaSpoju;
            }

            // Všechny ostatní topologie budou z mapy odebrány
            Objekty.poleTopologii.forEach(topologie => {
              if (topologie != vybranaTopologie && topologie.visible == true) FunkceMapy.skrytTopologii(topologie, false, map);
            })

            break;

          case poleNazvu[3]:
            // Pokud (vybraná) topologie obsahuje nějaké stanice,  tak bude vykreslena informační tabulka
            if (vybranaTopologie.poleStanic.length != 0) {
              tabulkaStanic = new Tabulka(Constants, "stanice", vybranaTopologie, poleTopologii, map)
              tabulkaContainer.appendChild(tabulkaStanic.tabulka);
              aktivniTabulka = tabulkaStanic;
            }

            // Všechny ostatní topologie budou z mapy odebrány
            Objekty.poleTopologii.forEach(topologie => {
              if (topologie != vybranaTopologie && topologie.visible == true) FunkceMapy.skrytTopologii(topologie, false, map);
            })
            break;
        }
      }


      function vytvoritTlacitkaStranek() {
        for (let i = 0; i < poleNazvu.length; i++) {
          poleTlacitekStranek[i] = createButton(Constants, "tlacitka", poleNazvu[i], poleNazvu[i]);

          // Ve výchozím stavu bude tlačítko zablokované, protože není vybrána žádná topologie
          if (i != 0) zablokovatTlacitko(poleTlacitekStranek[i], true);

          // Obsluha stisknutí tlačítka
          poleTlacitekStranek[i].onclick = function () {
            if (aktivniStrankaButton != poleTlacitekStranek[i]) {
              // Pokud existuje aktivní tabulka, tak jí raději nastaví na tabulku, která byla na předchozí stránce očekávána
              if (aktivniTabulka != undefined) {
                switch (aktivniStranka) {
                  case poleNazvu[0]:
                    aktivniTabulka = tabulkaVsechTopologii;
                    break;
                  case poleNazvu[1]:
                    aktivniTabulka = tabulkaTopologie;
                    break;
                  case poleNazvu[2]:
                    aktivniTabulka = tabulkaSpoju;
                    break;
                  case poleNazvu[3]:
                    aktivniTabulka = tabulkaStanic;
                    break;

                }
              }
              // Stisknuté tlačítko je zvýrazněno
              zvyrazneniStisknutehoTlacitka(poleTlacitekStranek[i], aktivniStrankaButton);
              // Obsluha stisknutí konkrétního tlačítka
              strankaButtonPressed(poleTlacitekStranek[i], poleNazvu[i], aktivniStrankaButton);
              aktivniStrankaButton = poleTlacitekStranek[i];
              aktivniStranka = poleNazvu[i];
            }
          };
        }

        // Nápovědy:
        poleTlacitekStranek[0].title = "Zobrazí tabulku všech topologií.";
        poleTlacitekStranek[1].title = "Zobrazí detailní informace o vybrané topologii. Topologii vyberte na kartě \"" + poleTlacitekStranek[0].innerHTML + "\" kliknutím na konkrétní topologii v tabulce se stisknutou klávesou Ctrl";
        poleTlacitekStranek[2].title = "Zobrazí tabulku všech spojů vybrané topologie. Funguje pouze, pokud má topologie nějaké spoje. Topologii vyberte na kartě \"" + poleTlacitekStranek[0].innerHTML + "\" kliknutím na konkrétní topologii v tabulce se stisknutou klávesou Ctrl";
        poleTlacitekStranek[3].title = "Zobrazí tabulku všech stanic vybrané topologie. Funguje pouze, pokud má topologie nějaké stanice. Topologii vyberte na kartě \"" + poleTlacitekStranek[0].innerHTML + "\" kliknutím na konkrétní topologii v tabulce se stisknutou klávesou Ctrl";
      }
    } else {
      // Hláška o prázdných datech
      const textContainer = document.querySelector(".text");
      textContainer.style.marginTop = '10vh';
      textContainer.innerHTML = "<b>V DB nebyla nalezena žádná data k vykreslení.</i>";
    }
  } else {
    // Hláška o anonymním módu
    const textContainer = document.querySelector(".text");
    textContainer.style.marginTop = '10vh';
    textContainer.innerHTML = Constants.ANONYMOUS_MODE_HLASKA;
  }

</script>