dancefinder-app/components/pages/events/index.vue

<template>
  <div :key="isAuthenticated">
    <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>
        </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-tooltip top slot="append-outer">
              <template v-slot:activator="{ on }">
                <v-icon v-on="on" v-on:click="fetchAddress()"
                  >mdi-crosshairs-gps</v-icon
                >
              </template>
              <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
                >
              </template>
              <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-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"
      />
    </v-container>
    <v-snackbar
      v-model="snackbar.active"
      :color="snackbar.color"
      :timeout="5000"
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script>
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 { 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, { 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: '' })

    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
        }
      })
    }

    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 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
    }
  }
}
</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 {
    width: 40vw;
  }
  .right {
    width: 60vw;
  }
}

@media screen and(max-width: 1024px) {
  .left {
    width: 50vw;
  }
  .right {
    width: 50vw;
  }
}

@media screen and(min-width: 1200px) {
  .left {
    width: 35vw;
  }
  .right {
    width: 65vw;
  }
}
</style>