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 Binary files /dev/null and b/public/images/seigaiha-single.png differ 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 = ""; + }, + }; +} diff --git a/src/routes/group.ts b/src/routes/group.ts index 2801248..40dcccb 100644 --- a/src/routes/group.ts +++ b/src/routes/group.ts @@ -7,6 +7,8 @@ import Jimp from "jimp"; import { addToLog } from "../helpers.js"; import EventGroup from "../models/EventGroup.js"; import { sendEmailFromTemplate } from "../lib/email.js"; +import { marked } from "marked"; +import { renderPlain } from "../util/markdown.js"; const config = getConfig(); @@ -237,4 +239,62 @@ router.put( }, ); +// Accepts a JSON object of event/group IDs mapped to edit tokens. +// Returns an object of basic group data for each of the IDs +// which are valid groups and have an edit token which matches. +router.post("/known/groups", async (req: Request, res: Response) => { + const known = req.body; + if (!known) { + return res.status(400).json({ + errors: [ + { + message: "No known IDs were provided.", + }, + ], + }); + } + + try { + const knownIDs = Object.keys(known); + const groups = await EventGroup.find({ + id: { $in: knownIDs }, + }); + const knownGroups = groups.filter((group) => { + return group.editToken === known[group.id]; + }); + const groupData = knownGroups.map((group) => { + return { + id: group.id, + name: group.name, + description: marked + .parse(group.description, { + renderer: renderPlain(), + }) + .split(" ") + .splice(0, 40) + .join(" ") + .trim(), + image: group.image, + editToken: group.editToken, + url: `/group/${group.id}`, + }; + }); + return res.status(200).json(groupData); + } catch (err) { + console.error(err); + addToLog( + "getKnownGroups", + "error", + "Attempt to get known groups failed with error: " + err, + ); + return res.status(500).json({ + errors: [ + { + message: err, + }, + ], + }); + } +}); + export default router; 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 @@

Create an event

-
+ {{>eventForm}}
@@ -55,4 +63,5 @@ - \ No newline at end of file + + \ 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 @@
- + {{> eventForm }} @@ -47,3 +54,4 @@ + 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 @@
Link this event to an event group
-
+
+
+ +
+
+ +
+ + + +
+ +

+
+ +
- -
- + +
+ 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.
- -
- + +
+ You can find this long string of characters in the confirmation email you received when you created the event group.