Merged in error-messages (pull request #24)

Error messages

Author: yvess

vue/src/assets/styles/main.css

@@ -80,7 +80,7 @@ a {
 
 #snapshotnav {
   height: calc(100vh - var(--vh-offset, 0px)) !important;
-  z-index: 9999; /* must be above mapbox interface */
+  z-index: 100; /* must be above mapbox interface */
 }
 
 #snapshotnavContent {

vue/src/components/ErrorMessage.vue

@@ -0,0 +1,88 @@
+<!-- eslint-disable -->
+<i18n>
+{
+  "de": {
+    "title": "Fehler",
+    "text": "Da ist was schiefgegangen...",
+    "netwokerror.title": "Verbindungsfehler",
+    "netwokerror.text": "Benötigte Daten konnten nicht geladen werden.",
+    "button.ok": "OK",
+    "button.retry": "Seite neu laden",
+    "button.back": "Zur Startseite",
+    "button.contact": "Problem melden"
+  },
+  "fr": {
+    "title": "Fehler",
+    "text": "Da ist was schiefgegangen...",
+    "netwokerror.title": "Verbindungsfehler",
+    "netwokerror.text": "Benötigte Daten konnten nicht geladen werden.",
+    "button.ok": "OK",
+    "button.retry": "Nochmals versuchen",
+    "button.back": "Zur Startseite",
+    "button.contact": "Problem melden"
+  }
+}
+</i18n>
+<!-- eslint-enable -->
+
+<template>
+<v-dialog persistent v-model="settings.open" class="errormessage" width="400">
+ <v-card>
+        <v-card-title>{{titleString}}</v-card-title>
+        <v-card-text>{{textString}}</v-card-text>
+        <v-card-actions class="pb-4 pr-4">
+          <v-spacer></v-spacer>
+          <v-btn depressed color="gray" @click="composeEmail">{{$t('button.contact')}}</v-btn>
+          <v-btn depressed color="primary" class="ml-4" :to="'/' + $i18n.locale + '/'">
+            {{$t('button.back')}}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+</v-dialog>
+</template>
+
+<style scoped>
+.errormessage {
+  z-index: 666;
+}
+</style>
+
+<script>
+export default {
+  name: 'ErrorMessage',
+  data() {
+    return {
+    };
+  },
+  props: {
+    settings: Object
+  },
+
+  computed: {
+    titleString() {
+      if (this.settings.title) {
+        return this.settings.title;
+      } if (this.settings.type) {
+        return this.$t(`${this.settings.type}.title`);
+      }
+      return this.$t('title');
+    },
+    textString() {
+      if (this.settings.text) {
+        return this.settings.text;
+      } if (this.settings.type) {
+        return this.$t(`${this.settings.type}.text`);
+      }
+      return this.$t('text');
+    }
+  },
+  methods: {
+    forceReload() {
+      window.location.reload();
+    },
+    composeEmail() {
+      window.location.href = `mailto:[email protected]?subject=${this.titleString}&body=`;
+    }
+  }
+};
+</script>

vue/src/components/SnapshotMap.vue

@@ -74,7 +74,7 @@ body,
   clip-path: circle(0% at 95% 90%);
   transition: clip-path 0.3s ease-out;
   pointer-events: none;
-  z-index: 1000; /* must be above mapbox icons */
+  z-index: 500; /* must be above mapbox icons */
 }
 
 #mapinfo.open {

vue/src/views/Home.vue

@@ -11,7 +11,8 @@
       "Gemeindescan Schweiz",
     "h2.2": "Fallbeispiele",
     "p.3": "«Als Gemeindepräsident ist es mir wichtig, der Bevölkerung und dem Gemeinderat die Komplexität des Ortsplanungsprozesses und der Standortentwicklung verständlich und einfach zu übermitteln. Mit Hilfe von Daten und Visualisierungen über den Gemeindescan fällt es mir leichter, Lösungen und wichtige Entscheide zu fällen!»",
-    "p.4": "Gemeindepräsident Wittenbach"
+    "p.4": "Gemeindepräsident Wittenbach",
+    "networkerror": "Die Gemeindesuche ist zZ nicht verfügbar."
   },
   "fr": {
     "h1.1": "Découvrez le potentiel en terme d'habitat de votre communauté.",
@@ -23,15 +24,15 @@
       "Le Gemeindescan Suisse",
     "h2.2": "Examples",
     "p.3": "«En tant que maire, il est important pour moi de communiquer la complexité du processus de planification locale et du développement urbain à la population et au conseil municipal de manière simple et compréhensible. Avec l'aide des données et des visualisations via les analyses de la communauté, il m'est plus facile de trouver des solutions et de prendre des décisions importantes!»",
-    "p.4": "Le maire de la municipalité Wittenbach"
+    "p.4": "Le maire de la municipalité Wittenbach",
+    "networkerror": "Die Gemeindesuche ist zZ nicht verfügbar."
   }
 }
 </i18n>
 <!-- eslint-enable -->
 
 <template>
 <div>
-  <!-- eslint-disable max-len -->
   <v-container my-12 >
       <div class="gmdscn">
           <img :alt="$t('img.1.alt')" class="" width="100%"
@@ -47,7 +48,7 @@
       </v-row>
   </v-container>
 
-  <v-container class="center" fluid mb-12>
+  <v-container v-if="!{networkError}" class="center" fluid mb-12>
       <v-row justify="center" >
         <v-col class="introtxt text-center">
           <h2>{{ $t('h2.2') }}</h2>
@@ -66,7 +67,9 @@
                 <v-fade-transition>
                   <v-overlay v-if="hover" color="primary" opacity="0.6" absolute
                     style="text-transform: none; white-space: normal; hyphens: auto;">
-                    <h5 style="font-weight: bold; line-height: 1.2em; padding:0.3em;">{{snapshot.title}}</h5>
+                    <h5 style="font-weight: bold; line-height: 1.2em; padding:0.3em;">
+                      {{snapshot.title}}
+                    </h5>
                     <span style="">{{snapshot.topic}}<br>-<br>{{snapshot.municipality.name}}</span>
                   </v-overlay>
                 </v-fade-transition>
@@ -75,11 +78,15 @@
           </v-btn>
           </div>
         </v-col>
-
       </v-row>
-
   </v-container>
 
+  <v-snackbar color="primary" v-model="snackbar" :timeout="9000">
+    {{ $t('networkerror') }}
+    <v-btn icon @click="snackbar=false" >
+      <v-icon>mdi-close-circle-outline</v-icon>
+    </v-btn>
+  </v-snackbar>
   <!--
   <v-container class="" justify-center my-12>
         <v-row justify="center">
@@ -128,7 +135,9 @@ export default {
   data() {
     return {
       djangobaseurl: process.env.VUE_APP_DJANGOBASEURL,
-      snapshotsExamples: []
+      snapshotsExamples: [],
+      networkError: false,
+      snackbar: false
     };
   },
   created() {
@@ -157,10 +166,15 @@ export default {
             }
           }
         }`
+      }).catch((error) => {
+        console.log(error);
+        this.snackbar = true;
       });
-      const snapshots = result.data.snapshots.edges.map(snapshot => snapshot.node);
-      // fake random, for more randomness, use https://www.npmjs.com/package/lodash.shuffle package
-      this.snapshotsExamples = snapshots.sort(() => (Math.random() > 0.5 ? -1 : 1)).slice(0, 3);
+      if (result) {
+        const snapshots = result.data.snapshots.edges.map(snapshot => snapshot.node);
+        // fake random, for more randomness, use https://www.npmjs.com/package/lodash.shuffle package
+        this.snapshotsExamples = snapshots.sort(() => (Math.random() > 0.5 ? -1 : 1)).slice(0, 3);
+      }
     }
   }
 };

vue/src/views/Snapshot.vue

@@ -95,6 +95,10 @@
       :geoboundsIn="geobounds"
       :predecessor="predecessor"
     />
+
+     <error-message
+      :settings="errorsettings"
+    />
   </div>
 </template>
 
@@ -119,9 +123,11 @@ import Vue from 'vue';
 import gql from 'graphql-tag';
 import SnapshotList from '../components/SnapshotList.vue';
 import SnapshotMap from '../components/SnapshotMap.vue';
+import ErrorMessage from '../components/ErrorMessage.vue';
 
 Vue.component('snapshot-list', SnapshotList);
 Vue.component('snapshot-map', SnapshotMap);
+Vue.component('error-message', ErrorMessage);
 
 export default {
   data() {
@@ -136,7 +142,8 @@ export default {
       snapshotsMunicipality: [],
       predecessor: null,
       screenshotMode: this.$route.query.hasOwnProperty('screenshot'),
-      screenshotIsThumbnail: this.$route.query.hasOwnProperty('thumbnail')
+      screenshotIsThumbnail: this.$route.query.hasOwnProperty('thumbnail'),
+      errorsettings: {}
     };
   },
 
@@ -226,20 +233,28 @@ export default {
         variables: {
           hash: btoa(`SnapshotNode:${hash}`)
         }
+      }).catch((error) => {
+        this.errorsettings = { type: 'netwokerror', open: true, error };
       });
-      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(snapshot => snapshot.id);
-        this.snapshotsExamples = result.data.snapshots.edges.map(snapshot => snapshot.node).filter(
-          snapshot => !snapshotsIdExamplesExclude.includes(snapshot.id)
-        );
-        this.predecessor = (result.data.snapshot.predecessor);
-        this.$store.commit('setBfsnumber', result.data.snapshot.municipality.bfsNumber);
-        this.$store.commit('setBfsname', result.data.snapshot.municipality.fullname);
-      } else {
-        this.$router.push({ name: 'home' });
+      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(
+            snapshot => snapshot.id
+          );
+          this.snapshotsExamples = result.data.snapshots.edges.map(
+            snapshot => snapshot.node
+          ).filter(
+            snapshot => !snapshotsIdExamplesExclude.includes(snapshot.id)
+          );
+          this.predecessor = (result.data.snapshot.predecessor);
+          this.$store.commit('setBfsnumber', result.data.snapshot.municipality.bfsNumber);
+          this.$store.commit('setBfsname', result.data.snapshot.municipality.fullname);
+        } else {
+          this.$router.push({ name: 'home' });
+        }
       }
     },
 
@@ -278,13 +293,17 @@ export default {
         variables: {
           bfsNumber: btoa(`MunicipalityNode:${bfsNumber}`)
         }
+      }).catch((error) => {
+        this.errorsettings = { type: 'netwokerror', open: true, error };
       });
-      this.municipalityName = result.data.municipality.fullname;
-      this.geojson = result.data.municipality.perimeter;
-      this.geobounds = result.data.municipality.perimeterBounds;
-      this.snapshotsExamples = result.data.snapshots.edges.map(snapshot => snapshot.node);
-      this.$store.commit('setBfsnumber', result.data.municipality.bfsNumber);
-      this.$store.commit('setBfsname', result.data.municipality.fullname);
+      if (result) {
+        this.municipalityName = result.data.municipality.fullname;
+        this.geojson = result.data.municipality.perimeter;
+        this.geobounds = result.data.municipality.perimeterBounds;
+        this.snapshotsExamples = result.data.snapshots.edges.map(snapshot => snapshot.node);
+        this.$store.commit('setBfsnumber', result.data.municipality.bfsNumber);
+        this.$store.commit('setBfsname', result.data.municipality.fullname);
+      }
     }
   }
 };

vue/src/views/Workspace.vue

@@ -55,7 +55,9 @@
       :geojson="geojson"
       :geoboundsIn="geobounds"
     />
-
+     <error-message
+      :settings="errorsettings"
+    />
   </div>
 </template>
 
@@ -84,9 +86,11 @@ import Vue from 'vue';
 import gql from 'graphql-tag';
 import SnapshotList from '../components/SnapshotList.vue';
 import SnapshotMap from '../components/SnapshotMap.vue';
+import ErrorMessage from '../components/ErrorMessage.vue';
 
 Vue.component('snapshot-list', SnapshotList);
 Vue.component('snapshot-map', SnapshotMap);
+Vue.component('error-message', ErrorMessage);
 
 export default {
   data() {
@@ -98,7 +102,8 @@ export default {
       municipalityName: '',
       snapshotsWorkspace: [],
       title: '',
-      description: ''
+      description: '',
+      errorsettings: {}
     };
   },
 
@@ -170,22 +175,26 @@ export default {
           wshash: btoa(`WorkspaceNode:${this.wshash}`),
           hash: btoa(`SnapshotNode:${this.hash}`)
         }
+      }).catch((error) => {
+        this.errorsettings = { type: 'netwokerror', open: true, error };
       });
-      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)) {
+      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);
+        } else {
           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);
-      } else {
-        this.$router.push({ name: 'home' });
       }
     }
   }