mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2024-12-26 17:36:15 +00:00
Nicer item page
Add markdown support to item description Cart now gets loaded in the background, poorly implemented I presume
This commit is contained in:
parent
a704082779
commit
a1dfcd3c35
58
front/package-lock.json
generated
58
front/package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4",
|
||||
"svelte-markdown": "^0.4.1",
|
||||
"svelte-spa-router": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -24,7 +25,6 @@
|
|||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
|
||||
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.24"
|
||||
|
|
@ -405,7 +405,6 @@
|
|||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
|
|
@ -419,7 +418,6 @@
|
|||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -428,7 +426,6 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
|
||||
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -436,14 +433,12 @@
|
|||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
|
||||
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
|
|
@ -699,8 +694,7 @@
|
|||
"node_modules/@types/estree": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.14",
|
||||
|
|
@ -717,11 +711,15 @@
|
|||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/marked": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
|
||||
"integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.11.3",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
|
||||
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -746,7 +744,6 @@
|
|||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
|
||||
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
|
|
@ -755,7 +752,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
|
||||
"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
|
|
@ -812,7 +808,6 @@
|
|||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
|
||||
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
"@types/estree": "^1.0.1",
|
||||
|
|
@ -825,7 +820,6 @@
|
|||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
"source-map-js": "^1.0.1"
|
||||
|
|
@ -864,7 +858,6 @@
|
|||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
|
|
@ -911,7 +904,6 @@
|
|||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
|
||||
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0"
|
||||
}
|
||||
|
|
@ -1006,7 +998,6 @@
|
|||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
|
||||
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
|
|
@ -1028,14 +1019,12 @@
|
|||
"node_modules/locate-character": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
|
||||
"integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
},
|
||||
|
|
@ -1043,11 +1032,21 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz",
|
||||
"integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -1086,7 +1085,6 @@
|
|||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
|
||||
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0",
|
||||
"estree-walker": "^3.0.0",
|
||||
|
|
@ -1224,7 +1222,6 @@
|
|||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -1233,7 +1230,6 @@
|
|||
"version": "4.2.14",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.14.tgz",
|
||||
"integrity": "sha512-ry3+YlWqZpHxLy45MW4MZIxNdvB+Wl7p2nnstWKbOAewaJyNJuOtivSbRChcfIej6wFBjWqyKmf/NgK1uW2JAA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
|
|
@ -1266,6 +1262,18 @@
|
|||
"svelte": "^3.19.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-markdown": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
|
||||
"integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
|
||||
"dependencies": {
|
||||
"@types/marked": "^5.0.1",
|
||||
"marked": "^5.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-spa-router": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4",
|
||||
"svelte-markdown": "^0.4.1",
|
||||
"svelte-spa-router": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
front/public/beetle.jpg
Normal file
BIN
front/public/beetle.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
1
front/public/spinner.svg
Normal file
1
front/public/spinner.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>
|
||||
|
After Width: | Height: | Size: 620 B |
|
|
@ -1,12 +1,12 @@
|
|||
<script>
|
||||
import Router from 'svelte-spa-router';
|
||||
import { replace, link } from 'svelte-spa-router';
|
||||
import Router, { replace, link } from 'svelte-spa-router';
|
||||
import active from 'svelte-spa-router/active'
|
||||
import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
|
||||
|
||||
import Cart from './lib/cart';
|
||||
import Cart, { cartLoaded } from './lib/cart';
|
||||
import routes from './routes';
|
||||
import Logo from '/assets/LogoAlt.svg';
|
||||
import Spinner from '/spinner.svg';
|
||||
|
||||
const links = {
|
||||
home: {path: '/', className: 'active'},
|
||||
|
|
@ -15,21 +15,19 @@
|
|||
cart: {path: '/cart', className: 'active'},
|
||||
}
|
||||
|
||||
let scrollY = 0;
|
||||
let width = 0;
|
||||
let oldLocation = undefined;
|
||||
let fullWidth = false;
|
||||
let showNavBar = false;
|
||||
let cartItemCount = 0;
|
||||
|
||||
Cart.subscribe(() => {
|
||||
cartItemCount = Cart.getTotalLength();
|
||||
});
|
||||
|
||||
let scrollY = 0;
|
||||
let width = 0;
|
||||
|
||||
let oldLocation = undefined;
|
||||
let fullWidth = false;
|
||||
let showNavBar = false;
|
||||
|
||||
function routeLoading(event) {
|
||||
if (event.detail.location === oldLocation) {
|
||||
console.log("Fake!");
|
||||
return; // not an actual change
|
||||
}
|
||||
|
||||
|
|
@ -72,14 +70,36 @@
|
|||
<span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
|
||||
<ul style="justify-content: flex-start">
|
||||
<li use:active={links.contact}><a href="/contact" use:link>Contact Us</a></li>
|
||||
<li use:active={links.cart}><a href="/cart" use:link>Cart <span class="nav-basket">{cartItemCount}</span></a></li>
|
||||
<li use:active={links.cart}>
|
||||
<a href="/cart" use:link>
|
||||
Cart
|
||||
<span class="nav-basket">
|
||||
{#await cartLoaded}
|
||||
<img src={Spinner} alt="Cart Loading">
|
||||
{:then _}
|
||||
{cartItemCount}
|
||||
{/await}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{:else}
|
||||
<ul>
|
||||
<li use:active={links.home}><a href="/" use:link>Home</a></li>
|
||||
<li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
|
||||
<li use:active={links.contact}><a href="/contact" use:link>Contact Us</a></li>
|
||||
<li use:active={links.cart}><a href="/cart" use:link>Cart <span class="nav-basket">{cartItemCount}</span></a></li>
|
||||
<li use:active={links.cart}>
|
||||
<a href="/cart" use:link>
|
||||
Cart
|
||||
<span class="nav-basket">
|
||||
{#await cartLoaded}
|
||||
<img src={Spinner} alt="Cart Loading">
|
||||
{:then _}
|
||||
{cartItemCount}
|
||||
{/await}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
import { type CartItem, Labels } from "../lib/types";
|
||||
import Cart from "../lib/cart";
|
||||
import ImageLoading from '/assets/MenuItemLoading.svg';
|
||||
|
||||
export let item: CartItem;
|
||||
|
||||
|
|
@ -23,10 +24,10 @@
|
|||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#if item.data.images}
|
||||
{#if item.data.images && item.data.images[0]}
|
||||
<img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
|
||||
{:else}
|
||||
<img src="/assets/MenuItemLoading.svg" alt="Item" class="basket-item-image">
|
||||
<img src={ImageLoading} alt="Item" class="basket-item-image">
|
||||
{/if}
|
||||
|
||||
<ul class="basket-item-data">
|
||||
|
|
|
|||
|
|
@ -3,26 +3,34 @@ import { type Writable, get, writable } from "svelte/store";
|
|||
import { type CartItem, type Item } from "./types";
|
||||
import { getItemByUUID, postVerifyCart } from "./test-api";
|
||||
|
||||
function getLocal(): Record<string, CartItem> {
|
||||
let localData: Record<string, CartItem> =
|
||||
JSON.parse(localStorage.getItem("basket")) || {};
|
||||
|
||||
postVerifyCart(localData)
|
||||
.then((data: Record<string, CartItem>) => {
|
||||
localData = data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Could not load basket:", error);
|
||||
return <Record<string, CartItem>>{};
|
||||
});
|
||||
|
||||
return localData;
|
||||
}
|
||||
|
||||
function createCartStore() {
|
||||
const cart: Writable<Record<string, CartItem>> = writable(getLocal());
|
||||
let loaded = false;
|
||||
|
||||
const cart: Writable<Record<string, CartItem>> = writable({});
|
||||
|
||||
async function init() {
|
||||
let localData: Record<string, CartItem> = {};
|
||||
try {
|
||||
localData = JSON.parse(localStorage.getItem("basket")) || {};
|
||||
} catch {
|
||||
console.error("Local Cart data fucked");
|
||||
}
|
||||
|
||||
try {
|
||||
const newData: Record<string, CartItem> = await postVerifyCart(localData);
|
||||
cart.set(newData);
|
||||
} catch (error) {
|
||||
console.error("Could not load basket:", error);
|
||||
}
|
||||
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
async function addToCart(uuid: string, amount: number) {
|
||||
if (!loaded) {
|
||||
return
|
||||
}
|
||||
|
||||
if (get(cart)[uuid] !== undefined) {
|
||||
cart.update((cart: Record<string, CartItem>) => {
|
||||
cart[uuid].amount += amount;
|
||||
|
|
@ -74,6 +82,10 @@ function createCartStore() {
|
|||
}
|
||||
|
||||
function removeByUUID(uuid: string) {
|
||||
if (!loaded) {
|
||||
return
|
||||
}
|
||||
|
||||
cart.update((cart) => {
|
||||
delete cart[uuid]; // skipcq: JS-0320
|
||||
return cart;
|
||||
|
|
@ -82,6 +94,7 @@ function createCartStore() {
|
|||
|
||||
return {
|
||||
...cart,
|
||||
init,
|
||||
addToCart,
|
||||
getEntries,
|
||||
getUniqueLength,
|
||||
|
|
@ -93,15 +106,11 @@ function createCartStore() {
|
|||
|
||||
// Create store
|
||||
const Cart = createCartStore();
|
||||
export let cartLoaded = Cart.init()
|
||||
|
||||
// Make sure to update localstorage on any changes
|
||||
Cart.subscribe((value) => {
|
||||
localStorage.setItem("basket", JSON.stringify(value));
|
||||
});
|
||||
|
||||
// Debug
|
||||
// Cart.subscribe((value) => {
|
||||
// console.log(value);
|
||||
// });
|
||||
|
||||
export default Cart;
|
||||
|
|
|
|||
|
|
@ -138,5 +138,6 @@ export async function postVerifyCart(
|
|||
});
|
||||
});
|
||||
|
||||
return newCartData;
|
||||
await fakeDelay(1);
|
||||
return newCartData
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,59 @@
|
|||
import type { Item } from "./types";
|
||||
import { Labels } from "./types";
|
||||
import { type Item, Labels } from "./types";
|
||||
|
||||
const TestData: Item[] = [
|
||||
{
|
||||
uuid: "soap",
|
||||
name: "Bar of Soap",
|
||||
price: 69.99,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.vegan, Labels.spicy],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "sock",
|
||||
name: "Sock",
|
||||
price: 21,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "brick",
|
||||
name: "Brick",
|
||||
price: 0,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.spicy],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "toast",
|
||||
name: "Toast",
|
||||
price: 4382749832743,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.gluten],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "water",
|
||||
name: "water",
|
||||
price: 1,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.fish],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "mouldy_bread",
|
||||
name: "half eaten mouldy bread",
|
||||
price: -99,
|
||||
description: `
|
||||
Example
|
||||
`,
|
||||
labels: [Labels.nut],
|
||||
description: "Example",
|
||||
},
|
||||
{
|
||||
uuid: "gwagwa",
|
||||
|
|
@ -55,17 +66,27 @@ const TestData: Item[] = [
|
|||
uuid: "hogmelon",
|
||||
name: "Hogermellon",
|
||||
price: 1111,
|
||||
labels: [Labels.fish],
|
||||
images: ["/item_images/wathog.jpg"],
|
||||
description: "Example",
|
||||
description: `
|
||||
This is a sample description. Gay Balls.
|
||||
|
||||
Contains the following:
|
||||
- hog
|
||||
- melon
|
||||
`,
|
||||
labels: [Labels.nut, Labels.gluten, Labels.spicy, Labels.fish],
|
||||
images: ["/item_images/wathog.jpg","/item_images/sonichog.jpg"],
|
||||
},
|
||||
{
|
||||
uuid: "bluhog",
|
||||
name: "Blue HOGGGGG",
|
||||
price: 0,
|
||||
description: `
|
||||
This is a sample description.
|
||||
|
||||
Gay Balls
|
||||
`,
|
||||
labels: [Labels.nut, Labels.gluten, Labels.spicy],
|
||||
images: ["/item_images/sonichog.jpg"],
|
||||
description: "Example",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<script lang="ts">
|
||||
import ImageWithText from "../components/ImageWithText.svelte";
|
||||
import Hog from "/item_images/wathog.jpg";
|
||||
import Dab from "/item_images/dab.jpg";
|
||||
import Beetle from "/beetle.jpg";
|
||||
</script>
|
||||
|
||||
<h1>Our story</h1>
|
||||
|
||||
<ImageWithText image="/wathog.jpg">
|
||||
<ImageWithText image={Hog}>
|
||||
<div class="padding">
|
||||
<h2>How it all started</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
|
||||
|
|
@ -15,7 +18,7 @@
|
|||
|
||||
<div class="spacer" />
|
||||
|
||||
<ImageWithText image="/dab.jpg" toRight={true}>
|
||||
<ImageWithText image={Dab} toRight={true}>
|
||||
<div class="padding">
|
||||
<h2>The hard times</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
|
||||
<div class="spacer" />
|
||||
|
||||
<ImageWithText image="/MenuItemLoading.svg">
|
||||
<ImageWithText image={Hog}>
|
||||
<div class="padding">
|
||||
<h2>Whats next</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
|
||||
|
|
@ -33,6 +36,16 @@
|
|||
</div>
|
||||
</ImageWithText>
|
||||
|
||||
<div class="spacer" />
|
||||
|
||||
<ImageWithText image={Beetle} toRight={true}>
|
||||
<div class="padding">
|
||||
<h2>Our Chef</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
|
||||
</div>
|
||||
</ImageWithText>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/vars";
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
import { type CartItem } from "../lib/types";
|
||||
import { getPopularToday } from "../lib/test-api";
|
||||
import Cart from "../lib/cart";
|
||||
import Cart, { cartLoaded } from "../lib/cart";
|
||||
import MenuList from "../components/MenuList.svelte";
|
||||
import BasketItem from "../components/BasketItem.svelte";
|
||||
import DropDown from "../components/DropDown.svelte";
|
||||
|
|
@ -22,24 +22,32 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<!--<button on:click={() => { localStorage['basket'] = "balls" }}>Fuck up the cart</button>-->
|
||||
|
||||
{#if totalItems}
|
||||
<h1>Cart</h1>
|
||||
|
||||
<button id="checkout-button">Checkout</button>
|
||||
<h2>Order total: £{totalPrice}</h2>
|
||||
|
||||
{#each items as [key, item]}
|
||||
<div class="basket-item">
|
||||
<BasketItem item={item}/>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#await cartLoaded}
|
||||
<div id="emptyCart">
|
||||
<h1>Empty Cart <Basket weight="fill" /></h1>
|
||||
<p>Why not go and checkout <a href="/menu" use:link>our menu</a>?</p>
|
||||
<h1>Cart Loading <Basket weight="fill" /></h1>
|
||||
<p>This shouldn't take long</p>
|
||||
</div>
|
||||
{/if}
|
||||
{:then _}
|
||||
{#if totalItems}
|
||||
<h1>Cart</h1>
|
||||
|
||||
<button id="checkout-button">Checkout</button>
|
||||
<h2>Order total: £{totalPrice}</h2>
|
||||
|
||||
{#each items as [key, item]}
|
||||
<div class="basket-item">
|
||||
<BasketItem item={item}/>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div id="emptyCart">
|
||||
<h1>Empty Cart <Basket weight="fill" /></h1>
|
||||
<p>Why not go and checkout <a href="/menu" use:link>our menu</a>?</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
<div class="spacer" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { Minus, Plus, SmileySad } from "phosphor-svelte";
|
||||
import { link } from 'svelte-spa-router';
|
||||
import { Acorn, Fish, GrainsSlash, Leaf, Minus, Pepper, Plus, SmileySad, ShoppingCart } from "phosphor-svelte";
|
||||
import SvelteMarkdown from 'svelte-markdown'
|
||||
|
||||
import { Labels } from "../lib/types";
|
||||
import { getPopularToday, getItemByUUID } from "../lib/test-api";
|
||||
import Cart from "../lib/cart";
|
||||
import Cart, { cartLoaded } from "../lib/cart";
|
||||
import MenuList from "../components/MenuList.svelte";
|
||||
import LoadingBar from "../components/LoadingBar.svelte";
|
||||
import LoadingImage from "/MenuItemLoading.svg";
|
||||
import LoadingImage from "/assets/MenuItemLoading.svg";
|
||||
|
||||
export let params: {
|
||||
uuid?: string;
|
||||
};
|
||||
|
||||
let basketAmount = 1;
|
||||
let selectedImage = 0;
|
||||
|
||||
$: item = getItemByUUID(params.uuid);
|
||||
$: item.finally(() => { selectedImage = 0 });
|
||||
$: popularToday = getPopularToday();
|
||||
|
||||
function reduce() {
|
||||
|
|
@ -21,11 +26,13 @@
|
|||
basketAmount -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
function increase() {
|
||||
if (basketAmount < 99) {
|
||||
basketAmount += 1;
|
||||
}
|
||||
}
|
||||
|
||||
function add() {
|
||||
Cart.addToCart(params.uuid, basketAmount);
|
||||
}
|
||||
|
|
@ -34,39 +41,42 @@
|
|||
<div class="main">
|
||||
{#await item}
|
||||
<div id="images">
|
||||
<div>
|
||||
<img src={LoadingImage} alt="">
|
||||
<div class="img-main">
|
||||
<div class="loading image" />
|
||||
</div>
|
||||
<ul>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<ul class="img-alts">
|
||||
<li><div class="loading image-small" /></li>
|
||||
<li><div class="loading image-small" /></li>
|
||||
<li><div class="loading image-small" /></li>
|
||||
<li><div class="loading image-small" /></li>
|
||||
<li><div class="loading image-small" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="info">
|
||||
<div class="loading title" />
|
||||
<div class="loading price" />
|
||||
|
||||
<div class="loading description" />
|
||||
</div>
|
||||
{:then item}
|
||||
<div id="images">
|
||||
<div>
|
||||
{#if item.images}
|
||||
<img src="{item.images[0]}" alt="Item">
|
||||
<div class="img-main">
|
||||
{#if item.images && item.images[selectedImage]}
|
||||
<img src="{item.images[selectedImage]}" alt="Item">
|
||||
{:else}
|
||||
<img src="/assets/MenuItemLoading.svg" alt="Item">
|
||||
<img src={LoadingImage} alt="Item">
|
||||
{/if}
|
||||
</div>
|
||||
<ul>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<li><img src={LoadingImage} alt=""></li>
|
||||
<ul class="img-alts">
|
||||
{#if item.images && item.images.length > 1}
|
||||
{#each item.images as image, i}
|
||||
<li class:selected={selectedImage === i}>
|
||||
<button on:click={() => { selectedImage = i }}>
|
||||
<img src={image} alt="">
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -75,18 +85,46 @@
|
|||
<p>£{item.price}</p>
|
||||
|
||||
<div class="container">
|
||||
<p>{item.description}</p>
|
||||
<div id="description">
|
||||
{#if item.description}
|
||||
<SvelteMarkdown source={item.description} />
|
||||
{:else}
|
||||
<p>Item is missing information</p>
|
||||
{/if}
|
||||
</div>
|
||||
<hr>
|
||||
<div id="small-text">
|
||||
<p>If you require any specific informtaion on a meal, <a href="/contact" use:link>please contact us</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="allergy-labels">
|
||||
{#each item.labels as label}
|
||||
{#if label === Labels.vegan}
|
||||
<li class="vegan"><Leaf weight="fill" /> Vegan</li>
|
||||
{:else if label === Labels.fish}
|
||||
<li class="fish"><Fish weight="fill" /> Sea</li>
|
||||
{:else if label === Labels.nut}
|
||||
<li class="nut"><Acorn weight="fill" /> Nut</li>
|
||||
{:else if label === Labels.gluten}
|
||||
<li class="gluten"><GrainsSlash weight="fill" /> Gluten Free</li>
|
||||
{:else if label === Labels.spicy}
|
||||
<li class="spicy"><Pepper weight="fill" /> Spicy</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div id="basket-controls">
|
||||
<button class="button" class:disabled={basketAmount <= 1} on:click={reduce}><Minus /></button>
|
||||
<p>{basketAmount}</p>
|
||||
<button class="button" class:disabled={basketAmount >= 99} on:click={increase}><Plus /></button>
|
||||
<hr>
|
||||
<button class="button add" on:click={add} id="add-to-cart">Add to Cart</button>
|
||||
{#await cartLoaded}
|
||||
<button class="button add disabled" id="add-to-cart">Add to Cart <ShoppingCart weight="fill" /></button>
|
||||
{:then _}
|
||||
<button class="button add" on:click={add} id="add-to-cart">Add to Cart <ShoppingCart weight="fill" /></button>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{:catch error}
|
||||
<div id="error">
|
||||
|
|
@ -122,25 +160,27 @@
|
|||
}
|
||||
|
||||
#images {
|
||||
margin-right: $spacing-normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> div {
|
||||
.img-main {
|
||||
margin-bottom: $spacing-small;
|
||||
padding: $spacing-small;
|
||||
|
||||
width: 650px;
|
||||
height: 500px;
|
||||
width: 600px;
|
||||
height: 450px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
background-color: $color-background;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> .loading.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
|
@ -149,7 +189,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
.img-alts {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -159,10 +199,39 @@
|
|||
> li {
|
||||
list-style: none;
|
||||
|
||||
> img {
|
||||
> .loading.image-small {
|
||||
margin-right: $spacing-small;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
> button {
|
||||
margin-right: $spacing-small;
|
||||
padding: 0;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
border: 1px solid $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected > button {
|
||||
border: 1px solid $color-primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,16 +245,31 @@
|
|||
align-items: flex-end;
|
||||
|
||||
> h2 {
|
||||
margin-bottom: $spacing-small;
|
||||
padding: 0;
|
||||
font-size: $font-size-h1;
|
||||
padding-bottom: $spacing-small;
|
||||
}
|
||||
> p {
|
||||
margin-bottom: $spacing-normal;
|
||||
padding: 0;
|
||||
font-size: $font-size-h2;
|
||||
padding-bottom: $spacing-normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: $spacing-normal;
|
||||
margin-bottom: $spacing-small;
|
||||
width: 100%;
|
||||
|
||||
#description {
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
|
||||
#small-text {
|
||||
padding: $spacing-small $spacing-normal;
|
||||
|
||||
p {
|
||||
font-size: $font-size-xsmall;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +316,7 @@
|
|||
|
||||
&.disabled {
|
||||
border: 1px solid rgba($color-dark, 0.1);
|
||||
color: rgba($color-on-light, 0.6);
|
||||
color: rgba($color-on-light, 0.6) !important;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
|
|
@ -240,6 +324,11 @@
|
|||
background-color: $color-light;
|
||||
color: rgba($color-on-light, 0.6);
|
||||
}
|
||||
|
||||
&.add {
|
||||
background-color: $color-dark !important;
|
||||
color: rgba($color-on-dark, 0.6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -302,12 +391,60 @@
|
|||
}
|
||||
}
|
||||
|
||||
#allergy-labels {
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
margin: 0 0 $spacing-small $spacing-xsmall;
|
||||
padding: 0 $spacing-small;
|
||||
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: $border-radius-circle;
|
||||
background-color: $color-dark;
|
||||
color: $color-on-dark;
|
||||
|
||||
list-style: none;
|
||||
|
||||
&.vegan {
|
||||
background-color: $color-vegan;
|
||||
}
|
||||
&.fish {
|
||||
background-color: $color-fish;
|
||||
}
|
||||
&.nut {
|
||||
background-color: $color-nut;
|
||||
}
|
||||
&.gluten {
|
||||
background-color: $color-gluten;
|
||||
}
|
||||
&.spicy {
|
||||
background-color: $color-spicy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: relative;
|
||||
|
||||
border-radius: $border-radius-large;
|
||||
|
||||
background: linear-gradient(to right, $color-background 8%, rgba($color-dark, 0.3) 38%, $color-background 54%);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($color-dark, 0) 8%,
|
||||
rgba($color-dark, 0.3) 38%,
|
||||
rgba($color-dark, 0) 54%
|
||||
) no-repeat;
|
||||
background-size: 1000px 100%;
|
||||
animation: loading 1s infinite linear;
|
||||
|
||||
|
|
@ -323,7 +460,10 @@
|
|||
left: $padding;
|
||||
|
||||
border-radius: calc($border-radius-large - $padding);
|
||||
background-color: rgba($color-background, 0.9);
|
||||
background-color: darken($color-background, 10%);
|
||||
background-image: url("/assets/Noise.png");
|
||||
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.title {
|
||||
|
|
@ -337,17 +477,17 @@
|
|||
width: 60px;
|
||||
}
|
||||
&.description {
|
||||
height: 400px;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading{
|
||||
0%{
|
||||
background-position: -500px 0
|
||||
background-position: -600px 0
|
||||
}
|
||||
100%{
|
||||
background-position: 500px 0
|
||||
background-position: 600px 0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -61,6 +61,10 @@ nav {
|
|||
border-radius: $border-radius-circle;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
img {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +90,6 @@ nav {
|
|||
|
||||
> img {
|
||||
height: calc($sizing-navigation-height - calc(2 * $spacing-small));
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ body,
|
|||
|
||||
body {
|
||||
background-color: darken($color-background, 10%);
|
||||
//background-color: $color-background;
|
||||
background-image: url("/assets/Noise.png");
|
||||
color: $color-on-background;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue