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:faaa47a792c7809d1f846dbef671032e4a72bfe4
Branches Tags
jappel:master

2 Commits
93d06517e4 ... faaa47a792

Author SHA1 Message Date
Julian Appel
faaa47a792 Cleanup, comments, removed ejs stuff 2024-05-17 22:21:43 +02:00
Julian Appel
50dd893b5a Cleanup, comments, structuring 2024-05-17 21:53:37 +02:00
7 changed files with 159 additions and 93 deletions
Show Stats Expand all files Collapse all files

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

@ -1,13 +1,16 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server
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) => { // Once client is connected to websocket
// ######################################################################################################################################################
// Websockets event handler
// ######################################################################################################################################################
socket.on('connected', (message) => { // Once client is connected to websocket
console.log("Connected");
initialUpdate() // Request important values to update admin frontend
});
socket.on('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console
console.log(message); // Log durationLeft in client console
document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
});
@ -16,29 +19,35 @@ 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
console.log(message); // Log score in client console
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
});
// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################
// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
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
document.getElementById("durationLeft").innerHTML = values.print // Display durationLeft as prettyfied string
console.log(values); // Print received data
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
document.getElementById("durationLeft").innerHTML = values.print; // Display durationLeft as prettyfied string
if(values.isPaused) { // Set button state depending on timer status
document.getElementById("timerStartBtn").disabled = false
document.getElementById("timerPauseBtn").disabled = true
document.getElementById("timerStartBtn").disabled = false;
document.getElementById("timerPauseBtn").disabled = true;
} else {
document.getElementById("timerStartBtn").disabled = true
document.getElementById("timerPauseBtn").disabled = false
document.getElementById("timerStartBtn").disabled = true;
document.getElementById("timerPauseBtn").disabled = false;
}
}
// 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("score").innerHTML = values.print; // Set score on admin interface
}
// Initial update gets called whenever page has been loaded
@ -50,116 +59,107 @@ async function initialUpdate() {
// 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");
const data = await response.json(); // Wait for asyncronous transfer to complete
}
// ######################################################################################################################################################
// 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
const data = await response.json(); // Wait for asynchronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
}
// Request to start the timer
async function timerStart() {
const response = await fetch("/admin/timerStart"); // Call API Endpoint /admin/timerStart
if(response.status == 200) { // If request successfull
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
} else {
//console.log("Error, Timer bereits abgelaufen: ", response.status);
const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast
timerStartErrorToast.show(); // Show error toast
const data = await response.json(); // Wait for asyncronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
} else { // Timer already finished
const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast
timerStartErrorToast.show(); // Show error toast
}
}
// Request to pause the timer
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) {
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
} else {
//console.log("Error, Timer bereits pausiert: ", response.status);
const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerStartErrorToast
timerPauseErrorToast.show(); // Show error toast
const data = await response.json(); // Wait for asyncronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
} else { // Timer already paused
const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerPauseErrorToast
timerPauseErrorToast.show(); // Show error toast
}
}
// Request to reset the timer with the specified time
async function timerReset() {
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
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify({duration: newDuration})
});
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
const data = await response.json(); // Wait for asyncronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
}
// 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
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
const data = await response.json(); // Wait for asyncronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
}
// ######################################################################################################################################################
// 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
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete
updateScoreFrontend(data); // Update admin frontend
}
// 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
const response = await fetch("/admin/scoreToggle"); // Call API Endpoint /admin/scoreToggle
const data = await response.json(); // Wait for asyncronous transfer to complete
updateScoreFrontend(data); // Update admin frontend
refreshMonitor(); // Refresh main monitor to display new frontend
}
// 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
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
const data = await response.json(); // Wait for asyncronous transfer to complete
updateScoreFrontend(data); // Update admin frontend
}
// Switch sides
async function scoreSwitch() {
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)
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
const response = await fetch("/admin/scoreSwitch"); // 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/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
}
const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreClearScore
const data = await response.json(); // Wait for asynchronous transfer to complete
updateScoreFrontend(data); // Update admin frontend
}

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

@ -1,9 +1,13 @@
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('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console
@ -16,4 +20,29 @@ socket.on('timerEnded', (message) => {
socket.on('refresh', (message) => {
document.location.reload() // Reload page on received 'refresh' messagen
});
});
// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################
// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
document.getElementById("durationLeft").innerHTML = values.print; // Display durationLeft as prettyfied string
}
// Initial update gets called whenever page has been loaded
async function initialUpdate() {
timerGetValues(); // Request new values for timer
}
// ######################################################################################################################################################
// 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
updateTimerFrontend(data); // Update admin frontend
}

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

@ -1,9 +1,13 @@
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('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console
@ -23,19 +27,44 @@ socket.on('score', (message) => {
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
});
// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################
// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
document.getElementById("durationLeft").innerHTML = values.print; // Display durationLeft as prettyfied string
}
// Update DOM score elements from passed values
function updateScoreFrontend(values) {
document.getElementById("score").innerHTML = values.print; // Set switch status to received score enabled value
document.getElementById("score").innerHTML = values.print; // Set score on admin interface
}
async function initialUpdate() {
scoreGetValues();
timerGetValues(); // Request new values for timer
scoreGetValues(); // Request new values for score
}
// ######################################################################################################################################################
// 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
updateTimerFrontend(data); // Update admin frontend
}
// ######################################################################################################################################################
// 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
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
}

12
scoreboard/routes/admin.js
View File

@ -5,6 +5,10 @@ const io = require('../controllers/socketio');
const timer = require('../controllers/timer');
const score = require('../controllers/score');
// ######################################################################################################################################################
// General endpoints
// ######################################################################################################################################################
// Express router endpoint to trigger a frontend refresh on all connected sockets
router.get('/refreshMonitor', function(req, res, next) {
console.log("Monitor neu geladen");
@ -13,6 +17,10 @@ router.get('/refreshMonitor', function(req, res, next) {
res.send(); // send empty response
});
// ######################################################################################################################################################
// Timerendpoints
// ######################################################################################################################################################
// Express router entpoint to start the timer
router.get('/timerStart', function(req, res, next) {
if(timer.start()) { // If successfully started the timer
@ -51,6 +59,10 @@ router.get('/timerGetValues', function(req, res, next) {
res.json(timer.getValues()); // Respond with important values for frontend
});
// ######################################################################################################################################################
// Scoreboard endpoints
// ######################################################################################################################################################
// Express router endpoint to toggle the scoreboard
router.get('/scoreToggle', function(req, res, next) {
if(score.getEnabled()) { // If scoreboard enabled

20
scoreboard/routes/index.js
View File

@ -1,19 +1,16 @@
var express = require('express');
var router = express.Router();
let io = require('../controllers/socketio');
const timer = require('../controllers/timer');
const score = require('../controllers/score');
const score = require("../controllers/score");
/* GET home page. */
router.get('/', function(req, res, next) {
if (score.getEnabled()) { // If scoreboard is enabled
res.render('indexScore', {
title: "Timer and Score",
durationLeft: timer.print(),
});
} else { // If scoreboard is not enabled
res.render('index', { title: "Timer", durationLeft: timer.print()})
}
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
}
});
io.on('connection', (socket) => {
@ -21,9 +18,8 @@ io.on('connection', (socket) => {
socket.emit("Hello user from server");
socket.on('message', (message) => {
console.log(message)
console.log(message)
})
})
module.exports = router;

6
scoreboard/views/index.hbs
View File

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<title>Index</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/index.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' />
</head>
<body>
<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 id="durationLeft" class="durationLeft"></div>
</div>
</body>

4
scoreboard/views/indexScore.hbs
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<title>IndexScore</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' />
@ -9,7 +9,7 @@
<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 id="durationLeft" class="durationLeft"></div>
</div>