feat: Add specific shift date field for multi-day events with date selector in EventEditor and date badge in ShiftMatrix

2026-07-31 10:52:20 +02:00
parent 67b02f6646
commit 821e14fcab
13 changed files with 104 additions and 62 deletions
@@ -11,7 +11,7 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <title>Schichtplaner — Veranstaltungsschichtpläne</title>
-    <script type="module" crossorigin src="/assets/index-9dCYFrQm.js"></script>
+    <script type="module" crossorigin src="/assets/index-BTg0Pu2I.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DyS9UMYS.css">
  </head>
  <body class="bg-paper text-main font-sans antialiased min-h-screen">
@@ -321,11 +321,13 @@ export default function App() {
      }

      for (let sData of taData.shifts) {
+        const shiftDate = sData.date || eventPayload.start_date;
        if (sData.id) {
          await apiFetch(`/shifts/${sData.id}/`, {
            method: 'PATCH',
            body: JSON.stringify({
              title: sData.title,
+              date: shiftDate,
              start_time: sData.start_time,
              end_time: sData.end_time,
              max_participants: sData.max_participants,
@@ -338,6 +340,7 @@ export default function App() {
            body: JSON.stringify({
              task_area: taId,
              title: sData.title,
+              date: shiftDate,
              start_time: sData.start_time,
              end_time: sData.end_time,
              max_participants: sData.max_participants,
@@ -143,7 +143,14 @@ export default function ShiftMatrixTable({
                      ) : null}

                      <td className="py-3.5 px-4">
-                        <div className="font-semibold text-main">{shift.title}</div>
+                        <div className="font-semibold text-main flex items-center gap-2 flex-wrap">
+                          <span>{shift.title}</span>
+                          {shift.date && (
+                            <span className="text-[10px] font-mono font-bold text-indigo-400 bg-indigo-500/10 px-2 py-0.5 rounded-sm border border-indigo-500/20">
+                              📅 {new Date(shift.date + 'T00:00:00').toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })}
+                            </span>
+                          )}
+                        </div>
                        <div className="text-[11px] font-mono text-muted flex items-center gap-1 mt-0.5">
                          <Clock className="w-3 h-3 text-muted shrink-0" />
                          <span>{shift.start_time} — {shift.end_time} Uhr</span>
@@ -25,6 +25,7 @@ export default function EventEditorPage({ eventToEdit, skills, onBack, onSubmit
        shifts: (ta.shifts || []).map(s => ({
          id: s.id,
          title: s.title,
+          date: s.date || (eventToEdit ? eventToEdit.start_date : new Date().toISOString().split('T')[0]),
          start_time: s.start_time,
          end_time: s.end_time,
          max_participants: s.max_participants || 1,
@@ -78,6 +79,7 @@ export default function EventEditorPage({ eventToEdit, skills, onBack, onSubmit
    const updated = [...taskAreas];
    updated[areaIndex].shifts.push({
      title: `Schicht ${updated[areaIndex].shifts.length + 1}`,
+      date: startDate,
      start_time: '14:00',
      end_time: '18:00',
      max_participants: 1,
@@ -300,7 +302,16 @@ export default function EventEditorPage({ eventToEdit, skills, onBack, onSubmit
                        placeholder="Titel"
                        value={shift.title}
                        onChange={(e) => updateShift(aIdx, sIdx, 'title', e.target.value)}
-                        className="sm:col-span-4 px-2.5 py-1 rounded-sm input-field text-xs"
+                        className="sm:col-span-3 px-2.5 py-1 rounded-sm input-field text-xs"
+                      />
+                      <input
+                        type="date"
+                        title="Schichtdatum"
+                        min={startDate}
+                        max={endDate}
+                        value={shift.date || startDate}
+                        onChange={(e) => updateShift(aIdx, sIdx, 'date', e.target.value)}
+                        className="sm:col-span-3 px-2 py-1 rounded-sm input-field text-xs font-mono text-indigo-400 font-bold"
                      />
                      <input
                        type="text"
@@ -316,14 +327,14 @@ export default function EventEditorPage({ eventToEdit, skills, onBack, onSubmit
                        onChange={(e) => updateShift(aIdx, sIdx, 'end_time', e.target.value)}
                        className="sm:col-span-2 px-2.5 py-1 rounded-sm input-field text-xs"
                      />
-                      <div className="sm:col-span-3 flex items-center gap-1">
-                        <span className="text-[11px] text-muted">Plätze:</span>
+                      <div className="sm:col-span-1 flex items-center gap-1">
                        <input
                          type="number"
                          min="1"
+                          title="Max. Plätze"
                          value={shift.max_participants}
                          onChange={(e) => updateShift(aIdx, sIdx, 'max_participants', parseInt(e.target.value) || 1)}
-                          className="w-full px-2 py-1 rounded-sm input-field text-xs font-bold"
+                          className="w-full px-1.5 py-1 rounded-sm input-field text-xs font-bold text-center"
                        />
                      </div>
                      <button