Calendar event data handling

ui/package.json

@@ -8,7 +8,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@types/color": "^3.0.3",
     "color": "^4.2.3",
     "core-js": "^3.8.3",
     "luxon": "^3.0.3",
@@ -19,6 +18,7 @@
     "vuetify": "^2.6.0"
   },
   "devDependencies": {
+    "@types/color": "^3.0.3",
     "@types/luxon": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",

ui/src/components/Calendar.vue

@@ -1,14 +1,16 @@
 <template>
   <v-list three-line>
-    <v-list-item>
+    <v-list-item class="pa-0" v-for="event in events" :key="event.summary">
-      <h1>11.</h1>
+      <h1>{{ event.start.toFormat("dd") }}.</h1>
-      <h2>06.</h2>
+      <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
+          {{ event.start | locale_string }}
-          sint. Rem et ut enim. Voluptates ratione sed asperiores dignissimos
+          ({{ event.duration | duration_string }})
-          accusamus.
         </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
+class Event {
-export default class Calendar extends Vue {}
+  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>