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/editeventgroupmodal.handlebars |  32 ++------
 views/partials/editeventmodal.handlebars      | 102 +-------------------------
 views/partials/eventForm.handlebars           |  86 +++++++++++-----------
 views/partials/eventGroupForm.handlebars      |  47 ++++++++++++
 views/partials/neweventgroupform.handlebars   |  66 -----------------
 views/partials/sidebar.handlebars             |   2 +-
 6 files changed, 98 insertions(+), 237 deletions(-)
 create mode 100644 views/partials/eventGroupForm.handlebars
 delete mode 100755 views/partials/neweventgroupform.handlebars

(limited to 'views/partials')

diff --git a/views/partials/editeventgroupmodal.handlebars b/views/partials/editeventgroupmodal.handlebars
index 3b8f55a..2506e26 100644
--- a/views/partials/editeventgroupmodal.handlebars
+++ b/views/partials/editeventgroupmodal.handlebars
@@ -8,32 +8,10 @@
         </button>
       </div>
       <div class="modal-body">
-      <form id="editEventForm" action="/editeventgroup/{{eventGroupData.id}}/{{eventGroupData.editToken}}" method="post" enctype="multipart/form-data" autocomplete="off">
-        <div class="form-group">
-          <label for="eventGroupName" >Name</label>
-          <input type="text" class="form-control" id="eventGroupName" name="eventGroupName" placeholder="Make it snappy." value="{{eventGroupData.name}}" data-validation="required length" data-validation-length="3-120">
-        </div>
-        <div class="form-group">
-          <label for="eventGroupDescription" >Description</label>
-          <textarea class="form-control" id="eventGroupDescription" name="eventGroupDescription" data-validation="required">{{eventGroupData.description}}</textarea>
-          <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small>
-        </div>
-        <div class="form-group">
-          <label for="eventGroupURL" >Link</label>
-          <input type="url" class="form-control" id="eventURL" name="eventGroupURL" value="{{eventGroupData.url}}" placeholder="For tickets or a page with more information (optional)." data-validation="url" data-validation-optional="true">
-        </div>
-        <div class="form-group">
-          <label for="hostName" >Host or organisation name</label>
-          <input type="text" class="form-control" id="hostName" name="hostName" placeholder="Will be shown on the event group page (optional)." value="{{eventGroupData.hostName}}" data-validation="length" data-validation-length="3-120" data-validation-optional="true">
-        </div>
-        <div class="form-group">
-          <label>Cover image</label>
-          <div class="image-preview" id="eventGroupImagePreview">
-            <label for="eventGroupImageUpload" id="eventGroupImageLabel">Choose file</label>
-            <input type="file" name="eventGroupImageUpload" id="eventGroupImageUpload" />
-          </div>
-          <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
-        </div>
+      <form id="editEventForm" enctype="multipart/form-data" x-data="editEventGroupForm()" @submit.prevent="submitForm">
+
+        {{> eventGroupForm }}
+
         <div class="form-group">
           <div class="card border-danger mb-3">
             <div class="card-header text-danger">Delete this event group</div>
@@ -51,3 +29,5 @@
     </div>
   </div>
 </div>
+
+<script type="text/javascript" src="/js/modules/group-edit.js"></script>
\ No newline at end of file
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>
diff --git a/views/partials/eventForm.handlebars b/views/partials/eventForm.handlebars
index 36da7b8..93d679d 100755
--- a/views/partials/eventForm.handlebars
+++ b/views/partials/eventForm.handlebars
@@ -1,52 +1,52 @@
-<div class="form-group row">
-  <label for="eventName" class="col-sm-2 col-form-label">Event name</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="eventName" >Event name</label>
+  <div class="form-group ">
     <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Make it snappy." x-model="data.eventName" >
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventLocation" class="col-sm-2 col-form-label">Location</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="eventLocation" >Location</label>
+  <div class="form-group ">
     <input type="text" class="form-control" id="eventLocation" name="eventLocation" placeholder="Be specific." x-model="data.eventLocation">
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventStart" class="col-sm-2 col-form-label">Starts</label>
-  <div class="form-group col-sm-4">
+<div class="form-group">
+  <label for="eventStart" >Starts</label>
+  <div class="form-group">
     <input type="datetime-local" class="form-control" id="eventStart" name="eventStart"  x-model="data.eventStart">
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventEnd" class="col-sm-2 col-form-label">Ends</label>
-  <div class="form-group col-sm-4">
+<div class="form-group">
+  <label for="eventEnd" >Ends</label>
+  <div class="form-group ">
     <input type="datetime-local" class="form-control" id="eventEnd" name="eventEnd"  x-model="data.eventEnd">
   </div>
 </div>
-<div class="form-group row">
-  <label for="timezone" class="col-sm-2 col-form-label">Timezone</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="timezone" >Timezone</label>
+  <div class="form-group ">
     <select class="select2" id="timezone" name="timezone" x-ref="timezone"></select>
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventDescription" class="col-sm-2 col-form-label">Description</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="eventDescription" >Description</label>
+  <div class="form-group ">
     <textarea class="form-control expand" id="eventDescription" name="eventDescription" placeholder="You can always edit it later." x-model="data.eventDescription" ></textarea>
     <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small>
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventURL" class="col-sm-2 col-form-label">Link</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="eventURL" >Link</label>
+  <div class="form-group ">
     <input type="url" class="form-control" id="eventURL" name="eventURL" placeholder="For tickets or another event page (optional)." x-model="data.eventURL" >
   </div>
 </div>
-<div class="form-group row">
-  <label for="eventImage" class="col-sm-2 col-form-label">Cover image</label>
-  <div class="form-group col-sm-10">
-    <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" accept="image/jpeg,image/gif,image/png" x-ref="eventImageUpload" />
+<div class="form-group">
+  <label for="eventImage" >Cover image</label>
+  <div class="form-group ">
+    <div class="image-preview" id="event-image-preview">
+      <label for="image-upload" id="event-image-label">Choose file</label>
+      <input type="file" name="imageUpload" id="event-image-upload" accept="image/jpeg,image/gif,image/png" x-ref="eventImageUpload" />
     </div>
     <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
     {{#if eventData.image}}
@@ -54,22 +54,22 @@
     {{/if}}
   </div>
 </div>
-<div class="form-group row">
-  <label for="hostName" class="col-sm-2 col-form-label">Host name</label>
-  <div class="form-group col-sm-10">
+<div class="form-group">
+  <label for="hostName" >Host name</label>
+  <div class="form-group ">
     <input type="text" class="form-control" id="hostName" name="hostName" placeholder="Will be shown on the event page (optional)." x-model="data.hostName" >
   </div>
 </div>
-<div class="form-group row">
-  <label for="creatorEmail" class="col-sm-2 col-form-label">Your email</label>
-  <div class="form-group col-sm-10">
-    <input type="email" class="form-control" id="creatorEmail" name="creatorEmail" placeholder="Will not be shown anywhere (optional)" x-model="data.creatorEmail" >
+<div class="form-group">
+  <label for="creatorEmail" >Your email</label>
+  <div class="form-group ">
+    <input type="email" class="form-control" id="creatorEmail" name="creatorEmail" placeholder="Will not be shown anywhere (optional)." x-model="data.creatorEmail" >
     <small class="form-text">If you provide your email, we will send your secret editing password here, and use it to notify you of updates to the event.</small>
   </div>
 </div>
-<div class="form-group row">
-  <div class="col-sm-2">Options</div>
-  <div class="col-sm-10">
+<div class="form-group">
+  <label>Options</label>
+  <div >
     <div class="form-check">
       <input class="form-check-input" type="checkbox" id="eventGroupCheckbox" name="eventGroupCheckbox" x-model="data.eventGroupCheckbox">
       <label class="form-check-label" for="eventGroupCheckbox">
@@ -81,14 +81,14 @@
         <strong>Link this event to an event group</strong>
       </div>
       <div class="card-body">
-        <div class="form-group row">
+        <div class="form-group">
           <label for="eventGroupID" class="col-12">Event group ID</label>
           <div class="form-group col-12">
             <input type="text" class="form-control" id="eventGroupID" name="eventGroupID" placeholder="" x-model="data.eventGroupID" >
             <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 row">
+        <div class="form-group">
           <label for="eventGroupEditToken" class="col-12">Event group secret editing code</label>
           <div class="form-group col-12">
             <input type="text" class="form-control" id="eventGroupEditToken" name="eventGroupEditToken" placeholder="" x-model="data.eventGroupEditToken" >
@@ -117,13 +117,13 @@
     </div>
   </div>
 </div>
-<div class="form-group row" id="maxAttendeesContainer" x-show="data.maxAttendeesCheckbox && data.joinCheckbox">
-  <label for="maxAttendees" class="col-sm-2 col-form-label">Attendee limit</label>
-  <div class="form-group col-sm-10">
+<div class="form-group" id="maxAttendeesContainer" x-show="data.maxAttendeesCheckbox && data.joinCheckbox">
+  <label for="maxAttendees" >Attendee limit</label>
+  <div class="form-group ">
     <input type="number" class="form-control" id="maxAttendees" name="maxAttendees" placeholder="Enter a number." x-model="data.maxAttendees" >
   </div>
 </div>
-<div class="form-group row">
+<div class="form-group">
   <div class="col-12">
     <div
       class="alert alert-danger"
diff --git a/views/partials/eventGroupForm.handlebars b/views/partials/eventGroupForm.handlebars
new file mode 100644
index 0000000..0b18bba
--- /dev/null
+++ b/views/partials/eventGroupForm.handlebars
@@ -0,0 +1,47 @@
+<div class="form-group">
+    <label for="eventGroupName">Name</label>
+    <input type="text" class="form-control" id="eventGroupName" name="eventGroupName" placeholder="Make it snappy." x-model="data.eventGroupName">
+</div>
+<div class="form-group">
+    <label for="eventGroupDescription">Description</label>
+    <textarea class="form-control" id="eventGroupDescription" name="eventGroupDescription" x-model="data.eventGroupDescription">{{eventGroupData.description}}</textarea>
+    <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small>
+</div>
+<div class="form-group">
+    <label for="eventGroupURL">Link</label>
+    <input type="url" class="form-control" id="eventGroupURL" name="eventGroupURL" placeholder="For tickets or a page with more information (optional)." x-model="data.eventGroupURL">
+</div>
+<div class="form-group">
+    <label for="hostName">Host or organisation name</label>
+    <input type="text" class="form-control" id="eventGroupHostName" name="hostName" placeholder="Will be shown on the event group page (optional)."  x-model="data.hostName">
+</div>
+<div class="form-group">
+    <label for="creatorEmail">Your email</label>
+    <div class="form-group">
+        <input type="email" class="form-control" id="eventGroupCreatorEmail" name="creatorEmail" placeholder="Will not be shown anywhere (optional)." x-model="data.creatorEmail">
+        <small class="form-text">If you provide your email, we will send your secret editing password here, and use it to notify you of updates to the event.</small>
+    </div>
+</div>
+<div class="form-group">
+    <label>Cover image</label>
+    <div class="image-preview" id="group-image-preview">
+        <label for="eventGroupImageUpload" id="group-image-label">Choose file</label>
+        <input type="file" name="imageUpload" id="group-image-upload" accept="image/jpeg,image/gif,image/png" x-ref="eventGroupImageUpload"/>
+    </div>
+    <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
+</div>
+<div class="form-group">
+  <div class="col-12">
+    <div
+      class="alert alert-danger"
+      role="alert"
+      x-show="errors.length > 0"
+    >
+      <p><i class="fas fa-exclamation-triangle"></i> Please fix these errors:</p>
+      <ul>
+        <template x-for="error in errors">
+          <li x-text="error.message"></li>
+        </template>
+      </ul>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/views/partials/neweventgroupform.handlebars b/views/partials/neweventgroupform.handlebars
deleted file mode 100755
index 616b8ca..0000000
--- a/views/partials/neweventgroupform.handlebars
+++ /dev/null
@@ -1,66 +0,0 @@
-<h4 class="mb-2">Create an event group</h4>
-<p>An event group is a holding area for a set of linked events, like a series of film nights, a festival, or a band tour. You can share a public link to your event group just like an individual event link, and people who know the secret editing code (sent in an email when you create the event group) will be able to add future events to the group.</p>
-<p>Event groups do not get automatically removed like events do, but events which have been removed from {{siteName}} will of course not show up in an event group.</p>
-<form id="newEventForm" action="/neweventgroup" method="post" enctype="multipart/form-data">
-  <div class="form-group row">
-    <label for="eventGroupName" class="col-sm-2 col-form-label">Event group name</label>
-    <div class="form-group col-sm-10">
-      <input type="text" class="form-control" id="eventGroupName" name="eventGroupName" placeholder="Make it snappy." value="{{data.eventName}}" data-validation="required length" data-validation-length="3-120">
-    </div>
-  </div>
-  <div class="form-group row">
-    <label for="eventGroupDescription" class="col-sm-2 col-form-label">Description</label>
-    <div class="form-group col-sm-10">
-      <textarea class="form-control expand" id="eventGroupDescription" name="eventGroupDescription" data-validation="required" placeholder="You can always edit it later."></textarea>
-      <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small>
-    </div>
-  </div>
-  <div class="form-group row">
-    <label for="eventGroupURL" class="col-sm-2 col-form-label">Link</label>
-    <div class="form-group col-sm-10">
-      <input type="url" class="form-control" id="eventGroupURL" name="eventGroupURL" placeholder="For tickets or a page with more information (optional)." data-validation="url" data-validation-optional="true">
-    </div>
-  </div>
-  <div class="form-group row">
-    <label for="eventGroupImage" class="col-sm-2 col-form-label">Cover image</label>
-    <div class="form-group col-sm-10">
-      <div class="image-preview" id="eventGroupImagePreview">
-        <label for="image-upload" id="eventGroupImageLabel">Choose file</label>
-        <input type="file" name="imageUpload" id="eventGroupImageUpload" />
-      </div>
-      <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
-    </div>
-  </div>
-  <div class="form-group row">
-    <label for="hostName" class="col-sm-2 col-form-label">Host or organisation name</label>
-    <div class="form-group col-sm-10">
-      <input type="text" class="form-control" id="hostName" name="hostName" placeholder="Will be shown on the event group page (optional)." data-validation="length" data-validation-length="2-60" data-validation-optional="true">
-    </div>
-  </div>
-  <div class="form-group row">
-    <label for="creatorEmail" class="col-sm-2 col-form-label">Your email</label>
-    <div class="form-group col-sm-10">
-      <input type="email" class="form-control" id="creatorEmail" name="creatorEmail" placeholder="We won't spam you <3 (optional)" data-validation="email" data-validation-optional="true">
-      <small class="form-text">If you provide your email, we will send your secret editing password here, and use it to notify you of updates to the event.</small>
-    </div>
-  </div>
-  <div class="form-group row">
-    <div class="col-sm-12 pt-3 pb-3 text-center">
-      <button type="submit" class="btn btn-primary w-50">Create</button>
-    </div>
-  </div>
-</form>
-
-<script>
-  $(document).ready(function() {
-    $.uploadPreview({
-      input_field: "#eventGroupImageUpload",
-      preview_box: "#eventGroupImagePreview",
-      label_field: "#eventGroupImageLabel",
-      label_default: "Choose file",
-      label_selected: "Change file",
-      no_label: false
-    });
-    autosize($('textarea'));
-  });
-</script>
diff --git a/views/partials/sidebar.handlebars b/views/partials/sidebar.handlebars
index 980e699..5d8e847 100755
--- a/views/partials/sidebar.handlebars
+++ b/views/partials/sidebar.handlebars
@@ -3,5 +3,5 @@
 
     <p class="lead text-center mb-4">Nicer events</p>
 
-    <a class="btn btn-success mb-2 btn-block" href="/new"><i class="far fa-calendar-plus"></i> New event</a>
+    <a class="btn btn-success mb-2 btn-block" href="/new"><i class="far fa-calendar-plus"></i> New</a>
 </div>
-- 
cgit v1.2.3