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

Compare commits

base: jappel:93d06517e4ca8dcc0260525f2d2f9da9805f5840
Branches Tags
jappel:master
..
compare: jappel:9f845ea234678987c657b295c9719765d48f22d6
Branches Tags
jappel:master

No commits in common. "93d06517e4ca8dcc0260525f2d2f9da9805f5840" and "9f845ea234678987c657b295c9719765d48f22d6" have entirely different histories.
93d06517e4 ... 9f845ea234

12 changed files with 99 additions and 564 deletions
Show Stats Expand all files Collapse all files

125
scoreboard/controllers/score.js
View File

@ -1,125 +0,0 @@
const io = require('./socketio');
let enabled = false;
let teamA = {
name: "Team A",
name2: "",
score: 0,
isSpielgemeinschaft: 0,
};
let teamB = {
name: "Team B",
name2: "",
score: 0,
isSpielgemeinschaft: 0,
};
let sideswitch = false;
// Function prototypes
function setEnabled(status) {};
function setName(team, name) {};
function configTeam() {};
function setScore(team, score) {};
function alterScore(team, dir) {};
function clearScore() {};
function toggleSwitch() {};
function getEnabled() {};
function getValues() {};
// Enable or disable the scoreboard
function setEnabled(status) {
enabled = status;
}
function configTeam(team, name, name2, isSpielgemeinschaft) {
if(team == "teamA") {
teamA.name = name;
teamA.name2 = name2;
teamA.isSpielgemeinschaft = isSpielgemeinschaft;
} else if(team == "teamB") {
teamB.name = name;
teamB.name2 = name2;
teamB.isSpielgemeinschaft = isSpielgemeinschaft;
}
}
// Set team name
function setName(team, name) {
if(team == "teamA") {
teamA.name = name;
} else if(team == "teamB") {
teamB.name = name;
}
}
// Set score of team to passed value
function setScore(team, score) {
if(team == "teamA") {
teamA.score = score;
} else if(team == "teamB") {
teamB.score = score;
}
}
// Increment score by one
function alterScore(team, dir) {
if(team == "teamA") {
if(dir == "inc") {
teamA.score++;
console.log("teamA inc");
}
else if(dir == "dec") {
teamA.score--;
console.log("teamA dec");
}
} else if(team == "teamB") {
if(dir == "inc") {
teamB.score++;
console.log("teamB inc");
}
else if(dir == "dec") {
teamB.score--;
console.log("teamB dec");
}
}
io.sockets.emit('score', print());
}
// Clears score of both teams
function clearScore() {
teamA.score = 0;
teamB.score = 0;
io.sockets.emit('score', print());
}
// Toggle sideswitch
function toggleSwitch() {
sideswitch = !sideswitch;
}
// Return enabled value
function getEnabled() {
return enabled
}
function print() {
if(sideswitch) {
return teamB.score + ":" + teamA.score
} else {
return teamA.score + ":" + teamB.score
}
}
function getValues() {
return {
enabled: enabled,
teamA: teamA,
teamB: teamB,
sideswitch: sideswitch,
print: print(),
};
}
module.exports = {
setEnabled, setScore, alterScore, clearScore, getEnabled, getValues
}

19
scoreboard/controllers/timer.js
View File

@ -13,10 +13,8 @@ function pause() {};
function reset() {}; function reset() {};
function end() {}; function end() {};
function print() {}; function print() {};
function incDec() {};
function getValues() {}; function getValues() {};
// Start timer not paused and not already finished
function start() { function start() {
if(isPaused == true && durationLeft.asSeconds() != 0) { // Only allow start if timer ist currently paused and durationLeft is not 0 seconds if(isPaused == true && durationLeft.asSeconds() != 0) { // Only allow start if timer ist currently paused and durationLeft is not 0 seconds
console.log("Timer gestartet") console.log("Timer gestartet")
@ -34,7 +32,6 @@ function start() {
return false return false
} }
// If possible pause timer, if not return false
function pause() { function pause() {
if(!isPaused) { if(!isPaused) {
console.log("Timer pausiert"); console.log("Timer pausiert");
@ -45,7 +42,6 @@ function pause() {
return false return false
} }
// Reset timer to passed value, and send durationLeft to all clients
function reset(newDuration) { function reset(newDuration) {
console.log("Timer Zurückgesetzt"); console.log("Timer Zurückgesetzt");
duration = moment.duration(newDuration, 'seconds').clone(); // Set initial duration to received duration in seconds duration = moment.duration(newDuration, 'seconds').clone(); // Set initial duration to received duration in seconds
@ -53,31 +49,18 @@ function reset(newDuration) {
io.sockets.emit('timerDurationLeft', print()) // Emit durationLeft to all connected sockets io.sockets.emit('timerDurationLeft', print()) // Emit durationLeft to all connected sockets
} }
// Stop timer and emit timerEndet to all clients
function end() { function end() {
isPaused = true // Set status of the timer isPaused = true // Set status of the timer
clearInterval(timerInterval); // End the execution clearInterval(timerInterval); // End the execution
io.sockets.emit('timerEnded', print()) // Emit end to all connected sockets io.sockets.emit('timerEnded', print()) // Emit end to all connected sockets
} }
// Return formatted timestamp in the format of 00:00
function print() { function print() {
var minutes = (durationLeft.minutes() < 10) ? "0" + durationLeft.minutes() : durationLeft.minutes(); // Create leading zeros for numbers <10 var minutes = (durationLeft.minutes() < 10) ? "0" + durationLeft.minutes() : durationLeft.minutes(); // Create leading zeros for numbers <10
var seconds = (durationLeft.seconds() < 10) ? "0" + durationLeft.seconds() : durationLeft.seconds(); // Create leading zeros for numbers <10 var seconds = (durationLeft.seconds() < 10) ? "0" + durationLeft.seconds() : durationLeft.seconds(); // Create leading zeros for numbers <10
return minutes + ":" + seconds return minutes + ":" + seconds
} }
// Increase or decrease the timer depending on the passed value in seconds
function incDec(value) {
if(Math.abs(value) >= durationLeft.asSeconds()) { // If abs from passed value is greater than seconds left on timer, end timer
end();
} else {
durationLeft.add(value, 'second');
io.sockets.emit('timerDurationLeft', print())
}
}
// Return all important timer values
function getValues() { function getValues() {
return { return {
isPaused: isPaused, isPaused: isPaused,
@ -88,5 +71,5 @@ function getValues() {
} }
module.exports = { module.exports = {
duration, durationLeft, isPaused, start, pause, reset, end, print, incDec, getValues duration, durationLeft, isPaused, start, pause, reset, end, print, getValues
} }

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

@ -15,13 +15,7 @@ socket.on('timerEnded', (message) => {
initialUpdate(); // Update admin frontend to set correct buttonstatus initialUpdate(); // Update admin frontend to set correct buttonstatus
}); });
socket.on('score', (message) => { function updateFrontend(values) {
console.log(message) // Log score in client console
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
});
// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
values.duration = moment.duration(values.duration) // Create moment object from ISO 8601 string values.duration = moment.duration(values.duration) // Create moment object from ISO 8601 string
values.durationLeft = moment.duration(values.durationLeft) // Create moment object from ISO 8601 string values.durationLeft = moment.duration(values.durationLeft) // Create moment object from ISO 8601 string
document.getElementById("durationLeft").innerHTML = values.print // Display durationLeft as prettyfied string document.getElementById("durationLeft").innerHTML = values.print // Display durationLeft as prettyfied string
@ -35,41 +29,20 @@ function updateTimerFrontend(values) {
} }
} }
// Update DOM score elements from passed values
function updateScoreFrontend(values) {
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
}
// Initial update gets called whenever page has been loaded
async function initialUpdate() { async function initialUpdate() {
timerGetValues(); // Request new values for timer const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues
scoreGetValues(); // Request new values for score const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
} console.log(data); // Print received data
updateFrontend(data); // Update admin frontend with received values
// Request monitor refresh for index frontend
async function refreshMonitor() {
const response = await fetch("/admin/refreshMonitor"); // Call API Endpoint /admin/timerStart
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log("Send request to refresh the monitor");
} }
// Timerfunctions // Timerfunctions
// Request important timer values
async function timerGetValues() {
const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values for timerboard
}
// Request to start the timer
async function timerStart() { async function timerStart() {
const response = await fetch("/admin/timerStart"); // Call API Endpoint /admin/timerStart const response = await fetch("/admin/timerStart"); // Call API Endpoint /admin/timerStart
if(response.status == 200) { // If request successfull if(response.status == 200) {
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend) const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values updateFrontend(data); // Update admin frontend with received values
} else { } else {
//console.log("Error, Timer bereits abgelaufen: ", response.status); //console.log("Error, Timer bereits abgelaufen: ", response.status);
const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast
@ -77,13 +50,12 @@ async function timerStart() {
} }
} }
// Request to pause the timer
async function timerPause() { async function timerPause() {
const response = await fetch("/admin/timerPause"); // Call API Endpoint /admin/timerStart const response = await fetch("/admin/timerPause"); // Call API Endpoint /admin/timerStart
if(response.status == 200) { if(response.status == 200) {
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend) const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values updateFrontend(data); // Update admin frontend with received values
} else { } else {
//console.log("Error, Timer bereits pausiert: ", response.status); //console.log("Error, Timer bereits pausiert: ", response.status);
const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerStartErrorToast const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerStartErrorToast
@ -91,7 +63,6 @@ async function timerPause() {
} }
} }
// Request to reset the timer with the specified time
async function timerReset() { async function timerReset() {
let newDuration = document.getElementById("timerSelectDuration").value; let newDuration = document.getElementById("timerSelectDuration").value;
const response = await fetch("/admin/timerReset", { // Call API Endpoint /admin/timerStart with selected new duration in seconds const response = await fetch("/admin/timerReset", { // Call API Endpoint /admin/timerStart with selected new duration in seconds
@ -101,65 +72,12 @@ async function timerReset() {
}); });
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend) const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values updateFrontend(data); // Update admin frontend with received values
}
// Request to increase or decrease the timer depending on passed value in seconds
async function timerIncDec(value) {
const response = await fetch("/admin/timerIncDec", { // Call API Endpoint /admin/timerIncDec with value in seconds to increase or decrease the timer
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify({value: value})
});
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values
} }
// Scoreboardfunctions // Scoreboardfunctions
// Request important values for score
async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
}
// Toggle index page to also show scoreboard
async function scoreToggle() {
console.log(document.getElementById("scoreSwitchEnable").checked)
const response = await fetch("/admin/scoreToggle"); // Call API Endpoint /admin/scoreEnable
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
refreshMonitor(); // Send request to refresh monitor
}
// Alter the score of passed team in the specified direction
async function scoreAlterScore(team, dir) {
const response = await fetch("/admin/scoreAlterScore", {// 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({team: team, dir: dir})
});
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values
}
// Switch sides
async function scoreSwitch() { async function scoreSwitch() {
const response = await fetch("/admin/scoreSwitch"); // Call API Endpoint /admin/timerStart const response = await fetch("/admin/scoreSwitch"); // Call API Endpoint /admin/timerStart
const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend) const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard }
}
// Clear score
async function scoreClearScore() {
const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreResetScore
const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
}

4
scoreboard/public/javascripts/index.js
View File

@ -12,8 +12,4 @@ socket.on('timerDurationLeft', (message) => {
socket.on('timerEnded', (message) => { socket.on('timerEnded', (message) => {
document.getElementById("durationLeft").innerHTML = "ENDE"; // Display "STOP" in same html element as the duration document.getElementById("durationLeft").innerHTML = "ENDE"; // Display "STOP" in same html element as the duration
});
socket.on('refresh', (message) => {
document.location.reload() // Reload page on received 'refresh' messagen
}); });

41
scoreboard/public/javascripts/indexScore.js
View File

@ -1,41 +0,0 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server
socket.on('connected', (message) => {
console.log("Connected");
})
socket.on('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console
document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
});
socket.on('timerEnded', (message) => {
document.getElementById("durationLeft").innerHTML = "ENDE"; // Display "STOP" in same html element as the duration
});
socket.on('refresh', (message) => {
document.location.reload() // Reload page on received 'refresh' messagen
});
socket.on('score', (message) => {
console.log(message) // Log score in client console
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
});
// Update DOM score elements from passed values
function updateScoreFrontend(values) {
document.getElementById("score").innerHTML = values.print; // Set switch status to received score enabled value
}
async function initialUpdate() {
scoreGetValues();
}
// Request important values for score
async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
}

88
scoreboard/public/stylesheets/index.css
View File

@ -1,41 +1,55 @@
html, body { html, body {
height: 100% height: 100%
} }
body {
/* padding: 50px; */
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: #47BAEA;
}
a {
color: #00B7FF;
}
.durationLeft {
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
height: 100%;
font-size: 50vh;
body { }
/* padding: 50px; */
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; .score {
background-color: #47BAEA; font-family: 'Seven Segment', sans-serif;
} font-weight: bold;
font-size: 50vh
a { }
color: #00B7FF;
} @media ( min-width: 768px ) {
.box-time {
.durationLeft { height:25%
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
height: 100%;
font-size: 100vh;
} }
.durationLeft {
@media ( min-width: 768px ) { font-size: 18vh
.box-time { }
height:100%
} .box-etc {
height: 75%
.durationLeft { }
font-size: 15vh }
}
@media ( min-width: 992px ) {
@media ( min-width: 992px ) { .box-time {
.box-time { height:50%
height:100% }
}
.durationLeft {
.durationLeft { font-size: 48vh
font-size: 96vh }
}
} .box-etc {
height: 50%
}
}

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

@ -1,55 +0,0 @@
html, body {
height: 100%
}
body {
/* padding: 50px; */
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: #47BAEA;
}
a {
color: #00B7FF;
}
.durationLeft {
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
height: 100%;
font-size: 50vh;
}
.score {
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
font-size: 50vh
}
@media ( min-width: 768px ) {
.box-time {
height:25%
}
.durationLeft {
font-size: 18vh
}
.box-etc {
height: 75%
}
}
@media ( min-width: 992px ) {
.box-time {
height:50%
}
.durationLeft {
font-size: 48vh
}
.box-etc {
height: 50%
}
}

64
scoreboard/routes/admin.js
View File

@ -1,17 +1,7 @@
var express = require('express'); var express = require('express');
var router = express.Router(); var router = express.Router();
const io = require('../controllers/socketio');
const timer = require('../controllers/timer'); var timer = require('../controllers/timer');
const score = require('../controllers/score');
// Express router endpoint to trigger a frontend refresh on all connected sockets
router.get('/refreshMonitor', function(req, res, next) {
console.log("Monitor neu geladen");
io.sockets.emit('refresh', ""); // Emit refresh to all connected sockets over websockets
res.status(200); // Set http status code to 200 (success)
res.send(); // send empty response
});
// Express router entpoint to start the timer // Express router entpoint to start the timer
router.get('/timerStart', function(req, res, next) { router.get('/timerStart', function(req, res, next) {
@ -41,58 +31,14 @@ router.post('/timerReset', function(req, res, next) {
res.json(timer.getValues()); // Respond with all important values to update the frontend res.json(timer.getValues()); // Respond with all important values to update the frontend
}); });
router.post('/timerIncDec', function(req, res, next) { // Express router endpoint to switch the score after halftime
timer.incDec(req.body.value);
res.json(timer.getValues());
});
// Express router endpoint to get important timer values
router.get('/timerGetValues', function(req, res, next) { router.get('/timerGetValues', function(req, res, next) {
res.json(timer.getValues()); // Respond with important values for frontend res.json(timer.getValues()); // Respond with important values for frontend
}); });
// Express router endpoint to toggle the scoreboard
router.get('/scoreToggle', function(req, res, next) {
if(score.getEnabled()) { // If scoreboard enabled
console.log("Scoreboard disabled");
score.setEnabled(false) // Disable the scoreboard
res.status(200); // Set http status code to 200 (success)
res.json(score.getValues()) // Respond with all important values to update the frontend
} else {
console.log("Scoreboard enabled");
score.setEnabled(true) // Enable the scoreboard
res.status(200); // Set http status code to 200 (success)
res.json(score.getValues()); // Respond with all important values to update the frontend
}
});
// Express router endpoint to set score of a team
router.post('/scoreSetScore', function(req, res, next) {
score.setScore(req.body.team, req.body.score);
res.status(200);
res.json(score.getValues());
});
// Express router endpoint to alter passed teams score by one in the passed direction
router.post('/scoreAlterScore', function(req, res, next) {
score.alterScore(req.body.team, req.body.dir);
res.status(200);
res.json(score.getValues());
});
// Express router endpoint to switch the score after halftime // Express router endpoint to switch the score after halftime
router.post('/scoreSwitch', function(req, res, next) { router.get('/scoreSwitch', function(req, res, next) {
}); res.render('admin');
// 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
});
// Express router endpoint to clear score
router.get('/scoreClearScore', function(req, res, next) {
score.clearScore(); // Clear score
res.json(score.getValues()); // Respond with important values for frontend
}); });
/* GET home page. */ /* GET home page. */
@ -100,4 +46,6 @@ router.get('/', function(req, res, next) {
res.render('admin'); res.render('admin');
}); });
module.exports = router; module.exports = router;

14
scoreboard/routes/index.js
View File

@ -1,19 +1,11 @@
var express = require('express'); var express = require('express');
var router = express.Router(); var router = express.Router();
let io = require('../controllers/socketio'); let io = require('../controllers/socketio')
const timer = require('../controllers/timer'); const timer = require('../controllers/timer')
const score = require('../controllers/score');
/* GET home page. */ /* GET home page. */
router.get('/', function(req, res, next) { router.get('/', function(req, res, next) {
if (score.getEnabled()) { // If scoreboard is enabled res.render('index', { durationLeft: timer.print()});
res.render('indexScore', {
title: "Timer and Score",
durationLeft: timer.print(),
});
} else { // If scoreboard is not enabled
res.render('index', { title: "Timer", durationLeft: timer.print()})
}
}); });
io.on('connection', (socket) => { io.on('connection', (socket) => {

98
scoreboard/views/admin.hbs
View File

@ -27,27 +27,28 @@
<div class="h-100 card text-center"> <div class="h-100 card text-center">
<div class="card-body"> <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-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
<br>
<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="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>
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-4"> <div class="col-sm-12 col-md-12 col-lg-4">
<div class="h-100 card text-center"> <div class="h-100 card text-center ">
<div class="card-body "> <div class="card-body ">
<div class="btn-group align-middle" role="group" aria-label="Basic example"> <div class="btn-group align-middle" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-10)">-10s</button> <button type="button" class="btn btn-secondary">-1m</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-5)">-5s</button> <button type="button" class="btn btn-secondary">-10s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-1)">-1s</button> <button type="button" class="btn btn-secondary">-1s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+1)">+1s</button> <button type="button" class="btn btn-secondary">+1s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+5)">+5s</button> <button type="button" class="btn btn-secondary">+10s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+10)">+10s</button> <button type="button" class="btn btn-secondary">+1m</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-4"> <div class="py-auto col-sm-12 col-md-12 col-lg-4">
<div class="h-100 card text-center"> <div class="h-100 card text-center">
<div class="card-body"> <div class="card-body">
<button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal"> <button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
@ -58,64 +59,12 @@
</div> </div>
</div> </div>
<div class="row mb-4 justify-content-center"> <div class="row text-center">
<div class="col-sm-12 col-md-12 col-lg-4"> <div class="col-sm-12 col-md-12 col-lg-12">
<div class="card text-center"> <button class="btn btn-lg btn-danger" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
<div class="card-body">
<h1 id="score"></h1>
</div>
</div>
</div> </div>
</div> </div>
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-4">
<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>
<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>
</div>
</div>
</div>
</div>
</div>
<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" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
<button class="mb-2 btn btn-lg btn-danger" onclick="scoreClearScore()"><i class="fa-solid fa-rotate"></i> Score löschen</button>
<button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreConfigTeamAModal">Team A konfigurieren</button>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</body> </body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script> <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
@ -188,29 +137,6 @@
</div> </div>
<!-- Modal --> <!-- Modal -->
<!-- Config Team Modal -->
<div class="modal fade" id="scoreConfigTeamAModal" tabindex="-1" aria-labelledby="scoreConfigTeamAModalLabel" 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="timerResetModalLabel">Timer zurücksetzen?</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Konfiguration von Team A bearbeiten:</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="">Absenden</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
<!-- Config Team Modal -->
<!-- Timer start error toast --> <!-- Timer start error toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3"> <div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="timerStartErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div id="timerStartErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">

14
scoreboard/views/index.hbs
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>{{ title }}</title> <title>Counter</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' /> <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/index.css' /> <link rel='stylesheet' href='/stylesheets/index.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' /> <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
@ -12,6 +12,18 @@
<div id="durationLeft" class="durationLeft">{{ durationLeft }}</div> <div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</div> </div>
<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>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">5:2</div>
</div>
<div class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
<h1>Team B</h>
</div>
</div>
</body> </body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script> <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
<script src="/javascripts/socket.io.min.js"></script> <script src="/javascripts/socket.io.min.js"></script>

33
scoreboard/views/indexScore.hbs
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/indexScore.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' />
</head>
<body onload="initialUpdate()">
<div class="d-flex flex-column align-items-center justify-content-center box-time">
<div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</div>
<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="scoreTeamA">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">
<h1 id="scoreTeamB">Team B</h>
</div>
</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/indexScore.js"></script>
</html>