Merge pull request #13 from SingularitySociety/feature-location-select

Feature location select

src/components/NounsMap.vue

@@ -3,6 +3,17 @@
     <twitter-login :user="user.user" />
     <photo-select ref="photoRef" @selected="photoSelected" v-if="user.user" />
     <div align="center" v-if="photoLocal">
+      <div>
+        {{ $t("message.selectPhotoLocation") }}<br />
+        <label>{{ $t("message.spotPrivacyLevel") }} : </label>
+        <input
+          type="range"
+          v-model="pLevel"
+          @input="locationUpdated"
+          min="0"
+          max="100"
+        />
+      </div>
       <button
         v-if="!processing"
         @click="uploadPhoto"
@@ -19,16 +30,14 @@
         <i class="animate-spin material-icons text-lg text-op-teal mr-2"
           >schedule</i
         >
-        Processing...
+        {{ $t("message.processing") }}
       </button>
     </div>
     <div>
       <a :href="dataURL" v-if="dataURL"> {{ $t("message.shareTwitter") }} </a>
     </div>
   </div>
-  <div id="captureRef">
-    <div ref="mapRef" class="nouns-map" />
-  </div>
+  <div ref="mapRef" class="nouns-map" />
 </template>
 
 <script lang="ts">
@@ -64,21 +73,24 @@ export default defineComponent({
     const store = useStore();
     const mapRef = ref();
     const photoRef = ref();
+    const pLevel = ref();
 
     const mapInstance = ref();
     const mapObj = ref();
 
     const heatmapPoints = ref<
       { location: google.maps.LatLng; weight: number }[]
     >([]);
-    const captureRef = ref();
     const photoLocal = ref();
     const dataURL = ref<string>();
     const pictureURL = ref<string>();
 
     const user = reactive<UserData>({ user: null });
     const processing = ref();
 
+    let marker: google.maps.Marker;
+    let locationCircle: google.maps.Circle | null;
+
     onMounted(async () => {
       auth.onAuthStateChanged((fbuser) => {
         if (fbuser) {
@@ -117,7 +129,7 @@ export default defineComponent({
         url: "/images/glasses/red320px.png",
         scaledSize: new mapInstance.value.maps.Size(80, 30),
       };
-      const marker = new mapInstance.value.maps.Marker({
+      marker = new mapInstance.value.maps.Marker({
         position: new mapInstance.value.maps.LatLng(47, 34.5),
         map: mapObj.value,
         icon,
@@ -149,6 +161,7 @@ export default defineComponent({
         });
       });
       processing.value = false;
+      pLevel.value = 50;
     });
 
     watch([heatmapPoints, mapObj], () => {
@@ -163,15 +176,50 @@ export default defineComponent({
     const photoSelected = async (files: File[]) => {
       console.log("photoSeleted" + files);
       photoLocal.value = files[0];
+      marker.setMap(null);
+      mapObj.value.addListener("center_changed", () => {
+        locationUpdated();
+      });
+      locationUpdated();
+    };
+    const locationUpdated = () => {
+      console.log(pLevel.value);
+      const privacyLevel = pLevel.value * 1000;
+      if (locationCircle) {
+        locationCircle.setCenter(mapObj.value.getCenter());
+        locationCircle.setRadius(privacyLevel);
+        return;
+      }
+      locationCircle = new google.maps.Circle({
+        strokeColor: "#FF0000",
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        fillColor: "#FF0000",
+        fillOpacity: 0.35,
+        map: mapObj.value,
+        center: mapObj.value.getCenter(),
+        radius: privacyLevel,
+      });
+    };
+    const privacyShift = (degree: number) => {
+      //max 0.01+(random 0.01) degree shifted
+      if (pLevel.value <= 1) {
+        return degree;
+      } else {
+        return (
+          degree + (pLevel.value / 10 + (Math.random() % pLevel.value)) * 0.001
+        );
+      }
     };
     const uploadPhoto = async () => {
       const latlng = mapObj.value.getCenter();
       console.log(latlng.lat(), latlng.lng());
       const { lat, lng, zoom } = {
-        lat: latlng.lat(),
-        lng: latlng.lng(),
+        lat: privacyShift(latlng.lat()),
+        lng: privacyShift(latlng.lng()),
         zoom: mapObj.value.getZoom(),
       };
+      console.log(lat, lng);
       console.log(user.user ? user.user.uid : "user is empty");
       if (!photoLocal.value || !user.user) {
         console.log("empty photo or user");
@@ -214,19 +262,24 @@ export default defineComponent({
       photoRef.value.fileInput.disabled = false;
       processing.value = false;
       photoLocal.value = null;
+      if (locationCircle) {
+        locationCircle.setMap(null);
+        locationCircle = null;
+      }
     };
 
     return {
       user,
       mapRef,
       photoRef,
+      pLevel,
       dataURL,
       pictureURL,
-      captureRef,
       photoLocal,
       processing,
       photoSelected,
       uploadPhoto,
+      locationUpdated,
     };
   },
 });

src/config/project.ts

@@ -5,7 +5,7 @@ export const firebaseConfig = {
   storageBucket: "nounsmap-web-dev.appspot.com",
   messagingSenderId: "921564152867",
   appId: "1:921564152867:web:f52be744b25a8648059d96",
-  measurementId: "G-8HBS0HJ881"
+  measurementId: "G-8HBS0HJ881",
 };
 
 export const nounsMapConfig = {

src/i18n/en.ts

@@ -8,6 +8,10 @@ const lang = {
     loginTwitter: "Login(Twitter)",
     uploadImage: "Upload Image!",
     shareTwitter: "Share(Twitter)!!",
+    processing: "Processing...",
+    selectPhotoLocation:
+      "Please move the map so that the location of the photo is in the center.",
+    spotPrivacyLevel: "SpotPrivacyLevel",
   },
   languages,
 };

src/i18n/ja.ts

@@ -7,6 +7,9 @@ const lang = {
     loginTwitter: "Twitterでログイン",
     uploadImage: "画像をアップロードしましょう!",
     shareTwitter: "Twitterにリンクを共有！",
+    processing: "送信中です...",
+    selectPhotoLocation: "写真の場所が中心になるように地図を移動してください",
+    spotPrivacyLevel: "場所のプライバシーレベル",
   },
   languages,
 };