import Vue from 'vue'; import { messages, getBrowserLocales } from '@/i18n'; import { storageAvailable } from '@/tools'; import { DEFAULT_TILE_SERVER, TILE_SERVERS, VERSION } from '@/constants'; import * as types from './mutations-types'; function loadDataFromStorage(name) { try { const value = localStorage.getItem(name); if (value) { return JSON.parse(value); } return null; } catch (e) { console.error(`Unable to load data from storage using key ${name}: ${e}.`); return null; } } function handleMigrations() { if (!storageAvailable('localStorage')) { return; } const version = loadDataFromStorage('version'); // Migration from pre-0.1 to 0.1 if (version === null) { const preventSuspend = loadDataFromStorage('preventSuspend'); if (preventSuspend !== null) { localStorage.setItem('hasPreventSuspendPermission', JSON.stringify(preventSuspend)); } localStorage.removeItem('preventSuspend'); localStorage.setItem('version', JSON.stringify(VERSION)); } } // Load unsent reports from storage let unsentReports = null; if (storageAvailable('localStorage')) { unsentReports = loadDataFromStorage('unsentReports'); } // Load settings from storage let locale = null; let hasGeolocationPermission = null; let hasPlaySoundPermission = null; let hasPreventSuspendPermission = null; let hasVibratePermission = null; let shouldAutorotateMap = null; let skipOnboarding = null; let tileServer = null; if (storageAvailable('localStorage')) { handleMigrations(); hasGeolocationPermission = loadDataFromStorage('hasGeolocationPermission'); hasPlaySoundPermission = loadDataFromStorage('hasPlaySoundPermission'); hasPreventSuspendPermission = loadDataFromStorage('hasPreventSuspendPermission'); hasVibratePermission = loadDataFromStorage('hasVibratePermission'); shouldAutorotateMap = loadDataFromStorage('shouldAutorotateMap'); skipOnboarding = loadDataFromStorage('skipOnboarding'); tileServer = loadDataFromStorage('tileServer'); if (tileServer && !TILE_SERVERS[tileServer] && !tileServer.startsWith('custom:')) { tileServer = null; } locale = loadDataFromStorage('locale'); if (!(locale in messages)) { locale = null; } if (!locale) { // 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 } } } } export const initialState = { hasGoneThroughIntro: false, hasVibratedOnce: false, isLoading: false, location: { error: null, gpx: [], watcherID: null, }, lastReportFetchingLocation: [null, null], map: { center: [null, null], zoom: null, }, reportDetails: { id: null, userAsked: null, }, reports: [], unsentReports: unsentReports || [], settings: { locale: locale || 'en', hasGeolocationPermission: ( hasGeolocationPermission !== null ? hasGeolocationPermission : true ), hasPlaySoundPermission: ( hasPlaySoundPermission !== null ? hasPlaySoundPermission : true ), hasPreventSuspendPermission: ( hasPreventSuspendPermission !== null ? hasPreventSuspendPermission : true ), hasVibratePermission: ( hasVibratePermission !== null ? hasVibratePermission : true ), shouldAutorotateMap: shouldAutorotateMap !== null ? shouldAutorotateMap : false, skipOnboarding: skipOnboarding || false, tileServer: tileServer || DEFAULT_TILE_SERVER, }, }; export const mutations = { [types.HAS_VIBRATED_ONCE](state) { state.hasVibratedOnce = true; }, [types.INTRO_WAS_SEEN](state) { state.hasGoneThroughIntro = true; }, [types.INTRO_WAS_UNSEEN](state) { state.hasGoneThroughIntro = false; }, [types.IS_DONE_LOADING](state) { state.isLoading = false; }, [types.IS_LOADING](state) { state.isLoading = true; }, [types.PUSH_REPORT](state, { report }) { const reportIndex = state.reports.findIndex(item => item.id === report.id); if (reportIndex === -1) { state.reports.push(report); } else { Vue.set(state.reports, reportIndex, report); } }, [types.PUSH_UNSENT_REPORT](state, { report }) { state.unsentReports.push(report); if (storageAvailable('localStorage')) { localStorage.setItem('unsentReports', JSON.stringify(state.unsentReports)); } }, [types.REMOVE_UNSENT_REPORT](state, { index }) { state.unsentReports.splice(index, 1); if (storageAvailable('localStorage')) { localStorage.setItem('unsentReports', JSON.stringify(state.unsentReports)); } }, [types.SET_CURRENT_MAP_CENTER](state, { center }) { Vue.set(state.map, 'center', center); }, [types.SET_CURRENT_MAP_ZOOM](state, { zoom }) { Vue.set(state.map, 'zoom', zoom); }, [types.SET_CURRENT_POSITION](state, { currentLocation }) { state.location.gpx.push(currentLocation); if ( !state.lastReportFetchingLocation || !state.lastReportFetchingLocation[0] || !state.lastReportFetchingLocation[1] ) { state.lastReportFetchingLocation = [ currentLocation.latitude, currentLocation.longitude, ]; } }, [types.SET_LAST_REPORT_FETCHING_LOCATION](state, { locationLatLng }) { state.lastReportFetchingLocation = locationLatLng; }, [types.SET_LOCATION_ERROR](state, { error }) { Vue.set(state.location, 'error', error); }, [types.SET_LOCATION_WATCHER_ID](state, { id }) { Vue.set(state.location, 'watcherID', id); }, [types.SET_SETTING](state, { setting, value }) { if (storageAvailable('localStorage')) { localStorage.setItem(setting, JSON.stringify(value)); } state.settings[setting] = value; }, [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; }, };