Merge pull request #115 from lowercasename/rk/typescript

Typescript migration project (event group linker)

5 files changed, 64 insertions, 20 deletions

diff --git a/views/event.handlebars b/views/event.handlebars
index ae6674a..f4f1a2e 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -423,9 +423,9 @@ window.eventData = {{{ json jsonData }}};
     $(this).closest(".comment").find(".replyContainer").slideToggle();
   })
   $(document).ready(function() {
-
     // Save the editing token from the URL, if it is valid
     const eventID = $('#eventName').attr('data-event-id');
+    const url = new URL(window.location.href);
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.has('e')) {
       $.ajax({
@@ -463,6 +463,8 @@ window.eventData = {{{ json jsonData }}};
 
     if (urlParams.has('show_edit')) {
       $('#editModal').modal('show');
+      url.searchParams.delete('show_edit'); 
+      history.replaceState(history.state, '', url.href);
     }
 
     // From https://davidwalsh.name/javascript-download
diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 0643ed6..1d3975a 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -229,29 +229,30 @@ window.groupData = {{{ json jsonData }}};
 <script>
   $(document).ready(function() {
     // Save the editing token from the URL, if it is valid
-    const eventID = $('#eventName').attr('data-event-id');
+    const eventGroupID = window.groupData.id;
+    const url = new URL(window.location.href);
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.has('e')) {
       $.ajax({
         type: "POST",
-        url: `/verifytoken/group/${eventID}`,
+        url: `/verifytoken/group/${eventGroupID}`,
         data: { editToken: urlParams.get('e') },
         success: function(response, status, xhr) {
           if (xhr.status === 200) {
-            addStoredToken(eventID, urlParams.get('e'));
+            addStoredToken(eventGroupID, urlParams.get('e'));
           }
         },
         error: function(response, status, xhr) {
           // The editing token is wrong - remove it
-          removeStoredToken(eventID);
+          removeStoredToken(eventGroupID);
           window.location = window.location.pathname;
         }
       });
-    } else if (getStoredToken(eventID)) {
-      const editToken = getStoredToken(eventID);
+    } else if (getStoredToken(eventGroupID)) {
+      const editToken = getStoredToken(eventGroupID);
       $.ajax({
         type: "POST",
-        url: `/verifytoken/group/${eventID}`,
+        url: `/verifytoken/group/${eventGroupID}`,
         data: { editToken },
         success: function(response, status, xhr) {
           if (xhr.status === 200) {
@@ -260,13 +261,15 @@ window.groupData = {{{ json jsonData }}};
         },
         error: function(response, status, xhr) {
           // The editing token is wrong - remove it
-          removeStoredToken(eventID);
+          removeStoredToken(eventGroupID);
         }
       });
     }
 
     if (urlParams.has('show_edit')) {
       $('#editModal').modal('show');
+      url.searchParams.delete('show_edit'); 
+      history.replaceState(history.state, '', url.href);
     }
 
     new ClipboardJS('#copyEventLink');
diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index a3b35b3..d8d2f28 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -19,7 +19,15 @@
 
 <div id="newEventFormContainer">
   <h4 class="mb-2">Create an event</h4>
-  <form id="newEventForm" enctype="multipart/form-data" x-data="newEventForm()" x-init="init()" @submit.prevent="submitForm">
+  <form
+    id="newEventForm"
+    enctype="multipart/form-data"
+    x-data="newEventForm()"
+    x-init="init()"
+    @submit.prevent="submitForm"
+    @event-group-id-changed="data.eventGroupID = $event.detail"
+    @event-group-edit-token-changed="data.eventGroupEditToken = $event.detail"
+  >
     {{>eventForm}}
     <div class="form-group row">
       <div class="col-sm-12 pt-3 pb-3 text-center">
@@ -55,4 +63,5 @@
 </article>
 
 <script src="/js/generate-timezones.js"></script>
-<script src="/js/modules/new.js"></script>
\ No newline at end of file
+<script src="/js/modules/new.js"></script>
+<script src="/js/modules/group-linker.js"></script>
\ No newline at end of file
diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index a36cd98..a9fe626 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -8,8 +8,15 @@
         </button>
       </div>
       <div class="modal-body">
-        <form id="editEventForm" enctype="multipart/form-data" x-data="editEventForm()" x-init="init()"
-          @submit.prevent="submitForm">
+        <form
+          id="editEventForm"
+          enctype="multipart/form-data"
+          x-data="editEventForm()"
+          x-init="init()"
+          @submit.prevent="submitForm"
+          @event-group-id-changed="data.eventGroupID = $event.detail"
+          @event-group-edit-token-changed="data.eventGroupEditToken = $event.detail"
+        >
 
             {{> eventForm }}
 
@@ -47,3 +54,4 @@
 
 <script type="text/javascript" src="/js/generate-timezones.js"></script>
 <script type="text/javascript" src="/js/modules/event-edit.js"></script>
+<script src="/js/modules/group-linker.js"></script>
diff --git a/views/partials/eventForm.handlebars b/views/partials/eventForm.handlebars
index 93d679d..49c0f86 100755
--- a/views/partials/eventForm.handlebars
+++ b/views/partials/eventForm.handlebars
@@ -80,18 +80,40 @@
       <div class="card-header">
         <strong>Link this event to an event group</strong>
       </div>
-      <div class="card-body">
+      <div class="card-body" x-data="eventGroupLinker()">
+        <div class="form-group-label" x-show="data.groups.length > 0">
+          <label>Choose a group you've edited before</label>
+        </div>
+        <div class="form-group" x-show="data.groups.length > 0">
+          <select x-ref="eventGroupSelect" id="eventGroupSelect" name="eventGroupSelect" class="form-control" x-on:change="selectGroup">
+            <option value="">Choose a group</option>
+            <template x-for="group in data.groups">
+              <option :value="group.id" x-text="group.name"></option>
+            </template> 
+          </select>
+        </div>
+        <a class="card shadow-sm card--group-preview mb-3" x-show="showGroupPreview()" x-bind:href="groupPreview().url" target="_blank">
+          <img :src="'/events/' + groupPreview().image" x-show="groupPreview().image"/>
+          <img src="/images/seigaiha-single.png" x-show="!groupPreview().image"/>
+          <div class="card--group-preview__text">
+            <strong x-text="groupPreview().name"></strong>
+            <p x-text="groupPreview().description"></p>
+          </div>
+        </a>
+        <div class="alert alert-info text-center" role="alert" x-show="data.groups.length > 0">
+          <i class="fas fa-info-circle"></i> You can also enter the group ID and secret editing code manually.
+        </div>
         <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" >
+          <label for="eventGroupID">Event group ID</label>
+          <div class="form-group">
+            <input type="text" class="form-control" id="eventGroupID" name="eventGroupID" x-model="data.eventGroupID" x-on:input="resetGroupSelector">
             <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="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" >
+          <label for="eventGroupEditToken">Event group secret editing code</label>
+          <div class="form-group">
+            <input type="text" class="form-control" id="eventGroupEditToken" name="eventGroupEditToken" x-model="data.eventGroupEditToken" x-on:input="resetGroupSelector">
             <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>