You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
3.6 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<script
defer
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
></script>
<!-- Tailwind docs: https://tailwindcss.com/docs/installation/play-cdn -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: "#da373d",
},
},
},
};
</script>
</head>
<body
x-data="{
formatter: new Intl.NumberFormat('fr-FR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}),
count: 0,
taxChoice:0,
taxes: [0, 8.5, 20],
articles: [
{
id: 0,
label: 'savon',
price: 5,
order: 0,
},
{
id: 1,
label: 'brosse',
price: 10,
order: 0,
},
{
id: 2,
label: 'lessive',
price: 13,
order: 0,
}
],
taxLabel: (entry)=> {
switch (entry) {
case 0: return 'exonéré';
default: return entry+' %';
}
},
order(id){
this.articles[id].order++;
},
decrementOrder(id){
this.articles[id].order--;
},
computePrice(){
let sum=0;
console.log(this.articles);
for (item of this.articles) {
sum += item.price * item.order;
}
return this.formatter.format(sum*(1+this.taxChoice/100));
}
}"
class="p-8 bg-white dark:bg-slate-400"
>
<h1 class="text-3xl text-clifford">Articles</h1>
<div class="flex space-x-4">
<template x-for="article in articles" :key="article.id">
<div>
<span x-text="article.label"></span>
<span x-show="article.order>0" x-text=" '('+article.order+')'"></span>
<button
@click="order(article.id)"
class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
>
<i class="mr-5 fa-solid fa-cart-plus"></i>
Increment
</button>
<button
x-show="article.order>0"
@click="if (article.order>0) decrementOrder(article.id)"
class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
>
<i class="mr-5 fa-regular fa-square-minus"></i>
Decrement
</button>
</div>
</template>
</div>
<h2 class="text-2xl text-clifford">Taxes</h2>
<template x-for="item in taxes" :key="item">
<div>
<input
x-model="taxChoice"
type="radio"
name="taxChoice"
:value="item"
/>
<label x-text="taxLabel(item)"></label>
</div>
</template>
<h2 class="text-2xl text-clifford mt-4">TOTAL TTC</h2>
<span class="text-3xl" x-text="computePrice() + ' €'" />
<div x-data="{ open: false }">
<button
@click="open = ! open"
class="flex items-center rounded bg-orange-100 px-5 py-2 text-slate-500 shadow-md"
>
Voir C.G.U
</button>
<div
x-transition.duration.500ms
x-show="open"
@click.outside="open = false"
>
Les conditions de vente standard s'appliquent à la date de la commande
</div>
</div>
</body>
</html>