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

app

Browse Source
This commit is contained in:
Peter Kleiweg
2026-04-19 17:46:03 +02:00
parent ad2750f903
commit eda2c71b62
16 changed files with 313 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/data2json/data2json.go
View File

@@ -28,7 +28,7 @@ type Data struct {
type Parts struct {
NieuweNamen [][3]any `json:"nieuwe namen"`
NieuweWoorden [][3]any `json:"nieuw woorden"`
NieuweWoorden [][3]any `json:"nieuwe woorden"`
Personen [][3]any `json:"personen"`
AndereNamen [][3]any `json:"andere namen"`
Locaties [][3]any `json:"locaties"`

1
www/DATA-2026-10-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-10-4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-11-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-11-4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-12-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-12-4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-13-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-13-4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-14-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
www/DATA-2026-14-4.json Normal file
View File

File diff suppressed because one or more lines are too long

2
www/DATA-2026-15-1.json
View File

File diff suppressed because one or more lines are too long

2
www/DATA-2026-15-4.json
View File

File diff suppressed because one or more lines are too long

94
www/app.html Normal file
View File

@@ -0,0 +1,94 @@
<!doctype html>
<html>
<head>
<title id="title">Woord van de maand</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" type="text/css" href="tooltip.css" />
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript" src="app.js" defer></script>
</head>
<body>
<div class="title">
<h1>Woord van de maand</h1>
terugkijkend over vier weken
</div>
<div class="form">
<form name="choice">
<table class="choice">
<tr>
<th>bron</th>
<th>onderdeel</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="rsGroningen"
value="Groningen" />
<label for="rsGroningen">Groningen</label><br />
<input
type="radio"
name="rSource"
id="rsAmsterdam"
value="Amsterdam" />
<label for="rsAmsterdam">Amsterdam</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">alles</label><br />
</td>
<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">alles</label><br />
</td>
</tr>
</table>
<p>to do: selecteer een periode</p>
<p>
<button type="button" onclick="kies()">kies</button>
</p>
</form>
</div>
<div class="title">
<h2 id="subtitle"></h2>
</div>
<div class="main" id="data"></div>
</body>
</html>

184
www/app.js Normal file
View File

@@ -0,0 +1,184 @@
var dates = ['2026-15', '2026-14', '2026-13', '2026-12', '2026-11', '2026-10']
var parts = [
'nieuwe namen',
'nieuwe woorden',
'personen',
'locaties',
'organisaties',
'andere namen',
]
var sources = ['Algemeen', 'Groningen', 'Amsterdam', 'Literatuur', 'Vlaanderen']
var data = new Map()
function getJSON(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'json'
xhr.onload = function () {
var status = xhr.status
if (status == 200) {
resolve(xhr.response)
} else {
reject(status)
}
}
xhr.send()
})
}
async function getData(week) {
/*
if (data.has(week)) {
return
}
*/
data[week] = await getJSON('DATA-' + week + '-4.json')
}
function escape(s) {
return s
.replace('&', '&amp;')
.replace("'", '&apos;')
.replace('<', '&lt')
.replace('>', '&gt;')
}
function makeTD(title, values) {
const td = document.createElement('td')
const h3 = document.createElement('h3')
const txt = document.createTextNode(title)
h3.appendChild(txt)
td.appendChild(h3)
const tab = document.createElement('table')
console.log(values)
var max
for (var i = 0; i < 20; i++) {
var value
if (i < values.length) {
value = values[i]
} else {
value = [0, '\xa0', '']
}
if (i == 0) {
max = value[0]
}
const tr = document.createElement('tr')
if (i < values.length) {
var t2 = ''
if (value[2]) {
tr.classList.add('tags')
t2 = '<br><small>' + escape(value[2]) + '</small>'
}
tr.setAttribute(
'onmouseover',
"tooltip.show('" + value[0] + ' \xa0 ' + escape(value[1]) + t2 + "')",
)
tr.setAttribute('onmouseout', 'tooltip.hide()')
}
const td1 = document.createElement('td')
const div1 = document.createElement('div')
pc = (value[0] / max) * 100
div1.style.width = pc + '%'
td1.appendChild(div1)
tr.appendChild(td1)
const td2 = document.createElement('td')
const txt2 = document.createTextNode(value[1])
td2.appendChild(txt2)
tr.appendChild(td2)
tab.appendChild(tr)
}
td.appendChild(tab)
return td
}
async function loadSource(source, week) {
if (!data.has(week)) {
data[week] = await getJSON('DATA-' + week + '-4.json')
}
document.getElementById('subtitle').innerHTML =
source + ' — ' + data[week].year + ' week ' + data[week].week
const d = document.createElement('div')
const tab = document.createElement('table')
tab.classList.add('outer')
tr = document.createElement('tr')
parts.forEach(function (part) {
var values = data[week][source][part]
tr.appendChild(makeTD(part, values))
})
tab.appendChild(tr)
d.appendChild(tab)
document.getElementById('data').innerHTML = d.innerHTML
}
async function loadPart(part, week) {
if (!data.has(week)) {
data[week] = await getJSON('DATA-' + week + '-4.json')
}
document.getElementById('subtitle').innerHTML =
part + ' — ' + data[week].year + ' week ' + data[week].week
const d = document.createElement('div')
const tab = document.createElement('table')
tab.classList.add('outer')
tr = document.createElement('tr')
sources.forEach(function (source) {
var values = data[week][source][part]
tr.appendChild(makeTD(source, values))
})
tab.appendChild(tr)
d.appendChild(tab)
document.getElementById('data').innerHTML = d.innerHTML
}
async function loadWeken(source, part) {
document.getElementById('subtitle').innerHTML = source + ' — ' + part
const d = document.createElement('div')
const tab = document.createElement('table')
tab.classList.add('outer')
tr = document.createElement('tr')
for (var i = 0; i < 6; i++) {
if (i < dates.length) {
var week = dates[i]
if (!data.has(week)) {
data[week] = await getJSON('DATA-' + week + '-4.json')
}
var values = data[week][source][part]
tr.appendChild(
makeTD(data[week].year + ' week ' + data[week].week, values),
)
}
}
tab.appendChild(tr)
d.appendChild(tab)
document.getElementById('data').innerHTML = d.innerHTML
}
function kies() {
let source = document.forms['choice']['rSource'].value
let part = document.forms['choice']['rPart'].value
console.log(source)
console.log(part)
if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
alert('Kies een bron en/of een onderdeel')
} else if (source == 'alles' || source == '') {
loadPart(part, dates[0])
} else if (part == 'alles' || part == '') {
loadSource(source, dates[0])
} else {
loadWeken(source, part)
}
}
loadSource('Algemeen', dates[0])

23
www/style2.css
View File

@@ -42,7 +42,8 @@ h1 {
}
h1,
h2 {
h2,
h3 {
color: #62757f;
letter-spacing: 0.1em;
margin-top: 2em;
@@ -52,6 +53,11 @@ h1 {
font-weight: 200;
}
h2 {
line-height: 120%;
font-size: x-large;
font-weight: 300;
}
h3 {
margin-top: 0px;
font-size: large;
font-weight: 400;
@@ -110,3 +116,18 @@ table table td > div {
margin-top: auto;
background-color: #62757f;
}
.form {
margin: 0px auto;
width: 100%;
text-align: center;
}
table.choice {
margin: 0px auto;
}
table.choice td {
vertical-align: top;
text-align: left;
}