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

Compare commits

base: jappel:a27c38eeb3f9052fa428f11ba5063db58ec0443e
Branches Tags
jappel:master
..
compare: jappel:469f917ada4ca3ff4d4b2cc674f57ca76b025a99
Branches Tags
jappel:master

No commits in common. "a27c38eeb3f9052fa428f11ba5063db58ec0443e" and "469f917ada4ca3ff4d4b2cc674f57ca76b025a99" have entirely different histories.
a27c38eeb3 ... 469f917ada

11 changed files with 36 additions and 214 deletions
Show Stats Expand all files Collapse all files

21
scoreboard/controllers/etc.js
View File

@ -1,21 +0,0 @@
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
}

13
scoreboard/controllers/score.js
View File

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

BIN
scoreboard/public/img/SG_Arheilgen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 91 KiB

BIN
scoreboard/public/img/SG_Arheilgen_upscaled.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 MiB

88
scoreboard/public/javascripts/admin.js
View File

@ -20,28 +20,13 @@ socket.on('timerEnded', (message) => {
socket.on('score', (message) => {
console.log(message); // Log score in client console
scoreGetValues();
// document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
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
@ -58,22 +43,13 @@ 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("scoreSwitchReferenceMirrored").checked = values.referenceMirrored; // Set switch status to received score enabled value
document.getElementById("score").innerHTML = values.print; // Set score on admin interface
// Config Teams - Input current teams into text fields
// Input current Team values into form inputs
document.getElementById("teamAname").value = values.teamA.name;
document.getElementById("teamAname2").value = values.teamA.name2;
document.getElementById("teamAisSpielgemeinschaft").checked = values.teamA.isSpielgemeinschaft;
@ -81,27 +57,6 @@ 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
@ -165,36 +120,24 @@ 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
}
// ######################################################################################################################################################
// 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
const response = await fetch("/admin/killBrowser"); // Call API Endpoint /admin/killBrowser
}
// ######################################################################################################################################################
@ -292,13 +235,6 @@ 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

14
scoreboard/public/javascripts/splashscreen.js
View File

@ -1,14 +0,0 @@
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
});

0
scoreboard/public/stylesheets/splashscreen.css
View File

25
scoreboard/routes/admin.js
View File

@ -6,7 +6,6 @@ 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
@ -34,23 +33,6 @@ 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
// ######################################################################################################################################################
@ -133,13 +115,6 @@ 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

15
scoreboard/routes/index.js
View File

@ -2,19 +2,14 @@ var express = require('express');
var router = express.Router();
let io = require('../controllers/socketio');
const score = require('../controllers/score');
const etc = require('../controllers/etc');
const score = require("../controllers/score");
/* 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
}
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
}
});

54
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-fluid-sm container-fluid-md container-fluid-lg my-4 mx-4">
<div class="container-md my-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="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>
<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>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-5">
<div class="col-sm-12 col-md-12 col-lg-4">
<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-3">
<div class="col-sm-12 col-md-12 col-lg-4">
<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,28 +59,10 @@
</div>
<div class="row mb-4 justify-content-center">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="col-sm-12 col-md-12 col-lg-4">
<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>
<h1 id="score"></h1>
</div>
</div>
</div>
@ -91,13 +73,17 @@
<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 mb-4">
<h5 id="teamAcolName"></h5>
<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>
<div class="col-sm-6 col-md-6 col-lg-6">
<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" 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>
@ -313,18 +299,10 @@
</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>

20
scoreboard/views/splashscreen.hbs
View File

@ -1,20 +0,0 @@
<!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>