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