v0.2 planning and ux improvements

This commit is contained in:
2026-04-12 11:21:09 +02:00
parent 21014c246e
commit 36bde02c54
30 changed files with 1456 additions and 368 deletions
+25 -3
View File
@@ -4,11 +4,32 @@
<section class="page-intro">
<div>
<p class="eyebrow">Archiv</p>
<h1>Fruehere Ideen bleiben greifbar</h1>
<h1>Frühere Ideen bleiben greifbar</h1>
<p class="lead">Das Archiv ist ein Erinnerungsspeicher. Von hier aus lassen sich vertraute Dinge leicht wieder auf die Einkaufsliste setzen.</p>
</div>
</section>
<section class="panel compact-form-panel">
<form method="get" class="filter-form">
<label class="wide">
Suche
<input type="text" name="q" value="{{ query }}" placeholder="Nach Namen suchen">
</label>
<label>
Bereich
<select name="kind">
{% for value, label in kind_options %}
<option value="{{ value }}" {% if selected_kind == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<div class="filter-actions">
<button type="submit">Filtern</button>
<a class="ghost-button" href="{{ url_for('main.archive_view') }}">Zurücksetzen</a>
</div>
</form>
</section>
{% if items %}
<section class="card-grid">
{% for item in items %}
@@ -42,6 +63,7 @@
{{ csrf_input() }}
<button type="submit">Wieder einkaufen</button>
</form>
<a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
<form method="post" action="{{ url_for('main.item_restore', item_id=item.id) }}">
{{ csrf_input() }}
<button class="ghost-button" type="submit">Zur aktiven Liste</button>
@@ -52,8 +74,8 @@
</section>
{% else %}
<section class="panel empty-panel">
<h2>Das Archiv ist noch leer</h2>
<p>Sobald etwas als verbraucht markiert wird, bleibt es hier als spaetere Erinnerung erhalten.</p>
<h2>Keine passenden Archiv-Einträge</h2>
<p>Mit einer kurzen Suche findest du vertraute Dinge meist schnell wieder.</p>
</section>
{% endif %}
{% endblock %}
+5 -1
View File
@@ -3,7 +3,7 @@
{% block content %}
<section class="auth-shell">
<div class="auth-card">
<p class="eyebrow">Willkommen zurueck</p>
<p class="eyebrow">Willkommen zurück</p>
<h1>Ruhig wieder einsteigen</h1>
<p class="lead">Nouri hilft beim Erinnern, Sichtbar-Machen und Planen. Ohne Zahlen, ohne Druck.</p>
@@ -17,6 +17,10 @@
Passwort
<input type="password" name="password" autocomplete="current-password" required>
</label>
<label class="inline-check">
<input type="checkbox" name="remember_me" value="1">
<span>Angemeldet bleiben</span>
</label>
<button type="submit">Anmelden</button>
</form>
</div>
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="auth-card">
<p class="eyebrow">Erster Start</p>
<h1>Den ersten Haushalt-Zugang anlegen</h1>
<p class="lead">Danach koennt ihr die App gemeinsam nutzen. Die Daten bleiben lokal in dieser Installation.</p>
<p class="lead">Danach könnt ihr die App gemeinsam nutzen. Die Daten bleiben lokal in dieser Installation.</p>
<form method="post" class="stack-form">
{{ csrf_input() }}
+15 -9
View File
@@ -4,28 +4,34 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Nouri{% endblock %}</title>
<meta name="csrf-token" content="{{ csrf_token_value }}">
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='brand/favicon.svg') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<script defer src="{{ url_for('static', filename='js/theme.js') }}"></script>
<script defer src="{{ url_for('static', filename='js/planner.js') }}"></script>
</head>
<body>
<div class="page-shell">
<header class="site-header">
<a class="brand" href="{{ url_for('main.dashboard') }}">
<span class="brand-mark">N</span>
<span class="brand-mark">
<img src="{{ url_for('static', filename='brand/nouri-icon.svg') }}" alt="">
</span>
<span>
<strong>Nouri</strong>
<small>freundliches Essensgedaechtnis</small>
<small>einfach essen planen</small>
</span>
</a>
{% if g.user %}
<nav class="site-nav">
<a href="{{ url_for('main.dashboard') }}" class="{{ 'active' if request.endpoint == 'main.dashboard' else '' }}">Heute</a>
<a href="{{ url_for('main.item_list', kind='food') }}" class="{{ 'active' if request.endpoint == 'main.item_list' and request.view_args and request.view_args.get('kind') == 'food' else '' }}">Lebensmittel</a>
<a href="{{ url_for('main.item_list', kind='meal') }}" class="{{ 'active' if request.endpoint == 'main.item_list' and request.view_args and request.view_args.get('kind') == 'meal' else '' }}">Mahlzeiten</a>
<a href="{{ url_for('main.shopping_list') }}" class="{{ 'active' if request.endpoint == 'main.shopping_list' else '' }}">Einkaufsliste</a>
<a href="{{ url_for('main.home_view') }}" class="{{ 'active' if request.endpoint == 'main.home_view' else '' }}">Zuhause</a>
<a href="{{ url_for('main.planner') }}" class="{{ 'active' if request.endpoint == 'main.planner' else '' }}">Wochenplan</a>
<a href="{{ url_for('main.archive_view') }}" class="{{ 'active' if request.endpoint == 'main.archive_view' else '' }}">Archiv</a>
<a href="{{ url_for('main.dashboard') }}" class="{{ 'active' if request.endpoint == 'main.dashboard' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-sparkles"></span><span>Heute</span></span></a>
<a href="{{ url_for('main.item_list', kind='food') }}" class="{{ 'active' if request.endpoint == 'main.item_list' and request.view_args and request.view_args.get('kind') == 'food' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-utensils"></span><span>Lebensmittel</span></span></a>
<a href="{{ url_for('main.item_list', kind='meal') }}" class="{{ 'active' if request.endpoint == 'main.item_list' and request.view_args and request.view_args.get('kind') == 'meal' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-bowl-food"></span><span>Mahlzeiten</span></span></a>
<a href="{{ url_for('main.shopping_list') }}" class="{{ 'active' if request.endpoint == 'main.shopping_list' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-cart-shopping"></span><span>Einkaufsliste</span></span></a>
<a href="{{ url_for('main.home_view') }}" class="{{ 'active' if request.endpoint == 'main.home_view' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-house"></span><span>Zuhause</span></span></a>
<a href="{{ url_for('main.planner_day', date=today.isoformat() if today else None) }}" class="{{ 'active' if request.endpoint == 'main.planner_day' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-calendar"></span><span>Tagesplan</span></span></a>
<a href="{{ url_for('main.planner') }}" class="{{ 'active' if request.endpoint == 'main.planner' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-calendar-days"></span><span>Woche</span></span></a>
<a href="{{ url_for('main.archive_view') }}" class="{{ 'active' if request.endpoint == 'main.archive_view' else '' }}"><span class="nav-link-inner"><span class="ui-icon icon-archive"></span><span>Archiv</span></span></a>
</nav>
<div class="header-actions">
<button class="theme-toggle" type="button" data-theme-toggle>Modus</button>
+33 -7
View File
@@ -5,10 +5,10 @@
<div>
<p class="eyebrow">Heute</p>
<h1>Ein ruhiger Blick auf das, was gerade hilft</h1>
<p class="lead">Du siehst auf einen Blick, was zuhause da ist, was noch eingekauft werden soll und was heute schon eingeplant ist.</p>
<p class="lead">Du siehst auf einen Blick, was zuhause da ist, was schon eingeplant wurde und wo du schnell weitermachen kannst.</p>
</div>
<div class="hero-actions">
<a class="button secondary" href="{{ url_for('main.item_create', kind='food') }}">Lebensmittel anlegen</a>
<a class="button" href="{{ url_for('main.planner_day', date=today.isoformat()) }}">Heutigen Tagesplan öffnen</a>
<a class="button secondary" href="{{ url_for('main.item_create', kind='meal') }}">Mahlzeitenidee anlegen</a>
</div>
</section>
@@ -17,7 +17,7 @@
<article class="stat-card">
<span>Zuhause</span>
<strong>{{ home_count }}</strong>
<small>sichtbare Eintraege</small>
<small>sichtbare Einträge</small>
</article>
<article class="stat-card">
<span>Einkaufsliste</span>
@@ -35,19 +35,24 @@
<article class="panel">
<div class="panel-head">
<h2>Heute im Plan</h2>
<a href="{{ url_for('main.planner') }}">Wochenplan oeffnen</a>
<a href="{{ url_for('main.planner_day', date=today.isoformat()) }}">Zum Tagesplan</a>
</div>
{% if today_entries %}
<ul class="simple-list">
{% for entry in today_entries %}
<li>
<strong>{{ entry.daypart_name }}</strong>
<span>{{ entry.item_name }}</span>
<div>
<strong>{{ entry.daypart_name }}</strong>
<span>{{ entry.item_name }}</span>
</div>
{% if entry.availability_state == 'home' %}
<span class="status-pill status-home">zuhause</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p class="empty-state">Fuer heute ist noch nichts fest eingeplant. Das ist vollkommen okay.</p>
<p class="empty-state">Für heute ist noch nichts fest eingeplant. Das ist vollkommen okay.</p>
{% endif %}
</article>
@@ -79,4 +84,25 @@
{% endif %}
</article>
</section>
<section class="panel">
<div class="panel-head">
<h2>Nächste Tage</h2>
<a href="{{ url_for('main.planner') }}">Wochenansicht öffnen</a>
</div>
<div class="week-mini-grid">
{% for card in week_cards %}
<a class="week-mini-card" href="{{ url_for('main.planner_day', date=card.date.isoformat()) }}">
<strong>{{ weekday_short_name(card.date) }} {{ card.date.strftime('%d.%m.') }}</strong>
{% if card.filled_dayparts %}
<span>{{ card.planned_count }} Einträge</span>
<small>{{ card.filled_dayparts | map(attribute='name') | join(', ') }}</small>
{% else %}
<span>Noch frei</span>
<small>sanfter Einstieg für den Tag</small>
{% endif %}
</a>
{% endfor %}
</div>
</section>
{% endblock %}
+29 -6
View File
@@ -5,20 +5,42 @@
<div>
<p class="eyebrow">Zuhause</p>
<h1>Was aktuell da ist</h1>
<p class="lead">Sichtbar, ruhig und nach Tageszeiten sortiert. Wenn etwas aufgebraucht ist, wandert es nicht weg, sondern ins Archiv.</p>
<p class="lead">Sichtbar, ruhig und besser nach Tageszeiten sortiert. Wenn etwas aufgebraucht ist, wandert es nicht weg, sondern ins Archiv.</p>
</div>
</section>
{% if grouped %}
<section class="panel compact-form-panel">
<form method="get" class="filter-form">
<label class="wide">
Suche
<input type="text" name="q" value="{{ query }}" placeholder="Nach Namen suchen">
</label>
<label>
Tageszeit
<select name="daypart_id">
<option value="">Alle Tageszeiten</option>
{% for daypart in dayparts %}
<option value="{{ daypart.id }}" {% if selected_daypart_id == daypart.id %}selected{% endif %}>{{ daypart.name }}</option>
{% endfor %}
</select>
</label>
<div class="filter-actions">
<button type="submit">Filtern</button>
<a class="ghost-button" href="{{ url_for('main.home_view') }}">Zurücksetzen</a>
</div>
</form>
</section>
{% if sections %}
<section class="stack-sections">
{% for title, items in grouped.items() %}
{% for section in sections if section["items"] %}
<article class="panel">
<div class="panel-head">
<h2>{{ title }}</h2>
<span>{{ items|length }} Eintraege</span>
<h2>{{ section["title"] }}</h2>
<span>{{ section["items"]|length }} Einträge</span>
</div>
<div class="card-grid">
{% for item in items %}
{% for item in section["items"] %}
<article class="item-card compact">
<div class="item-media">
{% if item.photo_filename %}
@@ -35,6 +57,7 @@
{% endif %}
</div>
<div class="item-actions">
<a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
<form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
{{ csrf_input() }}
<button class="ghost-button" type="submit">Verbraucht / nicht mehr da</button>
+44 -8
View File
@@ -58,20 +58,56 @@
{% if kind == 'meal' %}
<fieldset>
<legend>Bestandteile der Mahlzeitenidee</legend>
<div class="checkbox-grid">
{% for food in foods %}
<label class="check-option">
<input type="checkbox" name="component_ids" value="{{ food.id }}" {% if food.id in form_data.component_ids %}checked{% endif %}>
<span>{{ food.name }}</span>
<p class="muted">Optional: Du kannst eine Mahlzeit frei als Idee anlegen oder sie aus vorhandenen und archivierten Lebensmitteln zusammenklicken.</p>
{% if food_groups %}
<div class="stack-sections">
{% for group in food_groups %}
<div class="component-group">
<div class="panel-head">
<h3>{{ group["title"] }}</h3>
<span>{{ group["items"]|length }} Einträge</span>
</div>
<div class="checkbox-grid">
{% for food in group["items"] %}
<label class="check-option">
<input type="checkbox" name="component_ids" value="{{ food.id }}" {% if food.id in form_data.component_ids %}checked{% endif %}>
<span>{{ food.name }}</span>
</label>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="empty-state">Lege zuerst ein paar Lebensmittel an, damit du daraus Mahlzeitenideen bauen kannst.</p>
{% endif %}
<div class="quick-food-panel">
<div class="panel-head">
<h3>Neues Lebensmittel direkt anlegen</h3>
<span>ohne die Seite zu verlassen</span>
</div>
<div class="quick-food-grid">
<label>
Name
<input type="text" name="quick_food_name" value="{{ form_data.quick_food_name }}" placeholder="z. B. Hüttenkäse">
</label>
{% endfor %}
<label>
Kategorie
<input type="text" name="quick_food_category" value="{{ form_data.quick_food_category }}" list="category-list" placeholder="z. B. Milchprodukt">
</label>
<label class="wide">
Notiz
<input type="text" name="quick_food_note" value="{{ form_data.quick_food_note }}" placeholder="Optional">
</label>
<button type="submit" name="form_action" value="quick_add_food" class="secondary">Lebensmittel anlegen und übernehmen</button>
</div>
</div>
</fieldset>
{% endif %}
<div class="form-actions">
<button type="submit">Speichern</button>
<a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurueck</a>
<button type="submit" name="form_action" value="save_item">Speichern</button>
<a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurück</a>
</div>
</form>
</section>
+35 -4
View File
@@ -5,11 +5,41 @@
<div>
<p class="eyebrow">{{ item_kind_labels[kind] }}</p>
<h1>{{ item_kind_labels[kind] }}</h1>
<p class="lead">Schnell gepflegte Eintraege mit Foto, Tageszeiten und einem ruhigen Status zwischen Idee, Zuhause und Archiv.</p>
<p class="lead">Schnell gepflegte Einträge mit Foto, Tageszeiten und einem ruhigen Status zwischen Merkliste, Zuhause und Archiv.</p>
</div>
<a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neu anlegen</a>
</section>
<section class="panel compact-form-panel">
<form method="get" class="filter-form">
<label class="wide">
Suche
<input type="text" name="q" value="{{ query }}" placeholder="Nach Namen suchen">
</label>
<label>
Status
<select name="state">
{% for value, label in state_options %}
<option value="{{ value }}" {% if selected_state == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<label>
Tageszeit
<select name="daypart_id">
<option value="">Alle Tageszeiten</option>
{% for daypart in dayparts %}
<option value="{{ daypart.id }}" {% if selected_daypart_id == daypart.id %}selected{% endif %}>{{ daypart.name }}</option>
{% endfor %}
</select>
</label>
<div class="filter-actions">
<button type="submit">Filtern</button>
<a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurücksetzen</a>
</div>
</form>
</section>
{% if items %}
<section class="card-grid">
{% for item in items %}
@@ -47,6 +77,7 @@
</div>
<div class="item-actions">
<a class="ghost-button" href="{{ url_for('main.item_edit', item_id=item.id) }}">Bearbeiten</a>
<a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
<form method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
{{ csrf_input() }}
<button type="submit">Auf Einkaufsliste</button>
@@ -69,9 +100,9 @@
</section>
{% else %}
<section class="panel empty-panel">
<h2>Noch keine Eintraege</h2>
<p>Der schnellste Start ist ein erstes vertrautes Lebensmittel oder eine einfache Mahlzeitenidee.</p>
<a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Ersten Eintrag anlegen</a>
<h2>Keine passenden Einträge</h2>
<p>Mit einer kleinen Suche oder einem anderen Filter findest du meist schnell wieder das Richtige.</p>
<a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neuen Eintrag anlegen</a>
</section>
{% endif %}
{% endblock %}
+104
View File
@@ -0,0 +1,104 @@
{% extends "base.html" %}
{% block title %}Tagesplan | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
<div>
<p class="eyebrow">Tagesplan</p>
<h1>{{ weekday_name(selected_date) }}, {{ selected_date.strftime('%d.%m.%Y') }}</h1>
<p class="lead">Der Tagesplan bleibt bewusst ruhig. Jede Tageszeit ist eine eigene Kachel und öffnet sich erst, wenn du sie brauchst.</p>
</div>
<div class="week-nav">
<a class="ghost-button" href="{{ url_for('main.planner_day', date=previous_day.isoformat()) }}">Vorheriger Tag</a>
<a class="ghost-button" href="{{ url_for('main.planner') }}">Zur Woche</a>
<a class="ghost-button" href="{{ url_for('main.planner_day', date=next_day.isoformat()) }}">Nächster Tag</a>
</div>
</section>
<section class="planner-day-stack">
{% for section in sections %}
<details class="day-tile" id="daypart-{{ section.daypart.id }}" {% if section.is_open %}open{% endif %}>
<summary class="day-tile-summary">
<div class="day-tile-summary-main">
<div class="day-tile-icon"><span class="ui-icon icon-calendar"></span></div>
<div>
<h2>{{ section.daypart.name }}</h2>
{% if section.summary_items %}
<p class="muted">{{ section.summary_items|join(', ') }}</p>
{% else %}
<p class="muted">Noch frei. Öffnen, wenn du etwas ergänzen möchtest.</p>
{% endif %}
</div>
</div>
<span class="status-pill">{{ section.entries|length }} geplant</span>
</summary>
<div class="day-tile-body">
{% if section.quick_items %}
<div class="quick-add-row">
{% for item in section.quick_items %}
<form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}">
{{ csrf_input() }}
<input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
<input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
<input type="hidden" name="item_id" value="{{ item.id }}">
<button class="quick-add-button" type="submit">
<span>{{ item.name }}</span>
<small>{{ item_kind_labels[item.kind] }}{% if item.availability_state == 'home' %} · zuhause{% endif %}</small>
</button>
</form>
{% endfor %}
</div>
{% endif %}
<form method="post" class="planner-entry-form">
{{ csrf_input() }}
<input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
<input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
<label class="wide">
Eintrag hinzufügen
<select name="item_id">
<option value="">Etwas für {{ section.daypart.name }} wählen</option>
{% for item in section.candidates %}
<option value="{{ item.id }}" {% if section.selected_item_id == item.id %}selected{% endif %}>
{{ item.name }} · {{ item_kind_labels[item.kind] }}{% if item.availability_state == 'home' %} · zuhause{% endif %}{% if item.dayparts and section.daypart.name not in item.dayparts %} · auch flexibel{% endif %}
</option>
{% endfor %}
</select>
</label>
<label class="wide">
Notiz
<input type="text" name="note" placeholder="Optional, wenn eine kleine Erinnerung hilft">
</label>
<button type="submit">Eintragen</button>
</form>
{% if section.entries %}
<div class="planner-entry-list">
{% for entry in section.entries %}
<article class="planner-entry">
<div class="planner-entry-top">
<div>
<strong>{{ entry.item_name }}</strong>
<small>{{ item_kind_labels[entry.item_kind] }}{% if entry.availability_state == 'home' %} · zuhause{% else %} · bei Bedarf auf Einkaufsliste{% endif %}</small>
</div>
<div class="row-actions">
<form method="post" action="{{ url_for('main.planner_remove', entry_id=entry.id, date=selected_date.isoformat()) }}">
{{ csrf_input() }}
<button class="ghost-button" type="submit">Entfernen</button>
</form>
</div>
</div>
{% if entry.note %}
<p>{{ entry.note }}</p>
{% endif %}
</article>
{% endfor %}
</div>
{% else %}
<p class="empty-state">Hier ist noch nichts eingetragen. Ein kleiner Anfang reicht völlig.</p>
{% endif %}
</div>
</details>
{% endfor %}
</section>
{% endblock %}
+57 -67
View File
@@ -1,81 +1,71 @@
{% extends "base.html" %}
{% block title %}Wochenplan | Nouri{% endblock %}
{% block title %}Wochenansicht | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
<div>
<p class="eyebrow">Wochenplan</p>
<h1>Struktur fuer die naechsten Tage</h1>
<p class="lead">Der Plan bleibt bewusst leichtgewichtig. Vorhandene Dinge tauchen in der Auswahl zuerst auf.</p>
<p class="eyebrow">Wochenansicht</p>
<h1>Ein sanfter Blick auf die nächsten sieben Tage</h1>
<p class="lead">Du kannst bestehende Einträge zwischen Tagen und Tageszeiten verschieben. Wenn etwas noch nicht zuhause ist, landet es dabei automatisch auf der Einkaufsliste.</p>
</div>
<div class="week-nav">
<a class="ghost-button" href="{{ url_for('main.planner', week=prev_week.isoformat()) }}">Vorige Woche</a>
<span>{{ days[0].strftime('%d.%m.') }} bis {{ days[-1].strftime('%d.%m.%Y') }}</span>
<a class="ghost-button" href="{{ url_for('main.planner', week=next_week.isoformat()) }}">Naechste Woche</a>
<span>{{ week_start.strftime('%d.%m.%Y') }} bis {{ week_end.strftime('%d.%m.%Y') }}</span>
<a class="ghost-button" href="{{ url_for('main.planner', week=next_week.isoformat()) }}">Nächste Woche</a>
</div>
</section>
<section class="panel compact-form-panel">
<form method="post" class="planner-form">
{{ csrf_input() }}
<label>
Tag
<input type="date" name="plan_date" value="{{ days[0].isoformat() }}">
</label>
<label>
Tageszeit
<select name="daypart_id">
{% for daypart in dayparts %}
<option value="{{ daypart.id }}">{{ daypart.name }}</option>
{% endfor %}
</select>
</label>
<label class="wide">
Eintrag
<select name="item_id">
<option value="">Etwas fuer den Plan waehlen</option>
{% for item in selectable_items %}
<option value="{{ item.id }}">{{ item.name }} · {{ item_kind_labels[item.kind] }}{% if item.availability_state == 'home' %} · zuhause{% endif %}</option>
{% endfor %}
</select>
</label>
<label class="wide">
Notiz
<input type="text" name="note" placeholder="Optional, z. B. zuerst einkaufen">
</label>
<button type="submit">In den Plan legen</button>
</form>
</section>
<section class="planner-grid">
{% for daypart in dayparts %}
<div class="planner-row">
<div class="planner-label">{{ daypart.name }}</div>
{% for day in days %}
<div class="planner-cell">
<div class="planner-date">{{ day.strftime('%a %d.%m.') }}</div>
{% set slot_entries = entries.get((day.isoformat(), daypart.id), []) %}
{% if slot_entries %}
<div class="planner-entry-stack">
{% for entry in slot_entries %}
<article class="planner-entry">
<strong>{{ entry.item_name }}</strong>
<small>{{ item_kind_labels[entry.item_kind] }}</small>
{% if entry.note %}
<p>{{ entry.note }}</p>
{% endif %}
<form method="post" action="{{ url_for('main.planner_remove', entry_id=entry.id, week=week_start.isoformat()) }}">
{{ csrf_input() }}
<button class="ghost-button" type="submit">Entfernen</button>
</form>
</article>
{% endfor %}
</div>
{% else %}
<p class="empty-slot">frei</p>
{% endif %}
<section class="week-overview-grid week-board" data-csrf-token="{{ csrf_token_value }}">
{% for card in week_cards %}
<article class="week-card">
<div class="week-card-head">
<div>
<p class="eyebrow">{{ weekday_name(card.date) }}</p>
<h2>{{ card.date.strftime('%d.%m.%Y') }}</h2>
</div>
{% endfor %}
</div>
{% if card.date == today %}
<span class="status-pill status-home">heute</span>
{% endif %}
</div>
{% if card.filled_dayparts %}
<p class="week-card-count">{{ card.planned_count }} Einträge</p>
<div class="chip-row">
{% for slot in card.filled_dayparts %}
<span class="chip">{{ slot.name }} · {{ slot.count }}</span>
{% endfor %}
</div>
<p class="muted">{{ card.preview_items | join(', ') }}</p>
{% else %}
<p class="empty-state">Noch offen. Du kannst den Tag ganz leicht nach und nach füllen.</p>
{% endif %}
<div class="week-slot-stack">
{% for slot in card.slots %}
<div class="week-slot drop-slot" data-target-date="{{ card.date.isoformat() }}" data-target-daypart-id="{{ slot.daypart.id }}">
<div class="week-slot-head">
<strong>{{ slot.daypart.name }}</strong>
<span>{{ slot.entries|length }}</span>
</div>
{% if slot.entries %}
<div class="week-entry-stack">
{% for entry in slot.entries %}
<article class="plan-chip draggable-plan-entry" draggable="true" data-entry-id="{{ entry.id }}" data-move-url="{{ url_for('main.planner_move', entry_id=entry.id) }}">
<strong>{{ entry.item_name }}</strong>
<small>{{ item_kind_labels[entry.item_kind] }}</small>
</article>
{% endfor %}
</div>
{% else %}
<p class="week-slot-empty">Hierher ziehen</p>
{% endif %}
</div>
{% endfor %}
</div>
<div class="week-card-actions">
<a class="button" href="{{ url_for('main.planner_day', date=card.date.isoformat()) }}">Tagesplan öffnen</a>
</div>
</article>
{% endfor %}
</section>
{% endblock %}
+3 -3
View File
@@ -13,7 +13,7 @@
<form method="post" class="inline-form">
{{ csrf_input() }}
<select name="item_id">
<option value="">Bestehenden Eintrag hinzufuegen</option>
<option value="">Bestehenden Eintrag hinzufügen</option>
{% for item in addable_items %}
<option value="{{ item.id }}">{{ item.name }} · {{ item_kind_labels[item.kind] }}{% if item.availability_state == 'home' %} · zuhause{% endif %}</option>
{% endfor %}
@@ -28,7 +28,7 @@
<article class="list-row">
<div>
<strong>{{ entry.item_name }}</strong>
<p class="muted">{{ item_kind_labels[entry.item_kind] }}{% if entry.display_name or entry.username %} · hinzugefuegt von {{ entry.display_name or entry.username }}{% endif %}</p>
<p class="muted">{{ item_kind_labels[entry.item_kind] }}{% if entry.display_name or entry.username %} · hinzugefügt von {{ entry.display_name or entry.username }}{% endif %}</p>
</div>
<div class="row-actions">
<form method="post" action="{{ url_for('main.shopping_check', entry_id=entry.id) }}">
@@ -46,7 +46,7 @@
{% else %}
<section class="panel empty-panel">
<h2>Die Liste ist gerade frei</h2>
<p>Eintraege aus Lebensmitteln, Mahlzeitenideen oder dem Archiv lassen sich jederzeit wieder hinzufuegen.</p>
<p>Einträge aus Lebensmitteln, Mahlzeitenideen oder dem Archiv lassen sich jederzeit wieder hinzufügen.</p>
</section>
{% endif %}
{% endblock %}