#247 [calendar] ics - add all-time, just-one-event, add clipboard button

components/Calendar.vue

@@ -26,7 +26,7 @@
                 <div class="card-body">
                     <ul class="list-unstyled mb-0">
                         <li v-for="event in year.eventsByDate[d.toString()]" class="mb-2">
-                            <CalendarEvent :event="event" :key="event.name"/>
+                            <CalendarEvent :event="event" :year="year.year" :key="event.name"/>
                         </li>
                     </ul>
                 </div>

components/CalendarEvent.vue

@@ -1,10 +1,13 @@
 <template>
     <span>
-        <span v-if="range" class="badge bg-primary">{{ event.getRange(range) }}</span>
+        <span v-if="range" class="badge bg-primary">{{ event.getRange(year) }}</span>
         <Flag v-if="event.flag" name="" alt="" :img="`/flags/${event.flag}.png`"/>
         <Icon v-else v="arrow-circle-right"/>
         <T v-if="$te(`calendar.events.${eventName}`)" :params="{param: eventParam}">calendar.events.{{eventName}}</T>
         <LinkedText v-else :text="eventName"/>
+        <a :href="`/api/queer-calendar-${config.locale}-${year}-${event.getUuid()}.ics`" class="small" :aria-label="$t('crud.download') + ' .ics'" :title="$t('crud.download') + ' .ics'">
+            <Icon v="calendar-plus"/>
+        </a>
     </span>
 </template>
 
@@ -12,7 +15,8 @@
     export default {
         props: {
             event: { required: true },
-            range: {},
+            year: { 'default': () => (new Date).getFullYear() },
+            range: { type: Boolean },
         },
         computed: {
             eventName() {

components/CalendarExtra.vue

@@ -25,9 +25,14 @@
                 <p class="mb-0">
                     iCalendar:
                 </p>
-                <a :href="`/api/calendar/queer-calendar-${year.year}.ics`" class="btn btn-outline-primary m-1">
+                <button :class="['btn', clipboardFeedback ? 'btn-success' : 'btn-outline-primary', 'm-1']" ref="clipboard" :data-clipboard-text="icsLink">
+                    <Icon :v="clipboardFeedback ? 'clipboard-check' : 'clipboard'"/>
+                    <T>crud.copy</T>
+                </button>
+                <a :href="icsLink" class="btn btn-outline-primary m-1">
                     <Icon v="calendar-plus"/>
-                    ICS
+                    <T>crud.download</T>
+                    .ics
                 </a>
             </div>
             <div>
@@ -56,10 +61,29 @@
 </template>
 
 <script>
+    import ClipboardJS from 'clipboard';
+
     export default {
         props: {
             day: {},
             year: {},
-        }
+        },
+        data() {
+            return {
+                clipboardFeedback: false,
+            }
+        },
+        mounted() {
+            const clipboard = new ClipboardJS(this.$refs.clipboard);
+            clipboard.on('success', (e) => {
+                this.clipboardFeedback = true;
+                setTimeout(() => this.clipboardFeedback = false, 3000);
+            });
+        },
+        computed: {
+            icsLink() {
+                return `${process.env.BASE_URL}/api/queer-calendar-${this.config.locale}${this.year.year === (new Date).getFullYear() ? '' : '-' + this.year.year}.ics`;
+            },
+        },
     }
 </script>

components/CalendarMonthEvents.vue

@@ -1,7 +1,7 @@
 <template>
     <ul class="list-unstyled mb-0">
         <li v-for="event in events" class="mb-2">
-            <CalendarEvent :event="event" :range="year.year" :key="event.name"/>
+            <CalendarEvent :event="event" :year="year.year" range :key="event.name"/>
         </li>
     </ul>
 </template>

components/LinkInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="input-group my-2">
         <input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
-        <button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
+        <button class="btn btn-outline-secondary" ref="clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink" :aria-label="$t('crud.copy')" :title="$t('crud.copy')">
             <Icon v="clipboard"/>
         </button>
         <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
@@ -18,7 +18,7 @@
             link: { required: true },
         },
         mounted () {
-            new ClipboardJS('.btn-clipboard');
+            new ClipboardJS(this.$refs.clipboard);
         },
         methods: {
             focusLink() {

locale/de/translations.suml

@@ -470,6 +470,8 @@ crud:
     author: 'Hinzugefügt von'
     saved: 'Änderungen erfolgreich gespeichert!'
     loginRequired: '{/account=Log dich ein} um Eintrag einzureichen'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >
@@ -755,4 +757,4 @@ calendar:
         overview: 'Überschau'
         labels: 'Etiketten'
     link: 'Link'
-    full: 'Ganzer Kalender' 
+    full: 'Ganzer Kalender'

locale/en/translations.suml

@@ -549,6 +549,8 @@ crud:
     author: 'Added by'
     saved: 'Changes saved successfully!'
     loginRequired: '{/account=Log in} to submit an entry'
+    copy: 'Copy link'
+    download: 'Download'
 
 footer:
     license: >

locale/es/translations.suml

@@ -483,6 +483,8 @@ crud:
     author: 'Añadido por'
     saved: 'Los cambios se guardaron exitosamente!'
     loginRequired: '{/cuenta=Log in} para enviar un ítem'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

locale/fr/translations.suml

@@ -473,6 +473,8 @@ crud:
     author: 'Ajouté par'
     saved: 'Modifications enregistrées !'
     loginRequired: '{/compte=Connectez-vous} pour proposer un mot'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

locale/nl/translations.suml

@@ -462,6 +462,8 @@ crud:
     author: 'Toegevoegd door'
     saved: 'Veranderingen succesvol opgeslagen!'
     loginRequired: '{/account=Login} om een toevoeging in te dienen'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

locale/no/translations.suml

@@ -472,6 +472,8 @@ crud:
     author: 'Lagt til av'
     saved: 'Endringer er lagret!'
     loginRequired: '{/account=Log in} for å'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

locale/pl/translations.suml

@@ -1191,6 +1191,8 @@ crud:
     author: 'Dodane przez'
     saved: 'Zmiany zapisane!'
     loginRequired: '{/konto=Zaloguj się}, aby zgłosić wpis'
+    copy: 'Skopiuj link'
+    download: 'Ściągnij'
 
 footer:
     license: >

locale/pt/translations.suml

@@ -480,6 +480,8 @@ crud:
     author: 'Adicionado por'
     saved: 'Alterações salvas com sucesso!'
     loginRequired: 'Faça {/conta=login} para participar do nosso banco de dados'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

locale/zh/translations.suml

@@ -446,6 +446,8 @@ crud:
     search: '搜索'
     author: '添加人'
     saved: '更改保存成功'
+    copy: 'Copy link'  # TODO
+    download: 'Download'  # TODO
 
 footer:
     license: >

package.json

@@ -45,6 +45,7 @@
     "suml-loader": "^0.1.1",
     "twitter": "^1.7.1",
     "ulid": "^2.3.0",
+    "uuid": "^8.3.2",
     "vue-client-only": "^2.1.0",
     "vue-lazy-hydration": "^2.0.0-beta.4",
     "vue-matomo": "^3.13.5-0",

routes/calendarDay.vue

@@ -26,7 +26,7 @@
                     <h3><T :params="{day: day.day}">calendar.dates.{{day.month}}</T> {{day.year}}</h3>
                     <ul class="list-unstyled mb-0">
                         <li v-for="event in year.eventsByDate[day.toString()]" class="mb-2">
-                            <CalendarEvent :event="event" :key="event.name"/>
+                            <CalendarEvent :event="event" :year="year.year" :key="event.name"/>
                         </li>
                     </ul>
                 </div>

server/routes/calendar.js

@@ -8,26 +8,68 @@ import { clearLinkedText } from '../../src/helpers';
 
 const translations = loadSuml('translations');
 
+const renderEvents = (yearEvents, res) => {
+    const events = [];
+    let i = 1;
+    for (let year in yearEvents) {
+        if (!yearEvents.hasOwnProperty(year)) { continue; }
+        for (let event of yearEvents[year]) {
+            if (!event) { continue; }
+            const ics = event.toIcs(year, translations, clearLinkedText, i);
+            if (ics !== null) {
+                events.push(ics);
+            }
+        }
+        i++;
+    }
+
+    if (events.length === 0) {
+        return res.status(404).json({error: 'Not found'});
+    }
+
+    createEvents(
+        events,
+        (error, value) => {
+            if (error) {
+                console.error(error);
+                return res.status(500).json({error: 'Unexpected server error'});
+            }
+
+            res.header('Content-type', 'text/calendar');
+            res.send(value);
+        }
+    );
+}
+
 const router = Router();
 
-router.get('/calendar/queer-calendar-:year.ics', handleErrorAsync(async (req, res) => {
+const routeBase = `/queer-calendar-${global.config.locale}`;
+
+router.get(routeBase + '.ics', handleErrorAsync(async (req, res) => {
+    let events = {};
+    for (let year of calendar.getAllYears()) {
+        events[year.year] = year.events;
+    }
+
+    renderEvents(events, res);
+}));
+
+router.get(routeBase + '-:year-:uuid.ics', handleErrorAsync(async (req, res) => {
     const year = calendar.getYear(req.params.year);
     if (!year) {
         return res.status(404).json({error: 'Not found'});
     }
-    const events = year.events
-        .map(e => e.toIcs(req.params.year, translations, clearLinkedText))
-        .filter(e => e !== null);
 
-    createEvents(events, (error, value) => {
+    renderEvents({[year.year]: [year.eventsByUuid[req.params.uuid]]}, res)
-        if (error) {
+}));
-            console.error(error);
-            return res.status(500).json({error: 'Unexpected server error'});
-        }
 
-        res.header('Content-type', 'text/calendar');
+router.get(routeBase + '-:year.ics', handleErrorAsync(async (req, res) => {
-        res.send(value);
+    const year = calendar.getYear(req.params.year);
-    })
+    if (!year) {
+        return res.status(404).json({error: 'Not found'});
+    }
+
+    renderEvents({[year.year]: year.events}, res)
 }));
 
 export default router;

src/calendar/helpers.js

@@ -1,4 +1,5 @@
 const md5 = require("js-md5");
+const { v5: uuid5 } = require('uuid');
 
 class Day {
     constructor(year, month, day, dayOfWeek) {
@@ -104,7 +105,11 @@ module.exports.Event = class {
         return this.getDays(day.year)[0].equals(day);
     }
 
-    toIcs(year, translations, clearLinkedText) {
+    getUuid() {
+        return uuid5(`${process.env.BASE_URL}/calendar/event/${this.name}`, uuid5.URL);
+    }
+
+    toIcs(year, translations, clearLinkedText, sequence = 1) {
         const days = this.getDays(year);
         const first = days[0];
         const last = days[days.length - 1].next();
@@ -123,6 +128,7 @@ module.exports.Event = class {
             start: [first.year, first.month, first.day],
             end: [last.year, last.month, last.day],
             calName: translations.calendar.headerLong,
+            sequence,
         }
     }
 }
@@ -194,13 +200,20 @@ class Year {
         for (let event of events) {
             for (let term of event.terms) {
                 if (this.eventsByTerm[term] === undefined) { this.eventsByTerm[term] = []; }
-                this.eventsByTerm[term].push(event);
+                if (event.getDays(this.year).length) {
+                    this.eventsByTerm[term].push(event);
+                }
             }
         }
         for (let term in this.eventsByTerm) {
             if (!this.eventsByTerm.hasOwnProperty(term)) { continue; }
             this.eventsByTerm[term].sort((a, b) => a.getDays(this.year)[0].toInt() - b.getDays(this.year)[0].toInt())
         }
+
+        this.eventsByUuid = {}
+        for (let event of events) {
+            this.eventsByUuid[event.getUuid()] = event;
+        }
     }
 
     isCurrent() {