feat(app): started updating the demo app

andrewcourtice · Aug 5, 2021 · 17c742e · 17c742e
1 parent 0afd28a
commit 17c742e
Show file tree

Hide file tree

Showing 19 changed files with 1,675 additions and 213 deletions.
diff --git a/app/package.json b/app/package.json
@@ -15,19 +15,22 @@
     "dependencies": {
         "@harlem/core": "^1.3.2",
         "@harlem/extension-action": "^1.3.2",
+        "@harlem/extension-history": "^1.3.2",
         "@harlem/extension-lazy": "^1.3.2",
         "@harlem/extension-reset": "^1.3.2",
         "@harlem/extension-snapshot": "^1.3.2",
         "@harlem/extension-storage": "^1.3.2",
         "@harlem/extension-trace": "^1.3.2",
         "@harlem/extension-transaction": "^1.3.2",
         "@harlem/plugin-devtools": "^1.3.2",
+        "date-fns": "^2.23.0",
+        "date-fns-tz": "^1.1.6",
         "flex-layout-attribute": "^1.0.3",
-        "vue": "^3.1.5"
+        "vue": "^3.2.0-beta.7"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^1.3.0",
-        "@vue/compiler-sfc": "^3.1.5",
+        "@vue/compiler-sfc": "^3.2.0-beta.7",
         "vite": "^2.4.4"
     }
 }
diff --git a/app/src/app.vue b/app/src/app.vue
@@ -2,28 +2,36 @@
     <div class="app" layout="row center-center">
         <div>
             <h1>Harlem Demo App</h1>
-            <user-details-output />
-            <user-details-input />
+            <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>
+            <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>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import UserDetailsInput from './components/user/user-details-input.vue';
-import UserDetailsOutput from './components/user/user-details-output.vue';
+<script lang="ts" setup>
+import Clock from './components/clock.vue';
 
 import {
-    defineComponent
+    computed
 } from 'vue';
 
-export default defineComponent({
+import {
+    clocks,
+    timezoneOptions,
+    loadTimezones,
+    isActionRunning
+} from './stores/time';
 
-    components: {
-        UserDetailsInput,
-        UserDetailsOutput
-    }
+const isLoading = computed(() => isActionRunning('load-timezones'));
 
-});
 </script>
 
 <style>