aboutsummaryrefslogtreecommitdiff
path: root/src/match_up/templates
diff options
context:
space:
mode:
authorKaran Jayachandra <mail@karanjayachandra.com>2024-11-15 17:26:47 +0000
committerKaran Jayachandra <mail@karanjayachandra.com>2024-11-15 17:26:47 +0000
commit7b7f8cdef5f035ccdab714059c1a6c54b80c4ba3 (patch)
tree2d7ea5de37f2bda57be419b4aa37971afa09eab5 /src/match_up/templates
parentf68c54ae8f921c23851680b2501fac8bda1b4010 (diff)
parent7b8bbe6db3680af65c3701afbcd31ac1f61773af (diff)
Merge branch 'develop' into 'main'2.0
Database and javascript timer implemented See merge request KaranJayachandra/match_up!11
Diffstat (limited to 'src/match_up/templates')
-rw-r--r--src/match_up/templates/controls.j239
-rw-r--r--src/match_up/templates/games.j221
-rw-r--r--src/match_up/templates/index.j213
-rw-r--r--src/match_up/templates/macros.j299
-rw-r--r--src/match_up/templates/players.j231
5 files changed, 203 insertions, 0 deletions
diff --git a/src/match_up/templates/controls.j2 b/src/match_up/templates/controls.j2
new file mode 100644
index 0000000..24b42c6
--- /dev/null
+++ b/src/match_up/templates/controls.j2
@@ -0,0 +1,39 @@
+{% from "macros.j2" import court_button %}
+<div class="fixed-grid has-6-cols">
+ <div class="grid">
+ {% for key, value in courts.items() %}
+ {{ court_button(key, value) }}
+ {% endfor %}
+ </div>
+</div>
+<div class="columns">
+ <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']">Create</button>
+ </div>
+ <div class="column"></div>
+ <div class="column">
+ <button class="button is-dark is-responsive"
+ hx-post="/confirm"
+ hx-target="#games">Confirm</button>
+ </div>
+ <div class="column">
+ <button class="button is-dark is-responsive"
+ hx-post="/reset"
+ 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..46150f7
--- /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.first == 'RESERVED' %} class="is-danger" {% endif %}>
+ <th align="center" style="width: 8%;">{{ game.court }}</th>
+ <td style="width: 23%;"><strong>{{ game.team1.player1.first }}</strong>{{ " " + game.team1.player1.last }}</th>
+ <td style="width: 23%;"><strong>{{ game.team1.player2.first }}</strong>{{ " " + game.team1.player2.last }}</th>
+ <td style="width: 23%;"><strong>{{ game.team2.player1.first }}</strong>{{ " " + game.team2.player1.last }}</th>
+ <td style="width: 23%;"><strong>{{ game.team2.player2.first }}</strong>{{ " " + game.team2.player2.last }}</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..ce0d531
--- /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(url_for) }}
+ <body>
+ <section class="section">
+ {{ 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() }}
+ </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..2974744
--- /dev/null
+++ b/src/match_up/templates/macros.j2
@@ -0,0 +1,99 @@
+{% macro court_button(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_button(player) -%}
+<button class="button is-responsive {% if player.status %}is-success{% else %}is-danger {% endif %}"
+ hx-post="{{ "/player-toggle/" ~ player.id}}"
+ hx-swap="outerHTML"> {{ player.first + " " + player.last}} </button>
+{%- endmacro %}
+
+{% macro guest_control(level, value) -%}
+<div class="field center has-addons is-centered" id="guests_{{level}}">
+ <div class="control">
+ <button class="button is-responsive is-dark"
+ hx-post="/decrement_guest"
+ hx-swap="outerHTML"
+ hx-vals='{"level": "{{ level }}"}'
+ hx-target="#guests_{{ level }}"><span class="icon"><i class="fas fa-light fa-minus"></i></span></button>
+ </div>
+ <div class="control">
+ <input class="input is-responsive" type="text" style="text-align:center" value="{{ value }}" disabled>
+ </div>
+ <div class="control">
+ <button class="button is-responsive is-dark"
+ hx-post="/increment_guest"
+ hx-swap="outerHTML"
+ hx-vals='{"level": "{{ level }}"}'
+ hx-target="#guests_{{ level }}"><span class="icon"><i class="fas fa-light fa-plus"></i></span></button>
+ </div>
+</div>
+{%- endmacro %}
+
+{% macro header(url_for) -%}
+<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='notyf.min.css') }}">
+ <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
+ <script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
+ <script src="{{ url_for('static', filename='notyf.min.js') }}"></script>
+ <script src="{{ url_for('static', filename='fontawesome.js') }}"></script>
+ <script defer src="{{ url_for('static', filename='custom.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>, <a href="https://carlosroso.com/notyf/">Notyf</a> and <a href="https://bulma.io">Bulma</a></div>
+{%- endmacro %}
+
+{% macro navbar(url_for) -%}
+<nav class="level">
+ <p class="level-item has-text-centered">
+ <button class="button is-link" onclick="location.href = '/';">Games</button>
+ </p>
+ <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-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">
+ <p class="title">Match Up!</p>
+ </div>
+ <div class="level-item has-text-centered"></div>
+ <div class="level-item has-text-centered"></div>
+ <div class="level-right">
+ <div class="field has-addons has-addons-centered">
+ <div class="control"><button class="button is-dark" id="timer-dec">
+ <span class="icon"><i class="fas fa-light fa-minus"></i></span>
+ </button></div>
+ <p class="control has-icons-left has-icons-right">
+ <input class="input is-responsive" id="timer-display" type="text" style="text-align:center; " readonly>
+ <span class="icon is-small is-left">
+ <i class="fas fa-light fa-clock"></i>
+ </span>
+ </p>
+ <div class="control"><button class="button is-dark" id="timer-inc">
+ <span class="icon"><i class="fas fa-light fa-plus"></i></span>
+ </button></div>
+ <div class="control"><button class="button is-dark" id="timer-start">
+ <span class="icon"><i class="fas fa-light fa-play"></i></span>
+ </button></div>
+ <div class="control"><button class="button is-dark" id="timer-stop">
+ <span class="icon"><i class="fas fa-light fa-stop"></i></span>
+ </button></div>
+ </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..cd41925
--- /dev/null
+++ b/src/match_up/templates/players.j2
@@ -0,0 +1,31 @@
+{% from "macros.j2" import header, navbar, footer, player_button, guest_control %}
+<!doctype html>
+<html lang="en">
+ {{ header(url_for) }}
+ <body>
+ <section class="section">
+ {{ navbar(url_for) }}
+ <h4 class="title is-4">Players</h4>
+ <div class="fixed-grid has-4-cols">
+ <div class="grid">
+ {% for player in players %}
+ <div class="cell"> {{ player_button(player) }} </div>
+ {% endfor %}
+ </div>
+ <h4 class="title is-4">Guests</h4>
+ <div class="fixed-grid has-3-cols">
+ <div class="grid">
+ {% for level in guests %}
+ <div class="cell"> {{ guest_control(level, guests[level]) }} </div>
+ {% endfor %}
+ </div>
+ </section>
+ <section class="section">
+ <div class="column">
+ <button class="button is-dark is-responsive"
+ hx-post="/reset_players">RESET!</button>
+ </div>
+ {{ footer() }}
+ </section>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-15 06:51:59 +0000