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 { 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'

  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) => {
        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, {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(() => {
        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>