Finalizing the shirt preorder page. we'll see what i did wrong

This commit is contained in:
2026-06-07 22:08:16 -05:00
parent 74ee25d2f1
commit 2e9dd3f314
2 changed files with 69 additions and 79 deletions
+49 -41
View File
@@ -14,49 +14,57 @@ export const actions = {
amount: data.get('amount'),
estimated_price: data.get('estimated_price'),
}
console.log("appl", order, data)
// console.log("shirt", order, data)
const shirt_string = "test"
// const shirt_string = [
// shirt.name,
// shirt.city,
// shirt.contact?.name,
// ].map(v => {
// // Escape for CSV safety
// const s = String(v ?? '');
// return s.includes(',') || s.includes('"') ? `"${s.replace(/"/g, '""')}"` : s;
// }).join(', ');
const type = data.getAll('type')
const color = data.getAll('color')
const size = data.getAll('size')
console.log(shirt_string)
// transporter.sendMail({
// from: SMTP_USERNAME,
// to: "farm@sludge.link",
// subject: "Sludge Farm Shirt Preorder",
// attachments: [{
// filename: order.name + '-shirts.csv',
// content: shirt_string
// },
// {
// filename: order.name + '-shirts.json',
// content: JSON.stringify(order)
// }
// ],
// html: `
// <!doctype html>
// <html>
// <body>
// <h1>new order for ${order.name}!!</h1>
// <pre> ${JSON.stringify(order, null, 2).replace(/&/g, '&amp').replace(/</g, '&lt').replace(/>/g, '&gt')} </pre>
// </body>
// </html
// `
// }, (error, info) => {
// if (error) {
// console.error("Error sending email:", error);
// } else {
// console.log("Email sent successfully:", info.response);
// }
// })
// console.log({ type, color, size })
if (Array.isArray(type)) {
for (let index in type) {
console.log(index)
const key = `tshirt-${index}`
const value = {
type: type[index],
color: color[index],
size: size[index]
}
order = {
...order,
[key]: value
}
}
}
console.log("shirt", order)
transporter.sendMail({
from: SMTP_USERNAME,
to: "farm@sludge.link",
subject: "Sludge Farm Shirt Preorder",
attachments: [{
filename: order.name + '-shirts.json',
content: JSON.stringify(order)
}
],
html: `
<!doctype html>
<html>
<body>
<h1>new order for ${order.name}!!</h1>
<pre> ${JSON.stringify(order, null, 2).replace(/&/g, '&amp').replace(/</g, '&lt').replace(/>/g, '&gt')} </pre>
</body>
</html
`
}, (error, info) => {
if (error) {
console.error("Error sending email:", error);
} else {
console.log("Email sent successfully:", info.response);
}
})
}
}
+20 -38
View File
@@ -1,12 +1,12 @@
<script lang="ts">
const decoration = 3.5;
const decoration = 4.5;
const USD = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
});
const shirt_types = [
{ shirt_type: "6030", name: "Comfort Colors" },
{ shirt_type: "CC6030", name: "Comfort Colors" },
{ shirt_type: "PC61PT", name: "Port & Co Pocket Talls" },
{ shirt_type: "PC61P", name: "Port & Co Pocket" },
];
@@ -21,13 +21,6 @@
style_name: "Comfort Colors",
cost: 13.65,
},
{
blurb:
"DoubleOG Will shirts for humans with plentiful rotundity, or tall torso's I suppose. I get them to go over ma belly.",
href: "https://www.sanmar.com/p/5771",
style_name: "Port & Co Essential Pocket Tee Tall",
cost: 14.3,
},
{
blurb:
"OG Will shirts in regular belly size, no belly button barbed wire holes however",
@@ -35,23 +28,17 @@
style_name: "Port & Co Essential Pocket Tee",
cost: 11.3,
},
{
blurb:
"DoubleOG Will shirts for humans with plentiful rotundity, or tall torso's I suppose. I get them to go over ma belly.",
href: "https://www.sanmar.com/p/5771",
style_name: "Port & Co Essential Pocket Tee Tall",
cost: 14.3,
},
];
const default_shirt = {
type: "",
color: "Type one from the website",
size: "",
};
function add_shirt() {
shirts = shirts.concat(default_shirt);
}
function remove_shirt(index: number) {
console.log(index, shirts);
shirts.splice(index, 1);
console.log(shirts);
}
let shirts = $state([default_shirt]);
let estimated_price = $derived(shirts.length * 17);
let shirts = $state(1);
let estimated_price = $derived(shirts * 18);
</script>
<form method="POST">
@@ -86,16 +73,10 @@
</div>
<div>
<span>
{shirts.length} shirt{shirts.length > 1 ? "s" : ""} for roughly &approx;
{shirts} shirt{shirts > 1 ? "s" : ""} for roughly &approx;
{USD.format(estimated_price)}
</span>
<input
hidden
readonly
name="amount"
type="number"
bind:value={shirts.length}
/>
<input hidden readonly name="amount" type="number" bind:value={shirts} />
<input
hidden
readonly
@@ -104,10 +85,13 @@
bind:value={estimated_price}
/>
</div>
<button type="button" onclick={add_shirt}>Add Shirt</button>
<div>
<button type="button" onclick={() => shirts++}>Add</button>
<button type="button" onclick={() => shirts--}>Remove</button>
</div>
<div>
<ul>
{#each shirts as shirt, i}
{#each { length: shirts }, i}
<li>
<h4>Shirt #{i + 1}</h4>
<div>
@@ -124,7 +108,7 @@
required
type="text"
name="color"
placeholder={shirt.color}
placeholder="Type one from the website"
/>
</div>
<div>
@@ -135,9 +119,6 @@
{/each}
</select>
</div>
<button type="button" onclick={() => remove_shirt(i)}>
Remove
</button>
</li>
{/each}
</ul>
@@ -193,6 +174,7 @@
box-sizing: border-box;
background: var(--primary-8);
border-radius: var(--br);
color: var(--primary-1);
border: none;
padding: 0.25rem 0.5rem;
font-size: 1rem;