From 1cd400cbd900bf7b756f753da9d8c0c5bee640ea Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Tue, 9 Sep 2025 13:47:40 +0200
Subject: lade die Bilder der Klassen und zeichne sie auf die entsprechenden
 Balken

---
 Makefile          |  4 +++-
 index.js          | 41 ++++++++++++++++++++++++++++++++++++++++-
 index.php         |  4 +++-
 package-lock.json | 12 +++++++++++-
 package.json      |  3 ++-
 5 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/Makefile b/Makefile
index 3e08eda..f07d611 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,6 @@
-JS := node_modules/chart.js/dist/chart.umd.js node_modules/chart.js/dist/chart.umd.js.map index.js
+JS := node_modules/chart.js/dist/chart.umd.js node_modules/chart.js/dist/chart.umd.js.map \
+      node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js \
+      index.js
 PHP := index.php lade_daten.php config.php
 CSS := index.css
 
diff --git a/index.js b/index.js
index e37d2af..b67bf04 100644
--- a/index.js
+++ b/index.js
@@ -29,6 +29,7 @@
 // wenn die Seite komplett geladen wurde
 window.onload = function() {
   zeichne();
+  zeichneBilder();
   listeEvents();
 }
 
@@ -49,7 +50,7 @@ function zeichne() {
   if (diagramm) diagramm.destroy();
 
   // Erzeuge ein neues Balkendiagramm mit unseren Daten
-  chart = new Chart(ctx, {
+  diagramm = new Chart(ctx, {
     type: 'bar',
     options: {
       animation: false, // Deaktiviere die Animation beim Zeichnen der Balken
@@ -80,6 +81,44 @@ function zeichne() {
   zeichenort['aria-busy'] = false;
 }
 
+// Lade und zeichne die Bilder der Klassen an die Spitze ihrer jeweiligen Balken
+async function zeichneBilder() {
+  // Das Objekt, das alle unsere Bilder Annotationen enthält
+  let annotation = {annotations: {}};
+  for (const i in daten.klassen) {
+    let klasse = daten.klassen[i];
+    // Die Url des Klassenbildes ist der Klassenbezeichner unter dem Bilderpfad
+    let bildUrl = `${bilder_pfad}/${klasse.bezeichner}.png`;
+
+    // Teste ob das Bild existiert
+    let ok = (await fetch(bildUrl, {method: 'HEAD'})).ok;
+    // Das Bild existiert nicht
+    if (!ok) { continue; }
+
+    // Erzeuge ein neues Bild und verwende die Bild URL unter der ein Bild gefunden wurde
+    let bild = new Image();
+    bild.src = bildUrl;
+
+    // Zeichne das Bild knapp unter dem oberen Rand des Balkens
+    let klassenAnnotation = {
+      drawTime: 'afterDatasetsDraw',
+      type: 'label',
+      content: bild,
+      width: 75,
+      height: 75,
+      xValue: klasse.bezeichner,
+      yValue: klasse.punkte - 1
+    };
+
+    annotation.annotations[klasse.bezeichner] = klassenAnnotation;
+  }
+
+  // Ergänze die Diagramm-Optionen um unsere Annotationen
+  diagramm.options.plugins.annotation = annotation;
+  // Zeichne das Diagramm neu mit unseren Annotationen
+  diagramm.update();
+}
+
 // Erzeuge eine Liste aller Ereignisse.
 // Die globale Variable ereignisse muss definiert sein und ein Iterable aller
 // Ereignisse, die angezeigt werden sollen, enthalten.
diff --git a/index.php b/index.php
index 8d314a9..913a6f2 100644
--- a/index.php
+++ b/index.php
@@ -9,8 +9,9 @@
   <!-- Lade den CSS Code, der das Aussehen der Seite definiert -->
   <link rel="stylesheet" href="index.css"/>`
 
-  <!-- Lade die Daten für den Jahrgang und das Schuljahr aus der Datenbank -->
+  <!-- Die Daten für den Jahrgang und das Schuljahr aus der Datenbank -->
   <?php 
+    // Lade die Daten für den Jahrgang und das Schuljahr aus der Datenbank
     $QUERIES = array();
     parse_str($_SERVER['QUERY_STRING'], $QUERIES);
 
@@ -53,6 +54,7 @@
 
   <!-- Lade die benötigten Javascript Dateien -->
   <script src="js/chart.umd.js"></script>
+  <script src="js/chartjs-plugin-annotation.min.js"></script>
   <script src="js/index.js"></script>
 </head>
 
diff --git a/package-lock.json b/package-lock.json
index 2a3fb6e..f8c98b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
-        "chart.js": "^4.4.0"
+        "chart.js": "^4.4.0",
+        "chartjs-plugin-annotation": "^3.1.0"
       }
     },
     "node_modules/@kurkle/color": {
@@ -29,6 +30,15 @@
       "engines": {
         "pnpm": ">=8"
       }
+    },
+    "node_modules/chartjs-plugin-annotation": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=4.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c6a01d6..8df9fd1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "author": "Florian Fischer",
   "license": "ISC",
   "dependencies": {
-    "chart.js": "^4.4.0"
+    "chart.js": "^4.4.0",
+    "chartjs-plugin-annotation": "^3.1.0"
   }
 }
-- 
cgit v1.2.3