Display reports on the map

.editorconfig

@@ -3,7 +3,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
-insert_final_newline = true
+insert_final_newline = false
 trim_trailing_whitespace = true

src/api/index.js

@@ -12,9 +12,13 @@ export function saveReport(type, lat, lng) {
             lat,
             lng,
         }),
-    });
+    })
+        .catch(exc => console.error(`Unable to post report: ${exc}.`));
 }
 
 export function getReports() {
-    // TODO
+    return fetch(`${BASE_URL}api/v1/reports`)
+        .then(response => response.json())
+        .then(response => response.data)
+        .catch(exc => console.error(`Unable to fetch reports: ${exc}.`));
 }

src/components/Map.vue

@@ -3,6 +3,7 @@
         <v-lmap :center="latlng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }">
             <v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
             <v-lts :lat-lng="latlng" :options="markerOptions"></v-lts>
+            <v-lmarker v-for="marker in markers" :key="marker.id" :lat-lng="marker.latLng"></v-lmarker>
         </v-lmap>
     </div>
 </template>
@@ -33,6 +34,7 @@ export default {
         heading: Number,
         lat: Number,
         lng: Number,
+        markers: Array,
     },
     computed: {
         latlng() {

src/constants.js

@@ -1,2 +0,0 @@
-export const MOCK_LOCATION = { lat: 48.866667, lng: 2.333333, heading: 20 * (Math.PI / 180) };
-// export const MOCK_LOCATION = false;

src/tools/index.js

@@ -0,0 +1,30 @@
+export function distance(latLng1, latLng2) {
+    const lat1 = (latLng1[0] * Math.PI) / 180;
+    const lng1 = (latLng1[1] * Math.PI) / 180;
+
+    const lat2 = (latLng2[0] * Math.PI) / 180;
+    const lng2 = (latLng2[1] * Math.PI) / 180;
+
+    const a = (
+        (Math.sin((lat2 - lat1) / 2.0) ** 2) +
+        (Math.cos(lat1) * Math.cos(lat2) * (Math.sin((lng2 - lng1) / 2.0) ** 2))
+    );
+    const c = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    const EARTH_RADIUS = 6371000;
+
+    return EARTH_RADIUS * c;
+}
+
+export function mockLocation() {
+    const LAT_MIN = 48.854031;
+    const LNG_MIN = 2.281279;
+    const LAT_MAX = 48.886123;
+    const LNG_MAX = 2.392742;
+    return {
+        coords: {
+            latitude: (Math.random() * (LAT_MAX - LAT_MIN)) + LAT_MIN,
+            longitude: (Math.random() * (LNG_MAX - LNG_MIN)) + LNG_MIN,
+            heading: 20 * (Math.PI / 180),
+        },
+    };
+}

src/views/Map.vue

@@ -2,7 +2,7 @@
     <v-container fluid fill-height class="no-padding">
         <v-layout row wrap fill-height>
             <v-flex xs12 fill-height v-if="lat && lng">
-                <Map :lat="lat" :lng="lng" :heading="heading"></Map>
+                <Map :lat="lat" :lng="lng" :heading="heading" :markers="reportsMarkers"></Map>
                 <v-btn
                     fixed
                     dark
@@ -30,9 +30,14 @@
 <script>
 import NoSleep from 'nosleep.js';
 
-import { MOCK_LOCATION } from '@/constants';
+import * as api from '@/api';
 import Map from '@/components/Map.vue';
 import ReportDialog from '@/components/ReportDialog/index.vue';
+import { distance, mockLocation } from '@/tools';
+
+const MOCK_LOCATION = false;
+const MOCK_LOCATION_UPDATE_INTERVAL = 30 * 1000;
+const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500;
 
 export default {
     components: {
@@ -42,11 +47,23 @@ export default {
     created() {
         this.initializePositionWatching();
         this.setNoSleep();
+        this.fetchReports();
     },
     beforeDestroy() {
         this.disableNoSleep();
         this.disablePositionWatching();
     },
+    computed: {
+        reportsMarkers() {
+            if (!this.reports) {
+                return [];
+            }
+            return this.reports.map(report => ({
+                id: report.id,
+                latLng: [report.attributes.lat, report.attributes.lng],
+            }));
+        },
+    },
     data() {
         return {
             dialog: false,
@@ -55,6 +72,7 @@ export default {
             lat: null,
             lng: null,
             noSleep: null,
+            reports: null,
             watchID: null,
         };
     },
@@ -62,15 +80,17 @@ export default {
         initializePositionWatching() {
             this.disablePositionWatching(); // Ensure at most one at the same time
 
+            if (MOCK_LOCATION) {
+                this.setPosition(mockLocation());
+                this.watchID = setInterval(
+                    () => this.setPosition(mockLocation()),
+                    MOCK_LOCATION_UPDATE_INTERVAL,
+                );
+            } else {
                 if (!('geolocation' in navigator)) {
                     this.error = this.$t('geolocation.unavailable');
                 }
 
-            if (MOCK_LOCATION) {
-                this.lat = MOCK_LOCATION.lat;
-                this.lng = MOCK_LOCATION.lng;
-                this.heading = MOCK_LOCATION.heading;
-            } else {
                 this.watchID = navigator.geolocation.watchPosition(
                     this.setPosition,
                     this.handlePositionError,
@@ -84,13 +104,26 @@ export default {
         },
         disablePositionWatching() {
             if (this.watchID !== null) {
+                if (MOCK_LOCATION) {
+                    clearInterval(this.watchID);
+                } else {
                     navigator.geolocation.clearWatch(this.watchID);
                 }
+            }
         },
         handlePositionError(error) {
             this.error = `Error ${error.code}: ${error.message}`;
         },
         setPosition(position) {
+            if (this.lat && this.lng) {
+                const distanceFromPreviousPoint = distance(
+                    [this.lat, this.lng],
+                    [position.coords.latitude, position.coords.longitude],
+                );
+                if (distanceFromPreviousPoint > UPDATE_REPORTS_DISTANCE_THRESHOLD) {
+                    this.fetchReports();
+                }
+            }
             this.lat = position.coords.latitude;
             this.lng = position.coords.longitude;
             if (position.coords.heading) {
@@ -101,7 +134,6 @@ export default {
         },
         setNoSleep() {
             this.noSleep = new NoSleep();
-            console.log(this.noSleep);
             this.noSleep.enable();
         },
         disableNoSleep() {
@@ -109,6 +141,11 @@ export default {
                 this.noSleep.disable();
             }
         },
+        fetchReports() {
+            api.getReports().then((reports) => {
+                this.reports = reports;
+            });
+        },
     },
 };
 </script>