update ordering app,

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

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;