From 459181e5407d210683c1e65d37f984e970f8cde4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Wed, 14 Sep 2022 13:21:35 +0000
Subject: [PATCH] Calendar event data handling

---
 ui/src/components/Calendar.vue | 78 ++++++++++++++++++++++++++++++----
 1 file changed, 69 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index c139129..2102b27 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -1,14 +1,16 @@
 <template>
   <v-list three-line>
-    <v-list-item>
-      <h1>11.</h1>
-      <h2>06.</h2>
+    <v-list-item class="pa-0" v-for="event in events" :key="event.summary">
+      <h1>{{ event.start.toFormat("dd") }}.</h1>
+      <h2>{{ event.start.toFormat("MM") }}.</h2>
       <v-list-item-content>
-        <v-list-item-title> Lorem Ipsum </v-list-item-title>
+        <v-list-item-title> {{ event.summary }} </v-list-item-title>
+        <v-list-item-subtitle v-if="event.description">
+          {{ event.description }}
+        </v-list-item-subtitle>
         <v-list-item-subtitle>
-          Aut doloremque eos cum nam ducimus quidem consequuntur. Sed aut ut et
-          sint. Rem et ut enim. Voluptates ratione sed asperiores dignissimos
-          accusamus.
+          {{ event.start | locale_string }}
+          ({{ event.duration | duration_string }})
         </v-list-item-subtitle>
       </v-list-item-content>
     </v-list-item>
@@ -17,9 +19,67 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { DateTime, Duration } from "luxon";
 
-@Component
-export default class Calendar extends Vue {}
+class Event {
+  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"];
+    this.start = DateTime.fromISO(json_data["dtstart"]);
+    const end = DateTime.fromISO(json_data["dtend"]);
+
+    this.duration = end.diff(this.start);
+  }
+}
+
+@Component({
+  filters: {
+    duration_string: (d: Duration): string =>
+      // TODO: if applicable, include days and/or minutes.
+      d.shiftTo("hours").toHuman(),
+
+    locale_string: (dt: DateTime): string =>
+      dt.setLocale(navigator.language).toLocaleString(DateTime.DATETIME_MED),
+  },
+})
+export default class Calendar extends Vue {
+  private readonly events_json = [
+    {
+      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 events(): Array<Event> {
+    let arr = [];
+
+    for (let json of this.events_json) {
+      arr.push(new Event(json));
+    }
+
+    return arr;
+  }
+}
 </script>
 
 <style>