workspace: split map and sidebar loading, store workspaceInfo in session, map loading animation

Author: ratron

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>
 
 

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 {

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: {

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