Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2024-12-27 09:59:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set image value in Item to list, to support more images in the future

Browse source 
Set all pages to Typescript
This commit is contained in:
Michał 2024-05-05 11:12:01 +01:00
parent 7d8d19a6e9
commit 9dce9235d6
16 changed files with 63 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
front/src/components/AnnouncementBanner.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { getAnnouncements } from '../lib/test-api';
let announcement = getAnnouncements();

14
front/src/components/BasketItem.svelte
View file

@ -9,28 +9,28 @@
function reduce() {
if (item.amount > 1) {
Cart.addToCart(item.uuid, -1)
Cart.addToCart(item.data.uuid, -1)
}
}
function add() {
if (item.amount < 99) {
Cart.addToCart(item.uuid, 1);
Cart.addToCart(item.data.uuid, 1);
}
}
function yeet() {
Cart.removeByUUID(item.uuid)
Cart.removeByUUID(item.data.uuid)
}
</script>
<div class="container">
{#if item.data.image}
<img src="{item.data.image}" alt="Item" class="basket-item-image">
{#if item.data.images}
<img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
{:else}
<img src="/MenuItemLoadingAlt.svg" alt="Item" class="basket-item-image">
<img src="/MenuItemLoading.svg" alt="Item" class="basket-item-image">
{/if}
<ul class="basket-item-data">
<li class="basket-item-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
<li class="basket-item-name"><a href="/item/{item.data.uuid}" use:link>{item.data.name}</a></li>
<li class="basket-item-controls">
<button class="button" class:disabled={item.amount <= 1} on:click={reduce}><Minus /></button>
<p>{item.amount}</p>

4
front/src/components/DropDown.svelte
View file

@ -1,8 +1,8 @@
<script>
<script lang="ts">
import { CaretDown } from "phosphor-svelte";
export let open = false;
export let name;
export let name: string;
</script>
<div class="dropdown" class:open={open}>

2
front/src/components/LoadingBar.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
export let bottom = false
</script>

12
front/src/components/MenuItem.svelte
View file

@ -1,18 +1,18 @@
<script>
<script lang="ts">
import { link } from 'svelte-spa-router';
import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
import { Labels } from "../lib/types";
import { type Item, Labels} from "../lib/types";
import LoadingImage from '/MenuItemLoadingAlt.svg';
export let item = {};
export let item: Item;
</script>
<div class="menu-item">
{#if !item.image}
<img src={LoadingImage} alt="" class="menu-item-image">
{#if item.images}
<img src={item.images[0]} alt="" class="menu-item-image">
{:else}
<img src={item.image} alt="" class="menu-item-image">
<img src={LoadingImage} alt="" class="menu-item-image">
{/if}
<div class="menu-item-header">

5
front/src/components/MenuList.svelte
View file

@ -1,7 +1,8 @@
<script>
<script lang="ts">
import { type Item } from "../lib/types";
import MenuItem from "./MenuItem.svelte";
export let items = [];
export let items: Item[];
</script>
<ul>

11
front/src/lib/test-api.ts
View file

@ -127,13 +127,12 @@ export async function postVerifyCart(
const newCartData: Record<string, CartItem> = {};
Object.entries(currentCartData).forEach(([key, value]) => {
Object.entries(currentCartData).forEach(([uuid, currentData]) => {
verifiedItems.forEach((verifiedItem: Item) => {
if (verifiedItem.uuid === key) {
console.log(verifiedItem, key);
newCartData[key] = {
uuid: value.uuid,
amount: value.amount,
if (verifiedItem.uuid === uuid) {
console.log(verifiedItem, uuid);
newCartData[uuid] = {
amount: currentData.amount,
data: verifiedItem,
};
}

22
front/src/lib/test-data.ts
View file

@ -7,65 +7,65 @@ const TestData: Item[] = [
name: "Bar of Soap",
price: 69.99,
labels: [Labels.vegan, Labels.spicy],
detail: "Example",
description: "Example",
},
{
uuid: "sock",
name: "Sock",
price: 21,
labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
detail: "Example",
description: "Example",
},
{
uuid: "brick",
name: "Brick",
price: 0,
labels: [Labels.spicy],
detail: "Example",
description: "Example",
},
{
uuid: "toast",
name: "Toast",
price: 4382749832743,
labels: [Labels.gluten],
detail: "Example",
description: "Example",
},
{
uuid: "water",
name: "water",
price: 1,
labels: [Labels.fish],
detail: "Example",
description: "Example",
},
{
uuid: "mouldy_bread",
name: "half eaten mouldy bread",
price: -99,
labels: [Labels.nut],
detail: "Example",
description: "Example",
},
{
uuid: "gwagwa",
name: "GwaGwa",
price: 69,
labels: [Labels.nut],
image: "/dab.jpg",
images: ["/dab.jpg"],
},
{
uuid: "hogmelon",
name: "Hogermellon",
price: 1111,
labels: [Labels.fish],
image: "/wathog.jpg",
detail: "Example",
images: ["/wathog.jpg"],
description: "Example",
},
{
uuid: "bluhog",
name: "Blue HOGGGGG",
price: 0,
labels: [Labels.nut, Labels.gluten, Labels.spicy],
image: "/sonichog.jpg",
detail: "Example",
images: ["/sonichog.jpg"],
description: "Example",
},
];

8
front/src/lib/types.ts
View file

@ -10,15 +10,13 @@ export interface Item {
uuid: string;
name: string;
price: number;
detail?: string;
labels: Labels[];
image?: string;
description?: string;
images?: string[];
}
// UUID is stored in both Item and CartItem, this isn't the best, I don't like it
// But it's the simplest way of doing this shit
export interface CartItem {
uuid: string;
amount: number;
data: Item;
}

2
front/src/pages/Page404.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { SmileySad } from "phosphor-svelte";
</script>

2
front/src/pages/Page500.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { SmileySad } from "phosphor-svelte";
</script>

18
front/src/pages/PageContact.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
import { postContactEmail } from "../lib/test-api";
@ -7,7 +7,7 @@
const minMessageLength = 150;
let formMessage;
let formMessage: Promise<string>;
let name = "";
let email = "";
@ -32,13 +32,13 @@
emailValid = true;
messageValid = false;
formMessage = postContactEmail(name, email, message);
formMessage.catch(() => {
validateName();
validateEmail();
validateMessage();
});
formMessage = postContactEmail(name, email, message)
.catch((error) => {
validateName();
validateEmail();
validateMessage();
return error;
});
}
</script>

2
front/src/pages/PageIndex.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { onMount } from "svelte";
import { link } from 'svelte-spa-router';
import { ArrowUpRight } from "phosphor-svelte";

14
front/src/pages/PageItem.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { SmileySad } from "phosphor-svelte";
import { getPopularToday, getItemByUUID } from "../lib/test-api";
@ -7,7 +7,9 @@
import LoadingBar from "../components/LoadingBar.svelte";
import LoadingImage from "/MenuItemLoading.svg";
export let params;
export let params: {
uuid?: string;
};
$: item = getItemByUUID(params.uuid);
$: popularToday = getPopularToday();
@ -37,7 +39,11 @@
{:then item}
<div id="images">
<div>
<img src={item.image} alt="">
{#if item.images}
<img src="{item.images[0]}" alt="Item">
{:else}
<img src="/MenuItemLoading.svg" alt="Item">
{/if}
</div>
<ul>
<li><img src={LoadingImage} alt=""></li>
@ -53,7 +59,7 @@
<p>£{item.price}</p>
<div class="container">
<p>{item.detail}</p>
<p>{item.description}</p>
</div>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }} id="add-to-cart">Add to Cart</button>

2
front/src/pages/PageLoading.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import LoadingBar from "../components/LoadingBar.svelte";
const FunnyMessages = [

2
front/src/pages/PageMenu.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { ArrowClockwise } from "phosphor-svelte";
import { getMenuItems } from "../lib/test-api";