From 466f809425ed163c56f273f9b70ebe198f9dc674 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 4 Jul 2021 16:25:41 +0200
Subject: [PATCH] Update timerangeselect dynamically

---
 src/components/ftbot/TimeRangeSelect.vue | 25 ++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ftbot/TimeRangeSelect.vue b/src/components/ftbot/TimeRangeSelect.vue
index 1c017682..1bcbc6fd 100644
--- a/src/components/ftbot/TimeRangeSelect.vue
+++ b/src/components/ftbot/TimeRangeSelect.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Emit, Prop } from 'vue-property-decorator';
+import { Component, Vue, Emit, Prop, Watch } from 'vue-property-decorator';
 import { dateFromString, dateStringToTimeRange, timestampToDateString } from '@/shared/formatters';
 
 const now = new Date();
@@ -54,17 +54,26 @@ export default class TimeRangeSelect extends Vue {
     return this.timeRange;
   }
 
+  @Watch('value')
+  valueChanged() {
+    this.updateInput();
+  }
+
+  updateInput() {
+    const tr = this.value.split('-');
+    if (tr[0]) {
+      this.dateFrom = timestampToDateString(dateFromString(tr[0], 'yyyyMMdd'));
+    }
+    if (tr.length > 1 && tr[1]) {
+      this.dateTo = timestampToDateString(dateFromString(tr[1], 'yyyyMMdd'));
+    }
+  }
+
   created() {
     if (!this.value) {
       this.dateFrom = timestampToDateString(new Date(now.getFullYear(), now.getMonth() - 1, 1));
     } else {
-      const tr = this.value.split('-');
-      if (tr[0]) {
-        this.dateFrom = timestampToDateString(dateFromString(tr[0], 'yyyyMMdd'));
-      }
-      if (tr.length > 1 && tr[1]) {
-        this.dateTo = timestampToDateString(dateFromString(tr[1], 'yyyyMMdd'));
-      }
+      this.updateInput();
     }
     this.emitTimeRange();
   }