update app

This commit is contained in:
Peter Kleiweg
2026-04-22 12:35:58 +02:00
parent eda2c71b62
commit c6c2abb387
8 changed files with 74 additions and 37 deletions

View File

@@ -44,8 +44,8 @@ type Value struct {
var ( var (
sources = map[string]string{ sources = map[string]string{
"Algemeen": "algemeen", "Algemeen": "algemeen",
"Groningen": "groningen",
"Amsterdam": "AT5", "Amsterdam": "AT5",
"Groningen": "groningen",
"Literatuur": "literatuur", "Literatuur": "literatuur",
"Vlaanderen": "VRT", "Vlaanderen": "VRT",
} }

1
www/DATA-2026-16-1.json Normal file

File diff suppressed because one or more lines are too long

1
www/DATA-2026-16-4.json Normal file

File diff suppressed because one or more lines are too long

View File

@@ -13,7 +13,7 @@
<body> <body>
<div class="title"> <div class="title">
<h1>Woord van de maand</h1> <h1>Woord van de maand</h1>
terugkijkend over vier weken <p>terugkijkend over vier weken</p>
</div> </div>
<div class="form"> <div class="form">
<form name="choice"> <form name="choice">
@@ -30,18 +30,18 @@
id="rsAlgemeen" id="rsAlgemeen"
value="Algemeen" /> value="Algemeen" />
<label for="rsAlgemeen">Algemeen</label><br /> <label for="rsAlgemeen">Algemeen</label><br />
<input
type="radio"
name="rSource"
id="rsGroningen"
value="Groningen" />
<label for="rsGroningen">Groningen</label><br />
<input <input
type="radio" type="radio"
name="rSource" name="rSource"
id="rsAmsterdam" id="rsAmsterdam"
value="Amsterdam" /> value="Amsterdam" />
<label for="rsAmsterdam">Amsterdam</label><br /> <label for="rsAmsterdam">Amsterdam</label><br />
<input
type="radio"
name="rSource"
id="rsGroningen"
value="Groningen" />
<label for="rsGroningen">Groningen</label><br />
<input <input
type="radio" type="radio"
name="rSource" name="rSource"
@@ -55,7 +55,9 @@
value="Vlaanderen" /> value="Vlaanderen" />
<label for="rsVlaanderen">Vlaanderen</label><br /> <label for="rsVlaanderen">Vlaanderen</label><br />
<input type="radio" name="rSource" id="rsAlles" value="alles" /> <input type="radio" name="rSource" id="rsAlles" value="alles" />
<label for="rsAlles">alles</label><br /> <label for="rsAlles"
>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</label
>
</td> </td>
<td> <td>
@@ -76,14 +78,22 @@
<input type="radio" name="rPart" id="rpA" value="andere namen" /> <input type="radio" name="rPart" id="rpA" value="andere namen" />
<label for="rpA">andere namen</label><br /> <label for="rpA">andere namen</label><br />
<input type="radio" name="rPart" id="rpAll" value="alles" /> <input type="radio" name="rPart" id="rpAll" value="alles" />
<label for="rpAll">alles</label><br /> <label for="rpAll"
>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</label
>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<p>to do: selecteer een periode</p>
<p>
<button type="button" onclick="kies()">
&mdash; kies &mdash;
</button>
</p>
</td> </td>
</tr> </tr>
</table> </table>
<p>to do: selecteer een periode</p>
<p>
<button type="button" onclick="kies()">kies</button>
</p>
</form> </form>
</div> </div>
<div class="title"> <div class="title">

View File

@@ -1,4 +1,4 @@
var dates = ['2026-15', '2026-14', '2026-13', '2026-12', '2026-11', '2026-10'] var dates
var parts = [ var parts = [
'nieuwe namen', 'nieuwe namen',
@@ -9,10 +9,14 @@ var parts = [
'andere namen', 'andere namen',
] ]
var sources = ['Algemeen', 'Groningen', 'Amsterdam', 'Literatuur', 'Vlaanderen'] var sources = ['Algemeen', 'Amsterdam', 'Groningen', 'Literatuur', 'Vlaanderen']
var data = new Map() var data = new Map()
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
function getJSON(url) { function getJSON(url) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest() var xhr = new XMLHttpRequest()
@@ -30,15 +34,6 @@ function getJSON(url) {
}) })
} }
async function getData(week) {
/*
if (data.has(week)) {
return
}
*/
data[week] = await getJSON('DATA-' + week + '-4.json')
}
function escape(s) { function escape(s) {
return s return s
.replace('&', '&amp;') .replace('&', '&amp;')
@@ -54,7 +49,6 @@ function makeTD(title, values) {
h3.appendChild(txt) h3.appendChild(txt)
td.appendChild(h3) td.appendChild(h3)
const tab = document.createElement('table') const tab = document.createElement('table')
console.log(values)
var max var max
for (var i = 0; i < 20; i++) { for (var i = 0; i < 20; i++) {
@@ -165,20 +159,31 @@ async function loadWeken(source, part) {
document.getElementById('data').innerHTML = d.innerHTML document.getElementById('data').innerHTML = d.innerHTML
} }
function kies() { async function kies() {
let source = document.forms['choice']['rSource'].value let source = document.forms['choice']['rSource'].value
let part = document.forms['choice']['rPart'].value let part = document.forms['choice']['rPart'].value
console.log(source)
console.log(part)
if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) { if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
alert('Kies een bron en/of een onderdeel') alert('Kies een bron en/of een onderdeel')
} else if (source == 'alles' || source == '') { return
}
const dd = document.getElementById('data')
dd.classList.add('fade')
await sleep(20)
if (source == 'alles' || source == '') {
loadPart(part, dates[0]) loadPart(part, dates[0])
} else if (part == 'alles' || part == '') { } else if (part == 'alles' || part == '') {
loadSource(source, dates[0]) loadSource(source, dates[0])
} else { } else {
loadWeken(source, part) loadWeken(source, part)
} }
dd.classList.remove('fade')
} }
loadSource('Algemeen', dates[0]) async function init() {
dates = await getJSON('index4.json')
loadSource('Algemeen', dates[0])
}
init()

1
www/index1.json Normal file
View File

@@ -0,0 +1 @@
["2026-16", "2026-15", "2026-14", "2026-13", "2026-12", "2026-11", "2026-10"]

1
www/index4.json Normal file
View File

@@ -0,0 +1 @@
["2026-16", "2026-15", "2026-14", "2026-13", "2026-12", "2026-11", "2026-10"]

View File

@@ -14,14 +14,14 @@ html {
body { body {
border: 0px; border: 0px;
margin: 0px; margin: 0px;
padding: 0px 0px 1em 0px; padding: 0px 0px 2em 0px;
color: black; color: black;
background-color: #fcfffc; background-color: #fcfffc;
} }
.main { .main {
margin: 2em 0px 0px 0px; margin: 1em 0px 0px 0px;
padding: 0.4em 0.2em; padding: 0px 0.2em;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
} }
@@ -34,7 +34,6 @@ body {
.title { .title {
text-align: center; text-align: center;
padding-bottom: 4em;
} }
h1 { h1 {
@@ -118,16 +117,35 @@ table table td > div {
} }
.form { .form {
margin: 0px auto; margin: 2em auto 0px auto;
width: 100%;
text-align: center; text-align: center;
line-height: 150%;
} }
table.choice { table.choice {
padding-top: 1em;
margin: 0px auto; margin: 0px auto;
border: 1px solid #62757f;
} }
table.choice td { table.choice td {
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
padding: 0.4em 1.2em;
}
label {
cursor: pointer;
}
label:hover {
text-decoration: underline;
}
#data {
background-color: inherit;
transition: all 200ms linear;
}
#data.fade {
background-color: #ffa54f;
transition: all 20ms linear;
} }