132 lines
4.6 KiB
HTML
132 lines
4.6 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 von Kollegen 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 %}
|
||
{% set current_qty = user_items.get(product.id, 0) %}
|
||
<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="{{ current_qty }}" 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. Zusammenfassung</h2>
|
||
|
||
<div class="logged-in-badge">
|
||
<div class="user-avatar">👤</div>
|
||
<div>
|
||
<strong>{{ current_user.first_name }} {{ current_user.last_name }}</strong><br>
|
||
<small class="text-muted">{{ current_user.email }}</small>
|
||
</div>
|
||
</div>
|
||
|
||
{% if existing_order %}
|
||
<div class="notice-box">
|
||
ℹ️ Du hast bereits für diese Runde bestellt. Du kannst deine Mengen hier anpassen und aktualisieren.
|
||
</div>
|
||
{% endif %}
|
||
|
||
<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">
|
||
{% if existing_order %}
|
||
🥨 Bestellung aktualisieren
|
||
{% else %}
|
||
🥨 Bestellung verbindlich abschicken
|
||
{% endif %}
|
||
</button>
|
||
<small class="form-hint">Du kannst deine Bestellung bis zum Stichtag jederzeit hier im Portal anpassen.</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>
|
||
{% if current_user.role == 'admin' %}
|
||
<a href="/admin" class="btn-primary">Neue Bestellrunde im Cockpit anlegen</a>
|
||
{% endif %}
|
||
</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 %}
|