feat: restructure flow to date-first and add support for long/short days and activities

activity.js

@@ -2,24 +2,59 @@
 
 (function () {
   const activityGrid = document.getElementById("activityGrid");
+  const dateSummary = document.getElementById("dateSummary");
+  const timeNotice = document.getElementById("timeNotice");
   const continueBtn = document.getElementById("continueBtn");
 
-  let selectedActivity = null;
+  const selectedDate = localStorage.getItem("selectedDate");
+  const selectedDateType = localStorage.getItem("selectedDateType") || "long";
+
+  if (!selectedDate) {
+    window.location.href = "datetime.html";
+    return;
+  }
+
+  const dateObj = new Date(`${selectedDate}T00:00:00`);
+  const formattedDate = dateObj.toLocaleDateString("de-DE", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  dateSummary.textContent = `Für euer Date am ${formattedDate}.`;
+
+  let availableActivities = [];
+  let selectedList = [];
 
   fetch("appsettings.json")
     .then((response) => response.json())
-    .then((settings) => renderActivities(settings.activities || []))
+    .then((settings) => {
+      const allActivities = settings.activities || [];
+      if (selectedDateType === "short") {
+        availableActivities = allActivities.filter((a) => a.type === "short");
+      } else {
+        availableActivities = allActivities;
+      }
+      renderActivities();
+    })
     .catch(() => {
       activityGrid.textContent = "Aktivitäten konnten nicht geladen werden.";
     });
 
-  function renderActivities(activities) {
-    activities.forEach((activity) => {
+  function renderActivities() {
+    activityGrid.innerHTML = "";
+
+    availableActivities.forEach((activity) => {
       const card = document.createElement("button");
       card.type = "button";
       card.className = "activity-card";
       card.dataset.activity = activity.name;
 
+      const isSelected = selectedList.some((a) => a.name === activity.name);
+      if (isSelected) {
+        card.classList.add("selected");
+      }
+
       const icon = document.createElement("span");
       icon.className = "icon";
       icon.setAttribute("aria-hidden", "true");
@@ -30,23 +65,70 @@
       label.textContent = activity.name;
 
       card.append(icon, label);
+
       card.addEventListener("click", () => {
-        activityGrid.querySelectorAll(".activity-card").forEach((c) => c.classList.remove("selected"));
-        card.classList.add("selected");
-        selectedActivity = activity.name;
-        continueBtn.disabled = false;
+        handleCardClick(activity);
       });
 
       activityGrid.appendChild(card);
     });
+
+    updateNoticeAndContinue();
+  }
+
+  function handleCardClick(activity) {
+    const isAlreadySelected = selectedList.some((a) => a.name === activity.name);
+
+    if (activity.type === "long") {
+      if (isAlreadySelected) {
+        selectedList = [];
+      } else {
+        selectedList = [activity];
+      }
+    } else {
+      // Short activity
+      if (isAlreadySelected) {
+        selectedList = selectedList.filter((a) => a.name !== activity.name);
+      } else {
+        // If a long activity was selected, replace it
+        if (selectedList.some((a) => a.type === "long")) {
+          selectedList = [activity];
+        } else if (selectedList.length >= 2) {
+          // Max 2 short activities, replace the second one
+          selectedList = [selectedList[0], activity];
+        } else {
+          selectedList.push(activity);
+        }
+      }
+    }
+
+    renderActivities();
+  }
+
+  function updateNoticeAndContinue() {
+    const shortCount = selectedList.filter((a) => a.type === "short").length;
+    const hasLong = selectedList.some((a) => a.type === "long");
+
+    if (selectedDateType === "long" && shortCount === 1 && !hasLong) {
+      timeNotice.textContent =
+        "💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine 2. kurze Aktivität auswählen.";
+      timeNotice.classList.remove("hidden");
+    } else if (selectedDateType === "long" && shortCount === 2) {
+      timeNotice.textContent = "🎉 Perfekt! Du hast 2 kurze Aktivitäten für euren langen Tag ausgewählt.";
+      timeNotice.classList.remove("hidden");
+    } else {
+      timeNotice.classList.add("hidden");
+    }
+
+    continueBtn.disabled = selectedList.length === 0;
   }
 
   continueBtn.addEventListener("click", () => {
-    if (!selectedActivity) {
+    if (selectedList.length === 0) {
       return;
     }
-    // Ablage für die spätere Anbindung an Datenbank/Storage
-    localStorage.setItem("selectedActivity", selectedActivity);
-    window.location.href = "datetime.html";
+    localStorage.setItem("selectedActivities", JSON.stringify(selectedList));
+    localStorage.setItem("selectedActivity", selectedList.map((a) => a.name).join(" + "));
+    window.location.href = "name.html";
   });
 })();