phyks
/
cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better feedback with connectivity issues when sending reports

This commit is contained in:
Lucas Verney 2018-07-04 18:20:28 +02:00
parent 35851802d0
commit 5c777138f4
9 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@ -23,6 +23,9 @@
</v-list-tile>
</v-list>
</v-menu>
<div>
<v-progress-linear v-if="isLoading" :indeterminate="true" class="progressBar"></v-progress-linear>
</div>
</v-toolbar>
<v-content>
<router-view/>
@ -32,6 +35,11 @@
<script>
export default {
computed: {
isLoading() {
return this.$store.state.isLoading;
},
},
data() {
return {
title: 'Cycl\'Assist',
@ -61,6 +69,13 @@ export default {
color: rgba(0, 0, 0, .87);
text-decoration: none;
}
.progressBar {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<style>

10
src/api/index.js
View File

@ -15,12 +15,18 @@ export function saveReport(type, lat, lng) {
})
.then(response => response.json())
.then(response => response.data)
.catch(exc => console.error(`Unable to post report: ${exc}.`));
.catch((exc) => {
console.error(`Unable to post report: ${exc}.`);
throw exc;
});
}
export function getReports() {
return fetch(`${BASE_URL}api/v1/reports`)
.then(response => response.json())
.then(response => response.data)
.catch(exc => console.error(`Unable to fetch reports: ${exc}.`));
.catch((exc) => {
console.error(`Unable to fetch reports: ${exc}.`);
throw exc;
});
}

51
src/components/ReportDialog/index.vue
View File

@ -1,13 +1,37 @@
<template>
<v-bottom-sheet v-model="isActive">
<v-card>
<v-container fluid>
<v-layout row wrap>
<ReportTile v-for="(item, type) in REPORT_TYPES" :type="type" :imageSrc="item.image" :label="$t(item.label)" :save="saveReport" :key="type"></ReportTile>
</v-layout>
</v-container>
</v-card>
</v-bottom-sheet>
<div>
<v-dialog v-model="error" max-width="290">
<v-card>
<v-card-title class="subheading">{{ $t('reportDialog.unableToSendTitle') }}</v-card-title>
<v-card-text>{{ $t('reportDialog.unableToSendDescription') }} </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red darken-1"
@click="error = false"
dark
large
>
{{ $t('misc.discard') }}
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<v-bottom-sheet v-model="isActive">
<v-card>
<v-container fluid>
<v-layout row wrap>
<ReportTile v-for="(item, type) in REPORT_TYPES" :type="type" :imageSrc="item.image" :label="$t(item.label)" :save="saveReport" :key="type"></ReportTile>
</v-layout>
</v-container>
</v-card>
</v-bottom-sheet>
</div>
</template>
<script>
@ -36,19 +60,20 @@ export default {
},
data() {
return {
error: false,
REPORT_TYPES,
};
},
methods: {
saveReport(type) {
this.isActive = !this.isActive;
return this.$store.dispatch('saveReport', {
type,
lat: this.lat,
lng: this.lng,
})
.then(() => {
this.isActive = !this.isActive;
});
}).catch(() => {
this.error = true;
});
},
},
};

6
src/i18n/en.js
View File

@ -21,8 +21,14 @@ export default {
Settings: 'Settings',
},
misc: {
discard: 'Discard',
retry: 'Retry',
spaceBeforeDoublePunctuations: '',
},
reportDialog: {
unableToSendDescription: 'There was a network issue preventing from sending the latest report.',
unableToSendTitle: 'Unable to send latest report',
},
reportLabels: {
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.',

6
src/i18n/fr.js
View File

@ -21,8 +21,14 @@ export default {
Settings: 'Préférences',
},
misc: {
discard: 'Annuler',
retry: 'Réessayer',
spaceBeforeDoublePunctuations: ' ',
},
reportDialog: {
unableToSendDescription: "Une erreur de réseau empêche l'envoi du dernier signalement.",
unableToSendTitle: "Impossible d'envoyer le dernier signalement",
},
reportLabels: {
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.",

13
src/store/actions.js
View File

@ -1,13 +1,16 @@
import * as api from '@/api';
import { PUSH_REPORT, STORE_REPORTS } from './mutations-types';
import { IS_LOADING, IS_DONE_LOADING, PUSH_REPORT, STORE_REPORTS } from './mutations-types';
export function fetchReports({ commit }) {
return api.getReports().then(
reports => commit(STORE_REPORTS, { reports }),
);
commit(IS_LOADING);
return api.getReports()
.then(reports => commit(STORE_REPORTS, { reports }))
.finally(() => commit(IS_DONE_LOADING));
}
export function saveReport({ commit }, { type, lat, lng }) {
commit(IS_LOADING);
return api.saveReport(type, lat, lng)
.then(report => commit(PUSH_REPORT, { report }));
.then(report => commit(PUSH_REPORT, { report }))
.finally(() => commit(IS_DONE_LOADING));
}

7
src/store/index.js
View File

@ -4,10 +4,17 @@ import Vuex from 'vuex';
import * as actions from './actions';
import { initialState as state, mutations } from './mutations';
const plugins = [];
if (process.NODE_ENV !== 'production') {
const createLogger = require('vuex/dist/logger');
plugins.push(createLogger());
}
Vue.use(Vuex);
export default new Vuex.Store({
actions,
state,
mutations,
plugins,
});

2
src/store/mutations-types.js
View File

@ -1,2 +1,4 @@
export const IS_LOADING = 'IS_LOADING';
export const IS_DONE_LOADING = 'IS_DONE_LOADING';
export const PUSH_REPORT = 'PUSH_REPORT';
export const STORE_REPORTS = 'STORE_REPORTS';

7
src/store/mutations.js
View File

@ -1,10 +1,17 @@
import * as types from './mutations-types';
export const initialState = {
isLoading: false,
reports: [],
};
export const mutations = {
[types.IS_LOADING](state) {
state.isLoading = true;
},
[types.IS_DONE_LOADING](state) {
state.isLoading = false;
},
[types.STORE_REPORTS](state, { reports }) {
state.reports = reports;
},