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:01:03 +08:00
parent 3bcb40c5ef
commit 7cc6d939f5
24 changed files with 1522 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.module.css Normal file
View File

@@ -0,0 +1,54 @@
.coffeeCard {
padding: 0.8rem;
border-radius: 20px;
}
.coffeeCard img {
border-radius: 20px;
height: 10rem;
width: 100%;
}
.coffeeCard ion-card-title {
margin-top: 1rem;
font-size: 1rem;
}
.coffeePrice {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
margin-top: -0.2rem;
}
.coffeeAddButton {
color: var(--ion-color-main) !important;
margin-top: 0.5rem;
}
.coffeeCardLong img {
border-radius: 20px;
height: 5rem !important;
width: 100%;
}
.coffeeCardLongDetails {
margin-left: 1rem;
margin-top: -0.7rem;
}
.coffeeCardLongDetails p {
font-size: 0.8rem;
margin: 0;
margin-top: 0.2rem;
}

28
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from "@ionic/react";
import { ArrowRightSquare } from "react-iconly";
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" />
<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;

35
03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCardOffer.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from "@ionic/react";
import { Plus } from "react-iconly";
import styles from "./CoffeeCard.module.css";
const CoffeeCardOffer = props => {
const { offer } = props;
return (
<IonRow>
<IonCol size="12" className="animate__animated animate__fadeIn">
<IonCard className={ `${ styles.coffeeCard } ${ styles.coffeeCardLong }` }>
<IonRow>
<IonCol size="4">
<img src={ offer.image } alt="coffee" />
</IonCol>
<IonCol size="8">
<div className={ styles.coffeeCardLongDetails }>
<IonCardTitle>{ offer.title }</IonCardTitle>
<p>{ offer.description }</p>
</div>
</IonCol>
</IonRow>
</IonCard>
</IonCol>
</IonRow>
);
}
export default CoffeeCardOffer;

44
03_source/mobile/src/pages/DemoOrderingApp/components/Tabs.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
import { Redirect, Route } from 'react-router-dom';
import { Home, Bag, Heart2, Notification } from 'react-iconly';
import Homepage from '../pages/Home';
import Favourites from '../pages/Favourites';
import Cart from '../pages/Cart';
const Tabs = (props) => {
return (
<IonTabs>
<IonRouterOutlet>
<Route
exact
path="/demo-ordering-app/tabs/home"
render={(props) => <Homepage {...props} />}
/>
<Route exact path="/demo-ordering-app/tabs/cart" render={(props) => <Cart {...props} />} />
<Route
exact
path="/demo-ordering-app/tabs/favourites"
render={(props) => <Favourites {...props} />}
/>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-ordering-app/tabs/home">
<Home set="bold" />
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-ordering-app/tabs/cart">
<Bag set="bold" />
</IonTabButton>
<IonTabButton tab="tab3" href="/demo-ordering-app/tabs/favourites">
<Heart2 set="bold" />
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;

71
03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx Normal file
View File

@@ -0,0 +1,71 @@
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 => {
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");
setTimeout(() => {
cartRef.current.classList.add("animate__tada");
addToCart(coffeeID);
setTimeout(() => {
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>
</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>
);
}
export default ViewCoffeeCard;