p209327/nlnieuws
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

www: andere interface

Browse Source
This commit is contained in:
Peter Kleiweg
2026-04-26 17:36:10 +02:00
parent c3d19c4cd2
commit 95dc3dce33
3 changed files with 126 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
www/app.html
View File

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

80
www/app.js
View File

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

27
www/style2.css
View File

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