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

Added config team functionality, receive them from backend to update frontend, Added scoreswitch

Browse Source
This commit is contained in:
Julian Appel 2024-05-28 22:59:36 +02:00
parent faaa47a792
commit 835248a9dc
6 changed files with 106 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scoreboard/controllers/score.js
View File

@ -17,8 +17,7 @@ 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() {};
@ -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") {
@ -121,5 +111,5 @@ function getValues() {
}
module.exports = {
setEnabled, setScore, alterScore, clearScore, getEnabled, getValues
setEnabled, configTeam, setScore, alterScore, clearScore, toggleSideswitch, getEnabled, getValues
}

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

@ -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
@ -163,3 +172,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();
}

27
scoreboard/public/javascripts/indexScore.js
View File

@ -39,6 +39,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() {

7
scoreboard/routes/admin.js
View File

@ -107,6 +107,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');

40
scoreboard/views/admin.hbs
View File

@ -95,7 +95,7 @@
<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="#scoreConfigTeamsModal">Teams konfigurieren</button>
</div>
</div>
</div>
@ -189,20 +189,50 @@
<!-- Modal -->
<!-- Config Team Modal -->
<div class="modal fade" id="scoreConfigTeamAModal" tabindex="-1" aria-labelledby="scoreConfigTeamAModalLabel" aria-hidden="true">
<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">Timer zurücksetzen?</h1>
<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>Konfiguration von Team A bearbeiten:</p>
<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>

4
scoreboard/views/indexScore.hbs
View File

@ -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>