aboutsummaryrefslogtreecommitdiff
path: root/app/templates/players.j2
diff options
context:
space:
mode:
Diffstat (limited to 'app/templates/players.j2')
-rw-r--r--app/templates/players.j251
1 files changed, 27 insertions, 24 deletions
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