Use Alpine.js on new event page

2 files changed, 8 insertions, 50 deletions

diff --git a/public/js/modules/new.js b/public/js/modules/new.js
index f7c3e34..7915b59 100644
--- a/public/js/modules/new.js
+++ b/public/js/modules/new.js
@@ -5,48 +5,6 @@ $(document).ready(function () {
             .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)
diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index 0bc7b05..932479b 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -1,15 +1,15 @@
-<main class="page">
-<h2 class="mb-3 text-center">What would you like to do?</h2>
+<main class="page" x-data="{currentTab: null}">
+<h2 class="mb-3 pb-2 text-center border-bottom">What would you like to do?</h2>
 <div class="container-fluid mb-4">
   <div class="row">
     <div class="col-lg-4 p-2">
-      <button type="button" id="showNewEventFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-day"></i> Create a new event</button>
+      <button type="button" id="showNewEventFormButton" class="button w-100" x-bind:class="currentTab === 'event' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'event'"><i class="fas fa-calendar-day"></i> Create a new event</button>
     </div>
     <div class="col-lg-4 p-2">
-      <button type="button" id="showImportEventFormButton" class="button button--secondary w-100"><i class="fas fa-file-import"></i> Import an existing event</button>
+      <button type="button" id="showImportEventFormButton" class="button w-100" x-bind:class="currentTab === 'importEvent' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'importEvent'"><i class="fas fa-file-import"></i> Import an existing event</button>
     </div>
     <div class="col-lg-4 p-2">
-      <button type="button" id="showNewEventGroupFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
+      <button type="button" id="showNewEventGroupFormButton" class="button w-100" x-bind:class="currentTab === 'group' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'group'"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
     </div>
   </div>
 </div>
@@ -18,7 +18,7 @@
   <i class="fas fa-exclamation-circle"></i> Events are visible to anyone who knows the link.
 </div>
 
-<div id="newEventFormContainer">
+<div id="newEventFormContainer" x-show="currentTab === 'event'">
   <h4 class="mb-2">Create an event</h4>
   <form
     id="newEventForm"
@@ -45,11 +45,11 @@
   </form>
 </div>
 
-<div id="importEventFormContainer">
+<div id="importEventFormContainer" x-show="currentTab === 'importEvent'">
   {{>importeventform}}
 </div>
 
-<div id="newEventGroupFormContainer">
+<div id="newEventGroupFormContainer" x-show="currentTab === 'group'">
   <h4 class="mb-2">Create an event group</h4>
   <p class="text-muted">An event group is a holding area for a set of linked events, like a recurring game night, 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 will be able to add future events to the group.</p>
   <p class="text-muted">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>