Add photo display feature and routing

firestore.rules

@@ -10,6 +10,10 @@ service cloud.firestore {
         allow read: if request.auth != null;
       }
     }
+    match /photos/{photoId} {
+    	allow create, update, delete: if false;
+      allow read: if true;
+    }
     match /{document=**} {
       allow read, write: if false;
     }

src/App.vue

@@ -1,15 +1,11 @@
 <template>
-  <nouns-map />
+  <router-view />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import NounsMap from "./components/NounsMap.vue";
 
 export default defineComponent({
-  name: "App",
-  components: {
-    NounsMap,
-  },
+  name: "App"
 });
 </script>

src/components/Layout.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout">
-    <template v-if="user.user"> {{ user.user.displayName }}!! </template>
+    <!-- Saved for future changes. Currently causes error. -->
+    <!-- <template v-if="user.user"> {{ user.user.displayName }}!! </template> -->
     <router-view />
     <Languages class="mt-4" />
   </div>
@@ -26,26 +27,28 @@ export default defineComponent({
   components: {
     Languages,
   },
-  async setup() {
-    const store = useStore();
-    const user = reactive<UserData>({ user: null });
+  setup() {
+    // Saved for future changes. Currently causes error.
+    // const store = useStore();
+    // const user = reactive<UserData>({ user: null });
     useI18nParam();
 
-    onMounted(() => {
-      auth.onAuthStateChanged((fbuser) => {
-        if (fbuser) {
-          console.log("authStateChanged:");
-          user.user = fbuser;
-          store.commit("setUser", fbuser);
-        } else {
-          store.commit("setUser", null);
-        }
-      });
-    });
-
-    return {
-      user,
-    };
+    // Saved for future changes. Currently causes error.
+    // onMounted(() => {
+    //   auth.onAuthStateChanged((fbuser) => {
+    //     if (fbuser) {
+    //       console.log("authStateChanged:");
+    //       user.user = fbuser;
+    //       store.commit("setUser", fbuser);
+    //     } else {
+    //       store.commit("setUser", null);
+    //     }
+    //   });
+    // });
+
+    // return {
+    //   user,
+    // };
   },
 });
 </script>

src/components/NounsMap.vue

@@ -42,10 +42,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, onMounted } from "vue";
+import { defineComponent, reactive, ref, onMounted, Ref } from "vue";
+import { useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { db } from "@/utils/firebase";
-import { doc, setDoc } from "firebase/firestore";
+import { doc, setDoc, getDoc } from "firebase/firestore";
 import { auth } from "@/utils/firebase";
 import { User } from "firebase/auth";
 import { Loader } from "@googlemaps/js-api-loader";
@@ -65,13 +66,81 @@ interface UserData {
   user: User | null;
 }
 
+interface PinData {
+  icon?: google.maps.Icon,
+  photoURL: string,
+  lat: number,
+  lng: number,
+  visibility: boolean
+}
+
+class Pin {
+  protected _mapInstance: Ref<typeof google>;
+  protected _mapObj: Ref<google.maps.Map>;
+  protected _marker: google.maps.Marker;
+  protected _infoWindow: google.maps.InfoWindow;
+  protected _data: PinData;
+
+  protected contentString(photoURL: string) {
+    return '<div id="content">' +
+        '<div id="siteNotice">' +
+        '<img width="242" height="120"  src="' +
+        photoURL +
+        '" />' +
+        "</div>" + "</div>";
+  }
+
+  constructor(mapInstance: Ref<typeof google>, mapObj: Ref<google.maps.Map>, data: PinData) {
+    this._mapInstance = mapInstance;
+    this._mapObj = mapObj;
+    this._marker = new mapInstance.value.maps.Marker({
+      icon: data.icon,
+      animation: google.maps.Animation.BOUNCE,
+      position: new mapInstance.value.maps.LatLng(data.lat, data.lng),
+      map: mapObj.value,
+      visible: data.visibility
+    });
+    this._infoWindow = new mapInstance.value.maps.InfoWindow({content: this.contentString(data.photoURL)});
+    this._marker.addListener("click", () => {
+      this._infoWindow.open({
+        anchor: this._marker,
+        map: mapObj.value,
+        shouldFocus: false,
+      });
+    });
+    this._data = data;
+  }
+
+  update(data: Partial<PinData>) {
+    this._data = { ...this._data, ...data };
+
+    if (data.icon != null) {
+      this._marker.setIcon(data.icon);
+    }
+
+    if (data.photoURL != null) {
+      this._infoWindow.setContent(this.contentString(data.photoURL));
+    }
+    if (data.lat != null || data.lng != null) {
+      const latlng = new this._mapInstance.value.maps.LatLng(data.lat ?? this._data.lat, data.lng ?? this._data.lng);
+      this._marker.setPosition(latlng);
+      this._mapObj.value.setCenter(latlng);
+    }
+
+    if (data.visibility != null) {
+      this._marker.setVisible(data.visibility);
+    }
+  }
+}
+
 export default defineComponent({
   components: {
     PhotoSelect,
     TwitterLogin,
     Wallet,
   },
   setup() {
+    const route = useRoute();
     const store = useStore();
     const mapRef = ref();
     const photoRef = ref();
@@ -92,6 +161,8 @@ export default defineComponent({
     let locationCircle: google.maps.Circle | null;
     let nft: NFT;
 
+    const pins: {[id: string]: Pin} = {};
+
     onMounted(async () => {
       auth.onAuthStateChanged((fbuser) => {
         console.log({ fbuser });
@@ -113,34 +184,63 @@ export default defineComponent({
       };
       mapInstance.value = await loader.load();
       mapObj.value = new mapInstance.value.maps.Map(mapRef.value, mapOptions);
-      marker = new mapInstance.value.maps.Marker({
-        position: new mapInstance.value.maps.LatLng(47, 34.5),
-        map: mapObj.value,
-      });
-      showDemoIcons();
+      if (route.params.photoId == null) {
+        showDemoIcons();
+      }
       processing.value = false;
       pLevel.value = 5;
+
+      if (route.params.photoId != null) {
+        const photoDoc = getDoc(doc(db, `photos/${route.params.photoId}`));
+        photoDoc.then(doc => {
+          if (doc.exists()) {
+            const { iconURL, photoURL, lat, lng, zoom } = doc.data();
+
+            pins[doc.id] = new Pin(mapInstance, mapObj, {
+              icon: {
+                url: iconURL,
+                scaledSize: new mapInstance.value.maps.Size(80, 80),
+              },
+              photoURL,
+              lat,
+              lng,
+              visibility: true
+            });
+            if (lat != null && lng != null) {
+              mapObj.value.setCenter(new mapInstance.value.maps.LatLng(lat, lng));
+            }
+            if (zoom != null) {
+              mapObj.value.setZoom(zoom);
+            }
+          }
+        }).catch(reason => {
+          console.error(reason);
+        });
+      }
     });
 
     const photoSelected = async (info: PhotoInfo) => {
       photoLocal.value = info;
-      marker.setMap(null);
+      Object.values(pins).forEach(site => site.update({visibility: false}));
       mapObj.value.addListener("center_changed", () => {
         locationUpdated();
       });
       const location = info.location ? info.location : mapObj.value.getCenter();
       mapObj.value.setCenter(location);
       mapObj.value.setZoom(12);
-      marker = new mapInstance.value.maps.Marker({
-        position: location,
-        map: mapObj.value,
+      pins['upload'] = new Pin(mapInstance, mapObj, {
+        icon: defaultIcon(),
+        photoURL: '',
+        lat: location.lat,
+        lng: location.lng,
+        visibility: true
       });
-      iconUpdate();
     };
     const locationUpdated = () => {
+      const center = mapObj.value.getCenter();
       console.debug(pLevel.value);
       const privacyLevel = pLevel.value * 1000;
-      marker.setPosition(mapObj.value.getCenter());
+      pins['upload']?.update({lat: center.lat, lng: center.lng});
       if (locationCircle) {
         locationCircle.setCenter(mapObj.value.getCenter());
         locationCircle.setRadius(privacyLevel);
@@ -241,55 +341,32 @@ export default defineComponent({
     const nftUpdate = (anft: NFT) => {
       nft = anft;
       console.log({ nft });
-      iconUpdate();
+      pins['demo']?.update({icon: defaultIcon()});
     };
-    const iconUpdate = () => {
+
+    const defaultIcon = () => {
       if (nft && nft.image) {
-        const icon = {
+        return {
           url: nft.image,
           scaledSize: new mapInstance.value.maps.Size(80, 80),
         };
-        marker.setIcon(icon);
-        marker.setAnimation(google.maps.Animation.BOUNCE);
       } else {
         //Nouns Default red grass
-        const icon = {
+        return {
           url: "/images/glasses/red320px.png",
           scaledSize: new mapInstance.value.maps.Size(80, 30),
         };
-        marker.setIcon(icon);
       }
     };
     const showDemoIcons = () => {
       //update for demofor Demo
-      const icon = {
-        url: "/images/glasses/red320px.png",
-        scaledSize: new mapInstance.value.maps.Size(80, 30),
-      };
-      pictureURL.value = require("@/assets/sample/pexels-11518762.jpg");
-      marker.setIcon(icon);
-      marker.setAnimation(google.maps.Animation.BOUNCE);
-      const contentString =
-        '<div id="content">' +
-        '<div id="siteNotice">' +
-        '<img width="242" height="120"  src="' +
-        pictureURL.value +
-        '" />';
-      "</div>" + "</div>";
-      const infowindow = new google.maps.InfoWindow({
-        content: contentString,
-      });
-      infowindow.open({
-        anchor: marker,
-        map: mapObj.value,
-        shouldFocus: false,
-      });
-      marker.addListener("click", () => {
-        infowindow.open({
-          anchor: marker,
-          map: mapObj.value,
-          shouldFocus: false,
-        });
+
+      pins['demo'] = new Pin(mapInstance, mapObj, {
+        icon: defaultIcon(),
+        photoURL: require("@/assets/sample/pexels-11518762.jpg"),
+        lat: 47,
+        lng: 34.5,
+        visibility: true
       });
     };
 
@@ -317,4 +394,4 @@ export default defineComponent({
   width: 100vw;
   height: 100vh;
 }
-</style>
+</style>

src/router/index.ts

@@ -7,10 +7,16 @@ import Home from "../views/Home.vue";
 import Account from "../views/Account.vue";
 import About from "../views/About.vue";
 
+import NounsMap from "../components/NounsMap.vue";
+
 const routeChildren: Array<RouteRecordRaw> = [
   {
     path: "",
-    component: Home,
+    component: NounsMap,
+  },
+  {
+    path: "p/:photoId",
+    component: NounsMap,
   },
   {
     path: "about",