aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorKaran Jayachandra <karan.jayachandra@nxp.com>2024-10-16 21:47:26 +0200
committerKaran Jayachandra <karan.jayachandra@nxp.com>2024-10-16 21:47:26 +0200
commit74480cbe2b335fd141cdf5f07bb08808c0d08692 (patch)
treeca9f5c55579acfd8394469e2644dc41dfd625988 /templates
parent83cb89862c7c330552c48d9b25f898388693c420 (diff)
Added all macros and also stored the js, css, png and ico files
Diffstat (limited to 'templates')
-rw-r--r--templates/court.j22
-rw-r--r--templates/courts.j28
-rw-r--r--templates/guests.j22
-rw-r--r--templates/index.j254
-rw-r--r--templates/macros.j211
-rw-r--r--templates/player.j27
-rw-r--r--templates/players.j25
7 files changed, 61 insertions, 28 deletions
diff --git a/templates/court.j2 b/templates/court.j2
index 859c942..d7aec86 100644
--- a/templates/court.j2
+++ b/templates/court.j2
@@ -1 +1 @@
-<button class={% if status %} "button is-success is-large" {% else %} "button is-danger is-large" {% endif %} hx-post="{{ "/court-toggle/" ~ id}}" hx-trigger="click" hx-swap="outerHTML">{{ id }}</button> \ No newline at end of file
+{% from "macros.j2" import court %}{{ court(key, value) }} \ No newline at end of file
diff --git a/templates/courts.j2 b/templates/courts.j2
index 2bc8a95..d650298 100644
--- a/templates/courts.j2
+++ b/templates/courts.j2
@@ -1,12 +1,8 @@
+{% from "macros.j2" import court %}
<div class="fixed-grid has-12-cols">
<div class="grid">
{% for key, value in courts.items() %}
- <div class="cell">
- <button class={% if value %} "button is-success is-large" {% else %} "button is-danger is-large" {% endif %}
- hx-post="{{ "/court-toggle/" ~ key}}"
- hx-trigger="click"
- hx-swap="outerHTML">{{ key }}</button>
- </div>
+ {{ court(key, value) }}
{% endfor %}
</div>
</div> \ No newline at end of file
diff --git a/templates/guests.j2 b/templates/guests.j2
index b5d251f..b84a2fd 100644
--- a/templates/guests.j2
+++ b/templates/guests.j2
@@ -1,3 +1,3 @@
<div class="control" id="guests">
- <input class="input is-large is-responsive" type="text" style="text-align:center" value={{ guests }} disabled>
+ <input class="input is-large is-responsive" type="text" style="text-align:center" value="{{ guests }} Guests" disabled>
</div> \ No newline at end of file
diff --git a/templates/index.j2 b/templates/index.j2
index 42fc43e..4ccdf92 100644
--- a/templates/index.j2
+++ b/templates/index.j2
@@ -3,10 +3,10 @@
<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>
+ <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') }}">
+ <script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
<style>
button, input, .select, .select select {
width: 100%;
@@ -17,13 +17,28 @@
td {
width: 20%;
}
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ }
</style>
</head>
<body>
- <section class="hero">
- <div class="hero-body">
- <p class="title">🏸The Smashing Fellows </p>
+ <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">Today's Games</p>
</div>
+ </nav>
</section>
<section class="section">
<p class="title">Games</p>
@@ -31,11 +46,19 @@
<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-trigger="click" hx-target="#guests">-</button>
+ <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-trigger="click" hx-target="#guests">+</button>
+ <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>
@@ -52,14 +75,21 @@
</div>
</div>
<div class="column">
- <button class="button is-dark is-large is-responsive" hx-post="/propose" hx-trigger="click" hx-target="#games" hx-include="[name='type']">Propose</button>
+ <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-trigger="click" hx-target="#games">Confirm</button>
+ <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-trigger="click" hx-target="#games">Clear</button>
+ <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/macros.j2 b/templates/macros.j2
new file mode 100644
index 0000000..b4767be
--- /dev/null
+++ b/templates/macros.j2
@@ -0,0 +1,11 @@
+{% 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 %} \ No newline at end of file
diff --git a/templates/player.j2 b/templates/player.j2
index 7e80285..68a1ea4 100644
--- a/templates/player.j2
+++ b/templates/player.j2
@@ -1,6 +1 @@
-<button class="button is-medium is-responsive {% if status %} is-success {% else %} is-danger {% endif %}"
- hx-post="{{ "/player-toggle/" ~ id}}"
- hx-trigger="click"
- hx-swap="outerHTML">
- {{ name }}
-</button> \ No newline at end of file
+{% from "macros.j2" import player %}{{ player(id, status, name) }} \ No newline at end of file
diff --git a/templates/players.j2 b/templates/players.j2
index 080c03a..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 id, player in players.items() %}
+{% for id, value in players.items() %}
<div class="cell">
- <button class="button is-medium is-responsive {% if player.status %} is-success {% else %} is-danger {% endif %}" hx-post="{{ "/player-toggle/" ~ id}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
+ {{ player(id, value.status, value.name) }}
</div>
{% endfor %}
</div> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-15 06:56:12 +0000