From 6b220e094f215c488eb5102e25506f5b3d371245 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Sun, 8 Oct 2023 12:11:36 +0100 Subject: Refactor: event group form and API, extract JS --- public/js/modules/event-edit.js | 91 ++++++++++++++++++ public/js/modules/group-edit.js | 72 ++++++++++++++ public/js/modules/new.js | 201 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 364 insertions(+) create mode 100644 public/js/modules/event-edit.js create mode 100644 public/js/modules/group-edit.js create mode 100644 public/js/modules/new.js (limited to 'public/js/modules') 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(' ' + 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(' ' + 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; + } + }, + }; +} -- cgit v1.2.3