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

46
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 (
<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>
);
};
return ( export default CoffeeCard;
<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;

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

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