refactor: event -> model, Hashable objects

ui/src/components/calendar/Calendar.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import Event from "./event";
+import { EventData } from "./model";
 import EventItem from "./EventItem.vue";
 
 @Component({
@@ -27,7 +27,7 @@ export default class Calendar extends Vue {
   private readonly title!: string;
 
   @Prop({ default: () => [] })
-  private readonly events!: Array<Event>;
+  private readonly events!: Array<EventData>;
 }
 </script>
 

ui/src/components/calendar/CalendarCarousel.vue

@@ -7,12 +7,8 @@
     touchless
     hide-delimiters
   >
-    <v-carousel-item v-for="calendar in calendars" :key="calendar.title">
+    <v-carousel-item v-for="calendar in calendars" :key="calendar.hash">
-      <Calendar
+      <Calendar :title="calendar.title" :events="calendar.events" />
-        :key="calendar.title + '-cal'"
-        :title="calendar.title"
-        :events="calendar.events"
-      />
     </v-carousel-item>
   </v-carousel>
 </template>
@@ -20,7 +16,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Calendar from "./Calendar.vue";
-import { CalendarData, CalendarJSONData } from "./event";
+import { CalendarData, CalendarJSONData } from "./model";
 
 @Component({
   components: {

ui/src/components/calendar/EventItem.vue

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { DateTime, DurationLikeObject } from "luxon";
-import Event from "./event";
+import { EventData } from "./model";
 import EventDate from "./EventDate.vue";
 
 @Component({
@@ -41,7 +41,7 @@ import EventDate from "./EventDate.vue";
 })
 export default class EventItem extends Vue {
   @Prop()
-  private readonly event!: Event;
+  private readonly event!: EventData;
 
   private get data_string(): string {
     const locale_string = this.event.start.toLocaleString(

ui/src/components/calendar/model.ts

@@ -1,31 +1,6 @@
 import { DateTime, Duration } from "luxon";
 
-export type EventJSONData = {
+class Hashable {
-  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: EventJSONData) {
-    this.summary = json_data.summary;
-    this.description = json_data.description;
-    this.start = DateTime
-      .fromISO(json_data.dtstart)
-      .setLocale(navigator.language);
-    const end = DateTime
-      .fromISO(json_data.dtend)
-      .setLocale(navigator.language);
-
-    this.duration = end.diff(this.start);
-  }
-
   public get hash(): string {
     const str = JSON.stringify(this);
 
@@ -38,16 +13,47 @@ export default class EventData {
   }
 }
 
+export type EventJSONData = {
+  summary: string;
+  description: string;
+  dtstart: string;
+  dtend: string;
+};
+
+export class EventData extends Hashable {
+  public summary: string;
+  public description: string;
+  public start: DateTime;
+  public duration: Duration;
+
+  public constructor(json_data: EventJSONData) {
+    super();
+
+    this.summary = json_data.summary;
+    this.description = json_data.description;
+    this.start = DateTime
+      .fromISO(json_data.dtstart)
+      .setLocale(navigator.language);
+    const end = DateTime
+      .fromISO(json_data.dtend)
+      .setLocale(navigator.language);
+
+    this.duration = end.diff(this.start);
+  }
+}
+
 export type CalendarJSONData = {
   title: string;
   events: Array<EventJSONData>;
 };
 
-export class CalendarData {
+export class CalendarData extends Hashable {
   public title: string;
   public events: Array<EventData>;
 
   public constructor(json_data: CalendarJSONData) {
+    super();
+
     this.title = json_data.title
 
     this.events = [];