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

Compare commits

base: jappel:469f917ada4ca3ff4d4b2cc674f57ca76b025a99
Branches Tags
jappel:master
..
compare: jappel:1d632252bfa70aec1a56987739faa87e0a551cce
Branches Tags
jappel:master

No commits in common. "469f917ada4ca3ff4d4b2cc674f57ca76b025a99" and "1d632252bfa70aec1a56987739faa87e0a551cce" have entirely different histories.
469f917ada ... 1d632252bf

11 changed files with 39 additions and 333 deletions
Show Stats Expand all files Collapse all files

40
scoreboard/controllers/cli.js
View File

@ -1,31 +1,13 @@
const { spawn } = require('node:child_process')
const exec = require('node:child_process');
let command;
let browserOpen = false;
async function openBrowser() {
if(!browserOpen) {
// const command = spawn("chromium-browser --display=:0 --noerrors --disable-session-crashed-bubble --disable-infobars --start-fullscreen http://localhost:3000 &")
command = spawn('chromium-browser', ['--display=:0', '--incognito', '--noerrors', '--hide-crash-restore-bubble', '--disable-infobars', '--kiosk', 'http://localhost:3000']);
command.stdout.on('data', data => {
console.log("stdout: ", data.toString());
});
command.stderr.on('data', data => {
console.log("sterr: ", data.toString());
});
browserOpen = true;
}
}
async function killBrowser() {
if(browserOpen) {
command.kill();
browserOpen = false;
}
}
module.exports = {
openBrowser, killBrowser
// run the `ls` command using exec
exec('ls ./', (err, output) => {
// once the command has completed, the callback function is called
if (err) {
// log and return if we encounter an error
console.error("could not execute command: ", err)
return
}
// log the output received from the command
console.log("Output: \n", output)
})

46
scoreboard/controllers/db.js
View File

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

4
scoreboard/controllers/score.js
View File

@ -1,7 +1,6 @@
const io = require('./socketio');
const db = require('../controllers/db');
let enabled = true;
let enabled = false;
let teamA = {
name: "Team A",
name2: "",
@ -113,7 +112,6 @@ function getValues() {
teamB: teamB,
sideswitch: sideswitch,
print: print(),
teams: db.getTeams(),
};
}

12
scoreboard/db.json
View File

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

26
scoreboard/package-lock.json generated
View File

@ -14,7 +14,6 @@
"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",
@ -470,20 +469,6 @@
"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",
@ -858,17 +843,6 @@
"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 --ignore '*.json' ./bin/www"
"start": "nodemon ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
@ -12,7 +12,6 @@
"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",

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

@ -59,72 +59,10 @@ function updateScoreFrontend(values) {
document.getElementById("teamBisSpielgemeinschaft").checked = values.teamB.isSpielgemeinschaft;
}
// 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;
}
}
// 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
@ -132,14 +70,6 @@ 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
}
// ######################################################################################################################################################
// Timerfunctions
// ######################################################################################################################################################
@ -265,38 +195,3 @@ 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);
}

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

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

35
scoreboard/routes/admin.js
View File

@ -4,8 +4,6 @@ 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');
// ######################################################################################################################################################
// General endpoints
@ -19,16 +17,8 @@ router.get('/refreshMonitor', function(req, res, next) {
res.send(); // send empty response
});
// 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();
// Express router endpoint to do cli stuff
router.get('/cli', function(req, res, next) {
res.status(200); // Set http status code to 200 (success)
res.send(); // send empty response
});
@ -133,27 +123,6 @@ 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');

93
scoreboard/views/admin.hbs
View File

@ -93,9 +93,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-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="#scoreSwitchModal"><i class="fa-solid fa-rotate"></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,7 +103,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-danger" data-bs-toggle="modal" data-bs-target="#debugModal"><i class="fa-solid fa-bug"></i> Debugfenster</button>
<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>
</div>
</div>
</div>
@ -233,49 +239,34 @@
<div class="modal-body">
<p class="fw-bold">Konfiguration von Team A bearbeiten:</p>
<form>
<div class="input-group mb-3">
<span class="input-group-text">Name</span>
<div class="mb-3">
<label for="teamAname", class="form-label">Team A Name</label>
<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 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="teamAisSpielgemeinschaft">
<label class="form-check-label" for="teamAisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
</div>
<div class="input-group">
<span class="input-group-text">Name2</span>
<div class="mb-3">
<label for="teamAname2", class="form-label">Team A Name 2</label>
<input type="text" class="form-control" id="teamAname2" aria-describedby="teamAname2help">
<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 id="teamAname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
</div>
<div id="teamAname2help" class="form-text mb-5">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
<br><br>
<p class="fw-bold">Konfiguration von Team B bearbeiten:</p>
<div class="input-group mb-3">
<span class="input-group-text">Name</span>
<div class="mb-3">
<label for="teamBname", class="form-label">Team B Name</label>
<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 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="teamBisSpielgemeinschaft">
<label class="form-check-label" for="teamBisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
</div>
<div class="input-group">
<span class="input-group-text">Name2</span>
<div class="mb-3">
<label for="teamBname2", class="form-label">Team B Name 2</label>
<input type="text" class="form-control" id="teamBname2" aria-describedby="teamBname2help">
<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 id="teamBname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
</div>
<div id="teamBname2help" class="form-text mb-3">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
</form>
@ -289,46 +280,6 @@
</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="scoreToggle()" type="checkbox" role="switch" id="scoreSwitchEnable">
<label class="form-check-label" for="scoreSwitchEnable">Scoreboard 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">
<p class="teamName" id="teamA">Team A</p>
<h1 id="teamA">Team A</h>
</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">
<p class="teamName" id="teamB">Team B</p>
<h1 id="teamB">Team B</h>
</div>
</div>