Added splashscreen

This commit is contained in:
Julian Appel 2024-06-06 21:51:18 +02:00
parent 469f917ada
commit c0ffac18e4
9 changed files with 107 additions and 6 deletions

View File

@ -0,0 +1,21 @@
let splashscreenEnabled = true;
// Toggles a splashscreen
function toggleSplashScreen() {
splashscreenEnabled = !splashscreenEnabled;
}
// Returns splashscreen enabled attribute
function getSplashscreen() {
return splashscreenEnabled;
}
function getValues() {
return {
splashscreenEnabled: splashscreenEnabled,
}
}
module.exports = {
toggleSplashScreen, getSplashscreen, getValues
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

View File

@ -26,6 +26,11 @@ socket.on('score', (message) => {
// ###################################################################################################################################################### // ######################################################################################################################################################
// General functions // General functions
// ###################################################################################################################################################### // ######################################################################################################################################################
// Update DOM timer elements from passed values
function updateEtcFrontend(values) {
console.log(values);
document.getElementById("etcSwitchEnable").checked = values.splashscreenEnabled;// Set switch status to received score enabled value
}
// Update DOM timer elements from passed values // Update DOM timer elements from passed values
function updateTimerFrontend(values) { function updateTimerFrontend(values) {
@ -140,6 +145,25 @@ async function killBrowser() {
const response = await fetch("/admin/killBrowser"); // Call API Endpoint /admin/killBrowser const response = await fetch("/admin/killBrowser"); // Call API Endpoint /admin/killBrowser
} }
// ######################################################################################################################################################
// Etc endpoints
// ######################################################################################################################################################
// Request important values for etc stuff
async function etcGetValues() {
const response = await fetch("/admin/etcGetValues"); // Call API Endpoint /admin/etcGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete
updateEtcFrontend(data); // Update admin frontend
}
// Toggle index page to also show scoreboard
async function etcToggleSplashscreen() {
const response = await fetch("/admin/etcToggleSplashscreen");// Call API Endpoint /admin/etcToggleSplashscreen
const data = await response.json(); // Wait for asyncronous transfer to complete
updateEtcFrontend(data); // Update admin frontend
refreshMonitor(); // Refresh main monitor to display new frontend
}
// ###################################################################################################################################################### // ######################################################################################################################################################
// Timerfunctions // Timerfunctions
// ###################################################################################################################################################### // ######################################################################################################################################################

View File

@ -0,0 +1,14 @@
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('refresh', (message) => {
document.location.reload() // Reload page on received 'refresh' messagen
});

View File

@ -33,6 +33,23 @@ router.get('/killBrowser', function(req, res, next) {
res.send(); // send empty response res.send(); // send empty response
}); });
// ######################################################################################################################################################
// Etc endpoints
// ######################################################################################################################################################
// Express router endpoint to toggle splashscreen
router.get('/etcToggleSplashscreen', function(req, res, next) {
etc.toggleSplashScreen(); // Toggles splashscreen
res.status(200); // Set http status code to 200 (success)
res.json(etc.getValues()); // Answer with important values
});
// Express router endpoint to get important etc values
router.get('/etcGetValues', function(req, res, next) {
res.status(200); // Set http status code to 200 (success)
res.json(etc.getValues()); // Answer with important values
});
// ###################################################################################################################################################### // ######################################################################################################################################################
// Timerendpoints // Timerendpoints
// ###################################################################################################################################################### // ######################################################################################################################################################

View File

@ -2,15 +2,20 @@ var express = require('express');
var router = express.Router(); var router = express.Router();
let io = require('../controllers/socketio'); let io = require('../controllers/socketio');
const score = require("../controllers/score"); const score = require('../controllers/score');
const etc = require('../controllers/etc');
/* GET home page. */ /* GET home page. */
router.get('/', function(req, res, next) { router.get('/', function(req, res, next) {
if(etc.getSplashscreen()) { // If splashscreen is enabled
res.render('splashscreen', {}); // Render splashscreen
} else {
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', {}); // Render the site with scoreboard
} else { // If scoreboard is not enabled } else { // If scoreboard is not enabled
res.render('index', {}); // Render the site without scoreboard res.render('index', {}); // Render the site without scoreboard
} }
}
}); });
io.on('connection', (socket) => { io.on('connection', (socket) => {

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/splashscreen.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' />
</head>
<body onload="">
<div class="vh-100">
<img src="/img/SG_Arheilgen_upscaled.png" class="position-absolute top-50 start-50 translate-middle h-100">
</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/splashscreen.js"></script>
</html>