hnzio/nouri-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Add week planner entry editing popups

Browse Source
This commit is contained in:
Florian Heinz
2026-04-13 14:57:36 +02:00
parent 7b751b4d47
commit 6c7c1f01c9
4 changed files with 204 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/main.py
+10 -1
View File
@@ -3815,6 +3815,7 @@ def planner():
week_hints=build_week_hints(week_start),
upcoming_entries=fetch_upcoming_shopping_needs(limit=8),
household_settings=get_household_settings(),
visibility_options=VISIBILITY_FORM_OPTIONS,
)
@@ -3941,6 +3942,7 @@ def planner_generated_meal():
@login_required
def planner_update(entry_id: int):
selected_date = parse_plan_date(request.form.get("plan_date"))
return_week = request.form.get("return_week", "").strip()
entry = get_db().execute(
f"""
SELECT plan_entries.*,
@@ -3960,19 +3962,24 @@ def planner_update(entry_id: int):
ensure_can_edit(describe_record(dict(entry)), "Diesen Planeintrag kannst du gerade nicht bearbeiten.")
except PermissionError as exc:
flash(str(exc), "error")
if return_week:
return redirect(url_for("main.planner", week=return_week))
return redirect(url_for("main.planner_day", date=selected_date.isoformat()))
visibility = normalize_visibility(request.form.get("visibility"), entry["visibility"])
note = request.form.get("note", "").strip()
update_plan_entry(entry_id, visibility=visibility, note=note)
flash("Der Planeintrag wurde angepasst.", "success")
if return_week:
return redirect(url_for("main.planner", week=return_week))
return redirect(url_for("main.planner_day", date=selected_date.isoformat(), daypart_id=entry["daypart_id"]))
@main_bp.post("/planner/<int:entry_id>/remove")
@login_required
def planner_remove(entry_id: int):
selected_date = request.args.get("date", "")
selected_date = request.args.get("date", "") or request.form.get("plan_date", "").strip()
return_week = request.form.get("return_week", "").strip()
entry = get_db().execute(
f"""
SELECT plan_entries.*,
@@ -3994,6 +4001,8 @@ def planner_remove(entry_id: int):
flash("Der Planeintrag wurde entfernt.", "info")
except PermissionError as exc:
flash(str(exc), "error")
if return_week:
return redirect(url_for("main.planner", week=return_week))
if selected_date:
return redirect(url_for("main.planner_day", date=selected_date))
return redirect(url_for("main.planner"))
nouri/static/css/styles.css
+73
View File
@@ -1583,6 +1583,17 @@ legend {
opacity: 0.8;
}
.plan-chip.is-editable {
cursor: pointer;
}
.plan-chip.is-editable:hover {
border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 10px 22px rgba(94, 68, 49, 0.12);
}
.plan-chip:active {
cursor: grabbing;
}
@@ -1602,6 +1613,55 @@ legend {
padding: 0.55rem 0.85rem;
}
.week-entry-dialog {
padding: 0;
border: 0;
background: transparent;
max-width: min(34rem, calc(100vw - 2rem));
width: min(34rem, calc(100vw - 2rem));
}
.week-entry-dialog::backdrop {
background: rgba(29, 22, 19, 0.54);
backdrop-filter: blur(6px);
}
.week-entry-dialog-card {
display: grid;
gap: 1rem;
padding: 1.1rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface) 98%, #fff 2%);
box-shadow: var(--shadow);
}
.week-entry-dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
}
.week-entry-dialog-head h3 {
margin: 0 0 0.2rem;
font-size: 1.25rem;
}
.week-entry-dialog-head p {
margin: 0;
color: var(--muted);
}
.week-entry-dialog-actions {
display: flex;
justify-content: flex-start;
}
.week-entry-remove-form {
margin: 0;
}
.plan-chip small,
.week-slot-empty {
color: var(--muted);
@@ -1687,6 +1747,13 @@ legend {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .plan-chip.is-editable:hover {
border-color: rgba(243, 177, 125, 0.3);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 12px 26px rgba(0, 0, 0, 0.24);
}
[data-theme="dark"] .week-slot-copy {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(243, 177, 125, 0.12);
@@ -1701,6 +1768,12 @@ legend {
border-color: rgba(243, 177, 125, 0.16);
}
[data-theme="dark"] .week-entry-dialog-card {
background: rgba(43, 37, 35, 0.98);
border-color: rgba(243, 177, 125, 0.14);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34);
}
.flash-stack {
display: grid;
gap: 0.7rem;
nouri/static/js/planner.js
+69
View File
@@ -95,12 +95,14 @@
}
const result = await response.json();
rememberScroll();
if (result.redirect_url) {
window.location.href = result.redirect_url;
} else {
window.location.reload();
}
} catch (_error) {
rememberScroll();
window.location.reload();
}
});
@@ -196,6 +198,72 @@
});
};
const initWeekEntryDialogs = () => {
const board = document.querySelector(".week-board");
if (!board) return;
const openDialog = (trigger) => {
const dialogId = trigger.getAttribute("data-week-entry-dialog-id");
if (!dialogId) return;
const dialog = document.getElementById(dialogId);
if (!(dialog instanceof HTMLDialogElement)) return;
if (!dialog.open) {
dialog.showModal();
}
};
board.querySelectorAll("[data-week-entry-open]").forEach((entry) => {
entry.addEventListener("click", (event) => {
if (event.target instanceof Element && event.target.closest("button, a, input, select, textarea, label, form")) {
return;
}
openDialog(entry);
});
entry.addEventListener("keydown", (event) => {
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
openDialog(entry);
});
});
document.querySelectorAll(".week-entry-dialog").forEach((dialog) => {
if (!(dialog instanceof HTMLDialogElement)) return;
dialog.addEventListener("click", (event) => {
const rect = dialog.getBoundingClientRect();
const clickedInside =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!clickedInside) {
dialog.close();
}
});
});
document.querySelectorAll("[data-week-entry-close]").forEach((button) => {
button.addEventListener("click", () => {
const dialog = button.closest(".week-entry-dialog");
if (dialog instanceof HTMLDialogElement) {
dialog.close();
}
});
});
document.querySelectorAll(".js-week-entry-submit").forEach((form) => {
form.addEventListener("submit", async (event) => {
event.preventDefault();
try {
await postAndRefreshInPlace(form);
} catch (_error) {
window.location.reload();
}
});
});
};
const syncActionContainerVisibility = (container) => {
if (!(container instanceof HTMLElement)) return;
const hasVisibleButtons = Array.from(container.querySelectorAll("button")).some((button) => {
@@ -285,6 +353,7 @@
initWeekDragAndDrop();
initWeekCopyForward();
initWeekSlotPicker();
initWeekEntryDialogs();
initDaySnackReveal();
initWeekSnackReveal();
});
nouri/templates/planner/week.html
+52 -1
View File
@@ -213,10 +213,61 @@
{% if slot.entries %}
<div class="week-entry-stack">
{% for entry in slot.entries %}
<article class="plan-chip draggable-plan-entry" draggable="{{ 'true' if entry.can_edit else 'false' }}" data-entry-id="{{ entry.id }}" data-move-url="{{ url_for('main.planner_move', entry_id=entry.id) }}">
<article
class="plan-chip draggable-plan-entry{% if entry.can_edit %} is-editable{% endif %}"
draggable="{{ 'true' if entry.can_edit else 'false' }}"
data-entry-id="{{ entry.id }}"
data-move-url="{{ url_for('main.planner_move', entry_id=entry.id) }}"
{% if entry.can_edit %}
data-week-entry-open
data-week-entry-dialog-id="week-entry-dialog-{{ entry.id }}"
tabindex="0"
role="button"
aria-label="{{ entry.item_name }} bearbeiten"
{% endif %}
>
<strong>{{ entry.item_name }}</strong>
<small>{{ entry.visibility_label }} · {{ entry.for_label }}</small>
</article>
{% if entry.can_edit %}
<dialog class="week-entry-dialog" id="week-entry-dialog-{{ entry.id }}">
<div class="week-entry-dialog-card">
<div class="week-entry-dialog-head">
<div>
<h3>{{ entry.item_name }}</h3>
<p>{{ slot.daypart.name }} · {{ weekday_name(card.date) }}, {{ card.date.strftime('%d.%m.%Y') }}</p>
</div>
<button class="ghost-button" type="button" data-week-entry-close>Schließen</button>
</div>
<form method="post" action="{{ url_for('main.planner_update', entry_id=entry.id) }}" class="planner-entry-inline-form js-week-entry-submit">
{{ csrf_input() }}
<input type="hidden" name="plan_date" value="{{ card.date.isoformat() }}">
<input type="hidden" name="return_week" value="{{ week_start.isoformat() }}">
<label>
Für wen?
<select name="visibility">
{% for value, label in visibility_options %}
<option value="{{ value }}" {% if entry.visibility == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<label class="wide">
Notiz
<input type="text" name="note" value="{{ entry.note or '' }}" placeholder="Optional">
</label>
<div class="week-entry-dialog-actions">
<button type="submit">Speichern</button>
</div>
</form>
<form method="post" action="{{ url_for('main.planner_remove', entry_id=entry.id) }}" class="week-entry-remove-form js-week-entry-submit">
{{ csrf_input() }}
<input type="hidden" name="plan_date" value="{{ card.date.isoformat() }}">
<input type="hidden" name="return_week" value="{{ week_start.isoformat() }}">
<button class="ghost-button" type="submit">Eintrag entfernen</button>
</form>
</div>
</dialog>
{% endif %}
{% endfor %}
</div>
<div class="week-slot-actions">