Create "station" page

ter/routes.py

@@ -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."""

ter/static/img/bars.svg

@@ -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>

ter/templates/station.html

@@ -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 %}