Create "station" page
This commit is contained in:
parent
61e595b152
commit
31f80d2707
|
@ -1,4 +1,6 @@
|
|||
from fastapi import APIRouter, Request
|
||||
from typing import Annotated
|
||||
|
||||
from fastapi import APIRouter, Request, Header
|
||||
from jinja2_fragments.fastapi import Jinja2Blocks
|
||||
|
||||
|
||||
|
@ -10,6 +12,38 @@ router = APIRouter()
|
|||
templates = Jinja2Blocks(settings.TEMPLATE_DIR)
|
||||
|
||||
|
||||
@router.get("/station")
|
||||
async def station(
|
||||
request: Request,
|
||||
search: str | None = None,
|
||||
name: str | None = None,
|
||||
hx_target: Annotated[str | None, Header()] = None,
|
||||
):
|
||||
context = {"request": request}
|
||||
|
||||
if name:
|
||||
context["name"] = name
|
||||
cursor = await database.execute(
|
||||
"SELECT stop_lat, stop_lon FROM stops WHERE location_type=1 and stop_name = ?",
|
||||
(name,),
|
||||
)
|
||||
context["location"] = await cursor.fetchone()
|
||||
|
||||
elif search:
|
||||
if len(search) > 2:
|
||||
cursor = await database.execute(
|
||||
"SELECT stop_name FROM stops WHERE location_type=1 and stop_name LIKE ?",
|
||||
(f"%{search}%",),
|
||||
)
|
||||
context["search_results"] = await cursor.fetchall()
|
||||
context["search"] = search
|
||||
|
||||
if hx_target:
|
||||
hx_target = hx_target.replace("-", "_")
|
||||
|
||||
return templates.TemplateResponse("station.html", context, block_name=hx_target)
|
||||
|
||||
|
||||
@router.get("/")
|
||||
async def index(request: Request):
|
||||
"""Home page."""
|
||||
|
|
22
ter/static/img/bars.svg
Normal file
22
ter/static/img/bars.svg
Normal file
|
@ -0,0 +1,22 @@
|
|||
<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
|
||||
<rect y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="30" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="60" width="15" height="140" rx="6">
|
||||
<animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="90" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="120" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
After Width: | Height: | Size: 1.9 KiB |
43
ter/templates/station.html
Normal file
43
ter/templates/station.html
Normal file
|
@ -0,0 +1,43 @@
|
|||
{% extends "/_base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<section id="content">
|
||||
{% if name is not defined %}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Sélectionner une gare"
|
||||
autocomplete="off"
|
||||
|
||||
name="search" value="{{ search|default('') }}"
|
||||
hx-get="/station",
|
||||
hx-trigger="keyup changed delay:500ms, load"
|
||||
hx-target="#search-results"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator=".htmx-indicator"
|
||||
/>
|
||||
<img id="spinner" class="htmx-indicator" src="/static/img/bars.svg"/>
|
||||
{% block search_results %}
|
||||
{% if search_results %}
|
||||
<ul id="search-results">
|
||||
{% for (name,) in search_results %}
|
||||
<li><a
|
||||
hx-get="/station"
|
||||
hx-vals='{"name": "{{ name }}"}'
|
||||
hx-trigger="click"
|
||||
hx-target="#content"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">{{ name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% elif search | length < 3 %}
|
||||
<p id="search-results"><i>Il faut au moins 3 caractères</i></p>
|
||||
{% else %}
|
||||
<p id="search-results"><b>Pas de résultats</b></p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
<h1>Gare de {{ name }}</h1>
|
||||
<p>Lat. {{ location[0] }} Long. {{ location[1] }}</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue
Block a user