v0.2 planning and ux improvements

2026-04-12 11:21:09 +02:00
parent 21014c246e
commit 36bde02c54
30 changed files with 1456 additions and 368 deletions
@@ -0,0 +1,80 @@
+(() => {
+    const getCsrfToken = () => {
+        const meta = document.querySelector('meta[name="csrf-token"]');
+        return meta ? meta.getAttribute("content") : "";
+    };
+
+    const initWeekDragAndDrop = () => {
+        const board = document.querySelector(".week-board");
+        if (!board) return;
+
+        let draggedEntry = null;
+
+        board.querySelectorAll(".draggable-plan-entry").forEach((entry) => {
+            entry.addEventListener("dragstart", () => {
+                draggedEntry = entry;
+                entry.classList.add("is-dragging");
+            });
+
+            entry.addEventListener("dragend", () => {
+                entry.classList.remove("is-dragging");
+                draggedEntry = null;
+                board.querySelectorAll(".drop-slot").forEach((slot) => slot.classList.remove("is-drag-over"));
+            });
+        });
+
+        board.querySelectorAll(".drop-slot").forEach((slot) => {
+            slot.addEventListener("dragover", (event) => {
+                event.preventDefault();
+                if (!draggedEntry) return;
+                slot.classList.add("is-drag-over");
+            });
+
+            slot.addEventListener("dragleave", () => {
+                slot.classList.remove("is-drag-over");
+            });
+
+            slot.addEventListener("drop", async (event) => {
+                event.preventDefault();
+                slot.classList.remove("is-drag-over");
+                if (!draggedEntry) return;
+
+                // Keep DnD lightweight: move on the server, then refresh into the canonical rendered state.
+                const moveUrl = draggedEntry.dataset.moveUrl;
+                const payload = new URLSearchParams({
+                    csrf_token: getCsrfToken(),
+                    target_date: slot.dataset.targetDate,
+                    target_daypart_id: slot.dataset.targetDaypartId,
+                });
+
+                try {
+                    const response = await fetch(moveUrl, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+                            "X-Requested-With": "XMLHttpRequest",
+                        },
+                        body: payload.toString(),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error("move failed");
+                    }
+
+                    const result = await response.json();
+                    if (result.redirect_url) {
+                        window.location.href = result.redirect_url;
+                    } else {
+                        window.location.reload();
+                    }
+                } catch (_error) {
+                    window.location.reload();
+                }
+            });
+        });
+    };
+
+    document.addEventListener("DOMContentLoaded", () => {
+        initWeekDragAndDrop();
+    });
+})();