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:07:30 +08:00
parent 7cc6d939f5
commit 03782cde24
5 changed files with 82 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx
View File

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

55
03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx
View File

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

2
03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
View File

@@ -18,7 +18,7 @@ import { useEffect, useRef, useState } from 'react';
import ViewCoffeeCard from '../components/ViewCoffeeCard'; import ViewCoffeeCard from '../components/ViewCoffeeCard';
import { CartStore, CoffeeStore, FavouriteStore } from '../store'; import { CartStore, CoffeeStore, FavouriteStore } from '../store';
import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors'; import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors';
import './Home.css'; import './Home.scss';
const Favourites = (): React.JSX.Element => { const Favourites = (): React.JSX.Element => {
const cartRef = useRef(null); const cartRef = useRef(null);

2
03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx
View File

@@ -22,7 +22,7 @@ import { CoffeeSizeStore, CoffeeStore, FavouriteStore } from '../store';
import { addToCart } from '../store/CartStore'; import { addToCart } from '../store/CartStore';
import { addToFavourites } from '../store/FavouriteStore'; import { addToFavourites } from '../store/FavouriteStore';
import { getCoffee, getCoffeeSizes, getFavouriteCoffees } from '../store/Selectors'; import { getCoffee, getCoffeeSizes, getFavouriteCoffees } from '../store/Selectors';
import './Home.css'; import './Home.scss';
import styles from './ViewCoffee.module.css'; import styles from './ViewCoffee.module.css';

2
03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx
View File

@@ -20,7 +20,7 @@ import { useParams } from 'react-router';
import ViewCoffeeCard from '../components/ViewCoffeeCard'; import ViewCoffeeCard from '../components/ViewCoffeeCard';
import { CartStore, CoffeeStore } from '../store'; import { CartStore, CoffeeStore } from '../store';
import { getCoffees, getCartCoffees } from '../store/Selectors'; import { getCoffees, getCartCoffees } from '../store/Selectors';
import './Home.css'; import './Home.scss';
const ViewCoffees = (props): React.JSX.Element => { const ViewCoffees = (props): React.JSX.Element => {
const router = useIonRouter(); const router = useIonRouter();