[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_286":287,"_288":289},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","public/book.js","latestPath","fileId","73124d28-afbc-11f1-a77f-1607ee4eb77e","name","book.js","fileType","script","content","const form = document.getElementById(\"book-form\");\nconst dateEl = form.querySelector(\"[name=date]\");\nconst peopleEl = form.querySelector(\"[name=people]\");\nconst locationEl = form.querySelector(\"[name=location_type]\");\nconst cityField = document.getElementById(\"city-field\");\nconst slotsEl = document.getElementById(\"slots\");\nconst hint = document.getElementById(\"slots-hint\");\nlet preselected = form.dataset.time || \"\";\nlet seq = 0;\n\nconst fmt = (t) => {\n const [h, m] = t.split(\":\").map(Number);\n return `${h % 12 || 12}:${String(m).padStart(2, \"0\")} ${h < 12 ? \"ص\" : \"م\"}`;\n};\n\nfunction syncCity() {\n const studio = locationEl.value === \"studio\";\n cityField.hidden = studio;\n cityField.querySelector(\"select\").required = !studio && locationEl.value !== \"\";\n}\n\nasync function loadSlots() {\n const service = form.querySelector(\"[name=service_id]:checked\")?.value;\n const date = dateEl.value;\n slotsEl.replaceChildren();\n if (!service || !date) {\n hint.textContent = \"اختاري الخدمة والتاريخ لعرض الأوقات المتاحة.\";\n return;\n }\n hint.textContent = \"جارٍ تحميل الأوقات المتاحة…\";\n const my = ++seq;\n try {\n const params = new URLSearchParams({ service, date, people: peopleEl.value || \"1\" });\n const res = await fetch(`/api/slots?${params}`);\n const data = await res.json();\n if (my !== seq) return;\n if (!data.slots?.length) {\n hint.textContent = data.reason || \"لا توجد أوقات متاحة في هذا اليوم.\";\n return;\n }\n hint.textContent = \"اختاري الوقت المناسب:\";\n for (const t of data.slots) {\n const label = document.createElement(\"label\");\n label.className = \"slot\";\n const input = document.createElement(\"input\");\n input.type = \"radio\";\n input.name = \"time\";\n input.value = t;\n input.required = true;\n input.checked = t === preselected;\n const span = document.createElement(\"span\");\n span.textContent = fmt(t);\n label.append(input, span);\n slotsEl.append(label);\n }\n preselected = \"\";\n } catch {\n if (my === seq) hint.textContent = \"تعذّر تحميل الأوقات، حاولي مرة أخرى.\";\n }\n}\n\nform.addEventListener(\"change\", (e) => {\n const name = e.target.name;\n if (name === \"location_type\") syncCity();\n if (name === \"date\" || name === \"service_id\" || name === \"people\") loadSlots();\n});\n\nsyncCity();\nloadSlots();\n","createdAt",["D",1789335934408],"branchVersion","branchId","2fb3b93c-3153-49cc-928f-ccd798836746","id","d8f07974-33ec-460f-a8b5-8a56ac73d9bd","najla-makeup",["D",1789334949320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","موقع نجلاء الغفيلي ميك اب ارتست — خدمات ونظام حجوزات","imageUrl","cca8102f-07bb-4295-b44a-38d66d1d3405","pinnedFileId","01a09cac-8e2f-7716-b801-b7ea38740c6d","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f1d6e-b169-7628-a2c5-3fdc2bb2972f","tursoName","d8f0797433ec460fa8b58a56ac73d9bd","tursoHostname","d8f0797433ec460fa8b58a56ac73d9bd-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",52,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","asnfq50","handle","displayName","mfcbr4krn8-hash","avatar","https://avatars.githubusercontent.com/u/294484094?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":281,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":282,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":283,"_83":284,"_85":285,"_87":24},"tree",[178,183,187,191,192],"files",[178,179,180,181,182,183,184,185,186,187,188,189,190,191,192],"counts",{"_168":62,"_169":138,"_170":62,"_171":172,"_173":174},"contents",[130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":162,"_31":163,"_29":164,"_137":-5,"_40":41,"_39":165,"_139":58,"_37":166,"_13":62,"_33":156,"_35":-5,"_23":24,"_143":-5,"_26":167},{"_42":158,"_31":49,"_29":159,"_137":-5,"_40":41,"_39":138,"_139":58,"_37":160,"_13":62,"_33":156,"_35":-5,"_23":24,"_143":-5,"_26":161},{"_42":151,"_31":152,"_29":153,"_137":-5,"_40":41,"_39":154,"_139":58,"_37":155,"_13":62,"_33":156,"_35":-5,"_23":24,"_143":-5,"_26":157},{"_42":145,"_31":146,"_29":147,"_137":-5,"_40":41,"_39":138,"_139":24,"_37":148,"_13":62,"_33":20,"_35":149,"_23":24,"_143":-5,"_26":150},{"_42":135,"_31":136,"_29":56,"_137":-5,"_40":41,"_39":138,"_139":24,"_37":140,"_13":62,"_33":141,"_35":142,"_23":24,"_143":44,"_26":144},"226f6750-65c1-493c-a6db-5287f0367dc2","index.tsx","parentId",1,"latest",["D",1789334949320],"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n// In-memory state. Resets whenever the server restarts.\n// For persistence across restarts, use std/sqlite or std/blob.\nlet count = 0;\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n \n {children}\n \n \n);\n\nconst app = new Hono();\n\napp.get(\"/\", (c) =>\n c.html(\n \n

Hello from Hono JSX

\n A minimal Val Town starter.{\" \"}\n \n Remix this val.\n \n

\n Server count:{\" \"}\n {count}\n

\n \n Increment\n \n

\n Lives in memory on the server. Resets when the val restarts.\n

\n \n ,\n ));\n\napp.get(\"/about\", (c) =>\n c.html(\n \n

About

Server-rendered with Hono JSX on Val Town.

\n ,\n ));\n\n// API routes\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n\n// Serve static files\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// View source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;","label",[136],"3045bc29-8ad5-46f0-9f97-5a77966bb223","README.md","01a09cac-8e2f-7716-b801-b39afe182f45",["D",1789334949320],"# hono-jsx-starter\n\nA minimal [Hono](https://hono.dev) + Hono JSX starter for Val Town.\nServer-rendered HTML, no build step, no React.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| **[`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter)** *(you're here)* | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## What's here\n\n```\nindex.tsx Hono app, Layout, routes\npublic/\n favicon.svg Static asset\n counter.ts Tiny client-side script\n```\n\nThe whole app fits in one file. As you grow it, the natural next moves are:\n\n- Pull `Layout` into its own `.tsx` file once you have 3+ pages.\n- Split routes with `app.route(\"/api\", api)` if `/api/*` grows.\n- Add more files under `public/` — they're served by a single\n `app.get(\"/public/*\", ...)` route.\n\n## Patterns worth knowing\n\n**JSX pragma.** Every `.tsx` file that uses JSX needs this at the top:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\n```\n\n**Server state.** The counter on `/` is `let count = 0` at module scope. It\nlives in memory on the Val Town server and survives across requests — but resets\nwhenever the val restarts (deploys, idle timeouts, etc.). For persistent state,\nswap it for [`std/sqlite`](https://www.val.town/x/std/sqlite) or\n[`std/blob`](https://www.val.town/x/std/blob).\n\n**API routes.** The `Increment` button POSTs to `/api/increment`, which returns\nJSON. Mix server-rendered pages and JSON endpoints in the same Hono app:\n\n```ts\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n```\n\n**Static files.** `serveFile` reads the file by path and serves it with the\nright content-type. `.ts` files are transpiled to JS on request by Val Town — so\nyou can write `public/counter.ts` and reference it as\n`\n \n );\n}\n\nexport function BookingPage({ s, b }: { s: Settings; b: Booking }) {\n const msg =\n `مرحبا نجلاء 🌸\\nأرسلت طلب حجز عبر الموقع:\\nرقم الحجز: ${b.code}\\nالخدمة: ${b.service_name}\\nالموعد: ${\n fmtDate(b.date)\n } - ${fmtTime(b.time)}\\nالاسم: ${b.name}`;\n const heading = {\n pending: \"استلمنا طلب حجزك 🤍\",\n confirmed: \"تم تأكيد موعدك 🤍\",\n done: \"شكراً لزيارتك 🤍\",\n cancelled: \"تم إلغاء هذا الحجز\",\n }[b.status];\n return (\n \n

\n {STATUS_LABELS[b.status]}\n

{heading}

\n رقم الحجز: {b.code}\n

الخدمة: \n {b.service_name}\n {b.people > 1 ? ` · ${peopleLabel(b.people)}` : \"\"}\n
الموعد: \n {fmtDate(b.date)} · {fmtTime(b.time)}\n
المكان: \n {LOCATIONS[b.location_type] ?? \"\"}\n {b.city ? ` · ${b.city}` : \"\"}\n
الاسم: {b.name}

\n {b.status === \"pending\"\n ?

الموعد محجوز لك مبدئياً. أرسلي التفاصيل على واتساب لتسريع التأكيد:

\n : null}\n \n إرسال تفاصيل الحجز عبر واتساب\n \n

احتفظي برابط هذه الصفحة لمتابعة حالة حجزك.

Hello from Hono JSX

About

{heading}

لوحة الإدارة

\n {b.name} {STATUS_LABELS[b.status]}\n

الحجوزات

\n {fmtDate(date)}\n {date === today ? \" — اليوم\" : \"\"}\n

الخدمات والأسعار

معرض الأعمال

الإعدادات

مواعيد العمل

محتوى الموقع

التواصل والظهور

أيام مغلقة

Diff · v9