vinindkoeb/app/templates/order.html
carsten 609c3efb05 Opgave 8c: ny offentlig bestillings-/tilmeldingsside
Server-renderet af FastAPI selv (Jinja2 + vanilla JS/CSS, intet
build-step) mod det eksisterende domæneopløste JSON-API fra 8b.
GET / viser bestillingssiden når en runde er åben (rundeoverskrift,
intro_text, kategori-grupperet vinkatalog med live-beregnet
EUR/DKK-total, bestillingsformular), ellers en tilmeldingsside.
GET /tilmelding er altid tilgængelig uafhængigt af rundestatus, og
GET /afhentning viser rutens meeting_info. Layoutet er modelleret
efter den gamle sides bestillingsside. get_current_round's
serialiseringslogik er udtrukket til en delt _build_page_info-helper,
så JSON-API'et og de nye HTML-sider genbruger nøjagtig samme
domæne-/rundeopslag.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-28 22:55:55 +02:00

75 lines
3 KiB
HTML

{% extends "base.html" %}
{% block title %} — {{ page.current_round.round_name }}{% endblock %}
{% block content %}
<p class="route-label">{{ page.route_name }}</p>
<h1 class="round-heading">{{ page.current_round.round_name }}</h1>
{% if page.current_round.intro_text %}
<div class="intro-text">{{ page.current_round.intro_text | safe }}</div>
{% endif %}
<p class="signup-link">
Vil du bare tilmelde dig fremtidige runder uden at bestille nu?
<a href="/tilmelding">Tilmeld dig her</a>.
</p>
<form id="order-form"
class="order-layout"
data-eur-dkk-rate="{{ page.current_round.eur_dkk_rate if page.current_round.eur_dkk_rate is not none else '' }}">
<div class="catalog">
<table class="wine-table">
{% set ns = namespace(current_category=None) %}
{% for wine in page.current_round.wine_offerings %}
{% if wine.category.name != ns.current_category %}
<tr class="category-row"><th colspan="4">{{ wine.category.name }}</th></tr>
{% set ns.current_category = wine.category.name %}
{% endif %}
<tr>
<td class="qty-cell">
<input type="number" min="0" step="1" value="0" inputmode="numeric"
class="qty-input" data-offering-id="{{ wine.id }}" data-price="{{ wine.price }}">
</td>
<td class="wine-name-cell">
{{ wine.name }}{% if wine.is_organic %} <span class="organic-badge" title="Økologisk">øko</span>{% endif %}
</td>
<td class="price-cell">{{ "%.2f"|format(wine.price) }}</td>
<td class="row-total-cell" data-row-total-for="{{ wine.id }}">0.00</td>
</tr>
{% endfor %}
</table>
</div>
<aside class="order-sidebar">
<p class="total-line">Total i EUR: <span id="total-eur">0.00</span></p>
{% if page.current_round.eur_dkk_rate %}
<p class="total-line">Total i DKK: <span id="total-dkk">0.00</span></p>
<p class="rate-note">1 EUR = {{ "%.2f"|format(page.current_round.eur_dkk_rate) }} KR</p>
{% endif %}
<label class="field-label">Navn
<input type="text" name="name" required>
</label>
<label class="field-label">Email addresse
<input type="email" name="email" required>
</label>
<p class="field-help">Vi sender en kvittering til denne email, og du vil i fremtiden blive informeret om {{ page.route_name }}!</p>
<label class="field-label">Telefon
<input type="tel" name="phone" required>
</label>
<p class="field-help">Det er vigtigt for os at have dit mobil-nummer, så vi kan få fat på dig, i tilfælde af problemer.</p>
<label class="checkbox-label">
<input type="checkbox" name="is_active" checked>
Jeg ønsker i fremtiden at modtage mails om {{ page.route_name }}!
</label>
<button type="submit">Bestil nu</button>
<div id="order-message" class="form-message" hidden></div>
</aside>
</form>
{% endblock %}
{% block scripts %}
<script src="/static/site.js"></script>
{% endblock %}