[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68f9479eeb18819183ba156fba062dc1","versionInt","title","Bokningsprogram – Dart & Shuffleboard (react)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\nimport { Label } from \"@/components/ui/label\";\nimport { Trash2, Plus, Calendar as CalendarIcon } from \"lucide-react\";\n\n// =====================================================\n// Bokningsprogram – Dart 1, Shuffleboard 1, Shuffleboard 2\n// Nytt i denna version:\n// - Förslag på närmaste lediga tid om vald tid är upptagen (policy: inga överlapp)\n// - Paketpris (grupp) + pris per timme för enkelresurs, live-beräkning och lagras på bokningen\n// - Öppettider per veckodag (fyll i CONFIG.openingHoursByWeekday enligt hemsidan)\n// =====================================================\n\n// --- Konfiguration ---\nconst CONFIG = {\n slotMinutes: 60,\n // Ange öppettider per veckodag (0 = söndag, 1 = måndag, ... 6 = lördag)\n // Fyll i efter hemsidan. null betyder stängt.\n openingHoursByWeekday: [\n { open: 10, close: 23 }, // Söndag\n { open: 10, close: 23 }, // Måndag\n { open: 10, close: 23 }, // Tisdag\n { open: 10, close: 23 }, // Onsdag\n { open: 10, close: 23 }, // Torsdag\n { open: 10, close: 23 }, // Fredag\n { open: 10, close: 23 }, // Lördag\n ] as ({ open: number; close: number } | null)[],\n resources: {\n dart1: { name: \"Dart 1\", capacity: 1 },\n shuffle1: { name: \"Shuffleboard 1\", capacity: 1 },\n shuffle2: { name: \"Shuffleboard 2\", capacity: 1 },\n },\n pricing: {\n singlePerHourSEK: 200, // pris/h för en resurs\n groupPerHourSEK: 500, // pris/h för paketet (alla tre)\n },\n requireFields: [\"name\", \"email\", \"phone\"],\n};\n\n// --- Hjälpfunktioner ---\nconst fmtDate = (d: Date) => d.toISOString().slice(0, 10);\nconst todayStr = () => fmtDate(new Date());\n\nfunction toMinutes(timeStr: string) {\n const [h, m] = timeStr.split(\":\").map(Number);\n return h * 60 + m;\n}\n\nfunction minutesToHHMM(min: number) {\n const h = String(Math.floor(min / 60)).padStart(2, \"0\");\n const m = String(min % 60).padStart(2, \"0\");\n return `${h}:${m}`;\n}\n\nfunction getDayHours(dateStr: string) {\n const d = new Date(dateStr + \"T00:00:00\");\n const weekday = d.getDay(); // 0..6 (söndag..lördag)\n return CONFIG.openingHoursByWeekday[weekday];\n}\n\nfunction generateTimeSlotsForDate(dateStr: string) {\n const hours = getDayHours(dateStr);\n const slots: string[] = [];\n if (!hours) return slots; // stängt\n const start = hours.open * 60;\n const end = hours.close * 60;\n for (let t = start; t <= end - CONFIG.slotMinutes; t += CONFIG.slotMinutes) {\n slots.push(minutesToHHMM(t));\n }\n return slots;\n}\n\nfunction overlap(aStart: string, aDurMin: number, bStart: string, bDurMin: number) {\n const a0 = toMinutes(aStart);\n const a1 = a0 + aDurMin;\n const b0 = toMinutes(bStart);\n const b1 = b0 + bDurMin;\n return a0 < b1 && b0 < a1;\n}\n\nfunction uid() {\n return Math.random().toString(36).slice(2, 9);\n}\n\nfunction calcPriceSEK(hours: number, isGroup: boolean) {\n return Math.max(0, Math.round(hours * (isGroup ? CONFIG.pricing.groupPerHourSEK : CONFIG.pricing.singlePerHourSEK)));\n}\n\nfunction nextAvailableStart(dateStr: string, activities: (keyof typeof CONFIG.resources)[], startHHMM: string, durationHours: number, dayBookings: Booking[]) {\n // Sök närmaste starttid >= (vald start + slot) som funkar för alla resurser samma dag\n const slots = generateTimeSlotsForDate(dateStr);\n const startIndex = Math.max(0, slots.indexOf(startHHMM));\n for (let i = startIndex + 1; i < slots.length; i++) {\n const testStart = slots[i];\n const durMin = durationHours * 60;\n const allFree = activities.every((act) => {\n const same = dayBookings.filter((b) => b.activity === act);\n const anyOverlap = same.some((b) => overlap(testStart, durMin, b.start, b.duration * 60));\n return !anyOverlap;\n });\n if (allFree) return testStart;\n }\n return null;\n}\n\n// --- LocalStorage ---\nconst STORAGE_KEY = \"bokningar-v1\";\n\ntype Booking = {\n id: string;\n groupId?: string;\n activity: keyof typeof CONFIG.resources;\n date: string; // YYYY-MM-DD\n start: string; // HH:MM\n duration: number; // timmar\n priceSEK: number;\n name: string;\n email: string;\n phone: string;\n notes?: string;\n};\n\nfunction loadBookings(): Booking[] {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n return raw ? JSON.parse(raw) : [];\n } catch {\n return [];\n }\n}\n\nfunction saveBookings(list: Booking[]) {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(list));\n}\n\n// --- UI helpers ---\nfunction fmtSpan(start: string, durationHours: number) {\n const startMin = toMinutes(start);\n const endMin = startMin + durationHours * 60;\n return `${start}–${minutesToHHMM(endMin)}`;\n}\n\n// --- Huvudkomponent ---\nexport default function App() {\n const [date, setDate] = useState(todayStr());\n const [bookings, setBookings] = useState([]);\n const [filterActivity, setFilterActivity] = useState(\"all\");\n\n useEffect(() => {\n setBookings(loadBookings());\n }, []);\n\n useEffect(() => {\n saveBookings(bookings);\n }, [bookings]);\n\n // Självtester (\"test cases\") av kärnlogik – körs en gång i dev\n useEffect(() => {\n try {\n // Tidsformat\n console.assert(minutesToHHMM(600) === \"10:00\", \"minutesToHHMM(600) ska vara 10:00\");\n console.assert(minutesToHHMM(0) === \"00:00\", \"minutesToHHMM(0) ska vara 00:00\");\n console.assert(minutesToHHMM(1439) === \"23:59\", \"minutesToHHMM(1439) ska vara 23:59\");\n\n // Slots per datum\n const tmpDate = todayStr();\n const dayHours = getDayHours(tmpDate);\n if (dayHours) {\n const slots = generateTimeSlotsForDate(tmpDate);\n console.assert(slots[0] === `${String(dayHours.open).padStart(2, \"0\")}:00`, \"Första slot ska vara öppningstid\");\n }\n\n // Överlappningslogik + policy: ingen överlapp tillåten, kant-i-kant tillåts\n console.assert(overlap(\"10:00\", 60, \"10:00\", 60) === true, \"overlap: exakt samma slot ska overlappa\");\n console.assert(overlap(\"10:00\", 60, \"11:00\", 60) === false, \"overlap: intilliggande ska inte overlappa\");\n console.assert(overlap(\"10:30\", 60, \"11:00\", 60) === true, \"overlap: partiell överlapp ska ge true\");\n\n // nextAvailableStart (syntetiskt): om 18:00-20:00 är bokat ska förslaget bli >= 20:00\n const synthetic: Booking[] = [{ id: \"t1\", activity: \"shuffle1\", date: \"2099-01-01\", start: \"18:00\", duration: 2, priceSEK: 0, name: \"X\", email: \"x@y.se\", phone: \"1\" }];\n const proposed = nextAvailableStart(\"2099-01-01\", [\"shuffle1\"], \"18:00\", 1, synthetic);\n console.assert(proposed === null || toMinutes(proposed) >= toMinutes(\"19:00\"), \"nextAvailableStart ska föreslå >= 19:00\");\n } catch (e) {\n // ignore\n }\n }, []);\n\n const slots = useMemo(() => generateTimeSlotsForDate(date), [date]);\n const todaysHours = getDayHours(date);\n\n const dayBookings = useMemo(\n () => bookings.filter((b) => b.date === date).sort((a, b) => toMinutes(a.start) - toMinutes(b.start)),\n [bookings, date]\n );\n\n function addBooking(newB: Partial & { activities?: (keyof typeof CONFIG.resources)[]; activity?: keyof typeof CONFIG.resources }) {\n // Stöder både enkelresurs (newB.activity) och grupp (newB.activities)\n const durationMin = Number(newB.duration) * 60;\n const activities = Array.isArray(newB.activities) && newB.activities.length > 0 ? newB.activities : [newB.activity!];\n\n // Validera kundfält\n const missing = CONFIG.requireFields.filter((f) => !String((newB as any)[f] || \"\").trim());\n if (missing.length) {\n alert(`Fyll i: ${missing.join(\", \")}.`);\n return false;\n }\n // Enkel e‑postvalidering\n const emailOk = /.+@.+\\..+/.test(String(newB.email || \"\"));\n if (!emailOk) {\n alert(\"Ogiltig e‑postadress.\");\n return false;\n }\n\n // Kolla öppettider\n const hours = getDayHours(String(newB.date));\n if (!hours) {\n alert(\"Stängt den valda dagen.\");\n return false;\n }\n\n const endMin = toMinutes(String(newB.start)) + durationMin;\n if (endMin > hours.close * 60) {\n alert(\"Bokningen går utanför öppettiderna. Välj kortare längd eller tidigare start.\");\n return false;\n }\n\n // Kontrollera tillgänglighet för ALLA berörda resurser\n for (const act of activities) {\n const sameActivitySameDay = bookings.filter((b) => b.date === newB.date && b.activity === act);\n const overlapping = sameActivitySameDay.filter((b) => overlap(String(newB.start), durationMin, b.start, b.duration * 60));\n if (overlapping.length >= CONFIG.resources[act].capacity) {\n // Föreslå närmaste lediga\n const suggestion = nextAvailableStart(String(newB.date), activities, String(newB.start), Number(newB.duration), dayBookings);\n if (suggestion) {\n alert(`Fullbokat ${String(newB.start)}–${minutesToHHMM(endMin)}. Närmaste lediga start: ${suggestion}.`);\n } else {\n alert(\"Fullbokat på den valda tiden, och inga senare tider finns idag.\");\n }\n return false;\n }\n }\n\n // Allt ledigt – skapa bokningar atomärt med samma groupId om fler än en resurs\n const isGroup = activities.length > 1;\n const groupId = isGroup ? uid() : undefined;\n const priceSEK = calcPriceSEK(Number(newB.duration), isGroup);\n const base = {\n groupId,\n date: String(newB.date),\n start: String(newB.start),\n duration: Number(newB.duration),\n priceSEK,\n name: String(newB.name),\n email: String(newB.email),\n phone: String(newB.phone),\n notes: String(newB.notes || \"\"),\n } as Omit & { groupId?: string };\n\n const records: Booking[] = activities.map((act) => ({ id: uid(), activity: act, ...base }));\n setBookings((prev) => [...prev, ...records]);\n return true;\n }\n\n function removeBooking(id: string) {\n setBookings((prev) => prev.filter((b) => b.id !== id));\n }\n\n function removeGroup(groupId: string) {\n setBookings((prev) => prev.filter((b) => b.groupId !== groupId));\n }\n\n function clearDay() {\n if (confirm(\"Ta bort alla bokningar för vald dag?\")) {\n setBookings((prev) => prev.filter((b) => b.date !== date));\n }\n }\n\n return (\n

Bokningsprogram – Dart & Shuffleboard

\n setDate(e.target.value)} className=\"w-44\" />\n \n \n

\n\n

\n \n \n \n Översikt {date}\n \n \n \n {todaysHours ? (\n \n ) : (\n

Stängt denna dag.

\n )}\n \n \n\n \n \n Ny bokning\n \n \n \n \n \n

\n\n \n \n Dagens bokningar\n \n \n {dayBookings.length === 0 ? (\n

Inga bokningar ännu.

\n ) : (\n

\n
\n
{fmtSpan(b.start, b.duration)} • {CONFIG.resources[b.activity].name}
\n
{b.name} • {b.email}{b.phone ? ` • ${b.phone}` : \"\"}{b.groupId ? ` • Grupp ${b.groupId}` : \"\"}{b.notes ? ` • ${b.notes}` : \"\"}
\n
\n
\n
{b.priceSEK} kr
\n {b.groupId && (\n \n )}\n \n
\n

\n )}\n \n \n\n \n \n Inställningar\n \n \n

Öppettider per veckodag

{[\"Sön\",\"Mån\",\"Tis\",\"Ons\",\"Tors\",\"Fre\",\"Lör\"][i]}: {h ? `${h.open}:00–${h.close}:00` : \"Stängt\"}

Uppdatera enligt hemsidan i CONFIG.openingHoursByWeekday.

Priser

Enkelresurs: {CONFIG.pricing.singlePerHourSEK} kr/h • Paket: {CONFIG.pricing.groupPerHourSEK} kr/h

Tidsintervall: {CONFIG.slotMinutes} min

Resurser & kapacitet

{r.name}: {r.capacity} plats

\n \n \n

\n );\n}\n\n// --- Delkomponenter ---\nfunction DayGrid({ date, slots, bookings, onRemove }: { date: string; slots: string[]; bookings: Booking[]; onRemove: (id: string) => void; }) {\n const resourceKeys: (keyof typeof CONFIG.resources)[] = [\"dart1\", \"shuffle1\", \"shuffle2\"];\n const byActivity = useMemo(() => {\n const obj: Record = {};\n resourceKeys.forEach((k) => {\n obj[k] = bookings.filter((b) => b.date === date && b.activity === k);\n });\n return obj;\n }, [bookings, date]);\n\n return (\n

\n \n \n \n

\n );\n}\n\nfunction ResourceGrid({ title, capacity, slots, bookings, colorClass, onRemove }: { title: string; capacity: number; slots: string[]; bookings: Booking[]; colorClass: string; onRemove: (id: string) => void; }) {\n // Räkna beläggning per slot\n function occupancyAt(slot: string) {\n return bookings.filter((b) => overlap(slot, CONFIG.slotMinutes, b.start, b.duration * 60)).length;\n }\n\n return (\n

{title}

\n Kapacitet: {capacity}\n

\n {slots.map((s) => {\n const occ = occupancyAt(s);\n const free = Math.max(0, capacity - occ);\n return (\n

{s}

Lediga platser: {free}

\n \n

\n );\n })}\n

\n );\n}\n\nfunction BookingForm({ date, onSubmit, todaysHours }: { date: string; onSubmit: (b: any) => boolean; todaysHours: { open: number; close: number } | null }) {\n const [activity, setActivity] = useState(\"dart1\");\n const [bundleAll, setBundleAll] = useState(false); // Gruppbokning: Dart 1 + Shuffleboard 1 + Shuffleboard 2\n const [start, setStart] = useState(() => minutesToHHMM((getDayHours(date)?.open ?? 10) * 60));\n const [duration, setDuration] = useState(1); // per timme\n const [name, setName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n\n useEffect(() => {\n // Uppdatera starttid till dagens öppning när datum ändras\n setStart(minutesToHHMM(((todaysHours?.open ?? 10) * 60)));\n }, [date, todaysHours?.open]);\n\n const timeOptions = useMemo(() => generateTimeSlotsForDate(date), [date]);\n\n const isGroup = bundleAll;\n const priceSEK = calcPriceSEK(Number(duration), isGroup);\n\n function submit(e: React.FormEvent) {\n e.preventDefault();\n const activities = bundleAll ? [\"dart1\", \"shuffle1\", \"shuffle2\"] : [activity];\n const ok = onSubmit({ activities, activity: activities[0], date, start, duration, name: name.trim(), email: email.trim(), phone: phone.trim(), notes: notes.trim() });\n if (ok) {\n setName(\"\");\n setEmail(\"\");\n setPhone(\"\");\n setNotes(\"\");\n }\n }\n\n // Beräkna max tillåten längd så sluttid inte passerar stängning\n const startMin = toMinutes(start);\n const maxHoursFromStart = todaysHours ? Math.max(1, Math.floor((todaysHours.close * 60 - startMin) / 60)) : 1;\n const durationOptions = [1, 2, 3, 4].filter((h) => h <= maxHoursFromStart);\n\n return (\n

\n Gruppbokning\n

\n setBundleAll(e.target.checked)} />\n Boka hela paketet (Dart 1 + Shuffleboard 1 + Shuffleboard 2)\n

\n\n {!bundleAll && (\n

\n Aktivitet\n \n

\n )}\n\n

\n Starttid\n \n

\n Längd (timmar)\n \n

\n\n

\n Namn *\n setName(e.target.value)} placeholder=\"För- och efternamn\" required />\n

\n E‑post *\n setEmail(e.target.value)} placeholder=\"namn@exempel.se\" required />\n

\n Telefon *\n setPhone(e.target.value)} placeholder=\"070-123 45 67\" required />\n

\n Anteckningar (valfritt)\n setNotes(e.target.value)} placeholder=\"T.ex. företagsbokning\" />\n

\n\n

Pris: {priceSEK} kr {isGroup ? \"(paket)\" : \"(per resurs)\"}

\n \n

\n\n

Bokningarna sparas lokalt i din webbläsare (localStorage). Mobilvänligt och kan bäddas in.

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","16056615689359017187","traceTime",1776667464994]