nlnieuws/www/app.js

var dates
var datesNr

var parts = [
  'nieuwe namen',
  'nieuwe woorden',
  'personen',
  'locaties',
  'organisaties',
  'andere namen',
]

var sources = ['Algemeen', 'Amsterdam', 'Groningen', 'Literatuur', 'Vlaanderen']

var data = new Map()

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

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()
  })
}

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('DATA-' + week + '-4.json')
  }

  document.getElementById('subtitle').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)
  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 + ' — 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)
  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 = datesNr; i < datesNr + 10; i++) {
    if (i < dates.length) {
      var week = dates[i].week
      if (!data.has(week)) {
        data[week] = await getJSON('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)
  document.getElementById('data').innerHTML = d.innerHTML
}

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 source = document.forms['choice']['rSource'].value
  let part = document.forms['choice']['rPart'].value
  let date = document.forms['choice']['dDatum'].value
  if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
    alert('Kies een bron en/of een onderdeel')
    return
  }

  locateWeek(date)

  const dd = document.getElementById('data')
  const st = document.getElementById('subtitle')
  dd.classList.add('fade')
  st.classList.add('fade')
  await sleep(20)

  if (source == 'alles' || source == '') {
    await loadPart(part, dates[datesNr].week)
  } else if (part == 'alles' || part == '') {
    await loadSource(source, dates[datesNr].week)
  } else {
    await loadWeken(source, part)
  }
  dd.classList.remove('fade')
  st.classList.remove('fade')
}

async function init() {
  dates = await getJSON('index4.json')
  datesNr = 0
  const d = document.getElementById('dDatum')
  d.setAttribute('min', dates[dates.length - 1].last)
  d.setAttribute('max', dates[0].last)
  loadSource('Algemeen', dates[datesNr].week)
}

init()