Grote push

index.js

@@ -0,0 +1,78 @@
+
+// TODO decodeURIComponent(String)
+
+// Initialiseer de webpagina
+const taal = document.querySelector('#taal');
+const start = document.querySelector('#start');
+const einde = document.querySelector('#einde');
+const toevoegKnop = document.querySelector('#toevoegKnop');
+const visualisatie = document.querySelector('#visualisatie');
+
+maakElementIn(getOrDefault(einde), visualisatie);
+toevoegKnop.addEventListener('click', () => zoek());
+
+/**
+ * Zoek een
+ * pad met scraper.py en voeg deze toe in de lijst.
+ */
+function zoek() {
+
+    // Schakel de knop 'toevoegen' uit zolang het zoekproces bezig is, zodat er geen meerdere
+    // paden tegelijk toegevoegd kunnen worden.
+    toevoegKnop.disabled = true;
+
+    const verzoek = { // Standaardwaarden gebruiken indien het veld leeg is.
+        taal: getOrDefault(taal),
+        start: getOrDefault(start),
+        einde: getOrDefault(einde)
+    };
+
+    fetch(`cgi-bin/init.py?data=${JSON.stringify(verzoek)}`)
+        .then(antwoord => antwoord.json())
+        .then(data => voegToe(data))
+        .catch(reason => alert(reason))
+        .finally(() => toevoegKnop.disabled = false); // Herstel de knop. Ook als er ondertussen iets mis ging.
+
+}
+
+function voegToe(data) {
+    if (data.hasOwnProperty('error')) {
+        alert(data.error);
+    } else {
+        let pad = data.pad;
+
+        // Locatie van invoegen bepalen.
+        let moeder = visualisatie;
+        let kinderen = visualisatie.getElementsByTagName('li');
+        let kindernamen = Array.from(kinderen).map(item => item.getAttribute('item'));
+        let i = 0;
+        while (moeder === visualisatie && i < pad.length) {
+            if (kindernamen.indexOf(pad[i]) !== -1) {
+                moeder = kinderen[kindernamen.indexOf(pad[i])];
+            }
+            i += 1;
+        }
+
+        // Alleen nog die elementen toevoegen die nog niet op het pad staan.
+        pad = pad.slice(0, i - 1);
+
+        // Nieuw element creëren (zonder toe te voegen aan het DOM).
+        for (let item of pad.reverse()) {
+            moeder = maakElementIn(item, moeder);
+        }
+    }
+}
+
+function maakElementIn(titel, moeder) {
+    let wrap = document.createElement('ul');
+    let nieuw = document.createElement('li');
+    nieuw.innerHTML = titel;
+    nieuw.setAttribute('item', titel);
+    wrap.appendChild(nieuw);
+    moeder.appendChild(wrap);
+    return nieuw;
+}
+
+function getOrDefault(element) {
+    return element.value === '' ? element.getAttribute('placeholder') : element.value;
+}