diff client/src/components/importoverview/ImportOverview.vue @ 2875:84effca50751

client: importoverview: cleaned up code
author Markus Kottlaender <markus@intevation.de>
date Mon, 01 Apr 2019 12:53:03 +0200
parents b9a6abef9f1c
children 0e0cc65d3479
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 11:51:03 2019 +0200
+++ b/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 12:53:03 2019 +0200
@@ -126,7 +126,6 @@
 import { STATES } from "@/store/imports";
 import { sortTable } from "@/lib/mixins";
 import { HTTP } from "@/lib/http.js";
-
 import {
   startOfDay,
   startOfHour,
@@ -137,23 +136,23 @@
   format
 } from "date-fns";
 
+const LAST_HOUR = "lasthour";
+const TODAY = "today";
+const LAST_7_DAYS = "lastsevendays";
+const LAST_30_DAYS = "lastthirtydays";
+
 export default {
-  name: "importoverview",
-  mixins: [sortTable],
   components: {
     Filters: () => import("./Filters.vue"),
     LogEntry: () => import("./LogEntry.vue")
   },
+  mixins: [sortTable],
   data() {
     return {
       loading: false,
-      selectedInterval: this.$options.LAST_HOUR
+      selectedInterval: LAST_HOUR
     };
   },
-  LAST_HOUR: "lasthour",
-  TODAY: "today",
-  LAST_7_DAYS: "lastsevendays",
-  LAST_30_DAYS: "lastthirtydays",
   computed: {
     ...mapState("application", ["searchQuery"]),
     ...mapState("imports", [
@@ -191,6 +190,58 @@
       return [this.startDate, this.endDate];
     }
   },
+  watch: {
+    $route() {
+      const { id } = this.$route.params;
+      if (id) this.showSingleRessource(id);
+    },
+    selectedInterval() {
+      const now = new Date();
+      switch (this.selectedInterval) {
+        case LAST_HOUR:
+          this.$store.commit("imports/setStartDate", startOfHour(now));
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case TODAY:
+          this.$store.commit("imports/setStartDate", startOfDay(now));
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case LAST_7_DAYS:
+          this.$store.commit(
+            "imports/setStartDate",
+            subDays(startOfDay(now), 7)
+          );
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case LAST_30_DAYS:
+          this.$store.commit(
+            "imports/setStartDate",
+            subDays(startOfDay(now), 30)
+          );
+          this.$store.commit("imports/setEndDate", now);
+          break;
+      }
+      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();
+    }
+  },
   methods: {
     showSingleRessource(id) {
       id = id * 1;
@@ -229,19 +280,19 @@
     determineInterval(pointInTime) {
       let start, end;
       switch (this.selectedInterval) {
-        case this.$options.LAST_HOUR:
+        case LAST_HOUR:
           start = startOfHour(pointInTime);
           end = endOfHour(pointInTime);
           break;
-        case this.$options.TODAY:
+        case TODAY:
           start = startOfDay(pointInTime);
           end = endOfDay(pointInTime);
           break;
-        case this.$options.LAST_7_DAYS:
+        case LAST_7_DAYS:
           start = startOfDay(pointInTime);
           end = endOfDay(addDays(start, 7));
           break;
-        case this.$options.LAST_30_DAYS:
+        case LAST_30_DAYS:
           start = startOfDay(pointInTime);
           end = endOfDay(addDays(start, 30));
           break;
@@ -376,58 +427,6 @@
       });
     }
   },
-  watch: {
-    $route() {
-      const { id } = this.$route.params;
-      if (id) this.showSingleRessource(id);
-    },
-    selectedInterval() {
-      const now = new Date();
-      switch (this.selectedInterval) {
-        case this.$options.LAST_HOUR:
-          this.$store.commit("imports/setStartDate", startOfHour(now));
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.TODAY:
-          this.$store.commit("imports/setStartDate", startOfDay(now));
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.LAST_7_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(now), 7)
-          );
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.LAST_30_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(now), 30)
-          );
-          this.$store.commit("imports/setEndDate", now);
-          break;
-      }
-      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();
-    }
-  },
   mounted() {
     const { id } = this.$route.params;
     if (!id) {