115 lines
3.3 KiB
Vue
Executable file
115 lines
3.3 KiB
Vue
Executable file
<template>
|
|
<form
|
|
ref="root"
|
|
class="PriceCard card"
|
|
:class="{ folded, deleting }"
|
|
@submit.prevent="() => {}"
|
|
>
|
|
<header class="padding bg-blue">
|
|
{{ card.name || 'Kein Name' }}
|
|
<PpButton
|
|
class="icon-button bg-main"
|
|
@click="folded = !folded"
|
|
>
|
|
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
|
|
</PpButton>
|
|
</header>
|
|
<aside>
|
|
<div class="input-wrapper padding bg-blue flex-col">
|
|
<div class="wrapper">
|
|
<PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
|
|
<PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
|
|
</div>
|
|
<div class="wrapper">
|
|
<PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
|
|
<PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
|
|
<PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="wrapper padding bg-white">
|
|
<div class="info flex-col">
|
|
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
|
<span class="price">{{ intl.format(ppr) }}</span>
|
|
<span class="pro">Pro 1</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
|
<span class="price">{{ intl.format(pps) }}</span>
|
|
<span class="pro">Pro 10</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
|
<span class="price">{{ intl.format(ppl) }}</span>
|
|
<span class="pro">Pro 100</span>
|
|
</div>
|
|
</main>
|
|
<footer class="padding bg-blue flex-row">
|
|
<PpButton
|
|
class="delete"
|
|
:class="{ deletable }"
|
|
@click="deleteCard"
|
|
>
|
|
<Icon name="uil:trash" mode="svg" />
|
|
Entfernen
|
|
</PpButton>
|
|
<PpButton v-if="false" class="cta white">
|
|
<Icon name="uil:qrcode-scan" mode="svg" />
|
|
Scan
|
|
</PpButton>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '../../../shared/Card'
|
|
|
|
type Props = {
|
|
deletable: boolean
|
|
card: Card
|
|
}
|
|
|
|
const { card } = defineProps<Props>()
|
|
const emit = defineEmits(['remove', 'update'])
|
|
|
|
const root = ref<HTMLElement>()
|
|
const folded = ref<boolean>(false)
|
|
const deleting = ref<boolean>(false)
|
|
|
|
const ppr = ref(card.ppr)
|
|
const pps = ref(card.pps)
|
|
const ppl = ref(card.ppl)
|
|
|
|
const intl = Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
})
|
|
|
|
const calculate = () => {
|
|
if (!card.price || !card.roles) return
|
|
ppr.value = card.price / card.roles
|
|
|
|
if (!card.sheets) {
|
|
update()
|
|
return
|
|
}
|
|
pps.value = (ppr.value / card.sheets) * 10
|
|
|
|
if(!card.layers) {
|
|
update()
|
|
return
|
|
}
|
|
ppl.value = (pps.value / card.layers) * 10
|
|
|
|
update()
|
|
}
|
|
|
|
const update = () => emit('update', { ...card, ppr: ppr.value, pps: pps.value, ppl: ppl.value })
|
|
|
|
const deleteCard = async () => {
|
|
root.value?.addEventListener('transitionend', () => emit('remove'))
|
|
deleting.value = true
|
|
}
|
|
|
|
onMounted(() => folded.value = !!card.price)
|
|
</script>
|