From 9efe77850a661aca68d3dde8020023f19fef2b51 Mon Sep 17 00:00:00 2001 From: Yves Serrano Date: Tue, 4 Aug 2020 09:30:23 +0200 Subject: [PATCH 1/3] restart screenshot service on local deploy --- Makefile | 1 + 1 file changed, 1 insertion(+) diff --git a/Makefile b/Makefile index 00e32607..ada96e45 100644 --- a/Makefile +++ b/Makefile @@ -64,6 +64,7 @@ deploy_local: source env.hosts.prod && rsync -av --delete vue/dist $$VUE_LOCAL_PATH docker-compose exec -T django make migrate docker-compose exec -T django killall -TERM gunicorn + docker-compose exec -T vue killall -TERM node slack-push: source env.hosts.prod && test -v SLACK_APP_HOOK && curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$$SLACK_APP_TEXT\"}" "https://hooks.slack.com/services/$$SLACK_APP_HOOK" From bea4a5e5c4deb36afe2561d2fc5c2537aa670b59 Mon Sep 17 00:00:00 2001 From: Roman Abt Date: Thu, 27 Aug 2020 17:51:52 +0200 Subject: [PATCH 2/3] split map and sidebar loading for snapshotview --- vue/src/views/Snapshot.vue | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/vue/src/views/Snapshot.vue b/vue/src/views/Snapshot.vue index 7b0194ca..db3feb05 100644 --- a/vue/src/views/Snapshot.vue +++ b/vue/src/views/Snapshot.vue @@ -149,7 +149,9 @@ export default { async mounted() { if (this.hash) { - await this.getSnapshot(this.hash); + await this.getSnapshotInfo(this.hash); + + await this.getSnapshotData(this.hash); if (this.geojson) { this.$refs.map.setupMeta(); this.$refs.map.setupMapbox(); @@ -192,13 +194,12 @@ export default { }, methods: { - async getSnapshot(hash) { + async getSnapshotInfo(hash) { const result = await this.$apollo.query({ query: gql`query getsnapshot($hash: ID!) { snapshot(id: $hash) { id pk - data predecessor { id pk @@ -238,7 +239,6 @@ export default { }); if (result) { if (result.data.hasOwnProperty('snapshot') && result.data.snapshot) { - this.geojson = result.data.snapshot.data; this.municipalityName = result.data.snapshot.municipality.fullname; this.snapshotsMunicipality = result.data.snapshot.municipality.snapshots; const snapshotsIdExamplesExclude = this.snapshotsMunicipality.map( @@ -258,6 +258,30 @@ export default { } }, + async getSnapshotData(hash) { + const result = await this.$apollo.query({ + query: gql`query getsnapshot($hash: ID!) { + snapshot(id: $hash) { + id + pk + data + } + }`, + variables: { + hash: btoa(`SnapshotNode:${hash}`) + } + }).catch((error) => { + this.errorsettings = { type: 'netwokerror', open: true, error }; + }); + if (result) { + if (result.data.hasOwnProperty('snapshot') && result.data.snapshot) { + this.geojson = result.data.snapshot.data; + } else { + this.$router.push({ name: 'home' }); + } + } + }, + async getEmpty(bfsNumber) { const result = await this.$apollo.query({ query: gql`query getmunicipality($bfsNumber: ID!) { From 77a4707d0fb938de0865aea3f082f06e4e892767 Mon Sep 17 00:00:00 2001 From: Roman Abt Date: Fri, 28 Aug 2020 17:15:53 +0200 Subject: [PATCH 3/3] workspace: split map and sidebar loading, store workspaceInfo in session, map loading animation --- vue/src/components/SnapshotList.vue | 3 + vue/src/components/SnapshotMap.vue | 19 +++++ vue/src/store/index.js | 15 +++- vue/src/views/Workspace.vue | 105 ++++++++++++++++++---------- 4 files changed, 106 insertions(+), 36 deletions(-) diff --git a/vue/src/components/SnapshotList.vue b/vue/src/components/SnapshotList.vue index aee1eee3..7235346b 100644 --- a/vue/src/components/SnapshotList.vue +++ b/vue/src/components/SnapshotList.vue @@ -67,6 +67,9 @@ white-space: initial; text-overflow: ellipsis; } +.v-image__image { + background-color: rgba(0, 0, 0, 0.1); +} diff --git a/vue/src/components/SnapshotMap.vue b/vue/src/components/SnapshotMap.vue index c38bab3b..2f6a4606 100644 --- a/vue/src/components/SnapshotMap.vue +++ b/vue/src/components/SnapshotMap.vue @@ -62,7 +62,26 @@ body, position: relative; width: 100%; overflow: hidden; + background: #dedede + linear-gradient(90deg, #dedede 0%, #f2f2f2 17%, #dedede 23%) repeat-y; + background-size: 125% 10%; + animation: BGani 2s ease infinite; +} + +@keyframes BGani { + 0% { + background-position: 110% 0%; + } + 66% { + background-position: -410% 0%; + } + 100% { + background-position: -410% 0%; + } +} +#map.leaflet-container { background: #dedede; + animation: none; } #map .mapbox-improve-map { diff --git a/vue/src/store/index.js b/vue/src/store/index.js index e8cabcd5..d6c1d821 100644 --- a/vue/src/store/index.js +++ b/vue/src/store/index.js @@ -8,7 +8,8 @@ export default new Vuex.Store({ notIframe: window.self === window.top, bfsnumber: '', bfsname: '', - snapshotnav: false + snapshotnav: false, + workspacesInfo: {} }, mutations: { setBfsnumber(state, nr) { @@ -21,6 +22,18 @@ export default new Vuex.Store({ setSnapshotnav(state, value) { state.snapshotnav = value; + }, + + addWorkspaceInfo(state, hashNvalue) { + state.workspacesInfo[hashNvalue.hash] = hashNvalue.value; + } + }, + getters: { + WorkspaceInfoByHash: state => (hash) => { + if (state.workspacesInfo.hasOwnProperty(hash)) { + return state.workspacesInfo[hash]; + } + return false; } }, actions: { diff --git a/vue/src/views/Workspace.vue b/vue/src/views/Workspace.vue index 07cc66f0..46117595 100644 --- a/vue/src/views/Workspace.vue +++ b/vue/src/views/Workspace.vue @@ -108,7 +108,8 @@ export default { }, async mounted() { - await this.getWorkspace(); + await this.getWorkspaceInfo(); + await this.getWorkspaceData(); if (this.geojson) { this.$refs.map.setupMeta(); this.$refs.map.setupMapbox(); @@ -135,31 +136,17 @@ export default { }, methods: { - async getWorkspace() { - const result = await this.$apollo.query({ - query: gql`query getworkspace($wshash: ID!, $hash: ID!) { - workspace(id: $wshash) { - id - pk - title - description - snapshots { + async getWorkspaceInfo() { + let workspaceInfo = this.$store.getters.WorkspaceInfoByHash(this.wshash); + + if (!workspaceInfo) { + const result = await this.$apollo.query({ + query: gql`query getworkspace($wshash: ID!, $hash: ID!) { + workspace(id: $wshash) { id pk title - topic - screenshot - thumbnail - } - } - - snapshot(id: $hash) { - id - pk - data - municipality { - bfsNumber - fullname + description snapshots { id pk @@ -169,6 +156,65 @@ export default { thumbnail } } + + snapshot(id: $hash) { + id + pk + municipality { + bfsNumber + fullname + snapshots { + id + pk + title + topic + screenshot + thumbnail + } + } + } + }`, + variables: { + wshash: btoa(`WorkspaceNode:${this.wshash}`), + hash: btoa(`SnapshotNode:${this.hash}`) + } + }).catch((error) => { + this.errorsettings = { type: 'netwokerror', open: true, error }; + }); + if (result) { + if (result.data.hasOwnProperty('workspace') && result.data.workspace) { + workspaceInfo = result.data; + this.$store.commit('addWorkspaceInfo', { hash: this.wshash, value: workspaceInfo }); + } else { + this.$router.push({ name: 'home' }); + } + } + } + const workspace = workspaceInfo.workspace; + const snapshot = workspaceInfo.snapshot; + if (!workspace.snapshots.map(s => s.pk).includes(snapshot.pk)) { + this.$router.push({ name: 'home' }); + } + this.municipalityName = snapshot.municipality.fullname; + this.snapshotsWorkspace = workspace.snapshots; + this.title = workspace.title; + this.description = workspace.description; + this.$store.commit('setBfsnumber', snapshot.municipality.bfsNumber); + this.$store.commit('setBfsname', snapshot.municipality.fullname); + }, + + async getWorkspaceData() { + const result = await this.$apollo.query({ + query: gql`query getworkspace($wshash: ID!, $hash: ID!) { + workspace(id: $wshash) { + id + pk + title + } + snapshot(id: $hash) { + id + pk + data } }`, variables: { @@ -180,18 +226,7 @@ export default { }); if (result) { if (result.data.hasOwnProperty('workspace') && result.data.workspace) { - const workspace = result.data.workspace; - const snapshot = result.data.snapshot; - if (!workspace.snapshots.map(s => s.pk).includes(snapshot.pk)) { - this.$router.push({ name: 'home' }); - } - this.geojson = snapshot.data; - this.municipalityName = snapshot.municipality.fullname; - this.snapshotsWorkspace = workspace.snapshots; - this.title = workspace.title; - this.description = workspace.description; - this.$store.commit('setBfsnumber', snapshot.municipality.bfsNumber); - this.$store.commit('setBfsname', snapshot.municipality.fullname); + this.geojson = result.data.snapshot.data; } else { this.$router.push({ name: 'home' }); }