will/sludge-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Will Stensvold
2026-06-07 22:08:16 -05:00
parent 74ee25d2f1
commit 2e9dd3f314
2 changed files with 69 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/shirts/+page.server.ts
+49 -41
View File
@@ -14,49 +14,57 @@ export const actions = {
amount: data.get('amount'), amount: data.get('amount'),
estimated_price: data.get('estimated_price'), estimated_price: data.get('estimated_price'),
} }
console.log("appl", order, data) // console.log("shirt", order, data)
const shirt_string = "test" const type = data.getAll('type')
// const shirt_string = [ const color = data.getAll('color')
// shirt.name, const size = data.getAll('size')
// 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(', ');
console.log(shirt_string) // console.log({ type, color, size })
// transporter.sendMail({
// from: SMTP_USERNAME, if (Array.isArray(type)) {
// to: "farm@sludge.link", for (let index in type) {
// subject: "Sludge Farm Shirt Preorder", console.log(index)
// attachments: [{ const key = `tshirt-${index}`
// filename: order.name + '-shirts.csv', const value = {
// content: shirt_string type: type[index],
// }, color: color[index],
// { size: size[index]
// filename: order.name + '-shirts.json', }
// content: JSON.stringify(order) order = {
// } ...order,
// ], [key]: value
// html: ` }
// <!doctype html> }
// <html> }
// <body>
// <h1>new order for ${order.name}!!</h1> console.log("shirt", order)
// <pre> ${JSON.stringify(order, null, 2).replace(/&/g, '&amp').replace(/</g, '&lt').replace(/>/g, '&gt')} </pre>
// </body> transporter.sendMail({
// </html from: SMTP_USERNAME,
// ` to: "farm@sludge.link",
// }, (error, info) => { subject: "Sludge Farm Shirt Preorder",
// if (error) { attachments: [{
// console.error("Error sending email:", error); filename: order.name + '-shirts.json',
// } else { content: JSON.stringify(order)
// console.log("Email sent successfully:", info.response); }
// } ],
// }) 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);
}
})
} }
} }
src/routes/shirts/+page.svelte
+20 -38
View File
@@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
const decoration = 3.5; const decoration = 4.5;
const USD = new Intl.NumberFormat("en-US", { const USD = new Intl.NumberFormat("en-US", {
style: "currency", style: "currency",
currency: "USD", currency: "USD",
minimumFractionDigits: 2, minimumFractionDigits: 2,
}); });
const shirt_types = [ 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: "PC61PT", name: "Port & Co Pocket Talls" },
{ shirt_type: "PC61P", name: "Port & Co Pocket" }, { shirt_type: "PC61P", name: "Port & Co Pocket" },
]; ];
@@ -21,13 +21,6 @@
style_name: "Comfort Colors", style_name: "Comfort Colors",
cost: 13.65, 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: blurb:
"OG Will shirts in regular belly size, no belly button barbed wire holes however", "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", style_name: "Port & Co Essential Pocket Tee",
cost: 11.3, 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 shirts = $state(1);
let estimated_price = $derived(shirts.length * 17); let estimated_price = $derived(shirts * 18);
</script> </script>
<form method="POST"> <form method="POST">
@@ -86,16 +73,10 @@
</div> </div>
<div> <div>
<span> <span>
{shirts.length} shirt{shirts.length > 1 ? "s" : ""} for roughly &approx; {shirts} shirt{shirts > 1 ? "s" : ""} for roughly &approx;
{USD.format(estimated_price)} {USD.format(estimated_price)}
</span> </span>
<input <input hidden readonly name="amount" type="number" bind:value={shirts} />
hidden
readonly
name="amount"
type="number"
bind:value={shirts.length}
/>
<input <input
hidden hidden
readonly readonly
@@ -104,10 +85,13 @@
bind:value={estimated_price} bind:value={estimated_price}
/> />
</div> </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> <div>
<ul> <ul>
{#each shirts as shirt, i} {#each { length: shirts }, i}
<li> <li>
<h4>Shirt #{i + 1}</h4> <h4>Shirt #{i + 1}</h4>
<div> <div>
@@ -124,7 +108,7 @@
required required
type="text" type="text"
name="color" name="color"
placeholder={shirt.color} placeholder="Type one from the website"
/> />
</div> </div>
<div> <div>
@@ -135,9 +119,6 @@
{/each} {/each}
</select> </select>
</div> </div>
<button type="button" onclick={() => remove_shirt(i)}>
Remove
</button>
</li> </li>
{/each} {/each}
</ul> </ul>
@@ -193,6 +174,7 @@
box-sizing: border-box; box-sizing: border-box;
background: var(--primary-8); background: var(--primary-8);
border-radius: var(--br); border-radius: var(--br);
color: var(--primary-1);
border: none; border: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 1rem; font-size: 1rem;