Added scoreboard functionality, seperate update admin frontend

scoreboard/controllers/score.js

@@ -0,0 +1,125 @@
+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
+}

scoreboard/controllers/timer.js

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

scoreboard/public/javascripts/admin.js

@@ -15,7 +15,13 @@ socket.on('timerEnded', (message) => {
     initialUpdate();                                                    // Update admin frontend to set correct buttonstatus
 });
 
-function updateFrontend(values) {
+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 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
@@ -29,20 +35,41 @@ function updateFrontend(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() {
-    const response = await fetch("/admin/timerGetValues");  // Call API Endpoint /admin/timerGetValues
-    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
+    timerGetValues();                                           // Request new values for timer
+    scoreGetValues();                                           // Request new values for score
+}
+
+// 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
+// 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() {
-    const response = await fetch("/admin/timerStart");      // 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
-        updateFrontend(data);                               // Update admin frontend with received values
+    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
@@ -50,12 +77,13 @@ async function timerStart() {
     }
 }
 
+// Request to pause the timer
 async function timerPause() {
     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
-        updateFrontend(data);                               // Update admin frontend with received values
+        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
@@ -63,6 +91,7 @@ async function timerPause() {
     }
 }
 
+// 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
@@ -72,12 +101,65 @@ async function timerReset() {
     });
     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
+    updateTimerFrontend(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
+// 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() {
     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
+}
+
+// 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
+}
+

scoreboard/public/javascripts/index.js

@@ -12,4 +12,8 @@ socket.on('timerDurationLeft', (message) => {
 
 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
 });

scoreboard/public/javascripts/indexScore.js

@@ -0,0 +1,41 @@
+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
+}

scoreboard/public/stylesheets/index.css

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

scoreboard/public/stylesheets/indexScore.css

@@ -0,0 +1,55 @@
+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%
+  }
+}

scoreboard/routes/admin.js

@@ -1,7 +1,17 @@
 var express = require('express');
 var router = express.Router();
+const io = require('../controllers/socketio');
 
-var timer = require('../controllers/timer');
+const 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
 router.get('/timerStart', function(req, res, next) {
@@ -31,14 +41,58 @@ router.post('/timerReset', function(req, res, next) {
     res.json(timer.getValues());            // Respond with all important values to update the frontend
 });
 
-// Express router endpoint to switch the score after halftime
+router.post('/timerIncDec', function(req, res, next) {
+    timer.incDec(req.body.value);
+    res.json(timer.getValues());
+});
+
+// Express router endpoint to get important timer values
 router.get('/timerGetValues', function(req, res, next) {
     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
-router.get('/scoreSwitch', function(req, res, next) {
-    res.render('admin');
+router.post('/scoreSwitch', function(req, res, next) {
+});
+
+// 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. */
@@ -46,6 +100,4 @@ router.get('/', function(req, res, next) {
     res.render('admin');
 });
 
-
-
 module.exports = router;

scoreboard/routes/index.js

@@ -1,11 +1,19 @@
 var express = require('express');
 var router = express.Router();
-let io = require('../controllers/socketio')
-const timer = require('../controllers/timer')
+let io = require('../controllers/socketio');
+const timer = require('../controllers/timer');
+const score = require('../controllers/score');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-    res.render('index', { durationLeft: timer.print()});
+  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()})
+  }
 });
 
 io.on('connection', (socket) => {

scoreboard/views/admin.hbs

@@ -27,28 +27,27 @@
           <div class="h-100 card text-center">
             <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>
-              <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>
             </div>
           </div>
         </div>
 
         <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="btn-group align-middle" role="group" aria-label="Basic example">
-                <button type="button" class="btn btn-secondary">-1m</button>
-                <button type="button" class="btn btn-secondary">-10s</button>
-                <button type="button" class="btn btn-secondary">-1s</button>
-                <button type="button" class="btn btn-secondary">+1s</button>
-                <button type="button" class="btn btn-secondary">+10s</button>
-                <button type="button" class="btn btn-secondary">+1m</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(-10)">-10s</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(-5)">-5s</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(-1)">-1s</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(+1)">+1s</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(+5)">+5s</button>
+                <button type="button" class="btn btn-secondary" onclick="timerIncDec(+10)">+10s</button>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="py-auto 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="card-body">
               <button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
@@ -59,12 +58,64 @@
         </div>
       </div>
 
-      <div class="row text-center">
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <button class="btn btn-lg btn-danger" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
+      <div class="row mb-4 justify-content-center">
+        <div class="col-sm-12 col-md-12 col-lg-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <h1 id="score"></h1>
+            </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>
   </body>
   <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
@@ -137,6 +188,29 @@
   </div>
   <!-- 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 -->
   <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">

scoreboard/views/index.hbs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Counter</title>
+    <title>{{ title }}</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' />
@@ -12,18 +12,6 @@
       <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>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>
   <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
   <script src="/javascripts/socket.io.min.js"></script>

scoreboard/views/indexScore.hbs

@@ -0,0 +1,33 @@
+<!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>