From 156056e9c31468564fb53ca284996a5de41471fb Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Wed, 16 Oct 2024 23:28:46 +0200
Subject: Working version with all functionality

---
 templates/controls.j2 | 51 +++++++++++++++++++++++++++++++++
 templates/court.j2    |  1 -
 templates/games.j2    |  2 +-
 templates/index.j2    | 79 ++++++---------------------------------------------
 templates/player.j2   |  1 -
 templates/time.j2     |  3 ++
 6 files changed, 63 insertions(+), 74 deletions(-)
 create mode 100644 templates/controls.j2
 delete mode 100644 templates/court.j2
 delete mode 100644 templates/player.j2
 create mode 100644 templates/time.j2

(limited to 'templates')

diff --git a/templates/controls.j2 b/templates/controls.j2
new file mode 100644
index 0000000..1799e01
--- /dev/null
+++ b/templates/controls.j2
@@ -0,0 +1,51 @@
+<div class="columns">
+    <div class="column">
+        <div class="field has-addons">
+            <div class="control">
+                <button class="button is-large is-responsive is-dark" 
+                        style="text-align:center" 
+                        hx-post="/decrement" 
+                        hx-swap="outerHTML"
+                        hx-target="#guests">-</button>
+            </div>
+            <div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div>
+            <div class="control">
+                <button class="button is-large is-responsive is-dark" 
+                        style="text-align:center" 
+                        hx-post="/increment" 
+                        hx-swap="outerHTML"
+                        hx-target="#guests">+</button>
+            </div>
+        </div>
+    </div>
+    <div class="column">
+        <div class="select is-large is-responsive">
+            <select name="type">
+                <option>10 Levels</option>
+                <option>8 Levels</option>
+                <option>6 Levels</option>
+                <option>4 Levels</option>
+                <option>2 Levels</option>
+                <option>0 Levels</option>
+            </select>
+        </div>
+    </div>
+    <div class="column">
+        <button class="button is-dark is-large is-responsive" 
+                hx-post="/propose" 
+                hx-target="#games" 
+                hx-include="[name='type']">New Round</button>
+    </div>
+    <div class="column"></div>
+    <div class="column">
+        <button class="button is-dark is-large is-responsive" 
+                hx-post="/confirm" 
+                hx-target="#games">Start Round</button>
+    </div>
+    <div class="column">
+        <button class="button is-dark is-large is-responsive" 
+                hx-post="/clear" 
+                hx-target="#games">Reset</button>
+    </div>
+</div>
+<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="revealed"></div>
diff --git a/templates/court.j2 b/templates/court.j2
deleted file mode 100644
index d7aec86..0000000
--- a/templates/court.j2
+++ /dev/null
@@ -1 +0,0 @@
-{% from "macros.j2" import court %}{{ court(key, value) }}
\ No newline at end of file
diff --git a/templates/games.j2 b/templates/games.j2
index 50e1087..0285de1 100644
--- a/templates/games.j2
+++ b/templates/games.j2
@@ -9,7 +9,7 @@
 </thead>
 <tbody>
 {% for game in games %}
-    <tr>
+    <tr {% if game.team1.player1 == 'RESERVED' %} class="is-danger" {% endif %}>
         <th align="center">{{ game.court }}</th>
         <td>{{ game.team1.player1 }}</th>
         <td>{{ game.team1.player2 }}</th>
diff --git a/templates/index.j2 b/templates/index.j2
index 4ccdf92..fcea4e3 100644
--- a/templates/index.j2
+++ b/templates/index.j2
@@ -6,24 +6,8 @@
 		<title>Match Up!</title>
 		<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
 		<link rel="stylesheet" href="{{ url_for('static', filename='bulma.min.css') }}">
+		<link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
 		<script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
-		<style>
-			button, input, .select, .select select {
-			    width: 100%;
-			}
-            table {
-                font-size: 30px;
-            }
-			td {
-			    width: 20%;
-			}
-			img {
-				position: absolute; 
-				top: 50%; 
-				left: 50%; 
-				transform: translate(-50%,-50%);
-			}
-		</style>
 	</head>
 	<body>
 		<section class="section">
@@ -36,63 +20,16 @@
 				</div>
 			</div>
 			<div class="level-item">
-				<p class="title">Today's Games</p>
+				<p class="title">Match Up!</p>
+			</div>
+			<div class="level-right">
+				<div hx-get="/time" hx-swap="outerHTML" hx-trigger="revealed"></div>
 			</div>
 		</nav>
 		</section>
 		<section class="section">
-			<p class="title">Games</p>
-			<div class="columns">
-				<div class="column">
-					<div class="field has-addons">
-						<div class="control">
-							<button class="button is-large is-responsive is-dark" 
-									style="text-align:center" 
-									hx-post="/decrement" 
-									hx-swap="outerHTML"
-									hx-target="#guests">-</button>
-						</div>
-						<div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div>
-						<div class="control">
-							<button class="button is-large is-responsive is-dark" 
-									style="text-align:center" 
-									hx-post="/increment" 
-									hx-swap="outerHTML"
-									hx-target="#guests">+</button>
-						</div>
-					</div>
-				</div>
-				<div class="column">
-					<div class="select is-large is-responsive">
-						<select name="type">
-							<option>10 Levels</option>
-							<option>8 Levels</option>
-							<option>6 Levels</option>
-							<option>4 Levels</option>
-							<option>2 Levels</option>
-							<option>0 Levels</option>
-						</select>
-					</div>
-				</div>
-				<div class="column">
-					<button class="button is-dark is-large is-responsive" 
-							hx-post="/propose" 
-							hx-target="#games" 
-							hx-include="[name='type']">New Round</button>
-				</div>
-				<div class="column"></div>
-				<div class="column">
-					<button class="button is-dark is-large is-responsive" 
-							hx-post="/confirm" 
-							hx-target="#games">Start Round</button>
-				</div>
-				<div class="column">
-					<button class="button is-dark is-large is-responsive" 
-							hx-post="/clear" 
-							hx-target="#games">Reset</button>
-				</div>
-			</div>
-			<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="revealed"></div>
+    		<p class="title">Games</p>
+			{% include 'controls.j2' %}
 		</section>
 		<section class="section">
 			<h2 class="title">Courts</h2>
@@ -104,7 +41,7 @@
 		</section>
 		<footer class="footer">
 			<div class="content has-text-centered">
-				Made by <a href="https://karanjayachandra.com/">K. Jayachandra</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a> and <a href="https://bulma.io">Bulma</a>
+				Made by <a href="https://karanjayachandra.com/">Karan</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a> and <a href="https://bulma.io">Bulma</a>
 			</div>
 		</footer>
 	</body>
diff --git a/templates/player.j2 b/templates/player.j2
deleted file mode 100644
index 68a1ea4..0000000
--- a/templates/player.j2
+++ /dev/null
@@ -1 +0,0 @@
-{% from "macros.j2" import player %}{{ player(id, status, name) }}
\ No newline at end of file
diff --git a/templates/time.j2 b/templates/time.j2
new file mode 100644
index 0000000..d006fc4
--- /dev/null
+++ b/templates/time.j2
@@ -0,0 +1,3 @@
+<div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s">
+    <p class="title">Timer: {{mins}}:{{secs}}</p>
+</div>
\ No newline at end of file
-- 
cgit v1.3.1