From a55dcd0e95b95742cdee8b26ffd5821e5b995dd5 Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Sat, 1 Nov 2025 20:28:11 +0100
Subject: =?UTF-8?q?f=C3=A4rbe=20den=20Hintergrund=20der=20Ereignisse=20ent?=
 =?UTF-8?q?sprechend=20ihrer=20Klasse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.css |  1 +
 index.js  | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index fd4eba9..a67d04c 100644
--- a/index.css
+++ b/index.css
@@ -49,6 +49,7 @@ li.ereignis {
   align-items: center;  
   justify-content: center;
   float:right;
+  background-color: #ffffff;
 }
 
 .ereignis-delta.positiv {
diff --git a/index.js b/index.js
index 55ce7b0..4348b7d 100644
--- a/index.js
+++ b/index.js
@@ -180,14 +180,26 @@ function zeichneStreak() {
 // Ereignisse, die angezeigt werden sollen, enthalten.
 function listeEvents() {
   let liste = document.getElementById("ereignisse");
+
+  // Erzeuge ein Mapping von Klassenbezeichner auf die entsprechende Klasse
+  let klassen = {};
+  daten.klassen.forEach(klasse => { klassen[klasse.bezeichner] = klasse });
+
   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");
 
+    // Setze den Hintergrund des Ereignisses auf 40% der Klassenfarbe
+    let klassenBezeichner = `${ereignis.Jahrgang}${ereignis.Bezeichner}`
+    let klasse = klassen[klassenBezeichner];
+    if (klasse.farbe) {
+      ereignisNode.style.backgroundColor = `${klasse.farbe}40`;
+    }
+
     // Span, das die Meta-Informationen (Klasse, Datum) eines Ereignisses enthält
     let ereignisUrsache = document.createElement("span");
-    ereignisUrsache.innerHTML = `<b>${ereignis.Jahrgang}${ereignis.Bezeichner}</b>`
+    ereignisUrsache.innerHTML = `<b>${klassenBezeichner}</b>`
     if (ereignis.Datum) {
       ereignisUrsache.innerHTML += ` <small>${ereignis.Datum}</small>`
     }
-- 
cgit v1.2.3