-
-
+
+
No encontramos bares cercanos
@@ -41,11 +41,50 @@
recargar
para actualizar
-
+
Próximamente podrás agregar nuevos bares que sean de tu interés
+
+
+
+
+ Ha ocurrido
un error al obtener información
+
+
+ Prueba
+ deslizar hacia abajo
+ recargar
+ para actualizar
+
+
Reintentar
+
+
+
+
+
+ Debes autorizar la geolocalización en tu dispositivo para continuar
+
+
+ No podemos detectar donde te encuentras
+
+
+ Se ha excedido el tiempo para obtener tu geolocalización
+
+
+ Ha ocurrido un error tratando de obtener tu geolocalización
+
+
+ Prueba
+ deslizar hacia abajo
+ recargar
+ para actualizar
+
+
+ Reintentar
+
+
@@ -58,21 +97,31 @@ import 'mobile-pull-to-refresh/dist/styles/ios/style.css'
import FIND_BY_PROXIMITY from '@/graphql/FindByProximity.gql'
import StoreItem from '@/components/StoreItem'
import Loading from '@/components/Loading'
+import vButton from '@/components/v-Button'
export default {
name: 'Home',
components: {
StoreItem,
- Loading
+ Loading,
+ vButton
},
mounted () {
- this.refresh()
+ this.fetchData()
+ this.pullToRefresh()
},
+ data: () => ({
+ loading: true,
+ stores: null,
+ isfetchError: null,
+ isGeoError: null
+ }),
+
apollo: {
- findByProximity: {
+ stores: {
query: FIND_BY_PROXIMITY,
variables () {
return {
@@ -81,29 +130,51 @@ export default {
googleMapsKey: process.env.VUE_APP_GOOGLE_MAPS_KEY
}
},
+ $query: {
+ fetchPolicy: 'network-only'
+ },
update ({ findByProximity }) {
- return findByProximity.map(store => {
+ this.loading = false
+ return findByProximity && findByProximity.map(store => {
const copy = Object.assign({}, store)
copy.matrix = store.matrix.find(({ mode }) => mode === 'driving')
return copy
})
- }
+ },
+ error () {
+ this.isfetchError = true
+ },
+ skip: true
}
},
methods: {
- refresh () {
+ pullToRefresh () {
const context = this
pullToRefresh({
container: document.querySelector('.Home'),
animates: ptrAnimatesIos,
async refresh () {
- context.$store.dispatch('userGeoData', { force: true })
- await context.$apollo.queries.findByProximity.refetch()
+ await context.fetchData(false)
}
})
},
+ async fetchData (loading = true, reload = false) {
+ if (reload) window.location.reload(true)
+ try {
+ await this.$store.dispatch('userGeoData', { force: true })
+ this.isGeoError = null
+ this.isfetchError = null
+ this.loading = loading
+ this.$apollo.queries.stores.skip = false
+ await this.$apollo.queries.stores.refetch()
+ } catch (error) {
+ this.loading = false
+ this.isGeoError = error.code
+ }
+ },
+
isTouchDevice () {
// https://stackoverflow.com/a/4819886/1832887
const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ')
@@ -159,36 +230,36 @@ export default {
}
}
-.Home-empty {
+.Home-error {
text-align: center;
padding-top: 4em;
max-width: 280px;
margin: 0 auto;
}
-.Home-empty h2 {
+.Home-error h2 {
text-transform: uppercase;
line-height: 1.5;
}
-.Home-empty p {
+.Home-error p {
font-size: 1.2rem;
font-family: var(--font-family-normal);
}
-.Home-empty-icon {
+.Home-error-icon {
max-width: 80px;
display: inline-block;
opacity: .4;
transform: rotate(10deg);
}
@media (--lg-viewport) {
- .Home-empty-icon {
+ .Home-error-icon {
max-width: 120px;
}
}
-.Home-empty-sep {
+.Home-error-sep {
display: inline-block;
width: 120px;
}
-.Home-empty small {
+.Home-error small {
display: inline-block;
margin-top: 1em;
text-transform: uppercase;
diff --git a/src/views/Splash.vue b/src/views/Splash.vue
index 1296d9f..a54bf1b 100755
--- a/src/views/Splash.vue
+++ b/src/views/Splash.vue
@@ -26,10 +26,18 @@