Merge branch 'master' of https://git.jappel.io/jappel/scoreboard-js

Konflikt in scoreboard/controllers/cli.js zugunsten der Remote-Version
aufgeloest: openBrowser()/killBrowser() bleiben erhalten, da routes/admin.js
sie verwendet. Der lokale Testcode wurde verworfen (er rief zudem das
child_process-Modul faelschlich als Funktion auf).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

scoreboard/bin/www

@@ -12,7 +12,7 @@ var http = require('http');
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '3000');
+var port = normalizePort(process.env.PORT || '80');
 app.set('port', port);
 
 /**

scoreboard/controllers/cli.js

@@ -1,23 +1,37 @@
-// CLI-Controller (Testdatei)
+// CLI-Controller
-// Zuständig für die Verarbeitung von Kommandozeilen-Befehlen des Scoreboards.
+// Startet und beendet den Anzeige-Browser auf dem Monitor-Rechner (Raspberry Pi).
-// Aktuell nur ein Funktionstest mit einem einfachen `ls`-Befehl.
+// Chromium wird im Kiosk-Modus auf Display :0 geöffnet und zeigt die Monitor-Ansicht an.
 
-const exec = require('node:child_process');
+const { spawn } = require('node:child_process')
 
-// Testaufruf: Listet den Inhalt des aktuellen Verzeichnisses auf,
+let command;                    // Referenz auf den laufenden Chromium-Prozess
-// um zu prüfen, ob child_process.exec korrekt funktioniert.
+let browserOpen = false;        // Status des Browsers, verhindert Mehrfachstart
-exec('ls ./', (err, output) => {
+
-    if (err) {
+// Startet Chromium im Kiosk-Modus, sofern noch kein Browser laeuft
-        console.error("could not execute command: ", err)
+async function openBrowser() {
-        return
+    if(!browserOpen) {
+        // Als Benutzer "pi" starten, damit der Prozess Zugriff auf das X-Display hat
+        command = spawn('sudo', ['-upi', 'chromium-browser', '--display=:0', '--incognito', '--noerrors', '--hide-crash-restore-bubble', '--disable-infobars', '--kiosk', 'http://localhost']);
+
+        command.stdout.on('data', data => {
+            console.log("stdout: ", data.toString());
+        });
+
+        command.stderr.on('data', data => {
+            console.log("sterr: ", data.toString());
+        });
+        browserOpen = true;
+    }
 }
-    console.log("Output: \n", output)
-})
-
-
-
-
-
-
 
+// Beendet den laufenden Browserprozess, sofern einer gestartet wurde
+async function killBrowser() {
+    if(browserOpen) {
+        command.kill();
+        browserOpen = false;
+    }
+}
 
+module.exports = {
+    openBrowser, killBrowser
+}

scoreboard/controllers/db.js

@@ -0,0 +1,46 @@
+"use strict";
+
+let db;
+
+// Import ESM into CJS file using immediately invoked function expression because of missing top-level await in CJS
+(async () => {
+    const { LowSync } = await import('lowdb');
+    const { JSONFileSync } = await import('lowdb/node');
+    db = new LowSync(new JSONFileSync('db.json'), { teams:  []})
+})();
+
+function getTeams() {
+    db.read();
+    return db.data.teams
+}
+
+// Adds passed teamName to db if not already existing
+function addTeam(teamName) {
+    console.log(teamName)
+    db.read();
+    if(!db.data.teams.includes(teamName) && teamName != "") {         // Teamname not in db
+        db.data.teams.push(teamName);
+        db.write();
+    } else {                                        // Teamname already in db
+    }
+}
+
+// Deletes passed teamName from db if existing
+function deleteTeam(teamName) {
+    db.read();
+    if(db.data.teams.includes(teamName) && teamName != "") {         // Teamname in db
+        db.data.teams.splice(db.data.teams.indexOf(teamName), 1)       // Delete corresponding array entry
+        db.write();
+    }
+}
+
+// Returns important values from db
+function getValues() {
+    db.read();
+    console.log(db.data)
+    return db.data
+}
+
+module.exports = {
+    getTeams, addTeam, deleteTeam, getValues
+}

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

@@ -1,6 +1,7 @@
 const io = require('./socketio');
+const db = require('../controllers/db');
 
-let enabled = false;
+let enabled = true;
 let teamA = {
     name: "Team A",
     name2: "",
@@ -13,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
 
 // Funktionsübersicht (Prototypen ohne Implementierung — nur zur Übersicht)
 function setEnabled(status) {};
@@ -21,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 +93,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,10 +119,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/db.json

@@ -0,0 +1,12 @@
+{
+  "teams": [
+    "Arheilgen",
+    "Prechtal",
+    "RVW Merklingen",
+    "Hofen",
+    "Leeden",
+    "Oelde",
+    "Burgkunstadt",
+    "Gaustadt"
+  ]
+}

scoreboard/package-lock.json

@@ -14,6 +14,7 @@
         "express-ws": "^5.0.2",
         "hbs": "~4.0.4",
         "http-errors": "~1.6.3",
+        "lowdb": "^7.0.1",
         "moment": "^2.30.1",
         "morgan": "~1.9.1",
         "socket.io": "^4.7.5",
@@ -469,6 +470,20 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -843,6 +858,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

scoreboard/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "nodemon ./bin/www"
+    "start": "nodemon --ignore '*.json' ./bin/www"
   },
   "dependencies": {
     "cookie-parser": "~1.4.4",
@@ -12,6 +12,7 @@
     "express-ws": "^5.0.2",
     "hbs": "~4.0.4",
     "http-errors": "~1.6.3",
+    "lowdb": "^7.0.1",
     "moment": "^2.30.1",
     "morgan": "~1.9.1",
     "socket.io": "^4.7.5",

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,12 +81,88 @@ 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')");
     }
 
-// Initial update gets called whenever page has been loaded
+}
-async function initialUpdate() {
+
-    timerGetValues();                                           // Request new values for timer
+// Update DOM for all db contents with the passed values
-    scoreGetValues();                                           // Request new values for score
+function updateDbFrontend(values) {
+    console.log(values);
+
+    let teamAnameDropdown = document.getElementById("teamAnameDropdown");       // Dropdown for TeamA name
+    let teamAname2Dropdown = document.getElementById("teamAname2Dropdown");     // Dropdown for TeamA name2
+    let teamBnameDropdown = document.getElementById("teamBnameDropdown");       // Dropdown for TeamB name
+    let teamBname2Dropdown = document.getElementById("teamBname2Dropdown");     // Dropdown for TeamB name2
+
+    // Clear innerHTML of dropdowns
+    teamAnameDropdown.innerHTML = "";
+    teamAname2Dropdown.innerHTML = "";
+    teamBnameDropdown.innerHTML = "";
+    teamBname2Dropdown.innerHTML = "";
+
+    let selectDelete = document.getElementById("dbTeamToDelete");               // Select for team deletion from db
+    selectDelete.innerHTML = ""                                                 // Clears all existing options from select
+
+    // <li><a class="dropdown-item" onclick="scoreInsertChosenName">Action</a></li>
+
+    for(team of values.teams) {
+        // Create custom Dropdowns with different function arguments for team configuration
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamAname','` + team  +`')"> `+ team  +`</a>`;
+        teamAnameDropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamAname2','` + team  +`')"> `+ team  +`</a>`;
+        teamAname2Dropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamBname','` + team  +`')"> `+ team  +`</a>`;
+        teamBnameDropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamBname2','` + team  +`')"> `+ team  +`</a>`;
+        teamBname2Dropdown.appendChild(li);
+
+        // Create select options for deletion in debugwindow
+        let opt = document.createElement("option");
+        opt.value = team;
+        opt.innerHTML = team;
+        selectDelete.appendChild(opt);
+    }
+}
+
+// Inserts the passed name into the passed name text input
+async function scoreInsertChosenName(field, name) {
+    switch(field) {
+        case 'teamAname':
+            document.getElementById("teamAname").value = name;
+            break;
+        case 'teamAname2':
+            document.getElementById("teamAname2").value = name;
+            break;
+        case 'teamBname':
+            document.getElementById("teamBname").value = name;
+            break;
+        case 'teamBname2':
+            document.getElementById("teamBname2").value = name;
+            break;
+    }
 }
 
 // Request monitor refresh for index frontend
@@ -70,6 +170,33 @@ 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
+}
+
+async function 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
+}
+
 // ######################################################################################################################################################
 // Timerfunctions
 // ######################################################################################################################################################
@@ -165,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
@@ -195,3 +329,38 @@ async function scoreConfigTeams() {
     updateScoreFrontend(data);                                  // Update admin frontend
     refreshMonitor();
 }
+
+// ######################################################################################################################################################
+// DB functions
+// ######################################################################################################################################################
+
+// Request important values for db contents
+async function dbGetValues() {
+    const response = await fetch("/admin/dbGetValues");         // Call API Endpoint /admin/dbGetValues
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
+    updateDbFrontend(data);                                     // Update admin frontend
+}
+
+// Add team to DB
+async function dbAddTeam() {
+    const response = await fetch("/admin/dbAddTeam", {          // Call API Endpoint /admin/scoreAlterScore with the teamname to alter the score in the specified direction
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({teamName: document.getElementById("dbTeamToAdd").value})
+    });
+    document.getElementById("dbTeamToAdd").value = "";          // Empty the text field after sending
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateDbFrontend(data);
+}
+
+// Delete team from DB
+async function dbDeleteTeam() {
+    let teamName = document.getElementById("dbTeamToDelete").value;
+    const response = await fetch("/admin/dbDeleteTeam", {          // Call API Endpoint /admin/scoreAlterScore with the teamname to alter the score in the specified direction
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({teamName: teamName})
+    });
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateDbFrontend(data);
+}

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/public/stylesheets/indexScore.css

@@ -26,6 +26,10 @@ a {
   font-size: 50vh
 }
 
+.teamName {
+  font-size: 10vh
+}
+
 @media ( min-width: 768px ) {
   .box-time {
     height:25%

scoreboard/routes/admin.js

@@ -4,6 +4,9 @@ const io = require('../controllers/socketio');
 
 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
@@ -17,12 +20,37 @@ router.get('/refreshMonitor', function(req, res, next) {
     res.send();                             // send empty response
 });
 
-// Express router endpoint to do cli stuff
+// Express router endpoint to open browser
-router.get('/cli', function(req, res, next) {
+router.get('/openBrowser', function(req, res, next) {
+    cli.openBrowser();
     res.status(200);                        // Set http status code to 200 (success)
     res.send();                             // send empty response
 });
 
+// Express router endpoint to kill browser
+router.get('/killBrowser', function(req, res, next) {
+    cli.killBrowser();
+    res.status(200);                        // Set http status code to 200 (success)
+    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
 // ######################################################################################################################################################
@@ -106,6 +134,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
@@ -125,6 +160,27 @@ router.post('/scoreConfigTeams', function(req, res, next) {
     res.json(score.getValues());
 });
 
+// ######################################################################################################################################################
+// DB endpoints
+// ######################################################################################################################################################
+
+// Express router endpoint to get important values for db contents
+router.get('/dbGetValues', function(req, res, next) {
+    res.json(db.getValues());               // Respond with important values for frontend
+});
+
+// Express router endpoint to add a team to the team database
+router.post('/dbAddTeam', function(req, res, next) {
+    db.addTeam(req.body.teamName);          // Add teamname to DB
+    res.json(db.getValues());               // Respond with all important values to update the frontend
+});
+
+// Express router endpoint to delete a team from the team database
+router.post('/dbDeleteTeam', function(req, res, next) {
+    db.deleteTeam(req.body.teamName);          // Add teamname to DB
+    res.json(db.getValues());               // Respond with all important values to update the frontend
+});
+
 /* GET home page. */
 router.get('/', function(req, res, next) {
     res.render('admin');

scoreboard/routes/index.js

@@ -2,15 +2,20 @@ 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(etc.getSplashscreen()) {                     // If splashscreen is enabled
+        res.render('splashscreen', {});             // Render splashscreen
+    } else {
         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
         }
+    }
 });
 
 // Websocket-Verbindungshandler: wird ausgelöst, sobald ein Client (Monitor) sich verbindet

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>
@@ -93,9 +107,9 @@
         <div class="col-sm-12 col-md-12 col-lg-4">
           <div class="h-100 card text-center">
             <div class="card-body">
-              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreSwitchModal"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
+              <button class="mb-2 btn btn-lg btn-success" data-bs-toggle="modal" data-bs-target="#scoreConfigTeamsModal"><i class="fa-solid fa-people-group"></i> Teams konfigurieren</button>
+              <button class="mb-2 btn btn-lg btn-warning" data-bs-toggle="modal" data-bs-target="#scoreSwitchModal"><i class="fa-solid fa-repeat"></i> Seitenwechsel</button>
               <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreResetModal"><i class="fa-solid fa-rotate-right"></i> Score zurücksetzen</button>
-              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreConfigTeamsModal">Teams konfigurieren</button>
             </div>
           </div>
         </div>
@@ -103,13 +117,7 @@
         <div class="col-sm-12 col-md-12 col-lg-4">
           <div class="h-100 card text-center">
             <div class="card-body">
-              <div class="form-check form-switch">
+              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#debugModal"><i class="fa-solid fa-bug"></i> Debugfenster</button>
-                <input class="form-check-input" onclick="scoreToggle()" type="checkbox" role="switch" id="scoreSwitchEnable">
-                <label class="form-check-label" for="scoreSwitchEnable">Zeige Scoreboard</label>
-              </div> 
-              <button class="mb-2 btn btn-lg btn-warning" onclick="scoreToggle()"><i class="fa-solid fa-rotate"></i> Scoreboard togglen</button>
-              <button class="mb-2 btn btn-lg btn-warning" onclick="refreshMonitor()"><i class="fa-solid fa-rotate"></i> Monitor neu laden</button>
-
             </div>
           </div>
         </div>
@@ -239,34 +247,49 @@
         <div class="modal-body">
           <p class="fw-bold">Konfiguration von Team A bearbeiten:</p>
           <form>
-            <div class="mb-3">
+            <div class="input-group mb-3">
-              <label for="teamAname", class="form-label">Team A Name</label>
+              <span class="input-group-text">Name</span>
               <input type="text" class="form-control" id="teamAname" aria-describedby="teamAnameHelp">
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+                <ul id="teamAnameDropdown" class="dropdown-menu dropdown-menu-end">
+                </ul>
             </div>
-            <div class="form-check">
+
+            <div class="form-check mb-3">
               <input class="form-check-input" type="checkbox" id="teamAisSpielgemeinschaft">
               <label class="form-check-label" for="teamAisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
             </div>
-            <div class="mb-3">
+
-              <label for="teamAname2", class="form-label">Team A Name 2</label>
+            <div class="input-group">
+              <span class="input-group-text">Name2</span>
               <input type="text" class="form-control" id="teamAname2" aria-describedby="teamAname2help">
-               <div id="teamAname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamAname2Dropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
-            <br><br>
+              <div id="teamAname2help" class="form-text mb-5">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+
+
           <p class="fw-bold">Konfiguration von Team B bearbeiten:</p>
-            <div class="mb-3">
+            <div class="input-group mb-3">
-              <label for="teamBname", class="form-label">Team B Name</label>
+              <span class="input-group-text">Name</span>
               <input type="text" class="form-control" id="teamBname" aria-describedby="teamBnameHelp">
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamBnameDropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
-            <div class="form-check">
+            <div class="form-check mb-3">
               <input class="form-check-input" type="checkbox" id="teamBisSpielgemeinschaft">
               <label class="form-check-label" for="teamBisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
             </div>
-            <div class="mb-3">
+            <div class="input-group">
-              <label for="teamBname2", class="form-label">Team B Name 2</label>
+              <span class="input-group-text">Name2</span>
               <input type="text" class="form-control" id="teamBname2" aria-describedby="teamBname2help">
-              <div id="teamBname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamBname2Dropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
+              <div id="teamBname2help" class="form-text mb-3">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
           </form>
 
 
@@ -280,6 +303,54 @@
   </div>
   <!-- Config Team Modal -->
 
+  <!-- Debug Modal -->
+  <div class="modal fade" id="debugModal" tabindex="-1" aria-labelledby="debugModalLabel" 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="debugModalLabel">Debugfenster</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </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>
+
+
+          <p class="fw-bold">Team Datenbank:</p>
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="fa-solid fa-user-plus"></i></span>
+            <input type="text" class="form-control" id="dbTeamToAdd" aria-describedby="teamBnameHelp">
+            <button class="btn btn-outline-success" type="button" onclick="dbAddTeam()"><i class="fa-solid fa-plus"></i></button>
+          </div>
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="fa-solid fa-user-minus"></i></span>
+            <select class="form-select" id="dbTeamToDelete" aria-label="Default select example">
+            </select>
+            <button class="btn btn-outline-danger" type="button" onclick="dbDeleteTeam()"><i class="fa-solid fa-trash"></i></button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Debug Modal -->
+
 
   <!-- Timer start error toast -->
   <div class="toast-container position-fixed bottom-0 end-0 p-3">

scoreboard/views/indexScore.hbs

@@ -15,13 +15,13 @@
 
     <div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc">
       <div class="flex-fill order-xs-1 order-sm-1 order-md-1 order-lg-0">
-        <h1 id="teamA">Team A</h>
+        <p class="teamName" id="teamA">Team A</p>
       </div>
       <div class="flex-fill order-xs-0 order-sm-0 order-md-0 order-lg-1">
         <div id="score" class="score"></div>
       </div>
       <div class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
-        <h1 id="teamB">Team B</h>
+        <p class="teamName" id="teamB">Team B</p>
       </div>
     </div>
 

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>