✨ show event locations and update event UI (#403)

neuland-ingolstadt · May 9, 2024 · 35673e3 · 35673e3
1 parent 889c4bc
commit 35673e3
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 23 deletions.
diff --git a/rogue-thi-app/lib/date-utils.js b/rogue-thi-app/lib/date-utils.js
@@ -20,13 +20,15 @@ export function formatFriendlyDate(datetime) {
   } else if (datetime.toDateString() === tomorrow.toDateString()) {
     return t('common.dates.tomorrow')
   } else {
+    const sameYear = datetime.getFullYear() === today.getFullYear()
+
     const weekday = datetime.toLocaleString(getAdjustedLocale(), {
       weekday: 'short',
     })
     const date = datetime.toLocaleString(undefined, {
       day: 'numeric',
       month: '2-digit',
-      year: 'numeric',
+      year: sameYear ? undefined : '2-digit',
     })
     return `${weekday}, ${date}`
   }

diff --git a/rogue-thi-app/pages/api/cl-events.js b/rogue-thi-app/pages/api/cl-events.js
@@ -161,17 +161,24 @@ export async function getAllEventDetails(username, password) {
 
   await login(fetch, username, password)
 
+  // use sequential requests to avoid spamming the server
   const remoteEvents = []
   for (const url of await getEventList(fetch)) {
     const details = await getEventDetails(fetch, url)
-    // do not include location and description
-    // since it may contain sensitive information
+
+    // only include location if approved by the organizer
     remoteEvents.push({
       id: crypto.createHash('sha256').update(url).digest('hex'),
       organizer: details.Verein.trim().replace(/( \.)$/g, ''),
       title: details.Event,
       begin: details.Start ? parseLocalDateTime(details.Start) : null,
       end: details.Ende ? parseLocalDateTime(details.Ende) : null,
+      location:
+        details['Veröffentlichung des Ortes & Bescheibung in Apps']
+          .trim()
+          .toLowerCase() === 'ja'
+          ? details.Ort
+          : null,
     })
   }
 

diff --git a/rogue-thi-app/pages/events.jsx b/rogue-thi-app/pages/events.jsx
@@ -3,7 +3,14 @@ import React, { useEffect, useState } from 'react'
 import ListGroup from 'react-bootstrap/ListGroup'
 import ReactPlaceholder from 'react-placeholder'
 
-import { ExternalLink, Instagram } from 'lucide-react'
+import {
+  Calendar,
+  ExternalLink,
+  Globe,
+  Instagram,
+  MapPin,
+  Users,
+} from 'lucide-react'
 
 import AppBody from '../components/page/AppBody'
 import AppContainer from '../components/page/AppContainer'
@@ -92,7 +99,7 @@ export default function Events() {
                         </a>
                       )}
                       <div className={styles.details}>
-                        <span className={styles.organizer}>
+                        <span className={styles.eventDetails}>
                           {club != null && (
                             <>
                               {club.website != null && (
@@ -102,34 +109,74 @@ export default function Events() {
                                   target="_blank"
                                   rel="noreferrer"
                                 >
-                                  {item.organizer} <ExternalLink size={16} />
-                                </a>
-                              )}
-                              {club.instagram != null && (
-                                <a
-                                  href={club.instagram}
-                                  className={styles.eventUrl}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  <Instagram size={16} />
+                                  <Users size={16} />
+                                  {` ${club.club} `}
                                 </a>
                               )}
                             </>
                           )}
-                          {club == null && <>{item.organizer}</>}
+                          {club == null && (
+                            <>
+                              <Users
+                                size={16}
+                                className={styles.icon}
+                              />
+                              {item.organizer}
+                            </>
+                          )}
                         </span>
-                        <br />
-                        {item.begin &&
-                          formatFriendlyDateTimeRange(item.begin, item.end)}
+
+                        {item.begin && (
+                          <span className={styles.eventDetails}>
+                            <Calendar
+                              size={16}
+                              className={styles.icon}
+                            />
+                            {formatFriendlyDateTimeRange(item.begin, item.end)}
+                          </span>
+                        )}
+
+                        {item.location && (
+                          <span className={styles.eventDetails}>
+                            <MapPin
+                              size={16}
+                              className={styles.icon}
+                            />
+                            {item.location}
+                          </span>
+                        )}
                       </div>
                     </div>
-                    <div className={styles.details}>
+                    <div className={`${styles.details} ${styles.rightDetails}`}>
                       {item.end && item.begin < now
                         ? `${t(
                             'events.dates.until'
                           )} ${formatFriendlyRelativeTime(item.end)}`
                         : formatFriendlyRelativeTime(item.begin)}
+
+                      <span style={{ flex: 1 }}></span>
+                      <span className={styles.socials}>
+                        {club != null && club.website != null && (
+                          <a
+                            href={club.website}
+                            className={styles.eventUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            <Globe size={20} />
+                          </a>
+                        )}
+                        {club != null && club.instagram != null && (
+                          <a
+                            href={club.instagram}
+                            className={styles.eventUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            <Instagram size={20} />
+                          </a>
+                        )}
+                      </span>
                     </div>
                   </ListGroup.Item>
                 )

diff --git a/rogue-thi-app/styles/Calendar.module.css b/rogue-thi-app/styles/Calendar.module.css
@@ -15,18 +15,35 @@
 
 .item {
   display: flex;
+  gap: 5px;
 }
 
 .left {
   flex: 1;
 }
 
 .details {
+  display: flex;
+  flex-direction: column;
   color: var(--gray);
 }
 
-.organizer {
-  display: inline-flex;
+.rightDetails {
+  align-items: flex-end;
+}
+
+.socials {
+  display: flex;
+  gap: 5px;
+  margin-bottom: 2px;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.eventDetails {
+  display: flex;
   gap: 5px;
   align-items: center;
 }