www: andere interface

www/app.html

@@ -16,84 +16,70 @@
     </div>
     <div class="form">
       <form name="choice">
-        <table class="choice">
-          <tr>
-            <th>bron</th>
-            <th>onderdeel</th>
-            <th>week</th>
-          </tr>
-          <tr>
-            <td>
-              <input
-                type="radio"
-                name="rSource"
-                id="rsAlgemeen"
-                value="Algemeen" />
-              <label for="rsAlgemeen">Algemeen</label><br />
-              <input
-                type="radio"
-                name="rSource"
-                id="rsAmsterdam"
-                value="Amsterdam" />
-              <label for="rsAmsterdam">Amsterdam</label><br />
-              <input
-                type="radio"
-                name="rSource"
-                id="rsGroningen"
-                value="Groningen" />
-              <label for="rsGroningen">Groningen</label><br />
-              <input
-                type="radio"
-                name="rSource"
-                id="rsLiteratuur"
-                value="Literatuur" />
-              <label for="rsLiteratuur">Literatuur</label><br />
-              <input
-                type="radio"
-                name="rSource"
-                id="rsVlaanderen"
-                value="Vlaanderen" />
-              <label for="rsVlaanderen">Vlaanderen</label><br />
-              <input type="radio" name="rSource" id="rsAlles" value="alles" />
-              <label for="rsAlles"
-                >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</label
-              >
-            </td>
+        Wat wil je zien? <br />
+        <ol>
+          <li>
+            <input
+              type="radio"
+              name="fWhat"
+              id="fOpt1"
+              value="opt1"
+              onclick="opt(1)" />
+            <label for="fOpt1">Een specifieke bron</label>
+          </li>
 
-            <td>
-              <input type="radio" name="rPart" id="rpNN" value="nieuwe namen" />
-              <label for="rpNN">nieuwe namen</label><br />
-              <input
-                type="radio"
-                name="rPart"
-                id="rpNW"
-                value="nieuwe woorden" />
-              <label for="rpNW">nieuwe woorden</label><br />
-              <input type="radio" name="rPart" id="rpP" value="personen" />
-              <label for="rpP">personen</label><br />
-              <input type="radio" name="rPart" id="rpL" value="locaties" />
-              <label for="rpL">locaties</label><br />
-              <input type="radio" name="rPart" id="rpO" value="organisaties" />
-              <label for="rpO">organisaties</label><br />
-              <input type="radio" name="rPart" id="rpA" value="andere namen" />
-              <label for="rpA">andere namen</label><br />
-              <input type="radio" name="rPart" id="rpAll" value="alles" />
-              <label for="rpAll"
-                >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</label
-              >
-            </td>
-            <td>
-              <input type="date" id="dDatum" name="dDatum" step="7" />
-            </td>
-          </tr>
-          <tr>
-            <td colspan="3" style="text-align: center">
-              <button type="button" onclick="kies()">
-                &mdash; laat maar zien &mdash;
-              </button>
-            </td>
-          </tr>
-        </table>
+          <li>
+            <input
+              type="radio"
+              name="fWhat"
+              id="fOpt2"
+              value="opt2"
+              onclick="opt(2)" />
+            <label for="fOpt2">Een specifiek onderdeel</label>
+          </li>
+
+          <li>
+            <input
+              type="radio"
+              name="fWhat"
+              id="fOpt3"
+              value="opt3"
+              onclick="opt(3)" />
+            <label for="fOpt3">Een tijdreeks voor een bron en onderdeel</label>
+          </li>
+        </ol>
+
+        <div class="option" id="source">
+          bron:
+          <select name="source" id="fSource">
+            <option>Algemeen</option>
+            <option>Amsterdam</option>
+            <option>Groningen</option>
+            <option>Literatuur</option>
+            <option>Vlaanderen</option>
+          </select>
+        </div>
+
+        <div class="option" id="part">
+          onderdeel:
+          <select name="part" id="fPart">
+            <option>nieuwe namen</option>
+            <option>nieuwe woorden</option>
+            <option>personen</option>
+            <option>locaties</option>
+            <option>organisaties</option>
+            <option>andere namen</option>
+          </select>
+        </div>
+
+        <div class="option" id="week">
+          week:
+          <input type="date" id="fDate" name="date" step="7" />
+        </div>
+
+        <button type="button" onclick="kies()" id="fSubmit" disabled>
+          &mdash; laat maar zien &mdash;
+        </button>
       </form>
     </div>
     <div class="title">

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)
 }
 

www/style2.css

@@ -13,7 +13,7 @@ html {
 
 body {
   border: 0px;
-  margin: 0px;
+  margin: 2em;
   padding: 0px 0px 2em 0px;
   color: black;
   background-color: #fcfffc;
@@ -21,21 +21,10 @@ body {
 
 .main {
   margin: 1em 0px 0px 0px;
-  padding: 0px 0.2em;
   width: 100%;
   overflow-x: auto;
 }
 
-.footer {
-  text-align: center;
-  font-size: small;
-  margin-bottom: 2em;
-}
-
-.title {
-  text-align: center;
-}
-
 h1 {
   margin-top: 4em;
 }
@@ -75,8 +64,9 @@ a:hover {
   text-decoration: underline;
 }
 
-table.outer {
-  padding: 0px 1em;
+div.option {
+  display: inline-block;
+  margin-right: 2em;
 }
 
 table.outer > tr > td,
@@ -88,6 +78,7 @@ table.outer > tbody > tr > td {
 table.outer > tr > td:first-child,
 table.outer > tbody > tr > td:first-child {
   border-left: 0px;
+  padding-left: 0px;
 }
 
 table table {
@@ -98,6 +89,7 @@ table table {
 }
 
 table table td {
+  /* cursor: pointer; */
   padding: 0.2em 0px;
   vertical-align: center;
   white-space: nowrap;
@@ -117,14 +109,11 @@ table table td > div {
 }
 
 .form {
-  margin: 2em auto 0px auto;
-  text-align: center;
   line-height: 150%;
 }
 
 table.choice {
   padding-top: 1em;
-  margin: 0px auto;
   border: 1px solid #62757f;
 }
 
@@ -141,6 +130,10 @@ label:hover {
   text-decoration: underline;
 }
 
+.disabled {
+  opacity: 0.4;
+}
+
 #subtitle,
 #data {
   opacity: 1;