diff --git a/www/app.html b/www/app.html
index e0fa413..2c56d1e 100644
--- a/www/app.html
+++ b/www/app.html
@@ -16,84 +16,70 @@
diff --git a/www/app.js b/www/app.js
index 29a5efe..8284532 100644
--- a/www/app.js
+++ b/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)
}
diff --git a/www/style2.css b/www/style2.css
index 0b30812..c43e4b8 100644
--- a/www/style2.css
+++ b/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;