aboutsummaryrefslogtreecommitdiff
path: root/app/templates
diff options
context:
space:
mode:
Diffstat (limited to 'app/templates')
-rw-r--r--app/templates/controls.j283
-rw-r--r--app/templates/games.j242
-rw-r--r--app/templates/index.j211
-rw-r--r--app/templates/login.html8
-rw-r--r--app/templates/macros.j278
-rw-r--r--app/templates/players.j234
6 files changed, 102 insertions, 154 deletions
diff --git a/app/templates/controls.j2 b/app/templates/controls.j2
index 0acf5a6..97351bf 100644
--- a/app/templates/controls.j2
+++ b/app/templates/controls.j2
@@ -1,47 +1,48 @@
{% from "macros.j2" import court_button %}
-<div class="fixed-grid has-6-cols">
- <div class="grid">
- {% for court in courts %}
- {{ court_button(court) }}
- {% endfor %}
+<h3>Timer</h3>
+<div class="timer">
+ <div role="group" style="height: 100%">
+ <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
+ <input id="timer-display" type="text" style="text-align:center; height: 100%" readonly></input>
+ <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
</div>
+ <button id="timer-start"><i class="fas fa-light fa-play"></i></button>
+ <button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
</div>
-<div class="columns">
- <div class="column">
- <div class="select is-responsive">
- <select name="levels">
- <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">
- <div class="select is-responsive">
- <select name="team">
- <option>Random</option>
- <option>Teams</option>
- </select>
- </div>
- </div>
- <div class="column">
- <button class="button is-dark is-responsive"
- hx-post="/propose"
- hx-target="#games"
- hx-include="[name='levels'], [name='team']">Generate</button>
- </div>
- <div class="column"></div>
- <div class="column">
- <button class="button is-dark is-responsive"
- hx-post="/confirm"
- hx-target="#games">Confirm</button>
+<h3>Generation</h3>
+<div class="grid">
+ <button class="button is-dark is-responsive"
+ hx-post="/propose"
+ hx-target="#games"
+ hx-include="[name='levels'], [name='team']">Generate</button>
+ <button class="button is-dark is-responsive"
+ hx-post="/confirm"
+ hx-target="#games">Confirm</button>
+ <button class="button is-dark is-responsive"
+ hx-post="/reset"
+ hx-target="#games">RESET!</button>
+</div>
+<div class="grid">
+ <div class="select is-responsive">
+ <select name="levels">
+ <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 class="column">
- <button class="button is-dark is-responsive"
- hx-post="/reset"
- hx-target="#games">RESET!</button>
+ <div class="select is-responsive">
+ <select name="team">
+ <option>Random</option>
+ <option>Teams</option>
+ </select>
</div>
+</div>
+<h3>Courts</h3>
+<div class="parent">
+{% for court in courts %}
+ {{ court_button(court) }}
+{% endfor %}
</div> \ No newline at end of file
diff --git a/app/templates/games.j2 b/app/templates/games.j2
index dff1e0f..00ffb71 100644
--- a/app/templates/games.j2
+++ b/app/templates/games.j2
@@ -1,21 +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.team_1[0].first_name == 'RESERVED' %} class="is-danger" {% endif %}>
- <th align="center" style="width: 8%;">{{ game.court.id }}</th>
- <td style="width: 23%;"><strong>{{ game.team_1[0].first_name }}</strong>{{ " " + game.team_1[0].last_name }}</th>
- <td style="width: 23%;"><strong>{{ game.team_1[1].first_name }}</strong>{{ " " + game.team_1[1].last_name }}</th>
- <td style="width: 23%;"><strong>{{ game.team_2[0].first_name }}</strong>{{ " " + game.team_2[0].last_name }}</th>
- <td style="width: 23%;"><strong>{{ game.team_2[1].first_name }}</strong>{{ " " + game.team_2[1].last_name }}</th>
- </tr>
-{% endfor %}
-</tbody>
-</table> \ No newline at end of file
+<div id="games" class="overflow-auto">
+ <h3> {{ title }} </h3>
+ <table>
+ <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.team_1[0].first_name == 'RESERVED' %} data-theme="dark" {% endif %}>
+ <td align="center" style="width: 8%;">{{ game.court.id }}</th>
+ <td style="width: 23%;"><strong>{{ game.team_1[0].first_name }}</strong>{{ " " + game.team_1[0].last_name }}</th>
+ <td style="width: 23%;"><strong>{{ game.team_1[1].first_name }}</strong>{{ " " + game.team_1[1].last_name }}</th>
+ <td style="width: 23%;"><strong>{{ game.team_2[0].first_name }}</strong>{{ " " + game.team_2[0].last_name }}</th>
+ <td style="width: 23%;"><strong>{{ game.team_2[1].first_name }}</strong>{{ " " + game.team_2[1].last_name }}</th>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+<div> \ No newline at end of file
diff --git a/app/templates/index.j2 b/app/templates/index.j2
index ce0d531..af6ca4c 100644
--- a/app/templates/index.j2
+++ b/app/templates/index.j2
@@ -3,11 +3,14 @@
<html lang="en">
{{ header(url_for) }}
<body>
- <section class="section">
- {{ navbar(url_for) }}
+ <header class="container">{{ navbar(url_for, login_status) }}</header>
+ <main class="container">
+ <h2>Games</h2>
<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div>
+ <h2>Controls</h2>
<div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div>
- {{ footer() }}
- </section>
+ </main>
+ <footer class="container">{{ footer() }}</footer>
+ <script src="{{ url_for('static', filename='timer.js') }}"></script>
</body>
</html>
diff --git a/app/templates/login.html b/app/templates/login.html
index a42f2c5..e3109b6 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -3,8 +3,8 @@
<html lang="en">
{{ header(url_for) }}
<body>
- <section class="section">
- {{ navbar(url_for) }}
+ <header class="container">{{ navbar(url_for) }}</header>
+ <main class="container">
<form action="{{ url_for('simplelogin.login') }}" method="post">
<div class="form-group">
{{ form.csrf_token }}
@@ -16,8 +16,8 @@
</form>
<input class="button is-dark" type="submit" value="Login">
</form>
- {{ footer() }}
- </section>
+ </main>
+ <footer class="container">{{ footer() }}</footer>
</body>
</html> \ No newline at end of file
diff --git a/app/templates/macros.j2 b/app/templates/macros.j2
index e08bfe1..e82b910 100644
--- a/app/templates/macros.j2
+++ b/app/templates/macros.j2
@@ -1,93 +1,45 @@
{% macro court_button(court) -%}
-<button class= "button is-responsive {% if court.status %}is-success{% else %}is-danger{% endif %}"
+<button class= "{% if court.status %}{% else %}contrast{% endif %}"
hx-post="{{ "/court-toggle/" ~ court.id}}"
hx-swap="outerHTML"> Court {{ court.id }}</button>
{%- endmacro %}
{% macro player_button(player) -%}
-<button class="button is-responsive {% if player.status %}is-success{% else %}is-danger {% endif %}"
+<button class="{% if player.status %}{% else %}contrast{% endif %}"
hx-post="{{ "/player-toggle/" ~ player.id}}"
hx-swap="outerHTML"> {{ player.first_name + " " + player.last_name}} </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="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/fontawesome.min.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>
+<div class="container">Made by <a href="https://karanjayachandra.com/">Karan</a> with <i class="fas fa-heart"></i></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>
- <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-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>
+
+{% macro navbar(url_for, login_status) -%}
+<nav>
+ <ul>
+ <li><strong>Match Up!</strong></li>
+ </ul>
+ <ul>
+ <li><a href="/">Games</a></li>
+ <li><a href="/players">Players</a></li>
+ {% if login_status %}<li><a href="/logout/">Logout</a></li>{% else %}<li><a href="/login/">Login</a></li>{% endif %}
+ </ul>
</nav>
{%- endmacro %} \ No newline at end of file
diff --git a/app/templates/players.j2 b/app/templates/players.j2
index 16e3878..bacb215 100644
--- a/app/templates/players.j2
+++ b/app/templates/players.j2
@@ -3,46 +3,38 @@
<html lang="en">
{{ header(url_for) }}
<body>
- <section class="section">
- {{ navbar(url_for) }}
- <h4 class="title is-4">Members</h4>
- <div class="fixed-grid has-4-cols">
- <div class="grid">
+ <header class="container">{{ navbar(url_for, login_status) }}</header>
+ <main class="container">
+ <h3 >Members</h3>
+ <div class="parent">
{% for regular in regulars %}
<div class="cell"> {{ player_button(regular) }} </div>
{% endfor %}
</div>
- <h4 class="title is-4">Guests</h4>
- <div class="fixed-grid has-4-cols">
- <div class="grid">
+ <h3>Guests</h3>
+ <div class="parent">
{% for guest in guests %}
<div class="cell"> {{ player_button(guest) }} </div>
{% endfor %}
</div>
- </section>
- <section class="section">
- <div class="column">
+ <h3>Controls</h3>
+ <div class="grid">
<button class="button is-dark is-responsive"
hx-post="/reset_players">RESET!</button>
</div>
- <div class="column">
+ <h3>Player Update</h3>
+ <div class="grid">
<form method="POST" enctype="multipart/form-data" hx-post="/update_players">
<div id="file-js" class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="players" />
- <span class="file-cta">
- <span class="file-icon">
- <i class="fas fa-upload"></i>
- </span>
- <span class="file-label"> Choose a file… </span>
- </span>
- <span class="file-name"> No file uploaded </span>
</label>
<button class="button is-dark is-responsive">UPDATE!</button>
</div>
</form>
</div>
- {{ footer() }}
- </section>
+ <footer class="container">{{ footer() }}</footer>
+ <script src="{{ url_for('static', filename='file.js') }}"></script>
+ </main>
</body>
</html> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-15 06:17:29 +0000