todov.js

   1 /** @license 0BSD 2020 k0tyk <k0tyk@pm.me> */
   2 import { createElement as h } from "./.crank/index.js";
   3 import { Todo } from "./m.js";
   4 class Props {
   5   location = location;
   6   method = "";
   7   title = "";
   8   xs = [""];
   9 }
  10 /** @param {Props} props */ export async function c(props) {
  11   var { TodoQ } = await import("./.mq.js");
  12   var { Repo } = await import("./repo.js");
  13   var m = /^\?done\.set=([01])\&id\.eq=(.+)$/.exec(props.location.search);
  14   if (m)
  15     new Repo(Todo).patch(
  16       { done: Number(m[1]) },
  17       new TodoQ().id.eq(decodeURIComponent(m[2]))
  18     );
  19   return { ...props, title: "TodoV", xs: new Repo(Todo).get(new TodoQ()) };
  20 }
  21 /** @param {Props} props */ export function* v(props) {
  22   var m = props;
  23   this.addEventListener("click", (ev) => {
  24     if (/^done/.test(ev.target.id))
  25       for (var x of m.xs)
  26         if (x.id == ev.target.value)
  27           fetch(
  28             `/todo?done.set=${x.done ? 0 : 1}&id.eq=${encodeURIComponent(x.id)}`
  29           )
  30             .then(async (x) => ((m = await x.json()), this.refresh()))
  31             .catch((e) => alert(`${e.message}\n${e.stack}`));
  32   });
  33   while (true)
  34     yield h("form", { style: { "line-height": 1.5, padding: "0 4em" } }, [
  35       h("h1", null, m.title),
  36       m.xs.map((x) =>
  37         h("p", { id: x.id }, [
  38           h("input", {
  39             checked: x.done ? "checked" : null,
  40             id: `done${x.id}`,
  41             name: "id.eq",
  42             type: "checkbox",
  43             value: x.id,
  44           }),
  45           h("label", { for: `done${x.id}` }, x.text),
  46         ])
  47       ),
  48     ]);
  49 }