\n \n \n\n",[],[130,155],"6190b916-402e-4ee0-9ef0-272ed64b0959","app.tsx","30e0b382-789d-11f1-9e9e-1607ee4eb77e",["D",1783275195031],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\n\ntype Slot = { time: string; available: boolean };\n\nconst WEEKDAYS = [\"日\", \"月\", \"火\", \"水\", \"木\", \"金\", \"土\"];\n\nfunction buildDates(daysAhead: number): string[] {\n const out: string[] = [];\n const base = new Date();\n for (let i = 0; i < daysAhead; i++) {\n const d = new Date(base);\n d.setDate(base.getDate() + i);\n const s = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`;\n out.push(s);\n }\n return out;\n}\n\nfunction labelForDate(s: string): string {\n const [y, m, d] = s.split(\"-\").map(Number);\n const dow = new Date(y, m - 1, d).getDay();\n return `${m}/${d}（${WEEKDAYS[dow]}）`;\n}\n\nfunction App() {\n const [dates, setDates] = useState([]);\n const [date, setDate] = useState(\"\");\n const [slots, setSlots] = useState([]);\n const [time, setTime] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [contact, setContact] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [msg, setMsg] = useState<{ type: \"ok\" | \"err\"; text: string } | null>(null);\n const [done, setDone] = useState<{ date: string; time: string } | null>(null);\n\n useEffect(() => {\n fetch(\"/api/config\")\n .then((r) => r.json())\n .then((cfg) => {\n const ds = buildDates(cfg.daysAhead ?? 30);\n setDates(ds);\n setDate(ds[0] ?? \"\");\n });\n }, []);\n\n useEffect(() => {\n if (!date) return;\n setTime(\"\");\n setSlots([]);\n fetch(`/api/slots?date=${date}`)\n .then((r) => r.json())\n .then((d) => setSlots(d.slots ?? []));\n }, [date]);\n\n async function submit(e: React.FormEvent) {\n e.preventDefault();\n setMsg(null);\n if (!time) return setMsg({ type: \"err\", text: \"時間を選択してください\" });\n setLoading(true);\n try {\n const res = await fetch(\"/api/reservations\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ date, time, name, contact, notes }),\n });\n const data = await res.json();\n if (!res.ok) {\n setMsg({ type: \"err\", text: data.error ?? \"予約に失敗しました\" });\n fetch(`/api/slots?date=${date}`).then((r) => r.json()).then((d) => setSlots(d.slots ?? []));\n } else {\n setDone({ date, time });\n }\n } catch {\n setMsg({ type: \"err\", text: \"通信エラーが発生しました\" });\n } finally {\n setLoading(false);\n }\n }\n\n if (done) {\n return (\n \n

✅

ご予約ありがとうございます

\n {labelForDate(done.date)} {done.time} で承りました。\n

\n {\n setDone(null);\n setName(\"\");\n setContact(\"\");\n setNotes(\"\");\n setTime(\"\");\n }}\n >\n 続けて予約する\n \n

\n \n );\n }\n\n return (\n \n

\n 日付\n setDate(e.target.value)}\n >\n {dates.map((d) => (\n \n ))}\n \n

\n\n

\n 時間\n {slots.length === 0 ? (\n

この日は予約枠がありません。

\n ) : (\n

\n {slots.map((s) => (\n setTime(s.time)}\n className={\n \"px-2 py-2 rounded text-sm border transition \" +\n (!s.available\n ? \"bg-gray-100 text-gray-400 cursor-not-allowed line-through\"\n : time === s.time\n ? \"bg-gray-800 text-white border-gray-800\"\n : \"bg-white hover:border-gray-800\")\n }\n >\n {s.time}\n \n ))}\n

\n )}\n

\n\n

\n お名前 *\n setName(e.target.value)}\n />\n

\n\n

\n メール / 電話 *\n setContact(e.target.value)}\n />\n

\n\n

\n 備考・ご要望\n setNotes(e.target.value)}\n />\n

\n\n {msg && (\n

\n {msg.text}\n

\n )}\n\n \n {loading ? \"送信中…\" : time ? `${labelForDate(date)} ${time} で予約する` : \"時間を選択してください\"}\n \n \n

\n );\n}\n\nfunction Shell({ children }: { children: React.ReactNode }) {\n return (\n

ご予約

ご希望の日時を選んでお申し込みください。

{children}

\n view source\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[130,162],["D",1783275171531],[147,148],[130],["D",1783275088408],["D",1789521041830],{"_16":17,"_87":83},{"_16":17,"_80":81,"_82":83,"_33":34,"_84":85,"_86":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_108":210,"_211":212,"_213":214,"_215":26,"_216":26,"_217":26,"_218":38,"_219":-5,"_220":-7,"_221":-7,"_222":42,"_223":26,"_224":26,"_225":-5,"_226":26,"_227":26,"_228":26,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":70,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search