Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2024-12-28 18:36:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Effort to transition to TypeScript

Browse source 
Remove commit warnings
This commit is contained in:
Michał 2024-05-02 19:10:21 +01:00
parent 4f0ecd33e4
commit 1486c1b70a
18 changed files with 93 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
front/src/App.svelte
View file

@ -1,12 +1,11 @@
<script> <script>
import { get } from 'svelte/store';
import Router from 'svelte-spa-router'; import Router from 'svelte-spa-router';
import { replace, link } from 'svelte-spa-router'; import { replace, link } from 'svelte-spa-router';
import active from 'svelte-spa-router/active' import active from 'svelte-spa-router/active'
import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte'; import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
import Cart from '%/lib/cart.ts'; import Cart from './lib/cart';
import routes from '%/routes.js'; import routes from './routes';
import Logo from '/LogoAlt.svg'; import Logo from '/LogoAlt.svg';
const links = { const links = {
@ -17,7 +16,7 @@
} }
let cartLen = 0; let cartLen = 0;
Cart.subscribe((value) => { Cart.subscribe(() => {
cartLen = Cart.getLength(); cartLen = Cart.getLength();
}); });
@ -39,7 +38,7 @@
oldLocation = event.detail.location; oldLocation = event.detail.location;
} }
function conditionFailure(event) { function conditionFailure() {
replace("/"); replace("/");
} }
</script> </script>

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

@ -1,5 +1,5 @@
<script> <script>
import { getAnnouncements } from '%/lib/test-api.ts'; import { getAnnouncements } from '../lib/test-api';
let announcement = getAnnouncements(); let announcement = getAnnouncements();
</script> </script>
@ -16,7 +16,7 @@
{/await} {/await}
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
$padding: 1px; $padding: 1px;

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

@ -18,7 +18,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
.dropdown { .dropdown {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;

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

@ -1,7 +1,8 @@
<script> <script>
import { link } from 'svelte-spa-router'; import { link } from 'svelte-spa-router';
import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte'; import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
import { Labels } from "../lib/types";
import LoadingImage from '/MenuItemLoadingAlt.svg'; import LoadingImage from '/MenuItemLoadingAlt.svg';
export let item = {}; export let item = {};
@ -17,19 +18,15 @@
<div class="menu-item-header"> <div class="menu-item-header">
<ul> <ul>
{#each item.labels as label} {#each item.labels as label}
{#if label === "vegan"} {#if label === Labels.vegan}
<li class="vegan"><Leaf weight="fill" /></li> <li class="vegan"><Leaf weight="fill" /></li>
{/if} {:else if label === Labels.fish}
{#if label === "fish"}
<li class="fish"><Fish weight="fill" /></li> <li class="fish"><Fish weight="fill" /></li>
{/if} {:else if label === Labels.nut}
{#if label === "nut"}
<li class="nut"><Acorn weight="fill" /></li> <li class="nut"><Acorn weight="fill" /></li>
{/if} {:else if label === Labels.gluten}
{#if label === "gluten"}
<li class="gluten"><GrainsSlash weight="fill" /></li> <li class="gluten"><GrainsSlash weight="fill" /></li>
{/if} {:else if label === Labels.spicy}
{#if label === "spicy"}
<li class="spicy"><Pepper weight="fill" /></li> <li class="spicy"><Pepper weight="fill" /></li>
{/if} {/if}
{/each} {/each}

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

@ -1,5 +1,5 @@
<script> <script>
import MenuItem from "%/components/MenuItem.svelte"; import MenuItem from "./MenuItem.svelte";
export let items = []; export let items = [];
</script> </script>

6
front/src/lib/api.js
View file

@ -1,4 +1,4 @@
import Items from '%/lib/test-data.js'; import TestData from '%/lib/test-data.ts';
export async function getPopularToday() { export async function getPopularToday() {
const res = await fetch("/api/items") const res = await fetch("/api/items")
@ -15,7 +15,7 @@ export function getMenuItems() {
return [ return [
{ {
name: "Main Menu", name: "Main Menu",
items: Items, items: TestData,
}, },
{ {
name: "Breakfast", name: "Breakfast",
@ -23,7 +23,7 @@ export function getMenuItems() {
}, },
{ {
name: "Seasonal", name: "Seasonal",
items: Items, items: TestData,
}, },
]; ];
} }

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

@ -1,4 +1,5 @@
import Items from '%/lib/test-data.js'; import type { Item } from './types';
import TestData from './test-data';
let cache = { let cache = {
@ -7,8 +8,10 @@ let cache = {
}; };
// @ts-ignore
async function fakeDelay(timeout: number = 1000) { async function fakeDelay(timeout: number = 1000) {
await new Promise(resolve => setTimeout(resolve, timeout)); // @ts-ignore
await new Promise((resolve: TimerHandler) => setTimeout(resolve, timeout));
} }
@ -31,7 +34,7 @@ export async function getPopularToday() {
return cache.popular_today; return cache.popular_today;
} }
const data = Items; const data = TestData;
cache.popular_today = data; cache.popular_today = data;
await fakeDelay(200) await fakeDelay(200)
return data; return data;
@ -42,7 +45,7 @@ export async function getMenuItems() {
const data = [ const data = [
{ {
name: "Main Menu", name: "Main Menu",
items: Items, items: TestData,
}, },
{ {
name: "Breakfast", name: "Breakfast",
@ -50,7 +53,7 @@ export async function getMenuItems() {
}, },
{ {
name: "Seasonal", name: "Seasonal",
items: Items, items: TestData,
}, },
]; ];
await fakeDelay(20) await fakeDelay(20)
@ -61,7 +64,7 @@ export async function getMenuItems() {
export async function getItemsByUUID(items: string[]) { export async function getItemsByUUID(items: string[]) {
let data = []; let data = [];
Items.forEach((itemInDatabase) => { TestData.forEach((itemInDatabase: Item) => {
items.forEach((itemInRequest) => { items.forEach((itemInRequest) => {
if (itemInDatabase.uuid === itemInRequest) { if (itemInDatabase.uuid === itemInRequest) {
data.push(itemInDatabase); data.push(itemInDatabase);
@ -94,10 +97,10 @@ export async function postContactEmail(name: string, email: string, message: str
await fakeDelay(200) await fakeDelay(200)
if (!name) { if (!name) {
throw new Error("Namey missing"); throw new Error("Name missing");
} }
if (!email) { if (!email) {
throw new Error("Emaily missing"); throw new Error("Email missing");
} }
if (!message) { if (!message) {
throw new Error("Message missing"); throw new Error("Message missing");

50
front/src/lib/test-data.js → front/src/lib/test-data.ts
View file

@ -1,80 +1,72 @@
// "vegan", "fish", "nut", "spicy", "gluten" import type { Item } from './types';
import { Labels } from "./types";
const Items = [ const TestData: Item[] = [
// soap: {
{ {
uuid: "soap", uuid: "soap",
name: "Bar of Soap", name: "Bar of Soap",
price: 69.99, price: 69.99,
labels: ["vegan", "spicy"], labels: [Labels.vegan, Labels.spicy],
detail: "Example", detail: "Example",
}, },
// sock: {
{ {
uuid: "sock", uuid: "sock",
name: "Sock", name: "Sock",
price: 21, price: 21,
labels: ["vegan", "fish", "nut", "spicy"], labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
detail: "Example", detail: "Example",
}, },
// brick: {
{ {
uuid: "brick", uuid: "brick",
name: "Brick", name: "Brick",
price: 0, price: 0,
labels: ["spicy"], labels: [Labels.spicy],
detail: "Example", detail: "Example",
}, },
// toast: {
{ {
uuid: "toast", uuid: "toast",
name: "Toast", name: "Toast",
price: 4382749832743, price: 4382749832743,
labels: ["gluten"], labels: [Labels.gluten],
detail: "Example", detail: "Example",
}, },
// water: {
{ {
uuid: "water", uuid: "water",
name: "water", name: "water",
price: 1, price: 1,
labels: ["fish"], labels: [Labels.fish],
detail: "Example", detail: "Example",
}, },
// mouldy_bread: {
{ {
uuid: "mouldy_bread", uuid: "mouldy_bread",
name: "half eaten mouldy bread", name: "half eaten mouldy bread",
price: -99, price: -99,
labels: ["nut"], labels: [Labels.nut],
detail: "Example", detail: "Example",
}, },
// gwagwa: { {
// { uuid: "gwagwa",
// uuid: "gwagwa", name: "GwaGwa",
// name: "GwaGwa", price: 69,
// price: "Priceless", labels: [Labels.nut],
// labels: ["nut"], image: "/dab.jpg",
// image: "/dab.jpg", },
// },
// hogmelon: {
{ {
uuid: "hogmelon", uuid: "hogmelon",
name: "Hogermellon", name: "Hogermellon",
price: "1111", price: 1111,
labels: ["fish"], labels: [Labels.fish],
image: "/wathog.jpg", image: "/wathog.jpg",
detail: "Example", detail: "Example",
}, },
// bluhog: {
{ {
uuid: "bluhog", uuid: "bluhog",
name: "Blue HOGGGGG", name: "Blue HOGGGGG",
price: "ARUGH", price: 0,
labels: ["nut", "gluten", "spicy"], labels: [Labels.nut, Labels.gluten, Labels.spicy],
image: "/sonichog.jpg", image: "/sonichog.jpg",
detail: "Example", detail: "Example",
}, },
]; ];
export default Items; export default TestData;

16
front/src/lib/types.ts Normal file
View file

@ -0,0 +1,16 @@
export interface Item {
uuid: string,
name: string,
price: number,
detail?: string,
labels: Labels[],
image?: string,
}
export enum Labels {
vegan = "VEGAN",
fish = "FISH",
nut = "NUT",
spicy = "SPICY",
gluten = "GLUTEN",
}

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

@ -8,7 +8,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
div { div {
padding: $spacing-large; padding: $spacing-large;

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

@ -8,7 +8,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
div { div {
padding: $spacing-large; padding: $spacing-large;

8
front/src/pages/PageCart.svelte
View file

@ -1,10 +1,10 @@
<script> <script>
import { link } from 'svelte-spa-router'; import { link } from 'svelte-spa-router';
import { getItemsByUUID } from "%/lib/test-api.ts"; import { getItemsByUUID } from "../lib/test-api";
import LoadingBar from "%/components/LoadingBar.svelte"; import Cart from "../lib/cart";
import Cart from '%/lib/cart.ts'; import LoadingBar from "../components/LoadingBar.svelte";
import MenuList from "%/components/MenuList.svelte"; import MenuList from "../components/MenuList.svelte";
$: items = getItemsByUUID($Cart.map((item) => item.uuid)); $: items = getItemsByUUID($Cart.map((item) => item.uuid));
</script> </script>

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

@ -1,9 +1,9 @@
<script> <script>
import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte"; import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
import DropDown from "%/components/DropDown.svelte"; import { postContactEmail } from "../lib/test-api";
import { postContactEmail } from "%/lib/test-api.ts"; import { expandOnTyping } from "../lib/utils";
import { expandOnTyping } from "%/lib/utils.js"; import DropDown from "../components/DropDown.svelte";
const minMessageLength = 150; const minMessageLength = 150;
@ -27,7 +27,7 @@
messageValid = message.length > minMessageLength messageValid = message.length > minMessageLength
} }
function onSubmit(event) { function onSubmit() {
formMessage = postContactEmail(name, email, message); formMessage = postContactEmail(name, email, message);
} }
</script> </script>
@ -117,7 +117,7 @@
</form> </form>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
#name, #email { #name, #email {
width: 300px; width: 300px;

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

@ -4,10 +4,10 @@
import { ArrowUpRight } from "phosphor-svelte"; import { ArrowUpRight } from "phosphor-svelte";
import L from 'leaflet'; import L from 'leaflet';
import { getPopularToday } from "%/lib/test-api.ts"; import { getPopularToday } from "../lib/test-api";
import LoadingBar from "%/components/LoadingBar.svelte"; import LoadingBar from "../components/LoadingBar.svelte";
import AnnouncementBanner from "%/components/AnnouncementBanner.svelte"; import AnnouncementBanner from "../components/AnnouncementBanner.svelte";
import MenuList from "%/components/MenuList.svelte"; import MenuList from "../components/MenuList.svelte";
let items = getPopularToday(); let items = getPopularToday();
@ -72,7 +72,7 @@
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
a { a {
margin-top: 8px; margin-top: 8px;

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

@ -1,10 +1,10 @@
<script> <script>
import { SmileySad } from "phosphor-svelte"; import { SmileySad } from "phosphor-svelte";
import Cart from "%/lib/cart.ts"; import { getPopularToday, getItemByUUID } from "../lib/test-api";
import { getPopularToday, getItemByUUID } from "%/lib/test-api.ts"; import Cart from "../lib/cart";
import MenuList from "%/components/MenuList.svelte"; import MenuList from "../components/MenuList.svelte";
import LoadingBar from "%/components/LoadingBar.svelte"; import LoadingBar from "../components/LoadingBar.svelte";
import LoadingImage from "/MenuItemLoading.svg"; import LoadingImage from "/MenuItemLoading.svg";
export let params; export let params;
@ -83,7 +83,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
$padding: 1px; $padding: 1px;

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

@ -1,5 +1,5 @@
<script> <script>
import LoadingBar from "%/components/LoadingBar.svelte"; import LoadingBar from "../components/LoadingBar.svelte";
const FunnyMessages = [ const FunnyMessages = [
"*patiently waiting*", "*patiently waiting*",

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

@ -1,10 +1,10 @@
<script> <script>
import { ArrowClockwise } from "phosphor-svelte"; import { ArrowClockwise } from "phosphor-svelte";
import LoadingBar from "%/components/LoadingBar.svelte"; import { getMenuItems } from "../lib/test-api";
import MenuList from "%/components/MenuList.svelte"; import LoadingBar from "../components/LoadingBar.svelte";
import DropDown from "%/components/DropDown.svelte"; import MenuList from "../components/MenuList.svelte";
import { getMenuItems } from "%/lib/test-api.ts"; import DropDown from "../components/DropDown.svelte";
let items = getMenuItems(); let items = getMenuItems();
@ -163,7 +163,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "%/styles/vars"; @import "../styles/vars";
.menu { .menu {
display: flex; display: flex;

1
front/src/styles/main.scss
View file

@ -7,4 +7,3 @@
@import "container"; @import "container";
@import "menu_item"; @import "menu_item";
@import "form_element"; @import "form_element";