EventItem better formatting

ui/src/components/Calendar.vue

@@ -1,50 +1,17 @@
 <template>
-  <v-list three-line>
+  <v-list>
-    <v-list-item class="pa-0" v-for="event in events" :key="event.summary">
+    <EventItem v-for="event in events" :event="event" :key="event.summary" />
-      <h1>{{ event.start.toFormat("dd") }}.</h1>
-      <h2>{{ event.start.toFormat("MM") }}.</h2>
-      <v-list-item-content>
-        <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>
-          {{ event.start | locale_string }}
-          ({{ event.duration | duration_string }})
-        </v-list-item-subtitle>
-      </v-list-item-content>
-    </v-list-item>
   </v-list>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { DateTime, Duration } from "luxon";
+import Event from "./calendar/event";
-
+import EventItem from "./calendar/EventItem.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: {
+  components: {
-    duration_string: (d: Duration): string =>
+    EventItem,
-      // 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 {

ui/src/components/calendar/EventItem.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-list-item class="pa-0" three-line>
+    <div>
+      <span class="text-h4 text-md-h3">{{ start_day }}</span>
+      <span class="text-h5 text-md-h4 grey--text text--darken-1">{{
+        start_month
+      }}</span>
+    </div>
+    <v-list-item-content>
+      <v-list-item-title class="text-h6 text-md-h5 mt-0 mb-1">
+        {{ event.summary }}
+      </v-list-item-title>
+      <v-list-item-subtitle
+        v-if="event.description"
+        class="text-subtitle-2 text-md-subtitle-1 mt-0 mb-2"
+      >
+        {{ event.description }}
+      </v-list-item-subtitle>
+      <v-list-item-subtitle
+        class="thw-heading-font grey--text text--darken-1 font-weight-bold ma-0"
+      >
+        {{ data_string }}
+      </v-list-item-subtitle>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { DateTime } from "luxon";
+import Event from "./event";
+
+@Component
+export default class EventItem extends Vue {
+  @Prop()
+  private readonly event!: Event;
+
+  private get start_day(): string {
+    return this.event.start.toFormat("dd.");
+  }
+
+  private get start_month(): string {
+    return this.event.start.toFormat("MM.");
+  }
+
+  private get data_string(): string {
+    const locale_string = this.event.start
+      .setLocale(navigator.language)
+      .toLocaleString(DateTime.DATETIME_MED);
+
+    // TODO: if applicable, include days and/or minutes.
+    const duration_string = this.event.duration.shiftTo("hours").toHuman();
+
+    return locale_string + " (" + duration_string + ")";
+  }
+}
+</script>
+
+<style>
+</style>

ui/src/components/calendar/event.ts

@@ -0,0 +1,17 @@
+import { DateTime, Duration } from "luxon";
+
+export default 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);
+  }
+}