Merge branch 'feature/db' into 'develop'

Full Functionality

See merge request KaranJayachandra/match_up!2

9 files changed, 138 insertions, 70 deletions

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 425e7d5..0000000
--- a/templates/court.j2
+++ /dev/null
@@ -1 +0,0 @@
-<button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
\ No newline at end of file
diff --git a/templates/courts.j2 b/templates/courts.j2
index 64fd44a..d650298 100644
--- a/templates/courts.j2
+++ b/templates/courts.j2
@@ -1,9 +1,8 @@
+{% from "macros.j2" import court %}
 <div class="fixed-grid has-12-cols">
 <div class="grid">
-{% for court in courts %}
-    <div class="cell">
-        <button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
-    </div>
+{% for key, value in courts.items() %}
+    {{ court(key, value) }}
 {% endfor %}
 </div>
 </div>
\ No newline at end of file
diff --git a/templates/games.j2 b/templates/games.j2
index b070b16..0285de1 100644
--- a/templates/games.j2
+++ b/templates/games.j2
@@ -1,17 +1,20 @@
 <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="games">
 <thead>
-    <th> Court </th>
-    <th colspan="2"> Team 1 </th>
-    <th colspan="2"> Team 2 </th>
+    <th colspan="5" align="center"> {{ title }} </th>
+</thead>
+<thead>
+    <th align="center"> Court </th>
+    <th colspan="2" align="center"> Team 1 </th>
+    <th colspan="2" align="center"> Team 2 </th>
 </thead>
 <tbody>
 {% for game in games %}
-    <tr>
-        <th>{{ game.court.number }}</th>
-        <td>{{ game.team1.player1.name }}</th>
-        <td>{{ game.team1.player2.name }}</th>
-        <td>{{ game.team2.player1.name }}</th>
-        <td>{{ game.team2.player2.name }}</th>
+    <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>
+        <td>{{ game.team2.player1 }}</th>
+        <td>{{ game.team2.player2 }}</th>
     </tr>
 {% endfor %}
 </tbody>
diff --git a/templates/index.j2 b/templates/index.j2
index cfd32b5..fcea4e3 100644
--- a/templates/index.j2
+++ b/templates/index.j2
@@ -1,52 +1,48 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>🏸Match Up!</title>
-        <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
-        <script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js"></script>
-        <style>
-            button {
-                width: 100%;
-            }
-            td {
-                text-align:center;
-                width:20%;
-            }
-        </style>
-    </head>
-    <body>
-        <section class="hero">
-            <div class="hero-body">
-                <p class="title">🏸The Smashing Fellows </p>
-            </div>
-        </section>
-        <section class="section">
-            <p class="title">Games</p>
-            <div class="columns">
-                <div class="column"></div>
-                <div class="column"><button class="button is-success" hx-post="/random-games" hx-trigger="click" hx-target="#games">Random Games</button></div>
-                <div class="column"><button class="button is-success" hx-post="/skilled-games" hx-trigger="click" hx-target="#games">Skilled Games</button></div>
-                <div class="column"></div>
-                <div class="column"><button class="button is-danger" hx-post="/clear-games" hx-trigger="click" hx-target="#games">Clear</button></div>
-                <div class="column"></div>
-            </div>
-            <div hx-get="/game-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </section>
-        <section class="section">
-            <h2 class="title">Courts</h2>
-            <div hx-get="/court-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </section>
-        <section class="section">
-            <h2 class="title">Players</h2>
-            <div hx-get="/player-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </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>
-            </div>
-        </footer>
-    </body>
-</html>
\ No newline at end of file
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<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>
+	</head>
+	<body>
+		<section class="section">
+		<nav class="level">
+			<div class="level-left">
+				<div class="level-item">
+					<figure class="image container is-128x128">
+						<img src="{{ url_for('static', filename='logo.png') }}"/>
+					</figure>
+				</div>
+			</div>
+			<div class="level-item">
+				<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>
+			{% include 'controls.j2' %}
+		</section>
+		<section class="section">
+			<h2 class="title">Courts</h2>
+			<div hx-get="/courts" hx-swap="outerHTML" hx-trigger="revealed"></div>
+		</section>
+		<section class="section">
+			<h2 class="title">Players</h2>
+			<div hx-get="/players" hx-swap="outerHTML" hx-trigger="revealed"></div>
+		</section>
+		<footer class="footer">
+			<div class="content has-text-centered">
+				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>
+</html>
diff --git a/templates/macro.j2 b/templates/macro.j2
deleted file mode 100644
index e0089bc..0000000
--- a/templates/macro.j2
+++ /dev/null
@@ -1,3 +0,0 @@
-{% 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/macros.j2 b/templates/macros.j2
new file mode 100644
index 0000000..7117d11
--- /dev/null
+++ b/templates/macros.j2
@@ -0,0 +1,23 @@
+{% macro court(id, status) -%}
+<button class= "button is-large is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" 
+        hx-post="{{ "/court-toggle/" ~ id}}" 
+        hx-swap="outerHTML">{{ id }}</button>
+{%- endmacro %}
+
+{% macro player(id, status, name) -%}
+<button class="button is-medium is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" 
+        hx-post="{{ "/player-toggle/" ~ id}}"
+        hx-swap="outerHTML"> {{ name }} </button>
+{%- endmacro %}
+
+{% macro guests(count) -%}
+<div class="control" id="guests">
+    <input class="input is-large is-responsive" type="text" style="text-align:center" value="{{ count }} Guests" disabled>
+</div>
+{%- endmacro %}
+
+{% macro timer(mins, secs) -%}
+<div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s">
+    <p class="title">Timer: {{mins}}:{{secs}}</p>
+</div>
+{%- endmacro %}
\ No newline at end of file
diff --git a/templates/player.j2 b/templates/player.j2
deleted file mode 100644
index 5b70df6..0000000
--- a/templates/player.j2
+++ /dev/null
@@ -1 +0,0 @@
-<button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% 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
index 6179dbb..4eedc54 100644
--- a/templates/players.j2
+++ b/templates/players.j2
@@ -1,8 +1,9 @@
+{% from "macros.j2" import player %}
 <div class="fixed-grid has-5-cols">
 <div class="grid">
-{% for player in players %}
+{% for id, value in players.items() %}
     <div class="cell">
-        <button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
+    {{ player(id, value.status, value.name) }}
     </div>
 {% endfor %}
 </div>
\ No newline at end of file