flaschengeist-frontend/src/plugins/user/pages/Settings.vue

<template>
  <div>
    <q-page
      padding
      class="fit row justify-center content-center items-center q-gutter-sm"
    >
      <div class="text-h5 row">
        Deine Sessions:
      </div>
      <div
        class="fit row justify-center content-center items-center q-gutter-sm"
      >
        <circular-progress v-if="sessionsLoading" />
        <q-card
          class="col-12"
          height=""
          v-for="(session, index) in sessions"
          :key="'session' + index"
        >
          <q-card-section
            v-if="isThisSession(session.token)"
            class="text-caption"
          >
            Diese Session.
          </q-card-section>
          <q-card-section>
            <div class="row">
              <div class="col-xs-12 col-sm-6">
                Browser:
                <q-icon :name="getBrowserIcon(session.browser)" size="24px" />
                {{ session.browser }}
              </div>
              <div class="col-xs-12 col-sm-6">
                Plattform:
                <q-icon :name="getPlatformIcon(session.platform)" size="24px" />
                {{ session.platform }}
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-6">
                Lebenszeit:
                {{ session.lifetime }}
              </div>
              <div class="col-xs-12 col-sm-6">
                Läuft aus: {{ session.expires }}
              </div>
            </div>
          </q-card-section>
          <q-card-actions align="right">
            <q-btn
              flat
              round
              dense
              icon="mdi-delete"
              @click="deleteSession(session.token)"
            />
          </q-card-actions>
        </q-card>
      </div>
      <div class="row">
        <q-btn label="show sessions" @click="showRootGetters" />
      </div>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import CircularProgress from 'components/loading/CircularProgress.vue';
export default defineComponent({
  // name: 'PageName'
  components: { CircularProgress },
  setup(_, { root }) {
    onBeforeMount(() => {
      root.$store.dispatch('sessions/getSessions');
    });

    const sessions = computed(() => root.$store.getters['sessions/sessions']);
    function showRootGetters() {
      //ctx.root.$store.dispatch('sessions/getSessions');
      console.log(sessions.value);
    }
    function getBrowserIcon(browser: string) {
      return browser == 'firefox'
        ? 'mdi-firefox'
        : browser == 'chrome'
        ? 'mdi-google-chrome'
        : browser == 'safari'
        ? 'mdi-apple-safari'
        : 'mdi-help';
    }
    function getPlatformIcon(platform: string) {
      return platform == 'linux'
        ? 'mdi-linux'
        : platform == 'windows'
        ? 'mdi-microsoft-windows'
        : platform == 'apple'
        ? 'mdi-apple'
        : 'mdi-help';
    }

    function deleteSession(token: string) {
      root.$store.dispatch('sessions/deleteSession', token);
    }
    function isThisSession(token: string) {
      return root.$store.getters['user/token'].token == token;
    }

    const sessionsLoading = computed(() => {
      return root.$store.getters['sessions/loading'];
    });

    return {
      showRootGetters,
      sessions,
      getBrowserIcon,
      getPlatformIcon,
      isThisSession,
      deleteSession,
      sessionsLoading
    };
  }
});
</script>