christoph/flask-formula10
1
Fork 0
Code Issues 14 Actions Packages Activity

Add tooltips for points/standing + guess colorization
All checks were successful
Build Formula10 Docker Image / build-docker (push) Successful in 37s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2024-02-20 00:28:23 +01:00
parent 455637ca46
commit 861f4484b2
4 changed files with 66 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
formula10.py
View File

@ -14,14 +14,11 @@ db.init_app(app)
# TODO
# General
# - When showing correct guesses in green, show semi-correct ones in a weaker tone (probably need to prepare those here,
# instead of in the template)
# - Show cards of previous race results, like with season guesses?
# - A lot of validation (esp. in the model), each input should be checked...
# - Show cards of previous race results, like with season guesses?
# - Make the season card grid left-aligned? So e.g. 2 cards are not spread over the whole screen with large gaps?
# - Choose "place to guess" late before the race?
# - Timer until season picks lock + next race timer
# - A lot of validation (esp. in the model), each input should be checked...
# Statistics page
# - Auto calculate points

7
static/script/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

46
templates/base.jinja
View File

@ -96,16 +96,39 @@
{% if active_page == page %}</u>{% endif %}</a>
{% endmacro %}
{% macro pxx_guess_colorization(driver_abbr='', result=none) %}
{% if driver_abbr == result.pxx(0).abbr %}text-success fw-bold{% endif %}
{% if driver_abbr == result.pxx(1).abbr %}text-warning fw-bold{% endif %}
{% if driver_abbr == result.pxx(2).abbr %}text-danger fw-bold{% endif %}
{% if driver_abbr == result.pxx(3).abbr %}fw-bold{% endif %}
{% if driver_abbr == result.pxx(-1).abbr %}text-warning fw-bold{% endif %}
{% if driver_abbr == result.pxx(-2).abbr %}text-danger fw-bold{% endif %}
{% if driver_abbr == result.pxx(-3).abbr %}fw-bold{% endif %}
{#@formatter:off#}
{% macro pxx_guess_colorization(driver_abbr='', result=none) -%}
{% if driver_abbr == result.pxx(-3).abbr %}fw-bold
{% elif driver_abbr == result.pxx(-2).abbr %}text-danger fw-bold
{% elif driver_abbr == result.pxx(-1).abbr %}text-warning fw-bold
{% elif driver_abbr == result.pxx(0).abbr %}text-success fw-bold
{% elif driver_abbr == result.pxx(1).abbr %}text-warning fw-bold
{% elif driver_abbr == result.pxx(2).abbr %}text-danger fw-bold
{% elif driver_abbr == result.pxx(3).abbr %}fw-bold{% endif %}
{% endmacro %}
{% macro pxx_points_tooltip_text(driver_abbr='', result=none) -%}
{% if driver_abbr == result.pxx(-3).abbr %}1 Point
{% elif driver_abbr == result.pxx(-2).abbr %}3 Points
{% elif driver_abbr == result.pxx(-1).abbr %}6 Points
{% elif driver_abbr == result.pxx(0).abbr %}10 Points
{% elif driver_abbr == result.pxx(1).abbr %}6 Points
{% elif driver_abbr == result.pxx(2).abbr %}3 Points
{% elif driver_abbr == result.pxx(3).abbr %}1 Point
{% else %}0 Points{% endif %}
{%- endmacro %}
{% macro pxx_standing_tooltip_text(result=none) -%}
P{{ result.race.pxx - 3 }}: {{ result.pxx(-3).abbr }}
P{{ result.race.pxx - 2 }}: {{ result.pxx(-2).abbr }}
P{{ result.race.pxx - 1 }}: {{ result.pxx(-1).abbr }}
P{{ result.race.pxx }}: {{ result.pxx(0).abbr }}
P{{ result.race.pxx + 1 }}: {{ result.pxx(1).abbr }}
P{{ result.race.pxx + 2 }}: {{ result.pxx(2).abbr }}
P{{ result.race.pxx + 3 }}: {{ result.pxx(3).abbr }}
{% endmacro %}
{#@formatter:on#}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -119,13 +142,6 @@
<script src="../static/script/bootstrap.bundle.js"></script>
{% block head_extra %}{% endblock head_extra %}
{# <script defer> #}
{# {# Initialize Bootstrap Tooltips #}
{# console.log("Initializing Tooltips...") #}
{# const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') #}
{# const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) #}
{# </script> #}
</head>
<body>

31
templates/race.jinja
View File

@ -4,6 +4,14 @@
{% set active_page = "/race" %}
{% block head_extra %}
<script defer>
{# Initialize Bootstrap Tooltips #}
let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")
let tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock head_extra %}
{% block navbar_center %}
{% if model.all_users() | length > 1 %}
<div class="dropdown">
@ -82,9 +90,11 @@
{% if user_guess is not none %}
<ul class="list-group list-group-flush">
<li class="list-group-item" style="background-color: inherit;">
P{{ current_race.pxx }}: {{ user_guess.pxx.abbr }}</li>
P{{ current_race.pxx }}: {{ user_guess.pxx.abbr }}
</li>
<li class="list-group-item" style="background-color: inherit;">
DNF: {{ user_guess.dnf.abbr }}</li>
DNF: {{ user_guess.dnf.abbr }}
</li>
</ul>
{% else %}
&nbsp;
@ -138,6 +148,7 @@
{% else %}
{% set users = [active_user] %}
{% endif %}
{% for user in users %}
<td class="text-center text-nowrap">
{% set user_guess = model.race_guesses_by(user_name=user.name, race_name=past_result.race.name) %}
@ -145,9 +156,15 @@
{% if user_guess is not none %}
<ul class="list-group list-group-flush">
<li class="list-group-item {{ pxx_guess_colorization(user_guess.pxx.abbr, past_result) }}">
P{{ past_result.race.pxx }}: {{ user_guess.pxx.abbr }}</li>
<span data-bs-toggle="tooltip" title="{{ pxx_points_tooltip_text(user_guess.pxx.abbr, past_result) }}">
P{{ past_result.race.pxx }}: {{ user_guess.pxx.abbr }}
</span>
</li>
<li class="list-group-item {% if user_guess.dnf.abbr == past_result.dnf.abbr %}text-success fw-bold{% endif %}">
DNF: {{ user_guess.dnf.abbr }}</li>
<span data-bs-toggle="tooltip" title="{% if user_guess.dnf.abbr == past_result.dnf.abbr %}10 Points{% else %}0 Points{% endif %}">
DNF: {{ user_guess.dnf.abbr }}
</span>
</li>
</ul>
{% else %}
&nbsp;
@ -157,7 +174,11 @@
<td class="text-center text-nowrap">
<ul class="list-group list-group-flush">
<li class="list-group-item">P{{ past_result.race.pxx }}: {{ past_result.pxx().abbr }}</li>
<li class="list-group-item">
<span data-bs-toggle="tooltip" title="{{ pxx_standing_tooltip_text(past_result) }}">
P{{ past_result.race.pxx }}: {{ past_result.pxx().abbr }}
</span>
</li>
<li class="list-group-item {% if past_result.dnf.abbr == 'NON' %}text-muted{% endif %}">
DNF: {{ past_result.dnf.abbr }}</li>
</ul>