Show details for the nearest report

src/components/Map.vue

@@ -38,6 +38,7 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 
 import compassNorthIcon from '@/assets/compassNorth.svg';
 import * as constants from '@/constants';
+import { distance } from '@/tools';
 import ReportMarker from './ReportMarker.vue';
 
 // Fix for a bug in Leaflet default icon
@@ -125,6 +126,32 @@ export default {
                 ) {
                     this.isProgrammaticMove = true;
                     this.map.once('moveend', () => { this.isProgrammaticMove = false; });
+
+                    // Eventually display closest report
+                    const isReportDetailsAlreadyShown = this.$store.state.reportDetails.id;
+                    const isReportDetailsOpenedByUser = this.$store.state.reportDetails.userAsked;
+                    console.log(isReportDetailsAlreadyShown, isReportDetailsOpenedByUser);
+                    if (!isReportDetailsAlreadyShown || !isReportDetailsOpenedByUser) {
+                        // Compute all markers distance, filter by max distance
+                        const distances = this.markers.map(
+                            marker => ({
+                                id: marker.id,
+                                distance: distance(newPositionLatLng, marker.latLng),
+                            }),
+                        ).filter(item => item.distance < constants.MIN_DISTANCE_REPORT_DETAILS);
+                        const closestReport = distances.reduce(  // Get the closest one
+                            (acc, item) => (
+                                item.distance < acc.distance ? item : acc
+                            ),
+                            { distance: Number.MAX_VALUE, id: -1 },
+                        );
+                        // TODO: Take into account the history of positions for the direction
+                        if (closestReport.id !== -1) {
+                            this.$store.dispatch('showReportDetails', { id: closestReport.id, userAsked: false });
+                        } else {
+                            this.$store.dispatch('hideReportDetails');
+                        }
+                    }
                 }
                 this.map.setView(newPositionLatLng, this.zoom);
             }

src/components/ReportCard.vue

@@ -56,7 +56,7 @@ import { REPORT_TYPES } from '@/constants';
 export default {
     computed: {
         report() {
-            const reportID = this.$store.state.reportDetailsID;
+            const reportID = this.$store.state.reportDetails.id;
             if (reportID != null) {
                 const report = this.$store.state.reports.find(item => item.id === reportID);
                 return {
@@ -81,17 +81,17 @@ export default {
     },
     methods: {
         closeReportCard() {
-            return this.$store.dispatch('showReportDetails', null);
+            return this.$store.dispatch('hideReportDetails');
         },
         downvote() {
             const reportID = this.report.id;
             this.closeReportCard();  // Resets this.report
-            return this.$store.dispatch('downvote', reportID);
+            return this.$store.dispatch('downvote', { id: reportID });
         },
         upvote() {
             const reportID = this.report.id;
             this.closeReportCard();  // Resets this.report
-            return this.$store.dispatch('upvote', reportID);
+            return this.$store.dispatch('upvote', { id: reportID });
         },
     },
 };

src/components/ReportMarker.vue

@@ -11,7 +11,7 @@ export default {
     },
     computed: {
         icon() {
-            if (this.$store.state.reportDetailsID === this.marker.id) {
+            if (this.$store.state.reportDetails.id === this.marker.id) {
                 return REPORT_TYPES[this.marker.type].markerLarge;
             }
             return REPORT_TYPES[this.marker.type].marker;
@@ -24,7 +24,7 @@ export default {
     },
     methods: {
         onClick() {
-            this.$store.dispatch('showReportDetails', this.marker.id);
+            this.$store.dispatch('showReportDetails', { id: this.marker.id, userAsked: true });
         },
     },
 };

src/constants.js

@@ -104,8 +104,10 @@ export const REPORT_TYPES = {
 // Display order of the report types
 export const REPORT_TYPES_ORDER = ['gcum', 'interrupt', 'obstacle', 'pothole', 'accident', 'misc'];
 
-export const MOCK_LOCATION = false;
-export const MOCK_LOCATION_UPDATE_INTERVAL = 10 * 1000;
+export const MIN_DISTANCE_REPORT_DETAILS = 40;  // in meters
+
+export const MOCK_LOCATION = true;
+export const MOCK_LOCATION_UPDATE_INTERVAL = 3 * 1000;
 
 export const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500;
 

src/main.js

@@ -17,7 +17,7 @@ import router from './router';
 import store from './store';
 
 // Ensure locale is correctly set from the store value
-store.dispatch('setLocale', store.state.settings.locale);
+store.dispatch('setLocale', { locale: store.state.settings.locale });
 
 Vue.use(Vuetify);
 

src/store/actions.js

@@ -19,12 +19,12 @@ export function fetchReports({ commit }) {
         .finally(() => commit(IS_DONE_LOADING));
 }
 
-export function downvote({ commit }, id) {
+export function downvote({ commit }, { id }) {
     return api.downvote(id)
         .then(report => commit(PUSH_REPORT, { report }));
 }
 
-export function upvote({ commit }, id) {
+export function upvote({ commit }, { id }) {
     return api.upvote(id)
         .then(report => commit(PUSH_REPORT, { report }));
 }
@@ -36,11 +36,15 @@ export function saveReport({ commit }, { type, lat, lng }) {
         .finally(() => commit(IS_DONE_LOADING));
 }
 
-export function showReportDetails({ commit }, id) {
-    return commit(SHOW_REPORT_DETAILS, { id });
+export function hideReportDetails({ commit }) {
+    return commit(SHOW_REPORT_DETAILS, { id: null, userAsked: null });
 }
 
-export function setLocale({ commit }, locale) {
+export function showReportDetails({ commit }, { id, userAsked }) {
+    return commit(SHOW_REPORT_DETAILS, { id, userAsked });
+}
+
+export function setLocale({ commit }, { locale }) {
     // Set global Vue-i18n locale
     i18n.locale = locale;
     // Set moment locale

src/store/mutations.js

@@ -34,7 +34,10 @@ if (storageAvailable('localStorage')) {
 
 export const initialState = {
     isLoading: false,
-    reportDetailsID: null,
+    reportDetails: {
+        id: null,
+        userAsked: null,
+    },
     reports: [],
     settings: {
         locale: locale || 'en',
@@ -55,8 +58,9 @@ export const mutations = {
         }
         state.settings[setting] = value;
     },
-    [types.SHOW_REPORT_DETAILS](state, { id }) {
-        state.reportDetailsID = id;
+    [types.SHOW_REPORT_DETAILS](state, { id, userAsked }) {
+        Vue.set(state.reportDetails, 'id', id);
+        Vue.set(state.reportDetails, 'userAsked', userAsked);
     },
     [types.STORE_REPORTS](state, { reports }) {
         state.reports = reports;

src/tools/index.js

@@ -17,10 +17,20 @@ export function distance(latLng1, latLng2) {
 }
 
 export function mockLocation() {
+    // Over Paris
+    /*
     const LAT_MIN = 48.854031;
     const LNG_MIN = 2.281279;
     const LAT_MAX = 48.886123;
     const LNG_MAX = 2.392742;
+    */
+
+    // Over small area
+    const LAT_MIN = 48.81788;
+    const LNG_MIN = 2.31723;
+    const LAT_MAX = 48.81952;
+    const LNG_MAX = 2.32077;
+
     const newLocation = {
         coords: {
             accuracy: 10, // In meters

src/views/Map.vue

@@ -64,7 +64,7 @@ export default {
             this.disablePositionWatching();
             window.removeEventListener('keydown', this.hideReportDialogOnEsc);
         }
-        this.$store.dispatch('showReportDetails', null);
+        this.$store.dispatch('hideReportDetails');
     },
     computed: {
         reportsMarkers() {

src/views/Settings.vue

@@ -36,7 +36,7 @@ export default {
     },
     methods: {
         submit() {
-            this.$store.dispatch('setLocale', this.locale);
+            this.$store.dispatch('setLocale', { locale: this.locale });
             this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
         },
     },