www: andere interface

www/app.js

@@ -14,6 +14,17 @@ var sources = ['Algemeen', 'Amsterdam', 'Groningen', 'Literatuur', 'Vlaanderen']
 
 var data = new Map()
 
+const idSource = document.getElementById('source')
+const idPart = document.getElementById('part')
+const idSubtitle = document.getElementById('subtitle')
+const idData = document.getElementById('data')
+const form1 = document.forms['choice']
+const fWhat = form1['fWhat']
+const fSource = form1['fSource']
+const fPart = form1['fPart']
+const fDate = form1['fDate']
+const fSubmit = form1['fSubmit']
+
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
@@ -112,8 +123,7 @@ async function loadSource(source, week) {
     data[week] = await getJSON('DATA-' + week + '-4.json')
   }
 
-  document.getElementById('subtitle').innerHTML =
-    source + ' — t/m ' + data[week].last
+  idSubtitle.innerHTML = source + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -125,7 +135,7 @@ async function loadSource(source, week) {
   })
   tab.appendChild(tr)
   d.appendChild(tab)
-  document.getElementById('data').innerHTML = d.innerHTML
+  idData.innerHTML = d.innerHTML
 }
 
 async function loadPart(part, week) {
@@ -133,8 +143,7 @@ async function loadPart(part, week) {
     data[week] = await getJSON('DATA-' + week + '-4.json')
   }
 
-  document.getElementById('subtitle').innerHTML =
-    part + ' — t/m ' + data[week].last
+  idSubtitle.innerHTML = part + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -146,11 +155,11 @@ async function loadPart(part, week) {
   })
   tab.appendChild(tr)
   d.appendChild(tab)
-  document.getElementById('data').innerHTML = d.innerHTML
+  idData.innerHTML = d.innerHTML
 }
 
 async function loadWeken(source, part) {
-  document.getElementById('subtitle').innerHTML = source + ' — ' + part
+  idSubtitle.innerHTML = source + ' — ' + part
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -170,7 +179,7 @@ async function loadWeken(source, part) {
 
   tab.appendChild(tr)
   d.appendChild(tab)
-  document.getElementById('data').innerHTML = d.innerHTML
+  idData.innerHTML = d.innerHTML
 }
 
 function locateWeek(date) {
@@ -208,39 +217,56 @@ function locateWeek(date) {
 }
 
 async function kies() {
-  let source = document.forms['choice']['rSource'].value
-  let part = document.forms['choice']['rPart'].value
-  let date = document.forms['choice']['dDatum'].value
-  if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
-    alert('Kies een bron en/of een onderdeel')
-    return
-  }
+  let what = fWhat.value
+  let source = fSource.value
+  let part = fPart.value
+  let date = fDate.value
 
   locateWeek(date)
 
-  const dd = document.getElementById('data')
-  const st = document.getElementById('subtitle')
-  dd.classList.add('fade')
-  st.classList.add('fade')
+  idData.classList.add('fade')
+  idSubtitle.classList.add('fade')
   await sleep(20)
 
-  if (source == 'alles' || source == '') {
-    await loadPart(part, dates[datesNr].week)
-  } else if (part == 'alles' || part == '') {
+  if (what == 'opt1') {
     await loadSource(source, dates[datesNr].week)
+  } else if (what == 'opt2') {
+    await loadPart(part, dates[datesNr].week)
   } else {
     await loadWeken(source, part)
   }
-  dd.classList.remove('fade')
-  st.classList.remove('fade')
+  idSubtitle.classList.remove('fade')
+  idData.classList.remove('fade')
+}
+
+function opt(i) {
+  fSubmit.disabled = false
+
+  if (i == 1) {
+    idSource.classList.remove('disabled')
+    fSource.disabled = false
+    idPart.classList.add('disabled')
+    fPart.disabled = true
+  }
+  if (i == 2) {
+    idSource.classList.add('disabled')
+    fSource.disabled = true
+    idPart.classList.remove('disabled')
+    fPart.disabled = false
+  }
+  if (i == 3) {
+    idSource.classList.remove('disabled')
+    fSource.disabled = false
+    idPart.classList.remove('disabled')
+    fPart.disabled = false
+  }
 }
 
 async function init() {
   dates = await getJSON('index4.json')
   datesNr = 0
-  const d = document.getElementById('dDatum')
-  d.setAttribute('min', dates[dates.length - 1].last)
-  d.setAttribute('max', dates[0].last)
+  fDate.setAttribute('min', dates[dates.length - 1].last)
+  fDate.setAttribute('max', dates[0].last)
   loadSource('Algemeen', dates[datesNr].week)
 }