Added refernce mirrored to mirror team position when sitting behind the main monitor

scoreboard/controllers/score.js

@@ -14,7 +14,8 @@ let teamB = {
     score: 0,
     isSpielgemeinschaft: 0,
 };
-let sideswitch = false;
+let sideswitch = false;             // Attribute to switch sides after halftime
+let referenceMirrored = false;      // If sitting behind the scoreboard, switch sides for admin board
 
 // Function prototypes
 function setEnabled(status) {};
@@ -22,7 +23,7 @@ function configTeam(team, name, name2, isSpielgemeinschaft) {};
 function setScore(team, score) {};
 function alterScore(team, dir) {};
 function clearScore() {};
-function toggleSideSwitch() {};
+function toggleSideswitch() {};
 function getEnabled() {};
 function getValues() {};
 
@@ -91,6 +92,11 @@ function toggleSideswitch() {
     io.sockets.emit('scoreSideswitch', '');
 }
 
+// Mirror team position on admin panel
+function toggleReferenceMirrored() {
+    referenceMirrored = !referenceMirrored;
+}
+
 // Return enabled value
 function getEnabled() {
     return enabled
@@ -112,11 +118,12 @@ function getValues() {
         teamA: teamA,
         teamB: teamB,
         sideswitch: sideswitch,
+        referenceMirrored: referenceMirrored,
         print: print(),
         teams: db.getTeams(),
     };
 }
 
 module.exports = {
-    setEnabled, configTeam, setScore, alterScore, clearScore, toggleSideswitch, getEnabled, getValues
+    setEnabled, configTeam, setScore, alterScore, clearScore, toggleSideswitch, toggleReferenceMirrored, getEnabled, getValues,
 }

scoreboard/public/javascripts/admin.js

@@ -20,12 +20,22 @@ socket.on('timerEnded', (message) => {
 
 socket.on('score', (message) => {
     console.log(message);                                               // Log score in client console
-    document.getElementById("score").innerHTML = message;               // Display score in corresponding html Element
+    scoreGetValues();
+    // document.getElementById("score").innerHTML = message;               // Display score in corresponding html Element
 });
 
 // ######################################################################################################################################################
 // General functions
 // ######################################################################################################################################################
+
+// Initial update gets called whenever page has been loaded
+async function initialUpdate() {
+    etcGetValues();                                             // Request new values for etc stuff
+    timerGetValues();                                           // Request new values for timer
+    scoreGetValues();                                           // Request new values for score
+    dbGetValues();                                              // Request new values for db contents
+}
+
 // Update DOM timer elements from passed values
 function updateEtcFrontend(values) {
     console.log(values);
@@ -48,13 +58,22 @@ function updateTimerFrontend(values) {
     }
 }
 
+// Build colname to show Teams on Adminpanel based on isSpielgemeinschaft
+function buildColFromIsSpielgemeinschaft(team) {
+    if(team.isSpielgemeinschaft) {
+        return team.name + "<br>" + team.name2;
+    } else {
+        return team.name + "<br>&nbsp;";
+    }
+}
+
 // Update DOM score elements from passed values
 function updateScoreFrontend(values) {
     console.log(values);                                                        // Print received data
     document.getElementById("scoreSwitchEnable").checked = values.enabled;      // Set switch status to received score enabled value
-    document.getElementById("score").innerHTML = values.print;                  // Set score on admin interface
+    document.getElementById("scoreSwitchReferenceMirrored").checked = values.referenceMirrored;      // Set switch status to received score enabled value
 
-    // Input current Team values into form inputs
+    // Config Teams - Input current teams into text fields
     document.getElementById("teamAname").value = values.teamA.name;
     document.getElementById("teamAname2").value = values.teamA.name2;
     document.getElementById("teamAisSpielgemeinschaft").checked = values.teamA.isSpielgemeinschaft;
@@ -62,6 +81,27 @@ function updateScoreFrontend(values) {
     document.getElementById("teamBname").value = values.teamB.name;
     document.getElementById("teamBname2").value = values.teamB.name2;
     document.getElementById("teamBisSpielgemeinschaft").checked = values.teamB.isSpielgemeinschaft;
+
+    // Show current Teams on admin panel
+    if(!values.referenceMirrored && !values.sideswitch || values.referenceMirrored && values.sideswitch) {                  // If not mirrored on adminpanel, show like main frontend while considering sideswitch state
+        document.getElementById("score").innerHTML = values.teamA.score + ':' + values.teamB.score;
+        document.getElementById("teamAcolName").innerHTML = buildColFromIsSpielgemeinschaft(values.teamA);
+        document.getElementById("teamBcolName").innerHTML = buildColFromIsSpielgemeinschaft(values.teamB);
+        document.getElementById("teamAinc").setAttribute("onclick", "scoreAlterScore('teamA', 'inc')");
+        document.getElementById("teamAdec").setAttribute("onclick", "scoreAlterScore('teamA', 'dec')");
+        document.getElementById("teamBinc").setAttribute("onclick", "scoreAlterScore('teamB', 'inc')");
+        document.getElementById("teamBdec").setAttribute("onclick", "scoreAlterScore('teamB', 'dec')");
+
+    } else if(!values.referenceMirrored && values.sideswitch || values.referenceMirrored && !values.sideswitch) {           // Else, swap posistions
+        document.getElementById("score").innerHTML = values.teamB.score + ':' + values.teamA.score;
+        document.getElementById("teamAcolName").innerHTML = buildColFromIsSpielgemeinschaft(values.teamB);
+        document.getElementById("teamBcolName").innerHTML = buildColFromIsSpielgemeinschaft(values.teamA);
+        document.getElementById("teamAinc").setAttribute("onclick", "scoreAlterScore('teamB', 'inc')");
+        document.getElementById("teamAdec").setAttribute("onclick", "scoreAlterScore('teamB', 'dec')");
+        document.getElementById("teamBinc").setAttribute("onclick", "scoreAlterScore('teamA', 'inc')");
+        document.getElementById("teamBdec").setAttribute("onclick", "scoreAlterScore('teamA', 'dec')");
+    }
+
 }
 
 // Update DOM for all db contents with the passed values
@@ -125,13 +165,6 @@ async function scoreInsertChosenName(field, name) {
     }
 }
 
-// Initial update gets called whenever page has been loaded
-async function initialUpdate() {
-    timerGetValues();                                           // Request new values for timer
-    scoreGetValues();                                           // Request new values for score
-    dbGetValues();                                              // Request new values for db contents
-}
-
 // Request monitor refresh for index frontend
 async function refreshMonitor() {
     const response = await fetch("/admin/refreshMonitor");      // Call API Endpoint /admin/timerStart
@@ -259,6 +292,13 @@ async function scoreToggleSideswitch() {
     updateScoreFrontend(data);                                  // Update admin frontend
 }
 
+// Switch sides to mirror admin panel when sitting behind main monitor
+async function scoreToggleReferenceMirrored() {
+    const response = await fetch("/admin/scoreToggleReferenceMirrored");// Call API Endpoint /admin/scoreSwitch
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateScoreFrontend(data);                                  // Update admin frontend
+}
+
 // Clear score
 async function scoreClearScore() {
     const response = await fetch("/admin/scoreClearScore");     // Call API Endpoint /admin/scoreClearScore

scoreboard/routes/admin.js

@@ -6,6 +6,7 @@ const timer = require('../controllers/timer');
 const score = require('../controllers/score');
 const cli = require('../controllers/cli');
 const db = require('../controllers/db');
+const etc = require('../controllers/etc');
 
 // ######################################################################################################################################################
 // General endpoints
@@ -132,6 +133,13 @@ router.get('/scoreToggleSideswitch', function(req, res, next) {
     res.json(score.getValues());
 });
 
+// Express router endpoint to toggle reference mirrored attribute
+router.get('/scoreToggleReferenceMirrored', function(req, res, next) {
+    score.toggleReferenceMirrored();
+    res.status(200);
+    res.json(score.getValues());
+});
+
 // Express router endpoint to get important score values
 router.get('/scoreGetValues', function(req, res, next) {
     res.json(score.getValues());            // Respond with important values for frontend

scoreboard/views/admin.hbs

@@ -10,7 +10,7 @@
     <link href="/stylesheets/fontawesome/solid.min.css" rel="stylesheet" />
   </head>
   <body onload="initialUpdate()">
-    <div class="container-md my-4">
+    <div class=" container-fluid-sm container-fluid-md container-fluid-lg my-4 mx-4">
 
       <div class="row mb-4 justify-content-center">
         <div class="col-sm-12 col-md-12 col-lg-4">
@@ -26,13 +26,13 @@
         <div class="col-sm-12 col-md-12 col-lg-4">
           <div class="h-100 card text-center">
             <div class="card-body">
-              <button class="m-2 p-3 btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
+              <button class="mb-2 btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
-              <button class="m-2 p-3 btn btn-lg btn-warning" onclick="timerPause()" id="timerPauseBtn"><i class="fa-solid fa-pause"></i> Pause</button>
+              <button class="mb-2 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-12 col-lg-4">
+        <div class="col-sm-12 col-md-12 col-lg-5">
           <div class="h-100 card text-center">
             <div class="card-body ">
               <div class="btn-group align-middle" role="group" aria-label="Basic example">
@@ -47,7 +47,7 @@
           </div>
         </div>
 
-        <div class="col-sm-12 col-md-12 col-lg-4">
+        <div class="col-sm-12 col-md-12 col-lg-3">
           <div class="h-100 card text-center">
             <div class="card-body">
               <button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
@@ -59,11 +59,29 @@
       </div>
 
       <div class="row mb-4 justify-content-center">
-        <div class="col-sm-12 col-md-12 col-lg-4">
+        <div class="col-sm-12 col-md-12 col-lg-8">
           <div class="card text-center">
             <div class="card-body">
+              <div class="row">
+                <div class="col-sm-5 col-md-5 col-lg-4">
+                  <h5 id="teamAcolName"></h5>
+                  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+                    <button type="mb-2 button" class="btn btn-outline-success btn-lg" id="teamAinc"><i class="fa-solid fa-up-long"></i> +1</button>
+                    <button type="mb-2 button" class="btn btn-outline-danger btn-lg" id="teamAdec"><i class="fa-solid fa-down-long"></i> -1</button>
+                  </div>
+                </div>
+                <div class="col-sm-2 col-md-2 col-lg-4">
                   <h1 id="score"></h1>    
                 </div>
+                <div class="col-sm-5 col-md-5 col-lg-4">
+                  <h5 id="teamBcolName"></h5>
+                  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+                    <button type="mb-2 button" class="btn btn-outline-success btn-lg" id="teamBinc"><i class="fa-solid fa-up-long"></i> +1</button>
+                    <button type="mb-2 button" class="btn btn-outline-danger btn-lg" id="teamBdec"><i class="fa-solid fa-down-long"></i> -1</button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -73,17 +91,13 @@
           <div class="h-100 card text-center">
             <div class="card-body">
               <div class="row">
-                <div class="col-sm-6 col-md-6 col-lg-6">
+                <div class="col-sm-6 col-md-6 col-lg-6 mb-4">
-                  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+                  <h5 id="teamAcolName"></h5>
-                    <button type="mb-2 button" class="btn btn-outline-success" onclick="scoreAlterScore('teamA', 'inc')">Team A +1</button>
+
-                    <button type="mb-2 button" class="btn btn-outline-danger" onclick="scoreAlterScore('teamA', 'dec')">Team A -1</button>
-                  </div>
                 </div>
                 <div class="col-sm-6 col-md-6 col-lg-6">
-                  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+                  <h5 id="teamBcolName"></h5>
-                    <button type="mb-2 button" class="btn btn-outline-success" onclick="scoreAlterScore('teamB', 'inc')">Team B +1</button>
+
-                    <button type="mb-2 button" class="btn btn-outline-danger" onclick="scoreAlterScore('teamB', 'dec')">Team B -1</button>
-                  </div>
                 </div>
               </div>
             </div>
@@ -299,10 +313,18 @@
         </div>
         <div class="modal-body">
           <p>Achtung, eine Fehlbedienung kann unerwünschtes Verhalten hervorrufen.</p>
+          <div class="form-check form-switch">
+            <input class="form-check-input" onclick="scoreToggleReferenceMirrored()" type="checkbox" role="switch" id="scoreSwitchReferenceMirrored">
+            <label class="form-check-label" for="scoreSwitchEnable">Teamanzeige im Adminpanel spiegeln?</label>
+          </div>
           <div class="form-check form-switch">
             <input class="form-check-input" onclick="scoreToggle()" type="checkbox" role="switch" id="scoreSwitchEnable">
             <label class="form-check-label" for="scoreSwitchEnable">Scoreboard anzeigen?</label>
           </div>
+          <div class="form-check form-switch">
+            <input class="form-check-input" onclick="etcToggleSplashscreen()" type="checkbox" role="switch" id="etcSwitchEnable">
+            <label class="form-check-label" for="scoreSwitchEnable">SG-Arheilgen Splashscreen anzeigen?</label>
+          </div>
           <button class="mb-2 btn btn-lg btn-warning" onclick="refreshMonitor()"><i class="fa-solid fa-rotate"></i> Monitor neu laden</button> <br>
           <button class="mb-2 btn btn-lg btn-success" onclick="openBrowser()"><i class="fa-solid fa-rocket"></i> Browser öffnen</button> <br>
           <button class="mb-3 btn btn-lg btn-danger" onclick="killBrowser()"><i class="fa-solid fa-stop"></i> Browser stoppen</button> <br>