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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QUASSI P2000 Meldingen</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Fira Code -->
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
      /* Voeg Fira Code toe als monospace-font in Tailwind */
      @layer base {
          body {
              font-family: 'Fira Code', monospace;
          }
      }
  </style>
</head>

<body>
  
  <!-- HEADER -->
  <nav class="bg-gray-900 border-gray-700 dark:bg-gray-900 dark:border-gray-700">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
          <!--<img src="https://assets.quassi.nl/logo/logo_full_transparant_400.png" class="h-10" alt="QUASSI P2000 Meldingen" />-->
          <span class="text-white self-center text-3xl font-semibold whitespace-nowrap dark:text-black">QUASSI P2000 Meldingen</span>
      </a>
      <div id="status" class="text-white self-center text-sm font-semibold whitespace-nowrap dark:text-black">Connecting...</div>
      
      <div id="count" class="text-white self-center text-sm font-semibold whitespace-nowrap dark:text-black">0</div>

      <div class="p-4">
        <button 
          id="soundButton" 
          class="px-4 py-2 bg-blue-500 text-white rounded-md"
          onclick="toggleSound()">
          GELUID
        </button>
      </div>
      
      <div class="p-4">
        <button id="openSettingsRegios"
         class="px-4 py-2 bg-blue-500 text-white rounded-md">
          Regio's
        </button>
      </div>

      <div class="p-4">
        <button id="openSettingsDisciplines"
         class="px-4 py-2 bg-blue-500 text-white rounded-md">
          Disciplines
        </button>
      </div>
    </div>
    
  </nav>




  <!-- Overlay Discipline -->
  <div id="overlayDisciplines" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 hidden flex justify-center items-start mt-20 z-50">
    <div class="bg-white p-6 rounded-lg w-96">
      <h2 class="text-xl font-bold mb-4">Instellingen</h2>
      <div class="space-y-4">
        <!-- Checkbox Settings -->
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Brandweer" class="form-checkbox" CHECKED>
            <span>Brandweer</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Ambulance" class="form-checkbox" CHECKED>
            <span>Ambulance</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Politie" class="form-checkbox" CHECKED>
            <span>Politie</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_MMT" class="form-checkbox" CHECKED>
            <span>MMT</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_KNRM" class="form-checkbox" CHECKED>
            <span>KNRM</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Bruggen" class="form-checkbox" CHECKED>
            <span>Bruggen</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Test" class="form-checkbox" CHECKED>
            <span>Test</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="discipline_Onbekend" class="form-checkbox" CHECKED>
            <span>Onbekend</span>
          </label>
        </div>
      </div>
      <div class="mt-6 flex justify-end space-x-4">
        <button id="closeOverlayD" class="px-4 py-2 bg-gray-300 rounded-md">Annuleren</button>
        <button id="saveSettingsD" class="px-4 py-2 bg-green-500 text-white rounded-md">Opslaan</button>
      </div>
    </div>
  </div>




  <!-- Overlay Regio's -->
  <div id="overlayRegios" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-start mt-20 z-50">
    <div class="bg-white p-6 rounded-lg w-128">
      <h2 class="text-xl font-bold mb-4">Instellingen</h2>
      <div class="grid grid-cols-4 gap-4">
        <!-- Checkbox Settings -->
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Groningen" class="form-checkbox" CHECKED>
            <span>01 - Groningen</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Friesland" class="form-checkbox" CHECKED>
            <span>02 - Friesland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Drenthe" class="form-checkbox" CHECKED>
            <span>03 - Drenthe</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_IJsselland" class="form-checkbox" CHECKED>
            <span>04 - IJsselland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Twente" class="form-checkbox" CHECKED>
            <span>05 - Twente</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Noord-_en_Oost-Gelderland" class="form-checkbox" CHECKED>
            <span>06 - Noord- en Oost-Gelderland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Gelderland-Midden" class="form-checkbox" CHECKED>
            <span>07 - Gelderland-Midden</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Gelderland-Zuid" class="form-checkbox" CHECKED>
            <span>08 - Gelderland-Zuid</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Utrecht" class="form-checkbox" CHECKED>
            <span>09 - Utrecht</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Noord-Holland_Noord" class="form-checkbox" CHECKED>
            <span>10 - Noord-Holland Noord</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Zaanstreek-Waterland" class="form-checkbox" CHECKED>
            <span>11 - Zaanstreek-Waterland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Kennemerland" class="form-checkbox" CHECKED>
            <span>12 - Kennemerland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Amsterdam-Amstelland" class="form-checkbox" CHECKED>
            <span>13 - Amsterdam-Amstelland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Gooi_en_Vechtstreek" class="form-checkbox" CHECKED>
            <span>14 - Gooi en Vechtstreek</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Haaglanden" class="form-checkbox" CHECKED>
            <span>15 - Haaglanden</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Hollands-Midden" class="form-checkbox" CHECKED>
            <span>16 - Hollands-Midden</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Rotterdam-Rijnmond" class="form-checkbox" CHECKED>
            <span>17 - Rotterdam-Rijnmond</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Zuid-Holland_Zuid" class="form-checkbox" CHECKED>
            <span>18 - Zuid-Holland Zuid</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Zeeland" class="form-checkbox" CHECKED>
            <span>19 - Zeeland</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Midden-_en_West-Brabant" class="form-checkbox" CHECKED>
            <span>20 - Midden- en West-Brabant</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Brabant-Noord" class="form-checkbox" CHECKED>
            <span>21 - Brabant-Noord</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Brabant-Zuidoost" class="form-checkbox" CHECKED>
            <span>22 - Brabant-Zuidoost</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Limburg-Noord" class="form-checkbox" CHECKED>
            <span>23 - Limburg-Noord</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Limburg-Zuid" class="form-checkbox" CHECKED>
            <span>24 - Limburg-Zuid</span>
          </label>
        </div>
        <div>
          <label class="flex items-center space-x-2">
            <input type="checkbox" id="regio_Flevoland" class="form-checkbox" CHECKED>
            <span>25 - Flevoland</span>
          </label>
        </div>
      </div>
      <div class="mt-6 flex justify-end space-x-4">
        <button id="closeOverlayR" class="px-4 py-2 bg-gray-300 rounded-md">Annuleren</button>
        <button id="saveSettingsR" class="px-4 py-2 bg-green-500 text-white rounded-md">Opslaan</button>
      </div>
    </div>
  </div>
  




  <!-- MAIN CONTENT -->
  <div class="flex pt-10 justify-center min-h-screen bg-gray-800">

    <div class="bg-gray-600 w-full sm:w-4/5 md:w-3/5 rounded-lg shadow-lg p-4 sm:p-6">
      <h1 class="text-xl font-bold mb-4 text-white">P2000 meldingen</h1>
      <div id="messages" class=" z-10">
        <div class="relative mx-auto my-6 bg-gray-700 shadow-sm border border-slate-200 rounded-lg">
          <div class="flex justify-between items-center text-gray-700 p-2">
            <!--<div class="pl-2 w-20 h-4 bg-red-500 rounded-sm"></div>-->
            <div class="pl-2 w-20 h-6 bg-red-500 rounded-sm flex items-center justify-center text-white text-sm">11:09</div>
            <span class="text-sm text-slate-100">24-12-24</span>
          </div>
          <div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2">
            <h5 class="mb-2 text-slate-200 text-xl font-semibold">
              P 1 Voorbeeldalarm
            </h5>
          </div>
          <div class="p-4">
            <p class="text-slate-300 text-xs leading-normal font-light">
              <span class="inline-block w-2 h-2 bg-red-500 mr-2"></span>
              0706001 <span class="text-red-400">Monitorcode</span> / Brandweer / Utrecht
            </p>
            <p class="text-slate-300 text-xs leading-normal font-light">
              <span class="inline-block w-2 h-2 bg-red-500 mr-2"></span>
              0706947 OvD Lekstroom / Brandweer / Utrecht
            </p>
            <p class="text-slate-300 text-xs leading-normal font-light">
              <span class="inline-block w-2 h-2 bg-red-500 mr-2"></span>
              0706948 Postalarm (Houten) / Brandweer / Utrecht
            </p>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <!-- FOOTER -->
  <footer class="bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 1975-2025 <a href="https://www.quassi.nl" target="_blank" class="hover:underline">QUASSI</a>. All Rights Reserved.
    </span>
    <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
        <li>
            <a href="#" class="hover:underline me-4 md:me-6">About</a>
        </li>
        <li>
            <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
        </li>
        <li>
            <a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
        </li>
        <li>
            <a href="#" class="hover:underline">Contact</a>
        </li>
    </ul>
  </footer>


  <!-- AUDIO -->
  <audio id="p2000Sound">
    <source src="p2000sound.mp3" type="audio/mpeg">
  </audio>


  <!-- SCRIPTS -->
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

  
    <script>
      const messages = []; // Array om berichten op te slaan

// DOM element to display messages
const messageContainer = document.getElementById('messages');

var brokerUrl;
var options;

brokerUrl = "wss://mqtt.p2000.quassi.nl:19002"; // WebSocket URL for Mosquitto

options = {
    username: "p2000",         // MQTT username
    password: "p2000",         // MQTT password
    keepalive: 60,             // Keep alive interval in seconds
    reconnectPeriod: 1000,     // Reconnection interval in ms
    rejectUnauthorized: false, // Alleen voor tests; schakel dit uit in productie
    clientId: `mqtt_${Math.random().toString(16).substr(2, 8)}` // Unique client ID
};

// Create MQTT client and connect
const client = mqtt.connect(brokerUrl, options);


// --------------------------------
// ---- Event: Successful connection
// --------------------------------
client.on('connect', () => {
    document.getElementById('status').textContent = "P2K-server connected";
    console.log("Connected to MQTT broker");

    // Subscribe to the Server topic
    //const topic = "P2000/+/#";
    //const topics = ['P2000/Server', 'P2000/+/Brandweer', 'P2000/+/Ambulance', 'P2000/+/Politie', 'P2000/+/Test', 'P2000/+/Onbekend'];
    const topics = ['P2000/Server/#'];
    topics.forEach(topic => {
      client.subscribe(topic, (err) => {
          if (err) {
              console.error(`Failed to subscribe to topic: ${topic}`, err);
          } else {
              console.log(`Subscribed to topic: ${topic}`);
          }
      });
    });

    // Subscribe to the default topics
    DisciplineSubscribeUnsubscribe();

});

// --------------------------------
// ---- Event: Receive message
// --------------------------------
client.on('message', (topic, message) => {
  //console.log(`Message received on topic ${topic}: ${message.toString()}`);  
 
  if (message.length > 0 )
  {

    if (sound)
    {
      var x = document.getElementById("p2000Sound"); 
      x.play();
    }

    var json;

    try {
      json = JSON.parse(message.toString());
      
      // Voeg bericht toe aan de array
      messages.push(json);
      
      // Sorteer de berichten op basis van datum en tijd
      messages.sort((a, b) => {
          const dateA = new Date(`${formatDate(a.Date, a.Time)}`);
          const dateB = new Date(`${formatDate(b.Date, b.Time)}`);
          return dateB - dateA; // Aflopende volgorde
      });
      document.getElementById('count').textContent = messages.length + ` (${messages[0].Time.split(":").slice(0, 2).join(":")} - ${messages[messages.length-1].Time.split(":").slice(0, 2).join(":")})`;
      
      // Leeg de container
      messageContainer.innerHTML = '';
      
      // Voeg gesorteerde berichten toe aan de UI
      messages.slice(0, 20).forEach(msg => {
      //messages.forEach(msg => {
          const msgDiv = document.createElement('div');
          msgDiv.classList.add('message');
          msgDiv.innerHTML = `
            <div class="relative mx-auto my-6 bg-gray-700 shadow-sm border border-slate-200 rounded-lg">
              <div class="flex justify-between items-center text-gray-700 p-2">
                <div class="pl-2 w-20 h-6 bg-${msg.Colour}-500 rounded-sm flex items-center justify-center text-white text-sm">
                  ${msg.Time.split(":").slice(0, 2).join(":")}
                </div>
                <span class="text-sm text-slate-100">
                  ${formatDateString(msg.Date)}
                </span>
              </div>
              <div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">
                <h5 class="mb-2 text-slate-200 text-xl font-semibold">
                  ${msg.MessageText}
                </h5>
              </div>
              <div class="p-4">
                ${msg.Capcodes.map(capcode => `
                  <p class="text-slate-300 leading-normal font-light">
                    <span class="inline-block w-2 h-2 bg-${capcode.Colour}-500 mr-2"></span>  
                    ${capcode.CapcodeNr} - ${capcode.Omschrijving} ${capcode.Plaats ? `(<i>${capcode.Plaats}</i>)` : ""}
                  </p>
                `).join('')}
              </div>
              <div class="flex justify-between items-center text-gray-700 p-1">
                <div></div>
                <span class="text-xs text-slate-500">${msg.Topic}</span>
              </div>
            </div>
          `;
          messageContainer.appendChild(msgDiv); // Voeg gesorteerde berichten toe
      });
      
    } catch (error) {
      console.error("Fout bij het parsen van JSON:", error.message);
      console.error("Foutieve JSON-string:", message.toString());
    }
  }
  else
  {
    // Dit zijn de clean-up berichten 0 byte
    //console.error(`Message received on topic ${topic}; Length = : ${message.length}`);  
  }

  
});


// --------------------------------
// ---- Event: Connection error
// --------------------------------
client.on('error', (err) => {
    document.getElementById('status').textContent = "Connection Error!";
    console.error("Connection error:", err);
});


// --------------------------------
// ---- Event: Disconnected
// --------------------------------
client.on('close', () => {
    document.getElementById('status').textContent = "Disconnected.";
    console.log("Disconnected from MQTT broker");
});


// ---- Function: Format P2000 date and time
function formatDate(dateString, timeString) {
  const [day, month, year] = dateString.split('-');
  
  return new Date(`20${year}-${month}-${day}T${timeString}`);
}

// ---- Function: Leest de waarde van de Discipline checkboxs en een MQTT subscribe/unsubscribe aanroep doet
function DisciplineSubscribeUnsubscribe() {
  messages.length = 0;
  messageContainer.innerHTML = '';

  const regios = ['Groningen', 'Friesland', 'Drenthe', 'IJsselland', 'Twente', 'Noord- en Oost-Gelderland', 'Gelderland-Midden', 'Gelderland-Zuid', 'Utrecht', 'Noord-Holland Noord', 'Zaanstreek-Waterland', 'Kennemerland', 'Amsterdam-Amstelland', 'Gooi en Vechtstreek', 'Haaglanden', 'Hollands-Midden', 'Rotterdam-Rijnmond', 'Zuid-Holland Zuid', 'Zeeland', 'Midden- en West-Brabant', 'Brabant-Noord', 'Brabant-Zuidoost', 'Limburg-Noord', 'Limburg-Zuid', 'Flevoland'];
  const disc = ['Brandweer', 'Ambulance', 'Politie', 'MMT', 'KNRM', 'Bruggen', 'Test', 'Onbekend'];

  // Unsubscribe all disciplines
  regios.forEach(r => {
    disc.forEach(d => {
      const topic = "P2000/"+ r + "/" + d + "/#";

      // MQTT unsubscribe
      client.unsubscribe(topic, (err) => {
        if (err) {
          console.error(`Failed to unsubscribe to topic: ${topic}`, err);
        } else {
          //console.log(`Unsubscribed to topic: ${topic}`);
        }
      });
    });
  });

  // Subscribe only selected disciplines
  regios.forEach(r => {
    var regioID = 'regio_' + r.replace(/ /g, '_');
    //console.log(regioID);
    const isCheckedR = document.getElementById(regioID).checked;
    

    disc.forEach(d => {
      var discID = 'discipline_' + d;
    //console.log(discID);
      const isCheckedD = document.getElementById(discID).checked;
      const topic = "P2000/"+ r + "/" + d + "/#";

      if (isCheckedD && isCheckedR) {
        // MQTT subscribe
        client.subscribe(topic, (err) => {
          if (err) {
            console.error(`Failed to subscribe to topic: ${topic}`, err);
          } else {
            //console.log(`Subscribed to topic: ${topic}`);
          }
        });
      } else {
        //
      }
    });
  });
}

  // Functie om de datum om te zetten naar het gewenste formaat
  function formatDateString(dateString) {
    const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    
    // Split de string in dag, maand en jaar
    const parts = dateString.split('-');
    const day = parts[0];  // Dag
    const month = parts[1];  // Maand (nummer)
    const year = parts[2];  // Jaar (afgekort)

    // Haal de maand afkorting op
    const monthName = months[parseInt(month) - 1];
  
    // Maak de nieuwe string
    return `${day}${monthName}${year}`;
  }



      // Initial status of the sound
      let sound = false;

      // Function to toggle the sound variable and update the button's style
      function toggleSound() {
          sound = !sound;
          updateButtonStyles();
      }



    // Function to update the button's style based on the sound variable
    function updateButtonStyles() {
      console.log(sound);
      
      const buttonS = document.getElementById('soundButton');
      if (sound) {
          buttonS.classList.remove('bg-gray-500');
          buttonS.classList.add('bg-green-500');
      } else {
          buttonS.classList.remove('bg-green-500');
          buttonS.classList.add('bg-gray-500');
      }


    }

    // Ensure the buttons have the correct style on page load
    window.onload = updateButtonStyles;

    // Discipline: JavaScript om de overlay in te schakelen en instellingen op te slaan
    const openSettingsButtonD = document.getElementById('openSettingsDisciplines');
    const overlayD = document.getElementById('overlayDisciplines');
    const closeOverlayButtonD = document.getElementById('closeOverlayD');
    const saveSettingsButtonD = document.getElementById('saveSettingsD');

    openSettingsButtonD.addEventListener('click', () => {
      overlayD.classList.remove('hidden');
    });

    closeOverlayButtonD.addEventListener('click', () => {
      overlayD.classList.add('hidden');
    });

    saveSettingsButtonD.addEventListener('click', () => {
      DisciplineSubscribeUnsubscribe();

      // Voorbeeld: log de instellingen naar de console
      console.log("Instellingen opgeslagen");
      
      // Sluit de overlayD na het opslaan
      overlayD.classList.add('hidden');
    });


    // Regios: JavaScript om de overlay in te schakelen en instellingen op te slaan
    const openSettingsButtonR = document.getElementById('openSettingsRegios');
    const overlayR = document.getElementById('overlayRegios');
    const closeOverlayButtonR = document.getElementById('closeOverlayR');
    const saveSettingsButtonR = document.getElementById('saveSettingsR');

    openSettingsButtonR.addEventListener('click', () => {
      overlayR.classList.remove('hidden');
    });

    closeOverlayButtonR.addEventListener('click', () => {
      overlayR.classList.add('hidden');
    });

    saveSettingsButtonR.addEventListener('click', () => {
      DisciplineSubscribeUnsubscribe();

      // Voorbeeld: log de instellingen naar de console
      console.log("Instellingen opgeslagen");
      
      // Sluit de overlayR na het opslaan
      overlayR.classList.add('hidden');
    });

  </script>

</body>
</html>
