rewrite phase 5

2026-05-09 14:57:28 +02:00
parent 3d2aea7f7c
commit edeb8ef8e3
16 changed files with 812 additions and 33 deletions
@@ -0,0 +1,164 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Button from "@/app/ui/Button";
+import { useEventsStore } from "@/hooks/useEventsStore";
+
+type AddEventModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+};
+
+const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, className = "" }) => {
+  const [title, setTitle] = useState("");
+  const [destination, setDestination] = useState("");
+  const [eventTime, setEventTime] = useState("");
+  const [eventDate, setEventDate] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const { addEvent } = useEventsStore();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim() || !destination.trim() || !eventTime.trim() || !eventDate.trim()) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const eventTimeDate = new Date(`${eventDate} ${eventTime}`);
+
+      await addEvent({
+        id: `manual-${Date.now()}`,
+        title: title.trim(),
+        destination: destination.trim(),
+        eventTime: eventTimeDate,
+        source: "manual",
+      });
+
+      // Reset form and close modal
+      setTitle("");
+      setDestination("");
+      setEventTime("");
+      setEventDate("");
+      onClose();
+    } catch (err) {
+      console.error("Error adding event:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Close modal when clicking outside
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Close modal with Escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full ${className}`}>
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">Add Manual Event</h3>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="event-title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Event Title
+              </label>
+              <input
+                id="event-title"
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Team Meeting"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                required
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="event-destination"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              >
+                Destination
+              </label>
+              <input
+                id="event-destination"
+                type="text"
+                value={destination}
+                onChange={(e) => setDestination(e.target.value)}
+                placeholder="Vienna Main Station"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                required
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="event-date" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Date
+                </label>
+                <input
+                  id="event-date"
+                  type="date"
+                  value={eventDate}
+                  onChange={(e) => setEventDate(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                  required
+                />
+              </div>
+              <div>
+                <label htmlFor="event-time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Time
+                </label>
+                <input
+                  id="event-time"
+                  type="time"
+                  value={eventTime}
+                  onChange={(e) => setEventTime(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                  required
+                />
+              </div>
+            </div>
+            <div className="flex justify-end space-x-3 mt-6">
+              <Button type="button" variant="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading ? <>Add Event</> : <>Add Event</>}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddEventModal;