title_bar subdir

ui/src/App.vue

@@ -22,7 +22,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import Calendar from "./components/calendar/Calendar.vue";
 import Dashboard from "./components/Dashboard.vue";
-import TitleBar from "./components/TitleBar.vue";
+import TitleBar from "./components/title_bar/TitleBar.vue";
 import TickerBar from "./components/TickerBar.vue";
 
 @Component({

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/EventDate.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="d-flex align-end justify-center mr-1 mr-md-2">
     <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
-    <span class="d-flex text-h5 text-md-h4 grey--text text--darken-1">{{
-      month
-    }}</span>
+    <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
+      {{ month }}
+    </span>
   </div>
 </template>
 

ui/src/components/calendar/EventItem.vue

@@ -12,7 +12,13 @@
         {{ event.description }}
       </v-list-item-subtitle>
       <v-list-item-subtitle
-        class="thw-heading-font grey--text text--darken-1 font-weight-bold ma-0"
+        class="
+          thw-heading-font
+          blue-grey--text
+          text--darken-1
+          font-weight-bold
+          ma-0
+        "
       >
         {{ data_string }}
       </v-list-item-subtitle>

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);
+  }
 }

ui/src/components/title_bar/THWLogo.vue

@@ -8,7 +8,7 @@
         class="d-none d-sm-flex"
         max-width="56"
         max-height="56"
-        :src="require('../assets/thw.svg')"
+        :src="require('@/assets/thw.svg')"
       />
     </div>
     <v-divider class="d-none d-md-block my-1" />