84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<q-card class="col-12" height="">
|
||
|
|
<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>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent } from '@vue/composition-api';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'Sessions',
|
||
|
|
props: {
|
||
|
|
session: {
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(_, { root }) {
|
||
|
|
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/session'].token == token;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
getBrowserIcon,
|
||
|
|
getPlatformIcon,
|
||
|
|
isThisSession,
|
||
|
|
deleteSession
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|