EventDate component

ui/src/App.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import Calendar from "./components/Calendar.vue";
+import Calendar from "./components/calendar/Calendar.vue";
 import Dashboard from "./components/Dashboard.vue";
 import TitleBar from "./components/TitleBar.vue";
 import TickerBar from "./components/TickerBar.vue";

ui/src/components/Calendar.vue

@@ -1,86 +0,0 @@
-<template>
-  <v-list three-line>
-    <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> {{ 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";
-
-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>
-</style>

ui/src/components/calendar/Calendar.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-list>
+    <EventItem v-for="event in events" :event="event" :key="event.summary" />
+  </v-list>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Event from "./event";
+import EventItem from "./EventItem.vue";
+
+@Component({
+  components: {
+    EventItem,
+  },
+})
+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>
+</style>

ui/src/components/calendar/EventDate.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <span class="text-h4 text-md-h3">{{ day }}</span>
+    <span class="text-h5 text-md-h4 grey--text text--darken-1">{{
+      month
+    }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { DateTime } from "luxon";
+
+@Component
+export default class EventDate extends Vue {
+  @Prop()
+  private readonly date!: DateTime;
+
+  private get day(): string {
+    return this.date.toFormat("dd.");
+  }
+
+  private get month(): string {
+    return this.date.toFormat("MM.");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~vuetify/src/styles/settings/_variables";
+
+div {
+  min-width: 95px;
+
+  @media #{map-get($display-breakpoints, "md-and-up")} {
+    min-width: 130px;
+  }
+}
+</style>

ui/src/components/calendar/EventItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-list-item class="pa-0" three-line>
+    <EventDate :date="event.start" />
+    <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";
+import EventDate from "./EventDate.vue";
+
+@Component({
+  components: {
+    EventDate,
+  },
+})
+export default class EventItem extends Vue {
+  @Prop()
+  private readonly event!: Event;
+
+  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);
+  }
+}