From 57552197a9590c1bc214d0e3a8e60f02be6a5830 Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Thu, 12 Jul 2018 17:48:26 +0200 Subject: [PATCH] Show details for the nearest report --- src/components/Map.vue | 27 +++++++++++++++++++++++++++ src/components/ReportCard.vue | 8 ++++---- src/components/ReportMarker.vue | 4 ++-- src/constants.js | 6 ++++-- src/main.js | 2 +- src/store/actions.js | 14 +++++++++----- src/store/mutations.js | 10 +++++++--- src/tools/index.js | 10 ++++++++++ src/views/Map.vue | 2 +- src/views/Settings.vue | 2 +- 10 files changed, 66 insertions(+), 19 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index be34853..f47cfe9 100644 --- a/src/components/Map.vue +++ b/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); } diff --git a/src/components/ReportCard.vue b/src/components/ReportCard.vue index 2905ecd..d540f09 100644 --- a/src/components/ReportCard.vue +++ b/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 }); }, }, }; diff --git a/src/components/ReportMarker.vue b/src/components/ReportMarker.vue index 6e99be2..7e5a1c6 100644 --- a/src/components/ReportMarker.vue +++ b/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 }); }, }, }; diff --git a/src/constants.js b/src/constants.js index 5ad1637..1719012 100644 --- a/src/constants.js +++ b/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; diff --git a/src/main.js b/src/main.js index 03270e7..1163b0d 100644 --- a/src/main.js +++ b/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); diff --git a/src/store/actions.js b/src/store/actions.js index 0c674fd..20faa14 100644 --- a/src/store/actions.js +++ b/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 diff --git a/src/store/mutations.js b/src/store/mutations.js index 2b19ca2..93bc7a1 100644 --- a/src/store/mutations.js +++ b/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; diff --git a/src/tools/index.js b/src/tools/index.js index 963491a..b7491c5 100644 --- a/src/tools/index.js +++ b/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 diff --git a/src/views/Map.vue b/src/views/Map.vue index 136e468..efab698 100644 --- a/src/views/Map.vue +++ b/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() { diff --git a/src/views/Settings.vue b/src/views/Settings.vue index ed16347..380cea8 100644 --- a/src/views/Settings.vue +++ b/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 }); }, },