1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/**
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* Copyright (C) 2025 Florian Fischer
*
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*
*/
// Zeichne das Diagramm und erstelle eine Liste aller Events,
// wenn die Seite komplett geladen wurde
window.onload = function() {
zeichne();
listeEvents();
}
var diagramm;
function zeichne() {
// Wir haben keine Daten zum Zeichnen
if (!daten || !daten.klassen) return;
// Zeige den Indikator, dass das Diagramm gezeichnet wird
let zeichnenIndikator = document.getElementById("zeichnen");
zeichnenIndikator.style.display = "block";
let zeichenort = document.getElementById("zeichenort");
zeichenort['aria-busy'] = true;
const ctx = document.getElementById('zeichenflaeche');
// Verwerfe ein bereits gezeichnetes Diagramm
if (diagramm) diagramm.destroy();
// Erzeuge ein neues Balkendiagramm mit unseren Daten
chart = new Chart(ctx, {
type: 'bar',
options: {
animation: false, // Deaktiviere die Animation beim Zeichnen der Balken
plugins: {
legend: {
display: false // Wir benötigen keine Legende für den Punktestand
},
tooltip: {
enabled: false // Deaktiviere die Tooltips, die nur den Punktestand zeigen
}
}
},
data: {
// Die Klassenbezeichnungen sind unsere X-Achsen Bezeichner
labels: daten.klassen.map(klasse => klasse.bezeichner),
datasets: [
{
label: 'Punkte',
data: daten.klassen.map(klasse => klasse.punkte),
backgroundColor: daten.klassen.map(klasse => klasse.farbe)
}
]
},
});
// Verstecke den Zeichenindikator
zeichnenIndikator.style.display = "none";
zeichenort['aria-busy'] = false;
}
// Erzeuge eine Liste aller Ereignisse.
// Die globale Variable ereignisse muss definiert sein und ein Iterable aller
// Ereignisse, die angezeigt werden sollen, enthalten.
function listeEvents() {
let liste = document.getElementById("ereignisse");
for (let ereignis of daten.ereignisse) {
// Erzeuge ein Listenelement, das alle Infos des Ereignisses enthält
let ereignisNode = document.createElement("li");
ereignisNode.classList.add("ereignis");
// Span, das die Meta-Informationen (Klasse, Datum) eines Ereignisses enthält
let ereignisUrsache = document.createElement("span");
ereignisUrsache.innerHTML = `<b>${ereignis.Jahrgang}${ereignis.Bezeichner}</b>`
if (ereignis.Datum) {
ereignisUrsache.innerHTML += ` <small>${ereignis.Datum}</small>`
}
ereignisUrsache.classList.add("ereignis-klasse");
ereignisNode.appendChild(ereignisUrsache);
// Die Veränderung des Punktestands durch das Ereignis
let ereignisDelta = document.createElement("span");
ereignisDelta.innerHTML = `${ereignis.Delta}`;
ereignisDelta.classList.add("ereignis-delta");
ereignisNode.appendChild(ereignisDelta);
// Die Beschreibung des Ereignisses
let ereignisBeschreibung = document.createElement("span");
ereignisBeschreibung.innerHTML = `<i>${ereignis.Beschreibung}</i>`;
ereignisBeschreibung.classList.add("ereignis-beschreibung");
ereignisNode.appendChild(ereignisBeschreibung);
// Füge das neue Ereignis-Listenelement der Ereignis-Liste hinzu
liste.appendChild(ereignisNode);
}
}
|
