Add known group linker to event form

4 files changed, 133 insertions, 0 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 8e6322e..04d6e97 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -405,3 +405,44 @@ article.static-page header {
     margin-bottom: 1rem;
     border-bottom: 1px solid #e0e0e0;
 }
+
+.card--group-preview {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    overflow: hidden;
+    gap: 1rem;
+
+    transition: background-color 0.15s;
+}
+
+.card--group-preview:hover {
+    background-color: #f5f5f5;
+}
+
+.card--group-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.card--group-preview__text {
+    text-decoration: none;
+    color: #1b1b1b;
+    overflow: hidden;
+    padding-right: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.card--group-preview__text strong,
+.card--group-preview__text p {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+}
+
+.card--group-preview:hover {
+    text-decoration: none;
+}
diff --git a/public/images/seigaiha-single.png b/public/images/seigaiha-single.png
new file mode 100644
index 0000000..e963ad6
--- /dev/null
+++ b/public/images/seigaiha-single.png
diff --git a/public/js/modules/event-edit.js b/public/js/modules/event-edit.js
index 65d9889..0a295cb 100644
--- a/public/js/modules/event-edit.js
+++ b/public/js/modules/event-edit.js
@@ -47,6 +47,13 @@ function editEventForm() {
                 this.data.timezone = event.target.value;
             });
             this.data.timezone = this.select2.val();
+
+            // Set checkboxes
+            this.data.eventGroupCheckbox = window.eventData.eventGroupID !== "";
+            this.data.interactionCheckbox = window.eventData.usersCanComment;
+            this.data.joinCheckbox = window.eventData.usersCanAttend;
+            this.data.maxAttendeesCheckbox =
+                window.eventData.maxAttendees !== null;
         },
         async submitForm() {
             this.submitting = true;
diff --git a/public/js/modules/group-linker.js b/public/js/modules/group-linker.js
new file mode 100644
index 0000000..ca5e159
--- /dev/null
+++ b/public/js/modules/group-linker.js
@@ -0,0 +1,85 @@
+function eventGroupLinker() {
+    return {
+        data: {
+            eventGroupID: "",
+            eventGroupEditToken: "",
+            groups: [],
+        },
+        async init() {
+            this.$watch("data.eventGroupID", () => {
+                this.$dispatch(
+                    "event-group-id-changed",
+                    this.data.eventGroupID,
+                );
+            });
+            this.$watch("data.eventGroupEditToken", () => {
+                this.$dispatch(
+                    "event-group-edit-token-changed",
+                    this.data.eventGroupEditToken,
+                );
+            });
+            if (window.eventData && window.eventData.eventGroupID !== "") {
+                this.data.eventGroupID = window.eventData.eventGroupID;
+            }
+            if (window.eventData && window.eventGroupEditToken !== "") {
+                this.data.eventGroupEditToken =
+                    window.eventData.eventGroupEditToken;
+            }
+            try {
+                const editTokens = JSON.parse(
+                    localStorage.getItem("editTokens"),
+                );
+                if (!editTokens) {
+                    return;
+                }
+                const response = await fetch("/known/groups", {
+                    method: "POST",
+                    body: JSON.stringify(editTokens),
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                });
+                if (!response.ok) {
+                    return;
+                }
+                const json = await (await response).json();
+                this.data.groups = json;
+            } catch (e) {
+                return false;
+            }
+        },
+        selectGroup(e) {
+            const group = this.data.groups.find(
+                (group) => group.id === e.target.value,
+            );
+            if (!group) {
+                this.data.eventGroupID = "";
+                this.data.eventGroupEditToken = "";
+                return;
+            }
+            this.data.eventGroupID = group.id;
+            this.data.eventGroupEditToken = group.editToken;
+        },
+        showGroupPreview() {
+            return (
+                this.data.eventGroupID !== "" &&
+                this.data.groups.some(
+                    (group) =>
+                        group.id === this.data.eventGroupID &&
+                        group.editToken === this.data.eventGroupEditToken,
+                )
+            );
+        },
+        groupPreview() {
+            if (!this.showGroupPreview()) {
+                return {};
+            }
+            return this.data.groups.find(
+                (group) => group.id === this.data.eventGroupID,
+            );
+        },
+        resetGroupSelector() {
+            this.$refs.eventGroupSelect.value = "";
+        },
+    };
+}