databases?; we dont need no stinkin databases.
This commit is contained in:
@@ -1,8 +1,132 @@
|
||||
import { get_all_pork } from '$lib/db';
|
||||
|
||||
export async function load() {
|
||||
return {
|
||||
pork: get_all_pork()
|
||||
pork,
|
||||
PRICE_PER_LB
|
||||
}
|
||||
}
|
||||
|
||||
const PRICE_PER_LB = 6
|
||||
|
||||
const pork = [
|
||||
{
|
||||
name: "pork links",
|
||||
cured: false,
|
||||
tubed: true,
|
||||
lb_package: true,
|
||||
flavors: [
|
||||
"blueberry",
|
||||
"original"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "bacon",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
lb_package: true,
|
||||
flavors: [
|
||||
"blackberry",
|
||||
"original",
|
||||
"raspberry chipotle",
|
||||
"three pepper"
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
name: "bratwurst",
|
||||
cured: false,
|
||||
tubed: true,
|
||||
lb_package: true,
|
||||
flavors: [
|
||||
"italian",
|
||||
"keilbasa",
|
||||
"andouille",
|
||||
"cranberry",
|
||||
"mushroom & swiss",
|
||||
"philly cheese steak",
|
||||
"swedish potato",
|
||||
"~~jalapeno~~"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "rings",
|
||||
cured: false,
|
||||
tubed: true,
|
||||
lb_package: true,
|
||||
flavors: [
|
||||
"italian",
|
||||
"keilbasa",
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "patties",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
lb_package: true,
|
||||
flavors: [
|
||||
"bratwurst",
|
||||
"original",
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
name: "ham",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
lb_package: false,
|
||||
avg_weight: { min: 7, max: 15 }
|
||||
},
|
||||
{
|
||||
name: "raw ham",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 7, max: 15 }
|
||||
},
|
||||
{
|
||||
name: "loin roast",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 3, max: 4 }
|
||||
},
|
||||
{
|
||||
name: "chop",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 0.75, max: 1.5 }
|
||||
},
|
||||
{
|
||||
name: "steak",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 1.5, max: 3 }
|
||||
},
|
||||
{
|
||||
name: "belly",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 7, max: 10 }
|
||||
},
|
||||
{
|
||||
name: "spare ribs",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 2, max: 4 }
|
||||
},
|
||||
{
|
||||
name: "butt",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 3, max: 5 }
|
||||
},
|
||||
{
|
||||
name: "smoked hocks",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
avg_weight: { min: 1, max: 2 }
|
||||
},
|
||||
{
|
||||
name: "roast",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 4, max: 7 }
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,26 +1,27 @@
|
||||
<script lang="ts">
|
||||
import type { MouseEventHandler } from "svelte/elements";
|
||||
let { data } = $props<{ data: { pork: Pork[] } }>();
|
||||
let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
|
||||
interface Pork {
|
||||
pork: {
|
||||
name: string;
|
||||
min_weight: number;
|
||||
max_weight: number;
|
||||
stock: number;
|
||||
raw_cut: boolean;
|
||||
id: number;
|
||||
preweighed: boolean;
|
||||
cured: boolean;
|
||||
tubed: boolean;
|
||||
lb_package: boolean;
|
||||
flavors: String[];
|
||||
avg_weight: {
|
||||
min: number;
|
||||
max: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
let selected = $state("Chop");
|
||||
const PRICE_PER_LB = 6;
|
||||
|
||||
const change_photo: MouseEventHandler<HTMLLIElement> = ({
|
||||
currentTarget: { id },
|
||||
}) => {
|
||||
console.log(id);
|
||||
selected = id;
|
||||
// console.log(id);
|
||||
// selected = id;
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -35,28 +36,37 @@
|
||||
<section>
|
||||
<h1><b>F</b>arm Raised Pork</h1>
|
||||
<h5>this ain't your grocery store's pork</h5>
|
||||
<h5>All priced at {PRICE_PER_LB}$/#</h5>
|
||||
<div id="tui">
|
||||
<ol>
|
||||
<li>
|
||||
<span>Cut</span>
|
||||
<span>Weight</span>
|
||||
</li>
|
||||
{#each data.pork as { name, preweighed, min_weight, max_weight }}
|
||||
<li onmouseenter={change_photo} id={name}>
|
||||
<span>{name}</span>
|
||||
{#if preweighed}
|
||||
<span>{min_weight} lb</span>
|
||||
<h5>All priced at {data.PRICE_PER_LB}$/#</h5>
|
||||
<div id="pork">
|
||||
{#each data.pork as { name, cured, tubed, lb_package, flavors, avg_weight }}
|
||||
<div onmouseenter={change_photo} id={name}>
|
||||
<h3>{name}</h3>
|
||||
{#if lb_package}
|
||||
<p>1 lb</p>
|
||||
{:else}
|
||||
<span>{min_weight} ~ {max_weight} lbs</span>
|
||||
<p>{avg_weight.min}~ {avg_weight.max} lbs</p>
|
||||
{/if}
|
||||
{#if cured}
|
||||
<span>Cured!</span>
|
||||
{/if}
|
||||
{#if tubed}
|
||||
<span>Tubed!</span>
|
||||
{/if}
|
||||
{#if flavors != undefined}
|
||||
<ul>
|
||||
{#each flavors as flavor}
|
||||
<li>
|
||||
{flavor}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<img
|
||||
src={`/pork/${selected.replace(" ", "_")}.jpg`}
|
||||
alt={`Image of a ${selected}`}
|
||||
/>
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<!-- <img -->
|
||||
<!-- src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
|
||||
<!-- alt={`Image of a ${selected}`} -->
|
||||
<!-- /> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -84,17 +94,28 @@
|
||||
color: var(--primary-8);
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
// img {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
#tui {
|
||||
#pork {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
div {
|
||||
background: var(--primary-9);
|
||||
border-radius: var(--br);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
h3 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
ol {
|
||||
ul {
|
||||
width: 100%;
|
||||
display: inherit;
|
||||
flex-direction: column;
|
||||
@@ -103,15 +124,7 @@
|
||||
display: inherit;
|
||||
gap: 1rem;
|
||||
padding-left: 1rem;
|
||||
span {
|
||||
flex-basis: 50%;
|
||||
text-align: center;
|
||||
text-shadow: 3px 3px 3px var(--primary-7);
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
&:nth-child(even) {
|
||||
background: var(--primary-8);
|
||||
}
|
||||
&:not(:first-child):hover {
|
||||
@@ -120,17 +133,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
img {
|
||||
display: unset !important;
|
||||
width: 50%;
|
||||
height: fit-content;
|
||||
border-radius: 0.375rem;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
#pork {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
flex-basis: 20rem;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// display: unset !important;
|
||||
// width: 50%;
|
||||
// height: fit-content;
|
||||
// border-radius: 0.375rem;
|
||||
// text-align: center;
|
||||
// align-self: center;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user