From 5021888d03836f5aef224ef0fa50ae84f222f0de Mon Sep 17 00:00:00 2001 From: "D. Berge" Date: Wed, 25 Oct 2023 16:18:41 +0200 Subject: [PATCH] Adapt Log component to Vuex use for fetching data --- lib/www/client/source/src/views/Log.vue | 160 ++++++++---------------- 1 file changed, 52 insertions(+), 108 deletions(-) diff --git a/lib/www/client/source/src/views/Log.vue b/lib/www/client/source/src/views/Log.vue index 6b34ada..b4deb19 100644 --- a/lib/www/client/source/src/views/Log.vue +++ b/lib/www/client/source/src/views/Log.vue @@ -93,7 +93,21 @@ append-icon="mdi-magnify" label="Filter" single-line - hide-details> + clearable + hide-details> + + @@ -215,13 +229,14 @@ :headers="headers" :items="rows" :items-per-page.sync="itemsPerPage" + :server-items-length="eventCount" item-key="key" :item-class="itemClass" sort-by="tstamp" :sort-desc="true" :search="filter" - :custom-filter="searchTable" - :loading="loading" + :loading="eventsLoading" + :options.sync="options" fixed-header :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ], showFirstLastPage: true}' @click:row="setActiveItem" @@ -249,12 +264,12 @@ :dark="labels[label] && labels[label].view.dark" :light="labels[label] && labels[label].view.light" :key="label" - :href="$route.path+'?label='+encodeURIComponent(label)" + @click="labelSearch=label" >{{label}} i.labels ) .filter( l => (this.labels[l]??{})?.model?.user ) @@ -466,6 +468,10 @@ export default { .sort( (a, b) => b[1]-a[1] ); }, + presetRemarks () { + return this.projectConfiguration?.events?.presetRemarks ?? []; + }, + defaultSequence () { if (this.$route.params.sequence) { return Number(this.$route.params.sequence.split(";").pop()); @@ -474,19 +480,24 @@ export default { } }, - ...mapGetters(['user', 'writeaccess', 'loading', 'online', 'sequence', 'line', 'point', 'position', 'timestamp', 'lineName', 'serverEvent']), + ...mapGetters(['user', 'writeaccess', 'eventsLoading', 'online', 'sequence', 'line', 'point', 'position', 'timestamp', 'lineName', 'serverEvent', 'events', 'labels', 'userLabels']), ...mapState({projectSchema: state => state.project.projectSchema}) }, watch: { options: { - handler () { - //this.getEvents(); + async handler () { + await this.fetchEvents(); }, deep: true }, + async events () { + console.log("Events changed"); + await this.fetchEvents(); + }, + eventDialog (val) { if (val) { // If not online @@ -494,30 +505,14 @@ export default { } }, - async serverEvent (event) { - if (event.channel == "event" && event.payload.schema == this.projectSchema) { - if (!this.loading && !this.queuedReload) { - // Do not force a non-cached response if refreshing as a result - // of an event notification. We will assume that the server has - // already had time to update the cache by the time our request - // gets back to it. - this.getEvents(); - } else { - this.queuedReload = true; - } + filter (newVal, oldVal) { + if (newVal?.toLowerCase() != oldVal?.toLowerCase()) { + this.fetchEvents(); } }, - queuedReload (newVal, oldVal) { - if (newVal && !oldVal && !this.loading) { - this.getEvents(); - } - }, - - loading (newVal, oldVal) { - if (!newVal && oldVal && this.queuedReload) { - this.getEvents(); - } + labelSearch () { + this.fetchEvents(); }, itemsPerPage (newVal, oldVal) { @@ -574,50 +569,15 @@ export default { } }, - async getEventCount () { - //this.eventCount = await this.api([`/project/${this.$route.params.project}/event/?count`]); - this.eventCount = null; - }, - - async getEvents (opts = {}) { - - const query = new URLSearchParams(this.options); - if (this.options.itemsPerPage < 0) { - query.delete("itemsPerPage"); - } - - if (this.$route.params.sequence) { - query.set("sequence", this.$route.params.sequence); - } - - if (this.$route.params.date0) { - query.set("date0", this.$route.params.date0); - } - - if (this.$route.params.date1) { - query.set("date1", this.$route.params.date1); - } - - const url = `/project/${this.$route.params.project}/event?${query.toString()}`; - - this.queuedReload = false; - this.items = await this.api([url, opts]) || []; - - }, - - async getLabelDefinitions () { - const url = `/project/${this.$route.params.project}/label`; - - //const labelSet = {}; - this.labels = await this.api([url]) ?? {}; - //labels.forEach( l => labelSet[l.name] = l.data ); - //this.labels = labelSet; - }, - - async getPresetRemarks () { - const url = `/project/${this.$route.params.project}/configuration`; - - this.presetRemarks = (await this.api([url]))?.events?.presetRemarks ?? {}; + async fetchEvents (opts = {}) { + const options = { + text: this.filter, + label: this.labelSearch, + ...this.options + }; + const res = await this.getEvents([this.$route.params.project, options]); + this.items = res.events; + this.eventCount = res.count; }, newItem (from = {}) { @@ -691,7 +651,7 @@ export default { if (!err && res.ok) { this.showSnack(["Event saved", "success"]); this.queuedReload = true; - this.getEvents({cache: "reload"}); + this.fetchEvents({cache: "reload"}); } } @@ -709,7 +669,7 @@ export default { if (!err && res.ok) { this.showSnack(["Event saved", "success"]); this.queuedReload = true; - this.getEvents({cache: "reload"}); + this.fetchEvents({cache: "reload"}); } } @@ -756,7 +716,7 @@ export default { if (!err && res.ok) { this.showSnack([`${ids.length} events deleted`, "red"]); this.queuedReload = true; - this.getEvents({cache: "reload"}); + this.fetchEvents({cache: "reload"}); } } @@ -772,7 +732,7 @@ export default { if (!err && res.ok) { this.showSnack(["Event deleted", "red"]); this.queuedReload = true; - this.getEvents({cache: "reload"}); + this.fetchEvents({cache: "reload"}); } } @@ -806,19 +766,6 @@ export default { }, - searchTable (value, search, item) { - if (!value && !search) return true; - const s = search.toLowerCase(); - if (typeof value === 'string') { - return value.toLowerCase().includes(s); - } else if (typeof value === 'number') { - return value == search; - } else { - return item.items.some( i => i.remarks.toLowerCase().includes(s) ) || - item.items.some( i => i.labels.some( l => l.toLowerCase().includes(s) )); - } - }, - viewOnMap(item) { if (item?.meta && item.meta?.geometry?.type == "Point") { const [ lon, lat ] = item.meta.geometry.coordinates; @@ -857,14 +804,11 @@ export default { */ }, - ...mapActions(["api", "showSnack"]) + ...mapActions(["api", "showSnack", "refreshEvents", "getEvents"]) }, async mounted () { - await this.getLabelDefinitions(); - this.getEventCount(); - this.getEvents(); - this.getPresetRemarks(); + this.fetchEvents(); window.addEventListener('keyup', this.handleKeyboardEvent); },