Admin frontend page
This commit is contained in:
parent
b7cf1e4d9a
commit
54ca75563a
@ -4,27 +4,170 @@
|
|||||||
<title>Scoreboard Admin</title>
|
<title>Scoreboard Admin</title>
|
||||||
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
|
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
|
||||||
<link rel='stylesheet' href='/stylesheets/style.css' />
|
<link rel='stylesheet' href='/stylesheets/style.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>
|
</head>
|
||||||
<body>
|
<body onload="initialUpdate()">
|
||||||
Interface zur Bedienung des Zeit-/Scoreboards.
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 id="durationLeft"></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</br>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4">
|
<div class="col-sm-12 col-md-4">
|
||||||
<form method="post" action="/admin/timerStart">
|
<div class="card text-center">
|
||||||
<button class="btn btn-lg btn-success" type="submit" name="startButton">Start</button>
|
<div class="card-body">
|
||||||
</form>
|
<button class="btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
|
||||||
|
<button class="btn btn-lg btn-warning" onclick="timerPause()" id="timerPauseBtn"><i class="fa-solid fa-pause"></i> Pause</button>
|
||||||
</div>
|
</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>
|
||||||
<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="col-sm-12 col-md-4">
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="btn-group" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div class="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>
|
||||||
|
|
||||||
|
</br></br></br></br></br></br>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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/moment.js"></script>
|
||||||
<script src="/javascripts/admin.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 -->
|
||||||
|
|
||||||
|
<!-- 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>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user