247 lines
11 KiB
Handlebars
247 lines
11 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Scoreboard Admin</title>
|
|
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
|
|
<link rel='stylesheet' href='/stylesheets/admin.css' />
|
|
|
|
<link href="/stylesheets/fontawesome/fontawesome.min.css" rel="stylesheet" />
|
|
<link href="/stylesheets/fontawesome/brands.min.css" rel="stylesheet" />
|
|
<link href="/stylesheets/fontawesome/solid.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body onload="initialUpdate()">
|
|
<div class="container-md my-4">
|
|
|
|
<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="durationLeft"></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">
|
|
<button class="m-2 p-3 btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
|
|
<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="card-body ">
|
|
<div class="btn-group align-middle" role="group" aria-label="Basic example">
|
|
<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="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">
|
|
<i class="fa-solid fa-rotate-right"></i> Zurücksetzen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<script src="/javascripts/socket.io.min.js"></script>
|
|
<script src="/javascripts/moment.js"></script>
|
|
<script src="/javascripts/admin.js"></script>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="timerResetModal" tabindex="-1" aria-labelledby="timerResetModalLabel" 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>Möchtest du den Timer wirklich zurücksetzen?</p>
|
|
<p>Gewünschte Zeit:
|
|
<select class="form-select" id="timerSelectDuration" aria-label="Default select example">
|
|
<option value="0">0:00</option>
|
|
<option value="15">0:15</option>
|
|
<option value="30">0:30</option>
|
|
<option value="45">0:45</option>
|
|
<option value="60">1:00</option>
|
|
<option value="75">1:15</option>
|
|
<option value="90">1:30</option>
|
|
<option value="105">1:45</option>
|
|
<option value="120">2:00</option>
|
|
<option value="135">2:15</option>
|
|
<option value="150">2:30</option>
|
|
<option value="165">2:45</option>
|
|
<option value="180">3:00</option>
|
|
<option value="195">3:15</option>
|
|
<option value="210">3:30</option>
|
|
<option value="225">3:45</option>
|
|
<option value="240">4:00</option>
|
|
<option value="255">4:15</option>
|
|
<option value="270">4:30</option>
|
|
<option value="285">4:45</option>
|
|
<option value="300">5:00</option>
|
|
<option value="315">5:15</option>
|
|
<option value="330">5:30</option>
|
|
<option value="345">5:45</option>
|
|
<option value="360">6:00</option>
|
|
<option value="375">6:15</option>
|
|
<option value="390">6:30</option>
|
|
<option value="405">6:45</option>
|
|
<option selected value="420">7:00</option>
|
|
<option value="435">7:15</option>
|
|
<option value="450">7:30</option>
|
|
<option value="465">7:45</option>
|
|
<option value="480">8:00</option>
|
|
<option value="495">8:15</option>
|
|
<option value="510">8:30</option>
|
|
<option value="525">8:45</option>
|
|
<option value="540">9:00</option>
|
|
<option value="555">9:15</option>
|
|
<option value="570">9:30</option>
|
|
<option value="585">9:45</option>
|
|
<option value="600">10:00</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="timerReset()">Zurücksetzen</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div class="toast-header">
|
|
<i class="fa-solid fa-triangle-exclamation"> </i>
|
|
<strong class="me-auto"> Fehler</strong>
|
|
<small></small>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Der Timer ist bereits abgelaufen. Zum neustarten bitte zurücksetzen!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Timer start error toast -->
|
|
|
|
<!-- Timer pause error toast -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="timerPauseErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="fa-solid fa-triangle-exclamation"> </i>
|
|
<strong class="me-auto"> Fehler</strong>
|
|
<small></small>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Der Timer ist bereits pausiert.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Timer pause error toast -->
|
|
</html>
|
|
|