Vue basic setup and timezone picker component

3 files changed, 72 insertions, 0 deletions

diff --git a/client/src/App.vue b/client/src/App.vue
new file mode 100644
index 0000000..4c954ec
--- /dev/null
+++ b/client/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <ZonePicker />
+</template>
+
+<script>
+import ZonePicker from './components/ZonePicker.vue'
+
+export default {
+  components: {
+    ZonePicker
+  }
+}
+</script>
diff --git a/client/src/components/ZonePicker.vue b/client/src/components/ZonePicker.vue
new file mode 100644
index 0000000..d06e24d
--- /dev/null
+++ b/client/src/components/ZonePicker.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div>
+      Please select timezone:
+      <select v-model="selected" :disabled="disabled">
+        <option v-for="zone in zones" :value="zone" :key="zone">
+          {{ zone.replace(/_/g, ' ') }}
+        </option>
+      </select>
+      &emsp;
+      <button v-on:click="get_time" :disabled="disabled || !selected">Get time</button>
+    </div>
+    <hr />
+    <div>{{ statement }}</div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import config from '../../config'
+
+export default {
+  data() {
+    return {
+      disabled: true,
+      selected: '',
+      statement: '',
+      zones: []
+    }
+  },
+  mounted() {
+    axios
+      .get(`${config.api}/zones/`)
+      .then(response => {
+        this.zones = response.data
+        this.disabled = false
+      })
+  },
+  methods: {
+    get_time() {
+      this.disabled = true
+      axios
+        .get(`${config.api}/time-at/${this.selected}`)
+        .then(response => {
+          this.statement = `It's ${response.data.time} at ${response.data.zone.replace(/_/g, ' ')}`
+          this.disabled = false
+        })
+    }
+  }
+}
+</script>
diff --git a/client/src/main.js b/client/src/main.js
new file mode 100644
index 0000000..63eb05f
--- /dev/null
+++ b/client/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')