louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ordering app,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 14:01:03 +08:00
parent 3bcb40c5ef
commit 7cc6d939f5
24 changed files with 1522 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.module.css Normal file
View File

@@ -0,0 +1,54 @@
.coffeeCard {
padding: 0.8rem;
border-radius: 20px;
}
.coffeeCard img {
border-radius: 20px;
height: 10rem;
width: 100%;
}
.coffeeCard ion-card-title {
margin-top: 1rem;
font-size: 1rem;
}
.coffeePrice {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
margin-top: -0.2rem;
}
.coffeeAddButton {
color: var(--ion-color-main) !important;
margin-top: 0.5rem;
}
.coffeeCardLong img {
border-radius: 20px;
height: 5rem !important;
width: 100%;
}
.coffeeCardLongDetails {
margin-left: 1rem;
margin-top: -0.7rem;
}
.coffeeCardLongDetails p {
font-size: 0.8rem;
margin: 0;
margin-top: 0.2rem;
}

28
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from "@ionic/react";
import { ArrowRightSquare } from "react-iconly";
import styles from "./CoffeeCard.module.css";
const CoffeeCard = props => {
const { coffee } = props;
return (
<IonCol size="6" className="animate__animated animate__fadeIn">
<IonCard className={ styles.coffeeCard } routerLink={ `/coffee/${ coffee.id }` }>
<img src={ coffee.image } alt="coffee" />
<IonCardTitle>{ coffee.name }</IonCardTitle>
<IonCardSubtitle>{ coffee.summary }</IonCardSubtitle>
<div className={ styles.coffeePrice }>
<h4>${ coffee.price }</h4>
<div className={ styles.coffeeAddButton }>
<ArrowRightSquare set="bold" className="yellow-icon" />
</div>
</div>
</IonCard>
</IonCol>
);
}
export default CoffeeCard;

35
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCardOffer.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from "@ionic/react";
import { Plus } from "react-iconly";
import styles from "./CoffeeCard.module.css";
const CoffeeCardOffer = props => {
const { offer } = props;
return (
<IonRow>
<IonCol size="12" className="animate__animated animate__fadeIn">
<IonCard className={ `${ styles.coffeeCard } ${ styles.coffeeCardLong }` }>
<IonRow>
<IonCol size="4">
<img src={ offer.image } alt="coffee" />
</IonCol>
<IonCol size="8">
<div className={ styles.coffeeCardLongDetails }>
<IonCardTitle>{ offer.title }</IonCardTitle>
<p>{ offer.description }</p>
</div>
</IonCol>
</IonRow>
</IonCard>
</IonCol>
</IonRow>
);
}
export default CoffeeCardOffer;

44
03_source/mobile/src/pages/DemoOrderingApp/components/Tabs.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
import { Redirect, Route } from 'react-router-dom';
import { Home, Bag, Heart2, Notification } from 'react-iconly';
import Homepage from '../pages/Home';
import Favourites from '../pages/Favourites';
import Cart from '../pages/Cart';
const Tabs = (props) => {
return (
<IonTabs>
<IonRouterOutlet>
<Route
exact
path="/demo-ordering-app/tabs/home"
render={(props) => <Homepage {...props} />}
/>
<Route exact path="/demo-ordering-app/tabs/cart" render={(props) => <Cart {...props} />} />
<Route
exact
path="/demo-ordering-app/tabs/favourites"
render={(props) => <Favourites {...props} />}
/>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-ordering-app/tabs/home">
<Home set="bold" />
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-ordering-app/tabs/cart">
<Bag set="bold" />
</IonTabButton>
<IonTabButton tab="tab3" href="/demo-ordering-app/tabs/favourites">
<Heart2 set="bold" />
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;

71
03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { IonButton, IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from "@ionic/react";
import { useRef } from "react";
import { Bag } from "react-iconly";
import { addToCart } from "../store/CartStore";
import '../pages/Home.css';
const ViewCoffeeCard = props => {
const { coffee, cartRef } = props;
const coffeeCartRef = useRef();
const addCoffeeToCart = (e, coffeeID) => {
e.preventDefault();
e.stopPropagation();
coffeeCartRef.current.style.display = "";
coffeeCartRef.current.classList.add("animate__fadeOutUp");
setTimeout(() => {
cartRef.current.classList.add("animate__tada");
addToCart(coffeeID);
setTimeout(() => {
cartRef.current.classList.remove("animate__tada");
coffeeCartRef.current.style.display = "none";
}, 500);
}, 500);
}
return (
<IonRow key={ coffee.id } className="animate__animated animate__fadeIn">
<IonCol size="6">
<IonCard className="coffee-card">
<img src={ coffee.image } alt="coffee type" />
<IonCardTitle className="custom-margin-left">{ coffee.name }</IonCardTitle>
<IonCardSubtitle className="custom-margin-left">{ coffee.summary }</IonCardSubtitle>
</IonCard>
</IonCol>
<IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
<IonCardSubtitle>Description</IonCardSubtitle>
<p>{ coffee.description }</p>
<IonRow className="ion-justify-content-between">
<IonCol size="8">
<IonButton routerLink={ `/coffee/${ coffee.id }`} color="main" expand="block">View &rarr;</IonButton>
</IonCol>
<IonCol size="4">
<IonButton color="main" expand="block" onClick={ e => addCoffeeToCart(e, coffee.id) }>
<Bag set="bold" />
</IonButton>
<div ref={ coffeeCartRef } style={{ position: "absolute", display: "none", fontSize: "3rem" }} className="animate__animated">
<Bag set="bold" />
</div>
</IonCol>
</IonRow>
</IonCol>
</IonRow>
);
}
export default ViewCoffeeCard;

53
03_source/mobile/src/pages/DemoOrderingApp/index.tsx
View File

@@ -1,38 +1,39 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonRouterOutlet, IonTabs } from '@ionic/react';
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2';
import './theme/variables.scss';
import './style.scss';
import Tabs from './components/Tabs';
import Homepage from './pages/Home';
import ViewCoffee from './pages/ViewCoffee';
import ViewCoffees from './pages/ViewCoffees';
import React from 'react';
function DemoOrderingApp() {
function DemoOrderingApp(): React.JSX.Element {
return (
<IonTabs>
<IonTabs className="demo-ordering-app">
<IonRouterOutlet>
<Route exact path="/demo-ordering-app/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-ordering-app/tab2">
<Tab2 />
</Route>
<Route path="/demo-ordering-app/tabs" render={() => <Tabs />} />
<Route
exact={false}
path="/demo-ordering-app/coffee/:id"
render={(props) => <ViewCoffee {...props} />}
/>
<Route
exact={false}
path="/demo-ordering-app/coffees"
render={(props) => <ViewCoffees {...props} />}
/>
<Route
exact={false}
path="/demo-ordering-app/coffees/:from_search"
render={(props) => <ViewCoffees {...props} />}
/>
<Redirect exact path="/demo-ordering-app" to="/demo-ordering-app/tab1" />
<Route path="/demo-ordering-app/" component={Homepage} exact={true} />
<Redirect exact from="/demo-ordering-app/" to="/demo-ordering-app/tabs/home" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-ordering-app/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-ordering-app/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

4
03_source/mobile/src/pages/DemoOrderingApp/module.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}

39
03_source/mobile/src/pages/DemoOrderingApp/pages/Cart.module.css Normal file
View File

@@ -0,0 +1,39 @@
.cartCheckout {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
margin: 1rem;
}
.cartFooter {
border-top: 2px solid #141a22;
background-color: var(--ion-background-color);
padding-left: 1rem;
padding-right: 1rem;
}
.cartCheckout ion-card-subtitle {
font-size: 1.3rem;
color: white !important;
}
.cartItem {
padding: 1rem;
}
.cartItem img {
height: 3rem;
width: 3rem;
border-radius: 10px;
}
.cartSlider:not(:nth-child(1)) {
border-top: 2px solid var(--ion-background-color);
}
.cartActions {
display: flex;
flex-direction: column;
}

129
03_source/mobile/src/pages/DemoOrderingApp/pages/Cart.tsx Normal file
View File

@@ -0,0 +1,129 @@
import {
IonBadge,
IonButton,
IonCardSubtitle,
IonCol,
IonContent,
IonFooter,
IonHeader,
IonItem,
IonItemOption,
IonItemOptions,
IonItemSliding,
IonLabel,
IonList,
IonNote,
IonPage,
IonRow,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { Delete, TickSquare } from 'react-iconly';
import { useEffect, useState } from 'react';
import { CartStore, CoffeeStore } from '../store';
import { removeFromCart } from '../store/CartStore';
import { getCartCoffees, getCoffees } from '../store/Selectors';
import styles from './Cart.module.css';
const Cart = (): React.JSX.Element => {
const coffees = CoffeeStore.useState(getCoffees);
const cart = CartStore.useState(getCartCoffees);
const [cartProducts, setCartProducts] = useState([]);
const [amountLoaded, setAmountLoaded] = useState(6);
const [total, setTotal] = useState(0);
useEffect(() => {
const getCartProducts = () => {
setCartProducts([]);
setTotal(0);
cart.forEach((coffee) => {
var coffeeID = coffee;
const tempCoffee = coffees.filter((p) => parseInt(p.id) === parseInt(coffeeID))[0];
setTotal((prevTotal) => prevTotal + parseFloat(tempCoffee.price));
setCartProducts((prevSearchResults) => [...prevSearchResults, tempCoffee]);
});
};
getCartProducts();
}, [cart]);
const fetchMore = async (e) => {
// Increment the amount loaded by 6 for the next iteration
setAmountLoaded((prevAmount) => prevAmount + 6);
e.target.complete();
};
const removeProductFromCart = async (index) => {
removeFromCart(index);
};
return (
<IonPage id="cart-page">
<IonHeader>
<IonToolbar>
<IonTitle>Checkout</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonRow className="ion-text-center ion-margin-top ion-margin-bottom">
<IonCol size="12">
<IonNote>
{cartProducts && cartProducts.length}{' '}
{cartProducts.length > 1 || cartProducts.length === 0 ? ' coffees' : ' coffee'} found
</IonNote>
</IonCol>
</IonRow>
<IonList>
{cartProducts &&
cartProducts.map((coffee, index) => {
if (index <= amountLoaded) {
return (
<IonItemSliding className={styles.cartSlider}>
<IonItem key={index} lines="none" detail={false} className={styles.cartItem}>
<img alt="cart coffee" src={coffee.image} />
<IonLabel className="ion-padding-start ion-text-wrap">
<h4>{coffee.name}</h4>
</IonLabel>
<div className={styles.cartActions}>
<IonBadge color="dark">${coffee.price}</IonBadge>
</div>
</IonItem>
<IonItemOptions side="end">
<IonItemOption
color="main"
style={{ paddingLeft: '1rem', paddingRight: '1rem' }}
onClick={() => removeProductFromCart(index)}
>
<Delete set="bold" />
</IonItemOption>
</IonItemOptions>
</IonItemSliding>
);
}
})}
</IonList>
</IonContent>
<IonFooter className={styles.cartFooter}>
<div className={styles.cartCheckout}>
<IonCardSubtitle>${total.toFixed(2)}</IonCardSubtitle>
<IonButton color="main">
<TickSquare set="bold" />
<span style={{ marginTop: '-0rem' }}>&nbsp;Checkout</span>
</IonButton>
</div>
</IonFooter>
</IonPage>
);
};
export default Cart;

113
03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx Normal file
View File

@@ -0,0 +1,113 @@
import {
IonButtons,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonNote,
IonPage,
IonRow,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { Bag } from 'react-iconly';
import { useEffect, useRef, useState } from 'react';
import ViewCoffeeCard from '../components/ViewCoffeeCard';
import { CartStore, CoffeeStore, FavouriteStore } from '../store';
import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors';
import './Home.css';
const Favourites = (): React.JSX.Element => {
const cartRef = useRef(null);
const router = useIonRouter();
const coffees = CoffeeStore.useState(getCoffees);
const favourites = FavouriteStore.useState(getFavouriteCoffees);
const cart = CartStore.useState(getCartCoffees);
const [searchResults, setSearchResults] = useState([]);
const [amountLoaded, setAmountLoaded] = useState(6);
useEffect(() => {
const getFavourites = () => {
setSearchResults([]);
favourites.forEach((favourite) => {
var coffeeID = favourite;
const tempCoffee = coffees.filter((c) => parseInt(c.id) === parseInt(coffeeID))[0];
setSearchResults((prevSearchResults) => [...prevSearchResults, tempCoffee]);
});
};
getFavourites();
}, [favourites]);
const fetchMore = async (e) => {
// Increment the amount loaded by 6 for the next iteration
setAmountLoaded((prevAmount) => prevAmount + 6);
e.target.complete();
};
return (
<IonPage id="favourites-page">
<IonHeader translucent>
<IonToolbar>
<IonTitle>Favourites</IonTitle>
<IonButtons slot="end">
<div
ref={cartRef}
className="button-container animate__animated"
onClick={() => router.goBack()}
>
<Bag set="bold" className={cart && cart.length > 0 ? 'yellow-icon' : 'gray-icon'} />
</div>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonGrid>
<IonRow className="ion-text-center">
<IonCol size="12">
<IonNote>
{searchResults && searchResults.length}{' '}
{searchResults.length > 1 || searchResults.length === 0
? ' favourites'
: ' favourite'}{' '}
found
</IonNote>
</IonCol>
</IonRow>
<IonRow>
{searchResults &&
searchResults.map((coffee, index) => {
if (index <= amountLoaded) {
return (
<ViewCoffeeCard
key={`favourite_coffee_${index}`}
coffee={coffee}
cartRef={cartRef}
/>
);
}
})}
</IonRow>
</IonGrid>
<IonInfiniteScroll threshold="100px" onIonInfinite={fetchMore}>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Fetching more..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
export default Favourites;

11
03_source/mobile/src/pages/DemoOrderingApp/pages/Home.scss Normal file
View File

@@ -0,0 +1,11 @@
.demo-ordering-app {
.main-heading {
font-size: 2.3rem;
font-weight: 700;
}
.heading {
letter-spacing: -0.05rem;
margin-left: 1rem;
}
}

115
03_source/mobile/src/pages/DemoOrderingApp/pages/Home.tsx Normal file
View File

@@ -0,0 +1,115 @@
import {
IonButton,
IonButtons,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonPage,
IonRouterLink,
IonRow,
IonSearchbar,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { chevronBackOutline, searchSharp } from 'ionicons/icons';
import { Category, Filter } from 'react-iconly';
import CoffeeCard from '../components/CoffeeCard';
import CoffeeCardOffer from '../components/CoffeeCardOffer';
import { CoffeeStore, CoffeeOfferStore } from '../store';
import { getCoffees, getOffers } from '../store/Selectors';
import './Home.scss';
const Homepage = (): React.JSX.Element => {
const router = useIonRouter();
const coffees = CoffeeStore.useState(getCoffees);
const offers = CoffeeOfferStore.useState(getOffers);
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
<div className="button-container">
<Category set="bold" className="gray-icon" />
</div>
</IonButtons>
<IonTitle>Ionic Coffee</IonTitle>
<IonButtons slot="end">
<div className="button-container-img">
<img
src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg"
alt="avatar"
/>
</div>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar className="inner-toolbar">
<IonRow className="ion-no-padding ion-no-margin">
<IonCol size="9" className="ion-no-padding ion-no-margin">
<h1 className="main-heading">Find the best coffee near you</h1>
</IonCol>
</IonRow>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow className="search-container">
<IonCol size="12">
<IonSearchbar
onClick={() => router.push('/coffees/true')}
searchIcon={searchSharp}
placeholder="Try 'Caramel Latte'"
/>
</IonCol>
</IonRow>
<IonRow className="outer-heading ion-justify-content-between ion-align-items-center">
<h4 className="heading">Popular</h4>
<IonRouterLink color="main" routerLink="/coffees">
<Filter />
</IonRouterLink>
</IonRow>
<IonRow>
{coffees.map((coffee) => {
if (coffee.id <= 2) {
return <CoffeeCard key={coffee.id} coffee={coffee} />;
}
})}
</IonRow>
<IonRow className="outer-heading">
<IonCol size="12">
<h4 className="heading">Special Offers</h4>
</IonCol>
</IonRow>
{offers.map((offer) => {
return <CoffeeCardOffer key={offer.id} offer={offer} />;
})}
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Homepage;

50
03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.module.css Normal file
View File

@@ -0,0 +1,50 @@
.checkout {
border-top: 2px solid #141a22;
background-color: var(--ion-background-color);
padding-bottom: 1rem;
}
.checkoutDetails {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
margin-left: 2rem;
margin-right: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.checkoutDetails ion-button {
width: 60%;
--border-radius: 10px;
height: 3.5rem;
}
.priceDetails {
/* margin-left: 2rem; */
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.priceDetails h4 {
margin: 0;
padding: 0;
color: white !important;
}
.extra {
margin-top: 0.3rem;
padding: 0.75rem;
color: #475464;
}

208
03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx Normal file
View File

@@ -0,0 +1,208 @@
import {
IonBadge,
IonButton,
IonButtons,
IonCard,
IonCardSubtitle,
IonCol,
IonContent,
IonFooter,
IonGrid,
IonHeader,
IonPage,
IonRow,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { useEffect, useRef, useState } from 'react';
import { Bag, Heart, CaretLeft, InfoSquare } from 'react-iconly';
import { useParams } from 'react-router';
import { CoffeeSizeStore, CoffeeStore, FavouriteStore } from '../store';
import { addToCart } from '../store/CartStore';
import { addToFavourites } from '../store/FavouriteStore';
import { getCoffee, getCoffeeSizes, getFavouriteCoffees } from '../store/Selectors';
import './Home.css';
import styles from './ViewCoffee.module.css';
const ViewCoffee = (props): React.JSX.Element => {
const router = useIonRouter();
const params = useParams();
const coffee = CoffeeStore.useState(getCoffee(params.id));
const favourites = FavouriteStore.useState(getFavouriteCoffees);
const coffeeSizes = CoffeeSizeStore.useState(getCoffeeSizes);
const [selectedSize, setSelectedSize] = useState(false);
const favouriteRef = useRef();
const coffeeCartRef = useRef();
const [isFavourite, setIsFavourite] = useState(false);
const getPrice = () =>
coffee.prices.filter((p) => parseInt(p.size_id) === parseInt(selectedSize))[0].price;
useEffect(() => {
const coffeeID = params.id;
const tempIsFavourite = favourites.find((f) => parseInt(f) === parseInt(coffeeID));
setIsFavourite(tempIsFavourite);
}, [params.id, favourites]);
const addCoffeeToFavourites = (e, coffeeID) => {
e.preventDefault();
addToFavourites(coffeeID);
favouriteRef.current.classList.add('animate__tada');
setTimeout(() => {
favouriteRef.current.classList.remove('animate__tada');
}, 700);
};
const addCoffeeToCart = (e, coffeeID) => {
e.preventDefault();
e.stopPropagation();
coffeeCartRef.current.style.display = '';
coffeeCartRef.current.classList.add('animate__fadeOutUp');
setTimeout(() => {
addToCart(coffeeID);
setTimeout(() => {
coffeeCartRef.current.style.display = 'none';
}, 500);
}, 500);
};
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonButtons slot="start">
<div className="button-container" onClick={() => router.goBack()}>
<CaretLeft set="bold" className="gray-icon" />
</div>
</IonButtons>
<IonTitle>{coffee.name}</IonTitle>
<IonButtons slot="end">
<div
ref={favouriteRef}
className="button-container animate__animated"
onClick={(e) => addCoffeeToFavourites(e, coffee.id)}
>
<Heart set="bold" className={isFavourite ? 'yellow-icon' : 'gray-icon'} />
</div>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader
collapse="condense"
className="custom-margin-left animate__animated animate__fadeIn"
>
<IonToolbar className="inner-toolbar">
<IonRow className="ion-no-padding ion-no-margin">
<IonCol size="9" className="ion-no-padding ion-no-margin">
<h1 className="main-heading">{coffee.name}</h1>
<IonCardSubtitle>{coffee.summary}</IonCardSubtitle>
</IonCol>
</IonRow>
</IonToolbar>
</IonHeader>
<IonGrid className="animate__animated animate__fadeIn">
<IonRow className="search-container">
<IonCol size="6">
<IonCard className="coffee-card">
<img src={coffee.image} alt="coffee type" />
</IonCard>
</IonCol>
<IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
<IonCardSubtitle>Description</IonCardSubtitle>
<p>{coffee.description}</p>
<InfoSquare set="bold" className="app-icon" />
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" className="ion-padding">
<IonCardSubtitle className="custom-margin-left">Extras included</IonCardSubtitle>
<IonRow>
<IonCol size="4">
{coffee.extras.map((extra, index) => {
return (
<IonBadge
key={`extra_${index}`}
className={styles.extra}
expand="block"
color="custom-light"
>
{extra}
</IonBadge>
);
})}
</IonCol>
</IonRow>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" className="ion-padding">
<IonCardSubtitle className="custom-margin-left">Pick your size</IonCardSubtitle>
<IonRow>
{coffeeSizes.map((size) => {
return (
<IonCol key={size.id} size="4">
<IonButton
onClick={() => setSelectedSize(size.id)}
expand="block"
color={size.id === selectedSize ? 'main' : 'custom-light'}
fill={size.id === selectedSize ? 'outline' : 'solid'}
>
{size.name}
</IonButton>
</IonCol>
);
})}
</IonRow>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
<IonFooter className={styles.checkout}>
<div className={styles.checkoutDetails}>
<div className={styles.priceDetails}>
<IonCardSubtitle>Price</IonCardSubtitle>
<h4>${selectedSize ? getPrice() : '0.00'}</h4>
</div>
<IonButton
onClick={(e) => addCoffeeToCart(e, coffee.id)}
disabled={!selectedSize}
expand="block"
color="main"
>
Add to cart
</IonButton>
<div
ref={coffeeCartRef}
style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
className="animate__animated"
>
<Bag set="bold" className="yellow-icon" />
</div>
</div>
</IonFooter>
</IonPage>
);
};
export default ViewCoffee;

117
03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx Normal file
View File

@@ -0,0 +1,117 @@
import {
IonButtons,
IonCardSubtitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonPage,
IonRow,
IonSearchbar,
IonTitle,
IonToolbar,
useIonRouter,
useIonViewDidEnter,
} from '@ionic/react';
import { searchSharp } from 'ionicons/icons';
import { useRef, useState } from 'react';
import { Bag, CaretLeft } from 'react-iconly';
import { useParams } from 'react-router';
import ViewCoffeeCard from '../components/ViewCoffeeCard';
import { CartStore, CoffeeStore } from '../store';
import { getCoffees, getCartCoffees } from '../store/Selectors';
import './Home.css';
const ViewCoffees = (props): React.JSX.Element => {
const router = useIonRouter();
const params = useParams();
const coffees = CoffeeStore.useState(getCoffees);
const cart = CartStore.useState(getCartCoffees);
const [results, setResults] = useState(coffees);
const cartRef = useRef();
const searchRef = useRef();
useIonViewDidEnter(() => {
if (params.from_search) {
setTimeout(() => {
searchRef.current.setFocus();
}, 500);
}
});
const search = (e) => {
const searchTerm = e.currentTarget.value;
if (searchTerm !== '') {
const searchTermLower = searchTerm.toLowerCase();
const newResults = coffees.filter((e) => e.name.toLowerCase().includes(searchTermLower));
setResults(newResults);
} else {
setResults(coffees);
}
};
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonButtons slot="start">
<div className="button-container" onClick={() => router.goBack()}>
<CaretLeft set="bold" className="gray-icon" />
</div>
</IonButtons>
<IonTitle>Full Range</IonTitle>
<IonButtons slot="end">
<div
ref={cartRef}
className="button-container animate__animated"
onClick={() => router.push('/tabs/cart')}
>
<Bag set="bold" className={cart && cart.length > 0 ? 'yellow-icon' : 'gray-icon'} />
</div>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader
collapse="condense"
className="custom-margin-left animate__animated animate__fadeIn"
>
<IonToolbar className="inner-toolbar">
<IonRow className="ion-no-padding ion-no-margin">
<IonCol size="9" className="ion-no-padding ion-no-margin">
<h1 className="main-heading">View Full Range</h1>
<IonCardSubtitle>Our range of succulent coffee</IonCardSubtitle>
</IonCol>
</IonRow>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow className="search-container animate__animated animate__fadeIn">
<IonCol size="12">
<IonSearchbar
onKeyDown={(e) => search(e)}
id="searchbar"
ref={searchRef}
searchIcon={searchSharp}
placeholder="Try 'Cappuccino'"
/>
</IonCol>
</IonRow>
{results.map((coffee) => {
return <ViewCoffeeCard key={coffee.id} coffee={coffee} cartRef={cartRef} />;
})}
</IonGrid>
</IonContent>
</IonPage>
);
};
export default ViewCoffees;

19
03_source/mobile/src/pages/DemoOrderingApp/store/CartStore.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Store } from "pullstate";
const CartStore = new Store({
total: 0,
coffee_ids: []
});
export default CartStore;
export const addToCart = (coffeeID) => {
CartStore.update(s => { s.coffee_ids = [ ...s.coffee_ids, `${ parseInt(coffeeID) }` ]; });
}
export const removeFromCart = coffeeIndex => {
CartStore.update(s => { s.coffee_ids.splice(coffeeIndex, 1) });
}

15
03_source/mobile/src/pages/DemoOrderingApp/store/CoffeeOfferStore.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Store } from 'pullstate';
const CoffeeOfferStore = new Store({
offers: [
{
id: 1,
title: "Buy one get one free!",
description: "Any time you buy a coffee using your loyalty card scheme, you can get one free",
image: "https://images.pexels.com/photos/861090/pexels-photo-861090.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
}
]
});
export default CoffeeOfferStore;

21
03_source/mobile/src/pages/DemoOrderingApp/store/CoffeeSizeStore.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Store } from 'pullstate';
const CoffeeSizeStore = new Store({
sizes: [
{
id: 1,
name: "Small"
},
{
id: 2,
name: "Medium",
},
{
id: 3,
name: "Large"
}
]
});
export default CoffeeSizeStore;

101
03_source/mobile/src/pages/DemoOrderingApp/store/CoffeeStore.tsx Normal file
View File

@@ -0,0 +1,101 @@
import { Store } from 'pullstate';
const CoffeeStore = new Store({
coffees: [
{
id: 1,
name: "Cappuccino",
summary: "With Milk",
extras: [ "milk" ],
description: "This is a beautiful cup of cappuccino, complimented with semi-skimmed milk. Comes in three different sizes.",
price: "3.20",
prices: [
{
size_id: 1,
price: "3.20"
},
{
size_id: 2,
price: "3.90"
},
{
size_id: 3,
price: "4.20"
}
],
image: "https://images.pexels.com/photos/1170659/pexels-photo-1170659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
},
{
id: 2,
name: "Lattè",
summary: "With Caramel",
extras: [ "caramel" ],
description: "This is a beautiful cup of lattè, complimented with sweet caramel. Comes in three different sizes.",
price: "5.10",
prices: [
{
size_id: 1,
price: "4.35"
},
{
size_id: 2,
price: "4.85"
},
{
size_id: 3,
price: "5.10"
}
],
image: "https://images.pexels.com/photos/2067399/pexels-photo-2067399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
},
{
id: 3,
name: "Espresso",
summary: "With 2 shots",
extras: [ "2 shots" ],
description: "This is a beautiful cup of espresso, complimented with 2 shots. Comes in three different sizes.",
price: "6.20",
prices: [
{
size_id: 1,
price: "6.20"
},
{
size_id: 2,
price: "6.80"
},
{
size_id: 3,
price: "7.10"
}
],
image: "https://images.pexels.com/photos/302894/pexels-photo-302894.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
},
{
id: 4,
name: "Americano",
summary: "With Milk",
extras: [ "Milk" ],
description: "This is a beautiful cup of Americano, complimented with full fat milk. Comes in three different sizes.",
price: "5.35",
prices: [
{
size_id: 1,
price: "5.35"
},
{
size_id: 2,
price: "5.70"
},
{
size_id: 3,
price: "6.50"
}
],
image: "https://images.pexels.com/photos/6207297/pexels-photo-6207297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
}
]
});
export default CoffeeStore;

21
03_source/mobile/src/pages/DemoOrderingApp/store/FavouriteStore.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Store } from "pullstate";
const FavouriteStore = new Store({
total: 0,
coffee_ids: []
});
export default FavouriteStore;
export const addToFavourites = (coffeeID) => {
FavouriteStore.update(s => {
if (s.coffee_ids.find(id => id === parseInt(coffeeID))) {
s.coffee_ids = s.coffee_ids.filter(id => id !== parseInt(coffeeID));
} else {
s.coffee_ids = [ ...s.coffee_ids, parseInt(coffeeID) ];
}
});
}

17
03_source/mobile/src/pages/DemoOrderingApp/store/Selectors.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { createSelector } from 'reselect';
const getState = (state) => state;
// General getters
export const getCoffees = createSelector(getState, (state) => state.coffees);
export const getOffers = createSelector(getState, (state) => state.offers);
export const getCoffeeSizes = createSelector(getState, (state) => state.sizes);
export const getCartCoffees = createSelector(getState, (state) => state.coffee_ids);
export const getFavouriteCoffees = createSelector(getState, (state) => state.coffee_ids);
// More specific getters
export const getCoffee = (id) =>
createSelector(
getState,
(state) => state.coffees.filter((c) => parseInt(c.id) === parseInt(id))[0]
);

5
03_source/mobile/src/pages/DemoOrderingApp/store/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
export { default as CoffeeStore } from "./CoffeeStore";
export { default as CoffeeSizeStore } from "./CoffeeSizeStore";
export { default as CoffeeOfferStore } from "./CoffeeOfferStore";
export { default as CartStore } from "./CartStore";
export { default as FavouriteStore } from "./FavouriteStore";

103
03_source/mobile/src/pages/DemoOrderingApp/style.scss
View File

@@ -1,103 +0,0 @@
#about-page {
ion-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
--background: transparent;
--color: white;
}
ion-toolbar ion-back-button,
ion-toolbar ion-button,
ion-toolbar ion-menu-button {
--color: white;
}
.about-header {
position: relative;
width: 100%;
height: 30%;
}
.about-header .about-image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.about-header .madison {
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
}
.about-header .austin {
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
}
.about-header .chicago {
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
}
.about-header .seattle {
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
}
.about-info {
position: relative;
margin-top: -10px;
border-radius: 10px;
background: var(--ion-background-color, #fff);
z-index: 2; // display rounded border above header image
}
.about-info h3 {
margin-top: 0;
}
.about-info ion-list {
padding-top: 0;
}
.about-info p {
line-height: 130%;
color: var(--ion-color-dark);
}
.about-info ion-icon {
margin-inline-end: 32px;
}
/*
* iOS Only
*/
.ios .about-info {
--ion-padding: 19px;
}
.ios .about-info h3 {
font-weight: 700;
}
}
#date-input-popover {
--offset-y: -var(--ion-safe-area-bottom);
--max-width: 90%;
--width: 336px;
}

278
03_source/mobile/src/pages/DemoOrderingApp/theme/variables.scss Normal file
View File

@@ -0,0 +1,278 @@
.demo-ordering-app {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
/** custom **/
--ion-color-main: rgb(221, 174, 21);
--ion-color-main-rgb: 221, 174, 21;
--ion-color-main-contrast: rgb(0, 0, 0);
--ion-color-main-contrast-rgb: 0, 0, 0;
--ion-color-main-shade: rgb(179, 142, 22);
--ion-color-main-tint: rgb(233, 195, 71);
/** custom light **/
--ion-color-custom-light: #141a22;
--ion-color-custom-light-contrast: #ffffff;
--ion-color-custom-light-shade: #12171d;
--ion-color-custom-light-tint: #232c38;
}
.ion-color-main {
--ion-color-base: var(--ion-color-main);
--ion-color-base-rgb: var(--ion-color-main-rgb);
--ion-color-contrast: var(--ion-color-main-contrast);
--ion-color-contrast-rgb: var(--ion-color-main-contrast-rgb);
--ion-color-shade: var(--ion-color-main-shade);
--ion-color-tint: var(--ion-color-main-tint);
}
.ion-color-custom-light {
--ion-color-base: var(--ion-color-custom-light);
--ion-color-contrast: var(--ion-color-custom-light-contrast);
--ion-color-shade: var(--ion-color-custom-light-shade);
--ion-color-tint: var(--ion-color-custom-light-tint);
}
:root {
--main-orange-color: #d17842;
--ion-background-color: #0e1016;
--ion-background-color-rgb: 0, 0, 0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-item-background: #141a22;
--ion-card-background: #141a22;
--ion-tab-bar-color: #4d5053;
--ion-tab-bar-background: #0e1016;
--ion-tab-bar-color-selected: rgb(221, 174, 21);
/* --ion-toolbar-color: white; */
--ion-toolbar-background: #0e1016;
--ion-toolbar-border-color: #0e1016;
--ion-tab-bar-border-color: #0e1016;
--ion-grid-column-padding: 0;
}
.app-icon {
color: rgb(221, 174, 21);
}
ion-toolbar {
--padding-start: 1rem;
--padding-end: 1rem;
--padding-top: 1rem;
--padding-bottom: 1rem;
}
.inner-toolbar {
--padding-top: 0rem !important;
--padding-bottom: 0rem !important;
}
.button-container-img img {
height: 2.3rem;
border-radius: 10px;
}
.gray-icon {
color: var(--ion-tab-bar-color);
background-color: #1b2025;
}
.yellow-icon {
color: var(--ion-color-main);
background-color: #1b2025;
}
.button-container {
background-color: #1b2025;
border: 2px solid #1d232a;
padding: 0.5rem;
border-radius: 13px;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
.button-container-img {
background-color: #1b2025;
border: 2px solid #1d232a;
padding: 0.2rem;
border-radius: 13px;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
ion-card {
padding: 0.8rem;
border-radius: 20px;
}
.coffee-card img {
border-radius: 20px;
height: 10rem;
width: 100%;
}
.coffee-card-long img {
border-radius: 20px;
height: 5rem !important;
width: 100%;
}
.coffee-card-long-details {
margin-left: 1rem;
margin-top: -0.7rem;
}
.coffee-card-long-details p {
font-size: 0.8rem;
margin: 0;
margin-top: 0.2rem;
}
.coffee-card ion-card-title {
margin-top: 1rem;
font-size: 1rem;
}
.coffee-card .coffee-price {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
margin-top: -0.2rem;
}
.coffee-card .coffee-price .add-button {
color: var(--main-orange-color) !important;
margin-top: 0.5rem;
}
.coffee-card .coffee-price .add-button svg {
color: white !important;
}
.outer-heading {
margin-bottom: -1.3rem;
margin-left: 0.5rem;
margin-right: 1.3rem;
}
/*
.searchbar-input {
padding: 1.5rem !important;
}
.searchbar-search-icon {
margin-top: 0.3rem;
margin-right: 3rem;
padding-right: 3rem;
} */
/*
ion-tab-bar {
bottom: 20px;
position: relative;
box-shadow: 0px 0px 1.5px rgba(255, 255, 255, 0.2);
border-radius: 16px;
width: 92%;
border-top: none;
margin: 0 auto;
height: 55px;
}
ion-tab-button {
--padding-bottom: 8px;
--padding-top: 8px;
} */
.custom-margin-left {
margin-left: 0.2rem;
}
}