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);
})
}

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

@ -1,23 +1,15 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
let wss = "ws://" + window.location.hostname + ":3001" const socket = io(wss); // Connect to socketio server
const socket = io(wss);
socket.on('connected', (message) => { socket.on('connected', (message) => {
console.log("Connected"); console.log("Connected");
}) })
socket.on('timerDurationLeft', (message) => { socket.on('timerDurationLeft', (message) => {
console.log(message) console.log(message) // Log durationLeft in client console
document.getElementById("durationLeft").innerHTML = message; document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
}); });
socket.on('timerEnded', (message) => { socket.on('timerEnded', (message) => {
console.log(message) document.getElementById("durationLeft").innerHTML = "STOP"; // Display "STOP" in same html element as the duration
document.getElementById("durationLeft").innerHTML = "STOP";
}); });
// let minutes = currentTime.setMinutes(6);
// let seconds = currentTime.setSeconds(25);
// document.getElementById("timer").innerHTML = minutes + ":" + seconds;

11
scoreboard/views/admin.hbs
View File

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

12
scoreboard/views/index.hbs
View File

@ -8,12 +8,10 @@
</head> </head>
<body> <body>
<div class="d-flex flex-column align-items-center justify-content-center box-time" style="background-color:brown; "> <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 id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</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 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"> <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> <h1>L<br/>LLLLLLLLLLLLLL<br/>L<br/></h>
@ -26,11 +24,9 @@
</div> </div>
</div> </div>
</body> </body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script> <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
<script src="/javascripts/socket.io.min.js"></script> <script src="/javascripts/socket.io.min.js"></script>
<script src="/javascripts/moment.js"></script> <script src="/javascripts/moment.js"></script>
<script src="/javascripts/index.js"></script> <script src="/javascripts/index.js"></script>
</html> </html>