companion-lite: port to TypeScript

1 files changed, 85 insertions, 0 deletions

diff --git a/kittybox-rs/companion-lite/src/main.ts b/kittybox-rs/companion-lite/src/main.ts
new file mode 100644
index 0000000..d593188
--- /dev/null
+++ b/kittybox-rs/companion-lite/src/main.ts
@@ -0,0 +1,85 @@
+import { query_channels, submit, MicropubChannel, MF2 } from "./micropub_api.js";
+
+function get_token() {
+  return (form.elements.namedItem("access_token") as HTMLInputElement).value
+}
+
+const form = document.getElementById("micropub") as HTMLFormElement;
+const channel_select_radio = document.getElementById("select_channels") as HTMLInputElement;
+
+channel_select_radio.onclick = async () => {
+  const channels = await query_channels(form.action, get_token())
+  if (channels !== undefined) {
+    populate_channel_list(channels)
+  }
+}
+
+const no_channel_radio = document.getElementById("no_channel") as HTMLInputElement;
+no_channel_radio.onclick = () => {
+  (document.getElementById("channels") as HTMLElement).style.display = "none";
+  const channel_list = document.getElementById("channels_target") as HTMLElement
+  channel_list.innerHTML = "";
+}
+
+function construct_body(form: HTMLFormElement): MF2 {
+  let content = (form.elements.namedItem("content") as HTMLInputElement).value;
+  let name: string | undefined = (form.elements.namedItem("name") as HTMLInputElement).value || undefined;
+  let category: string[] = (form.elements.namedItem("category") as HTMLInputElement).value
+    .split(",")
+    .map(val => val.trim());
+
+  let channel: string[] | undefined = undefined;
+  let channel_select = (form.elements.namedItem("channel_select") as HTMLInputElement).value;
+  if (channel_select) {
+    let channel_selector = form.elements.namedItem("channel");
+    if (channel_selector instanceof RadioNodeList) {
+      channel = (Array.from(channel_selector) as HTMLInputElement[])
+        .map(i => i.checked ? i.value : false)
+        .filter(i => i) as string[];
+    } else if (channel_selector instanceof HTMLInputElement) {
+      channel = [channel_selector.value]
+    }
+  }
+  return {
+    type: ["h-entry"],
+    properties: {
+      content: [content],
+      name: name ? [name] : undefined,
+      category: category.length ? category : undefined,
+      channel: channel ? channel : undefined
+    }
+  }
+}
+
+function populate_channel_list(channels: MicropubChannel[]) {
+  (document.getElementById("channels") as HTMLElement).style.display = "block";
+  const channel_list = document.getElementById("channels_target") as HTMLElement;
+  channel_list.innerHTML = "";
+  channels.forEach((channel) => {
+    const template = (document.getElementById("channel_selector") as HTMLTemplateElement).content.cloneNode(true) as HTMLElement;
+    const input = template.querySelector("input") as HTMLInputElement;
+    const label = template.querySelector("label") as HTMLLabelElement;
+    input.id = `channel_selector_option_${channel.uid}`
+    input.value = channel.uid
+    label.htmlFor = input.id
+    label.innerHTML = `<a href="${channel.uid}">${channel.name}</a>`
+
+    channel_list.appendChild(template)
+  })
+}
+
+form.onsubmit = async (event) => {
+  event.preventDefault()
+  const mf2 = construct_body(form);
+  console.log(JSON.stringify(mf2));
+  try {
+    submit(form.action, get_token(), mf2)
+  } catch (e) {
+    // TODO show errors to user
+
+    return
+  }
+  form.clear()
+}
+
+(document.getElementById("authorized") as HTMLElement).style.display = "block";