78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
|
|
// 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;
|
|
}
|