Switch to TypeScript

This neccesitates installing TypeScript to build Kittybox, but
thankfully Nix actually takes care of that. Build Kittybox with Nix
and you won't have problems.

Also now I can safely do stuff.

1 files changed, 120 insertions, 0 deletions

diff --git a/kittybox-rs/javascript/src/onboarding.ts b/kittybox-rs/javascript/src/onboarding.ts
new file mode 100644
index 0000000..0b455eb
--- /dev/null
+++ b/kittybox-rs/javascript/src/onboarding.ts
@@ -0,0 +1,120 @@
+const firstOnboardingCard = "intro";
+
+function switchOnboardingCard(card: string) {
+  (Array.from(document.querySelectorAll("form.onboarding > fieldset")) as HTMLElement[])
+    .map((node: HTMLElement) => {
+      if (node.id == card) {
+        node.style.display = "block";
+      } else {
+        node.style.display = "none";
+      }
+    });
+
+  (Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")) as HTMLElement[])
+    .map(node => {
+      if (node.id == card) {
+        node.classList.add("active")
+      } else {
+        node.classList.remove("active")
+      }
+    });
+};
+
+interface Window {
+  kittybox_onboarding: {
+    switchOnboardingCard: (card: string) => void
+  }
+}
+
+window.kittybox_onboarding = {
+  switchOnboardingCard
+};
+
+(document.querySelector("form.onboarding > ul#progressbar") as HTMLElement).style.display = "";
+switchOnboardingCard(firstOnboardingCard);
+
+function switchCardOnClick(event: MouseEvent) {
+  if (event.target instanceof HTMLElement) {
+    if (event.target.dataset.card !== undefined) {
+      switchOnboardingCard(event.target.dataset.card)
+    }
+  }
+}
+
+function multiInputAddMore(event: (MouseEvent | { target: HTMLElement })) {
+  if (event.target instanceof HTMLElement) {
+    let parent = event.target.parentElement;
+    if (parent !== null) {
+      let template = (parent.querySelector("template") as HTMLTemplateElement).content.cloneNode(true);
+      parent.prepend(template);
+    }
+  }
+}
+
+(Array.from(
+  document.querySelectorAll(
+    "form.onboarding > fieldset button.switch_card"
+  )
+) as HTMLButtonElement[])
+  .map(button => {
+    button.addEventListener("click", switchCardOnClick)
+  });
+
+(Array.from(
+  document.querySelectorAll(
+    "form.onboarding > fieldset div.multi_input > button.add_more"
+  )
+) as HTMLButtonElement[])
+  .map(button => {
+    button.addEventListener("click", multiInputAddMore)
+    multiInputAddMore({ target: button });
+  });
+
+const form = document.querySelector("form.onboarding") as HTMLFormElement;
+console.log(form);
+form.onsubmit = async (event: SubmitEvent) => {
+    console.log(event);
+    event.preventDefault();
+    const form = event.target as HTMLFormElement;
+    const json = {
+        user: {
+          type: ["h-card"],
+          properties: {
+            name: [(form.querySelector("#hcard_name") as HTMLInputElement).value],
+            pronoun: (Array.from(
+              form.querySelectorAll("#hcard_pronouns")
+            ) as HTMLInputElement[])
+              .map(input => input.value).filter(i => i != ""),
+            url: (Array.from(form.querySelectorAll("#hcard_url")) as HTMLInputElement[])
+              .map(input => input.value).filter(i => i != ""),
+            note: [(form.querySelector("#hcard_note") as HTMLInputElement).value]
+          }
+        },
+        first_post: {
+          type: ["h-entry"],
+          properties: {
+            content: [(form.querySelector("#first_post_content") as HTMLTextAreaElement).value]
+          }
+        },
+      blog_name: (form.querySelector("#blog_name") as HTMLInputElement).value,
+      feeds: (Array.from(
+        form.querySelectorAll(".multi_input#custom_feeds > fieldset.feed")
+      ) as HTMLElement[])
+        .map(form => {
+          return {
+            name: (form.querySelector("#feed_name") as HTMLInputElement).value,
+            slug: (form.querySelector("#feed_slug") as HTMLInputElement).value
+          }
+        }).filter(feed => feed.name == "" || feed.slug == "")
+    };
+
+    await fetch("/.kittybox/onboarding", {
+        method: "POST",
+        body: JSON.stringify(json),
+        headers: { "Content-Type": "application/json" }
+    }).then(response => {
+        if (response.status == 201) {
+            window.location.href = window.location.href;
+        }
+    })
+}