diff --git a/front/src/components/BasketItem.svelte b/front/src/components/BasketItem.svelte index d8d3760..8de04e9 100644 --- a/front/src/components/BasketItem.svelte +++ b/front/src/components/BasketItem.svelte @@ -30,6 +30,9 @@ display: flex; flex-direction: row; + // Move background out of way of the image + background-position: 135px -43px; + overflow: hidden; ul { @@ -49,8 +52,8 @@ .basket-item-image { margin: $spacing-small; - width: 140px; - height: 140px; + width: 120px; + height: 120px; border-radius: $border-radius-normal; diff --git a/front/src/lib/cart.ts b/front/src/lib/cart.ts index d94d590..fb9a158 100644 --- a/front/src/lib/cart.ts +++ b/front/src/lib/cart.ts @@ -1,13 +1,21 @@ import { get, writable } from "svelte/store"; -import type { CartItem } from './types'; -import { getItemByUUID } from "./test-api"; +import type { Item, CartItem } from './types'; +import { getItemByUUID, postVerifyCart } from "./test-api"; // Load content from localstorage -let local = []; +let local: CartItem[] = []; try { - local = JSON.parse(localStorage.getItem("basket")) || [] + let verified = await postVerifyCart( + JSON.parse(localStorage.getItem("basket")) || [] + ); + + if (verified instanceof Error) { + throw new Error("Bruh"); + } + + local = verified; } catch { console.error("Failed to load cart") } @@ -27,12 +35,22 @@ function createCartStore() { }); if (!found) { - const newItem: CartItem = { - uuid: uuid, - amount: amount, - data: await getItemByUUID(uuid), - }; - cart.update((cart: CartItem[]) => [...cart, newItem]); + let cartData: Item; + + try { + let data: Item | Error = await getItemByUUID(uuid); + if (data instanceof Error) { + return; + } + cartData = data; + } finally { + const newItem: CartItem = { + uuid: uuid, + amount: amount, + data: cartData, + }; + cart.update((cart: CartItem[]) => [...cart, newItem]); + } } // Remove items that have an amount of 0 or lower diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts index f912669..a6ac8fa 100644 --- a/front/src/lib/test-api.ts +++ b/front/src/lib/test-api.ts @@ -1,10 +1,10 @@ -import type { Item } from './types'; +import type {CartItem, Item} from './types'; import TestData from './test-data'; let cache = { - announcement_banner: null, - popular_today: null, + announcement_banner: undefined, + popular_today: undefined, }; @@ -15,28 +15,30 @@ async function fakeDelay(timeout: number = 1000) { } -export async function getAnnouncements() { +export async function getAnnouncements(): Promise<{image: string}> { if (cache.announcement_banner) { return cache.announcement_banner; } - const data = { image: "/BannerExampleImage.jpg", }; cache.announcement_banner = data; + await fakeDelay(200) + return data; } -export async function getPopularToday() { +export async function getPopularToday(): Promise { if (cache.popular_today) { return cache.popular_today; } - - const data = TestData; + const data: Item[] = TestData; cache.popular_today = data; + await fakeDelay(200) + return data; } @@ -61,8 +63,8 @@ export async function getMenuItems() { } -export async function getItemsByUUID(items: string[]) { - let data = []; +export async function getItemsByUUID(items: string[]): Promise { + let data: Item[] = []; TestData.forEach((itemInDatabase: Item) => { items.forEach((itemInRequest) => { @@ -82,9 +84,12 @@ export async function getItemsByUUID(items: string[]) { } -export async function getItemByUUID(uuid: string) { - let data = await getItemsByUUID([uuid]); +export async function getItemByUUID(uuid: string): Promise { + let data: Item[] | Error = await getItemsByUUID([uuid]); + if (data instanceof Error) { + throw new Error("Resource could not be found"); + } if (data.length != 1) { throw new Error("Resource could not be found"); } @@ -93,7 +98,7 @@ export async function getItemByUUID(uuid: string) { } -export async function postContactEmail(name: string, email: string, message: string) { +export async function postContactEmail(name: string, email: string, message: string): Promise { await fakeDelay(200) if (!name) { @@ -110,3 +115,36 @@ export async function postContactEmail(name: string, email: string, message: str return "Check your email to confirm the message!"; } + +export async function postVerifyCart(currentCartData: CartItem[]): Promise { + if (currentCartData.length <= 0) { + return []; + } + + let itemUUIDs: string[] = currentCartData.map((item) => item.uuid); + let verifiedItems: Item[] | Error = await getItemsByUUID(itemUUIDs); + + if (verifiedItems instanceof Error) { + return new Error("Could not collect new cart information"); + } + + let newCartData: CartItem[] = []; + currentCartData.forEach((currentItem) => { + let data: Item; + verifiedItems.forEach((verifiedItem) => { + if (verifiedItem.uuid === currentItem.uuid) { + data = verifiedItem; + } + }) + + if (data) { + newCartData.push({ + uuid: currentItem.uuid, + amount: currentItem.amount, + data: data, + }); + } + }); + + return newCartData; +} diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts index 7e455a9..a62f50c 100644 --- a/front/src/lib/test-data.ts +++ b/front/src/lib/test-data.ts @@ -49,7 +49,7 @@ const TestData: Item[] = [ name: "GwaGwa", price: 69, labels: [Labels.nut], - // image: "/dab.jpg", + image: "/dab.jpg", }, { uuid: "hogmelon", diff --git a/front/src/pages/PageCart.svelte b/front/src/pages/PageCart.svelte index 1ad71a4..d171556 100644 --- a/front/src/pages/PageCart.svelte +++ b/front/src/pages/PageCart.svelte @@ -12,19 +12,23 @@ $: totalPrice = $Cart.map((item) => item.amount * item.data.price).reduce((a, b) => a + b, 0); -

Cart

- - -

Order total: £{totalPrice}

{#if items.length > 0} +

Cart

+ + +

Order total: £{totalPrice}

+ {#each items as item}
{/each} {:else} -

Empty.....

+
+

Empty Cart!

+

Go add some items from the menu...

+
{/if}
@@ -72,4 +76,27 @@ outline: 0 solid transparent } } + + #emptyCart { + margin-left: auto; + margin-right: auto; + padding: $spacing-large; + + max-width: $sizing-default-width; + + display: flex; + flex-direction: column; + + > h1 { + display: flex; + justify-content: center; + align-items: center; + + font-size: $font-size-very-fucking-big; + text-align: center; + } + > p { + text-align: center; + } + } \ No newline at end of file