Convert to modules (#10)

* Converted scripts to modules Miscellaneous: * fix country subtag * make styles href relative to root
magratheaguide · Feb 22, 2022 · ac28475 · ac28475
1 parent 32a7a38
commit ac28475
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 113 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-us">
+<html lang="en-US">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -14,10 +14,9 @@
             integrity="sha384-ZEnykvpKcqtBhYvsDZKsHFcCphbGlWNx3wG9ycweMcUvL4IMfa0d6gv+JhT45O/X"
             rel="stylesheet"
         />
-        <link href="styles.css" rel="stylesheet" />
+        <link href="/styles.css" rel="stylesheet" />
 
-        <script src="js/dependent-fields.js" defer></script>
-        <script src="js/main.js" defer></script>
+        <script src="/main.js" type="module"></script>
     </head>
     <body class="flow">
         <header>

diff --git a/js/dependent-fields.js b/js/dependent-fields.js
diff --git a/js/main.js b/js/main.js
diff --git a/main.js b/main.js
@@ -0,0 +1,8 @@
+import * as Send from "/modules/send.js";
+import * as HandleDependencies from "/modules/dependent-input.js";
+
+const form = document.querySelector("form");
+const output = document.querySelector("output");
+
+Send.initialize(form, output);
+HandleDependencies.initialize(form);
diff --git a/modules/dependent-input.js b/modules/dependent-input.js
@@ -0,0 +1,37 @@
+let form;
+let dependencyTriggers, dependencyFollowers;
+
+function initialize(f) {
+    form = f;
+
+    dependencyTriggers = form.querySelectorAll("input.js-dependency");
+    dependencyFollowers = form.querySelectorAll(".js-dependency:not(input)");
+
+    dependencyTriggers.forEach((trigger) => {
+        // consider initial states
+        if (trigger.checked) {
+            updateDependencyFollowers(trigger.name, trigger.value);
+        }
+
+        // update on change
+        trigger.addEventListener("change", () => {
+            updateDependencyFollowers(
+                trigger.name,
+                trigger.value,
+                trigger.checked
+            );
+        });
+    });
+}
+
+function updateDependencyFollowers(key, value, checked = true) {
+    dependencyFollowers.forEach((follower) => {
+        if (follower.dataset[key]) {
+            if (checked && follower.dataset[key] == value)
+                follower.removeAttribute("hidden");
+            else follower.setAttribute("hidden", "");
+        }
+    });
+}
+
+export { initialize };
diff --git a/modules/send.js b/modules/send.js
@@ -0,0 +1,77 @@
+let form, output;
+
+function initialize(f, o) {
+    form = f;
+    output = o;
+
+    form.addEventListener("submit", handleSubmit);
+}
+
+function handleSubmit(event) {
+    event.preventDefault();
+
+    let submitButton = event.submitter;
+    let url = constructUrl(form.elements);
+    let body = new FormData();
+
+    output.value = "";
+    submitButton.setAttribute("disabled", "");
+
+    // TODO: Need to teach this how to check dependent fields
+    if (form.elements.buildFrom.value === "json") {
+        body.append("payload_json", form.elements.payload_json.value);
+    } else {
+        body.append("content", form.elements.content.value);
+    }
+
+    fetch(url, {
+        body: body,
+        method: "POST",
+    }).then((response) => {
+        console.log(response);
+
+        displayResponse(response);
+    });
+
+    submitButton.removeAttribute("disabled");
+}
+
+function constructUrl(elements) {
+    let baseUrl = elements.action.value;
+    let threadId = elements.thread_id.value.trim();
+
+    if (threadId) {
+        return `${baseUrl}?thread_id=${threadId}`;
+    }
+
+    return baseUrl;
+}
+
+function displayResponse(response) {
+    if (response.ok) {
+        insertLinebreak(output);
+        output.value = "Message sent successfully";
+    } else {
+        output.value = `HTTP Status Code ${response.status}: ${response.statusText}`;
+
+        response.text().then((text) => {
+            try {
+                let json = JSON.parse(text);
+
+                for (const [key, value] of Object.entries(json)) {
+                    insertLinebreak(output);
+                    output.append(`${key}: ${value}`);
+                }
+            } catch {
+                insertLinebreak(output);
+                output.append(text);
+            }
+        });
+    }
+}
+
+function insertLinebreak(element) {
+    element.append(document.createElement("br"));
+}
+
+export { initialize };