feat(app): further work on demo app

andrewcourtice · Aug 6, 2021 · 45665ab · 45665ab
1 parent 17c742e
commit 45665ab
Show file tree

Hide file tree

Showing 21 changed files with 523 additions and 209 deletions.
diff --git a/app/index.html b/app/index.html
@@ -8,11 +8,11 @@
     <title>Harlem Demo App</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
+    <script type="module" src="/src/index.ts" defer></script>
 </head>
 
 <body>
-    <div id="app"></div>
-    <script type="module" src="/src/index.ts"></script>
+
 </body>
 
 </html>
diff --git a/app/src/app.vue b/app/src/app.vue
@@ -1,44 +1,109 @@
 <template>
-    <div class="app" layout="row center-center">
-        <div>
-            <h1>Harlem Demo App</h1>
-            <button @click="loadTimezones()">Load Timezones</button>
-            <div layout="rows top-spread">
-                <clock v-for="clock in clocks" :key="clock.timezone" v-bind="clock"></clock>
+    <div class="app">
+        <container>
+            <header>
+                <h1>Harlem</h1>
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, recusandae enim expedita iusto, esse voluptatum odio itaque delectus voluptatem dolorum dolores sint quam excepturi, consequatur aliquam nesciunt distinctio! Ullam, excepturi!
+                </p>
+            </header>
+            <div layout="rows center-justify">
+                <div layout="row center-right">
+                    <div>Clock type:</div>
+                    <choice-group>
+                        <choice v-for="{ label, value } in state.clockTypes" :key="value" :id="value" :value="value" v-model="clockType">
+                            <span>{{ label }}</span>
+                        </choice>
+                    </choice-group>
+                </div>
             </div>
-            <div v-if="isLoading">Loading...</div>
-            <div v-else>
-                <select name="" id="">
-                    <option v-for="option in timezoneOptions" :key="option" :value="option">{{ option }}</option>
-                </select>
+            <div class="clocks">
+                <div class="clock" v-for="{ time, timezone } in clocks" :key="timezone">
+                    <component  :is="clockComponent" :time="time"></component>
+                    <div class="clock__label">
+                        <div class="clock__timezone">{{ timezone }}</div>
+                        <div class="clock__date">{{ getClockDateLabel(time, timezone) }}</div>
+                    </div>
+                </div>
+                <div class="add-clock">
+                    Add Clock
+                </div>
             </div>
-        </div>
+        </container>
     </div>
 </template>
 
 <script lang="ts" setup>
-import Clock from './components/clock.vue';
+import Container from './components/core/container.vue';
+import ChoiceGroup from './components/core/choice-group.vue';
+import Choice from './components/core/choice.vue';
+import AnalogueClock from './components/clock/analogue-clock.vue';
+import DigitalClock from './components/clock/digital-clock.vue';
 
 import {
     computed
 } from 'vue';
 
 import {
+    format,
+} from 'date-fns-tz';
+
+import {
+    state,
     clocks,
-    timezoneOptions,
-    loadTimezones,
-    isActionRunning
+    setClockType
 } from './stores/time';
 
-const isLoading = computed(() => isActionRunning('load-timezones'));
+const clockType = computed({
+    get: () => state.clockType,
+    set: type => setClockType(type)
+});
+
+const clockComponent = computed(() => state.clockType === 'analogue'
+    ? AnalogueClock
+    : DigitalClock
+);
 
+function getClockDateLabel(time: Date, timezone: string) {
+    return format(time, 'EEE, do MMM yyyy', {
+        timeZone: timezone
+    });
+}
 </script>
 
 <style>
 
     .app {
-        width: 100%;
-        height: 100%;
+        padding: 2rem;
+    }
+
+    .clocks {
+        display: grid;
+        gap: 2rem;
+        grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
+        justify-items: stretch;
+        align-items: stretch;
+    }
+
+    .clock,
+    .add-clock {
+        padding: 1.5rem;
+        text-align: center;
+        background-color: #EEE;
+        border-radius: 1.5rem;
+    }
+
+    .clock__label {
+        margin-top: 1.5rem;
+    }
+    
+    .clock__timezone {
+        font-weight: 600;
+    }
+
+    .clock__date {
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
     }
 
 </style>
diff --git a/app/src/assets/fonts/digital/digital.ttf b/app/src/assets/fonts/digital/digital.ttf
diff --git a/app/src/assets/images/clock.svg b/app/src/assets/images/clock.svg
diff --git a/app/src/components/clock.vue b/app/src/components/clock.vue