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 { ArrowRightSquare } from "react-iconly";
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from '@ionic/react';
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 (
<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;
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 { Bag } from "react-iconly";
import { addToCart } from "../store/CartStore";
import '../pages/Home.css';
import { useRef } from 'react';
import { Bag } from 'react-iconly';
import { addToCart } from '../store/CartStore';
import '../pages/Home.scss';
const ViewCoffeeCard = props => {
const ViewCoffeeCard = (props) => {
const { coffee, cartRef } = props;
const coffeeCartRef = useRef();
const { coffee, cartRef } = props;
const coffeeCartRef = useRef();
const addCoffeeToCart = (e, coffeeID) => {
e.preventDefault();
e.stopPropagation();
const addCoffeeToCart = (e, coffeeID) => {
coffeeCartRef.current.style.display = '';
coffeeCartRef.current.classList.add('animate__fadeOutUp');
e.preventDefault();
e.stopPropagation();
setTimeout(() => {
cartRef.current.classList.add('animate__tada');
addToCart(coffeeID);
coffeeCartRef.current.style.display = "";
coffeeCartRef.current.classList.add("animate__fadeOutUp");
setTimeout(() => {
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");
addToCart(coffeeID);
<IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
<IonCardSubtitle>Description</IonCardSubtitle>
<p>{coffee.description}</p>
setTimeout(() => {
cartRef.current.classList.remove("animate__tada");
coffeeCartRef.current.style.display = "none";
}, 500);
}, 500);
}
<IonRow className="ion-justify-content-between">
<IonCol size="8">
<IonButton routerLink={`/coffee/${coffee.id}`} color="main" expand="block">
View &rarr;
</IonButton>
</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">
<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>
<div
ref={coffeeCartRef}
style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
className="animate__animated"
>
<Bag set="bold" />
</div>
</IonCol>
</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 { CartStore, CoffeeStore, FavouriteStore } from '../store';
import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors';
import './Home.css';
import './Home.scss';
const Favourites = (): React.JSX.Element => {
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 { addToFavourites } from '../store/FavouriteStore';
import { getCoffee, getCoffeeSizes, getFavouriteCoffees } from '../store/Selectors';
import './Home.css';
import './Home.scss';
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 { CartStore, CoffeeStore } from '../store';
import { getCoffees, getCartCoffees } from '../store/Selectors';
import './Home.css';
import './Home.scss';
const ViewCoffees = (props): React.JSX.Element => {
const router = useIonRouter();