|
|
|
@ -22,6 +22,8 @@ import Positions, {
|
|
|
|
|
} from "~/components/Positions";
|
|
|
|
|
import SettingsOverlay from "~/components/Settings/Overlay";
|
|
|
|
|
import {
|
|
|
|
|
ADDRESS_LAYOUT_LEFT,
|
|
|
|
|
ADDRESS_LAYOUT_RIGHT,
|
|
|
|
|
createLocalStore,
|
|
|
|
|
createStore,
|
|
|
|
|
createUiStore,
|
|
|
|
@ -157,8 +159,15 @@ export default function Home() {
|
|
|
|
|
<Meta property="og:url" content={getHost()} />
|
|
|
|
|
<Meta name="twitter:card" content="summary_large_image" />
|
|
|
|
|
<Meta name="twitter:site" content="@katy_wings" />
|
|
|
|
|
<Show when={localState.logo}>
|
|
|
|
|
<div class="flex justify-end items-center h-20 mb-5">
|
|
|
|
|
<div
|
|
|
|
|
classList={{
|
|
|
|
|
"flex justify-start items-center print:mb-7 print:h-28": true,
|
|
|
|
|
"h-20 mb-7": !!localState.logo,
|
|
|
|
|
"justify-start": localState.addressLayout == ADDRESS_LAYOUT_RIGHT,
|
|
|
|
|
"justify-end": localState.addressLayout == ADDRESS_LAYOUT_LEFT,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Show when={localState.logo}>
|
|
|
|
|
<img
|
|
|
|
|
classList={{
|
|
|
|
|
"max-h-full max-w-[50%] w-auto": true,
|
|
|
|
@ -169,75 +178,88 @@ export default function Home() {
|
|
|
|
|
height={localState.logo?.height}
|
|
|
|
|
src={localState.logo?.url}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Show>
|
|
|
|
|
<div class="text-xs mb-2">
|
|
|
|
|
{address().name
|
|
|
|
|
? [address().name, getLine1(address()), getLine2(address())]
|
|
|
|
|
.filter((x) => x != "")
|
|
|
|
|
.join(" · ")
|
|
|
|
|
: ""}
|
|
|
|
|
</Show>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-2 gap-x-[30%] mb-10">
|
|
|
|
|
<div class="leading-snug">
|
|
|
|
|
<div>{customerAddress().name}</div>
|
|
|
|
|
<div>{getLine1(customerAddress())}</div>
|
|
|
|
|
<div>{getLine2(customerAddress())}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 text-sm">
|
|
|
|
|
<RightItem
|
|
|
|
|
class="font-bold"
|
|
|
|
|
label="Projekt Nr."
|
|
|
|
|
value={state.project.projectNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
class="font-bold"
|
|
|
|
|
label="Bestellungs Nr."
|
|
|
|
|
value={state.project.orderNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
value={getDisplayDateFromUnix(state.project.date)}
|
|
|
|
|
label="Datum"
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Lieferungs Nr."
|
|
|
|
|
value={state.project.deliveryNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Lieferdatum"
|
|
|
|
|
value={
|
|
|
|
|
state.project.deliveryDate != null &&
|
|
|
|
|
getDisplayDateFromUnix(state.project.deliveryDate)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Kunden Nr."
|
|
|
|
|
value={state.customer.customerNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem label="Ihre MwST-Nr." value={state.customer.vatNumber} />
|
|
|
|
|
<Show
|
|
|
|
|
when={
|
|
|
|
|
localState.contact.name ||
|
|
|
|
|
localState.contact.phone ||
|
|
|
|
|
localState.contact.email
|
|
|
|
|
}
|
|
|
|
|
<div class="print:min-h-[12rem] mb-10">
|
|
|
|
|
<div class="grid grid-cols-2 gap-x-[15%]">
|
|
|
|
|
<div
|
|
|
|
|
classList={{
|
|
|
|
|
"order-last": localState.addressLayout == ADDRESS_LAYOUT_RIGHT,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<hr class="col-span-2 my-2" />
|
|
|
|
|
<RightItem
|
|
|
|
|
value={localState.contact.name}
|
|
|
|
|
label="Ansprechpartner"
|
|
|
|
|
/>
|
|
|
|
|
<RightItem value={localState.contact.phone} label="Telefon" />
|
|
|
|
|
<RightItem
|
|
|
|
|
value={localState.contact.email}
|
|
|
|
|
label="E-Mail Adresse"
|
|
|
|
|
/>
|
|
|
|
|
</Show>
|
|
|
|
|
<div class="text-sm mb-3">
|
|
|
|
|
{address().name
|
|
|
|
|
? [address().name, getLine1(address()), getLine2(address())]
|
|
|
|
|
.filter((x) => x != "")
|
|
|
|
|
.join(" · ")
|
|
|
|
|
: ""}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-lg leading-snug">
|
|
|
|
|
<div>{customerAddress().name}</div>
|
|
|
|
|
<div>{getLine1(customerAddress())}</div>
|
|
|
|
|
<div>{getLine2(customerAddress())}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 text-sm">
|
|
|
|
|
<RightItem
|
|
|
|
|
class="font-bold"
|
|
|
|
|
label="Projekt Nr."
|
|
|
|
|
value={state.project.projectNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
class="font-bold"
|
|
|
|
|
label="Bestellungs Nr."
|
|
|
|
|
value={state.project.orderNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
value={getDisplayDateFromUnix(state.project.date)}
|
|
|
|
|
label="Datum"
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Lieferungs Nr."
|
|
|
|
|
value={state.project.deliveryNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Lieferdatum"
|
|
|
|
|
value={
|
|
|
|
|
state.project.deliveryDate != null &&
|
|
|
|
|
getDisplayDateFromUnix(state.project.deliveryDate)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Kunden Nr."
|
|
|
|
|
value={state.customer.customerNumber}
|
|
|
|
|
/>
|
|
|
|
|
<RightItem
|
|
|
|
|
label="Ihre MwST-Nr."
|
|
|
|
|
value={state.customer.vatNumber}
|
|
|
|
|
/>
|
|
|
|
|
<Show
|
|
|
|
|
when={
|
|
|
|
|
localState.contact.name ||
|
|
|
|
|
localState.contact.phone ||
|
|
|
|
|
localState.contact.email
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<hr class="col-span-2 my-2" />
|
|
|
|
|
<RightItem
|
|
|
|
|
value={localState.contact.name}
|
|
|
|
|
label="Ansprechpartner"
|
|
|
|
|
/>
|
|
|
|
|
<RightItem value={localState.contact.phone} label="Telefon" />
|
|
|
|
|
<RightItem
|
|
|
|
|
value={localState.contact.email}
|
|
|
|
|
label="E-Mail Adresse"
|
|
|
|
|
/>
|
|
|
|
|
</Show>
|
|
|
|
|
|
|
|
|
|
<Show when={localState.vatNumber}>
|
|
|
|
|
<div class="col-span-2 h-4"></div>
|
|
|
|
|
<RightItem label="MwST-Nr." value={localState.vatNumber} />
|
|
|
|
|
</Show>
|
|
|
|
|
<Show when={localState.vatNumber}>
|
|
|
|
|
<div class="col-span-2 h-4"></div>
|
|
|
|
|
<RightItem label="MwST-Nr." value={localState.vatNumber} />
|
|
|
|
|
</Show>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -286,7 +308,7 @@ export default function Home() {
|
|
|
|
|
<Style type="text/css">{`
|
|
|
|
|
@page {
|
|
|
|
|
size: A4 portrait;
|
|
|
|
|
margin: 11mm ${state.fullWidthInvoice ? 0 : 11}mm 11mm ${
|
|
|
|
|
margin: 25mm ${state.fullWidthInvoice ? 0 : 11}mm 11mm ${
|
|
|
|
|
state.fullWidthInvoice ? 0 : 11
|
|
|
|
|
}mm;
|
|
|
|
|
}
|
|
|
|
@ -297,7 +319,7 @@ export default function Home() {
|
|
|
|
|
|
|
|
|
|
@media print {
|
|
|
|
|
html {
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`}</Style>
|
|
|
|
|