summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorKaran Jayachandra <karan.jayachandra@nxp.com>2024-04-12 10:29:29 +0200
committerKaran Jayachandra <karan.jayachandra@nxp.com>2024-04-12 10:29:29 +0200
commitc58caf5b8b8801ba826b0ff6b241d7f25a333bc8 (patch)
tree45b22248fd4fbcf23046ef30707da8ff1f65c880 /templates
parente6939bb6421862a12048449094f2c55e6e9e401b (diff)
Added a more cleaner application
Diffstat (limited to 'templates')
-rw-r--r--templates/index.html51
-rw-r--r--templates/index.j245
-rw-r--r--templates/macro.j23
-rw-r--r--templates/player.j21
-rw-r--r--templates/players.j27
5 files changed, 56 insertions, 51 deletions
diff --git a/templates/index.html b/templates/index.html
deleted file mode 100644
index db4a991..0000000
--- a/templates/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!doctype html>
-<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
-
-<html>
- <head>
- <title>Match Up!</title>
- </head>
- <body>
- <h1>Match Up!</h1>
- <div class="row">
- <div style=" float: left; width: 60%">
- <table>
- <thead>
- <tr>
- <th> Court </th>
- <th> Team 1 </th>
- <th> Team 2 </th>
- </tr>
- </thead>
- <tbody>
- {% for game in game_list %}
- <tr>
- <td width="10%"> {{game.court_number}} </td>
- <td width="40%"> {{game.team_1.player_1.get_name()}} <br> {{game.team_1.player_2.get_name()}} </td>
- <td width="40%"> {{game.team_2.player_1.get_name()}} <br> {{game.team_2.player_2.get_name()}} </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
- <div style=" float: left; width: 30%">
- <table>
- <thead>
- <tr>
- <th> Player </th>
- </tr>
- </thead>
- <tbody>
- {% for player in player_list %}
- <tr>
- <td style={% if player.status %} "color : green" {% else %} "color : red" {% endif %}>
- {{ player.get_name() }}
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
- </div>
- </body>
-</html> \ No newline at end of file
diff --git a/templates/index.j2 b/templates/index.j2
new file mode 100644
index 0000000..82c3c80
--- /dev/null
+++ b/templates/index.j2
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>🏸Match Up!</title>
+ <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+ <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+ <style>
+ button {
+ height: 50px;
+ width: 200px;
+ }
+ .active {
+ background-color: #27ae60;
+ }
+ .dormant {
+ background-color: #a93226;
+ }
+ .grid-container {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ row-gap: 20px;
+ column-gap: 20px;
+ }
+ .tagline {
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>🏸Match Up!</h1>
+ <p class="tagline"> Come play with the <a href="https://www.bctsf.nl/">Smashing Fellows</a>! </p>
+ </header>
+ <hr>
+ <div class="players">
+ <h2>Players</h2>
+ <div hx-get="/player-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
+ </div>
+ <footer>
+ Made by <a href="https://karanjayachandra.com/">Karan Jayachandra</a> using <a href="https://htmx.org/">HTMX</a> and <a href="https://flask.palletsprojects.com">Flask</a>
+ </footer>
+ </body>
+</html> \ No newline at end of file
diff --git a/templates/macro.j2 b/templates/macro.j2
new file mode 100644
index 0000000..e0089bc
--- /dev/null
+++ b/templates/macro.j2
@@ -0,0 +1,3 @@
+{% macro player_button(player) %}
+<button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
+{%- endmacro %} \ No newline at end of file
diff --git a/templates/player.j2 b/templates/player.j2
new file mode 100644
index 0000000..1176d65
--- /dev/null
+++ b/templates/player.j2
@@ -0,0 +1 @@
+<button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button> \ No newline at end of file
diff --git a/templates/players.j2 b/templates/players.j2
new file mode 100644
index 0000000..3005fa4
--- /dev/null
+++ b/templates/players.j2
@@ -0,0 +1,7 @@
+<div class="grid-container">
+{% for player in players %}
+ <div class="grid-item">
+ <button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
+ </div>
+{% endfor %}
+</div> \ No newline at end of file