From af8585faa1aa7c39564c583963349c4a2922df9c Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Wed, 24 Jun 2026 09:18:26 +0200
Subject: cockpit: finish prototype UI

* remove process and calendar
* add observation period
* improve mocking
---
 cockpit/index.html | 83 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 62 insertions(+), 21 deletions(-)

(limited to 'cockpit/index.html')

diff --git a/cockpit/index.html b/cockpit/index.html
index d0bb0c7..ddf8005 100644
--- a/cockpit/index.html
+++ b/cockpit/index.html
@@ -48,6 +48,9 @@
       </div>
     </div>
 
+    <div id="student-observation" class="student-info-banner">
+    </div>
+
     <div id="student-info-mid" class="student-info-banner">
       <div id="student-info-green" class="student-info-mid-element">
         ⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span>
@@ -70,32 +73,70 @@
       <button id="student-info-point-reason-submit">&crarr;</button>
     </div>
 
-    <div id="student-info-bottom" class="student-info-banner">
-      <div id="student-info-stickers-container" class="student-info-bottom-element">
-        Monstersticker
-        <div id="student-info-stickers">
-        </div>
-      </div>
-      <div id="student-info-bonus-container" class="student-info-bottom-element">
-        Bonuskarten
-        <div id="student-info-bonus-row">
-          <img></img>
-          <span id="student-info-bonus-amount">0</span>
-        </div>
-      </div>
-    </div>
+    <!-- <div id="student-info-bottom" class="student-info-banner"> -->
+      <!-- <div id="student-info-stickers-container" class="student-info-bottom-element"> -->
+        <!-- Monstersticker -->
+        <!-- <div id="student-info-stickers"> -->
+        <!-- </div> -->
+      <!-- </div> -->
+      <!-- <div id="student-info-bonus-container" class="student-info-bottom-element"> -->
+        <!-- Bonuskarten -->
+        <!-- <div id="student-info-bonus-row"> -->
+          <!-- <img></img> -->
+          <!-- <span id="student-info-bonus-amount">0</span> -->
+        <!-- </div> -->
+      <!-- </div> -->
+    <!-- </div> -->
   </div>
 
-  <details id="progress">
-    <summary>Lernfortschritt</summary>
-  </details>
+  <!-- <details id="progress"> -->
+    <!-- <summary>Lernfortschritt</summary> -->
+  <!-- </details> -->
   
-  <details id="calendar">
-    <summary>Kalender</summary>
-  </details>
+  <!-- <details id="calendar"> -->
+    <!-- <summary>Kalender</summary> -->
+  <!-- </details> -->
 
-  <details id="graduation">
+  <details id="graduation" data-availability="if-lehrer">
     <summary>Graduierung</summary>
+
+    <details id="graduation-changes-container" class="graduation-dropdown">
+      <summary>Übersicht über Grüne, Orangene und Rote Punkte</summary>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Datum</th>
+              <th>Grund</th>
+              <th>Coach</th>
+           </tr>
+         </thead>
+         <tbody id="graduation-changes">
+         </tbody>
+       </table>
+    </details>
+
+    <details id="graduation-current-observation-period-container" class="graduation-dropdown">
+      <summary>Aktueller Beobachtungszeitraum</summary>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Ja</th>
+              <th>Nein</th>
+           </tr>
+         </thead>
+         <tbody id="graduation-current-observation-period">
+         </tbody>
+       </table>
+    </details>
+
+    <details id="graduation-observation-periods-container" class="graduation-dropdown">
+      <summary>Vergangene Beobachtungszeiträume</summary>
+        <table class="table table-striped">
+         <tbody id="graduation-observation-periods">
+         </tbody>
+       </table>
+    </details>
   </details>
 </div>
 </body>
-- 
cgit v1.2.3