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

scoreboard/controllers/etc.js

@@ -0,0 +1,21 @@
+let splashscreenEnabled = true;
+
+// Toggles a splashscreen
+function toggleSplashScreen() {
+    splashscreenEnabled = !splashscreenEnabled;
+}
+
+// Returns splashscreen enabled attribute
+function getSplashscreen() {
+    return splashscreenEnabled;
+}
+
+function getValues() {
+    return {
+        splashscreenEnabled: splashscreenEnabled,
+    } 
+}
+
+module.exports = {
+    toggleSplashScreen, getSplashscreen, getValues
+}

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,13 +20,28 @@ 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);
+    document.getElementById("etcSwitchEnable").checked = values.splashscreenEnabled;// Set switch status to received score enabled value
+}
+
 // Update DOM timer elements from passed values
 function updateTimerFrontend(values) {
     console.log(values);                                                // Print received data
@@ -43,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;
@@ -57,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
@@ -120,24 +165,36 @@ 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
 }
 
 async function openBrowser() {
-    const response = await fetch("/admin/openBrowser");      // Call API Endpoint /admin/openBrowser
+    const response = await fetch("/admin/openBrowser");         // Call API Endpoint /admin/openBrowser
 }
 
 async function killBrowser() {
-    const response = await fetch("/admin/killBrowser");      // Call API Endpoint /admin/killBrowser
+    const response = await fetch("/admin/killBrowser");         // Call API Endpoint /admin/killBrowser
+}
+
+// ######################################################################################################################################################
+// Etc endpoints
+// ######################################################################################################################################################
+
+// Request important values for etc stuff
+async function etcGetValues() {
+    const response = await fetch("/admin/etcGetValues");        // Call API Endpoint /admin/etcGetValues
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
+    updateEtcFrontend(data);                                    // Update admin frontend
+}
+
+// Toggle index page to also show scoreboard
+async function etcToggleSplashscreen() {
+    const response = await fetch("/admin/etcToggleSplashscreen");// Call API Endpoint /admin/etcToggleSplashscreen
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateEtcFrontend(data);                                    // Update admin frontend
+    refreshMonitor();                                           // Refresh main monitor to display new frontend
 }
 
 // ######################################################################################################################################################
@@ -235,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/public/javascripts/splashscreen.js

@@ -0,0 +1,14 @@
+let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
+const socket = io(wss);                                 // Connect to socketio server
+
+// ######################################################################################################################################################
+// Websockets event handler
+// ######################################################################################################################################################
+
+socket.on('connected', (message) => {
+    console.log("Connected");
+});
+
+socket.on('refresh', (message) => {
+    document.location.reload()                                      // Reload page on received 'refresh' messagen
+});

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
@@ -33,6 +34,23 @@ router.get('/killBrowser', function(req, res, next) {
     res.send();                             // send empty response
 });
 
+// ######################################################################################################################################################
+// Etc endpoints
+// ######################################################################################################################################################
+
+// Express router endpoint to toggle splashscreen
+router.get('/etcToggleSplashscreen', function(req, res, next) {
+    etc.toggleSplashScreen();               // Toggles splashscreen
+    res.status(200);                        // Set http status code to 200 (success)
+    res.json(etc.getValues());              // Answer with important values
+});
+
+// Express router endpoint to get important etc values
+router.get('/etcGetValues', function(req, res, next) {
+    res.status(200);                        // Set http status code to 200 (success)
+    res.json(etc.getValues());              // Answer with important values
+});
+
 // ######################################################################################################################################################
 // Timerendpoints
 // ######################################################################################################################################################
@@ -115,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/routes/index.js

@@ -2,14 +2,19 @@ var express = require('express');
 var router = express.Router();
 let io = require('../controllers/socketio');
 
-const score = require("../controllers/score");
+const score = require('../controllers/score');
+const etc = require('../controllers/etc');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-    if (score.getEnabled()) {                   // If scoreboard is enabled
+    if(etc.getSplashscreen()) {                     // If splashscreen is enabled
-        res.render('indexScore', {});           // Render the site with scoreboard
+        res.render('splashscreen', {});             // Render splashscreen
-    } else {                                    // If scoreboard is not enabled
+    } else {
-        res.render('index', {});                // Render the site without scoreboard
+        if (score.getEnabled()) {                   // If scoreboard is enabled
+            res.render('indexScore', {});           // Render the site with scoreboard
+        } else {                                    // If scoreboard is not enabled
+            res.render('index', {});                // Render the site without scoreboard
+        }
     }
 });
 

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,10 +59,28 @@
       </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">
-              <h1 id="score"></h1>
+              <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>
@@ -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>

scoreboard/views/splashscreen.hbs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Index</title>
+    <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
+    <link rel='stylesheet' href='/stylesheets/splashscreen.css' />
+    <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
+  </head>
+  <body onload="">
+
+    <div class="vh-100">
+      <img src="/img/SG_Arheilgen_upscaled.png" class="position-absolute top-50 start-50 translate-middle h-100">
+    </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/splashscreen.js"></script>
+</html>