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

Compare commits

base: jappel:faaa47a792c7809d1f846dbef671032e4a72bfe4
Branches Tags
jappel:master
..
compare: jappel:93d06517e4ca8dcc0260525f2d2f9da9805f5840
Branches Tags
jappel:master

No commits in common. "faaa47a792c7809d1f846dbef671032e4a72bfe4" and "93d06517e4ca8dcc0260525f2d2f9da9805f5840" have entirely different histories.
faaa47a792 ... 93d06517e4

7 changed files with 93 additions and 159 deletions
Show Stats Expand all files Collapse all files

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

@ -1,16 +1,13 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server 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"); console.log("Connected");
initialUpdate() // Request important values to update admin frontend
}); });
socket.on('timerDurationLeft', (message) => { 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 document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
}); });
@ -19,35 +16,29 @@ socket.on('timerEnded', (message) => {
}); });
socket.on('score', (message) => { socket.on('score', (message) => {
console.log(message); // Log score in client console console.log(message) // Log score in client console
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
}); });
// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################
// Update DOM timer elements from passed values // Update DOM timer elements from passed values
function updateTimerFrontend(values) { function updateTimerFrontend(values) {
console.log(values); // Print received data 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
if(values.isPaused) { // Set button state depending on timer status if(values.isPaused) { // Set button state depending on timer status
document.getElementById("timerStartBtn").disabled = false; document.getElementById("timerStartBtn").disabled = false
document.getElementById("timerPauseBtn").disabled = true; document.getElementById("timerPauseBtn").disabled = true
} else { } else {
document.getElementById("timerStartBtn").disabled = true; document.getElementById("timerStartBtn").disabled = true
document.getElementById("timerPauseBtn").disabled = false; document.getElementById("timerPauseBtn").disabled = false
} }
} }
// Update DOM score elements from passed values // Update DOM score elements from passed values
function updateScoreFrontend(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("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 // Initial update gets called whenever page has been loaded
@ -59,107 +50,116 @@ async function initialUpdate() {
// Request monitor refresh for index frontend // Request monitor refresh for index frontend
async function refreshMonitor() { async function refreshMonitor() {
const response = await fetch("/admin/refreshMonitor"); // Call API Endpoint /admin/timerStart const response = await fetch("/admin/refreshMonitor"); // Call API Endpoint /admin/timerStart
const data = await response.json(); // Wait for asyncronous transfer to complete 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 // Request important timer values
async function timerGetValues() { async function timerGetValues() {
const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
updateTimerFrontend(data); // Update admin frontend console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values for timerboard
} }
// Request to start the timer // 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) { // If request successfull
const data = await response.json(); // Wait for asyncronous transfer to complete const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateTimerFrontend(data); // Update admin frontend console.log(data); // Print received data
} else { // Timer already finished updateTimerFrontend(data); // Update admin frontend with received values
const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast } else {
timerStartErrorToast.show(); // Show error toast //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
} }
} }
// Request to pause the timer // 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 const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateTimerFrontend(data); // Update admin frontend console.log(data); // Print received data
} else { // Timer already paused updateTimerFrontend(data); // Update admin frontend with received values
const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerPauseErrorToast } else {
timerPauseErrorToast.show(); // Show error toast //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
} }
} }
// Request to reset the timer with the specified time // 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
method: 'POST', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({duration: newDuration}) body: JSON.stringify({duration: newDuration})
}); });
const data = await response.json(); // Wait for asyncronous transfer to complete const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateTimerFrontend(data); // Update admin frontend console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values
} }
// Request to increase or decrease the timer depending on passed value in seconds // Request to increase or decrease the timer depending on passed value in seconds
async function timerIncDec(value) { 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', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({value: value}) body: JSON.stringify({value: value})
}); });
const data = await response.json(); // Wait for asyncronous transfer to complete const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateTimerFrontend(data); // Update admin frontend console.log(data); // Print received data
updateTimerFrontend(data); // Update admin frontend with received values
} }
// ######################################################################################################################################################
// Scoreboardfunctions // Scoreboardfunctions
// ######################################################################################################################################################
// Request important values for score // Request important values for score
async function scoreGetValues() { async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
updateScoreFrontend(data); // Update admin frontend console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
} }
// Toggle index page to also show scoreboard // Toggle index page to also show scoreboard
async function scoreToggle() { async function scoreToggle() {
const response = await fetch("/admin/scoreToggle"); // Call API Endpoint /admin/scoreToggle console.log(document.getElementById("scoreSwitchEnable").checked)
const data = await response.json(); // Wait for asyncronous transfer to complete const response = await fetch("/admin/scoreToggle"); // Call API Endpoint /admin/scoreEnable
updateScoreFrontend(data); // Update admin frontend const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
refreshMonitor(); // Refresh main monitor to display new frontend 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 // Alter the score of passed team in the specified direction
async function scoreAlterScore(team, dir) { 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', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({team: team, dir: dir}) body: JSON.stringify({team: team, dir: dir})
}); });
const data = await response.json(); // Wait for asyncronous transfer to complete const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateScoreFrontend(data); // Update admin frontend console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values
} }
// Switch sides // Switch sides
async function scoreSwitch() { async function scoreSwitch() {
const response = await fetch("/admin/scoreSwitch"); // Call API Endpoint /admin/scoreSwitch const response = await fetch("/admin/scoreSwitch"); // Call API Endpoint /admin/timerStart
const data = await response.json(); // Wait for asyncronous transfer to complete const data = await response.json(); // Wait for asyncronous transfer to complete and parse json (which got received by backend)
updateScoreFrontend(data); // Update admin frontend console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
} }
// Clear score // Clear score
async function scoreClearScore() { async function scoreClearScore() {
const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreClearScore const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreResetScore
const data = await response.json(); // Wait for asynchronous transfer to complete const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
updateScoreFrontend(data); // Update admin frontend console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
} }

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

@ -1,13 +1,9 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server const socket = io(wss); // Connect to socketio server
// ######################################################################################################################################################
// Websockets event handler
// ######################################################################################################################################################
socket.on('connected', (message) => { socket.on('connected', (message) => {
console.log("Connected"); console.log("Connected");
}); })
socket.on('timerDurationLeft', (message) => { socket.on('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console console.log(message) // Log durationLeft in client console
@ -21,28 +17,3 @@ socket.on('timerEnded', (message) => {
socket.on('refresh', (message) => { socket.on('refresh', (message) => {
document.location.reload() // Reload page on received 'refresh' messagen 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,13 +1,9 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server const socket = io(wss); // Connect to socketio server
// ######################################################################################################################################################
// Websockets event handler
// ######################################################################################################################################################
socket.on('connected', (message) => { socket.on('connected', (message) => {
console.log("Connected"); console.log("Connected");
}); })
socket.on('timerDurationLeft', (message) => { socket.on('timerDurationLeft', (message) => {
console.log(message) // Log durationLeft in client console console.log(message) // Log durationLeft in client console
@ -27,44 +23,19 @@ socket.on('score', (message) => {
document.getElementById("score").innerHTML = message; // Display score in corresponding html Element 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 // Update DOM score elements from passed values
function updateScoreFrontend(values) { function updateScoreFrontend(values) {
document.getElementById("score").innerHTML = values.print; // Set score on admin interface document.getElementById("score").innerHTML = values.print; // Set switch status to received score enabled value
} }
async function initialUpdate() { async function initialUpdate() {
timerGetValues(); // Request new values for timer scoreGetValues();
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 // Request important values for score
async function scoreGetValues() { async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/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) 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 console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
} }

12
scoreboard/routes/admin.js
View File

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

20
scoreboard/routes/index.js
View File

@ -1,16 +1,19 @@
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 score = require("../controllers/score"); 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 if (score.getEnabled()) { // If scoreboard is enabled
res.render('indexScore', {}); // Render the site with scoreboard res.render('indexScore', {
} else { // If scoreboard is not enabled title: "Timer and Score",
res.render('index', {}); // Render the site without scoreboard 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) => {
@ -18,8 +21,9 @@ io.on('connection', (socket) => {
socket.emit("Hello user from server"); socket.emit("Hello user from server");
socket.on('message', (message) => { socket.on('message', (message) => {
console.log(message) console.log(message)
}) })
}) })
module.exports = router; module.exports = router;

6
scoreboard/views/index.hbs
View File

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Index</title> <title>{{ title }}</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' />
</head> </head>
<body onload="initialUpdate()"> <body>
<div class="d-flex flex-column align-items-center justify-content-center box-time"> <div class="d-flex flex-column align-items-center justify-content-center box-time">
<div id="durationLeft" class="durationLeft"></div> <div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</div> </div>
</body> </body>

4
scoreboard/views/indexScore.hbs
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>IndexScore</title> <title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' /> <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/indexScore.css' /> <link rel='stylesheet' href='/stylesheets/indexScore.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' /> <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
@ -9,7 +9,7 @@
<body onload="initialUpdate()"> <body onload="initialUpdate()">
<div class="d-flex flex-column align-items-center justify-content-center box-time"> <div class="d-flex flex-column align-items-center justify-content-center box-time">
<div id="durationLeft" class="durationLeft"></div> <div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</div> </div>