123 lines
4.4 KiB
HTML
123 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
|
|
<!-- Header Banner -->
|
|
{% if event %}
|
|
<div class="banner">
|
|
<div class="banner-badge">🟢 Runde geöffnet</div>
|
|
<h1>{{ event.title }}</h1>
|
|
<p class="banner-sub">
|
|
Brotzeit-Tag: <strong>{{ event.event_date.strftime('%d.%m.%Y') }}</strong> |
|
|
Bestellschluss: <strong>{{ event.deadline.strftime('%d.%m.%Y um %H:%M Uhr') }}</strong>
|
|
</p>
|
|
<div class="banner-stats">
|
|
<span>👥 Bereits <strong>{{ order_count }}</strong> Bestellungen eingegangen</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Form -->
|
|
<form action="/order" method="POST" class="order-form" id="orderForm">
|
|
<input type="hidden" name="event_id" value="{{ event.id }}">
|
|
|
|
<div class="form-grid">
|
|
<!-- Left: Products -->
|
|
<div class="products-section">
|
|
<h2>1. Brotzeit auswählen</h2>
|
|
<div class="product-list">
|
|
{% for product in products %}
|
|
<div class="product-card" data-price="{{ product.price }}" data-id="{{ product.id }}">
|
|
<div class="product-info">
|
|
<h3>{{ product.name }}</h3>
|
|
<p class="product-desc">{{ product.description }}</p>
|
|
<div class="product-price">{{ "%.2f"|format(product.price) }} € <small>/ {{ product.unit }}</small></div>
|
|
</div>
|
|
<div class="quantity-control">
|
|
<button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, -1)">-</button>
|
|
<input type="number" id="qty_{{ product.id }}" name="qty_{{ product.id }}" value="0" min="0" max="50" class="qty-input" onchange="updateTotal()">
|
|
<button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, 1)">+</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: User Details & Summary -->
|
|
<div class="summary-section">
|
|
<div class="summary-card">
|
|
<h2>2. Deine Angaben</h2>
|
|
<div class="input-group">
|
|
<label for="first_name">Vorname</label>
|
|
<input type="text" id="first_name" name="first_name" required placeholder="z. B. Maxi">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="last_name">Nachname</label>
|
|
<input type="text" id="last_name" name="last_name" required placeholder="z. B. Muster">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="email">E-Mail-Adresse</label>
|
|
<input type="email" id="email" name="email" required placeholder="maxi@beispiel.de">
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<div class="order-total-box">
|
|
<div class="total-label">Gesamtsumme:</div>
|
|
<div class="total-amount" id="totalAmount">0,00 €</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit" id="submitBtn">
|
|
🥨 Bestellung verbindlich abschicken
|
|
</button>
|
|
<small class="form-hint">Du kannst deine Bestellung bis zum Stichtag jederzeit mit derselben E-Mail-Adresse ändern.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🏖️</div>
|
|
<h2>Aktuell keine offene Bestellrunde</h2>
|
|
<p>Für dieses Team ist im Moment keine Brotzeit geplant.</p>
|
|
<a href="/admin" class="btn-primary">Neue Bestellrunde im Cockpit anlegen</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function changeQty(productId, delta) {
|
|
const input = document.getElementById('qty_' + productId);
|
|
let val = parseInt(input.value) || 0;
|
|
val = Math.max(0, val + delta);
|
|
input.value = val;
|
|
updateTotal();
|
|
}
|
|
|
|
function updateTotal() {
|
|
let total = 0;
|
|
const cards = document.querySelectorAll('.product-card');
|
|
cards.forEach(card => {
|
|
const price = parseFloat(card.dataset.price) || 0;
|
|
const id = card.dataset.id;
|
|
const qtyInput = document.getElementById('qty_' + id);
|
|
const qty = parseInt(qtyInput.value) || 0;
|
|
total += price * qty;
|
|
});
|
|
|
|
document.getElementById('totalAmount').innerText = total.toFixed(2).replace('.', ',') + ' €';
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
if (total > 0) {
|
|
submitBtn.removeAttribute('disabled');
|
|
submitBtn.style.opacity = '1';
|
|
} else {
|
|
submitBtn.style.opacity = '0.7';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', updateTotal);
|
|
</script>
|
|
{% endblock %}
|