diff options
| -rw-r--r-- | app/static/custom.css | 3 | ||||
| -rw-r--r-- | app/static/custom.js | 52 | ||||
| -rw-r--r-- | app/templates/controls.j2 | 16 | ||||
| -rw-r--r-- | app/templates/players.j2 | 51 |
4 files changed, 63 insertions, 59 deletions
diff --git a/app/static/custom.css b/app/static/custom.css index 9992ee5..8aa5b57 100644 --- a/app/static/custom.css +++ b/app/static/custom.css @@ -9,6 +9,9 @@ td { margin-top: 20px; margin-bottom: 20px; } +footer { + text-align: center; +} .parent { display: grid; grid-column-gap: 20px; diff --git a/app/static/custom.js b/app/static/custom.js index 2c47448..3daeb17 100644 --- a/app/static/custom.js +++ b/app/static/custom.js @@ -3,7 +3,7 @@ let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0; let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
let clock = 0;
-window.onload += function setTimer(m, s) {
+function setTimer(m, s) {
let timer = document.getElementById("timer-display");
m = m < 10 ? ("0" + m) : m;
s = s < 10 ? ("0" + s) : s;
@@ -61,37 +61,31 @@ function startTimer(fresh) { clock = setInterval(refreshTimer, 1000);
}
-if (timerRunningFlag) startTimer(0); else resetTimer();
+window.onload = function () {
+ if (timerRunningFlag)
+ startTimer(0);
+ else resetTimer();
-document.getElementById("timer-start").addEventListener('click', ()=> {
- if (timerRunningFlag != 0) return;
- startTimer(1);
-});
-
-document.getElementById("timer-stop").addEventListener('click', ()=>{
- resetTimer();
-});
+ document.getElementById("timer-start").addEventListener('click', ()=> {
+ if (timerRunningFlag != 0) return;
+ startTimer(1);
+ });
-document.getElementById("timer-inc").addEventListener('click', ()=> {
- if (timerRunningFlag == 0) {
- minsPerRound += 1;
+ document.getElementById("timer-stop").addEventListener('click', ()=>{
resetTimer();
- }
-});
+ });
-document.getElementById("timer-dec").addEventListener('click', ()=> {
- if (timerRunningFlag == 0 && minsPerRound != 0) {
- minsPerRound -= 1;
- resetTimer();
- }
-});
+ document.getElementById("timer-inc").addEventListener('click', ()=> {
+ if (timerRunningFlag == 0) {
+ minsPerRound += 1;
+ resetTimer();
+ }
+ });
-const fileInput = document.querySelector("#file-js input[type=file]");
- if (fileInput !== null) {
- fileInput.onchange = () => {
- if (fileInput.files.length > 0) {
- const fileName = document.querySelector("#file-js .file-name");
- fileName.textContent = fileInput.files[0].name;
+ document.getElementById("timer-dec").addEventListener('click', ()=> {
+ if (timerRunningFlag == 0 && minsPerRound != 0) {
+ minsPerRound -= 1;
+ resetTimer();
}
- }
-};
\ No newline at end of file + });
+}
\ No newline at end of file diff --git a/app/templates/controls.j2 b/app/templates/controls.j2 index a8cba89..14e7520 100644 --- a/app/templates/controls.j2 +++ b/app/templates/controls.j2 @@ -37,10 +37,14 @@ hx-target="#games">RESET!</button> </div> <h3>Timer</h3> -<div role="group"> - <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button> - <input id="timer-display" type="text" style="text-align:center; " readonly></input> - <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button> - <button id="timer-start"><i class="fas fa-light fa-play"></i></button> - <button id="timer-stop"><i class="fas fa-light fa-stop"></i></button> +<div class="grid"> + <div role="group"> + <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button> + <input id="timer-display" type="text" style="text-align:center; " readonly></input> + <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button> + </div> +</div> +<div class="grid"> +<button id="timer-start"><i class="fas fa-light fa-play"></i></button> +<button id="timer-stop"><i class="fas fa-light fa-stop"></i></button> </div>
\ No newline at end of file diff --git a/app/templates/players.j2 b/app/templates/players.j2 index f10b0a9..4b9660e 100644 --- a/app/templates/players.j2 +++ b/app/templates/players.j2 @@ -18,30 +18,33 @@ {% endfor %} </div> <h3>Controls</h3> - <section class="section"> - <div class="column"> - <button class="button is-dark is-responsive" - hx-post="/reset_players">RESET!</button> - </div> - <div class="column"> - <form method="POST" enctype="multipart/form-data" hx-post="/update_players"> - <div id="file-js" class="file has-name is-fullwidth"> - <label class="file-label"> - <input class="file-input" type="file" name="players" /> - <span class="file-cta"> - <span class="file-icon"> - <i class="fas fa-upload"></i> - </span> - <span class="file-label"> Choose a file… </span> - </span> - <span class="file-name"> No file uploaded </span> - </label> - <button class="button is-dark is-responsive">UPDATE!</button> - </div> - </form> - </div> - <footer class="container">{{ footer() }}</footer> - </section> + <div class="grid"> + <button class="button is-dark is-responsive" + hx-post="/reset_players">RESET!</button> + </div> + <h3>Player Update</h3> + <div class="grid"> + <form method="POST" enctype="multipart/form-data" hx-post="/update_players"> + <div id="file-js" class="file has-name is-fullwidth"> + <label class="file-label"> + <input class="file-input" type="file" name="players" /> + </label> + <button class="button is-dark is-responsive">UPDATE!</button> + </div> + </form> + </div> + <footer class="container">{{ footer() }}</footer> + <script> + const fileInput = document.querySelector("#file-js input[type=file]"); + if (fileInput !== null) { + fileInput.onchange = () => { + if (fileInput.files.length > 0) { + const fileName = document.querySelector("#file-js .file-name"); + fileName.textContent = fileInput.files[0].name; + } + } + }; + </script> </main> </body> </html>
\ No newline at end of file |