From e298a263223d9b08f9d566c2038b0689506e967d Mon Sep 17 00:00:00 2001
From: Paul Oliver <contact@pauloliver.dev>
Date: Thu, 29 Feb 2024 03:01:41 +0100
Subject: Vue basic setup and timezone picker component

---
 client/src/components/ZonePicker.vue | 51 ++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 client/src/components/ZonePicker.vue

(limited to 'client/src/components')

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>
-- 
cgit v1.2.1