86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<v-sheet
|
|
elevation="4"
|
|
width="93vw"
|
|
rounded="lg"
|
|
class="mt-3"
|
|
>
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<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">
|
|
<Check class="mr-1"/>
|
|
<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">
|
|
<Skull class="mr-1"/>
|
|
<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">
|
|
<span style="display: flex;" >
|
|
<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>
|
|
</span>
|
|
</div>
|
|
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
Notes: {{ props.notes }}
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-sheet>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { KeyRound } from 'lucide-vue-next';
|
|
import { Check } from 'lucide-vue-next';
|
|
import { Skull } from 'lucide-vue-next';
|
|
import { Infinity } 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;
|
|
}
|
|
|
|
</style>
|