From 54ca75563a755216cbb4953f01a7ea69df9d2482 Mon Sep 17 00:00:00 2001
From: Julian Appel <kontakt@julianappel.de>
Date: Mon, 6 May 2024 22:20:37 +0200
Subject: [PATCH] Admin frontend page

---
 scoreboard/views/admin.hbs | 175 +++++++++++++++++++++++++++++++++----
 1 file changed, 159 insertions(+), 16 deletions(-)
diff --git a/scoreboard/views/admin.hbs b/scoreboard/views/admin.hbs
index 5b4836d..cfe3899 100644
--- a/scoreboard/views/admin.hbs
+++ b/scoreboard/views/admin.hbs
@@ -4,27 +4,170 @@
     <title>Scoreboard Admin</title>
     <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
     <link rel='stylesheet' href='/stylesheets/style.css' />
+
+    <link href="/stylesheets/fontawesome/fontawesome.min.css" rel="stylesheet" />
+    <link href="/stylesheets/fontawesome/brands.min.css" rel="stylesheet" />
+    <link href="/stylesheets/fontawesome/solid.min.css" rel="stylesheet" />
   </head>
-  <body>
-    Interface zur Bedienung des Zeit-/Scoreboards.
-    <div class="row">
-      <div class="col-lg-4">
-        <form method="post" action="/admin/timerStart">
-          <button class="btn btn-lg btn-success" type="submit" name="startButton">Start</button>
-        </form>
+  <body onload="initialUpdate()">
+    <div class="container">
+
+      <div class="row justify-content-center">
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <h1 id="durationLeft"></h1>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-lg-4">
-        <form method="post" action="/admin/timerPause">
-          <button class="btn btn-lg btn-warning" type="submit" name="pauseButton">Pause</button>
-        </form>
+      </br>
+      <div class="row">
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <button class="btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
+              <button class="btn btn-lg btn-warning" onclick="timerPause()" id="timerPauseBtn"><i class="fa-solid fa-pause"></i> Pause</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <div class="btn-group" role="group" aria-label="Basic example">
+                <button type="button" class="btn btn-secondary">-1m</button>
+                <button type="button" class="btn btn-secondary">-10s</button>
+                <button type="button" class="btn btn-secondary">-1s</button>
+                <button type="button" class="btn btn-secondary">+1s</button>
+                <button type="button" class="btn btn-secondary">+10s</button>
+                <button type="button" class="btn btn-secondary">+1m</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
+                <i class="fa-solid fa-rotate-right"></i> Zurücksetzen
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-lg-4">
-        <form method="post" action="/admin/timerReset">
-          <button class="btn btn-lg btn-danger" type="submit" name="resetButton">Reset</button>
-        </form>
+
+      </br></br></br></br></br></br>
+
+      <div class="row text-center">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <button class="btn btn-lg btn-danger" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
+        </div>
       </div>
+
     </div>
   </body>
   <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
+  <script src="/javascripts/socket.io.min.js"></script>
+  <script src="/javascripts/moment.js"></script>
   <script src="/javascripts/admin.js"></script>
-</html>
\ No newline at end of file
+
+  <!-- Modal -->
+  <div class="modal fade" id="timerResetModal" tabindex="-1" aria-labelledby="timerResetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="timerResetModalLabel">Timer zurücksetzen?</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Möchtest du den Timer wirklich zurücksetzen?</p>
+          <p>Gewünschte Zeit: 
+          <select class="form-select" id="timerSelectDuration" aria-label="Default select example">
+            <option value="0">0:00</option>
+            <option value="15">0:15</option>
+            <option value="30">0:30</option>
+            <option value="45">0:45</option>
+            <option value="60">1:00</option>
+            <option value="75">1:15</option>
+            <option value="90">1:30</option>
+            <option value="105">1:45</option>
+            <option value="120">2:00</option>
+            <option value="135">2:15</option>
+            <option value="150">2:30</option>
+            <option value="165">2:45</option>
+            <option value="180">3:00</option>
+            <option value="195">3:15</option>
+            <option value="210">3:30</option>
+            <option value="225">3:45</option>
+            <option value="240">4:00</option>
+            <option value="255">4:15</option>
+            <option value="270">4:30</option>
+            <option value="285">4:45</option>
+            <option value="300">5:00</option>
+            <option value="315">5:15</option>
+            <option value="330">5:30</option>
+            <option value="345">5:45</option>
+            <option value="360">6:00</option>
+            <option value="375">6:15</option>
+            <option value="390">6:30</option>
+            <option value="405">6:45</option>
+            <option selected value="420">7:00</option>
+            <option value="435">7:15</option>
+            <option value="450">7:30</option>
+            <option value="465">7:45</option>
+            <option value="480">8:00</option>
+            <option value="495">8:15</option>
+            <option value="510">8:30</option>
+            <option value="525">8:45</option>
+            <option value="540">9:00</option>
+            <option value="555">9:15</option>
+            <option value="570">9:30</option>
+            <option value="585">9:45</option>
+            <option value="600">10:00</option>
+          </select>
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="timerReset()">Zurücksetzen</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Modal -->
+
+  <!-- Timer start error toast -->
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="timerStartErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header">
+        <i class="fa-solid fa-triangle-exclamation"> </i>
+        <strong class="me-auto">  Fehler</strong>
+        <small></small>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+        Der Timer ist bereits abgelaufen. Zum neustarten bitte zurücksetzen!
+      </div>
+    </div>
+  </div>
+  <!-- Timer start error toast -->
+
+  <!-- Timer pause error toast -->
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="timerPauseErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header">
+        <i class="fa-solid fa-triangle-exclamation"> </i>
+        <strong class="me-auto">  Fehler</strong>
+        <small></small>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+        Der Timer ist bereits pausiert.
+      </div>
+    </div>
+  </div>
+  <!-- Timer pause error toast -->
+</html>
+
