From e9b4f41b1e82045e3be801736150b8b7a1bebc0b Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Mon, 16 Jul 2018 17:26:10 +0200 Subject: [PATCH] Add an onboarding screen to get users started Fix for #17. --- src/App.vue | 2 +- src/components/About.vue | 19 +++-- src/components/ReportsDescription.vue | 34 ++++++++ src/constants.js | 8 +- src/i18n/en.js | 17 ++-- src/i18n/fr.js | 17 ++-- src/router/index.js | 8 +- src/store/mutations.js | 6 ++ src/views/Map.vue | 46 +++++------ src/views/Onboarding.vue | 113 ++++++++++++++++++++++++++ src/views/Settings.vue | 7 ++ 11 files changed, 230 insertions(+), 47 deletions(-) create mode 100644 src/components/ReportsDescription.vue create mode 100644 src/views/Onboarding.vue diff --git a/src/App.vue b/src/App.vue index 95c7519..a28d51d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ - + diff --git a/src/components/About.vue b/src/components/About.vue index 8cc1649..44184ee 100644 --- a/src/components/About.vue +++ b/src/components/About.vue @@ -8,17 +8,20 @@

{{ $t('about.usageDescription') }}

{{ $t('about.availableReportsTitle') }}

-
    -
  • {{ $t('reportLabels.accident') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.accidentDescription') }}
    • -
  • {{ $t('reportLabels.gcum') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.gcumDescription') }}
    • -
  • {{ $t('reportLabels.interrupt') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.interruptDescription') }}
    • -
  • {{ $t('reportLabels.obstacle') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.obstacleDescription') }}
    • -
  • {{ $t('reportLabels.pothole') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.potholeDescription') }}
    • -
  • {{ $t('reportLabels.misc') }}{{ $t('misc.spaceBeforeDoublePunctuations') }}: {{ $t('reportLabels.miscDescription') }}
    • -
+

+ + diff --git a/src/components/ReportsDescription.vue b/src/components/ReportsDescription.vue new file mode 100644 index 0000000..fefc1ab --- /dev/null +++ b/src/components/ReportsDescription.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/constants.js b/src/constants.js index d98493d..7e79bf1 100644 --- a/src/constants.js +++ b/src/constants.js @@ -15,6 +15,7 @@ import potholeIcon from '@/assets/pothole.svg'; export const REPORT_TYPES = { accident: { + description: 'reportLabels.accidentDescription', label: 'reportLabels.accident', image: accidentIcon, marker: L.icon({ @@ -30,6 +31,7 @@ export const REPORT_TYPES = { }, gcum: { + description: 'reportLabels.gcumDescription', label: 'reportLabels.gcum', image: gcumIcon, marker: L.icon({ @@ -45,6 +47,7 @@ export const REPORT_TYPES = { }, interrupt: { + description: 'reportLabels.interruptDescription', label: 'reportLabels.interrupt', image: interruptIcon, marker: L.icon({ @@ -59,6 +62,7 @@ export const REPORT_TYPES = { }), }, misc: { + description: 'reportLabels.miscDescription', label: 'reportLabels.misc', image: miscIcon, marker: L.icon({ @@ -73,6 +77,7 @@ export const REPORT_TYPES = { }), }, obstacle: { + description: 'reportLabels.obstacleDescription', label: 'reportLabels.obstacle', image: obstacleIcon, marker: L.icon({ @@ -87,6 +92,7 @@ export const REPORT_TYPES = { }), }, pothole: { + description: 'reportLabels.potholeDescription', label: 'reportLabels.pothole', image: potholeIcon, marker: L.icon({ @@ -119,4 +125,4 @@ export const EARTH_RADIUS = 6378137; export const DEFAULT_ZOOM = 17; export const MIN_ZOOM = 10; export const MAX_ZOOM = 18; -export const TILE_SERVER = process.env.TILE_SERVER || 'https://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'; +export const TILE_SERVER = process.env.TILE_SERVER || 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png'; diff --git a/src/i18n/en.js b/src/i18n/en.js index 20dcd5b..4f8abf2 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -2,8 +2,8 @@ export default { about: { availableReportsTitle: 'The available reports so far are:', - geolocationDescription: 'As of current version, your precise geolocation is handled within your device and never sent from it to any external service. The map background is downloaded on demand from Thunderforest and they have then access to an estimate of the displayed position.', - license: 'It is released under an MIT license (source code). Icons are based on creations from Wikimedia and Vecteezy. The map background is using tiles from OpenCycleMap, thanks to OpenStreetMap contributors and Leaflet. Collected reports are available under ODbL license.', + geolocationDescription: 'As of current version, your precise geolocation is handled within your device and never sent from it to any external service. The map background is downloaded on demand from Carto.com and they have then access to an estimate of the displayed position.', + license: 'It is released under an MIT license (source code). Icons are based on creations from Wikimedia and Vecteezy. The map background is using tiles from Carto.com, thanks to OpenStreetMap contributors and Leaflet. Collected reports are available under ODbL license.', 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 click where you want the report to be shown. Press on a marker on the map to display more informations and report the problem as being still there or solved.', @@ -18,10 +18,16 @@ export default { }, geolocation: { fetching: 'Fetching current position…', + geolocation: 'Geolocation', unavailable: 'Sorry, geolocation is not available in your browser.', }, intro: { - start: "Let's go!", + checkingPermissions: 'Checking permissions', + next: 'Next', + ready: 'Ready to start', + reportTypes: 'Report types', + startReporting: 'Start reporting!', + welcome: 'Welcome', }, menu: { About: 'Help', @@ -42,9 +48,9 @@ export default { }, reportLabels: { accident: 'Accident', - accidentDescription: 'Any accident on the road (active for one hour).', + accidentDescription: 'Any accident on the road (automatically removed after one hour).', gcum: 'GCUM', - gcumDescription: 'A car poorly parked on a bike lane. Such reports are automatically deleted after one hour, as they are by nature temporary (active for one hour).', + gcumDescription: 'A car poorly parked on a bike lane. Such reports are automatically deleted after one hour, as they are by nature temporary (automatically removed after one hour).', interrupt: 'Interruption', interruptDescription: 'An interruption of the bike lane (works, unexpected end of the bike lane, etc.).', misc: 'Other', @@ -58,5 +64,6 @@ export default { locale: 'Language', preventSuspend: 'Prevent device from going to sleep', save: 'Save', + skipOnboarding: 'Skip onboarding', }, }; diff --git a/src/i18n/fr.js b/src/i18n/fr.js index 4cd8d82..cdea85a 100644 --- a/src/i18n/fr.js +++ b/src/i18n/fr.js @@ -2,8 +2,8 @@ export default { about: { availableReportsTitle: "Les signalements disponibles pour l'instant sont :", - geolocationDescription: "Dans la version actuelle, votre position est traitée directement par votre appareil et n'est jamais envoyée à un service externe. Le fond de carte est téléchargé à la demande depuis Thunderforest et ils ont donc accès à une estimation de la position affichée.", - license: "Le code source est sous licence MIT license (code source). Les icones sont basées sur des travaux de Wikimedia et Vecteezy. Les tuiles de fond de carte proviennent de chez OpenCycleMap, grace aux contributeurs OpenStreetMap et à Leaflet. Les signalements sont disponibles sous licence ODbL.", + geolocationDescription: "Dans la version actuelle, votre position est traitée directement par votre appareil et n'est jamais envoyée à un service externe. Le fond de carte est téléchargé à la demande depuis Carto.com et ils ont donc accès à une estimation de la position affichée.", + license: "Le code source est sous licence MIT license (code source). Les icones sont basées sur des travaux de Wikimedia et Vecteezy. Les tuiles de fond de carte proviennent de chez Carto.com, grace aux contributeurs OpenStreetMap et à Leaflet. Les signalements sont disponibles sous licence ODbL.", 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 à l'emplacement souhaité sur la carte. Appuyer sur un marqueur sur la carte pour afficher plus d'informations et signaler que le problème est toujours présent ou non.", @@ -18,10 +18,16 @@ export default { }, geolocation: { fetching: 'En attente de votre position…', + geolocation: 'Géolocalisation', unavailable: "Désolé, la géolocalisation n'est pas disponible dans votre navigateur.", }, intro: { - start: "C'est parti !", + checkingPermissions: 'Vérification des permissions', + next: 'Suivant', + ready: 'Tout est prêt !', + reportTypes: 'Types de signalements', + startReporting: 'Commencer à signaler !', + welcome: 'Bienvenue !', }, menu: { About: 'Aide', @@ -42,9 +48,9 @@ export default { }, reportLabels: { accident: 'Accident', - accidentDescription: 'Un accident sur la route (actif pour une heure).', + accidentDescription: 'Un accident sur la route (automatiquement supprimé après une heure).', gcum: 'GCUM', - gcumDescription: "Une voiture (mal) garée sur la piste cyclable. Ces signalements sont automatiquement supprimés au bout d'une heure car ils sont par essence temporaires (actif pour une heure).", + gcumDescription: 'Une voiture (mal) garée sur la piste cyclable (automatiquement supprimé après une heure).', interrupt: 'Interruption', interruptDescription: "Une interruption d'itinéraire cyclable (travaux, arrêt inattendu d'une piste cyclable, etc)", misc: 'Autre', @@ -58,5 +64,6 @@ export default { locale: 'Langue', preventSuspend: "Empêcher l'appareil de passer en veille", save: 'Sauver', + skipOnboarding: "Sauter l'introduction", }, }; diff --git a/src/router/index.js b/src/router/index.js index 4c32c8b..399a5d6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import Router from 'vue-router'; import About from '@/components/About.vue'; import Map from '@/views/Map.vue'; +import Onboarding from '@/views/Onboarding.vue'; import Settings from '@/views/Settings.vue'; Vue.use(Router); @@ -14,10 +15,15 @@ export default new Router({ component: About, }, { - path: '/', + path: '/map', name: 'Map', component: Map, }, + { + path: '/', + name: 'Onboarding', + component: Onboarding, + }, { path: '/settings', name: 'Settings', diff --git a/src/store/mutations.js b/src/store/mutations.js index 93bc7a1..eb79a9b 100644 --- a/src/store/mutations.js +++ b/src/store/mutations.js @@ -8,11 +8,16 @@ import * as types from './mutations-types'; // Load settings from storage let locale = null; let preventSuspend = null; +let skipOnboarding = null; if (storageAvailable('localStorage')) { preventSuspend = localStorage.getItem('preventSuspend'); if (preventSuspend) { preventSuspend = JSON.parse(preventSuspend); } + skipOnboarding = localStorage.getItem('skipOnboarding'); + if (skipOnboarding) { + skipOnboarding = JSON.parse(skipOnboarding); + } locale = localStorage.getItem('locale'); if (!messages[locale]) { @@ -42,6 +47,7 @@ export const initialState = { settings: { locale: locale || 'en', preventSuspend: preventSuspend || true, + skipOnboarding: skipOnboarding || false, }, }; diff --git a/src/views/Map.vue b/src/views/Map.vue index cc3e00e..7caa671 100644 --- a/src/views/Map.vue +++ b/src/views/Map.vue @@ -1,13 +1,6 @@