Flaschengeist
/
flaschengeist-users
7
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

[cleanup] prettier and better session view

This commit is contained in:
Tim Gröger 2021-11-26 23:23:10 +01:00
parent c9e8e9cddb
commit 4fa7be51c7
2 changed files with 73 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/NewUser.vue
View File

@ -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",
message: "Neuer User wurde angelegt.",
color: 'positive',
message: 'Neuer User wurde angelegt.',
timeout: 5000,
group: false,
actions: [{ icon: 'mdi-close', color: 'white' }],
textColor: "white"
})
user.value = emptyUser
textColor: 'white',
});
user.value = emptyUser;
} catch {
Notify.create({
color: "negative",
message: "Neuer User konnte nicht angelegt werden.",
color: 'negative',
message: 'Neuer User konnte nicht angelegt werden.',
timeout: 10000,
group: false,
actions: [{ icon: 'mdi-close', color: 'white' }],
textColor: "white"
})
textColor: 'white',
});
}
}
return { user, setUser };

76
src/components/settings/Session.vue
View File

@ -5,21 +5,24 @@
</q-card-section>
<q-card-section>
<div class="row">
<div class="col-xs-12 col-sm-6">
Browser:
<q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
{{ modelValue.browser }}
<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="col-xs-12 col-sm-6">
Plattform:
<q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
{{ modelValue.platform }}
<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:
{{ 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);
},
};
},
});