From b795d07ed7a1b705b72b171f8e8de267a720223b Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Sat, 7 Oct 2023 14:30:24 +0100
Subject: refactor: event form and api routes

---
 views/partials/editeventmodal.handlebars | 264 +++++++++++++++----------------
 1 file changed, 124 insertions(+), 140 deletions(-)

(limited to 'views/partials/editeventmodal.handlebars')

diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index b4b0ea6..2572cbb 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -8,140 +8,21 @@
         </button>
       </div>
       <div class="modal-body">
-        <form id="editEventForm" action="/editevent/{{eventData.id}}/{{eventData.editToken}}" method="post"
-          enctype="multipart/form-data" autocomplete="off">
-          <div class="form-group">
-            <label for="eventName" class="col-form-label">Event name</label>
-            <input type="text" class="form-control" id="eventName" name="eventName"
-              placeholder="Make it snappy." value="{{eventData.name}}" data-validation="required length"
-              data-validation-length="3-120">
-          </div>
-          <div class="form-group">
-            <label for="eventLocation" class="col-form-label">Location</label>
-            <input type="text" class="form-control" id="eventLocation" name="eventLocation"
-              placeholder="Be specific." value="{{eventData.location}}" data-validation="required length"
-              data-validation-length="3-120">
-          </div>
-          <div class="form-group">
-            <label for="eventStart" class="col-form-label">Starts</label>
-            <input readonly type="text" class="form-control" id="eventStart" name="eventStart" value=""
-              data-validation="required">
-          </div>
-          <div class="form-group">
-            <label for="eventEnd" class="col-form-label">Ends</label>
-            <input readonly type="text" class="form-control" id="eventEnd" name="eventEnd" value=""
-              data-validation="required">
-          </div>
-          <div class="form-group">
-            <label for="timezone" class="col-form-label">Timezone</label>
-            <select class="select2" id="timezone" name="timezone"></select>
-          </div>
-          <div class="form-group">
-            <label for="eventDescription" class="col-form-label">Description</label>
-            <textarea class="form-control" id="eventDescription" name="eventDescription"
-              data-validation="required">{{eventData.description}}</textarea>
-            <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting
-              supported.</small>
-          </div>
-          <div class="form-group">
-            <label for="eventURL" class="col-form-label">Link</label>
-            <input type="url" class="form-control" id="eventURL" name="eventURL" value="{{eventData.url}}"
-              placeholder="For tickets or another event page (optional)." data-validation="url"
-              data-validation-optional="true">
-          </div>
-          <div class="form-group">
-            <label for="hostName" class="col-form-label">Host name</label>
-            <input type="text" class="form-control" id="hostName" name="hostName"
-              placeholder="Will be shown on the event page (optional)." value="{{eventData.hostName}}"
-              data-validation="length" data-validation-length="3-120" data-validation-optional="true">
-          </div>
-          <div class="form-group">
-            <label for="eventImage" class="col-form-label">Cover image</label>
-            <div class="image-preview" id="image-preview">
-              <label for="image-upload" id="image-label">Choose file</label>
-              <input type="file" name="imageUpload" id="image-upload" />
-            </div>
-            <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
-            {{#if eventData.image}}
-              <button type="button" class="btn btn-danger" id="deleteImage">Delete image</button>
-            {{/if}}
-          </div>
-          <div class="form-group">
-            <div class="mb-2">Options</div>
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="eventGroupCheckbox"
-                name="eventGroupCheckbox" {{#if eventData.eventGroup}}checked{{/if}}>
-              <label class="form-check-label" for="eventGroupCheckbox">
-                This event is part of an event group
-              </label>
-            </div>
-            <div class="card text-white bg-secondary my-2" id="eventGroupData" {{#if eventData.eventGroup}}style="display:flex" {{/if}}>
-              <div class="card-header">
-                <strong>Link this event to an event group</strong>
-              </div>
-              <div class="card-body">
-                <div class="form-group">
-                  <label for="eventGroupID" class="form-label">Event group ID</label>
-                  <div class="form-group">
-                    <input type="text" class="form-control" id="eventGroupID" name="eventGroupID"
-                      placeholder="" data-validation-optional="true" value="{{eventData.eventGroup.id}}">
-                    <small class="form-text">You can find this short string of characters in the
-                      event group's link, in your confirmation email, or on the event group's
-                      page.</small>
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label for="eventGroupEditToken" class="form-label">Event group secret
-                    editing code</label>
-                  <div class="form-group">
-                    <input type="text" class="form-control" id="eventGroupEditToken"
-                      name="eventGroupEditToken" placeholder="" data-validation-optional="true" value="{{eventData.eventGroup.editToken}}">
-                    <small class="form-text">You can find this long string of characters in the
-                      confirmation email you received when you created the event group.</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="interactionCheckbox"
-                name="interactionCheckbox" {{#if eventData.usersCanComment}}checked{{/if}}>
-              <label class="form-check-label" for="interactionCheckbox">
-                Users can post comments on this event
-              </label>
-            </div>
-            <div class="form-check">
-              <input class="form-check-input {{#unless eventData.usersCanAttend}}unchecked{{/unless}}"
-                type="checkbox" id="joinCheckbox" name="joinCheckbox"
-                {{#if eventData.usersCanAttend}}checked{{/if}}>
-              <label class="form-check-label" for="joinCheckbox">
-                Users can mark themselves as attending this event
-              </label>
-            </div>
-            <div class="form-check" id="maxAttendeesCheckboxContainer"
-              {{#if eventData.maxAttendees}}style="display:flex" {{/if}}>
-              <input class="form-check-input" type="checkbox" id="maxAttendeesCheckbox"
-                name="maxAttendeesCheckbox" {{#if eventData.maxAttendees}}checked{{/if}}>
-              <label class="form-check-label" for="maxAttendeesCheckbox">
-                Set a limit on the maximum number of attendees
-              </label>
-            </div>
-          </div>
-          <div class="form-group" id="maxAttendeesContainer"
-            {{#if eventData.maxAttendees}}style="display:flex" {{/if}}>
-            <label for="maxAttendees" class="col-form-label">Attendee limit</label>
-            <input type="number" class="form-control" id="maxAttendees" name="maxAttendees"
-              placeholder="Enter a number." data-validation="number" data-validation-optional="true"
-              value="{{eventData.maxAttendees}}">
-          </div>
+        <form id="editEventForm" enctype="multipart/form-data" x-data="editEventForm()" x-init="init()"
+          @submit.prevent="submitForm">
 
-          <div class="form-group">
-            <div class="card border-danger mb-3">
-              <div class="card-header text-danger">Delete this event</div>
-              <div class="card-body text-danger">
-                <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-event-id="{{eventData.id}}"><i class="fas fa-trash"></i> Delete</button>
+            {{> eventForm }}
+
+            <div class="form-group">
+              <div class="card border-danger mb-3">
+                <div class="card-header text-danger">Delete this event</div>
+                <div class="card-body text-danger">
+                  <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal"
+                    data-target="#deleteModal" data-event-id="{{eventData.id}}"><i class="fas fa-trash"></i>
+                    Delete</button>
+                </div>
               </div>
             </div>
-          </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -153,13 +34,116 @@
 </div>
 
 <script>
-$('#deleteImage').click(function() {
-  $.post('/deleteimage/{{eventData.id}}/{{eventData.editToken}}', function(response) {
-    if (response === "Success") {
-      location.reload();
-    } else {
-      alert(response);
-    }
-  });
-})
+  $('#deleteImage').click(function () {
+    $.post('/deleteimage/{{eventData.id}}/{{eventData.editToken}}', function (response) {
+      if (response === "Success") {
+        location.reload();
+      } else {
+        alert(response);
+      }
+    });
+  })
 </script>
+
+<script type="text/javascript" src="/js/generate-timezones.js"></script>
+
+<script>
+  $(document).ready(function () {
+    $.uploadPreview({
+      input_field: "#image-upload",
+      preview_box: "#image-preview",
+      label_field: "#image-label",
+      label_default: "Choose file",
+      label_selected: "Change file",
+      no_label: false
+    });
+    autosize($('textarea'));
+    $("#image-preview").css("background-image", "url('/events/{{eventData.image}}')");
+    $("#image-preview").css("background-size", "cover");
+    $("#image-preview").css("background-position", "center center");
+    $("#timezone").val('{{eventData.timezone}}').trigger('change');
+  });
+
+  function editEventForm() {
+    return {
+      data: {
+        eventName: `{{{eventData.name}}}`,
+        eventLocation: `{{{ eventData.location }}}`,
+        eventStart: `{{{ parsedStartForDateInput }}}`,
+        eventEnd: `{{{ parsedEndForDateInput }}}`,
+        timezone: `{{{ eventData.timezone }}}`,
+        eventDescription: `{{{ eventData.description }}}`,
+        eventURL: `{{{ eventData.url }}}`,
+        hostName: `{{{ eventData.hostName }}}`,
+        creatorEmail: `{{{ eventData.creatorEmail }}}`,
+        eventGroupID: `{{{ eventData.eventGroupID }}}`,
+        eventGroupEditToken: `{{{ eventData.eventGroupEditToken }}}`,
+        interactionCheckbox: {{{ eventData.usersCanComment }}},
+        joinCheckbox: {{{ eventData.usersCanAttend }}},
+        maxAttendeesCheckbox: {{#if eventData.maxAttendees}}true{{else}}false{{/if}},
+        maxAttendees: `{{{ 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();
+        /* Set up checkboxes */
+        this.data.eventGroupCheckbox = {{#if eventData.eventGroupID}}true{{else}}false{{/if}};
+        this.data.interactionCheckbox = {{eventData.usersCanComment}};
+        this.data.joinCheckbox = {{eventData.usersCanAttend}};
+        this.data.maxAttendeesCheckbox = {{#if eventData.maxAttendees}}true{{else}}false{{/if}};
+      },
+      async submitForm() {
+        this.submitting = true;
+        this.errors = [];
+        const formData = new FormData();
+        for (const key in this.data) {
+          if (this.data.hasOwnProperty(key)) {
+            formData.append(key, this.data[key]);
+          }
+        }
+        formData.append("imageUpload", this.$refs.eventImageUpload.files[0]);
+        formData.append("editToken", '{{eventData.editToken}}');
+        try {
+          const response = await fetch("/event/{{eventData.id}}", {
+            method: "PUT",
+            body: formData,
+          });
+          this.submitting = false;
+          if (!response.ok) {
+            if (response.status !== 400) {
+              this.errors = [
+                {
+                  message: "An unexpected error has occurred. Please try again later.",
+                }
+              ];
+              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 = [
+            {
+              message: "An unexpected error has occurred. Please try again later.",
+            }
+          ];
+          this.submitting = false;
+        }
+      },
+    }
+  }
+</script>
\ No newline at end of file
-- 
cgit v1.2.3


From 6b220e094f215c488eb5102e25506f5b3d371245 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Sun, 8 Oct 2023 12:11:36 +0100
Subject: Refactor: event group form and API, extract JS

---
 views/partials/editeventmodal.handlebars | 102 +------------------------------
 1 file changed, 1 insertion(+), 101 deletions(-)

(limited to 'views/partials/editeventmodal.handlebars')

diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index 2572cbb..a36cd98 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -46,104 +46,4 @@
 </script>
 
 <script type="text/javascript" src="/js/generate-timezones.js"></script>
-
-<script>
-  $(document).ready(function () {
-    $.uploadPreview({
-      input_field: "#image-upload",
-      preview_box: "#image-preview",
-      label_field: "#image-label",
-      label_default: "Choose file",
-      label_selected: "Change file",
-      no_label: false
-    });
-    autosize($('textarea'));
-    $("#image-preview").css("background-image", "url('/events/{{eventData.image}}')");
-    $("#image-preview").css("background-size", "cover");
-    $("#image-preview").css("background-position", "center center");
-    $("#timezone").val('{{eventData.timezone}}').trigger('change');
-  });
-
-  function editEventForm() {
-    return {
-      data: {
-        eventName: `{{{eventData.name}}}`,
-        eventLocation: `{{{ eventData.location }}}`,
-        eventStart: `{{{ parsedStartForDateInput }}}`,
-        eventEnd: `{{{ parsedEndForDateInput }}}`,
-        timezone: `{{{ eventData.timezone }}}`,
-        eventDescription: `{{{ eventData.description }}}`,
-        eventURL: `{{{ eventData.url }}}`,
-        hostName: `{{{ eventData.hostName }}}`,
-        creatorEmail: `{{{ eventData.creatorEmail }}}`,
-        eventGroupID: `{{{ eventData.eventGroupID }}}`,
-        eventGroupEditToken: `{{{ eventData.eventGroupEditToken }}}`,
-        interactionCheckbox: {{{ eventData.usersCanComment }}},
-        joinCheckbox: {{{ eventData.usersCanAttend }}},
-        maxAttendeesCheckbox: {{#if eventData.maxAttendees}}true{{else}}false{{/if}},
-        maxAttendees: `{{{ 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();
-        /* Set up checkboxes */
-        this.data.eventGroupCheckbox = {{#if eventData.eventGroupID}}true{{else}}false{{/if}};
-        this.data.interactionCheckbox = {{eventData.usersCanComment}};
-        this.data.joinCheckbox = {{eventData.usersCanAttend}};
-        this.data.maxAttendeesCheckbox = {{#if eventData.maxAttendees}}true{{else}}false{{/if}};
-      },
-      async submitForm() {
-        this.submitting = true;
-        this.errors = [];
-        const formData = new FormData();
-        for (const key in this.data) {
-          if (this.data.hasOwnProperty(key)) {
-            formData.append(key, this.data[key]);
-          }
-        }
-        formData.append("imageUpload", this.$refs.eventImageUpload.files[0]);
-        formData.append("editToken", '{{eventData.editToken}}');
-        try {
-          const response = await fetch("/event/{{eventData.id}}", {
-            method: "PUT",
-            body: formData,
-          });
-          this.submitting = false;
-          if (!response.ok) {
-            if (response.status !== 400) {
-              this.errors = [
-                {
-                  message: "An unexpected error has occurred. Please try again later.",
-                }
-              ];
-              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 = [
-            {
-              message: "An unexpected error has occurred. Please try again later.",
-            }
-          ];
-          this.submitting = false;
-        }
-      },
-    }
-  }
-</script>
\ No newline at end of file
+<script type="text/javascript" src="/js/modules/event-edit.js"></script>
-- 
cgit v1.2.3