From 18bb455ec9f592e5442cea6ba2af3a7bc881e330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Fri, 9 Sep 2022 23:14:03 +0000
Subject: [PATCH] TS class components

---
 ui/src/components/ClockDisplay.vue | 30 ++++++++++++------------------
 ui/src/components/TitleBar.vue     |  9 ++++-----
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/ClockDisplay.vue b/ui/src/components/ClockDisplay.vue
index 9c97880..afa956e 100644
--- a/ui/src/components/ClockDisplay.vue
+++ b/ui/src/components/ClockDisplay.vue
@@ -3,30 +3,24 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import moment from "moment";
 
-export default Vue.extend({
-  name: "ClockDisplay",
+@Component
+export default class ClockDisplay extends Vue {
+  private clock = "";
 
-  data: () => ({
-    clock: "",
-  }),
+  @Prop()
+  format!: string;
 
-  props: {
-    format: String,
-  },
+  private update(): void {
+    this.clock = moment().format(this.format);
+  }
 
-  methods: {
-    update(): void {
-      this.clock = moment().format(this.format);
-    },
-  },
-
-  created(): void {
+  private created(): void {
     setInterval(this.update, 1000);
-  },
-});
+  }
+}
 </script>
 
 <style>
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index 13edf8a..ce1a6ab 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -10,16 +10,15 @@
 </template>
 
 <script>
-import Vue from "vue";
+import { Component, Vue } from "vue-property-decorator";
 import ClockDisplay from "./ClockDisplay.vue";
 
-export default Vue.extend({
-  name: "TitleBar",
-
+@Component({
   components: {
     ClockDisplay,
   },
-});
+})
+export default class TitleBar extends Vue {}
 </script>
 
 <style>