From 60a489cfb3fb7a12a06212c2c7ed3c05cd0757b5 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Fri, 25 Oct 2024 18:03:18 +0200
Subject: Moved the files into a folder structure

---
 src/match_up/templates/controls.j2 | 56 +++++++++++++++++++++++++++++++
 src/match_up/templates/games.j2    | 21 ++++++++++++
 src/match_up/templates/index.j2    | 13 ++++++++
 src/match_up/templates/macros.j2   | 67 ++++++++++++++++++++++++++++++++++++++
 src/match_up/templates/players.j2  | 17 ++++++++++
 5 files changed, 174 insertions(+)
 create mode 100644 src/match_up/templates/controls.j2
 create mode 100644 src/match_up/templates/games.j2
 create mode 100644 src/match_up/templates/index.j2
 create mode 100644 src/match_up/templates/macros.j2
 create mode 100644 src/match_up/templates/players.j2

(limited to 'src/match_up/templates')

diff --git a/src/match_up/templates/controls.j2 b/src/match_up/templates/controls.j2
new file mode 100644
index 0000000..6ba724a
--- /dev/null
+++ b/src/match_up/templates/controls.j2
@@ -0,0 +1,56 @@
+{% from "macros.j2" import court %}
+<div class="fixed-grid has-6-cols">
+    <div class="grid">
+    {% for key, value in courts.items() %}
+        {{ court(key, value) }}
+    {% endfor %}
+    </div>
+</div>
+<div class="columns">
+    <div class="column">
+        <div class="field has-addons">
+            <div class="control">
+                <button class="button is-responsive is-dark" 
+                        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-responsive is-dark" 
+                        hx-post="/increment" 
+                        hx-swap="outerHTML"
+                        hx-target="#guests">+</button>
+            </div>
+        </div>
+    </div>
+    <div class="column">
+        <div class="select 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-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-responsive" 
+                hx-post="/confirm" 
+                hx-target="#games">Start Round</button>
+    </div>
+    <div class="column">
+        <button class="button is-dark is-responsive" 
+                hx-post="/clear" 
+                hx-target="#games">Reset</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/match_up/templates/games.j2 b/src/match_up/templates/games.j2
new file mode 100644
index 0000000..d5afef1
--- /dev/null
+++ b/src/match_up/templates/games.j2
@@ -0,0 +1,21 @@
+<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="games">
+<thead>
+    <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 {% if game.team1.player1 == 'RESERVED' %} class="is-danger" {% endif %}>
+        <th align="center" style="width: 8%;">{{ game.court }}</th>
+        <td style="width: 23%;">{{ game.team1.player1 }}</th>
+        <td style="width: 23%;">{{ game.team1.player2 }}</th>
+        <td style="width: 23%;">{{ game.team2.player1 }}</th>
+        <td style="width: 23%;">{{ game.team2.player2 }}</th>
+    </tr>
+{% endfor %}
+</tbody>
+</table>
\ No newline at end of file
diff --git a/src/match_up/templates/index.j2 b/src/match_up/templates/index.j2
new file mode 100644
index 0000000..832dbfb
--- /dev/null
+++ b/src/match_up/templates/index.j2
@@ -0,0 +1,13 @@
+{% from "macros.j2" import header, footer, navbar %}
+<!doctype html>
+<html lang="en">
+	{{ header() }}
+	<body>
+		<section class="section">
+			{{ navbar() }}
+			<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div>
+			<div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div>
+			{{ footer() }}
+		</section>
+	</body>
+</html>
diff --git a/src/match_up/templates/macros.j2 b/src/match_up/templates/macros.j2
new file mode 100644
index 0000000..8d05bb0
--- /dev/null
+++ b/src/match_up/templates/macros.j2
@@ -0,0 +1,67 @@
+{% macro court(id, status) -%}
+<button class= "button is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" 
+        hx-post="{{ "/court-toggle/" ~ id}}" 
+        hx-swap="outerHTML"> Court {{ id }}</button>
+{%- endmacro %}
+
+{% macro player(id, status, name) -%}
+<button class="button 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-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">⏲️ {{mins}}:{{secs}}</p>
+</div>
+{%- endmacro %}
+
+{% macro header() -%}
+<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>
+{%- endmacro %}
+
+{% macro 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>
+{%- endmacro %}
+
+{% macro navbar() -%}
+<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 has-text-centered"></div>
+    <p class="level-item has-text-centered">
+        <button class="button is-link" onclick="location.href = '/';">Games</button>
+    </p>
+    <div class="level-item has-text-centered"></div>
+    <div class="level-item has-text-centered">
+        <p class="title">Match Up!</p>
+    </div>
+    <div class="level-item has-text-centered"></div>
+    <p class="level-item has-text-centered">
+        <button class="button is-link" onclick="location.href = '/players';">Players</button>
+    </p>
+    <div class="level-item has-text-centered"></div>
+    <div class="level-right">
+        <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div>
+    </div>
+</nav>
+{%- endmacro %}
\ No newline at end of file
diff --git a/src/match_up/templates/players.j2 b/src/match_up/templates/players.j2
new file mode 100644
index 0000000..ae6afe0
--- /dev/null
+++ b/src/match_up/templates/players.j2
@@ -0,0 +1,17 @@
+{% from "macros.j2" import header, navbar, footer, player %}
+<!doctype html>
+<html lang="en">
+	{{ header() }}
+	<body>
+		<section class="section">
+			{{ navbar() }}
+			<div class="fixed-grid has-4-cols">
+            <div class="grid">
+            {% for id, value in players.items() %}
+                <div class="cell"> {{ player(id, value.status, value.name) }} </div>
+            {% endfor %}
+            </div>
+			{{ footer() }}
+		</section>
+	</body>
+</html>
\ No newline at end of file
-- 
cgit v1.3.1


From 5b01707a04c362ced66428bef8e0234176d212d9 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Fri, 8 Nov 2024 17:30:19 +0100
Subject: Added the changes to the templates to pass the url_for function

---
 pyproject.toml                    |  4 ++--
 src/match_up/__init__.py          | 20 +++++++++++++-------
 src/match_up/templates/index.j2   |  4 ++--
 src/match_up/templates/macros.j2  |  4 ++--
 src/match_up/templates/players.j2 |  4 ++--
 5 files changed, 21 insertions(+), 15 deletions(-)

(limited to 'src/match_up/templates')

diff --git a/pyproject.toml b/pyproject.toml
index 9ef21d8..9e8a793 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -26,8 +26,8 @@ Issues = "https://gitlab.com/KaranJayachandra/match_up/-/issues"
 where = ["src"]
 
 [tool.setuptools.package-data]
-"*" = ["*.txt"]
-mypkg1 = ["data1.rst"]
+"templates" = ["*.j2"]
+"static" = ["*.css", "*.js", "*.png", "*.ico"]
 
 [project.scripts]
 match_up = "match_up:main"
\ No newline at end of file
diff --git a/src/match_up/__init__.py b/src/match_up/__init__.py
index badf3f0..3a78b8d 100644
--- a/src/match_up/__init__.py
+++ b/src/match_up/__init__.py
@@ -1,19 +1,24 @@
 from dotenv import load_dotenv
+from importlib.resources import path
 from match_up.controller import RoundGenerator
 from match_up.model import CourtList, PlayerList
-from jinja2 import FileSystemLoader, Environment
-from flask import Flask, render_template, request
-
+from jinja2 import FileSystemLoader, Environment, PackageLoader
+from flask import Flask, render_template, request, url_for
 
 load_dotenv()
-app = Flask("Match Up! Backend")
+with path("match_up", "static") as p:
+    static_folder = p
+with path("match_up", "templates") as p:
+    template_folder = p
+app = Flask("Match Up! Backend", static_folder=static_folder, template_folder=template_folder)
 rg = RoundGenerator(courts=CourtList(), players=PlayerList())
-re = Environment(loader=FileSystemLoader("templates"))
+re = Environment(loader=PackageLoader("match_up"))
 
 
 @app.route("/", methods=["GET"])
 def home():
-    return render_template("index.j2")
+    template = re.get_template("index.j2").render(url_for=url_for)
+    return template
 
 
 @app.route("/time", methods=["GET"])
@@ -74,7 +79,8 @@ def toggle_player(player_request):
 
 @app.route("/players", methods=["GET"])
 def get_list_of_players():
-    return render_template("players.j2", players=rg.players.get_players())
+    template = re.get_template("players.j2").render(players=rg.players.get_players(), url_for=url_for)
+    return template
 
 
 @app.route("/court-toggle/<court_number>", methods=["POST"])
diff --git a/src/match_up/templates/index.j2 b/src/match_up/templates/index.j2
index 832dbfb..ce0d531 100644
--- a/src/match_up/templates/index.j2
+++ b/src/match_up/templates/index.j2
@@ -1,10 +1,10 @@
 {% from "macros.j2" import header, footer, navbar %}
 <!doctype html>
 <html lang="en">
-	{{ header() }}
+	{{ header(url_for) }}
 	<body>
 		<section class="section">
-			{{ navbar() }}
+			{{ navbar(url_for) }}
 			<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div>
 			<div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div>
 			{{ footer() }}
diff --git a/src/match_up/templates/macros.j2 b/src/match_up/templates/macros.j2
index 8d05bb0..dedbf48 100644
--- a/src/match_up/templates/macros.j2
+++ b/src/match_up/templates/macros.j2
@@ -22,7 +22,7 @@
 </div>
 {%- endmacro %}
 
-{% macro header() -%}
+{% macro header(url_for) -%}
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -38,7 +38,7 @@
 <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>
 {%- endmacro %}
 
-{% macro navbar() -%}
+{% macro navbar(url_for) -%}
 <nav class="level">
     <div class="level-left">
         <div class="level-item">
diff --git a/src/match_up/templates/players.j2 b/src/match_up/templates/players.j2
index ae6afe0..0d1f96c 100644
--- a/src/match_up/templates/players.j2
+++ b/src/match_up/templates/players.j2
@@ -1,10 +1,10 @@
 {% from "macros.j2" import header, navbar, footer, player %}
 <!doctype html>
 <html lang="en">
-	{{ header() }}
+	{{ header(url_for) }}
 	<body>
 		<section class="section">
-			{{ navbar() }}
+			{{ navbar(url_for) }}
 			<div class="fixed-grid has-4-cols">
             <div class="grid">
             {% for id, value in players.items() %}
-- 
cgit v1.3.1