dancefinder/dancefinder-app
5
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Activity

chore: add eslint and fix lint errors

Browse Source
This commit is contained in:
Joakim Olsson
2020-01-25 14:59:14 +01:00
parent e6c87e2f46
commit ef2015f012
36 changed files with 1645 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+37
View File
@@ -0,0 +1,37 @@
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb-base',
"plugin:vue/recommended",
"eslint:recommended",
"prettier/vue",
"plugin:prettier/recommended",
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'vue',
],
rules: {
'import/extensions': 0,
'import/no-unresolved': 0,
'no-param-reassign': 0,
'prettier/prettier': [
'error',
{
trailingComma: 'none',
singleQuote: true,
semi: false
}
],
},
};
.prettierrc
+6
View File
@@ -0,0 +1,6 @@
{
"trailingComma": "none",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
Dockerfile
+1 -1
View File
@@ -1,4 +1,4 @@
FROM cypress/base:10 as builder FROM cypress/base:12.14.0 as builder
WORKDIR /build WORKDIR /build
components/common/app-lazy-background/index.vue
+2 -3
View File
@@ -16,10 +16,9 @@ export default {
default: f => f default: f => f
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image { .image {
height: 100%; height: 100%;
@@ -32,7 +31,7 @@ export default {
transition: opacity 300ms ease; transition: opacity 300ms ease;
will-change: opacity; will-change: opacity;
&[lazy="loaded"] { &[lazy='loaded'] {
opacity: 1; opacity: 1;
} }
} }
components/common/app-loader/index.vue
+1 -2
View File
@@ -25,7 +25,7 @@ export default {
default: false default: false
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -94,4 +94,3 @@ export default {
} }
} }
</style> </style>
components/common/app-message/index.vue
+2 -4
View File
@@ -21,13 +21,12 @@ export default {
description: { description: {
type: String, type: String,
required: false, required: false,
default: "" default: ''
}
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.message-container { .message-container {
margin: 10vh auto; margin: 10vh auto;
@@ -52,4 +51,3 @@ export default {
} }
} }
</style> </style>
components/pages/events/Event/index.vue
+70 -12
View File
@@ -1,27 +1,85 @@
<template> <template>
<v-card xs12> <v-card xs12>
<v-card-title primary-title> <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-card-title>
<v-container> <v-container>
<v-layout row wrap> <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-flex xs12 sm6 v-if="event.time"><strong class="mr-1" v-text="$t('events.time')" />{{event.time}}</v-flex> ><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>
<v-layout row wrap> <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
<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> ><strong class="mr-1" v-text="$t('events.hall')" /><v-icon
<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> class="ml-1 mr-1"
<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-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>
<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-flex xs12 sm6>
<v-icon>mdi-home</v-icon> <v-icon>mdi-home</v-icon>
<span><strong>{{distance.origin}}</strong></span> <span
><strong>{{ distance.origin }}</strong></span
>
</v-flex> </v-flex>
<v-flex xs12 sm6> <v-flex xs12 sm6>
<v-icon>mdi-car</v-icon> <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> <v-icon>mdi-clock-outline</v-icon>
<span>{{ distance.duration }}</span> <span>{{ distance.duration }}</span>
</v-flex> </v-flex>
@@ -56,6 +114,6 @@
weekday, weekday,
daysUntil daysUntil
} }
}, }
}; }
</script> </script>
components/pages/events/List/index.vue
+11 -7
View File
@@ -1,19 +1,23 @@
<template> <template>
<div> <div v-if="events && events.events">
<v-layout row wrap v-for="event in events.events" :key="event.id" v-if="events && events.events"> <v-layout row wrap v-for="event in events.events" :key="event.id">
<v-flex xs12> <v-flex xs12>
<Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore"/> <Event
:event="event"
:has-user="hasUser"
:toggleIgnore="toggleIgnore"
/>
</v-flex> </v-flex>
</v-layout> </v-layout>
</div> </div>
</template> </template>
<script> <script>
import Event from '../Event'; import Event from '../Event'
export default { export default {
components: { components: {
Event, Event
}, },
props: { props: {
hasUser: { hasUser: {
@@ -27,7 +31,7 @@ export default {
events: { events: {
type: Object, type: Object,
required: true required: true
}, }
}, }
} }
</script> </script>
components/pages/events/index.vue
+93 -53
View File
@@ -15,13 +15,20 @@
> >
<v-tooltip top slot="append-outer"> <v-tooltip top slot="append-outer">
<template v-slot:activator="{ on }"> <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> </template>
<span v-text="$t('origins.fetchAddress')" /> <span v-text="$t('origins.fetchAddress')" />
</v-tooltip> </v-tooltip>
<v-tooltip top slot="prepend" v-if="isAuthenticated"> <v-tooltip top slot="prepend" v-if="isAuthenticated">
<template v-slot:activator="{ on }"> <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> </template>
<span v-text="$t('origins.save')" /> <span v-text="$t('origins.save')" />
</v-tooltip> </v-tooltip>
@@ -30,13 +37,34 @@
</v-layout> </v-layout>
<v-layout row wrap> <v-layout row wrap>
<v-flex> <v-flex>
<v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory> <v-btn-toggle
<v-btn text v-for="r in ranges" :key="r.value" :value="r.value" v-text="$t(`events.range.${r.value}`)"/> 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-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-flex>
</v-layout> </v-layout>
<list :events="data" :has-user="isAuthenticated" :toggleIgnore="toggleIgnore" /> <list
:events="data"
:has-user="isAuthenticated"
:toggleIgnore="toggleIgnore"
/>
</v-container> </v-container>
<v-snackbar <v-snackbar
v-model="snackbar.active" v-model="snackbar.active"
@@ -49,11 +77,11 @@
</template> </template>
<script> <script>
import { useAuth } from '../../../plugins/auth'
import List from './List'
import { useRouter, useMutations } from '@u3u/vue-hooks' import { useRouter, useMutations } from '@u3u/vue-hooks'
import { computed, ref, watch } from '@vue/composition-api' import { computed, ref, watch } from '@vue/composition-api'
import useAuth from '../../../plugins/auth'
import List from './List'
import { useLazyQuery, useMutation } from '../../../plugins/apollo' import { useLazyQuery, useMutation } from '../../../plugins/apollo'
import { import {
fetchAddress, fetchAddress,
@@ -73,20 +101,27 @@
}, },
setup() { setup() {
const { setTitle } = useMutations(['setTitle']) const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation(); const { t } = useTranslation()
setTitle(t('app.links.events')) setTitle(t('app.links.events'))
const { loading: authLoading, isAuthenticated } = useAuth() const { loading: authLoading, isAuthenticated } = useAuth()
const { route, router } = useRouter(); const { route, router } = useRouter()
const range = computed({get: () => route.value.query.range || 'ONE_WEEK', set: value => router.push(`/?range=${value}`)}) const range = computed({
const [query, { loading, data, error, refetch }] = useLazyQuery(findEvents) get: () => route.value.query.range || 'ONE_WEEK',
watch(() => range.value, (r, o) => { set: value => router.push(`/?range=${value}`)
})
const [query, { data }] = useLazyQuery(findEvents)
watch(
() => range.value,
r => {
query({ query({
variables: { variables: {
range: r, range: r,
includeOrigins: isAuthenticated.value includeOrigins: isAuthenticated.value
} }
}) })
}, { lazy: false}) },
{ lazy: false }
)
const submitting = ref(true) const submitting = ref(true)
const ranges = [ const ranges = [
{ name: '1 vecka', value: 'ONE_WEEK' }, { name: '1 vecka', value: 'ONE_WEEK' },
@@ -107,77 +142,82 @@
variables: { variables: {
range: range.value, range: range.value,
origins, origins,
includeOrigins: (isAuthenticated.value || false) includeOrigins: isAuthenticated.value || false
} }
}) })
} }
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand) const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall) const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity) const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality) const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState) const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = (name) => { const toggleIgnoreSuccess = name => {
return () => { return () => {
fetchEvents(); fetchEvents()
snackbar.value.color = 'success'; snackbar.value.color = 'success'
snackbar.value.text = `${name} har dolts`; snackbar.value.text = `${name} har dolts`
snackbar.value.active = true; snackbar.value.active = true
} }
} }
const toggleIgnoreFailed = (name) => { const toggleIgnoreFailed = name => {
return () => { return () => {
snackbar.value.color = 'error'; snackbar.value.color = 'error'
snackbar.value.text = `${name} kunde inte döljas`; snackbar.value.text = `${name} kunde inte döljas`
snackbar.value.active = true; snackbar.value.active = true
} }
} }
const toggleIgnore = (type, name) => { const toggleIgnore = (type, name) => {
switch (type) { switch (type) {
case 'band': case 'band':
doToggleIgnoreBand({ variables: { name: name } }) doToggleIgnoreBand({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'danceHall': case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name: name } }) doToggleIgnoreDanceHall({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'city': case 'city':
doToggleIgnoreCity({ variables: { name: name } }) doToggleIgnoreCity({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'municipality': case 'municipality':
doToggleIgnoreMunicipality({ variables: { name: name } }) doToggleIgnoreMunicipality({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'state': case 'state':
doToggleIgnoreState({ variables: { name: name } }) doToggleIgnoreState({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
default:
} }
} }
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin) const [doSaveOrigin] = useMutation(saveOrigin)
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress) const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
const fetchAddressFn = () => { const fetchAddressFn = () => {
if (window.navigator) { if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => { window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}}) doFetchAddress({
.then(() => { variables: {
origin.value = address.value.address; 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 = '' origin.value = ''
fetchEvents() fetchEvents()
}) })
@@ -196,8 +236,8 @@
fetchAddress: fetchAddressFn, fetchAddress: fetchAddressFn,
saveOrigin: saveOriginFn saveOrigin: saveOriginFn
} }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
components/pages/filters/List/index.vue
+1 -1
View File
@@ -41,5 +41,5 @@
required: true required: true
} }
} }
}; }
</script> </script>
components/pages/filters/index.vue
+75 -47
View File
@@ -4,18 +4,45 @@
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12> <v-flex xs12>
<v-card> <v-card>
<v-container <v-container fluid grid-list-md>
fluid
grid-list-md
>
<v-layout row wrap v-if="!loading && data"> <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-flex xs12 sm6 md4 lg3>
<v-layout column> <v-layout column>
<list :model="data.states" title="filters.state" type="state" :toggleIgnore="toggleIgnore" v-if="data.states"/> <list
<list :model="data.municipalities" title="filters.municipality" type="municipality" :toggleIgnore="toggleIgnore" v-if="data.municipalities"/> :model="data.states"
<list :model="data.cities" title="filters.city" type="city" :toggleIgnore="toggleIgnore" v-if="data.cities"/> title="filters.state"
<list :model="data.danceHalls" title="filters.hall" type="danceHall" :toggleIgnore="toggleIgnore" v-if="data.danceHalls"/> 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-layout>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -35,20 +62,20 @@
</template> </template>
<script> <script>
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import { import {
fetchFilters, fetchFilters,
toggleIgnoreBand, toggleIgnoreBand,
toggleIgnoreCity, toggleIgnoreCity,
toggleIgnoreDanceHall, toggleIgnoreDanceHall,
toggleIgnoreMunicipality, toggleIgnoreMunicipality,
toggleIgnoreState, toggleIgnoreState
} from "~/utils/graph-client"; } from '~/utils/graph-client'
import List from "./List"; import List from './List'
import { useMutation, useQuery } from '../../../plugins/apollo' import { useMutation, useQuery } from '../../../plugins/apollo'
import { ref } from '@vue/composition-api' import useAuth from '../../../plugins/auth'
import { useAuth } from '../../../plugins/auth'
import { useMutations } from '@u3u/vue-hooks'
import { useTranslation } from '../../../plugins/i18n' import { useTranslation } from '../../../plugins/i18n'
export default { export default {
@@ -57,61 +84,62 @@
}, },
setup() { setup() {
const { setTitle } = useMutations(['setTitle']) const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation(); const { t } = useTranslation()
setTitle(t('app.links.filters')) setTitle(t('app.links.filters'))
const { loading: authLoading, isAuthenticated } = useAuth() const { isAuthenticated } = useAuth()
const {data, loading, error, refetch} = useQuery(fetchFilters) const { data, loading, refetch } = useQuery(fetchFilters)
const snackbar = ref({ active: false, color: 'success', text: '' }) const snackbar = ref({ active: false, color: 'success', text: '' })
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand) const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall) const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity) const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality) const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState) const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = (name) => { const toggleIgnoreSuccess = name => {
return () => { return () => {
refetch.value(); refetch.value()
snackbar.value.color = 'success'; snackbar.value.color = 'success'
snackbar.value.text = t('filters.success', { name }); snackbar.value.text = t('filters.success', { name })
snackbar.value.active = true; snackbar.value.active = true
} }
} }
const toggleIgnoreFailed = (name) => { const toggleIgnoreFailed = name => {
return () => { return () => {
snackbar.value.color = 'error'; snackbar.value.color = 'error'
snackbar.value.text = t('filters.failure', { name }); snackbar.value.text = t('filters.failure', { name })
snackbar.value.active = true; snackbar.value.active = true
} }
} }
const toggleIgnore = (type, name) => { const toggleIgnore = (type, name) => {
switch (type) { switch (type) {
case 'band': case 'band':
doToggleIgnoreBand({ variables: { name: name } }) doToggleIgnoreBand({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'danceHall': case 'danceHall':
doToggleIgnoreDanceHall({ variables: { name: name } }) doToggleIgnoreDanceHall({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'city': case 'city':
doToggleIgnoreCity({ variables: { name: name } }) doToggleIgnoreCity({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'municipality': case 'municipality':
doToggleIgnoreMunicipality({ variables: { name: name } }) doToggleIgnoreMunicipality({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
case 'state': case 'state':
doToggleIgnoreState({ variables: { name: name } }) doToggleIgnoreState({ variables: { name } })
.then(toggleIgnoreSuccess(name)) .then(toggleIgnoreSuccess(name))
.catch(toggleIgnoreFailed); .catch(toggleIgnoreFailed)
break; break
default:
} }
} }
components/pages/origins/index.vue
+39 -23
View File
@@ -10,30 +10,41 @@
> >
<v-tooltip top slot="append-outer"> <v-tooltip top slot="append-outer">
<template v-slot:activator="{ on }"> <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> </template>
<span v-text="$t('origins.fetchAddress')" /> <span v-text="$t('origins.fetchAddress')" />
</v-tooltip> </v-tooltip>
<v-tooltip top slot="prepend"> <v-tooltip top slot="prepend">
<template v-slot:activator="{ on }"> <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> </template>
<span v-text="$t('origins.save')" /> <span v-text="$t('origins.save')" />
</v-tooltip> </v-tooltip>
</v-text-field> </v-text-field>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap v-for="origin in data.origins" :key="origin" v-if="data && data.origins"> <template v-if="data && data.origins">
<v-layout row wrap v-for="origin in data.origins" :key="origin">
<v-flex xs12> <v-flex xs12>
<v-tooltip top slot="prepend"> <v-tooltip top slot="prepend">
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="removeOrigin(origin)">mdi-delete-outline</v-icon> <v-icon v-on="on" v-on:click="removeOrigin(origin)"
>mdi-delete-outline
</v-icon>
</template> </template>
<span v-text="$t('origins.remove')" /> <span v-text="$t('origins.remove')" />
</v-tooltip> </v-tooltip>
<span>{{ origin }}</span> <span>{{ origin }}</span>
</v-flex> </v-flex>
</v-layout> </v-layout>
</template>
</v-container> </v-container>
<v-snackbar <v-snackbar
v-model="snackbar.active" v-model="snackbar.active"
@@ -46,45 +57,50 @@
</template> </template>
<script> <script>
import {
findOrigins,
saveOrigin,
removeOrigin,
fetchAddress,
} from "../../../utils/graph-client";
import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
import { ref } from '@vue/composition-api' import { ref } from '@vue/composition-api'
import { useAuth } from '../../../plugins/auth'
import { useMutations } from '@u3u/vue-hooks' 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' import { useTranslation } from '../../../plugins/i18n'
export default { export default {
setup() { setup() {
const { setTitle } = useMutations(['setTitle']) const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation(); const { t } = useTranslation()
setTitle(t('app.links.origins')) setTitle(t('app.links.origins'))
const { loading: authLoading, isAuthenticated } = useAuth() const { isAuthenticated } = useAuth()
const {data, loading, error, refetch} = useQuery(findOrigins) const { data, loading, refetch } = useQuery(findOrigins)
const snackbar = ref({ active: false, color: 'success', text: '' }) const snackbar = ref({ active: false, color: 'success', text: '' })
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin) const [doSaveOrigin] = useMutation(saveOrigin)
const [doRemoveOrigin, {loading: removingOrigin, error: errorRemoveOrigin}] = useMutation(removeOrigin) const [doRemoveOrigin] = useMutation(removeOrigin)
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress) const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
const origin = ref('') const origin = ref('')
const fetchAddressFn = () => { const fetchAddressFn = () => {
if (window.navigator) { if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => { window.navigator.geolocation.getCurrentPosition(pos => {
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}}) doFetchAddress({
.then(() => { variables: {
origin.value = address.value.address; 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() refetch.value()
origin.value = '' origin.value = ''
}) })
const removeOriginFn = o => doRemoveOrigin({variables: { origin: o }}).then(() => refetch.value()) const removeOriginFn = o =>
doRemoveOrigin({ variables: { origin: o } }).then(() => refetch.value())
return { return {
isAuthenticated, isAuthenticated,
loading, loading,
layouts/default.vue
+25 -23
View File
@@ -1,11 +1,7 @@
<template> <template>
<v-app :key="$i18n.locale + isAuthenticated"> <v-app :key="$i18n.locale + isAuthenticated">
<themed> <themed>
<v-navigation-drawer <v-navigation-drawer v-model="nav" temporary app>
v-model="nav"
temporary
app
>
<v-list dense> <v-list dense>
<v-list-item> <v-list-item>
<v-list-item-action> <v-list-item-action>
@@ -84,7 +80,7 @@
<style lang="scss"> <style lang="scss">
// We need this line to import all global styling // We need this line to import all global styling
@import "assets/scss/global.scss"; @import 'assets/scss/global.scss';
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -98,17 +94,17 @@
</style> </style>
<script> <script>
import { useAuth } from '../plugins/auth'
import { computed, ref } from '@vue/composition-api' import { computed, ref } from '@vue/composition-api'
import Themed from './components/themed'
import { setDarkMode } from '../utils/localStorage'
import { useRouter, useState } from '@u3u/vue-hooks' import { useRouter, useState } from '@u3u/vue-hooks'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import sv from 'dayjs/locale/sv' import sv from 'dayjs/locale/sv'
import { setDarkMode } from '../utils/localStorage'
import Themed from './components/themed'
import useAuth from '../plugins/auth'
export default { export default {
components: { components: {
Themed, Themed
}, },
setup(props, context) { setup(props, context) {
const { router } = useRouter() const { router } = useRouter()
@@ -118,16 +114,22 @@ export default {
appState && appState.targetUrl appState && appState.targetUrl
? appState.targetUrl ? appState.targetUrl
: window.location.pathname : window.location.pathname
); )
} }
const { loading, isAuthenticated, user, loginWithRedirect, logout } = useAuth(onRedirectCallback) const {
loading,
isAuthenticated,
user,
loginWithRedirect,
logout
} = useAuth(onRedirectCallback)
const doLogin = () => { const doLogin = () => {
loginWithRedirect.value(); loginWithRedirect.value()
} }
const doLogout = () => { const doLogout = () => {
logout.value({ logout.value({
returnTo: window.location.origin returnTo: window.location.origin
}); })
} }
const darkMode = computed({ const darkMode = computed({
get: () => context.root.$vuetify.theme.dark, get: () => context.root.$vuetify.theme.dark,
@@ -138,16 +140,16 @@ export default {
}) })
const locale = computed({ const locale = computed({
get: () => context.root.$i18n.locale, get: () => context.root.$i18n.locale,
set: locale => { set: newLocale => {
if (locale === 'en') { if (newLocale === 'en') {
dayjs.locale(locale) dayjs.locale(newLocale)
} else if (locale === 'sv') { } else if (newLocale === 'sv') {
dayjs.locale(sv) dayjs.locale(sv)
} }
context.root.$i18n.setLocaleCookie(locale) context.root.$i18n.setLocaleCookie(newLocale)
context.root.$vuetify.lang.current = locale context.root.$vuetify.lang.current = newLocale
context.root.$i18n.locale = locale context.root.$i18n.locale = newLocale
} }
}) })
@@ -165,6 +167,6 @@ export default {
locale, locale,
nav nav
} }
}, }
}; }
</script> </script>
nuxt.config.js
+41 -15
View File
@@ -3,29 +3,58 @@ import numberFormats from './translations/numberFormats'
export default { export default {
env: { env: {
graphqlApi: process.env.GRAPHQL_API, graphqlApi: process.env.GRAPHQL_API
}, },
mode: 'spa', mode: 'spa',
head: { head: {
link: [ link: [
{rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png'}, {
{rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png'}, rel: 'apple-touch-icon',
{rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png'}, sizes: '180x180',
href: '/apple-touch-icon.png'
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon-32x32.png'
},
{
rel: 'icon',
type: 'image/png',
sizes: '16x16',
href: '/favicon-16x16.png'
},
{ rel: 'manifest', href: '/site.webmanifest' }, { rel: 'manifest', href: '/site.webmanifest' },
{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff' }, { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff' },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'}, {
{rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Material+Icons"}, rel: 'stylesheet',
{rel: "stylesheet", href: "https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css"} href:
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Material+Icons'
},
{
rel: 'stylesheet',
href:
'https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'
}
], ],
meta: [ meta: [
{name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, minimal-ui'} {
], name: 'viewport',
content:
'width=device-width, initial-scale=1, user-scalable=no, minimal-ui'
}
]
}, },
modules: [ modules: [
'nuxt-i18n', 'nuxt-i18n',
'@nuxtjs/vuetify', '@nuxtjs/vuetify',
['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }], ['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }]
], ],
i18n: { i18n: {
strategy: 'prefix_and_default', strategy: 'prefix_and_default',
@@ -55,10 +84,7 @@ export default {
vuetify: { vuetify: {
optionsPath: './vuetify.options.js' optionsPath: './vuetify.options.js'
}, },
css: [ css: ['vuetify/dist/vuetify.css', '~/assets/scss/global.scss'],
'vuetify/dist/vuetify.css',
'~/assets/scss/global.scss',
],
plugins: [ plugins: [
'~/plugins/composition', '~/plugins/composition',
'~/plugins/hooks', '~/plugins/hooks',
@@ -81,4 +107,4 @@ export default {
} }
} }
} }
}; }
package.json
+11 -3
View File
@@ -21,8 +21,6 @@
"apollo-link-http": "^1.5.15", "apollo-link-http": "^1.5.15",
"core-js": "3", "core-js": "3",
"dayjs": "^1.8.19", "dayjs": "^1.8.19",
"eslint": "^5.1.0",
"eslint-plugin-vue": "^4.5.0",
"graphql": "^14.4.2", "graphql": "^14.4.2",
"graphql-tag": "^2.10.1", "graphql-tag": "^2.10.1",
"moment": "^2.24.0", "moment": "^2.24.0",
@@ -39,7 +37,7 @@
"dev": "nuxt", "dev": "nuxt",
"build": "nuxt build", "build": "nuxt build",
"generate": "nuxt generate", "generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "lint": "eslint --quiet --fix --ext .js,.vue --ignore-path .gitignore .",
"precommit": "yarn lint", "precommit": "yarn lint",
"prepush": "yarn test", "prepush": "yarn test",
"start": "node server/index.js", "start": "node server/index.js",
@@ -51,7 +49,17 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/runtime-corejs3": "^7.8.3", "@babel/runtime-corejs3": "^7.8.3",
"babel-eslint": "^10.0.3",
"cli-engine": "^4.7.6",
"cypress": "^3.1.0", "cypress": "^3.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.9.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"wait-on": "^3.2.0" "wait-on": "^3.2.0"
}, },
"snyk": true "snyk": true
pages/filters.vue
+3 -3
View File
@@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import Filters from "~/components/pages/filters"; import Filters from '../components/pages/filters'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
@@ -14,7 +14,7 @@
const { t } = useTranslation() const { t } = useTranslation()
return { return {
title: t('filters.title') title: t('filters.title')
};
} }
}; }
}
</script> </script>
pages/index.vue
+3 -3
View File
@@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import Events from "~/components/pages/events"; import Events from '../components/pages/events'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
@@ -14,7 +14,7 @@ export default {
const { t } = useTranslation() const { t } = useTranslation()
return { return {
title: t('events.title') title: t('events.title')
};
} }
}; }
}
</script> </script>
pages/origins.vue
+3 -3
View File
@@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import Origins from "~/components/pages/origins"; import Origins from '../components/pages/origins'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
@@ -14,7 +14,7 @@
const { t } = useTranslation() const { t } = useTranslation()
return { return {
title: t('origins.title') title: t('origins.title')
};
} }
}; }
}
</script> </script>
plugins/apollo.js
+42 -44
View File
@@ -1,9 +1,9 @@
import { ApolloClient } from 'apollo-client' import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http' import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'; import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context' import { setContext } from 'apollo-link-context'
import { useAuth } from './auth'
import { reactive, toRefs } from '@vue/composition-api' import { reactive, toRefs } from '@vue/composition-api'
import useAuth from './auth'
let instance = null let instance = null
@@ -13,23 +13,22 @@ const httpLink = createHttpLink({
uri: apiUrl uri: apiUrl
}) })
const getToken = async (options) => { const getToken = async options => {
const { getTokenSilently, isAuthenticated } = useAuth() const { getTokenSilently, isAuthenticated } = useAuth()
if (isAuthenticated.value) { if (isAuthenticated.value) {
return await getTokenSilently.value(options) return getTokenSilently.value(options)
} else { }
return options return options
} }
};
const authLink = setContext(async (_, { headers }) => { const authLink = setContext(async (_, { headers }) => {
const token = await getToken() const token = await getToken()
return { return {
headers: { headers: {
...headers, ...headers,
authorization: token ? `Bearer ${token}` : '', authorization: token ? `Bearer ${token}` : ''
}
} }
};
}) })
const client = new ApolloClient({ const client = new ApolloClient({
@@ -37,21 +36,27 @@ const client = new ApolloClient({
cache: new InMemoryCache(), cache: new InMemoryCache(),
defaultOptions: { defaultOptions: {
watchQuery: { watchQuery: {
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network'
}, }
}, }
}) })
instance = client instance = client
export const useMutation = (mutation, options) => { export const useMutation = (mutation, options) => {
const opts = options; const out = reactive({
const doMutate = options => new Promise((resolve, reject) => { data: {},
error: null,
loading: false
})
const doMutate = mutateOptions =>
new Promise((resolve, reject) => {
out.loading = true out.loading = true
instance.mutate({ instance
.mutate({
mutation, mutation,
...opts, ...options,
...options ...mutateOptions
}) })
.then(result => { .then(result => {
out.loading = false out.loading = false
@@ -64,57 +69,50 @@ export const useMutation = (mutation, options) => {
reject(e) reject(e)
}) })
}) })
const out = reactive({
data: {},
error: null,
loading: false,
})
return [doMutate, toRefs(out)] return [doMutate, toRefs(out)]
} }
export const useLazyQuery = (query, options) => { export const useLazyQuery = (query, options) => {
const opts = options
let watchedQuery = null let watchedQuery = null
const doQuery = options => new Promise((resolve, reject) => { const out = reactive({
data: {},
error: null,
loading: false
})
const doQuery = queryOptions =>
new Promise((resolve, reject) => {
out.loading = true out.loading = true
let effectiveOptions = { const effectiveOptions = {
query, query,
...(opts || {}), ...(options || {}),
...(options || {}) ...(queryOptions || {})
} }
watchedQuery = instance.watchQuery(effectiveOptions) watchedQuery = instance.watchQuery(effectiveOptions)
watchedQuery.subscribe(({loading, data}) => { watchedQuery.subscribe(
({ loading, data }) => {
out.loading = loading out.loading = loading
out.data = data || {} out.data = data || {}
out.error = null out.error = null
resolve(data) resolve(data)
}, error => { },
error => {
out.loading = false out.loading = false
out.error = error out.error = error
reject(error) reject(error)
}) }
})
const refetch = variables => {
const opts = {}
if (variables) (
opts.variables = variables
) )
})
out.refetch = variables => {
const opts = {}
if (variables) opts.variables = variables
doQuery(opts) doQuery(opts)
} }
const startPolling = interval => doQuery({pollInterval: interval}) out.startPolling = interval => doQuery({ pollInterval: interval })
const stopPolling = () => { out.stopPolling = () => {
if (watchedQuery) { if (watchedQuery) {
watchedQuery.stopPolling() watchedQuery.stopPolling()
} }
} }
const out = reactive({
data: {},
error: null,
loading: false,
refetch,
startPolling,
stopPolling
})
return [doQuery, toRefs(out)] return [doQuery, toRefs(out)]
} }
plugins/auth.js
+31 -35
View File
@@ -3,23 +3,23 @@ import { reactive, toRefs } from '@vue/composition-api'
/** Define a default action to perform after authentication */ /** Define a default action to perform after authentication */
const DEFAULT_REDIRECT_CALLBACK = () => const DEFAULT_REDIRECT_CALLBACK = () =>
window.history.replaceState({}, document.title, window.location.pathname); window.history.replaceState({}, document.title, window.location.pathname)
let instance; let instance
const params = (new URL(window.location)).searchParams const params = new URL(window.location).searchParams
const domain = params.get('domain') || 'unbound.eu.auth0.com' const domain = params.get('domain') || 'unbound.eu.auth0.com'
export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => { export default (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
if (instance) { if (instance) {
return toRefs(instance) return toRefs(instance)
} }
const options = { const options = {
domain: domain, domain,
client_id: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e', client_id: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e',
audience: 'http://dancefinder.unbound.se', audience: 'http://dancefinder.unbound.se',
redirect_uri: window.location.origin, redirect_uri: window.location.origin
} }
instance = reactive({ instance = reactive({
@@ -31,69 +31,66 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
error: null, error: null,
/** Authenticates the user using a popup window */ /** Authenticates the user using a popup window */
loginWithPopup: async o => { loginWithPopup: async o => {
this.popupOpen = true; this.popupOpen = true
try { try {
await instance.auth0Client.loginWithPopup(o); await instance.auth0Client.loginWithPopup(o)
} catch (e) { } catch (e) {
// eslint-disable-next-line // eslint-disable-next-line
console.error(e); console.error(e);
} finally { } finally {
instance.popupOpen = false; instance.popupOpen = false
} }
instance.user = await instance.auth0Client.getUser(); instance.user = await instance.auth0Client.getUser()
instance.isAuthenticated = true; instance.isAuthenticated = true
}, },
/** Handles the callback when logging in using a redirect */ /** Handles the callback when logging in using a redirect */
handleRedirectCallback: async () => { handleRedirectCallback: async () => {
instance.loading = true; instance.loading = true
try { try {
await instance.auth0Client.handleRedirectCallback(); await instance.auth0Client.handleRedirectCallback()
instance.user = await instance.auth0Client.getUser(); instance.user = await instance.auth0Client.getUser()
instance.isAuthenticated = true; instance.isAuthenticated = true
} catch (e) { } catch (e) {
instance.error = e; instance.error = e
} finally { } finally {
instance.loading = false; instance.loading = false
} }
}, },
/** Authenticates the user using the redirect method */ /** Authenticates the user using the redirect method */
loginWithRedirect: o => { loginWithRedirect: o => {
return instance.auth0Client.loginWithRedirect(o); return instance.auth0Client.loginWithRedirect(o)
}, },
/** Returns all the claims present in the ID token */ /** Returns all the claims present in the ID token */
getIdTokenClaims: o => { getIdTokenClaims: o => {
return instance.auth0Client.getIdTokenClaims(o); return instance.auth0Client.getIdTokenClaims(o)
}, },
/** Returns the access token. If the token is invalid or missing, a new one is retrieved */ /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
getTokenSilently: o => { getTokenSilently: o => {
return instance.auth0Client.getTokenSilently(o); return instance.auth0Client.getTokenSilently(o)
}, },
/** Gets the access token using a popup window */ /** Gets the access token using a popup window */
getTokenWithPopup: o => { getTokenWithPopup: o => {
return instance.auth0Client.getTokenWithPopup(o); return instance.auth0Client.getTokenWithPopup(o)
}, },
/** Logs the user out and removes their session on the authorization server */ /** Logs the user out and removes their session on the authorization server */
logout: o => { logout: o => {
return instance.auth0Client.logout(o); return instance.auth0Client.logout(o)
} }
}) })
const fetchUser = () => { const fetchUser = () => {
instance.auth0Client.isAuthenticated() instance.auth0Client.isAuthenticated().then(a => {
.then(a => {
instance.isAuthenticated = a instance.isAuthenticated = a
instance.auth0Client.getUser() instance.auth0Client.getUser().then(u => {
.then(u => {
instance.user = u instance.user = u
instance.loading = false; instance.loading = false
}); })
}); })
} }
// Create a new instance of the SDK client using members of the given options object // Create a new instance of the SDK client using members of the given options object
createAuth0Client(options) createAuth0Client(options).then(client => {
.then(client => {
instance.loading = true instance.loading = true
instance.auth0Client = client instance.auth0Client = client
try { try {
@@ -103,11 +100,10 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
window.location.search.includes('state=') window.location.search.includes('state=')
) { ) {
// handle the redirect and retrieve tokens // handle the redirect and retrieve tokens
instance.auth0Client.handleRedirectCallback() instance.auth0Client.handleRedirectCallback().then(appState => {
.then(appState => {
// Notify subscribers that the redirect callback has happened, passing the appState // Notify subscribers that the redirect callback has happened, passing the appState
// (useful for retrieving any pre-authentication state) // (useful for retrieving any pre-authentication state)
onRedirectCallback(appState); onRedirectCallback(appState)
// Initialize our internal authentication state // Initialize our internal authentication state
fetchUser() fetchUser()
}) })
@@ -115,7 +111,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
fetchUser() fetchUser()
} }
} catch (e) { } catch (e) {
instance.error = e; instance.error = e
} finally { } finally {
instance.loading = false instance.loading = false
} }
plugins/composition.js
+3 -3
View File
@@ -1,4 +1,4 @@
import Vue from 'vue'; import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'; import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi); Vue.use(VueCompositionApi)
plugins/hooks.js
+3 -3
View File
@@ -1,4 +1,4 @@
import Vue from 'vue'; import Vue from 'vue'
import hooks from '@u3u/vue-hooks'; import hooks from '@u3u/vue-hooks'
Vue.use(hooks); Vue.use(hooks)
plugins/vue-numeral-filter.js
+2 -2
View File
@@ -1,5 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import vueNumeralFilterInstaller from 'vue-numeral-filter'; import vueNumeralFilterInstaller from 'vue-numeral-filter'
// TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged // TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged
Vue.use(vueNumeralFilterInstaller, { locale: 'no' }); Vue.use(vueNumeralFilterInstaller, { locale: 'no' })
plugins/vuetify.js
+1 -1
View File
@@ -1,4 +1,4 @@
import Vue from 'vue' import Vue from 'vue'
import Vuetify from 'vuetify' import Vuetify from 'vuetify'
Vue.use(Vuetify); Vue.use(Vuetify)
store/index.js
+5 -5
View File
@@ -1,9 +1,9 @@
export const state = () => ({ export const state = () => ({
title: "" title: ''
}); })
export const mutations = { export const mutations = {
setTitle(state, title) { setTitle(currentState, title) {
state.title = title currentState.title = title
}
} }
};
translations/app.js
+7 -7
View File
@@ -5,9 +5,9 @@ export default {
logout: 'Log out', logout: 'Log out',
darkMode: 'Dark mode', darkMode: 'Dark mode',
links: { links: {
events: "Events", events: 'Events',
filters: "Filters", filters: 'Filters',
origins: "Origins", origins: 'Origins'
} }
}, },
sv: { sv: {
@@ -16,9 +16,9 @@ export default {
logout: 'Logga ut', logout: 'Logga ut',
darkMode: 'Mörkt läge', darkMode: 'Mörkt läge',
links: { links: {
events: "Evenemang", events: 'Evenemang',
filters: "Hantera filter", filters: 'Hantera filter',
origins: "Hantera startpunkter", origins: 'Hantera startpunkter'
}, }
} }
} }
translations/index.js
+3 -3
View File
@@ -8,12 +8,12 @@ export default {
app: app.en, app: app.en,
events: events.en, events: events.en,
filters: filters.en, filters: filters.en,
origins: origins.en, origins: origins.en
}, },
sv: { sv: {
app: app.sv, app: app.sv,
events: events.sv, events: events.sv,
filters: filters.sv, filters: filters.sv,
origins: origins.sv, origins: origins.sv
}, }
} }
translations/numberFormats.js
+6 -4
View File
@@ -1,12 +1,14 @@
export default { export default {
'en': { en: {
currency: { currency: {
style: 'currency', currency: 'USD' style: 'currency',
currency: 'USD'
} }
}, },
'sv': { sv: {
currency: { currency: {
style: 'currency', currency: 'SEK' style: 'currency',
currency: 'SEK'
} }
} }
} }
translations/vuetify.js
+2 -1
View File
@@ -9,7 +9,8 @@ export default {
dataTable: { dataTable: {
itemsPerPageText: 'Rader per sida:', itemsPerPageText: 'Rader per sida:',
ariaLabel: { ariaLabel: {
sortDescending: ': Sorterad minskande. Aktivera för att ta bort sortering.', sortDescending:
': Sorterad minskande. Aktivera för att ta bort sortering.',
sortAscending: ': Sorterad ökande. Aktivera för att sortera minskande.', sortAscending: ': Sorterad ökande. Aktivera för att sortera minskande.',
sortNone: ': Ej sorterad. Aktivera för att sortera ökande.' sortNone: ': Ej sorterad. Aktivera för att sortera ökande.'
} }
utils/graph-client/__tests__/queries.test.js
-15
View File
@@ -1,15 +0,0 @@
import {
findEvents,
} from '../index';
const verifyResponse = (response) => {
expect(response.errors).toBe(undefined);
};
const verifyError = (response) => {
expect(response.errors.length).toBeGreaterThan(0);
};
describe('GQL Queries', () => {
test('findEvents', () => findEvents().then(verifyResponse));
});
utils/graph-client/index.js
+2 -7
View File
@@ -1,9 +1,4 @@
export { export { findEvents, findOrigins, fetchAddress, fetchFilters } from './queries'
findEvents,
findOrigins,
fetchAddress,
fetchFilters,
} from './queries';
export { export {
toggleIgnoreBand, toggleIgnoreBand,
@@ -13,4 +8,4 @@ export {
toggleIgnoreState, toggleIgnoreState,
saveOrigin, saveOrigin,
removeOrigin removeOrigin
} from './mutations'; } from './mutations'
utils/graph-client/queries.js
+6 -6
View File
@@ -1,8 +1,8 @@
import gql from 'graphql-tag' import gql from 'graphql-tag'
export const findEvents = gql` export const findEvents = gql`
query events($range: Range $origins: [String!] $includeOrigins: Boolean!) { query events($range: Range, $origins: [String!], $includeOrigins: Boolean!) {
events: Events(range: $range origins: $origins) { events: Events(range: $range, origins: $origins) {
date date
time time
band { band {
@@ -23,19 +23,19 @@ export const findEvents = gql`
} }
origins: Origins @include(if: $includeOrigins) origins: Origins @include(if: $includeOrigins)
} }
`; `
export const findOrigins = gql` export const findOrigins = gql`
query origins { query origins {
origins: Origins origins: Origins
} }
`; `
export const fetchAddress = gql` export const fetchAddress = gql`
query adressFromLatLng($latlng: String!) { query adressFromLatLng($latlng: String!) {
address: AddressFromLatLng(latlng: $latlng) address: AddressFromLatLng(latlng: $latlng)
} }
`; `
export const fetchFilters = gql` export const fetchFilters = gql`
query { query {
@@ -45,4 +45,4 @@ export const fetchFilters = gql`
danceHalls: IgnoredDanceHalls danceHalls: IgnoredDanceHalls
municipalities: IgnoredMunicipalities municipalities: IgnoredMunicipalities
} }
`; `
utils/localStorage.js
+3 -3
View File
@@ -2,8 +2,8 @@ const DARK_MODE_KEY = 'dancefinder-dark-mode'
const LOCALE_KEY = 'dancefinder-locale' const LOCALE_KEY = 'dancefinder-locale'
const getDarkMode = () => localStorage.getItem(DARK_MODE_KEY) const getDarkMode = () => localStorage.getItem(DARK_MODE_KEY)
const setDarkMode = (mode) => localStorage.setItem(DARK_MODE_KEY, mode) const setDarkMode = mode => localStorage.setItem(DARK_MODE_KEY, mode)
const getLocale = () => localStorage.getItem(LOCALE_KEY) const getLocale = () => localStorage.getItem(LOCALE_KEY)
const setLocale = (locale) => localStorage.setItem(LOCALE_KEY, locale) const setLocale = locale => localStorage.setItem(LOCALE_KEY, locale)
export { getDarkMode, setDarkMode, getLocale, setLocale }; export { getDarkMode, setDarkMode, getLocale, setLocale }
yarn.lock
+731 -201
View File
File diff suppressed because it is too large Load Diff