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

Cleanup, formatting, comments, added onclick functions

Browse Source
This commit is contained in:
Julian Appel 2024-04-21 14:24:53 +02:00
parent 093c8c6e24
commit a4d905d728
4 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scoreboard/public/javascripts/admin.js Normal file
View File

@ -0,0 +1,11 @@
function timerStart()
{
fetch("/admin/timerStart", {
method: "POST",
headers: {'Content-Type': 'text/html'},
body: ""
}).then(res => {
console.log(res);
})
}

20
scoreboard/public/javascripts/index.js
View File

@ -1,23 +1,15 @@
let wss = "ws://" + window.location.hostname + ":3001"
const socket = io(wss);
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)
document.getElementById("durationLeft").innerHTML = message;
console.log(message) // Log durationLeft in client console
document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
});
socket.on('timerEnded', (message) => {
console.log(message)
document.getElementById("durationLeft").innerHTML = "STOP";
});
// let minutes = currentTime.setMinutes(6);
// let seconds = currentTime.setSeconds(25);
// document.getElementById("timer").innerHTML = minutes + ":" + seconds;
document.getElementById("durationLeft").innerHTML = "STOP"; // Display "STOP" in same html element as the duration
});

37
scoreboard/views/admin.hbs
View File

@ -7,27 +7,24 @@
</head>
<body>
Interface zur Bedienung des Zeit-/Scoreboards.
<!-- Timer buttons -->
<div class="row mt-2">
<div class="col-lg-4">
<form method="post" action="/admin/timerStart">
<button class="btn btn-lg btn-success" type="submit" name="startButton">
<span class="glyphicon glyphicon-play" aria-hidden="false"> </span>
</button>
</form>
</div>
<div class="col-lg-4">
<form method="post" action="/admin/timerPause">
<button class="btn btn-lg btn-warning" type="submit" name="pauseButton">Pause</button>
</form>
<div class="col-lg-4">
<form method="post" action="/admin/timerReset">
<button class="btn btn-lg btn-danger" type="submit" name="resetButton">Reset</button>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<form method="post" action="/admin/timerStart">
<button class="btn btn-lg btn-success" type="submit" name="startButton">Start</button>
</form>
</div>
<div class="col-lg-4">
<form method="post" action="/admin/timerPause">
<button class="btn btn-lg btn-warning" type="submit" name="pauseButton">Pause</button>
</form>
</div>
<div class="col-lg-4">
<form method="post" action="/admin/timerReset">
<button class="btn btn-lg btn-danger" type="submit" name="resetButton">Reset</button>
</form>
</div>
</div>
</body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
<script src="/javascripts/admin.js"></script>
</html>

12
scoreboard/views/index.hbs
View File

@ -8,12 +8,10 @@
</head>
<body>
<div class="d-flex flex-column align-items-center justify-content-center box-time" style="background-color:brown; ">
<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" style="background-color:blueviolet;">
<div style="background-color:crimson;" class="flex-fill order-sm-1 order-md-1 order-lg-0">
<h1>L<br/>LLLLLLLLLLLLLL<br/>L<br/></h>
@ -26,11 +24,9 @@
</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/index.js"></script>
<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/index.js"></script>
</html>