Merged in stage (pull request #29)

faster snapshot switchting
cividi · Sep 3, 2020 · 7a7e72a · 7a7e72a
2 parents aab7bb2 + 77a4707
commit 7a7e72a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 40 deletions.
diff --git 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"

diff --git 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);
+}
 </style>
 
 

diff --git 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
@@ -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/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!) {

diff --git 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' });
         }