Refactor: event group form and API, extract JS

4 files changed, 388 insertions, 17 deletions

diff --git a/public/js/modules/event-edit.js b/public/js/modules/event-edit.js
new file mode 100644
index 0000000..65d9889
--- /dev/null
+++ b/public/js/modules/event-edit.js
@@ -0,0 +1,91 @@
+$(document).ready(function () {
+    $.uploadPreview({
+        input_field: "#event-image-upload",
+        preview_box: "#event-image-preview",
+        label_field: "#event-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+    if (window.eventData.image) {
+        $("#event-image-preview").css(
+            "background-image",
+            `url('/events/${window.eventData.image}')`,
+        );
+        $("#event-image-preview").css("background-size", "cover");
+        $("#event-image-preview").css("background-position", "center center");
+    }
+    $("#timezone").val(window.eventData.timezone).trigger("change");
+});
+
+function editEventForm() {
+    return {
+        data: {
+            eventName: window.eventData.name,
+            eventLocation: window.eventData.location,
+            eventStart: window.eventData.startForDateInput,
+            eventEnd: window.eventData.endForDateInput,
+            timezone: window.eventData.timezone,
+            eventDescription: window.eventData.description,
+            eventURL: window.eventData.url,
+            hostName: window.eventData.hostName,
+            creatorEmail: window.eventData.creatorEmail,
+            eventGroupID: window.eventData.eventGroupID,
+            eventGroupEditToken: window.eventData.eventGroupEditToken,
+            interactionCheckbox: window.eventData.usersCanComment,
+            joinCheckbox: window.eventData.usersCanAttend,
+            maxAttendeesCheckbox: window.eventData.maxAttendees !== null,
+            maxAttendees: window.eventData.maxAttendees,
+        },
+        errors: [],
+        submitting: false,
+        init() {
+            // Set up Select2
+            this.select2 = $(this.$refs.timezone).select2();
+            this.select2.on("select2:select", (event) => {
+                this.data.timezone = event.target.value;
+            });
+            this.data.timezone = this.select2.val();
+        },
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventImageUpload.files[0],
+            );
+            formData.append("editToken", window.eventData.editToken);
+            try {
+                const response = await fetch(`/event/${window.eventData.id}`, {
+                    method: "PUT",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    // Set Bootstrap validation classes using 'field' property
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                window.location.reload();
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/modules/group-edit.js b/public/js/modules/group-edit.js
new file mode 100644
index 0000000..1a2c1db
--- /dev/null
+++ b/public/js/modules/group-edit.js
@@ -0,0 +1,72 @@
+$(document).ready(function () {
+    $.uploadPreview({
+        input_field: "#group-image-upload",
+        preview_box: "#group-image-preview",
+        label_field: "#group-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+    if (window.groupData.image) {
+        $("#group-image-preview").css(
+            "background-image",
+            `url('/events/${window.groupData.image}')`,
+        );
+        $("#group-image-preview").css("background-size", "cover");
+        $("#group-image-preview").css("background-position", "center center");
+    }
+    $("#timezone").val(window.groupData.timezone).trigger("change");
+});
+
+function editEventGroupForm() {
+    return {
+        data: {
+            eventGroupName: window.groupData.name,
+            eventGroupDescription: window.groupData.description,
+            eventGroupURL: window.groupData.url,
+            hostName: window.groupData.hostName,
+            creatorEmail: window.groupData.creatorEmail,
+        },
+        errors: [],
+        submitting: false,
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventGroupImageUpload.files[0],
+            );
+            formData.append("editToken", window.groupData.editToken);
+            try {
+                const response = await fetch(`/group/${window.groupData.id}`, {
+                    method: "PUT",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                window.location.reload();
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/modules/new.js b/public/js/modules/new.js
new file mode 100644
index 0000000..fbb99ed
--- /dev/null
+++ b/public/js/modules/new.js
@@ -0,0 +1,201 @@
+$(document).ready(function () {
+    if ($("#icsImportControl")[0].files[0] != null) {
+        var file = $("#icsImportControl")[0].files[0].name;
+        $("#icsImportControl")
+            .next("label")
+            .html('<i class="far fa-file-alt"></i> ' + file);
+    }
+    $("#showNewEventFormButton").click(function () {
+        $("button").removeClass("active");
+        $(
+            "#showImportEventFormButton #showNewEventGroupFormButton",
+        ).removeClass("active");
+        if ($("#newEventFormContainer").is(":visible")) {
+            $("#newEventFormContainer").slideUp("fast");
+        } else {
+            $("#newEventFormContainer").slideDown("fast");
+            $("#importEventFormContainer").slideUp("fast");
+            $("#newEventGroupFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#showImportEventFormButton").click(function () {
+        $("button").removeClass("active");
+        $("#showNewEventFormButton #showNewEventGroupFormButton").removeClass(
+            "active",
+        );
+        if ($("#importEventFormContainer").is(":visible")) {
+            $("#importEventFormContainer").slideUp("fast");
+        } else {
+            $("#importEventFormContainer").slideDown("fast");
+            $("#newEventFormContainer").slideUp("fast");
+            $("#newEventGroupFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#showNewEventGroupFormButton").click(function () {
+        $("button").removeClass("active");
+        $("#showNewEventFormButton #showImportEventFormButton").removeClass(
+            "active",
+        );
+        if ($("#newEventGroupFormContainer").is(":visible")) {
+            $("#newEventGroupFormContainer").slideUp("fast");
+        } else {
+            $("#newEventGroupFormContainer").slideDown("fast");
+            $("#newEventFormContainer").slideUp("fast");
+            $("#importEventFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#icsImportControl").change(function () {
+        var file = $("#icsImportControl")[0].files[0].name;
+        $(this)
+            .next("label")
+            .html('<i class="far fa-file-alt"></i> ' + file);
+    });
+
+    $.uploadPreview({
+        input_field: "#event-image-upload",
+        preview_box: "#event-image-preview",
+        label_field: "#event-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    $.uploadPreview({
+        input_field: "#group-image-upload",
+        preview_box: "#group-image-preview",
+        label_field: "#group-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+});
+
+function newEventForm() {
+    return {
+        data: {
+            eventName: "",
+            eventLocation: "",
+            eventStart: "",
+            eventEnd: "",
+            timezone: "",
+            eventDescription: "",
+            eventURL: "",
+            hostName: "",
+            creatorEmail: "",
+            eventGroupID: "",
+            eventGroupEditToken: "",
+            interactionCheckbox: false,
+            joinCheckbox: false,
+            maxAttendeesCheckbox: false,
+            maxAttendees: "",
+        },
+        errors: [],
+        submitting: false,
+        init() {
+            // Set up Select2
+            this.select2 = $(this.$refs.timezone).select2();
+            this.select2.on("select2:select", (event) => {
+                this.data.timezone = event.target.value;
+            });
+            this.data.timezone = this.select2.val();
+            // Reset checkboxes
+            this.data.eventGroupCheckbox = false;
+            this.data.interactionCheckbox = false;
+            this.data.joinCheckbox = false;
+            this.data.maxAttendeesCheckbox = false;
+        },
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventImageUpload.files[0],
+            );
+            try {
+                const response = await fetch("/event", {
+                    method: "POST",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                const json = await response.json();
+                window.location.assign(json.url);
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
+function newEventGroupForm() {
+    return {
+        data: {
+            eventGroupName: "",
+            eventGroupDescription: "",
+            eventGroupURL: "",
+            hostName: "",
+            creatorEmail: "",
+        },
+        errors: [],
+        submitting: false,
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            console.log(this.data);
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventGroupImageUpload.files[0],
+            );
+            try {
+                const response = await fetch("/group", {
+                    method: "POST",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                const json = await response.json();
+                window.location.assign(json.url);
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/util.js b/public/js/util.js
index cbfd239..0499a4d 100644
--- a/public/js/util.js
+++ b/public/js/util.js
@@ -1,31 +1,38 @@
-const getStoredToken = function(eventID) {
+const getStoredToken = function (eventID) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         return editTokens[eventID];
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({}));
+    } catch (e) {
+        localStorage.setItem("editTokens", JSON.stringify({}));
         return false;
     }
-}
+};
 
-const addStoredToken = function(eventID, token) {
+const addStoredToken = function (eventID, token) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         editTokens[eventID] = token;
-        localStorage.setItem('editTokens', JSON.stringify(editTokens));
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({ [eventID]: token }));
+        localStorage.setItem("editTokens", JSON.stringify(editTokens));
+    } catch (e) {
+        localStorage.setItem(
+            "editTokens",
+            JSON.stringify({ [eventID]: token }),
+        );
         return false;
     }
-} 
+};
 
-const removeStoredToken = function(eventID) {
+const removeStoredToken = function (eventID) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         delete editTokens[eventID];
-        localStorage.setItem('editTokens', JSON.stringify(editTokens));
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({}));
+        localStorage.setItem("editTokens", JSON.stringify(editTokens));
+    } catch (e) {
+        localStorage.setItem("editTokens", JSON.stringify({}));
         return false;
     }
-}
+};
+
+const unexpectedError = [
+    { message: "An unexpected error has occurred. Please try again later." },
+];