web: remove console log and prettier ListViewElement
This commit is contained in:
parent
addc7450a6
commit
ef8b1471e8
2 changed files with 81 additions and 58 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue