Added db with team selection, scoreboard enabled by default, Added Debugwindow, cleanup

scoreboard/controllers/db.js

@@ -0,0 +1,46 @@
+"use strict";
+
+let db;
+
+// Import ESM into CJS file using immediately invoked function expression because of missing top-level await in CJS
+(async () => {
+    const { LowSync } = await import('lowdb');
+    const { JSONFileSync } = await import('lowdb/node');
+    db = new LowSync(new JSONFileSync('db.json'), { teams:  []})
+})();
+
+function getTeams() {
+    db.read();
+    return db.data.teams
+}
+
+// Adds passed teamName to db if not already existing
+function addTeam(teamName) {
+    console.log(teamName)
+    db.read();
+    if(!db.data.teams.includes(teamName) && teamName != "") {         // Teamname not in db
+        db.data.teams.push(teamName);
+        db.write();
+    } else {                                        // Teamname already in db
+    }
+}
+
+// Deletes passed teamName from db if existing
+function deleteTeam(teamName) {
+    db.read();
+    if(db.data.teams.includes(teamName) && teamName != "") {         // Teamname in db
+        db.data.teams.splice(db.data.teams.indexOf(teamName), 1)       // Delete corresponding array entry
+        db.write();
+    }
+}
+
+// Returns important values from db
+function getValues() {
+    db.read();
+    console.log(db.data)
+    return db.data
+}
+
+module.exports = {
+    getTeams, addTeam, deleteTeam, getValues
+}

scoreboard/controllers/score.js

@@ -1,6 +1,7 @@
 const io = require('./socketio');
+const db = require('../controllers/db');
 
-let enabled = false;
+let enabled = true;
 let teamA = {
     name: "Team A",
     name2: "",
@@ -112,6 +113,7 @@ function getValues() {
         teamB: teamB,
         sideswitch: sideswitch,
         print: print(),
+        teams: db.getTeams(),
     };
 }
 

scoreboard/db.json

@@ -0,0 +1,12 @@
+{
+  "teams": [
+    "Arheilgen",
+    "Prechtal",
+    "RVW Merklingen",
+    "Hofen",
+    "Leeden",
+    "Oelde",
+    "Burgkunstadt",
+    "Gaustadt"
+  ]
+}

scoreboard/package-lock.json

@@ -14,6 +14,7 @@
         "express-ws": "^5.0.2",
         "hbs": "~4.0.4",
         "http-errors": "~1.6.3",
+        "lowdb": "^7.0.1",
         "moment": "^2.30.1",
         "morgan": "~1.9.1",
         "socket.io": "^4.7.5",
@@ -469,6 +470,20 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -843,6 +858,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

scoreboard/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "nodemon ./bin/www"
+    "start": "nodemon --ignore '*.json' ./bin/www"
   },
   "dependencies": {
     "cookie-parser": "~1.4.4",
@@ -12,6 +12,7 @@
     "express-ws": "^5.0.2",
     "hbs": "~4.0.4",
     "http-errors": "~1.6.3",
+    "lowdb": "^7.0.1",
     "moment": "^2.30.1",
     "morgan": "~1.9.1",
     "socket.io": "^4.7.5",

scoreboard/public/javascripts/admin.js

@@ -59,10 +59,72 @@ function updateScoreFrontend(values) {
     document.getElementById("teamBisSpielgemeinschaft").checked = values.teamB.isSpielgemeinschaft;
 }
 
+// Update DOM for all db contents with the passed values
+function updateDbFrontend(values) {
+    console.log(values);
+
+    let teamAnameDropdown = document.getElementById("teamAnameDropdown");       // Dropdown for TeamA name
+    let teamAname2Dropdown = document.getElementById("teamAname2Dropdown");     // Dropdown for TeamA name2
+    let teamBnameDropdown = document.getElementById("teamBnameDropdown");       // Dropdown for TeamB name
+    let teamBname2Dropdown = document.getElementById("teamBname2Dropdown");     // Dropdown for TeamB name2
+
+    // Clear innerHTML of dropdowns
+    teamAnameDropdown.innerHTML = "";
+    teamAname2Dropdown.innerHTML = "";
+    teamBnameDropdown.innerHTML = "";
+    teamBname2Dropdown.innerHTML = "";
+
+    let selectDelete = document.getElementById("dbTeamToDelete");               // Select for team deletion from db
+    selectDelete.innerHTML = ""                                                 // Clears all existing options from select
+
+    // <li><a class="dropdown-item" onclick="scoreInsertChosenName">Action</a></li>
+
+    for(team of values.teams) {
+        // Create custom Dropdowns with different function arguments for team configuration
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamAname','` + team  +`')"> `+ team  +`</a>`;
+        teamAnameDropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamAname2','` + team  +`')"> `+ team  +`</a>`;
+        teamAname2Dropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamBname','` + team  +`')"> `+ team  +`</a>`;
+        teamBnameDropdown.appendChild(li);
+        var li = document.createElement("li");
+        li.innerHTML = `<a class="dropdown-item" onclick="scoreInsertChosenName('teamBname2','` + team  +`')"> `+ team  +`</a>`;
+        teamBname2Dropdown.appendChild(li);
+
+        // Create select options for deletion in debugwindow
+        let opt = document.createElement("option");
+        opt.value = team;
+        opt.innerHTML = team;
+        selectDelete.appendChild(opt);
+    }
+}
+
+// Inserts the passed name into the passed name text input
+async function scoreInsertChosenName(field, name) {
+    switch(field) {
+        case 'teamAname':
+            document.getElementById("teamAname").value = name;
+            break;
+        case 'teamAname2':
+            document.getElementById("teamAname2").value = name;
+            break;
+        case 'teamBname':
+            document.getElementById("teamBname").value = name;
+            break;
+        case 'teamBname2':
+            document.getElementById("teamBname2").value = name;
+            break;
+    }
+}
+
 // Initial update gets called whenever page has been loaded
 async function initialUpdate() {
     timerGetValues();                                           // Request new values for timer
     scoreGetValues();                                           // Request new values for score
+    dbGetValues();                                              // Request new values for db contents
 }
 
 // Request monitor refresh for index frontend
@@ -195,3 +257,38 @@ async function scoreConfigTeams() {
     updateScoreFrontend(data);                                  // Update admin frontend
     refreshMonitor();
 }
+
+// ######################################################################################################################################################
+// DB functions
+// ######################################################################################################################################################
+
+// Request important values for db contents
+async function dbGetValues() {
+    const response = await fetch("/admin/dbGetValues");         // Call API Endpoint /admin/dbGetValues
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
+    updateDbFrontend(data);                                     // Update admin frontend
+}
+
+// Add team to DB
+async function dbAddTeam() {
+    const response = await fetch("/admin/dbAddTeam", {          // 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({teamName: document.getElementById("dbTeamToAdd").value})
+    });
+    document.getElementById("dbTeamToAdd").value = "";          // Empty the text field after sending
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateDbFrontend(data);
+}
+
+// Delete team from DB
+async function dbDeleteTeam() {
+    let teamName = document.getElementById("dbTeamToDelete").value;
+    const response = await fetch("/admin/dbDeleteTeam", {          // 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({teamName: teamName})
+    });
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
+    updateDbFrontend(data);
+}

scoreboard/routes/admin.js

@@ -4,6 +4,7 @@ const io = require('../controllers/socketio');
 
 const timer = require('../controllers/timer');
 const score = require('../controllers/score');
+const db = require('../controllers/db');
 
 // ######################################################################################################################################################
 // General endpoints
@@ -123,6 +124,27 @@ router.post('/scoreConfigTeams', function(req, res, next) {
     res.json(score.getValues());
 });
 
+// ######################################################################################################################################################
+// DB endpoints
+// ######################################################################################################################################################
+
+// Express router endpoint to get important values for db contents
+router.get('/dbGetValues', function(req, res, next) {
+    res.json(db.getValues());               // Respond with important values for frontend
+});
+
+// Express router endpoint to add a team to the team database
+router.post('/dbAddTeam', function(req, res, next) {
+    db.addTeam(req.body.teamName);          // Add teamname to DB
+    res.json(db.getValues());               // Respond with all important values to update the frontend
+});
+
+// Express router endpoint to delete a team from the team database
+router.post('/dbDeleteTeam', function(req, res, next) {
+    db.deleteTeam(req.body.teamName);          // Add teamname to DB
+    res.json(db.getValues());               // Respond with all important values to update the frontend
+});
+
 /* GET home page. */
 router.get('/', function(req, res, next) {
     res.render('admin');

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" 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-success" data-bs-toggle="modal" data-bs-target="#scoreConfigTeamsModal"><i class="fa-solid fa-people-group"></i> Teams konfigurieren</button>
+              <button class="mb-2 btn btn-lg btn-warning" data-bs-toggle="modal" data-bs-target="#scoreSwitchModal"><i class="fa-solid fa-repeat"></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>
@@ -103,13 +103,7 @@
         <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">
+              <button class="mb-2 btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#debugModal"><i class="fa-solid fa-bug"></i> Debugfenster</button>
-                <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>
@@ -239,34 +233,49 @@
         <div class="modal-body">
           <p class="fw-bold">Konfiguration von Team A bearbeiten:</p>
           <form>
-            <div class="mb-3">
+            <div class="input-group mb-3">
-              <label for="teamAname", class="form-label">Team A Name</label>
+              <span class="input-group-text">Name</span>
               <input type="text" class="form-control" id="teamAname" aria-describedby="teamAnameHelp">
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+                <ul id="teamAnameDropdown" class="dropdown-menu dropdown-menu-end">
+                </ul>
             </div>
-            <div class="form-check">
+
+            <div class="form-check mb-3">
               <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>
+            <div class="input-group">
+              <span class="input-group-text">Name2</span>
               <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>
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamAname2Dropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
-            <br><br>
+              <div id="teamAname2help" class="form-text mb-5">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
+
+
           <p class="fw-bold">Konfiguration von Team B bearbeiten:</p>
-            <div class="mb-3">
+            <div class="input-group mb-3">
-              <label for="teamBname", class="form-label">Team B Name</label>
+              <span class="input-group-text">Name</span>
               <input type="text" class="form-control" id="teamBname" aria-describedby="teamBnameHelp">
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamBnameDropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
-            <div class="form-check">
+            <div class="form-check mb-3">
               <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">
+            <div class="input-group">
-              <label for="teamBname2", class="form-label">Team B Name 2</label>
+              <span class="input-group-text">Name2</span>
               <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>
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Auswählen</button>
+              <ul id="teamBname2Dropdown" class="dropdown-menu dropdown-menu-end">
+              </ul>
             </div>
+              <div id="teamBname2help" class="form-text mb-3">Wird nur bei einer Spielgemeinschaft angezeigt, sonst leer lassen</div>
           </form>
 
 
@@ -280,6 +289,46 @@
   </div>
   <!-- Config Team Modal -->
 
+  <!-- Debug Modal -->
+  <div class="modal fade" id="debugModal" tabindex="-1" aria-labelledby="debugModalLabel" 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="debugModalLabel">Debugfenster</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Achtung, eine Fehlbedienung kann unerwünschtes Verhalten hervorrufen.</p>
+          <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">Scoreboard anzeigen?</label>
+          </div>
+          <button class="mb-2 btn btn-lg btn-warning" onclick="refreshMonitor()"><i class="fa-solid fa-rotate"></i> Monitor neu laden</button> <br>
+          <button class="mb-2 btn btn-lg btn-success" onclick="openBrowser()"><i class="fa-solid fa-rocket"></i> Browser öffnen</button> <br>
+          <button class="mb-3 btn btn-lg btn-danger" onclick="killBrowser()"><i class="fa-solid fa-stop"></i> Browser stoppen</button> <br>
+
+
+          <p class="fw-bold">Team Datenbank:</p>
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="fa-solid fa-user-plus"></i></span>
+            <input type="text" class="form-control" id="dbTeamToAdd" aria-describedby="teamBnameHelp">
+            <button class="btn btn-outline-success" type="button" onclick="dbAddTeam()"><i class="fa-solid fa-plus"></i></button>
+          </div>
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="fa-solid fa-user-minus"></i></span>
+            <select class="form-select" id="dbTeamToDelete" aria-label="Default select example">
+            </select>
+            <button class="btn btn-outline-danger" type="button" onclick="dbDeleteTeam()"><i class="fa-solid fa-trash"></i></button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Debug Modal -->
+
 
   <!-- Timer start error toast -->
   <div class="toast-container position-fixed bottom-0 end-0 p-3">