chore: add eslint and fix lint errors

This commit is contained in:
2020-01-25 14:59:14 +01:00
parent e6c87e2f46
commit ef2015f012
36 changed files with 1645 additions and 917 deletions
@@ -16,10 +16,9 @@ export default {
default: f => f
}
}
};
}
</script>
<style lang="scss" scoped>
.image {
height: 100%;
@@ -32,7 +31,7 @@ export default {
transition: opacity 300ms ease;
will-change: opacity;
&[lazy="loaded"] {
&[lazy='loaded'] {
opacity: 1;
}
}
+7 -8
View File
@@ -1,12 +1,12 @@
<template>
<div :class="{ 'is-shown': show, 'is-contained': contained }" class="cover">
<ul class="loader">
<li/>
<li/>
<li/>
<li/>
<li/>
<li/>
<li />
<li />
<li />
<li />
<li />
<li />
</ul>
</div>
</template>
@@ -25,7 +25,7 @@ export default {
default: false
}
}
};
}
</script>
<style lang="scss" scoped>
@@ -94,4 +94,3 @@ export default {
}
}
</style>
+3 -5
View File
@@ -6,7 +6,7 @@
</div>
<h3>{{ message }}</h3>
<p>{{ description }}</p>
<slot name="extras"/>
<slot name="extras" />
</div>
</div>
</template>
@@ -21,13 +21,12 @@ export default {
description: {
type: String,
required: false,
default: ""
default: ''
}
}
};
}
</script>
<style lang="scss" scoped>
.message-container {
margin: 10vh auto;
@@ -52,4 +51,3 @@ export default {
}
}
</style>
+93 -35
View File
@@ -1,29 +1,87 @@
<template>
<v-card xs12>
<v-card-title primary-title>
<h3 class="headline mb-0"><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('band', event.band.name)" medium title="Dölj">mdi-eye-off</v-icon>{{event.band.name}}</h3>
<h3 class="headline mb-0">
<v-icon
class="ml-1 mr-1"
v-if="hasUser"
v-on:click="toggleIgnore('band', event.band.name)"
medium
title="Dölj"
>mdi-eye-off</v-icon
>{{ event.band.name }}
</h3>
</v-card-title>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6><strong class="mr-1" v-text="$t('events.date')" />{{event.date}} ({{ weekday }} {{ daysUntil }})</v-flex>
<v-flex xs12 sm6 v-if="event.time"><strong class="mr-1" v-text="$t('events.time')" />{{event.time}}</v-flex>
<v-flex xs12 sm6
><strong class="mr-1" v-text="$t('events.date')" />{{
event.date
}}
({{ weekday }} {{ daysUntil }})</v-flex
>
<v-flex xs12 sm6 v-if="event.time"
><strong class="mr-1" v-text="$t('events.time')" />{{
event.time
}}</v-flex
>
</v-layout>
<v-layout row wrap>
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.hall')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.city')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.state')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
<v-flex xs12 sm6 md3
><strong class="mr-1" v-text="$t('events.hall')" /><v-icon
class="ml-1 mr-1"
v-if="hasUser"
v-on:click="toggleIgnore('danceHall', event.danceHall.name)"
small
:title="$t('events.hide')"
>mdi-eye-off</v-icon
>{{ event.danceHall.name }}</v-flex
>
<v-flex xs12 sm6 md3
><strong class="mr-1" v-text="$t('events.city')" /><v-icon
class="ml-1 mr-1"
v-if="hasUser"
v-on:click="toggleIgnore('city', event.danceHall.city)"
small
:title="$t('events.hide')"
>mdi-eye-off</v-icon
>{{ event.danceHall.city }}</v-flex
>
<v-flex xs12 sm6 md3
><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon
class="ml-1 mr-1"
v-if="hasUser"
v-on:click="
toggleIgnore('municipality', event.danceHall.municipality)
"
small
:title="$t('events.hide')"
>mdi-eye-off</v-icon
>{{ event.danceHall.municipality }}</v-flex
>
<v-flex xs12 sm6 md3
><strong class="mr-1" v-text="$t('events.state')" /><v-icon
class="ml-1 mr-1"
v-if="hasUser"
v-on:click="toggleIgnore('state', event.danceHall.state)"
small
:title="$t('events.hide')"
>mdi-eye-off</v-icon
>{{ event.danceHall.state }}</v-flex
>
</v-layout>
<v-layout row wrap v-for="distance in event.distances" :key="event.origin">
<v-layout row wrap v-for="distance in event.distances" :key="distance">
<v-flex xs12 sm6>
<v-icon>mdi-home</v-icon>
<span><strong>{{distance.origin}}</strong></span>
<span
><strong>{{ distance.origin }}</strong></span
>
</v-flex>
<v-flex xs12 sm6>
<v-icon>mdi-car</v-icon>
<span>{{distance.distance / 1000 | numeral('0,0.00')}} km</span>
<span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
<v-icon>mdi-clock-outline</v-icon>
<span>{{distance.duration}}</span>
<span>{{ distance.duration }}</span>
</v-flex>
</v-layout>
</v-container>
@@ -31,31 +89,31 @@
</template>
<script>
import dayjs from 'dayjs'
import dayjs from 'dayjs'
export default {
props: {
event: {
type: Object,
required: true
},
hasUser: {
type: Boolean,
required: true
},
toggleIgnore: {
type: Function,
required: true
}
export default {
props: {
event: {
type: Object,
required: true
},
setup(props) {
const time = (props.event.time || '').split('-')[0].replace('.', ':')
const weekday = dayjs(props.event.date).format('dddd')
const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
return {
weekday,
daysUntil
}
hasUser: {
type: Boolean,
required: true
},
};
toggleIgnore: {
type: Function,
required: true
}
},
setup(props) {
const time = (props.event.time || '').split('-')[0].replace('.', ':')
const weekday = dayjs(props.event.date).format('dddd')
const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
return {
weekday,
daysUntil
}
}
}
</script>
+11 -7
View File
@@ -1,19 +1,23 @@
<template>
<div>
<v-layout row wrap v-for="event in events.events" :key="event.id" v-if="events && events.events">
<div v-if="events && events.events">
<v-layout row wrap v-for="event in events.events" :key="event.id">
<v-flex xs12>
<Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore"/>
<Event
:event="event"
:has-user="hasUser"
:toggleIgnore="toggleIgnore"
/>
</v-flex>
</v-layout>
</div>
</template>
<script>
import Event from '../Event';
import Event from '../Event'
export default {
components: {
Event,
Event
},
props: {
hasUser: {
@@ -27,7 +31,7 @@ export default {
events: {
type: Object,
required: true
},
},
}
}
}
</script>
+223 -183
View File
@@ -3,40 +3,68 @@
<v-container fluid grid-list-md class="app-fade-in" :key="range">
<v-layout row wrap v-if="!isAuthenticated">
<v-flex xs12>
<p><b v-text="$t('events.login')"/></p>
<p><b v-text="$t('events.login')" /></p>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
v-model="origin"
:label="$t('origins.origin')"
:placeholder="$t('origins.geolocation')"
v-model="origin"
:label="$t('origins.origin')"
:placeholder="$t('origins.geolocation')"
>
<v-tooltip top slot="append-outer">
<template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="fetchAddress()">mdi-crosshairs-gps</v-icon>
<v-icon v-on="on" v-on:click="fetchAddress()"
>mdi-crosshairs-gps</v-icon
>
</template>
<span v-text="$t('origins.fetchAddress')"/>
<span v-text="$t('origins.fetchAddress')" />
</v-tooltip>
<v-tooltip top slot="prepend" v-if="isAuthenticated">
<template v-slot:activator="{ on }">
<v-icon v-on="on" :disabled="!origin" v-on:click="saveOrigin(origin)">mdi-bookmark-plus-outline</v-icon>
<v-icon
v-on="on"
:disabled="!origin"
v-on:click="saveOrigin(origin)"
>mdi-bookmark-plus-outline</v-icon
>
</template>
<span v-text="$t('origins.save')"/>
<span v-text="$t('origins.save')" />
</v-tooltip>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex>
<v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory>
<v-btn text v-for="r in ranges" :key="r.value" :value="r.value" v-text="$t(`events.range.${r.value}`)"/>
<v-btn-toggle
v-if="$vuetify.breakpoint.smAndUp"
v-model="range"
mandatory
>
<v-btn
text
v-for="r in ranges"
:key="r.value"
:value="r.value"
v-text="$t(`events.range.${r.value}`)"
/>
</v-btn-toggle>
<v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" :items="ranges" item-text="name" item-value="value"/>
<v-select
outline
v-if="$vuetify.breakpoint.xsOnly"
v-model="range"
:items="ranges"
item-text="name"
item-value="value"
/>
</v-flex>
</v-layout>
<list :events="data" :has-user="isAuthenticated" :toggleIgnore="toggleIgnore" />
<list
:events="data"
:has-user="isAuthenticated"
:toggleIgnore="toggleIgnore"
/>
</v-container>
<v-snackbar
v-model="snackbar.active"
@@ -49,203 +77,215 @@
</template>
<script>
import { useAuth } from '../../../plugins/auth'
import { useRouter, useMutations } from '@u3u/vue-hooks'
import { computed, ref, watch } from '@vue/composition-api'
import useAuth from '../../../plugins/auth'
import List from './List'
import { useRouter, useMutations } from '@u3u/vue-hooks'
import { computed, ref, watch } from '@vue/composition-api'
import { useLazyQuery, useMutation } from '../../../plugins/apollo'
import {
fetchAddress,
findEvents,
saveOrigin,
toggleIgnoreBand,
toggleIgnoreCity,
toggleIgnoreDanceHall,
toggleIgnoreMunicipality,
toggleIgnoreState
} from '../../../utils/graph-client'
import { useTranslation } from '../../../plugins/i18n'
import List from './List'
import { useLazyQuery, useMutation } from '../../../plugins/apollo'
import {
fetchAddress,
findEvents,
saveOrigin,
toggleIgnoreBand,
toggleIgnoreCity,
toggleIgnoreDanceHall,
toggleIgnoreMunicipality,
toggleIgnoreState
} from '../../../utils/graph-client'
import { useTranslation } from '../../../plugins/i18n'
export default {
components: {
List
},
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation();
setTitle(t('app.links.events'))
const { loading: authLoading, isAuthenticated } = useAuth()
const { route, router } = useRouter();
const range = computed({get: () => route.value.query.range || 'ONE_WEEK', set: value => router.push(`/?range=${value}`)})
const [query, { loading, data, error, refetch }] = useLazyQuery(findEvents)
watch(() => range.value, (r, o) => {
export default {
components: {
List
},
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation()
setTitle(t('app.links.events'))
const { loading: authLoading, isAuthenticated } = useAuth()
const { route, router } = useRouter()
const range = computed({
get: () => route.value.query.range || 'ONE_WEEK',
set: value => router.push(`/?range=${value}`)
})
const [query, { data }] = useLazyQuery(findEvents)
watch(
() => range.value,
r => {
query({
variables: {
range: r,
includeOrigins: isAuthenticated.value
}
})
}, { lazy: false})
const submitting = ref(true)
const ranges = [
{ name: '1 vecka', value: 'ONE_WEEK' },
{ name: '2 veckor', value: 'TWO_WEEKS' },
{ name: '1 månad', value: 'ONE_MONTH' },
{ name: '1 kvartal', value: 'ONE_QUARTER' },
{ name: '1 år', value: 'ONE_YEAR' }
]
const snackbar = ref({ active: false, color: 'success', text: '' })
},
{ lazy: false }
)
const submitting = ref(true)
const ranges = [
{ name: '1 vecka', value: 'ONE_WEEK' },
{ name: '2 veckor', value: 'TWO_WEEKS' },
{ name: '1 månad', value: 'ONE_MONTH' },
{ name: '1 kvartal', value: 'ONE_QUARTER' },
{ name: '1 år', value: 'ONE_YEAR' }
]
const snackbar = ref({ active: false, color: 'success', text: '' })
const origin = ref('')
const fetchEvents = () => {
const origins = [...(data.value.origins || [])]
if (origin.value) {
origins.push(origin.value)
const origin = ref('')
const fetchEvents = () => {
const origins = [...(data.value.origins || [])]
if (origin.value) {
origins.push(origin.value)
}
query({
variables: {
range: range.value,
origins,
includeOrigins: isAuthenticated.value || false
}
query({
variables: {
range: range.value,
origins,
includeOrigins: (isAuthenticated.value || false)
}
})
}
const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = name => {
return () => {
fetchEvents()
snackbar.value.color = 'success'
snackbar.value.text = `${name} har dolts`
snackbar.value.active = true
}
}
const toggleIgnoreFailed = name => {
return () => {
snackbar.value.color = 'error'
snackbar.value.text = `${name} kunde inte döljas`
snackbar.value.active = true
}
}
const toggleIgnore = (type, name) => {
switch (type) {
case 'band':
doToggleIgnoreBand({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'city':
doToggleIgnoreCity({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'municipality':
doToggleIgnoreMunicipality({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'state':
doToggleIgnoreState({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
default:
}
}
const [doSaveOrigin] = useMutation(saveOrigin)
const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({
variables: {
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}
}).then(() => {
origin.value = address.value.address
})
})
}
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = (name) => {
return () => {
fetchEvents();
snackbar.value.color = 'success';
snackbar.value.text = `${name} har dolts`;
snackbar.value.active = true;
}
}
const toggleIgnoreFailed = (name) => {
return () => {
snackbar.value.color = 'error';
snackbar.value.text = `${name} kunde inte döljas`;
snackbar.value.active = true;
}
}
const toggleIgnore = (type, name) => {
switch (type) {
case 'band':
doToggleIgnoreBand({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'city':
doToggleIgnoreCity({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'municipality':
doToggleIgnoreMunicipality({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'state':
doToggleIgnoreState({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
}
}
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
.then(() => {
origin.value = address.value.address;
})
})
}
}
const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
}
const saveOriginFn = o =>
doSaveOrigin({ variables: { origin: o } }).then(() => {
origin.value = ''
fetchEvents()
})
return {
authLoading,
isAuthenticated,
range,
data,
query: fetchEvents,
submitting,
ranges,
snackbar,
toggleIgnore,
origin,
fetchAddress: fetchAddressFn,
saveOrigin: saveOriginFn
}
},
};
return {
authLoading,
isAuthenticated,
range,
data,
query: fetchEvents,
submitting,
ranges,
snackbar,
toggleIgnore,
origin,
fetchAddress: fetchAddressFn,
saveOrigin: saveOriginFn
}
}
}
</script>
<style lang="scss" scoped>
.left {
padding: 1.5rem 1rem;
> * {
margin-bottom: 1.5rem;
}
hr {
border: 0;
border-top: 1px solid #eaeaea;
}
}
.left,
.right {
height: 100vh;
overflow: scroll;
overflow-x: hidden;
position: relative;
}
@media screen and(max-width: 1200px) {
.left {
padding: 1.5rem 1rem;
> * {
margin-bottom: 1.5rem;
}
hr {
border: 0;
border-top: 1px solid #eaeaea;
}
width: 40vw;
}
.left,
.right {
height: 100vh;
overflow: scroll;
overflow-x: hidden;
position: relative;
width: 60vw;
}
}
@media screen and(max-width: 1200px) {
.left {
width: 40vw;
}
.right {
width: 60vw;
}
@media screen and(max-width: 1024px) {
.left {
width: 50vw;
}
.right {
width: 50vw;
}
}
@media screen and(max-width: 1024px) {
.left {
width: 50vw;
}
.right {
width: 50vw;
}
@media screen and(min-width: 1200px) {
.left {
width: 35vw;
}
@media screen and(min-width: 1200px) {
.left {
width: 35vw;
}
.right {
width: 65vw;
}
.right {
width: 65vw;
}
}
</style>
+22 -22
View File
@@ -2,7 +2,7 @@
<v-flex xs12 sm6 md4 lg3>
<v-card>
<v-card-title>
<span v-text="$tc(title, model.length)"/>
<span v-text="$tc(title, model.length)" />
</v-card-title>
<v-list>
<v-list-item v-for="item in model" :key="item">
@@ -11,10 +11,10 @@
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-delete-outline</v-icon>
</template>
<span v-text="$t('filters.remove')"/>
<span v-text="$t('filters.remove')" />
</v-tooltip>
</v-list-item-action>
<v-list-item-title v-html="item"/>
<v-list-item-title v-html="item" />
</v-list-item>
</v-list>
</v-card>
@@ -22,24 +22,24 @@
</template>
<script>
export default {
props: {
model: {
type: Array,
required: true
},
title: {
type: String,
required: true
},
type: {
type: String,
required: true
},
toggleIgnore: {
type: Function,
required: true
}
export default {
props: {
model: {
type: Array,
required: true
},
title: {
type: String,
required: true
},
type: {
type: String,
required: true
},
toggleIgnore: {
type: Function,
required: true
}
};
}
}
</script>
+120 -92
View File
@@ -4,18 +4,45 @@
<v-layout row wrap>
<v-flex xs12>
<v-card>
<v-container
fluid
grid-list-md
>
<v-container fluid grid-list-md>
<v-layout row wrap v-if="!loading && data">
<list :model="data.bands" title="filters.band" type="band" :toggleIgnore="toggleIgnore" v-if="data.bands"/>
<list
:model="data.bands"
title="filters.band"
type="band"
:toggleIgnore="toggleIgnore"
v-if="data.bands"
/>
<v-flex xs12 sm6 md4 lg3>
<v-layout column>
<list :model="data.states" title="filters.state" type="state" :toggleIgnore="toggleIgnore" v-if="data.states"/>
<list :model="data.municipalities" title="filters.municipality" type="municipality" :toggleIgnore="toggleIgnore" v-if="data.municipalities"/>
<list :model="data.cities" title="filters.city" type="city" :toggleIgnore="toggleIgnore" v-if="data.cities"/>
<list :model="data.danceHalls" title="filters.hall" type="danceHall" :toggleIgnore="toggleIgnore" v-if="data.danceHalls"/>
<list
:model="data.states"
title="filters.state"
type="state"
:toggleIgnore="toggleIgnore"
v-if="data.states"
/>
<list
:model="data.municipalities"
title="filters.municipality"
type="municipality"
:toggleIgnore="toggleIgnore"
v-if="data.municipalities"
/>
<list
:model="data.cities"
title="filters.city"
type="city"
:toggleIgnore="toggleIgnore"
v-if="data.cities"
/>
<list
:model="data.danceHalls"
title="filters.hall"
type="danceHall"
:toggleIgnore="toggleIgnore"
v-if="data.danceHalls"
/>
</v-layout>
</v-flex>
</v-layout>
@@ -35,93 +62,94 @@
</template>
<script>
import {
fetchFilters,
toggleIgnoreBand,
toggleIgnoreCity,
toggleIgnoreDanceHall,
toggleIgnoreMunicipality,
toggleIgnoreState,
} from "~/utils/graph-client";
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import {
fetchFilters,
toggleIgnoreBand,
toggleIgnoreCity,
toggleIgnoreDanceHall,
toggleIgnoreMunicipality,
toggleIgnoreState
} from '~/utils/graph-client'
import List from "./List";
import { useMutation, useQuery } from '../../../plugins/apollo'
import { ref } from '@vue/composition-api'
import { useAuth } from '../../../plugins/auth'
import { useMutations } from '@u3u/vue-hooks'
import { useTranslation } from '../../../plugins/i18n'
import List from './List'
import { useMutation, useQuery } from '../../../plugins/apollo'
import useAuth from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n'
export default {
components: {
List
},
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation();
setTitle(t('app.links.filters'))
const { loading: authLoading, isAuthenticated } = useAuth()
const {data, loading, error, refetch} = useQuery(fetchFilters)
const snackbar = ref({ active: false, color: 'success', text: '' })
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
export default {
components: {
List
},
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation()
setTitle(t('app.links.filters'))
const { isAuthenticated } = useAuth()
const { data, loading, refetch } = useQuery(fetchFilters)
const snackbar = ref({ active: false, color: 'success', text: '' })
const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = (name) => {
return () => {
refetch.value();
snackbar.value.color = 'success';
snackbar.value.text = t('filters.success', { name });
snackbar.value.active = true;
}
}
const toggleIgnoreFailed = (name) => {
return () => {
snackbar.value.color = 'error';
snackbar.value.text = t('filters.failure', { name });
snackbar.value.active = true;
}
}
const toggleIgnore = (type, name) => {
switch (type) {
case 'band':
doToggleIgnoreBand({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'city':
doToggleIgnoreCity({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'municipality':
doToggleIgnoreMunicipality({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
case 'state':
doToggleIgnoreState({ variables: { name: name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed);
break;
}
}
return {
isAuthenticated,
loading,
data,
snackbar,
toggleIgnore
const toggleIgnoreSuccess = name => {
return () => {
refetch.value()
snackbar.value.color = 'success'
snackbar.value.text = t('filters.success', { name })
snackbar.value.active = true
}
}
const toggleIgnoreFailed = name => {
return () => {
snackbar.value.color = 'error'
snackbar.value.text = t('filters.failure', { name })
snackbar.value.active = true
}
}
const toggleIgnore = (type, name) => {
switch (type) {
case 'band':
doToggleIgnoreBand({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'city':
doToggleIgnoreCity({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'municipality':
doToggleIgnoreMunicipality({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
case 'state':
doToggleIgnoreState({ variables: { name } })
.then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed)
break
default:
}
}
return {
isAuthenticated,
loading,
data,
snackbar,
toggleIgnore
}
}
}
</script>
+77 -61
View File
@@ -4,36 +4,47 @@
<v-layout row wrap>
<v-flex xs12>
<v-text-field
v-model="origin"
:label="$t('origins.origin')"
:placeholder="$t('origins.geolocation')"
v-model="origin"
:label="$t('origins.origin')"
:placeholder="$t('origins.geolocation')"
>
<v-tooltip top slot="append-outer">
<template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="fetchAddress()">mdi-crosshairs-gps</v-icon>
<v-icon v-on="on" v-on:click="fetchAddress()"
>mdi-crosshairs-gps</v-icon
>
</template>
<span v-text="$t('origins.fetchAddress')"/>
<span v-text="$t('origins.fetchAddress')" />
</v-tooltip>
<v-tooltip top slot="prepend">
<template v-slot:activator="{ on }">
<v-icon v-on="on" :disabled="!origin" v-on:click="saveOrigin(origin)">mdi-bookmark-plus-outline</v-icon>
<v-icon
v-on="on"
:disabled="!origin"
v-on:click="saveOrigin(origin)"
>mdi-bookmark-plus-outline</v-icon
>
</template>
<span v-text="$t('origins.save')"/>
<span v-text="$t('origins.save')" />
</v-tooltip>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap v-for="origin in data.origins" :key="origin" v-if="data && data.origins">
<v-flex xs12>
<v-tooltip top slot="prepend">
<template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="removeOrigin(origin)">mdi-delete-outline</v-icon>
</template>
<span v-text="$t('origins.remove')"/>
</v-tooltip>
<span>{{origin}}</span>
</v-flex>
</v-layout>
<template v-if="data && data.origins">
<v-layout row wrap v-for="origin in data.origins" :key="origin">
<v-flex xs12>
<v-tooltip top slot="prepend">
<template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="removeOrigin(origin)"
>mdi-delete-outline
</v-icon>
</template>
<span v-text="$t('origins.remove')" />
</v-tooltip>
<span>{{ origin }}</span>
</v-flex>
</v-layout>
</template>
</v-container>
<v-snackbar
v-model="snackbar.active"
@@ -46,55 +57,60 @@
</template>
<script>
import {
findOrigins,
saveOrigin,
removeOrigin,
fetchAddress,
} from "../../../utils/graph-client";
import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
import { ref } from '@vue/composition-api'
import { useAuth } from '../../../plugins/auth'
import { useMutations } from '@u3u/vue-hooks'
import { useTranslation } from '../../../plugins/i18n'
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import {
fetchAddress,
findOrigins,
removeOrigin,
saveOrigin
} from '../../../utils/graph-client'
import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
import useAuth from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n'
export default {
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation();
setTitle(t('app.links.origins'))
const { loading: authLoading, isAuthenticated } = useAuth()
const {data, loading, error, refetch} = useQuery(findOrigins)
const snackbar = ref({ active: false, color: 'success', text: '' })
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
const [doRemoveOrigin, {loading: removingOrigin, error: errorRemoveOrigin}] = useMutation(removeOrigin)
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
const origin = ref('')
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
.then(() => {
origin.value = address.value.address;
})
export default {
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation()
setTitle(t('app.links.origins'))
const { isAuthenticated } = useAuth()
const { data, loading, refetch } = useQuery(findOrigins)
const snackbar = ref({ active: false, color: 'success', text: '' })
const [doSaveOrigin] = useMutation(saveOrigin)
const [doRemoveOrigin] = useMutation(removeOrigin)
const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
const origin = ref('')
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({
variables: {
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}
}).then(() => {
origin.value = address.value.address
})
}
})
}
const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
}
const saveOriginFn = o =>
doSaveOrigin({ variables: { origin: o } }).then(() => {
refetch.value()
origin.value = ''
})
const removeOriginFn = o => doRemoveOrigin({variables: { origin: o }}).then(() => refetch.value())
return {
isAuthenticated,
loading,
data,
snackbar,
origin,
saveOrigin: saveOriginFn,
removeOrigin: removeOriginFn,
fetchAddress: fetchAddressFn
}
const removeOriginFn = o =>
doRemoveOrigin({ variables: { origin: o } }).then(() => refetch.value())
return {
isAuthenticated,
loading,
data,
snackbar,
origin,
saveOrigin: saveOriginFn,
removeOrigin: removeOriginFn,
fetchAddress: fetchAddressFn
}
}
}
</script>