flaschengeist-users/src/components/settings/UserSession.vue

<template>
  <q-card class="col-12" height="">
    <q-card-section v-if="isThisSession(modelValue.token)" class="text-caption">
      Diese Session.
    </q-card-section>
    <q-card-section>
      <div class="row">
        <div v-if="modelValue.browser" class="row col-xs-12 col-sm-6">
          <div class="col">Browser:</div>
          <div class="col">
            <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
          </div>
        </div>
        <div class="row col-xs-12 col-sm-6">
          <div class="col">Plattform:</div>
          <div class="col">
            <q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
            <q-icon v-if="!modelValue.browser" :name="getOS(modelValue.platform)" size="24px" />
          </div>
        </div>
      </div>
      <div v-if="!isEdit" class="row">
        <div class="col-xs-12 col-sm-6">
          Lebenszeit:
          {{ computeShownLifeTime }}
        </div>
        <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(modelValue.expires) }}</div>
      </div>
      <div v-else class="row q-my-sm">
        <q-input
          v-model="computedLifetime"
          class="col-xs-12 col-sm-6 q-px-sm"
          type="number"
          label="Zeit"
          filled
        />
        <q-select v-model="option" class="col-xs-12 col-sm-6 q-px-sm" :options="options" filled />
      </div>
    </q-card-section>
    <q-card-actions v-if="!isEdit" align="right">
      <q-btn flat round dense icon="mdi-pencil" @click="edit(true)" />
      <q-btn flat round dense icon="mdi-delete" @click="deleteSession(modelValue.token)" />
    </q-card-actions>
    <q-card-actions v-else align="right">
      <q-btn flat dense label="Abbrechen" @click="edit(false)" />
      <q-btn flat dense label="Speichern" @click="save" />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType } from 'vue';
import { useMainStore, useSessionStore } from '@flaschengeist/api';
import { date } from 'quasar';

export default defineComponent({
  name: 'UserSession',
  props: {
    modelValue: {
      required: true,
      type: Object as PropType<FG.Session>,
    },
  },
  emits: {
    'update:modelValue': (s: FG.Session) => !!s,
    delete: () => true,
  },
  setup(props, { emit }) {
    const sessionStore = useSessionStore();
    const mainStore = useMainStore();

    const dateTime = (timeStamp: Date) => {
      const _date = date.formatDate(timeStamp, 'DD.MM.YYYY');
      const _time = date.formatDate(timeStamp, 'HH:mm');
      return `${_date} um ${_time}`;
    };

    const options = ref(['Minuten', 'Stunden', 'Tage']);
    const option = ref<string>(options.value[0]);
    const lifetime = ref(0);
    function getBrowserIcon(browser: string) {
      console.log('browser', browser);
      return browser == 'firefox'
        ? 'mdi-firefox'
        : browser == 'chrome'
        ? 'mdi-google-chrome'
        : browser == 'safari'
        ? 'mdi-apple-safari'
        : 'mdi-help';
    }

    function getPlatformIcon(platform: string) {
      console.log('platform', platform);
      return platform == 'linux'
        ? 'mdi-linux'
        : platform == 'windows'
        ? 'mdi-microsoft-windows'
        : platform == 'macos'
        ? 'mdi-apple'
        : platform == 'iphone'
        ? 'mdi-cellphone'
        : platform == 'android'
        ? 'mdi-cellphone'
        : 'mdi-help';
    }

    function getOS(platform: string) {
      return platform == 'iphone'
        ? 'mdi-apple'
        : platform == 'android'
        ? 'mdi-android'
        : 'mdi-help';
    }

    async function deleteSession(token: string) {
      await sessionStore.deleteSession(token);
      emit('delete');
    }
    function isThisSession(token: string) {
      return mainStore.session?.token === token;
    }

    const isEdit = ref(false);

    function _fillTime(val: string) {
      while (val.length < 2) {
        val = '0' + val;
      }
      return val;
    }

    const computeShownLifeTime = computed(() => {
      let seconds = props.modelValue.lifetime;
      let minutes;
      let hours;
      if (seconds < 60) {
        return `${_fillTime(seconds.toString())} Sekunden`;
      } else if (seconds < 60 * 60) {
        minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        return `${_fillTime(minutes.toString())}:${_fillTime(seconds.toString())} Minuten`;
      } else {
        hours = Math.floor(seconds / (60 * 60));
        minutes = Math.floor((seconds % (60 * 60)) / 60);
        seconds = minutes % 60;
        return `${_fillTime(hours.toString())}:${_fillTime(minutes.toString())}:${_fillTime(
          seconds.toString()
        )} Stunden`;
      }
    });

    const computedLifetime = computed({
      get: () => {
        switch (option.value) {
          case options.value[0]:
            return (lifetime.value / 60).toFixed(2);
          case options.value[1]:
            return (lifetime.value / (60 * 60)).toFixed(2);
          case options.value[2]:
            return (lifetime.value / (60 * 60 * 24)).toFixed(2);
        }
        throw 'Invalid option';
      },
      set: (val) => {
        if (val) {
          switch (option.value) {
            case options.value[0]:
              lifetime.value = parseFloat(val) * 60;
              break;
            case options.value[1]:
              lifetime.value = parseFloat(val) * 60 * 60;
              break;
            case options.value[2]:
              lifetime.value = parseFloat(val) * 60 * 60 * 24;
              break;
          }
        }
      },
    });

    function edit(value: boolean) {
      lifetime.value = props.modelValue.lifetime;
      isEdit.value = value;
    }

    async function save() {
      isEdit.value = false;
      await sessionStore.updateSession(lifetime.value, props.modelValue.token);
      emit(
        'update:modelValue',
        Object.assign(Object.assign({}, props.modelValue), { lifetime: lifetime.value })
      );
    }

    return {
      getBrowserIcon,
      getPlatformIcon,
      isThisSession,
      deleteSession,
      isEdit,
      dateTime,
      edit,
      options,
      option,
      lifetime,
      computeShownLifeTime,
      computedLifetime,
      save,
      getOS,
      log: () => {
        console.log(props.modelValue);
      },
    };
  },
});
</script>