Added sideswitch functionality, cleanup, comments

Added config team functionality, receive them from backend to update frontend, Added scoreswitch
2024-05-28 23:00:32 +02:00 · 2024-05-28 22:59:36 +02:00
6 changed files with 166 additions and 28 deletions
--- a/scoreboard/controllers/score.js
+++ b/scoreboard/controllers/score.js
@ -17,12 +17,11 @@ let sideswitch = false;

 // Function prototypes
 function setEnabled(status) {};
-function setName(team, name) {};
-function configTeam() {};
+function configTeam(team, name, name2, isSpielgemeinschaft) {};
 function setScore(team, score) {};
 function alterScore(team, dir) {};
 function clearScore() {};
-function toggleSwitch() {};
+function toggleSideSwitch() {};
 function getEnabled() {};
 function getValues() {};

@ -43,15 +42,6 @@ function configTeam(team, name, name2, 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") {
@ -93,8 +83,11 @@ function clearScore() {
 }

 // Toggle sideswitch
-function toggleSwitch() {
+function toggleSideswitch() {
+    console.log("Seiten gewechselt");
    sideswitch = !sideswitch;
+    io.sockets.emit('score', print());
+    io.sockets.emit('scoreSideswitch', '');
 }

 // Return enabled value
@ -102,6 +95,7 @@ function getEnabled() {
    return enabled
 }

+// Print current score depending on sideswitch
 function print() {
    if(sideswitch) {
        return teamB.score + ":" + teamA.score
@ -110,6 +104,7 @@ function print() {
    }
 }

+// Return all important values
 function getValues() {
    return {
        enabled: enabled,
@ -121,5 +116,5 @@ function getValues() {
 }

 module.exports = {
-    setEnabled, setScore, alterScore, clearScore, getEnabled, getValues
+    setEnabled, configTeam, setScore, alterScore, clearScore, toggleSideswitch, getEnabled, getValues
 }
--- a/scoreboard/public/javascripts/admin.js
+++ b/scoreboard/public/javascripts/admin.js
@ -48,6 +48,15 @@ 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
+
+    // Input current Team values into form inputs
+    document.getElementById("teamAname").value = values.teamA.name;
+    document.getElementById("teamAname2").value = values.teamA.name2;
+    document.getElementById("teamAisSpielgemeinschaft").checked = values.teamA.isSpielgemeinschaft;
+
+    document.getElementById("teamBname").value = values.teamB.name;
+    document.getElementById("teamBname2").value = values.teamB.name2;
+    document.getElementById("teamBisSpielgemeinschaft").checked = values.teamB.isSpielgemeinschaft;
 }

 // Initial update gets called whenever page has been loaded
@ -59,7 +68,6 @@ 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
 }

 // ######################################################################################################################################################
@ -151,8 +159,8 @@ async function scoreAlterScore(team, dir) {
 }

 // Switch sides
-async function scoreSwitch() {
-    const response = await fetch("/admin/scoreSwitch");         // Call API Endpoint /admin/scoreSwitch
+async function scoreToggleSideswitch() {
+    const response = await fetch("/admin/scoreToggleSideswitch");// Call API Endpoint /admin/scoreSwitch
    const data = await response.json();                         // Wait for asyncronous transfer to complete
    updateScoreFrontend(data);                                  // Update admin frontend
 }
@ -163,3 +171,27 @@ async function scoreClearScore() {
    const data = await response.json();                         // Wait for asynchronous transfer to complete
    updateScoreFrontend(data);                                  // Update admin frontend
 }
+
+// Configure Teams
+async function scoreConfigTeams() {
+    teamA = {
+        name: document.getElementById("teamAname").value,
+        name2: document.getElementById("teamAname2").value,
+        isSpielgemeinschaft: document.getElementById("teamAisSpielgemeinschaft").checked
+    };
+    teamB = {
+        name: document.getElementById("teamBname").value,
+        name2: document.getElementById("teamBname2").value,
+        isSpielgemeinschaft: document.getElementById("teamBisSpielgemeinschaft").checked
+    }
+    console.log(teamA, teamB)
+
+    const response = await fetch("/admin/scoreConfigTeams", {    // 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({teamA: teamA, teamB: teamB})
+    });
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateScoreFrontend(data);                                  // Update admin frontend
+    refreshMonitor();
+}
--- a/scoreboard/public/javascripts/indexScore.js
+++ b/scoreboard/public/javascripts/indexScore.js
@ -27,6 +27,10 @@ socket.on('score', (message) => {
    document.getElementById("score").innerHTML = message;           // Display score in corresponding html Element
 });

+socket.on('scoreSideswitch', (message) => {
+    scoreGetValues();                                               // Update frontend when sides have been switch (switches team name sides)
+});
+
 // ######################################################################################################################################################
 // General functions
 // ######################################################################################################################################################
@ -39,6 +43,33 @@ function updateTimerFrontend(values) {
 // Update DOM score elements from passed values
 function updateScoreFrontend(values) {
    document.getElementById("score").innerHTML = values.print;          // Set score on admin interface
+
+    if(!values.sideswitch) {
+        if(values.teamA.isSpielgemeinschaft) {
+            document.getElementById("teamA").innerHTML = values.teamA.name + '<br>' + values.teamA.name2;
+        } else {
+            document.getElementById("teamA").innerHTML = values.teamA.name
+        }
+    
+        if(values.teamB.isSpielgemeinschaft) {
+            document.getElementById("teamB").innerHTML = values.teamB.name + '<br>' + values.teamB.name2;
+        } else {
+            document.getElementById("teamB").innerHTML = values.teamB.name
+        }
+    } else {
+        if(values.teamA.isSpielgemeinschaft) {
+            document.getElementById("teamB").innerHTML = values.teamA.name + '<br>' + values.teamA.name2;
+        } else {
+            document.getElementById("teamB").innerHTML = values.teamA.name
+        }
+    
+        if(values.teamB.isSpielgemeinschaft) {
+            document.getElementById("teamA").innerHTML = values.teamB.name + '<br>' + values.teamB.name2;
+        } else {
+            document.getElementById("teamA").innerHTML = values.teamB.name
+        }        
+    }
+
 }

 async function initialUpdate() {
--- a/scoreboard/routes/admin.js
+++ b/scoreboard/routes/admin.js
@ -93,7 +93,10 @@ router.post('/scoreAlterScore', function(req, res, next) {
 });

 // Express router endpoint to switch the score after halftime
-router.post('/scoreSwitch', function(req, res, next) {
+router.get('/scoreToggleSideswitch', function(req, res, next) {
+    score.toggleSideswitch();
+    res.status(200);
+    res.json(score.getValues());
 });

 // Express router endpoint to get important score values
@ -107,6 +110,13 @@ router.get('/scoreClearScore', function(req, res, next) {
    res.json(score.getValues());            // Respond with important values for frontend
 });

+router.post('/scoreConfigTeams', function(req, res, next) {
+    score.configTeam("teamA", req.body.teamA.name, req.body.teamA.name2, req.body.teamA.isSpielgemeinschaft);
+    score.configTeam("teamB", req.body.teamB.name, req.body.teamB.name2, req.body.teamB.isSpielgemeinschaft);
+    console.log(score.getValues());
+    res.json(score.getValues());
+});
+
 /* GET home page. */
 router.get('/', function(req, res, next) {
    res.render('admin');
--- a/scoreboard/views/admin.hbs
+++ b/scoreboard/views/admin.hbs
@ -93,9 +93,9 @@
        <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>
+              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreSwitchModal"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
+              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreResetModal"><i class="fa-solid fa-rotate-right"></i> Score zurücksetzen</button>
+              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#scoreConfigTeamsModal">Teams konfigurieren</button>
            </div>
          </div>
        </div>
@ -188,21 +188,91 @@
  </div>
  <!-- Modal -->

-    <!-- Config Team Modal -->
-  <div class="modal fade" id="scoreConfigTeamAModal" tabindex="-1" aria-labelledby="scoreConfigTeamAModalLabel" aria-hidden="true">
+  <!-- Score switch Modal -->
+  <div class="modal fade" id="scoreSwitchModal" tabindex="-1" aria-labelledby="scoreSwitchModalLabel" 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>
+          <h1 class="modal-title fs-5" id="scoreSwitchModalLabel">Seiten wechseln?</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>
+          <p>Möchtest du die Seiten für den Score wirklich wechseln?</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="scoreToggleSideswitch()">Seitenwechsel</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Score switch Modal -->
+
+  <!-- Score reset Modal -->
+  <div class="modal fade" id="scoreResetModal" tabindex="-1" aria-labelledby="scoreResetModalLabel" 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="scoreResetModalLabel">Score zurücksetzen?</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Möchtest du den Score wirklich zurücksetzen?</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="scoreClearScore()">Zurücksetzen</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Score reset Modal -->
+
+  <!-- Config Team Modal -->
+  <div class="modal fade" id="scoreConfigTeamsModal" tabindex="-1" aria-labelledby="scoreConfigTeamsModalLabel" 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">Teams konfigurieren</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p class="fw-bold">Konfiguration von Team A bearbeiten:</p>
+          <form>
+            <div class="mb-3">
+              <label for="teamAname", class="form-label">Team A Name</label>
+              <input type="text" class="form-control" id="teamAname" aria-describedby="teamAnameHelp">
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="teamAisSpielgemeinschaft">
+              <label class="form-check-label" for="teamAisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
+            </div>
+            <div class="mb-3">
+              <label for="teamAname2", class="form-label">Team A Name 2</label>
+              <input type="text" class="form-control" id="teamAname2" aria-describedby="teamAname2help">
+               <div id="teamAname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+            </div>
+            <br><br>
+          <p class="fw-bold">Konfiguration von Team B bearbeiten:</p>
+            <div class="mb-3">
+              <label for="teamBname", class="form-label">Team B Name</label>
+              <input type="text" class="form-control" id="teamBname" aria-describedby="teamBnameHelp">
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="teamBisSpielgemeinschaft">
+              <label class="form-check-label" for="teamBisSpielgemeinschaft">Team ist eine Spielgemeinschaft</label>
+            </div>
+            <div class="mb-3">
+              <label for="teamBname2", class="form-label">Team B Name 2</label>
+              <input type="text" class="form-control" id="teamBname2" aria-describedby="teamBname2help">
+              <div id="teamBname2help" class="form-text">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+            </div>
+          </form>


        </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-success" data-bs-dismiss="modal" onclick="scoreConfigTeams()">Absenden</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
        </div>
      </div>
--- a/scoreboard/views/indexScore.hbs
+++ b/scoreboard/views/indexScore.hbs
@ -15,13 +15,13 @@

    <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>
+        <h1 id="teamA">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>
+        <h1 id="teamB">Team B</h>
      </div>
    </div>
Author	SHA1	Message	Date
Julian Appel	ad6ab2ecab	Added sideswitch functionality, cleanup, comments	2024-05-28 23:00:32 +02:00
Julian Appel	835248a9dc	Added config team functionality, receive them from backend to update frontend, Added scoreswitch	2024-05-28 22:59:36 +02:00