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,54 +1,81 @@
<template>
<v-sheet
elevation="4"
width="93vw"
rounded="lg"
class="mt-3"
style="border-left: .5rem outset #0FA4AF"
elevation="4"
width="96vw"
rounded="lg"
class="mt-3"
style="border-left: 0.5rem outset #0fa4af"
>
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title>
<div class="mr-3">
{{ props.licenseName }}
</div>
<div class="mr-3">
{{ props.licenseName }}
</div>
<div
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"
>
<KeyRound class="mr-1" />
{{ props.licenseKey }}
</div>
<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">
Verfügbar
</span>
<span v-else>
{{ props.startDate }}
</span>
</div>
<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
"
>
Verfügbar
</span>
<span v-else>
{{ props.startDate }}
</span>
</div>
<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">
Ewig Verfügbar
</span>
<span v-else>
{{ props.endDate }}
</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" />
<span v-if="props.amount == null || props.amount == undefined">
<Infinity />
</span>
<span v-else>
{{ props.amount }}
</span>
</div>
<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
"
>
Ewig Verfügbar
</span>
<span v-else>
{{ props.endDate }}
</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"
/>
<span v-if="props.amount == null || props.amount == undefined">
<Infinity />
</span>
<span v-else>
{{ props.amount }}
</span>
</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
Notes: {{ props.notes }}
@ -56,27 +83,24 @@
</v-expansion-panel>
</v-expansion-panels>
</v-sheet>
</template>
<script setup lang="ts">
import { Infinity, KeyRound, CalendarCheck, CalendarX } from 'lucide-vue-next';
const props = defineProps({
licenseName: String,
licenseKey: String,
startDate: String,
endDate: String,
amount: Number,
notes: String,
})
import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
const props = defineProps({
licenseName: String,
licenseKey: String,
startDate: String,
endDate: String,
amount: Number,
notes: String,
});
</script>
<style scoped>
.values {
display: flex;
align-items: center;
}
.values {
display: flex;
align-items: center;
}
</style>