changeset 2769:c2a2515c7a72

import_overview: hopefully fixed dancing bug
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 22 Mar 2019 11:06:15 +0100
parents 0d9c006ac25a
children ab1a22052437
files client/src/components/importoverview/ImportOverview.vue
diffstat 1 files changed, 42 insertions(+), 128 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue	Fri Mar 22 10:04:16 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Fri Mar 22 11:06:15 2019 +0100
@@ -29,6 +29,7 @@
       >
         <div class="mr-3 my-auto pointer">
           <button
+            :disabled="!this.prev"
             @click="earlier"
             class="btn btn-sm btn-outline-light text-dark"
           >
@@ -42,7 +43,11 @@
           <span class="date">{{ interval[1] | dateTime }}</span>
         </div>
         <div class="ml-3 my-auto pointer">
-          <button @click="later" class="btn btn-sm btn-outline-light text-dark">
+          <button
+            :disabled="!this.next"
+            @click="later"
+            class="btn btn-sm btn-outline-light text-dark"
+          >
             <font-awesome-icon class="mr-2" icon="angle-right" /><translate
               >Later</translate
             >
@@ -127,12 +132,9 @@
   startOfDay,
   startOfHour,
   endOfHour,
-  addHours,
-  subHours,
   endOfDay,
   addDays,
   subDays,
-  isFuture,
   format
 } from "date-fns";
 
@@ -172,84 +174,40 @@
     }
   },
   methods: {
-    earlier() {
+    determineInterval(pointInTime) {
+      let start, end;
       switch (this.selectedInterval) {
         case this.$options.LAST_HOUR:
-          this.$store.commit(
-            "imports/setStartDate",
-            subHours(startOfHour(this.startDate), 1)
-          );
-          this.$store.commit("imports/setEndDate", endOfHour(this.startDate));
+          start = startOfHour(pointInTime);
+          end = endOfHour(pointInTime);
           break;
         case this.$options.TODAY:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(this.startDate), 1)
-          );
-          this.$store.commit("imports/setEndDate", endOfDay(this.startDate));
+          start = startOfDay(pointInTime);
+          end = endOfDay(pointInTime);
           break;
         case this.$options.LAST_7_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(this.startDate), 7)
-          );
-          this.$store.commit(
-            "imports/setEndDate",
-            endOfDay(addDays(this.startDate, 7))
-          );
+          start = startOfDay(pointInTime);
+          end = endOfDay(addDays(7, start));
           break;
         case this.$options.LAST_30_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(this.startDate), 30)
-          );
-          this.$store.commit(
-            "imports/setEndDate",
-            endOfDay(addDays(this.startDate, 30))
-          );
+          start = startOfDay(pointInTime);
+          end = endOfDay(addDays(30, start));
           break;
       }
+      return [start, end];
+    },
+    earlier() {
+      if (!this.prev) return;
+      const [start, end] = this.determineInterval(this.prev);
+      this.$store.commit("imports/setStartDate", start);
+      this.$store.commit("imports/setEndDate", end);
       this.loadLogs();
     },
     later() {
-      let start, end;
-      const now = new Date();
-      switch (this.selectedInterval) {
-        case this.$options.LAST_HOUR:
-          start = addHours(startOfHour(this.startDate), 1);
-          end = endOfHour(start);
-          if (isFuture(subHours(end, 1))) {
-            return;
-          }
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", isFuture(end) ? now : end);
-          break;
-        case this.$options.TODAY:
-          start = addDays(startOfDay(this.startDate), 1);
-          end = endOfDay(start);
-          if (isFuture(subDays(end, 1))) {
-            return;
-          }
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", isFuture(end) ? now : end);
-          break;
-        case this.$options.LAST_7_DAYS:
-          start = addDays(startOfDay(this.startDate), 7);
-          end = endOfDay(addDays(start, 7));
-          if (isFuture(subDays(end, 7))) {
-            return;
-          }
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", isFuture(end) ? now : end);
-          break;
-        case this.$options.LAST_30_DAYS:
-          start = addDays(startOfDay(this.startDate), 30);
-          end = endOfDay(addDays(start, 30));
-          if (isFuture(subDays(end, 7))) return;
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", isFuture(end) ? now : end);
-          break;
-      }
+      if (!this.next) return;
+      const [start, end] = this.determineInterval(this.next);
+      this.$store.commit("imports/setStartDate", start);
+      this.$store.commit("imports/setEndDate", end);
       this.loadLogs();
     },
     filteredImports() {
@@ -343,65 +301,6 @@
     }
   },
   watch: {
-    prev() {
-      if (this.prev) {
-        switch (this.selectedInterval) {
-          case this.$options.LAST_HOUR:
-            this.$store.commit("imports/setStartDate", startOfHour(this.prev));
-            this.$store.commit("imports/setEndDate", endOfHour(this.prev));
-            break;
-          case this.$options.TODAY:
-            this.$store.commit("imports/setStartDate", startOfDay(this.prev));
-            this.$store.commit("imports/setEndDate", endOfDay(this.prev));
-            break;
-          case this.$options.LAST_7_DAYS:
-            this.$store.commit("imports/setStartDate", startOfDay(this.prev));
-            this.$store.commit(
-              "imports/setEndDate",
-              addDays(startOfDay(this.prev)),
-              7
-            );
-            break;
-          case this.$options.LAST_30_DAYS:
-            this.$store.commit("imports/setStartDate", startOfDay(this.prev));
-            this.$store.commit(
-              "imports/setEndDate",
-              addDays(startOfDay(this.prev), 30)
-            );
-            break;
-        }
-        this.loadLogs();
-      }
-    },
-    next() {
-      if (this.next) {
-        switch (this.selectedInterval) {
-          case this.$options.LAST_HOUR:
-            this.$store.commit("imports/setStartDate", startOfHour(this.next));
-            this.$store.commit("imports/setEndDate", endOfHour(this.next));
-            break;
-          case this.$options.TODAY:
-            this.$store.commit("imports/setStartDate", startOfDay(this.next));
-            this.$store.commit("imports/setEndDate", endOfDay(this.next));
-            break;
-          case this.$options.LAST_7_DAYS:
-            this.$store.commit("imports/setStartDate", startOfDay(this.next));
-            this.$store.commit(
-              "imports/setEndDate",
-              addDays(startOfDay(this.next), 7)
-            );
-            break;
-          case this.$options.LAST_30_DAYS:
-            this.$store.commit("imports/setStartDate", startOfDay(this.next));
-            this.$store.commit(
-              "imports/setEndDate",
-              addDays(startOfDay(this.next), 30)
-            );
-            break;
-        }
-        this.loadLogs();
-      }
-    },
     selectedInterval() {
       const now = new Date();
       switch (this.selectedInterval) {
@@ -430,6 +329,21 @@
       }
       this.loadLogs();
     },
+    imports() {
+      if (this.imports.length == 0) {
+        if (this.next) {
+          const [start, end] = this.determineInterval(this.next);
+          this.$store.commit("imports/setStartDate", start);
+          this.$store.commit("imports/setEndDate", end);
+          this.loadLogs();
+        } else if (this.prev) {
+          const [start, end] = this.determineInterval(this.prev);
+          this.$store.commit("imports/setStartDate", start);
+          this.$store.commit("imports/setEndDate", end);
+          this.loadLogs();
+        }
+      }
+    },
     filters() {
       this.loadLogs();
     }