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

Cleanup, comments, removed ejs stuff

Browse Source
This commit is contained in:
Julian Appel 2024-05-17 22:21:43 +02:00
parent 50dd893b5a
commit faaa47a792
6 changed files with 92 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>