refactor: move Model classes

ui/src/assets/Model.ts

@@ -0,0 +1,12 @@
+export class Model {
+  public get hash(): string {
+    const str = JSON.stringify(this);
+
+    // source: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2775538#gistcomment-2775538
+    let hash = 0;
+    for (let i = 0; i < str.length; i++)
+      hash = Math.imul(31, hash) + str.charCodeAt(i) | 0;
+
+    return new Uint32Array([hash])[0].toString(36);
+  }
+}

ui/src/components/calendar/CalendarCarousel.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import Calendar from "./Calendar.vue";
-import { CalendarData, CalendarJSONData } from "./model";
+import { CalendarData, CalendarModel } from "./CalendarModel";
 
 @Component({
   components: {
@@ -27,7 +27,7 @@ export default class CalendarCarousel extends Vue {
   @Prop({ default: 10000 })
   private readonly speed!: number;
 
-  private readonly data: Array<CalendarJSONData> = [
+  private readonly data: Array<CalendarData> = [
     {
       title: "Lorem Ipsum",
       events: [
@@ -78,11 +78,11 @@ export default class CalendarCarousel extends Vue {
     },
   ];
 
-  private get calendars(): Array<CalendarData> {
+  private get calendars(): Array<CalendarModel> {
     let arr = [];
 
     for (const json_data of this.data) {
-      arr.push(new CalendarData(json_data));
+      arr.push(new CalendarModel(json_data));
     }
     return arr;
   }

ui/src/components/calendar/CalendarModel.ts

@@ -0,0 +1,23 @@
+import { Model } from "@/assets/Model";
+import { EventData, EventModel } from "./EventModel";
+
+export type CalendarData = {
+  title: string;
+  events: Array<EventData>;
+};
+
+export class CalendarModel extends Model {
+  public title: string;
+  public events: Array<EventModel>;
+
+  public constructor(json_data: CalendarData) {
+    super();
+
+    this.title = json_data.title
+
+    this.events = [];
+    for (const event_data of json_data.events) {
+      this.events.push(new EventModel(event_data))
+    }
+  }
+}

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 { EventData } from "./model";
+import { EventModel } from "./EventModel";
 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!: EventData;
+  private readonly event!: EventModel;
 
   private get data_string(): string {
     const locale_string = this.event.start.toLocaleString(

ui/src/components/calendar/EventModel.ts

@@ -0,0 +1,31 @@
+import { Model } from "@/assets/Model";
+import { DateTime, Duration } from "luxon";
+
+export type EventData = {
+  summary: string;
+  description: string;
+  dtstart: string;
+  dtend: string;
+};
+
+export class EventModel extends Model {
+  public summary: string;
+  public description: string;
+  public start: DateTime;
+  public duration: Duration;
+
+  public constructor(json_data: EventData) {
+    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);
+  }
+}

ui/src/components/calendar/model.ts

@@ -1,64 +0,0 @@
-import { DateTime, Duration } from "luxon";
-
-class Hashable {
-  public get hash(): string {
-    const str = JSON.stringify(this);
-
-    // source: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2775538#gistcomment-2775538
-    let hash = 0;
-    for (let i = 0; i < str.length; i++)
-      hash = Math.imul(31, hash) + str.charCodeAt(i) | 0;
-
-    return new Uint32Array([hash])[0].toString(36);
-  }
-}
-
-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 extends Hashable {
-  public title: string;
-  public events: Array<EventData>;
-
-  public constructor(json_data: CalendarJSONData) {
-    super();
-
-    this.title = json_data.title
-
-    this.events = [];
-    for (const event_data of json_data.events) {
-      this.events.push(new EventData(event_data))
-    }
-  }
-}