1 files changed, 76 insertions, 0 deletions
diff --git a/public/application.js b/public/application.js
new file mode 100644
index 0000000..dcc45f8
--- /dev/null
+++ b/public/application.js
@@ -0,0 +1,76 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+  const { createApp, ref } = Vue
+  const regex = /\s*(?<sparklee>@\w+)\s+(?<reason>.+)/
+
+  const app = createApp({
+    created: function() {
+      this.reload();
+      this.intervalId = setInterval(() => this.reload(), 30000);
+    },
+    destroyed: function() {
+      if (this.intervalId)
+        clearInterval(this.intervalId);
+      this.intervalId = null;
+    },
+    computed: {
+      heading: function() {
+        return this.sparkles.length == 0 ? "No Sparkles Sent" : "Recent Sparkles";
+      },
+      recentSparkles: function() {
+        return this.sparkles.reverse();
+      },
+      isDisabled: function() {
+        return this.isSending || !this.isValid();
+      },
+    },
+    data() {
+      return {
+        intervalId: null,
+        errorMessage: "",
+        isSending: false,
+        sparkle: "",
+        sparkles: [],
+      }
+    },
+    methods: {
+      reload: function() {
+        fetch("/sparkles")
+          .then((response) => response.json())
+          .then((json) => this.sparkles = json)
+          .catch((json) => console.dir(json));
+      },
+      isValid: function() {
+        return this.sparkle.length > 0;
+      },
+      submitSparkle: function() {
+        this.isSending = true;
+
+        let matches = regex.exec(this.sparkle)
+        let sparklee = matches.groups.sparklee
+        let reason = matches.groups.reason
+
+        fetch("/sparkles", {
+          method: "POST",
+          mode: "cors",
+          cache: "no-cache",
+          headers: { "Content-Type": "application/json" },
+          redirect: "follow",
+          body: JSON.stringify({ sparklee: sparklee, reason: reason })
+        }).then((response) => {
+          response.json().then((json) => {
+            this.isSending = false;
+            if (response.ok) {
+              this.sparkles.push(json);
+              this.sparkle = "";
+            } else {
+              this.errorMessage = json["error"];
+            }
+          })
+        }).catch((error) => console.error(error));
+      },
+    }
+  })
+
+  app.mount('#app')
+})
+