Merge pull request '#18-public-calendar' (#19) from #18-public-calendar into main

Reviewed-on: Ehrenamt/member-administration-ui#19

src/views/admin/club/calendar/Calendar.vue

@@ -3,6 +3,7 @@
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
     </template>
     <template #diffMain>
@@ -25,6 +26,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/calendar";
 import { useAbilityStore } from "@/stores/ability";
+import { LinkIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -87,6 +89,11 @@ export default defineComponent({
         e.event.id
       );
     },
+    openLinkModal(e: any) {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CalendarLinkModal.vue")))
+      );
+    },
   },
 });
 

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -91,6 +91,12 @@ export default defineComponent({
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
+  //   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
+  //   if (answer) {
+  //      next()
+  //   } else {
+  //     next(false)
+  //   }
   //   if (this.syncState != "synced") {
   //     this.executeSyncAll = Date.now();
   //     this.wantToClose = true;

src/views/admin/settings/CalendarTypeEdit.vue

@@ -28,6 +28,10 @@
           <input type="checkbox" id="nscdr" v-model="calendarType.nscdr" />
           <label for="nscdr">Standard Kalender Auslieferung (optional)</label>
         </div>
+        <div v-if="!calendarType.nscdr">
+          <label for="passphrase">Passphrase (optional)</label>
+          <input type="text" id="passphrase" v-model="calendarType.passphrase" />
+        </div>
 
         <div class="flex flex-row justify-end gap-2">
           <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
@@ -111,6 +115,7 @@ export default defineComponent({
         type: formData.type.value,
         color: formData.color.value,
         nscdr: formData.nscdr.checked,
+        passphrase: formData.passphrase.value,
       };
       this.status = "loading";
       this.updateActiveCalendarType(updateCalendarType)

src/views/public/View.vue

@@ -0,0 +1,12 @@
+<template>
+  <FullContent>
+    <template #main>
+      <RouterView />
+    </template>
+  </FullContent>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from "vue-router";
+import FullContent from "../../layouts/FullContent.vue";
+</script>

src/views/public/calendar/Calendar.vue

@@ -0,0 +1,97 @@
+<template>
+  <MainTemplate :showBack="false">
+    <template #topBar>
+      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <div class="grow"></div>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        <RouterLink :to="{ name: 'public-calendar-explain' }">
+          <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />
+        </RouterLink>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+        <FullCalendar :options="calendarOptions" class="max-h-full h-full" />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import MainTemplate from "@/templates/Main.vue";
+import FullCalendar from "@fullcalendar/vue3";
+import deLocale from "@fullcalendar/core/locales/de";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline";
+import type { CalendarViewModel } from "@/viewmodels/admin/calendar.models";
+import { RouterLink } from "vue-router";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      calendars: [] as Array<CalendarViewModel>,
+    };
+  },
+  computed: {
+    formattedItems() {
+      return this.calendars.map((c) => ({
+        id: c.id,
+        title: c.title,
+        start: c.starttime,
+        end: c.endtime,
+        backgroundColor: c.type.color,
+      }));
+    },
+    calendarOptions() {
+      return {
+        timeZone: "local",
+        locale: deLocale,
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+        initialView: "dayGridMonth",
+        headerToolbar: {
+          left: "dayGridMonth,timeGridWeek",
+          center: "title",
+          right: "prev,today,next",
+        },
+        eventDisplay: "block",
+        weekends: true,
+        editable: false,
+        selectable: false,
+        selectMirror: false,
+        dayMaxEvents: true,
+        weekNumbers: true,
+        displayEventTime: true,
+        nowIndicator: true,
+        weekText: "KW",
+        allDaySlot: false,
+        events: this.formattedItems,
+      };
+    },
+  },
+  mounted() {
+    this.fetchCalendars();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    fetchCalendars() {
+      this.$http
+        .get("/public/calendar?output=json")
+        .then((result) => {
+          this.calendars = result.data;
+        })
+        .catch((err) => {});
+    },
+    openLinkModal(e: any) {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
+    },
+  },
+});
+</script>

src/views/public/calendar/CalendarExplain.vue

@@ -0,0 +1,67 @@
+<template>
+  <MainTemplate :showBack="false">
+    <template #headerInsert>
+      <RouterLink
+        :to="{
+          name: 'public-calendar',
+        }"
+        class="mid:hidden text-primary"
+      >
+        zum Kalender
+      </RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
+      </div>
+    </template>
+    <template #main>
+      <div class="instruction">
+        <h2>iOS: Webcal-Link einbinden</h2>
+        <ol>
+          <li>Öffne die <strong>"Einstellungen"</strong> auf deinem iPhone oder iPad.</li>
+          <li>Scrolle nach unten und wähle <strong>"Kalender"</strong>.</li>
+          <li>Tippe auf <strong>"Accounts"</strong> und dann auf <strong>"Account hinzufügen"</strong>.</li>
+          <li>Wähle <strong>"Andere"</strong> und anschließend <strong>"Kalender abonnieren"</strong>.</li>
+          <li>Gib den <strong>Webcal-Link</strong> in das Feld ein und tippe auf <strong>"Weiter"</strong>.</li>
+          <li>Der Kalender wird nun hinzugefügt und im Standard-Kalender angezeigt.</li>
+        </ol>
+        <!-- <img src="images/ios_calendar_step1.png" alt="iOS Kalender Einstellungen" /> -->
+        <!-- <img src="images/ios_calendar_step2.png" alt="Webcal-Link eingeben" /> -->
+      </div>
+      <br />
+      <div class="instruction">
+        <h2>Android: Webcal-Link einbinden</h2>
+        <p>
+          Auf Android-Geräten musst du den Webcal-Link über den Google Kalender hinzufügen, da es keine direkte Option
+          gibt:
+        </p>
+        <ol>
+          <li>
+            Öffne auf einem Computer oder im Browser den
+            <strong> <a href="https://calendar.google.com" target="_blank">Google Kalender</a> </strong>.
+          </li>
+          <li>Klicke auf das <strong>"+"-Symbol</strong> neben "Weitere Kalender" (links im Menü).</li>
+          <li>Wähle <strong>"Per URL"</strong> aus.</li>
+          <li>Gib den <strong>Webcal-Link</strong> ein und klicke auf <strong>"Kalender hinzufügen"</strong>.</li>
+          <li>Öffne die Google Kalender App auf deinem Android-Gerät und synchronisiere die Änderungen.</li>
+        </ol>
+        <!-- <img src="images/android_google_calendar_step1.png" alt="Google Kalender im Browser" /> -->
+        <!-- <img src="images/android_google_calendar_step2.png" alt="Webcal-Link einfügen" /> -->
+      </div>
+
+      <div class="instruction">
+        <h2>Hinweise</h2>
+        <ul>
+          <li>Der Webcal-Link muss korrekt formatiert sein (beginnt mit <strong>webcal://</strong>).</li>
+          <li>Wenn der Kalender nicht sofort angezeigt wird, überprüfe die Synchronisierungseinstellungen.</li>
+          <li>Für Android kann es hilfreich sein, die Google Kalender App zu aktualisieren.</li>
+        </ul>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>