Merge pull request #268 from covidcanidoit/259-embeddable-web

Embeddable Webpage [#259]
covidcanidoit · Oct 15, 2020 · 5b2d60a · 5b2d60a
2 parents 37a671d + 0714a76
commit 5b2d60a
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 16 deletions.
diff --git a/public/embed-demo.html b/public/embed-demo.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <h1>Embedded Site Demo</h1>
+    <iframe width=1000 height=600 src="/US/kansas-city/?embed=true&regionlock=true">
+    </iframe>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -5,6 +5,7 @@
       app
       right
       :disable-resize-watcher="true"
+      v-if="showNav"
     >
       <v-list dense>
         <v-list-item>
@@ -92,7 +93,7 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar app style="position: absolute;">
+    <v-app-bar app style="position: absolute;" v-if="showNav">
       <div class="nav-logo">
         <router-link
           class="router mx-3"
@@ -195,7 +196,7 @@
       <router-view :key="$route.fullPath" />
     </v-main>
 
-    <Footer />
+    <Footer v-if="showNav" />
   </v-app>
 </template>
 
@@ -222,7 +223,9 @@ export default {
       "currentCountry",
       "currentRegion",
       "regionSlugs",
-      "regions"
+      "regions",
+      "navigation",
+      "regionlock"
     ]),
     isHome() {
       return this.$route.name == "Home";
@@ -232,6 +235,9 @@ export default {
     },
     isActivitiesLinkActive() {
       return this.$route.path.includes("activity");
+    },
+    showNav() {
+      return this.$store.state.navigation.show;
     }
   },
   methods: {
@@ -247,6 +253,30 @@ export default {
       this.$router
         .replace({ params: { country: this.currentCountry } })
         .catch(() => {});
+    },
+    $route: function() {
+      if (
+        !this.$store.state.navigation.show ||
+        (!!this.$route.query && this.$route.query.embed.includes(true))
+      ) {
+        this.$store.commit("setNav", false);
+      }
+      if (
+        this.$store.state.regionlock.lock ||
+        (!!this.$route.query && this.$route.query.regionlock.includes(true))
+      ) {
+        this.$store.commit("setRegionSelectLock", true);
+      }
+      if (
+        this.$store.state.navigation.show &&
+        !this.$store.state.regionlock(
+          !this.$route.path.includes("embed=true") &&
+            !this.$route.path.includes("regionlock=false")
+        )
+      ) {
+        this.$store.commit("setNav", true);
+        this.$store.commit("setRegionSelectLock", false);
+      }
     }
   }
 };

diff --git a/src/components/RiskDescription.vue b/src/components/RiskDescription.vue
@@ -20,7 +20,12 @@
         <div class="score">{{ riskLevel.riskScore }}</div>
         <div class="score-title">{{ riskLevel.riskName }}</div>
         <ScoreScale :score="riskScore" />
-        <RegionSelector parent="SearchResults" />
+        <div v-if="regionlock.lock">
+          {{ selectedRegion.longName }}
+        </div>
+        <div v-else>
+          <RegionSelector parent="SearchResults" />
+        </div>
         <v-spacer></v-spacer>
 
         <RiskComponents :activity="activity"></RiskComponents>
@@ -56,8 +61,7 @@ export default {
   data() {
     return {
       hideMoreInfo: true,
-      hasSearched: false,
-      selectedRegion: Object
+      hasSearched: false
     };
   },
   computed: {
@@ -66,7 +70,8 @@ export default {
       "currentUserSettings",
       "currentRegion",
       "regions",
-      "activities"
+      "activities",
+      "regionlock"
     ]),
     riskLevel() {
       return this.riskLevels[`riskLevel${this.riskScore}`];
@@ -106,6 +111,9 @@ export default {
       } else {
         return "searchbarContainerOnSmaller";
       }
+    },
+    selectedRegion() {
+      return this.regions[this.currentRegion];
     }
   },
   methods: {

diff --git a/src/store/index.js b/src/store/index.js
@@ -6,9 +6,6 @@ Vue.use(Vuex);
 import { vuexfireMutations, firebaseAction } from "vuexfire";
 import { db } from "@/db.js";
 
-// Persist vuex into localStorage between page loads
-import VuexPersistence from "vuex-persist";
-
 import router from "@/router";
 
 // This helper makes for much shorter action-bindings
@@ -20,7 +17,6 @@ function bindFirebase(key) {
 }
 
 export default new Vuex.Store({
-  plugins: [new VuexPersistence().plugin],
   state: {
     submitted: false,
     content: {},
@@ -32,7 +28,13 @@ export default new Vuex.Store({
     // Phase2
     currentRegion: "all",
 
-    suggestions: {}
+    suggestions: {},
+    navigation: {
+      show: true
+    },
+    regionlock: {
+      lock: false
+    }
   },
   mutations: {
     ...vuexfireMutations,
@@ -45,6 +47,12 @@ export default new Vuex.Store({
     },
     setCurrentRegion(state, currentRegion) {
       state.currentRegion = currentRegion;
+    },
+    setNav(state, value) {
+      state.navigation.show = value;
+    },
+    setRegionSelectLock(state, value) {
+      state.regionlock.lock = value;
     }
   },
   getters: {
@@ -121,8 +129,13 @@ export default new Vuex.Store({
       }
     },
     banner(_state, getters) {
-      console.log(getters.currentContent);
       return getters.currentContent.banner || {};
+    },
+    navigation(state) {
+      return state.navigation;
+    },
+    regionlock(state) {
+      return state.regionlock;
     }
   },
   actions: {

diff --git a/src/views/SearchResults.vue b/src/views/SearchResults.vue
@@ -58,9 +58,13 @@ export default {
       return this.activityList.map(activity => activity.name);
     },
     shouldForceRegionSelect() {
-      return (
-        Object.keys(this.regions).length > 1 && this.currentRegion === "all"
-      );
+      if (this.$store.state.regionlock.lock === true) {
+        return false;
+      } else {
+        return (
+          Object.keys(this.regions).length > 1 && this.currentRegion === "all"
+        );
+      }
     }
   },
   created() {