From 7fe1f42d56edb98875399b1da5e9b7e972209a0d Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Mon, 9 Oct 2023 19:22:39 +0100 Subject: [PATCH] Add known group linker to event form --- public/css/style.css | 41 +++++++++++ public/images/seigaiha-single.png | Bin 0 -> 3463 bytes public/js/modules/event-edit.js | 7 ++ public/js/modules/group-linker.js | 85 +++++++++++++++++++++++ src/routes/group.ts | 60 ++++++++++++++++ views/newevent.handlebars | 13 +++- views/partials/editeventmodal.handlebars | 12 +++- views/partials/eventForm.handlebars | 36 ++++++++-- 8 files changed, 243 insertions(+), 11 deletions(-) create mode 100644 public/images/seigaiha-single.png create mode 100644 public/js/modules/group-linker.js 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 0000000000000000000000000000000000000000..e963ad631542adb7b517c71a9f4dc44f26a9fd16 GIT binary patch literal 3463 zcmbVP2~-nl5^gSGFd&9OR|g~pA`UYl7X%35l5j)`AUB?bqzM@k!X!b$9Ti1{A%e?{ z%BkSNEg-0fcyK5xD7fgLE;{G{$|Z6m!gdga9dY)(?Y!=;zpB2k>aXg*-b=iTlf8=a zT4ewLRHzOVSLjWa-b%}$CuzE!5544B)--DXD3vUqrYk^e1jE6V1_0q306-iI08@}k z+yek1SO9qA3!#ny!0O=is;yF@NYI<=Pon|)kgNpA$-n_QNRokmfD8_hg=B5$#>cS% z`8hoRNK*i;nLIxb;S#_T@&p0AV1$hgVk3>tU^*)j`E*|ML}N!fC2`e9V}$?f)G+(x*sn@XpTfm1AV^c z^W+B8XrDs`3Fh|&?GPiP2V-ysSPYkoSqdo-x`GQyE{PPlhXsQeS5UwU;WI$UU1upG zP{jTUkJK`k!cs7(-hZF>QXnDQ|0}VimXERK`th+$WGD!YMsnt}S?nM>hr(loaKRuU zm0|%I447;t$%u|M#M1qVXofL?i8eGgF+rPvAOX!J8k^$%u}qvlkwM0Mm1dzM^Pwmp zpS=fU+VOeZxz+{K`2tW{Mswt+I)3i;e2#OCAhCl4LV6GboX?Fd&5cPkVuCmjZAiys z(T09>L$n{0NI=s;f6&m7VFcp+jL4WT;0rlH0mvWC%>Q@iU%(gGKb2+CmcK0h5+$cl z@I(_sJjI$~ipSw>jW*$N1UoxxJ3P+N+Sb;_<}>d?&WnP6Yz6hpYR%Ky{4d%?&_%S; zPnG1t7J(dZ3LE-H1kl;DFvMcXm?bTLMcVKX@P$GIZ@m;WLv=~+3xP{N`Xa|Gj#n-+Er6so!-&W;UtkrxQRv= zokwz34c#b3J;@Heyn{HZou8w7{8hoOsDm5dO-+U095{3Ydk`-t$z=MJ^gLHb!&nlDSS7Pe=h6wRk?ew}osX1mz7_Q;B};YC%WYh29pbPH6w zVd{Ee*o{9hTT*}Qwex0iMq&l}Td{LhlCV9sjmnyesmK4+6+w?MbGE?0Y-}TvOYMM9RA(m-B9uAK~711Td^p@* z-0GELJbCYhr}59Fyi>XfB?(1`aXv2}^sPy}+P12-tAN!gwkd>f?tB(FX0Ed)?D75S z3$citJI;u0xVG+v<)LTd2E2!b>wug5_6o2EQC>AFETgP`KUT)HSpH@F?W=tz{ zjr#9*v#Lz0^oCytUMPOmVzzemZnv9iV6LXhF^ikc`MRm1FL_}W&9nQFb6BDIEfs);RE z&a7-U#`W)gw>8;4!|Ma}Swz)Oahd2E+o}&{XiGEu##XH)b0DH>gL2Ff#fO>Wio|an zTSqq&Z~C)%piCU2>)XBC(9PZjdU;dn7T$uOaqIBZOSxg%?HzsVi$XmD%o1j=uk>&z zT}!%8cr;-4SfJGT(DeRzWO$-&2&$>7e|D&Q_n`Y8dF1}GWsXJq$K(3)C2s^Hu&_gL z0_a>ZB(v*$#n{aI$AjY@*=xUx^xQf+kP%TAe>Gg8UgdtAM;SBzq#DPW6%fiisM*$N z_G7$8%&LP<$D?C@S{_(^;+%$60cn?3$v<$5PZM}+F0+-EyH^-rj>(Xz-?P8;pk?#pNLb$1N~rZDsLFS$8?NayMI(NV1L zN+p_MM|nKxSb zq;l4_72nZL>R0=xA(4I)Tt}K6*lr_CH5G=sleex6t(=fl#J^> zsI)4094t^FnB4o+JG1Zh^83M}s6bm%oZG>vZMO+U((N*7Vdp`tO9|$1H)PQpp^RZfaswcM>f{HZ7Po*KT>b!=$ri5#uJ$e z;NbYww&9?hl9$Q-9PMjV$1G8nbN<GnkK$NUht{=T`y(5^7psj#(N8xg z8%6)azA-4IPVc68zcA&tF>^&^ { + 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.