app2
This commit is contained in:
Peter Kleiweg
209
www/app2.html
Normal file
209
www/app2.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!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="style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="tooltip.css" />
|
||||
<script type="text/javascript" src="tooltip.js"></script>
|
||||
<script type="text/javascript" src="app2.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1>Woord van de maand</h1>
|
||||
</div>
|
||||
<div class="form">
|
||||
<form name="choice">
|
||||
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>
|
||||
<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>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" />
|
||||
<span class="validity"></span>
|
||||
</div>
|
||||
<button type="button" onclick="kies()" id="fSubmit" disabled>— laat maar zien —</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h2 id="subtitle"></h2>
|
||||
</div>
|
||||
<div class="main" id="data"></div>
|
||||
<div class="foot">
|
||||
<h2>Bronnen</h2>
|
||||
<table class="bron">
|
||||
<tr>
|
||||
<td>Algemeen</td>
|
||||
<td class="bar">
|
||||
<div id="NieuwsNL" style="width: 100%"></div>
|
||||
</td>
|
||||
<td><a href="https://nieuws.nl/">NieuwsNL</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="NOS"></div>
|
||||
</td>
|
||||
<td><a href="https://nos.nl/">NOS</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="NU"></div>
|
||||
</td>
|
||||
<td><a href="https://www.nu.nl/">NU</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="RO"></div>
|
||||
</td>
|
||||
<td><a href="https://reportersonline.nl/">Reporters Online</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Sargasso"></div>
|
||||
</td>
|
||||
<td><a href="https://sargasso.nl/">Sargasso</a></td>
|
||||
</tr>
|
||||
<tr class="last">
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Volkskrant"></div>
|
||||
</td>
|
||||
<td><a href="https://www.volkskrant.nl/">de Volkskrant</a></td>
|
||||
</tr>
|
||||
<tr class="first">
|
||||
<td>Amsterdam</td>
|
||||
<td class="bar">
|
||||
<div id="AT5"></div>
|
||||
</td>
|
||||
<td><a href="https://www.at5.nl/">AT5</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Parool"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.parool.nl/amsterdam/">Het Parool | Amsterdam</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="last">
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="BuurtAdam"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://indebuurt.nl/amsterdam/">In de buurt | Amsterdam</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="first">
|
||||
<td>Groningen</td>
|
||||
<td class="bar">
|
||||
<div id="GG"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://gemeente.groningen.nl/nieuwsoverzicht">Gemeente Groningen</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="BuurtGrn"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://indebuurt.nl/groningen/">In de buurt | Groningen</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Oog"></div>
|
||||
</td>
|
||||
<td><a href="https://www.oogtv.nl/">Oog</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="RTVNoord"></div>
|
||||
</td>
|
||||
<td><a href="https://www.rtvnoord.nl/">RTV Noord</a></td>
|
||||
</tr>
|
||||
<tr class="last">
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Sikkom"></div>
|
||||
</td>
|
||||
<td><a href="https://sikkom.nl/">Sikkom</a></td>
|
||||
</tr>
|
||||
<tr class="first">
|
||||
<td>Literatuur</td>
|
||||
<td class="bar">
|
||||
<div id="LitNL"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.literairnederland.nl/">Literair Nederland</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="last">
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="Tzum"></div>
|
||||
</td>
|
||||
<td><a href="https://www.tzum.info/">Tzum</a></td>
|
||||
</tr>
|
||||
<tr class="first">
|
||||
<td>Vlaanderen</td>
|
||||
<td class="bar">
|
||||
<div id="HLN"></div>
|
||||
</td>
|
||||
<td><a href="https://www.hln.be/">HLN</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bar">
|
||||
<div id="VRT"></div>
|
||||
</td>
|
||||
<td><a href="https://www.vrt.be/vrtnws/nl/">VRT NWS</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
273
www/app2.js
Normal file
273
www/app2.js
Normal file
@@ -0,0 +1,273 @@
|
||||
var dates
|
||||
var datesNr
|
||||
var countsWeek
|
||||
|
||||
var parts = ['woorden', 'personen', 'locaties', 'organisaties', 'andere namen']
|
||||
|
||||
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))
|
||||
}
|
||||
|
||||
function setCounts(week) {
|
||||
if (week != countsWeek) {
|
||||
countsWeek = week
|
||||
var max = data[week].max
|
||||
var pp = Object.entries(data[week].sources)
|
||||
for (var i in pp) {
|
||||
document.getElementById(pp[i][0]).style.width =
|
||||
(pp[i][1] / max) * 100 + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getJSON(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.open('get', '/alfa/wvdm/data/' + url, true)
|
||||
xhr.responseType = 'json'
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status
|
||||
if (status == 200) {
|
||||
resolve(xhr.response)
|
||||
} else {
|
||||
reject(status)
|
||||
}
|
||||
}
|
||||
xhr.send()
|
||||
})
|
||||
}
|
||||
|
||||
function escape(s) {
|
||||
return s
|
||||
.replace('&', '&')
|
||||
.replace("'", ''')
|
||||
.replace('<', '<')
|
||||
.replace('>', '>')
|
||||
}
|
||||
|
||||
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')
|
||||
|
||||
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[3]
|
||||
}
|
||||
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[3] / 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(
|
||||
week.substring(0, 4) + '/DATA-' + week + '-G2.json',
|
||||
)
|
||||
}
|
||||
|
||||
idSubtitle.innerHTML = source + ' — t/m ' + data[week].last
|
||||
|
||||
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)
|
||||
idData.innerHTML = d.innerHTML
|
||||
setCounts(week)
|
||||
}
|
||||
|
||||
async function loadPart(part, week) {
|
||||
if (!data.has(week)) {
|
||||
data[week] = await getJSON(
|
||||
week.substring(0, 4) + '/DATA-' + week + '-G2.json',
|
||||
)
|
||||
}
|
||||
|
||||
idSubtitle.innerHTML = part + ' — t/m ' + data[week].last
|
||||
|
||||
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)
|
||||
idData.innerHTML = d.innerHTML
|
||||
setCounts(week)
|
||||
}
|
||||
|
||||
async function loadWeken(source, part) {
|
||||
idSubtitle.innerHTML = source + ' — ' + part
|
||||
|
||||
const d = document.createElement('div')
|
||||
const tab = document.createElement('table')
|
||||
tab.classList.add('outer')
|
||||
tr = document.createElement('tr')
|
||||
|
||||
for (var i = datesNr; i < datesNr + 10; i++) {
|
||||
if (i < dates.length) {
|
||||
var week = dates[i].week
|
||||
if (!data.has(week)) {
|
||||
data[week] = await getJSON(
|
||||
week.substring(0, 4) + '/DATA-' + week + '-G2.json',
|
||||
)
|
||||
}
|
||||
var values = data[week][source][part]
|
||||
tr.appendChild(makeTD('t/m ' + data[week].last, values))
|
||||
}
|
||||
}
|
||||
|
||||
tab.appendChild(tr)
|
||||
d.appendChild(tab)
|
||||
idData.innerHTML = d.innerHTML
|
||||
setCounts(dates[datesNr].week)
|
||||
}
|
||||
|
||||
function locateWeek(date) {
|
||||
if (date == '') {
|
||||
datesNr = 0
|
||||
return
|
||||
}
|
||||
var n = dates.length - 1
|
||||
if (date < dates[n].first) {
|
||||
datesNr = n
|
||||
return
|
||||
}
|
||||
if (date > dates[0].last) {
|
||||
datesNr = 0
|
||||
return
|
||||
}
|
||||
var p1 = 0
|
||||
var p2 = n
|
||||
while (true) {
|
||||
// fix voor als de weken niet aansluitend zijn (er ontbreken weken)
|
||||
if (p1 > p2) {
|
||||
datesNr = p2
|
||||
return
|
||||
}
|
||||
var i = Math.floor((p1 + p2) / 2)
|
||||
if (dates[i].first > date) {
|
||||
p1 = i + 1 // dit klopt: lijst is van groot naar klein
|
||||
} else if (dates[i].last < date) {
|
||||
p2 = i - 1
|
||||
} else {
|
||||
datesNr = i
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function kies() {
|
||||
let what = fWhat.value
|
||||
let source = fSource.value
|
||||
let part = fPart.value
|
||||
let date = fDate.value
|
||||
|
||||
locateWeek(date)
|
||||
|
||||
idData.classList.add('fade')
|
||||
idSubtitle.classList.add('fade')
|
||||
await sleep(20)
|
||||
|
||||
if (what == 'opt1') {
|
||||
await loadSource(source, dates[datesNr].week)
|
||||
} else if (what == 'opt2') {
|
||||
await loadPart(part, dates[datesNr].week)
|
||||
} else {
|
||||
await loadWeken(source, part)
|
||||
}
|
||||
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('indexG2.json')
|
||||
datesNr = 0
|
||||
fDate.setAttribute('min', dates[dates.length - 1].last)
|
||||
fDate.setAttribute('max', dates[0].last)
|
||||
loadSource('Algemeen', dates[datesNr].week)
|
||||
}
|
||||
|
||||
init()
|
||||
Reference in New Issue
Block a user