add event hash and dividers between list items

ui/src/components/calendar/Calendar.vue

@@ -1,6 +1,13 @@
 <template>
   <v-list>
-    <EventItem v-for="event in events" :event="event" :key="event.summary" />
+    <template v-for="(event, index) in parsed_events">
+      <EventItem :event="event" :key="event.hash" />
+      <v-divider
+        v-if="index < parsed_events.length - 1"
+        class="mx-5"
+        :key="event.hash + '-div'"
+      />
+    </template>
   </v-list>
 </template>
 
@@ -15,7 +22,7 @@ import EventItem from "./EventItem.vue";
   },
 })
 export default class Calendar extends Vue {
-  private readonly events_json = [
+  private readonly events = [
     {
       summary: "Lorem Ipsum",
       description:
@@ -37,10 +44,10 @@ export default class Calendar extends Vue {
     },
   ];
 
-  private get events(): Array<Event> {
+  private get parsed_events(): Array<Event> {
     let arr = [];
 
-    for (let json of this.events_json) {
+    for (let json of this.events) {
       arr.push(new Event(json));
     }
 
@@ -49,5 +56,8 @@ export default class Calendar extends Vue {
 }
 </script>
 
-<style>
+<style scoped>
+.v-list .v-divider {
+  border-color: rgba(0, 0, 0, 0.25);
+}
 </style>

ui/src/components/calendar/event.ts

@@ -14,4 +14,17 @@ export default class Event {
 
     this.duration = end.diff(this.start);
   }
+
+  public get hash(): string {
+    const str = JSON.stringify(this);
+
+    // from https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash &= hash; // Convert to 32bit integer
+    }
+    return new Uint32Array([hash])[0].toString(36);
+  }
 }