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"; import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
function handlelogout() { function handlelogout() {
console.log("logout");
store.setToken(null); store.setToken(null);
} }

View file

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