add debug-mode

frontend/app/subnet-calculator.js

@@ -1,82 +1,106 @@
+// Event Listener hinzufügen, sobald das DOM geladen ist
 document.addEventListener('DOMContentLoaded', () => {
     const form = document.getElementById('subnet-form');
     if (form) {
+        console.log("Attaching submit listener to form:", form);
         form.addEventListener('submit', handleSubnetCalculation);
+    } else {
+        console.error("Subnetz-Formular (ID: subnet-form) nicht gefunden!");
     }
-    // Beispiel-Links (aus HTML hierher verschoben für bessere Organisation)
-    document.querySelectorAll('.example-link').forEach(link => {
-        link.addEventListener('click', (event) => {
-            const ip = event.target.getAttribute('data-ip');
-            const cidr = event.target.getAttribute('data-cidr');
-            document.getElementById('ip-address').value = ip;
-            document.getElementById('cidr').value = cidr;
-            // Berechnung direkt auslösen
-            form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-            // Optional: Zum Ergebnisbereich scrollen, wenn er sichtbar wird
-            // document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
-        });
-    });
 });
 
+// Funktion zur Behandlung der Subnetzberechnung bei Formularübermittlung
 function handleSubnetCalculation(event) {
+    console.log("handleSubnetCalculation called"); // Protokoll: Start
     event.preventDefault(); // Verhindert das Neuladen der Seite
     clearResults(); // Ergebnisse zuerst löschen/verstecken
 
     const ipAddressInput = document.getElementById('ip-address').value.trim();
     const cidrInput = document.getElementById('cidr').value.trim();
+    const resultsDiv = document.getElementById('results'); // Ergebnis-Div holen
 
-    // Einfache Validierung (könnte verbessert werden)
+    console.log(`Inputs: IP=${ipAddressInput}, CIDR/Mask=${cidrInput}`); // Protokoll: Eingaben
+
+    // Einfache Validierung
     if (!isValidIP(ipAddressInput)) {
-        alert("Bitte geben Sie eine gültige IP-Adresse ein.");
+        console.error("Invalid IP address:", ipAddressInput); // Protokoll: Fehler
-        // clearResults(); // Bereits oben erledigt
+        alert("Bitte geben Sie eine gültige IPv4-Adresse ein.");
         return;
     }
+    console.log("IP is valid"); // Protokoll: Erfolg
 
     let cidr;
     let subnetMask;
 
+    // Prüfen, ob CIDR oder Subnetzmaske eingegeben wurde
     if (cidrInput.includes('.')) { // Annahme: Subnetzmaske im Format xxx.xxx.xxx.xxx
+        console.log("Input detected as subnet mask"); // Protokoll: Pfad
         if (!isValidIP(cidrInput)) {
+            console.error("Invalid subnet mask:", cidrInput); // Protokoll: Fehler
             alert("Bitte geben Sie eine gültige Subnetzmaske ein.");
-            // clearResults(); // Bereits oben erledigt
             return;
         }
         subnetMask = cidrInput;
         cidr = maskToCidr(subnetMask);
         if (cidr === null) {
-            alert("Ungültige Subnetzmaske. Sie muss aus einer kontinuierlichen Folge von Einsen gefolgt von Nullen bestehen.");
+            console.error("maskToCidr returned null for mask:", subnetMask); // Protokoll: Fehler
-            // clearResults(); // Bereits oben erledigt
+            alert("Ungültige Subnetzmaske. Sie muss aus einer kontinuierlichen Folge von Einsen gefolgt von Nullen bestehen (z.B. 255.255.255.0, nicht 255.255.0.255).");
             return;
         }
+        console.log(`Mask converted to CIDR: ${cidr}`); // Protokoll: Erfolg
     } else { // Annahme: CIDR-Notation
+        console.log("Input detected as CIDR notation"); // Protokoll: Pfad
         cidr = parseInt(cidrInput, 10);
         if (isNaN(cidr) || cidr < 0 || cidr > 32) {
+            console.error("Invalid CIDR value:", cidrInput); // Protokoll: Fehler
             alert("Bitte geben Sie einen gültigen CIDR-Wert (0-32) ein.");
-            // clearResults(); // Bereits oben erledigt
             return;
         }
         subnetMask = cidrToMask(cidr);
+        if (subnetMask === null) {
+             console.error("cidrToMask returned null for CIDR:", cidr); // Protokoll: Fehler
+             alert("Interner Fehler bei der Umwandlung von CIDR zu Maske."); // Sollte nicht passieren bei gültigem CIDR
+             return;
+        }
+        console.log(`CIDR converted to mask: ${subnetMask}`); // Protokoll: Erfolg
     }
 
+    // Berechnung durchführen und Ergebnisse anzeigen
     try {
+        console.log(`Calculating subnet for IP=${ipAddressInput}, CIDR=${cidr}`); // Protokoll: Vor Berechnung
         const results = calculateSubnet(ipAddressInput, cidr);
+        console.log("Calculation successful, results:", results); // Protokoll: Ergebnisse
         displayResults(results, subnetMask);
+        if (resultsDiv) {
+             resultsDiv.classList.remove('hidden'); // Ergebnisbereich sichtbar machen
+             console.log("Results div made visible"); // Protokoll: Sichtbarkeit geändert
+        } else {
+            console.error("Results div not found!"); // Protokoll: Fehler, falls Div fehlt
+        }
     } catch (error) {
+        console.error("Error during subnet calculation:", error); // Protokoll: Ausnahme
         alert("Fehler bei der Berechnung: " + error.message);
-        clearResults(); // Sicherstellen, dass bei Fehler alles versteckt ist
+        clearResults(); // Stellt sicher, dass der Ergebnisbereich bei Fehlern versteckt wird
     }
+    console.log("handleSubnetCalculation finished"); // Protokoll: Ende
 }
 
+// --- Validierungs- und Hilfsfunktionen ---
+
 function isValidIP(ip) {
+    // Einfacher Regex für IPv4
     const ipPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
     return ipPattern.test(ip);
 }
 
 function ipToBinary(ip) {
+    // Wandelt eine IP-Adresse (String) in einen 32-Bit-Binärstring um
     return ip.split('.').map(octet => parseInt(octet, 10).toString(2).padStart(8, '0')).join('');
 }
 
 function binaryToIp(binary) {
+    // Wandelt einen 32-Bit-Binärstring in eine IP-Adresse (String) um
+    if (binary.length !== 32) return null; // Ungültige Länge
     const octets = [];
     for (let i = 0; i < 32; i += 8) {
         octets.push(parseInt(binary.substring(i, i + 8), 2));
@@ -85,25 +109,27 @@ function binaryToIp(binary) {
 }
 
 function cidrToMask(cidr) {
+    // Wandelt eine CIDR-Zahl (0-32) in eine Subnetzmaske (String) um
     if (cidr < 0 || cidr > 32) return null;
     const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
     return binaryToIp(maskBinary);
 }
 
 function maskToCidr(mask) {
+    // Wandelt eine Subnetzmaske (String) in eine CIDR-Zahl um
     if (!isValidIP(mask)) return null;
     const binaryMask = ipToBinary(mask);
+
     // Prüfen, ob die Maske gültig ist (nur Einsen gefolgt von Nullen)
     let encounteredZero = false;
     for (let i = 0; i < 32; i++) {
         if (binaryMask[i] === '1') {
-            if (encounteredZero) { // Eins nach Null -> ungültig
+            if (encounteredZero) return null; // Eins nach Null -> ungültig
-                return null;
-            }
         } else {
             encounteredZero = true;
         }
     }
+
     // Zähle die Einsen (CIDR)
     let cidr = 0;
     for(let i = 0; i < 32; i++) {
@@ -116,69 +142,59 @@ function maskToCidr(mask) {
     return cidr;
 }
 
+// --- Berechnungsfunktion ---
 
 function calculateSubnet(ip, cidr) {
     const ipBinary = ipToBinary(ip);
     const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
 
-    // Netzwerkadresse berechnen (Bitweises UND)
+    // Netzwerkadresse berechnen (Bitweises UND von IP und Maske)
     let networkBinary = '';
     for (let i = 0; i < 32; i++) {
         networkBinary += (parseInt(ipBinary[i], 10) & parseInt(maskBinary[i], 10)).toString();
     }
     const networkAddress = binaryToIp(networkBinary);
+    const networkNum = parseInt(networkBinary, 2); // Netzwerkadresse als Zahl
 
     // Broadcast-Adresse berechnen (Netzwerkadresse | invertierte Maske)
-    let broadcastBinary = '';
+    const invertedMaskBinary = '0'.repeat(cidr) + '1'.repeat(32 - cidr);
-    for (let i = 0; i < 32; i++) {
+    const invertedMaskNum = parseInt(invertedMaskBinary, 2);
-        // broadcastBinary += (parseInt(networkBinary[i], 10) | (1 - parseInt(maskBinary[i], 10))).toString(); // Fehlerhaft für Netzwerkadresse
+    const broadcastNum = networkNum | invertedMaskNum;
-         broadcastBinary += (parseInt(ipBinary[i], 10) | (1 - parseInt(maskBinary[i], 10))).toString(); // Korrekt: IP | invertierte Maske
+    const broadcastBinary = broadcastNum.toString(2).padStart(32, '0');
-    }
-     // Korrektur: Sicherstellen, dass die Broadcast-Adresse korrekt berechnet wird
-     const networkNum = parseInt(networkBinary, 2);
-     const invertedMaskNum = parseInt('0'.repeat(cidr) + '1'.repeat(32 - cidr), 2);
-     broadcastBinary = (networkNum | invertedMaskNum).toString(2).padStart(32, '0');
     const broadcastAddress = binaryToIp(broadcastBinary);
 
-
     // Anzahl der Hosts
     const hostBits = 32 - cidr;
-    // const hostCount = hostBits <= 1 ? 0 : Math.pow(2, hostBits) - 2; // -2 für Netzwerk- und Broadcast-Adresse
     let hostCount = 0;
     if (hostBits >= 2) { // Mindestens /30 für 2 Hosts (-2)
         hostCount = Math.pow(2, hostBits) - 2;
     } else if (hostBits === 1) { // /31 hat 2 Adressen, beide nutzbar (RFC 3021)
-        hostCount = 2; // Oder 0, je nach Interpretation, ob man sie "Hosts" nennt
+        hostCount = 2;
     } else { // /32 hat nur 1 Adresse
         hostCount = 1;
     }
 
-
+    // Erste Host-Adresse
-    // Erste Host-Adresse (Netzwerkadresse + 1) - nur wenn Hosts möglich sind
     let firstHost = '-';
-     if (hostBits >= 2) { // /30 oder größer
+    if (hostBits >= 2) { // /30 oder größer: Netzwerkadresse + 1
-        const networkNum = parseInt(networkBinary, 2);
         const firstHostBinary = (networkNum + 1).toString(2).padStart(32, '0');
         firstHost = binaryToIp(firstHostBinary);
-     } else if (cidr === 31) { // /31 - beide Adressen sind nutzbar
+    } else if (cidr === 31) { // /31: Die erste Adresse des /31
-         firstHost = networkAddress; // Die erste Adresse des /31
+        firstHost = networkAddress;
-     } else { // /32 - nur die eine Adresse
+    } else { // /32: Nur die eine Adresse
-         firstHost = networkAddress;
+        firstHost = networkAddress;
-     }
-
-
-    // Letzte Host-Adresse (Broadcast-Adresse - 1) - nur wenn Hosts möglich sind
-    let lastHost = '-';
-    if (hostBits >= 2) { // /30 oder größer
-        const broadcastNum = parseInt(broadcastBinary, 2);
-        const lastHostBinary = (broadcastNum - 1).toString(2).padStart(32, '0');
-        lastHost = binaryToIp(lastHostBinary);
-    } else if (cidr === 31) { // /31 - beide Adressen sind nutzbar
-        lastHost = broadcastAddress; // Die zweite Adresse des /31
-    } else { // /32 - nur die eine Adresse
-        lastHost = networkAddress;
     }
 
+    // Letzte Host-Adresse
+    let lastHost = '-';
+    if (hostBits >= 2) { // /30 oder größer: Broadcast-Adresse - 1
+        const lastHostBinary = (broadcastNum - 1).toString(2).padStart(32, '0');
+        lastHost = binaryToIp(lastHostBinary);
+    } else if (cidr === 31) { // /31: Die zweite Adresse des /31
+        lastHost = broadcastAddress;
+    } else { // /32: Nur die eine Adresse
+        lastHost = networkAddress;
+    }
 
     return {
         networkAddress,
@@ -189,32 +205,32 @@ function calculateSubnet(ip, cidr) {
     };
 }
 
+// --- Anzeige-Funktionen ---
+
 function displayResults(results, subnetMask) {
+    console.log("Displaying results:", results, "with mask:", subnetMask); // Protokoll: Anzeige
+    // Ergebnisse in die entsprechenden HTML-Elemente schreiben
     document.getElementById('network-address').textContent = results.networkAddress;
     document.getElementById('broadcast-address').textContent = results.broadcastAddress;
+    // Zeige Host Count nur an, wenn sinnvoll (>=0)
     document.getElementById('host-count').textContent = results.hostCount >= 0 ? results.hostCount.toLocaleString() : '-';
     document.getElementById('first-host').textContent = results.firstHost;
     document.getElementById('last-host').textContent = results.lastHost;
-    document.getElementById('subnet-mask').textContent = subnetMask; // Zeige die berechnete/validierte Maske an
+    document.getElementById('subnet-mask').textContent = subnetMask;
-
-    // Ergebnisbereich sichtbar machen
-    const resultsDiv = document.getElementById('results');
-    if (resultsDiv) {
-        resultsDiv.classList.remove('hidden');
-    }
 }
 
 function clearResults() {
-     document.getElementById('network-address').textContent = '-';
+    console.log("Clearing results and hiding results div"); // Protokoll: Löschen
+    // Setzt die Ergebnis-Felder zurück und versteckt den Bereich
+    document.getElementById('network-address').textContent = '-';
     document.getElementById('broadcast-address').textContent = '-';
     document.getElementById('host-count').textContent = '-';
     document.getElementById('first-host').textContent = '-';
     document.getElementById('last-host').textContent = '-';
     document.getElementById('subnet-mask').textContent = '-';
 
-    // Ergebnisbereich wieder verstecken
     const resultsDiv = document.getElementById('results');
-    if (resultsDiv) {
+    if (resultsDiv && !resultsDiv.classList.contains('hidden')) {
         resultsDiv.classList.add('hidden');
     }
 }