88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
import kaartStyle from "./index.pcss";
|
|
import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx";
|
|
|
|
// Style
|
|
document.head.appendChild(render(<style>{kaartStyle}</style>));
|
|
|
|
// Kaart
|
|
@defineElement("pasta-buffet-kaart")
|
|
class PastaBuffetKaart extends CustomElement{
|
|
|
|
@prop() eigenExemplaar;
|
|
|
|
render(){
|
|
return <div className="kaart">
|
|
<div className="header">
|
|
<img src="assets/logo.svg" alt={"logo"} className="logo"/>
|
|
<div className="header-info">
|
|
<div className="title">Pastabuffet</div>
|
|
<div className="sub-title">Zondag 02/02/2020 vanaf 17u</div>
|
|
<div className="sub-title">O.C De Link, Linkhoutstraat 194</div>
|
|
</div>
|
|
</div>
|
|
<div className="content">
|
|
<h3>Bestelling</h3>
|
|
<table className="order">
|
|
<tr>
|
|
<td className="product-name">Volwassenen</td>
|
|
<td className="product-amount"><input type="text"/></td>
|
|
<td className="product-multiplier">x</td>
|
|
<td className="product-price">14,00€ =</td>
|
|
<td className="product-total"><input type="text"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td className="product-name">Kinderen</td>
|
|
<td className="product-amount"><input type="text"/></td>
|
|
<td className="product-multiplier">x</td>
|
|
<td className="product-price">8,00€ =</td>
|
|
<td className="product-total"><input type="text"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td colSpan={3}/>
|
|
<td className="total-label">Totaal =</td>
|
|
<td className="order-total"><input type="text"/></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table className="account">
|
|
<tr>
|
|
<td className="product-name">Naam</td>
|
|
<td className="product-input"><input type="text"/></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div className="payment-options">
|
|
<div className="option">
|
|
Cash betaald
|
|
<input type="checkbox"/>
|
|
</div>
|
|
<div className="option">
|
|
Overschrijving
|
|
<input type="checkbox"/>
|
|
BE50 9731 5197 8018
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer">
|
|
{this.eigenExemplaar ? ([
|
|
<div className="form-for">Eigen exemplaar</div>,
|
|
<div className="contact">Contactpersoon: Peter Aerts 0499 26 54 99</div>
|
|
]) : ([
|
|
<div className="form-for">Exemplaar voor Groen Lummen</div>
|
|
])}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// Kaarten
|
|
document.body.appendChild(render(<div className="kaarten-print">
|
|
<div className="kaarten-pair">
|
|
<PastaBuffetKaart eigenExemplaar={true}/>
|
|
<PastaBuffetKaart/>
|
|
</div>
|
|
<div className="kaarten-pair">
|
|
<PastaBuffetKaart eigenExemplaar={true}/>
|
|
<PastaBuffetKaart/>
|
|
</div>
|
|
</div>)); |