diff options
Diffstat (limited to 'app/templates')
| -rw-r--r-- | app/templates/controls.j2 | 16 | ||||
| -rw-r--r-- | app/templates/players.j2 | 51 |
2 files changed, 37 insertions, 30 deletions
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 |