Mercurial > gemma
changeset 2759:7badd99c9315
import_overview: sprinkled fairydust into the app to make magical timewarp possible for log_overview
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Thu, 21 Mar 2019 16:40:02 +0100 |
| parents | a996f2ca9fa5 |
| children | c6fba10926cc |
| files | client/src/components/importoverview/ImportOverview.vue client/src/store/imports.js |
| diffstat | 2 files changed, 82 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue Thu Mar 21 15:43:02 2019 +0100 +++ b/client/src/components/importoverview/ImportOverview.vue Thu Mar 21 16:40:02 2019 +0100 @@ -42,11 +42,7 @@ <span class="date">{{ interval[1] | dateTime }}</span> </div> <div class="ml-3 my-auto pointer"> - <button - :disabled="!laterPossible" - @click="later" - class="btn btn-sm btn-outline-light text-dark" - > + <button @click="later" class="btn btn-sm btn-outline-light text-dark"> <font-awesome-icon class="mr-2" icon="angle-right" /><translate >Later</translate > @@ -150,8 +146,7 @@ data() { return { loading: false, - selectedInterval: this.$options.LAST_HOUR, - laterPossible: false + selectedInterval: this.$options.LAST_HOUR }; }, LAST_HOUR: "lasthour", @@ -160,7 +155,14 @@ LAST_30_DAYS: "lastthirtydays", computed: { ...mapState("application", ["searchQuery"]), - ...mapState("imports", ["imports", "reviewed", "startDate", "endDate"]), + ...mapState("imports", [ + "imports", + "reviewed", + "startDate", + "endDate", + "prev", + "next" + ]), ...mapGetters("imports", ["filters"]), interval() { return [this.startDate, this.endDate]; @@ -175,7 +177,6 @@ subHours(startOfHour(this.startDate), 1) ); this.$store.commit("imports/setEndDate", endOfHour(this.startDate)); - this.laterPossible = true; break; case this.$options.TODAY: this.$store.commit( @@ -183,7 +184,6 @@ subDays(startOfDay(this.startDate), 1) ); this.$store.commit("imports/setEndDate", endOfDay(this.startDate)); - this.laterPossible = true; break; case this.$options.LAST_7_DAYS: this.$store.commit( @@ -194,7 +194,6 @@ "imports/setEndDate", endOfDay(addDays(this.startDate, 7)) ); - this.laterPossible = true; break; case this.$options.LAST_30_DAYS: this.$store.commit( @@ -205,7 +204,6 @@ "imports/setEndDate", endOfDay(addDays(this.startDate, 30)) ); - this.laterPossible = true; break; } this.loadLogs(); @@ -217,7 +215,6 @@ case this.$options.LAST_HOUR: start = addHours(startOfHour(this.startDate), 1); end = endOfHour(start); - this.laterPossible = !isFuture(end); if (isFuture(subHours(end, 1))) { return; } @@ -227,7 +224,6 @@ case this.$options.TODAY: start = addDays(startOfDay(this.startDate), 1); end = endOfDay(start); - this.laterPossible = !isFuture(end); if (isFuture(subDays(end, 1))) { return; } @@ -237,7 +233,6 @@ case this.$options.LAST_7_DAYS: start = addDays(startOfDay(this.startDate), 7); end = endOfDay(addDays(start, 7)); - this.laterPossible = !isFuture(end); if (isFuture(subDays(end, 7))) { return; } @@ -247,7 +242,6 @@ case this.$options.LAST_30_DAYS: start = addDays(startOfDay(this.startDate), 30); end = endOfDay(addDays(start, 30)); - this.laterPossible = !isFuture(end); if (isFuture(subDays(end, 7))) return; this.$store.commit("imports/setStartDate", start); this.$store.commit("imports/setEndDate", isFuture(end) ? now : end); @@ -346,6 +340,66 @@ } }, 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) {
--- a/client/src/store/imports.js Thu Mar 21 15:43:02 2019 +0100 +++ b/client/src/store/imports.js Thu Mar 21 16:40:02 2019 +0100 @@ -43,7 +43,9 @@ showLogs: NODETAILS, details: [], startDate: startOfHour(new Date()), - endDate: new Date() + endDate: new Date(), + prev: null, + next: null }; }; @@ -97,6 +99,12 @@ } }, mutations: { + setPrev: (state, prev) => { + state.prev = prev; + }, + setNext: (state, next) => { + state.next = next; + }, setStartDate: (state, start) => { state.startDate = start; }, @@ -252,7 +260,9 @@ headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { - const { imports } = response.data; + const { imports, prev, next } = response.data; + commit("setPrev", prev); + commit("setNext", next); commit("setImports", imports); resolve(response); })