From 5cfebd4c6fa4bd6b2abe34c2e45df07455c548df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:03:19 +0000
Subject: [PATCH] Calendar props, CalendarCarousel

---
 ui/src/App.vue                                |  6 +-
 ui/src/components/calendar/Calendar.vue       | 42 ++-------
 .../components/calendar/CalendarCarousel.vue  | 91 +++++++++++++++++++
 ui/src/components/calendar/event.ts           | 40 ++++++--
 4 files changed, 134 insertions(+), 45 deletions(-)
 create mode 100644 ui/src/components/calendar/CalendarCarousel.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 6c2f6b6..c2d985f 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -7,7 +7,7 @@
         :title="title_html"
       />
       <Dashboard :message="message_html">
-        <Calendar />
+        <CalendarCarousel />
       </Dashboard>
     </v-main>
     <TickerBar
@@ -20,14 +20,14 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import Calendar from "./components/calendar/Calendar.vue";
+import CalendarCarousel from "./components/calendar/CalendarCarousel.vue";
 import Dashboard from "./components/Dashboard.vue";
 import TitleBar from "./components/title_bar/TitleBar.vue";
 import TickerBar from "./components/TickerBar.vue";
 
 @Component({
   components: {
-    Calendar,
+    CalendarCarousel,
     Dashboard,
     TitleBar,
     TickerBar,
diff --git a/ui/src/components/calendar/Calendar.vue b/ui/src/components/calendar/Calendar.vue
index d316d97..92e196d 100644
--- a/ui/src/components/calendar/Calendar.vue
+++ b/ui/src/components/calendar/Calendar.vue
@@ -1,10 +1,10 @@
 <template>
   <v-list>
     <span class="text-h5 text-md-h4 d-inline-block mb-2">{{ title }}</span>
-    <template v-for="(event, index) in parsed_events">
+    <template v-for="(event, index) in events">
       <EventItem :event="event" :key="event.hash" />
       <v-divider
-        v-if="index < parsed_events.length - 1"
+        v-if="index < events.length - 1"
         class="mx-5"
         :key="event.hash + '-div'"
       />
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import Event from "./event";
 import EventItem from "./EventItem.vue";
 
@@ -23,39 +23,11 @@ import EventItem from "./EventItem.vue";
   },
 })
 export default class Calendar extends Vue {
-  private readonly title = "CALENDAR";
+  @Prop({ default: "CALENDAR" })
+  private readonly title!: string;
 
-  private readonly events = [
-    {
-      summary: "Lorem Ipsum",
-      description:
-        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
-      dtstart: "2022-09-08T07:00:00+00:00",
-      dtend: "2022-09-08T16:00:00+00:00",
-    },
-    {
-      summary: "Sed ut perspiciatis unde omnis",
-      description: "Lorem ipsum dolor sit amet, consectetur",
-      dtstart: "2022-09-09T07:00:00+00:00",
-      dtend: "2022-09-09T09:00:00+00:00",
-    },
-    {
-      summary: "At vero eos et accusamus",
-      description: "",
-      dtstart: "2022-09-10T07:00:00+00:00",
-      dtend: "2022-09-10T16:00:00+00:00",
-    },
-  ];
-
-  private get parsed_events(): Array<Event> {
-    let arr = [];
-
-    for (let json of this.events) {
-      arr.push(new Event(json));
-    }
-
-    return arr;
-  }
+  @Prop({ default: () => [] })
+  private readonly events!: Array<Event>;
 }
 </script>
 
diff --git a/ui/src/components/calendar/CalendarCarousel.vue b/ui/src/components/calendar/CalendarCarousel.vue
new file mode 100644
index 0000000..60b3216
--- /dev/null
+++ b/ui/src/components/calendar/CalendarCarousel.vue
@@ -0,0 +1,91 @@
+<template>
+  <v-carousel
+    cycle
+    interval="10000"
+    height="auto"
+    :show-arrows="false"
+    touchless
+    hide-delimiters
+  >
+    <v-carousel-item v-for="calendar in calendars" :key="calendar.title">
+      <Calendar
+        :key="calendar.title + '-cal'"
+        :title="calendar.title"
+        :events="calendar.events"
+      />
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Calendar from "./Calendar.vue";
+import { CalendarData, CalendarJSONData } from "./event";
+
+@Component({
+  components: {
+    Calendar,
+  },
+})
+export default class CalendarCarousel extends Vue {
+  private readonly data: Array<CalendarJSONData> = [
+    {
+      title: "Lorem Ipsum",
+      events: [
+        {
+          summary: "Lorem Ipsum",
+          description:
+            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
+          dtstart: "2022-09-08T07:00:00+00:00",
+          dtend: "2022-09-08T16:00:00+00:00",
+        },
+        {
+          summary: "Sed ut perspiciatis unde omnis",
+          description: "Lorem ipsum dolor sit amet, consectetur",
+          dtstart: "2022-09-09T07:00:00+00:00",
+          dtend: "2022-09-09T09:00:00+00:00",
+        },
+        {
+          summary: "At vero eos et accusamus",
+          description: "",
+          dtstart: "2022-09-10T07:00:00+00:00",
+          dtend: "2022-09-10T16:00:00+00:00",
+        },
+      ],
+    },
+    {
+      title: "Li Europan lingues",
+      events: [
+        {
+          summary: "Occidental in fact, it va esser Occidental",
+          description:
+            "Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.",
+          dtstart: "2022-09-08T07:00:00+00:00",
+          dtend: "2022-09-08T16:00:00+00:00",
+        },
+        {
+          summary: "Membres del sam familie",
+          description: "Lor separat existentie es un myth.",
+          dtstart: "2022-09-09T07:00:00+00:00",
+          dtend: "2022-09-09T09:30:30+00:00",
+        },
+        {
+          summary: "On refusa continuar payar custosi traductores",
+          description: "",
+          dtstart: "2022-09-10T07:00:00+00:00",
+          dtend: "2022-09-20T16:00:00+00:00",
+        },
+      ],
+    },
+  ];
+
+  private get calendars(): Array<CalendarData> {
+    let arr = [];
+
+    for (const json_data of this.data) {
+      arr.push(new CalendarData(json_data));
+    }
+    return arr;
+  }
+}
+</script>
diff --git a/ui/src/components/calendar/event.ts b/ui/src/components/calendar/event.ts
index f2536c1..9e6a284 100644
--- a/ui/src/components/calendar/event.ts
+++ b/ui/src/components/calendar/event.ts
@@ -1,19 +1,26 @@
 import { DateTime, Duration } from "luxon";
 
-export default class Event {
+export type EventJSONData = {
+  summary: string;
+  description: string;
+  dtstart: string;
+  dtend: string;
+};
+
+export default class EventData {
   public summary: string;
   public description: string;
   public start: DateTime;
   public duration: Duration;
 
-  public constructor(json_data: Record<string, string>) {
-    this.summary = json_data["summary"];
-    this.description = json_data["description"];
+  public constructor(json_data: EventJSONData) {
+    this.summary = json_data.summary;
+    this.description = json_data.description;
     this.start = DateTime
-      .fromISO(json_data["dtstart"])
+      .fromISO(json_data.dtstart)
       .setLocale(navigator.language);
     const end = DateTime
-      .fromISO(json_data["dtend"])
+      .fromISO(json_data.dtend)
       .setLocale(navigator.language);
 
     this.duration = end.diff(this.start);
@@ -29,4 +36,23 @@ export default class Event {
 
     return new Uint32Array([hash])[0].toString(36);
   }
-}
\ No newline at end of file
+}
+
+export type CalendarJSONData = {
+  title: string;
+  events: Array<EventJSONData>;
+};
+
+export class CalendarData {
+  public title: string;
+  public events: Array<EventData>;
+
+  public constructor(json_data: CalendarJSONData) {
+    this.title = json_data.title
+
+    this.events = [];
+    for (const event_data of json_data.events) {
+      this.events.push(new EventData(event_data))
+    }
+  }
+}