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

Add a router and some temporary pages

Browse source
This commit is contained in:
Michał 2024-04-15 14:08:51 +01:00
parent 56bd273711
commit 677ef885cf
9 changed files with 96 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
front/index.html
View file

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TastyBites</title> <title>TastyBites</title>
</head> </head>

22
front/package-lock.json generated
View file

@ -7,6 +7,9 @@
"": { "": {
"name": "front", "name": "front",
"version": "0.0.0", "version": "0.0.0",
"dependencies": {
"svelte-spa-router": "^4.0.1"
},
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.2", "@sveltejs/vite-plugin-svelte": "^3.0.2",
"svelte": "^4.2.12", "svelte": "^4.2.12",
@ -958,6 +961,14 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/regexparam": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
"engines": {
"node": ">=8"
}
},
"node_modules/rollup": { "node_modules/rollup": {
"version": "4.14.3", "version": "4.14.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
@ -1039,6 +1050,17 @@
"svelte": "^3.19.0 || ^4.0.0" "svelte": "^3.19.0 || ^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",
"integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
"dependencies": {
"regexparam": "2.0.2"
},
"funding": {
"url": "https://github.com/sponsors/ItalyPaleAle"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "5.2.8", "version": "5.2.8",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",

3
front/package.json
View file

@ -12,5 +12,8 @@
"@sveltejs/vite-plugin-svelte": "^3.0.2", "@sveltejs/vite-plugin-svelte": "^3.0.2",
"svelte": "^4.2.12", "svelte": "^4.2.12",
"vite": "^5.2.0" "vite": "^5.2.0"
},
"dependencies": {
"svelte-spa-router": "^4.0.1"
} }
} }

42
front/src/App.svelte
View file

@ -1,9 +1,45 @@
<script> <script>
import Router from 'svelte-spa-router';
import { replace, link, location } from 'svelte-spa-router';
import active from 'svelte-spa-router/active'
import routes from './routes';
let oldLocation = undefined;
let showNavBar = false;
function routeLoading(event) {
if (event.detail.location === oldLocation) {
return; // not an actual change
}
showNavBar = event.detail.userData.showNavBar;
oldLocation = event.detail.location;
}
function conditionFailure(event) {
replace("/");
}
</script> </script>
<main> {#if showNavBar }
<h1>TastyBites</h1> <nav>
</main> <p>TastyBites</p>
<ul>
<li><a href="/" use:link use:active>Home</a></li>
<li><a href="/contact" use:link use:active>Contact Us</a></li>
<li><a href="/cart" use:link use:active>Shopping Cart</a></li>
</ul>
<p>Location: {$location}</p>
</nav>
{/if}
<Router
{routes}
restoreScrollState={true}
on:routeLoading={routeLoading}
on:conditionsFailed={conditionFailure}
/>
<footer>
<p>TastyBites is a fake restaurant</p>
</footer>
<style> <style>
</style> </style>

25
front/src/routes.js Normal file
View file

@ -0,0 +1,25 @@
import { wrap } from "svelte-spa-router/wrap";
import PageLoading from "./routes/PageLoading.svelte";
const routes = {
"/": wrap({
asyncComponent: () => import("./routes/PageIndex.svelte"),
loadingComponent: PageLoading,
conditions: [],
userData: { showNavBar: true },
}),
"/contact": wrap({
asyncComponent: () => import("./routes/PageContact.svelte"),
loadingComponent: PageLoading,
conditions: [],
userData: { showNavBar: true },
}),
"/cart": wrap({
asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
loadingComponent: PageLoading,
conditions: [],
userData: { showNavBar: true },
}),
}
export default routes;

2
front/src/routes/PageContact.svelte Normal file
View file

@ -0,0 +1,2 @@
<h1>Contact us</h1>
<p>Nuh uh</p>

2
front/src/routes/PageIndex.svelte Normal file
View file

@ -0,0 +1,2 @@
<h1>TastyBites reeeee</h1>
<p>aurgh</p>

1
front/src/routes/PageLoading.svelte Normal file
View file

@ -0,0 +1 @@
<p>Loading</p>

2
front/src/routes/PageShoppingCart.svelte Normal file
View file

@ -0,0 +1,2 @@
<h1>Shopping Cart</h1>
<p>Empty....</p>