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

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

@@ -1,14 +1,12 @@
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";
const CoffeeCard = props => {
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" />
@@ -23,6 +21,6 @@ const CoffeeCard = props => {
</IonCard>
</IonCol>
);
}
};
export default CoffeeCard;

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

@@ -1,43 +1,36 @@
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';
const ViewCoffeeCard = props => {
import { useRef } from 'react';
import { Bag } from 'react-iconly';
import { addToCart } from '../store/CartStore';
import '../pages/Home.scss';
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");
coffeeCartRef.current.style.display = '';
coffeeCartRef.current.classList.add('animate__fadeOutUp');
setTimeout(() => {
cartRef.current.classList.add("animate__tada");
cartRef.current.classList.add('animate__tada');
addToCart(coffeeID);
setTimeout(() => {
cartRef.current.classList.remove("animate__tada");
coffeeCartRef.current.style.display = "none";
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>
@@ -50,15 +43,21 @@ const ViewCoffeeCard = props => {
<IonRow className="ion-justify-content-between">
<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 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" />
</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" />
</div>
</IonCol>
@@ -66,6 +65,6 @@ const ViewCoffeeCard = props => {
</IonCol>
</IonRow>
);
}
};
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();