nlnieuws/www/app.js

var dates
var datesNr
var countsWeek

var parts = [
  'nieuwe namen',
  'nieuwe 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('<', '&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')

  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>'
      }
      var t3 = ''
      if (value[3] && value[4]) {
        t3 =
          '<hr><small><em>lemma:</em> ' +
          escape(value[3]) +
          '<br><em>postag:</em> ' +
          escape(value[4]) +
          '</small>'
      }
      tr.setAttribute(
        'onmouseover',
        "tooltip.show('" +
          value[0] +
          ' \xa0 ' +
          escape(value[1]) +
          t2 +
          t3 +
          "')",
      )
      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(
      week.substring(0, 4) + '/DATA-' + week + '-4.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 + '-4.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 + '-4.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('index4.json')
  datesNr = 0
  fDate.setAttribute('min', dates[dates.length - 1].last)
  fDate.setAttribute('max', dates[0].last)
  loadSource('Algemeen', dates[datesNr].week)
}

init()