Add the ability to add a report anywhere through long press + preferences section to set the locale

src/App.vue

@@ -12,8 +12,14 @@
                     <v-icon>more_vert</v-icon>
                 </v-btn>
                 <v-list>
-                    <v-list-tile @click="">
+                    <v-list-tile @click="goToMap">
-                        <v-list-tile-title @click="goToAbout">{{ $t("menu.About") }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("menu.Map") }}</v-list-tile-title>
+                    </v-list-tile>
+                    <v-list-tile @click="goToAbout">
+                        <v-list-tile-title>{{ $t("menu.About") }}</v-list-tile-title>
+                    </v-list-tile>
+                    <v-list-tile @click="goToSettings">
+                        <v-list-tile-title>{{ $t("menu.Settings") }}</v-list-tile-title>
                     </v-list-tile>
                 </v-list>
             </v-menu>
@@ -36,6 +42,12 @@ export default {
         goToAbout() {
             this.$router.push({ name: 'About' });
         },
+        goToMap() {
+            this.$router.push({ name: 'Map' });
+        },
+        goToSettings() {
+            this.$router.push({ name: 'Settings' });
+        },
     },
 };
 </script>

src/components/About.vue

@@ -1,9 +1,12 @@
 <template>
     <v-container fluid>
         <v-layout row>
-            <v-flex xs6 offset-xs3>
+            <v-flex xs12 sm6 offset-sm3>
                 <p>{{ $t('about.summary') }}</p>
 
+                <h2 class="body-2">{{ $t('about.usage') }}</h2>
+                <p>{{ $t('about.usageDescription') }}</p>
+
                 <h2 class="body-2">{{ $t('about.availableReportsTitle') }}</h2>
                 <ul class="ml-3">
                     <li><strong>{{ $t('reportLabels.gcum') }}</strong>{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('about.gcumDescription') }}</li>

src/components/Map.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="fill-height fill-width">
-        <v-lmap :center="latlng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }">
+        <v-lmap :center="latlng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress">
             <v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
 
             <v-lts v-if="heading" :lat-lng="latlng" :options="markerOptions"></v-lts>
@@ -44,6 +44,7 @@ export default {
         lat: Number,
         lng: Number,
         markers: Array,
+        onLongPress: Function,
     },
     computed: {
         radiusFromAccuracy() {
@@ -84,6 +85,13 @@ export default {
             tileServer: constants.TILE_SERVER,
         };
     },
+    methods: {
+        handleLongPress(event) {
+            if (this.onLongPress) {
+                this.onLongPress(event.latlng);
+            }
+        },
+    },
 };
 </script>
 

src/i18n/en.js

@@ -7,13 +7,17 @@ export default {
         license: 'It is released under an <a href="https://opensource.org/licenses/MIT">MIT license</a>. The map background is using tiles from <a href="https://www.opencyclemap.org/docs/">OpenCycleMap</a>, thanks to <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> and <a href="http://leafletjs.com/">Leaflet</a>.',
         potholeDescription: 'A pothole in the ground.',
         summary: 'This app lets you track and share issues with bike lanes.',
+        usage: 'How to use',
+        usageDescription: 'Use the button in the lower right corner to add a new report at your current location. To add a report elsewhere, do a long press (or right click) where you want the report to be shown.',
     },
     geolocation: {
         fetching: 'Fetching current position…',
         unavailable: 'Sorry, geolocation is not available in your browser.',
     },
     menu: {
-        About: 'About',
+        About: 'Help',
+        Map: 'Map',
+        Settings: 'Settings',
     },
     misc: {
         spaceBeforeDoublePunctuations: '',
@@ -23,4 +27,8 @@ export default {
         interrupt: 'Interruption',
         pothole: 'Pothole',
     },
+    settings: {
+        locale: 'Language',
+        save: 'Save',
+    },
 };

src/i18n/fr.js

@@ -7,13 +7,17 @@ export default {
         license: "Le code source est sous <a href='https://opensource.org/licenses/MIT'>licence MIT license</a>. Les tuiles de fond de carte proviennent de chez <a href='https://www.opencyclemap.org/docs/'>OpenCycleMap</a>, grace aux <a href='https://www.openstreetmap.org/copyright'>contributeurs OpenStreetMap</a> et à <a href='http://leafletjs.com/'>Leaflet</a>.",
         potholeDescription: 'Un nid de poule dans la route.',
         summary: 'Cette application vous permet de signaler et de partager des problèmes avec les itinéraires cyclables.',
+        usage: 'Utilisation',
+        usageDescription: "Utilisez le bouton en bas à droite pour ajouter un signalement à votre emplacement actuel. Pour ajouter un signalement ailleurs, faites un appui long (ou clic droit) à l'emplacement souhaité sur la carte.",
     },
     geolocation: {
         fetching: 'En attente de votre position…',
         unavailable: "Désolé, la géolocalisation n'est pas disponible dans votre navigateur.",
     },
     menu: {
-        About: 'À-propos',
+        About: 'Aide',
+        Map: 'Carte',
+        Settings: 'Préférences',
     },
     misc: {
         spaceBeforeDoublePunctuations: ' ',
@@ -23,4 +27,8 @@ export default {
         interrupt: 'Interruption',
         pothole: 'Nid de poule',
     },
+    settings: {
+        locale: 'Langue',
+        save: 'Sauver',
+    },
 };

src/i18n/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 
+import { storageAvailable } from '@/tools';
+
 import en from './en';
 import fr from './fr';
 
@@ -31,21 +33,29 @@ export function getBrowserLocales() {
     return locales;
 }
 
-const messages = {
+export const messages = {
     en,
     fr,
 };
 
-
+let locale = null;
-const locales = getBrowserLocales();
+if (storageAvailable('localStorage')) {
-
+    locale = localStorage.getItem('i18nSetting');
-let locale = 'en'; // Safe default
+    if (!messages[locale]) {
-// Get best matching locale
+        locale = null;
-for (let i = 0; i < locales.length; i += 1) {
+    }
+} else {
+    // Get best matching locale from browser
+    const locales = getBrowserLocales();
+    for (let i = 0; i < locales.length; i += 1) {
         if (messages[locales[i]]) {
             locale = locales[i];
             break; // Break at first matching locale
         }
+    }
+}
+if (!locale) {
+    locale = 'en'; // Safe default
 }
 
 export default new VueI18n({

src/router/index.js

@@ -2,20 +2,26 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import About from '@/components/About.vue';
 import Map from '@/views/Map.vue';
+import Settings from '@/views/Settings.vue';
 
 Vue.use(Router);
 
 export default new Router({
     routes: [
+        {
+            path: '/about',
+            name: 'About',
+            component: About,
+        },
         {
             path: '/',
             name: 'Map',
             component: Map,
         },
         {
-            path: '/about',
+            path: '/settings',
-            name: 'About',
+            name: 'Settings',
-            component: About,
+            component: Settings,
         },
     ],
 });

src/tools/index.js

@@ -30,3 +30,27 @@ export function mockLocation() {
         },
     };
 }
+
+export function storageAvailable(type) {
+    let storage;
+    try {
+        storage = window[type];
+        const x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    } catch (e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}

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" :accuracy="accuracy" :markers="reportsMarkers"></Map>
+                <Map :lat="lat" :lng="lng" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onLongPress="showReportDialog"></Map>
                 <v-btn
                     fixed
                     dark
@@ -11,11 +11,11 @@
                     right
                     color="orange"
                     class="overlayButton"
-                    @click.native.stop="dialog = !dialog"
+                    @click.native.stop="() => showReportDialog()"
                     >
                     <v-icon>report_problem</v-icon>
                 </v-btn>
-                <ReportDialog v-model="dialog" :lat="lat" :lng="lng"></ReportDialog>
+                <ReportDialog v-model="dialog" :lat="reportLat" :lng="reportLng"></ReportDialog>
             </v-flex>
             <v-flex xs12 fill-height v-else class="pa-3">
                 <template v-if="error">
@@ -49,10 +49,12 @@ export default {
         this.initializePositionWatching();
         this.setNoSleep();
         this.$store.dispatch('fetchReports');
+        window.addEventListener('keydown', this.hideReportDialogOnEsc);
     },
     beforeDestroy() {
         this.disableNoSleep();
         this.disablePositionWatching();
+        window.removeEventListener('keydown', this.hideReportDialogOnEsc);
     },
     computed: {
         reportsMarkers() {
@@ -72,6 +74,8 @@ export default {
             lat: null,
             lng: null,
             noSleep: null,
+            reportLat: null,
+            reportLng: null,
             watchID: null,
         };
     },
@@ -137,6 +141,27 @@ export default {
                 this.noSleep.disable();
             }
         },
+        showReportDialog(latlng) {
+            if (latlng) {
+                this.reportLat = latlng.lat;
+                this.reportLng = latlng.lng;
+            } else {
+                this.reportLat = this.lat;
+                this.reportLng = this.lng;
+            }
+            this.dialog = !this.dialog;
+        },
+        hideReportDialogOnEsc(event) {
+            let isEscape = false;
+            if ('key' in event) {
+                isEscape = (event.key === 'Escape' || event.key === 'Esc');
+            } else {
+                isEscape = (event.keyCode === 27);
+            }
+            if (isEscape) {
+                this.dialog = false;
+            }
+        },
     },
 };
 </script>

src/views/Settings.vue

@@ -0,0 +1,43 @@
+<template>
+    <v-container fluid class="no-padding">
+        <v-layout row wrap>
+            <v-flex xs12 class="text-xs-center">
+                <h2>{{ $t('menu.Settings') }}</h2>
+                <form>
+                    <v-select
+                        :items="i18nItems"
+                        v-model="i18nSelect"
+                        :label="$t('settings.locale')"
+                        required
+                        ></v-select>
+
+                        <v-btn @click="submit">{{ $t('settings.save') }}</v-btn>
+                </form>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+import Vue from 'vue';
+
+import { messages } from '@/i18n';
+import { storageAvailable } from '@/tools';
+
+export default {
+    data() {
+        return {
+            i18nItems: Object.keys(messages),
+            i18nSelect: this.$i18n.locale,
+        };
+    },
+    methods: {
+        submit() {
+            if (storageAvailable('localStorage')) {
+                localStorage.setItem('i18nSetting', this.i18nSelect);
+            }
+            this.$i18n.locale = this.i18nSelect;
+        },
+    },
+};
+</script>