public calendar view and secured type edit

src/components/Footer.vue

@@ -5,13 +5,17 @@
   >
     <div class="w-full flex flex-row gap-2 h-full align-middle">
       <TopLevelLink
-        v-if="routeName.includes('admin-')"
+        v-if="routeName == 'admin' || routeName.includes('admin-')"
         v-for="item in topLevel"
         :key="item.key"
         :link="item"
         :disableSubLink="true"
       />
-      <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung', levelDefault: '' }" :disableSubLink="true" />
+      <TopLevelLink
+        v-else-if="routeName == 'account' || routeName.includes('account-')"
+        :link="{ key: 'club', title: 'Zur Verwaltung', levelDefault: '' }"
+        :disableSubLink="true"
+      />
     </div>
   </footer>
 </template>

src/components/Header.vue

@@ -6,9 +6,14 @@
     </RouterLink>
     <div class="flex flex-row gap-2 items-center">
       <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
-        <TopLevelLink v-if="routeName.includes('admin-')" v-for="item in topLevel" :key="item.key" :link="item" />
         <TopLevelLink
-          v-else-if="routeName.includes('account-')"
+          v-if="routeName == 'admin' || routeName.includes('admin-')"
+          v-for="item in topLevel"
+          :key="item.key"
+          :link="item"
+        />
+        <TopLevelLink
+          v-else-if="routeName == 'account' || routeName.includes('account-')"
           :link="{ key: 'club', title: 'Zur Verwaltung', levelDefault: '' }"
           :disable-sub-link="true"
         />

src/components/admin/settings/calendarType/CalendarTypeListItem.vue

@@ -6,6 +6,7 @@
           <EyeIcon v-if="calendarType.nscdr" class="w-5 h-5" />
         </div>
         <p>{{ calendarType.type }}</p>
+        <small v-if="calendarType.passphrase">(passwortgeschützt)</small>
       </div>
       <div class="flex flex-row">
         <RouterLink

src/components/admin/settings/calendarType/CreateCalendarTypeModal.vue

@@ -14,9 +14,13 @@
         <label for="color">Farbe</label>
       </div>
       <div class="flex flex-row items-center gap-2">
-        <input type="checkbox" id="nscdr" />
+        <input type="checkbox" id="nscdr" v-model="nscdr" />
         <label for="nscdr">Standard Kalender Auslieferung (optional)</label>
       </div>
+      <div v-if="!nscdr">
+        <label for="passphrase">Passphrase (optional)</label>
+        <input type="text" id="passphrase" />
+      </div>
 
       <div class="flex flex-row gap-2">
         <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
@@ -59,6 +63,7 @@ export default defineComponent({
     return {
       status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
+      nscdr: false as boolean,
     };
   },
   beforeUnmount() {
@@ -75,6 +80,7 @@ export default defineComponent({
         type: formData.type.value,
         color: formData.color.value,
         nscdr: formData.nscdr.checked,
+        passphrase: formData.passphrase.value,
       };
       this.createCalendarType(createCalendarType)
         .then(() => {

src/router/index.ts

@@ -81,7 +81,7 @@ const router = createRouter({
         {
           path: "",
           name: "admin-default",
-          component: () => import("@/views/RouterView.vue"),
+          component: () => import("@/views/admin/ViewSelect.vue"),
         },
         {
           path: "club",
@@ -525,6 +525,23 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/public",
+      name: "public",
+      component: () => import("@/views/public/View.vue"),
+      children: [
+        {
+          path: "",
+          name: "public-default",
+          component: () => import("@/views/notFound.vue"),
+        },
+        {
+          path: "calendar",
+          name: "public-calendar",
+          component: () => import("@/views/public/calendar/Calendar.vue"),
+        },
+      ],
+    },
     {
       path: "/nopermissions",
       name: "nopermissions",

src/stores/admin/calendarType.ts

@@ -36,6 +36,7 @@ export const useCalendarTypeStore = defineStore("calendarType", {
         type: calendarType.type,
         nscdr: calendarType.nscdr,
         color: calendarType.color,
+        passphrase: calendarType.passphrase,
       });
       this.fetchCalendarTypes();
       return result;
@@ -45,6 +46,7 @@ export const useCalendarTypeStore = defineStore("calendarType", {
         type: calendarType.type,
         nscdr: calendarType.nscdr,
         color: calendarType.color,
+        passphrase: calendarType.passphrase,
       });
       this.fetchCalendarTypes();
       return result;

src/viewmodels/admin/calendarType.models.ts

@@ -3,12 +3,14 @@ export interface CalendarTypeViewModel {
   type: string;
   nscdr: boolean;
   color: string;
+  passphrase: string | null;
 }
 
 export interface CreateCalendarTypeViewModel {
   type: string;
   nscdr: boolean;
   color: string;
+  passphrase?: string;
 }
 
 export interface UpdateCalendarTypeViewModel {
@@ -16,4 +18,5 @@ export interface UpdateCalendarTypeViewModel {
   type: string;
   nscdr: boolean;
   color: string;
+  passphrase?: string;
 }

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,84 @@
+<template>
+  <MainTemplate :showBack="false">
+    <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>
+      </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 } from "vue";
+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 type { CalendarViewModel } from "@/viewmodels/admin/calendar.models";
+</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: {
+    fetchCalendars() {
+      this.$http
+        .get("/public/calendar?output=json")
+        .then((result) => {
+          this.calendars = result.data;
+        })
+        .catch((err) => {});
+    },
+  },
+});
+</script>