[cleanup] prettier and better session view

src/components/NewUser.vue

@@ -27,31 +27,30 @@ export default defineComponent({
       lastname: '',
       mail: '',
       roles: [],
-    }
+    };
     const user = ref<FG.User>(emptyUser);
 
-
     async function setUser(value: FG.User) {
       try {
         await userStore.createUser(value);
         Notify.create({
-          color: "positive",
+          color: 'positive',
-          message: "Neuer User wurde angelegt.",
+          message: 'Neuer User wurde angelegt.',
           timeout: 5000,
           group: false,
           actions: [{ icon: 'mdi-close', color: 'white' }],
-          textColor: "white"
+          textColor: 'white',
-        })
+        });
-        user.value = emptyUser
+        user.value = emptyUser;
       } catch {
         Notify.create({
-          color: "negative",
+          color: 'negative',
-          message: "Neuer User konnte nicht angelegt werden.",
+          message: 'Neuer User konnte nicht angelegt werden.',
           timeout: 10000,
           group: false,
           actions: [{ icon: 'mdi-close', color: 'white' }],
-          textColor: "white"
+          textColor: 'white',
-        })
+        });
       }
     }
     return { user, setUser };

src/components/settings/Session.vue

@@ -5,21 +5,24 @@
     </q-card-section>
     <q-card-section>
       <div class="row">
-        <div class="col-xs-12 col-sm-6">
+        <div v-if="modelValue.browser" class="row col-xs-12 col-sm-6">
-          Browser:
+          <div class="col">Browser:</div>
-          <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
+          <div class="col">
-          {{ modelValue.browser }}
+            <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
+          </div>
         </div>
-        <div class="col-xs-12 col-sm-6">
+        <div class="row col-xs-12 col-sm-6">
-          Plattform:
+          <div class="col">Plattform:</div>
-          <q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
+          <div class="col">
-          {{ modelValue.platform }}
+            <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:
-          {{ modelValue.lifetime }}
+          {{ computeShownLifeTime }}
         </div>
         <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(modelValue.expires) }}</div>
       </div>
@@ -47,7 +50,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue';
-import { formatDateTime, useMainStore, useSessionStore } from '@flaschengeist/api';
+import { useMainStore, useSessionStore } from '@flaschengeist/api';
+import { date } from 'quasar';
 
 export default defineComponent({
   name: 'Session',
@@ -65,12 +69,17 @@ export default defineComponent({
     const sessionStore = useSessionStore();
     const mainStore = useMainStore();
 
-    const dateTime = (date: Date) => formatDateTime(date, true);
+    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'
@@ -81,6 +90,7 @@ export default defineComponent({
     }
 
     function getPlatformIcon(platform: string) {
+      console.log('platform', platform);
       return platform == 'linux'
         ? 'mdi-linux'
         : platform == 'windows'
@@ -88,9 +98,17 @@ export default defineComponent({
         : platform == 'macos'
         ? 'mdi-apple'
         : platform == 'iphone'
-        ? 'mdi-cellphone-iphone'
+        ? 'mdi-cellphone'
         : platform == 'android'
-        ? 'mdi-cellphone-android'
+        ? 'mdi-cellphone'
+        : 'mdi-help';
+    }
+
+    function getOS(platform: string) {
+      return platform == 'iphone'
+        ? 'mdi-apple'
+        : platform == 'android'
+        ? 'mdi-android'
         : 'mdi-help';
     }
 
@@ -104,6 +122,33 @@ export default defineComponent({
 
     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) {
@@ -158,8 +203,13 @@ export default defineComponent({
       options,
       option,
       lifetime,
+      computeShownLifeTime,
       computedLifetime,
       save,
+      getOS,
+      log: () => {
+        console.log(props.modelValue);
+      },
     };
   },
 });