jappel/scoreboard-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
Julian Appel 2026-08-19 20:32:29 +02:00
commit c4325ae8ac
19 changed files with 546 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scoreboard/bin/www
View file

@ -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);
/**

50
scoreboard/controllers/cli.js
View file

@ -1,23 +1,37 @@
// CLI-Controller (Testdatei)
// Zuständig für die Verarbeitung von Kommandozeilen-Befehlen des Scoreboards.
// Aktuell nur ein Funktionstest mit einem einfachen `ls`-Befehl.
// CLI-Controller
// Startet und beendet den Anzeige-Browser auf dem Monitor-Rechner (Raspberry Pi).
// 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,
// um zu prüfen, ob child_process.exec korrekt funktioniert.
exec('ls ./', (err, output) => {
if (err) {
console.error("could not execute command: ", err)
return
let command; // Referenz auf den laufenden Chromium-Prozess
let browserOpen = false; // Status des Browsers, verhindert Mehrfachstart
// Startet Chromium im Kiosk-Modus, sofern noch kein Browser laeuft
async function openBrowser() {
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
}

46
scoreboard/controllers/db.js Normal file
View file

@ -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
}

21
scoreboard/controllers/etc.js Normal file
View file

@ -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
}

17
scoreboard/controllers/score.js
View file

@ -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,
}

12
scoreboard/db.json Normal file
View file

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

26
scoreboard/package-lock.json generated
View file

@ -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",

3
scoreboard/package.json
View file

@ -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",

BIN
scoreboard/public/img/SG_Arheilgen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
scoreboard/public/img/SG_Arheilgen_upscaled.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

183
scoreboard/public/javascripts/admin.js
View file

@ -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
scoreGetValues(); // Request new values for score
// Update DOM for all db contents with the passed values
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);
}

14
scoreboard/public/javascripts/splashscreen.js Normal file
View file

@ -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
});

4
scoreboard/public/stylesheets/indexScore.css
View file

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

0
scoreboard/public/stylesheets/splashscreen.css Normal file
View file

60
scoreboard/routes/admin.js
View file

@ -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
router.get('/cli', function(req, res, next) {
// Express router endpoint to open browser
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');

7
scoreboard/routes/index.js
View file

@ -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

145
scoreboard/views/admin.hbs
View file

@ -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="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-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</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="btn-group-vertical" role="group" aria-label="Vertical button group">
<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 class="col-sm-6 col-md-6 col-lg-6 mb-4">
<h5 id="teamAcolName"></h5>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<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>
<h5 id="teamBcolName"></h5>
</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">
<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>
<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>
</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">
<label for="teamAname", class="form-label">Team A Name</label>
<div class="input-group mb-3">
<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">
<label for="teamBname", class="form-label">Team B Name</label>
<div class="input-group mb-3">
<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">
<label for="teamBname2", class="form-label">Team B Name 2</label>
<div class="input-group">
<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">

4
scoreboard/views/indexScore.hbs
View file

@ -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>

20
scoreboard/views/splashscreen.hbs Normal file
View file

@ -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>