app2
This commit is contained in:
Peter Kleiweg
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