Grote push

index.js

@@ -1,19 +1,23 @@
 
-// TODO decodeURIComponent(String)
+// TODO De huidige lijst meegeven en controleren tijdens het opstellen zodat er gestopt wordt vanaf er een titel gevonden is
 
 // 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');
+const taal = document.getElementById('taal');
+const start = document.getElementById('start');
+const einde = document.getElementById('einde');
+const toevoegKnop = document.getElementById('toevoegKnop');
+const visualisatie = document.getElementById('visualisatie');
 
-maakElementIn(getOrDefault(einde), visualisatie);
+let huidigeTaal;
+let huidigeDoel;
+
+refreshTree();
 toevoegKnop.addEventListener('click', () => zoek());
+taal.addEventListener('input', () => inputWaarschuwing())
+einde.addEventListener('input', () => inputWaarschuwing());
 
 /**
- * Zoek een
- * pad met scraper.py en voeg deze toe in de lijst.
+ * Zoek een pad met python backend en voeg deze toe in de lijst.
  */
 function zoek() {
 
@@ -21,6 +25,8 @@ function zoek() {
     // paden tegelijk toegevoegd kunnen worden.
     toevoegKnop.disabled = true;
 
+    refreshTree();
+
     const verzoek = { // Standaardwaarden gebruiken indien het veld leeg is.
         taal: getOrDefault(taal),
         start: getOrDefault(start),
@@ -30,14 +36,14 @@ function zoek() {
     fetch(`cgi-bin/init.py?data=${JSON.stringify(verzoek)}`)
         .then(antwoord => antwoord.json())
         .then(data => voegToe(data))
-        .catch(reason => alert(reason))
+        .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);
+        alert('↯ ' + data.error);
     } else {
         let pad = data.pad;
 
@@ -58,21 +64,52 @@ function voegToe(data) {
 
         // Nieuw element creëren (zonder toe te voegen aan het DOM).
         for (let item of pad.reverse()) {
-            moeder = maakElementIn(item, moeder);
+            moeder = maakIn(item, moeder);
         }
     }
 }
 
-function maakElementIn(titel, moeder) {
+/**
+ * Maakt een element aan binnen een ander element, en geeft het nieuwste (diepste) element terug.
+ */
+function maakIn(titel, moeder, id) {
     let wrap = document.createElement('ul');
     let nieuw = document.createElement('li');
     nieuw.innerHTML = titel;
     nieuw.setAttribute('item', titel);
     wrap.appendChild(nieuw);
+
+    if (id !== undefined) {
+        wrap.id = id;
+    }
+
     moeder.appendChild(wrap);
     return nieuw;
 }
 
+/**
+ * Probeer of de huidige boom verwijderd moet worden en voeg de bestemming reeds toe aan de nieuwe boom.
+ */
+function refreshTree() {
+    if (huidigeDoel !== getOrDefault(einde) || huidigeTaal !== getOrDefault(taal)) {
+        huidigeTaal = getOrDefault(taal);
+        huidigeDoel = getOrDefault(einde);
+
+        visualisatie.innerHTML = '';
+        maakIn(huidigeDoel, visualisatie, 'wortel');
+
+        inputWaarschuwing();
+    }
+}
+
+/**
+ * Toon of verberg een speciale waarschuwing die zegt of de huidige boom verwijderd zal worden
+ * bij een nieuwe toevoeging.
+ */
+function inputWaarschuwing() {
+    document.getElementById('waarschuwing').hidden = huidigeTaal === getOrDefault(taal) && huidigeDoel === getOrDefault(einde);
+}
+
 function getOrDefault(element) {
     return element.value === '' ? element.getAttribute('placeholder') : element.value;
 }