Merge pull request #219 from billangli/dev/timeline-input-button

Author: ErikBjare

src/components/InputTimeInterval.vue

@@ -1,19 +1,24 @@
 <template lang="pug">
 div
   div
+    b-alert(v-if="mode == 'range' && invalidDaterange", variant="warning", show)
+      | The selected date range is invalid. The second date must be greater than the first date.
+    b-alert(v-if="mode == 'range' && daterangeTooLong", variant="warning", show)
+      | The selected date range is too long. The maximum is {{ maxDuration/(24*60*60) }} days.
+
     table
       tr
         th.pr-2
           label(for="mode") Interval mode:
         td
-          select(id="mode" v-model="mode")
+          select(id="mode", v-model="mode")
             option(value='last_duration') Last duration
             option(value='range') Date range
       tr(v-if="mode == 'last_duration'")
         th.pr-2
           label(for="duration") Show last:
         td
-          select(id="duration" :value="duration", @change="valueChanged")
+          select(id="duration", v-model="duration", @change="valueChanged")
             option(:value="15*60") 15min
             option(:value="30*60") 30min
             option(:value="60*60") 1h
@@ -25,27 +30,36 @@ div
       tr(v-if="mode == 'range'")
         th.pr-2 Range:
         td
-          input(type="date", v-model="start", @input="valueChanged")
-          input(type="date", v-model="end", @input="valueChanged")
+          input(type="date", v-model="start")
+          input(type="date", v-model="end")
+          button(
+            class="btn btn-outline-dark btn-sm",
+            type="button", 
+            :disabled="mode == 'range' && (invalidDaterange || emptyDaterange || daterangeTooLong)",
+            @click="valueChanged"
+          ) Update
 
 </template>
 
 <style scoped lang="scss"></style>
 
 <script>
 import moment from 'moment';
-
 export default {
   name: 'input-timeinterval',
   props: {
-    duration: {
+    defaultDuration: {
       type: Number,
       default: 60 * 60,
     },
+    maxDuration: {
+      type: Number,
+      default: null,
+    },
   },
-  data: () => {
+  data() {
     return {
-      now: moment(),
+      duration: JSON.parse(JSON.stringify(this.defaultDuration)), // Make a copy of defaultDuration
       mode: 'last_duration',
       start: null,
       end: null,
@@ -57,24 +71,31 @@ export default {
         if (this.mode == 'range' && this.start && this.end) {
           return [moment(this.start), moment(this.end)];
         } else {
-          return [moment(this.now).subtract(this.duration, 'seconds'), moment(this.now)];
-        }
-      },
-      set(newValue) {
-        if (!isNaN(newValue)) {
-          // Set new now and duration
-          this.now = moment();
-          this.duration = newValue;
-        } else {
-          // Not required for mode='range', start and end set directly through v-model
+          return [moment().subtract(this.duration, 'seconds'), moment()];
         }
       },
     },
+    emptyDaterange() {
+      return !(this.start && this.end);
+    },
+    invalidDaterange() {
+      return moment(this.start) >= moment(this.end);
+    },
+    daterangeTooLong() {
+      return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
+    },
+  },
+  mounted() {
+    this.valueChanged();
   },
   methods: {
-    valueChanged(e) {
-      this.value = e.target.value;
-      this.$emit('input', this.value);
+    valueChanged() {
+      if (
+        this.mode == 'last_duration' ||
+        (!this.emptyDaterange && !this.invalidDaterange && !this.daterangeTooLong)
+      ) {
+        this.$emit('input', this.value);
+      }
     },
   },
 };

src/views/Bucket.vue

@@ -24,16 +24,14 @@ div
       th Eventcount:
       td {{ eventcount }}
 
-  input-timeinterval(v-model="daterange")
+  input-timeinterval(v-model="daterange", :maxDuration="maxDuration")
 
   vis-timeline(:buckets="[bucket_with_events]", :showRowLabels="false")
 
   aw-eventlist(:bucket_id="id", @save="updateEvent", :events="events")
 </template>
 
 <script>
-import moment from 'moment';
-
 export default {
   name: 'Bucket',
   props: {
@@ -44,7 +42,8 @@ export default {
       bucket_with_events: { events: [] },
       events: [],
       eventcount: '?',
-      daterange: [moment().subtract(1, 'hour'), moment()],
+      daterange: null,
+      maxDuration: 31 * 24 * 60 * 60,
     };
   },
   computed: {
@@ -59,7 +58,6 @@ export default {
   },
   mounted: async function () {
     await this.$store.dispatch('buckets/ensureBuckets');
-    await this.getEvents(this.id);
     await this.getEventCount(this.id);
   },
   methods: {

src/views/Timeline.vue

@@ -2,7 +2,7 @@
 div
   h2 Timeline
 
-  input-timeinterval(v-model="daterange", v-bind:duration="timeintervalDefaultDuration")
+  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration")
 
   div(v-show="buckets !== null")
     div
@@ -17,16 +17,15 @@ div
 </template>
 
 <script>
-import moment from 'moment';
 import _ from 'lodash';
-
 export default {
   name: 'Timeline',
-  data: () => {
+  data() {
     return {
       buckets: null,
-      daterange: [moment().subtract(1, 'hour'), moment()],
+      daterange: null,
       timeintervalDefaultDuration: localStorage.durationDefault,
+      maxDuration: 31 * 24 * 60 * 60,
     };
   },
   computed: {
@@ -39,9 +38,6 @@ export default {
       this.getBuckets();
     },
   },
-  mounted: function () {
-    this.getBuckets();
-  },
   methods: {
     getBuckets: async function () {
       this.buckets = await this.$store.dispatch('buckets/getBucketsWithEvents', {