SG Daily Essentials

\n {/* NOTES */}\n {active === \"notes\" && (\n

Quick notes

\n \n

\n                <button>Add note</button>\n              </form>\n              <ul className=\"list\">\n                {notes.map((n: any) => (\n                  <li key={n.id}>\n                    <span className=\"grow\">{n.text}</span>\n                    <form method=\"post\" action=\"/?t=notes\">\n                      <input type=\"hidden\" name=\"action\" value=\"delNote\" />\n                      <input type=\"hidden\" name=\"id\" value={n.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {notes.length === 0 && <p className=\"empty\">No notes yet.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* TO-DO */}\n          {active === \"todo\" && (\n            <section>\n              <h2>To-do list <small>{open} open</small></h2>\n              <form method=\"post\" action=\"/?t=todo\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"addTodo\" />\n                <input name=\"text\" placeholder=\"What needs doing?\" autoComplete=\"off\" required />\n                <input name=\"reminder\" type=\"datetime-local\" aria-label=\"Reminder date & time\" />\n                <button>Add</button>\n              </form>\n              <ul className=\"list\">\n                {todos.map((t: any) => (\n                  <li key={t.id} className={t.done ? \"done\" : isOverdue(t) ? \"overdue\" : \"\"}>\n                    <form method=\"post\" action=\"/?t=todo\" className=\"toggle\">\n                      <input type=\"hidden\" name=\"action\" value=\"toggleTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"check\">{t.done ? \"✓\" : \"\"}</button>\n                    </form>\n                    <div className=\"grow todobody\">\n                      <span>{t.text}</span>\n                      {t.reminder && (\n                        <small className={isOverdue(t) ? \"due-due\" : \"due\"}>\n                          {isOverdue(t) ? \"⏰ overdue · \" : \"reminder · \"}{fmtReminder(t.reminder)}\n                        </small>\n                      )}\n                    </div>\n                    <form method=\"post\" action=\"/?t=todo\">\n                      <input type=\"hidden\" name=\"action\" value=\"delTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {todos.length === 0 && <p className=\"empty\">Nothing on the list.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* DRAWINGS */}\n          {active === \"drawings\" && (\n            <section>\n              <h2>Shop drawing revisions</h2>\n              <details className=\"add\">\n                <summary>+ Add drawing / revision</summary>\n                <form method=\"post\" action=\"/?t=drawings\" className=\"grid\">\n                  <input type=\"hidden\" name=\"action\" value=\"addDraw\" />\n                  <input name=\"drawingNo\" placeholder=\"Drawing no. (e.g. A-101)\" required />\n                  <input name=\"client\" placeholder=\"Client\" />\n                  <input name=\"revision\" placeholder=\"Revision (A/B/C...)\" />\n                  <select name=\"status\">\n                    <option>draft</option><option>issued</option>\n                    <option>client review</option><option>approved</option>\n                  </select>\n                  <input name=\"dateIssued\" placeholder=\"Date issued (DD/MM/YYYY)\" />\n                  <textarea name=\"notes\" rows={2} placeholder=\"Notes\" />\n                  <button>Save</button>\n                </form>\n              </details>\n              <div className=\"drawcards\">\n                {drawings.map((d: any) => (\n                  <div className=\"card\" key={d.id}>\n                    <div className=\"cardhead\">\n                      <strong>{d.drawingNo}</strong>\n                      <span className=\"chip\" style={{ background: statusColor(d.status) }}>{d.status}</span>\n                    </div>\n                    <div className=\"row\"><b>Client:</b> {d.client || \"—\"}</div>\n                    <div className=\"row\"><b>Rev:</b> {d.revision || \"—\"}</div>\n                    <div className=\"row\"><b>Issued:</b> {d.dateIssued || \"—\"}</div>\n                    {d.notes && <div className=\"row note\">{d.notes}</div>}\n                    <form method=\"post\" action=\"/?t=drawings\">\n                      <input type=\"hidden\" name=\"action\" value=\"delDraw\" />\n                      <input type=\"hidden\" name=\"id\" value={d.id} />\n                      <button className=\"ghost\">Remove</button>\n                    </form>\n                  </div>\n                ))}\n                {drawings.length === 0 && <p className=\"empty\">No drawings tracked yet.</p>}\n              </div>\n            </section>\n          )}\n\n          {/* CALCULATOR */}\n          {active === \"calc\" && (\n            <section>\n              <h2>Calculator</h2>\n              <p className=\"empty\">\n                Calculator needs tiny client-side JS to be interactive. For now, quick server-side\n                sums: use the form below (e.g. <code>12+7</code>).\n              </p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"calc\" />\n                <input name=\"expr\" placeholder=\"Expression e.g. 12*7+3\" required />\n                <button>Compute</button>\n              </form>\n              {data.calcResult != null && <p className=\"result\">= {data.calcResult}</p>}\n\n              <h3 className=\"sub\">Area → square feet</h3>\n              <p className=\"hint\">Single value in m², or two dimensions (length × width).</p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"sqft\" />\n                <input name=\"v1\" type=\"number\" step=\"any\" placeholder=\"m² or length\" required />\n                <input name=\"v2\" type=\"number\" step=\"any\" placeholder=\"width in m (optional)\" />\n                <button>To square feet</button>\n              </form>\n              {data.sqftResult && <p className=\"result\">{data.sqftResult}</p>}\n            </section>\n          )}\n\n          {/* CONVERTER */}\n          {active === \"convert\" && (\n            <section>\n              <h2>Metric unit converter</h2>\n              <form method=\"post\" action=\"/?t=convert\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"convert\" />\n                <input name=\"value\" type=\"number\" step=\"any\" placeholder=\"Value\" required />\n                <select name=\"from\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <span className=\"convto\">→</span>\n                <select name=\"to\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <button>Convert</button>\n              </form>\n              {data.convertResult && <p className=\"result\">{data.convertResult}</p>}\n            </section>\n          )}\n        </main>\n\n        <footer>\n          Data persists on your val's server (std/blob). Works great on mobile.\n        </footer>\n      </body>\n    </html>\n  );\n}\n\n// ---------- mutations & conversions ----------\nconst TO_M: Record<string, number> = { mm: 0.001, cm: 0.01, m: 1, km: 1000, g: 0.001, kg: 1, t: 1000 };\n\nasync function applyMutation(data: any, form: Record<string, string>) {\n  const a = form.action;\n  const id = () => Math.random().toString(36).slice(2, 9);\n\n  if (a === \"addNote\") data.notes.unshift({ id: id(), text: (form.text || \"\").trim() });\n  else if (a === \"delNote\") data.notes = data.notes.filter((n: any) => n.id !== form.id);\n  else if (a === \"addTodo\") data.todos.unshift({ id: id(), text: (form.text || \"\").trim(), done: false, reminder: (form.reminder || \"\").trim() || undefined });\n  else if (a === \"delTodo\") data.todos = data.todos.filter((t: any) => t.id !== form.id);\n  else if (a === \"toggleTodo\")\n    data.todos = data.todos.map((t: any) => (t.id === form.id ? { ...t, done: !t.done } : t));\n  else if (a === \"addDraw\")\n    data.drawings.push({\n      id: id(), drawingNo: (form.drawingNo || \"\").trim(), client: (form.client || \"\").trim(),\n      revision: (form.revision || \"\").trim(), status: (form.status || \"draft\").trim(),\n      dateIssued: (form.dateIssued || \"\").trim(), notes: (form.notes || \"\").trim(),\n    });\n  else if (a === \"delDraw\") data.drawings = data.drawings.filter((d: any) => d.id !== form.id);\n  else if (a === \"convert\") {\n    const v = Number(form.value);\n    if (isNaN(v)) data.convertResult = \"Enter a number.\";\n    else {\n      const from = TO_M[form.from] ?? 1, to = TO_M[form.to] ?? 1;\n      data.convertResult = `${v} ${form.from} = ${Number((v * from / to).toFixed(6))} ${form.to}`;\n    }\n  } else if (a === \"calc\") {\n    const expr = (form.expr || \"\").replace(/[^0-9+\\-*/(). ]/g, \"\").trim();\n    try { data.calcResult = String(Function(`\"use strict\"; return (${expr || \"0\"})`)()); }\n    catch { data.calcResult = \"Invalid expression\"; }\n  } else if (a === \"sqft\") {\n    const v1 = Number(form.v1);\n    const v2 = form.v2 ? Number(form.v2) : null;\n    if (isNaN(v1) || (form.v2 && isNaN(v2 as number))) data.sqftResult = \"Enter valid numbers.\";\n    else {\n      const areaM2 = (v2 == null ? v1 : v1 * (v2 as number)); // m²\n      const sqft = areaM2 * 10.7639;\n      data.sqftResult = `${v2 == null ? `${v1} m²` : `${v1} m × ${v2} m`} = ${Number(sqft.toFixed(2))} sq ft`;\n    }\n  }\n  return data;\n}\n\n// ---------- HTTP entrypoint ----------\nexport default async function handler(req: Request) {\n  const url = new URL(req.url);\n\n  if (url.pathname === \"/style.css\") {\n    const css = `\n      * { box-sizing: border-box; }\n      body { font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; margin: 0;\n             background: #f6f7f8; color: #1c1c1c; line-height: 1.5; }\n      header { background: #1a2b3c; color: #fff; padding: 1rem 1.25rem; }\n      header h1 { margin: 0; font-size: 1.2rem; }\n      header .date { font-size: .85rem; opacity: .8; margin-top: .25rem; display: block; }\n      nav.tabs { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #e3e5e8; }\n      nav.tabs a { padding: .8rem 1rem; text-decoration: none; color: #555; white-space: nowrap; font-weight: 600; }\n      nav.tabs a.active { color: #1a2b3c; box-shadow: inset 0 -3px 0 #1a2b3c; }\n      main { max-width: 640px; margin: 0 auto; padding: 1.25rem; }\n      h2 { font-size: 1.05rem; margin: 0 0 .9rem; }\n      h2 small { color: #888; font-weight: 400; }\n      form { display: flex; gap: .5rem; margin-bottom: 1rem; }\n      form.grid { flex-wrap: wrap; }\n      form.toggle { margin: 0; padding: 0; }\n      input, select, textarea, button {\n        font: inherit; padding: .65rem .7rem; border-radius: 8px; border: 1px solid #cfd4d8; }\n      input, select, textarea { flex: 1; min-width: 120px; background: #fff; }\n      textarea { resize: vertical; }\n      button { background: #1a2b3c; color: #fff; border: none; cursor: pointer; font-weight: 600; }\n      button.ghost { background: transparent; color: #888; border: 1px solid #e3e5e8; padding: .2rem .55rem; flex: 0; }\n      button.check { background: transparent; border: 2px solid #cfd4d8; width: 1.5rem; height: 1.5rem;\n                     padding: 0; border-radius: 50%; color: #2e7d32; font-weight: 800; flex: 0; }\n      ul.list { list-style: none; margin: 0; padding: 0; }\n      ul.list li { display: flex; align-items: center; gap: .6rem; background: #fff;\n                   border: 1px solid #e3e5e8; padding: .6rem .8rem; margin-bottom: .5rem; border-radius: 8px; }\n      ul.list li .grow { flex: 1; }\n      ul.list li.done .grow { text-decoration: line-through; color: #888; }\n      ul.list li.overdue { border-color: #d32f2f; background: #fff5f5; }\n      .todobody { display: flex; flex-direction: column; line-height: 1.3; }\n      .todobody small { font-size: .75rem; }\n      .todobody .due { color: #888; }\n      .todobody .due-due { color: #d32f2f; font-weight: 600; }\n      h3.sub { font-size: .95rem; margin: 1.2rem 0 .3rem; }\n      .empty, .hint { color: #888; font-size: .9rem; }\n      details.add { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }\n      details.add summary { cursor: pointer; font-weight: 600; }\n      details.add form { margin-top: .7rem; margin-bottom: 0; }\n      .drawcards { display: grid; gap: .6rem; }\n      .card { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .8rem; }\n      .cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }\n      .chip { color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; }\n      .row { font-size: .9rem; }\n      .row.note { color: #555; margin-top: .2rem; }\n      .convto { align-self: center; color: #888; }\n      .result { font-weight: 700; }\n      footer { text-align: center; color: #a0a6ab; font-size: .8rem; padding: 1.5rem; }\n      @media (max-width: 480px){ form{ flex-wrap: wrap; } input,select,textarea,button{ min-width:100%; } }\n    `;\n    return new Response(css, { headers: { \"content-type\": \"text/css; charset=utf-8\" } });\n  }\n\n  let data = await loadData();\n  if (req.method === \"POST\") {\n    const fd = await req.formData();\n    const kv: Record<string, string> = {};\n    for (const [k, v] of fd.entries()) kv[k] = String(v);\n    data = await applyMutation(data, kv);\n    await saveData(data);\n    const t = url.searchParams.get(\"t\") || \"notes\";\n    return Response.redirect(`${url.origin}/?t=${t}`, 303);\n  }\n\n  const active = url.searchParams.get(\"t\") || \"notes\";\n  const html = \"<!doctype html>\" + renderToStaticMarkup(React.createElement(Page, { data, active }));\n  return new Response(html, { headers: { \"content-type\": \"text/html; charset=utf-8\" } });\n}\n","sg-essentials","children",[],[162],["D",1788681370604],[],[18],["D",1788681365582],{"_11":12,"_120":69},{"_11":12,"_115":116,"_68":69,"_30":67,"_117":118,"_119":24},{"_38":106,"_13":16,"_32":35,"_107":71,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"ctx",{"_52":-5,"_139":212,"_213":214,"_215":216,"_217":24,"_218":24,"_219":24,"_220":83,"_221":-5,"_222":-7,"_223":-7,"_224":26,"_225":24,"_226":24,"_227":-5,"_228":24,"_229":24,"_230":24,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":16,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"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"]
</article></body></html>

History · index.ts