unterstützte konfigurierbare "Streaks"

Ein Streak ist ein Zeitraum der zählt wie viele gleiche Ereignisse in
zeitlicher Folge aufgetreten sind. Ein Streak wird durch ein nicht
positives Ereignis beendet.

1 files changed, 21 insertions, 8 deletions

diff --git a/index.php b/index.php
index 8f8e101..fa1bb83 100644
--- a/index.php
+++ b/index.php
@@ -40,18 +40,22 @@
     // Bereite die Klassen und Ereignisse für Javascript vor
     $daten_json = json_encode($daten);
 
-    // Ersetze die $JAHRGANG und $SCHULJAHR Platzhalter durch die werte der Variablen
+    // Ersetze die $JAHRGANG und $SCHULJAHR Platzhalter durch die Werte der Variablen
     $bilder_pfad = str_replace(
       array('$JAHRGANG', '$SCHULJAHR'),
       array($JAHRGANG, $SCHULJAHR),
       $CONFIG['bilder_pfad_format']);
 
     $bilder_pfad_json = json_encode($bilder_pfad);
+    $streak_anzahl = json_encode($CONFIG['streak_anzahl'] ?? '');
+    $streak_ziel = json_encode($CONFIG['streak_ziel'] ?? '');
 
     // Schreibe den Javascript Code mit unseren Daten in die Webseite
     echo "<script>";
     echo "const daten = $daten_json;\n";
-    echo "const bilder_pfad = $bilder_pfad_json;";
+    echo "const bilder_pfad = $bilder_pfad_json;\n";
+    echo "const streak_anzahl = $streak_anzahl;\n";
+    echo "const streak_ziel = $streak_ziel;\n";
     echo "</script>";
   ?>
 
@@ -66,12 +70,21 @@
 
   <!-- Container für den Inhalt des Punktestands -->
   <div id="content">
-    <!-- Fortschrittsanzeige für das Zeichnen des Diagramms -->
-    <progress id="zeichnen" aria-label="Zeichnen" style="display: none;"></progress>
-    <!-- Container des Diagramms -->
-    <div id="zeichenort", aria-busy="true" aria-describedby="zeichnen">
-      <!-- Das HTML Element das zum Zeichnen des Diagramms verwendet wird -->
-      <canvas id="zeichenflaeche"></canvas>
+    <div id="graphen">
+      <!-- Fortschrittsanzeige für das Zeichnen des Diagramms -->
+      <progress id="zeichnen" aria-label="Zeichnen" style="display: none;"></progress>
+      <!-- Container des Diagramms -->
+      <div id="zeichenort", aria-busy="true" aria-describedby="zeichnen">
+        <!-- Das HTML Element das zum Zeichnen des Diagramms verwendet wird -->
+        <canvas id="zeichenflaeche"></canvas>
+      </div>
+      <!-- Container fuer alle Streak-Anzeigen -->
+      <table id="streaks-tabelle" aria-label="Streak-Anzeiger jeder Klasse.">
+        <tbody>
+          <tr id="streaks">
+          </tr>
+        </tbody>
+      </table>
     </div>
 
     <!-- Liste aller Ergeignisse -->