adds mock snapshot store for new-municipality route.

Author: n0rdlicht

vue/.env.production

@@ -1,2 +1,3 @@
 VUE_APP_GRAPHQL_URI=/graphql/
 VUE_APP_DJANGOBASEURL=
+VUE_APP_SNAPSHOTSTOREURL=

vue/src/components/SnapshotList.vue

@@ -16,9 +16,10 @@
        <v-subheader
         v-if="showTopic(index) && withTopic"
         class="px-0">{{ snapshot.topic }}</v-subheader>
-      <v-list-item class="px-0 mb-4" dense
-
-        :to="createRouteLink(snapshot.pk)">
+      <v-list-item class="px-0 mb-4"
+        v-if="!snapshot.requestable"
+        :to="createRouteLink(snapshot.pk)" dense
+        >
           <v-list-item-avatar tile size="64" class="my-0">
             <v-img
               v-if="snapshot.thumbnail"
@@ -38,6 +39,32 @@
             </v-btn>
           </v-list-item-action>
       </v-list-item>
+      <v-list-item class="px-0 mb-4 requestable"
+        v-if="snapshot.requestable"
+        :inactive="true" dense
+        >
+          <v-list-item-avatar tile size="64" class="my-0">
+            <v-img
+              v-if="snapshot.thumbnail"
+              :src="snapshot.thumbnail"
+              class="requestable-filter"
+              >
+            </v-img>
+          </v-list-item-avatar>
+          <v-list-item-content>
+            <v-list-item-title style="font-weight:700">{{ snapshot.title }}</v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action style="margin:0 0 4px 0; align-self: center;">
+            <v-btn icon
+              class="nobg"
+              v-on:click.stop="function(){}"
+              :href="djangobaseurl + '/signup/'"
+              target="_blank"
+              >
+                <v-icon color="grey lighten-1" >mdi-arrow-right-bold-circle-outline</v-icon>
+            </v-btn>
+          </v-list-item-action>
+      </v-list-item>
       </div>
   </v-list>
 </template>
@@ -70,6 +97,13 @@
 .v-image__image {
   background-color: rgba(0, 0, 0, 0.1);
 }
+.requestable.v-list-item {
+  border: 1px dashed #9b9b9b73;
+}
+.requestable-filter {
+  filter: grayscale(100%) brightness(110%);
+  opacity: 0.35;
+}
 </style>
 
 

vue/src/views/Snapshot.vue

@@ -8,7 +8,7 @@
     "hasSnapshot.p2": "Erkunden Sie unsere weiteren Fallbeispiele um ein besseres Bild der Möglichkeiten für Ihre Gemeinde zu erhalten.",
     "noSnapshot.title": "Datenverfügbarkeit",
     "noSnapshot.municipalityText": "diese Gemeinde",
-    "noSnapshot.p1": "Für {municipalityText} stehen zur Zeit noch keine Daten zur Verfügung.",
+    "noSnapshot.p1": "Für {municipalityText} sind zur Zeit noch keine Analysen freigeschaltet.",
     "noSnapshot.p2": "Erkunden Sie unsere Fallbeispiele um ein besseres Bild der Möglichkeiten für Ihre Gemeinde zu erhalten.",
     "listtitle": "Fallbeispiele",
     "listtitleMore": "Weitere Fallbeispiele"
@@ -47,19 +47,32 @@
       <div id="snapshotnavContent" class="ma-4">
         <search :dense="true" :term="municipalityName"/>
 
-        <div class="nodata pb-8">
-          <div v-if="!hash" class="smaller hint">
-            <h4>{{ $t('noSnapshot.title') }}</h4>
+        <div v-if="!hash" class="nodata pb-8">
+          <div class="smaller hint">
+            <!-- <h4>{{ $t('noSnapshot.title') }}</h4> -->
             <p>{{ $t('noSnapshot.p1', { municipalityText: municipalityText }) }}</p>
             <p>{{ $t('noSnapshot.p2') }}</p>
           </div>
+        </div>
 
-          <snapshot-list
-            v-if="snapshotsMunicipality"
-            :snapshots="snapshotsMunicipality"
-          />
+        <div class="useractions">
+          <v-btn small block outlined color="primary">
+            <router-link key="signup" :to="'/' + $i18n.locale + '/signup/'">
+              {{ $t('calltoactionText', { municipalityText: municipalityText }) }}
+            </router-link>
+          </v-btn>
         </div>
 
+        <snapshot-list
+            v-if="hash"
+            :snapshots="snapshotsMunicipality" :withTopic="false"
+          />
+
+        <snapshot-list
+          v-if="snapshotsStore"
+          :snapshots="snapshotsStore" :withTopic="true"
+        />
+
         <v-subheader
           class="px-0 snapshot-list-title">{{ listtitleText }}
         </v-subheader>
@@ -69,13 +82,6 @@
           :snapshots="snapshotsExamples" :withTopic="false"
         />
 
-        <div class="useractions">
-          <v-btn small block outlined color="primary">
-            <router-link key="signup" :to="'/' + $i18n.locale + '/signup/'">
-              {{ $t('calltoactionText', { municipalityText: municipalityText }) }}
-            </router-link>
-          </v-btn>
-        </div>
       </div>
 
       <v-toolbar
@@ -134,9 +140,11 @@ export default {
     return {
       hash: this.$route.params.hash,
       bfsNumber: this.$route.params.bfsNumber,
+      snapshotStoreUrl: process.env.VUE_APP_SNAPSHOTSTOREURL,
       geojson: null,
       geobounds: [],
       municipalityName: '',
+      snapshotsStore: [],
       snapshotsExamples: [],
       snapshotsIdExamplesExclude: [],
       snapshotsMunicipality: [],
@@ -148,6 +156,16 @@ export default {
   },
 
   async mounted() {
+    fetch(`${this.snapshotStoreUrl}/pipelines.${this.$i18n.locale}.json`)
+      .then(response => response.json())
+      .then((data) => {
+        data.forEach((el, i) => {
+          data[i].thumbnail = `${this.snapshotStoreUrl}/${el.thumbnail}`;
+        });
+
+        this.snapshotsStore = data;
+      });
+
     if (this.hash) {
       await this.getSnapshotInfo(this.hash);