web: remove console log and prettier ListViewElement

This commit is contained in:
Mika 2024-07-11 10:50:44 +02:00
parent addc7450a6
commit ef8b1471e8
2 changed files with 81 additions and 58 deletions

View file

@ -199,7 +199,6 @@ import { ref } from "vue";
import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
function handlelogout() {
console.log("logout");
store.setToken(null);
}

View file

@ -1,10 +1,10 @@
<template>
<v-sheet
elevation="4"
width="93vw"
width="96vw"
rounded="lg"
class="mt-3"
style="border-left: .5rem outset #0FA4AF"
style="border-left: 0.5rem outset #0fa4af"
>
<v-expansion-panels>
<v-expansion-panel>
@ -14,14 +14,25 @@
</div>
<div
class="mr-3 d-flex align-self-center" style="align-items:center">
class="mr-3 d-flex align-self-center"
style="align-items: center"
>
<KeyRound class="mr-1" />
{{ props.licenseKey }}
</div>
<div class="mr-3 d-flex align-self-center" style="align-items:center">
<div
class="mr-3 d-flex align-self-center"
style="align-items: center"
>
<CalendarCheck />
<span v-if="props.startDate == null || props.startDate == undefined || props.startDate.length == 0">
<span
v-if="
props.startDate == null ||
props.startDate == undefined ||
props.startDate.length == 0
"
>
Verfügbar
</span>
<span v-else>
@ -29,9 +40,18 @@
</span>
</div>
<div class="mr-3 d-flex align-self-center" style="align-items:center">
<div
class="mr-3 d-flex align-self-center"
style="align-items: center"
>
<CalendarX />
<span v-if="props.endDate == null || props.endDate == undefined || props.endDate.length == 0">
<span
v-if="
props.endDate == null ||
props.endDate == undefined ||
props.endDate.length == 0
"
>
Ewig Verfügbar
</span>
<span v-else>
@ -39,8 +59,16 @@
</span>
</div>
<div class="mr-3 d-flex align-self-center" style="align-items:center">
<img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
<div
class="mr-3 d-flex align-self-center"
style="align-items: center"
>
<img
src="../assets/doublekey.svg"
alt="logo"
class="logo mr-1"
width="24"
/>
<span v-if="props.amount == null || props.amount == undefined">
<Infinity />
</span>
@ -48,7 +76,6 @@
{{ props.amount }}
</span>
</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
Notes: {{ props.notes }}
@ -56,11 +83,10 @@
</v-expansion-panel>
</v-expansion-panels>
</v-sheet>
</template>
<script setup lang="ts">
import { Infinity, KeyRound, CalendarCheck, CalendarX } from 'lucide-vue-next';
import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
const props = defineProps({
licenseName: String,
@ -69,8 +95,7 @@
endDate: String,
amount: Number,
notes: String,
})
});
</script>
<style scoped>
@ -78,5 +103,4 @@
display: flex;
align-items: center;
}
</style>