Added scoreboard functionality, seperate update admin frontend

This commit is contained in:
2024-05-17 21:24:58 +02:00
parent e36a959071
commit 93d06517e4
4 changed files with 331 additions and 22 deletions
+86 -12
View File
@@ -27,28 +27,27 @@
<div class="h-100 card text-center">
<div class="card-body">
<button class="m-2 p-3 btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
<br>
<button class="m-2 p-3 btn btn-lg btn-warning" onclick="timerPause()" id="timerPauseBtn"><i class="fa-solid fa-pause"></i> Pause</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="h-100 card text-center ">
<div class="h-100 card text-center">
<div class="card-body ">
<div class="btn-group align-middle" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">-1m</button>
<button type="button" class="btn btn-secondary">-10s</button>
<button type="button" class="btn btn-secondary">-1s</button>
<button type="button" class="btn btn-secondary">+1s</button>
<button type="button" class="btn btn-secondary">+10s</button>
<button type="button" class="btn btn-secondary">+1m</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-10)">-10s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-5)">-5s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(-1)">-1s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+1)">+1s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+5)">+5s</button>
<button type="button" class="btn btn-secondary" onclick="timerIncDec(+10)">+10s</button>
</div>
</div>
</div>
</div>
<div class="py-auto col-sm-12 col-md-12 col-lg-4">
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="h-100 card text-center">
<div class="card-body">
<button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
@@ -59,12 +58,64 @@
</div>
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-12 col-lg-12">
<button class="btn btn-lg btn-danger" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
<div class="row mb-4 justify-content-center">
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="card text-center">
<div class="card-body">
<h1 id="score"></h1>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="h-100 card text-center">
<div class="card-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="mb-2 button" class="btn btn-outline-success" onclick="scoreAlterScore('teamA', 'inc')">Team A +1</button>
<button type="mb-2 button" class="btn btn-outline-danger" onclick="scoreAlterScore('teamA', 'dec')">Team A -1</button>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="mb-2 button" class="btn btn-outline-success" onclick="scoreAlterScore('teamB', 'inc')">Team B +1</button>
<button type="mb-2 button" class="btn btn-outline-danger" onclick="scoreAlterScore('teamB', 'dec')">Team B -1</button>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
<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">
<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>
</div>
</div>
</div>
</body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
@@ -137,6 +188,29 @@
</div>
<!-- Modal -->
<!-- Config Team Modal -->
<div class="modal fade" id="scoreConfigTeamAModal" tabindex="-1" aria-labelledby="scoreConfigTeamAModalLabel" 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>
<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>
</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-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
<!-- Config Team Modal -->
<!-- Timer start error toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="timerStartErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">