update,
This commit is contained in:
louiscklaw
96
03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab1.jsx
Normal file
96
03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab1.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonRouter,
|
||||
} from '@ionic/react';
|
||||
|
||||
import { Geolocation } from '@capacitor/geolocation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SkeletonDashboard } from '../components/SkeletonDashboard';
|
||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||
import { CurrentWeather } from '../components/CurrentWeather';
|
||||
|
||||
function Tab1() {
|
||||
const router = useIonRouter();
|
||||
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getCurrentPosition();
|
||||
}, []);
|
||||
|
||||
const getCurrentPosition = async () => {
|
||||
setCurrentWeather(false);
|
||||
const coordinates = await Geolocation.getCurrentPosition();
|
||||
getAddress(coordinates.coords);
|
||||
};
|
||||
|
||||
const getAddress = async (coords) => {
|
||||
const query = `${coords.latitude},${coords.longitude}`;
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setCurrentWeather(data);
|
||||
};
|
||||
|
||||
// const router = useIonRouter();
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>My Weather</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => getCurrentPosition()}>
|
||||
<IonIcon icon={refreshOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Dashboard</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12">
|
||||
<h4>Here's your location based weather</h4>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-1.5rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<SkeletonDashboard />
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab1;
|
||||
81
03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab2.jsx
Normal file
81
03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab2.jsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useState } from 'react';
|
||||
import { CurrentWeather } from '../components/CurrentWeather';
|
||||
|
||||
function Tab2() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
const performSearch = async () => {
|
||||
getAddress(search);
|
||||
};
|
||||
|
||||
const getAddress = async (city) => {
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
if (data && data.current && data.location) {
|
||||
setCurrentWeather(data);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
|
||||
<IonCol size="7">
|
||||
<IonSearchbar
|
||||
placeholder="Try 'London'"
|
||||
animated
|
||||
value={search}
|
||||
onIonChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="5">
|
||||
<IonButton
|
||||
expand="block"
|
||||
className="ion-margin-start ion-margin-end"
|
||||
onClick={performSearch}
|
||||
>
|
||||
Search
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-0.8rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<h3 className="ion-text-center">Your search result will appear here</h3>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab2;
|
||||
@@ -0,0 +1,75 @@
|
||||
import { IonButton, IonCardSubtitle, IonCol, IonIcon, IonList, IonRow } from '@ionic/react';
|
||||
import DebitCard from './DebitCard';
|
||||
|
||||
import styles from './CardSlide.module.css';
|
||||
import TransactionItem from './TransactionItem';
|
||||
import { addOutline, arrowRedoOutline } from 'ionicons/icons';
|
||||
import { formatBalance } from '../data/Utils';
|
||||
|
||||
const CardSlide = (props) => {
|
||||
const { index, card, profile } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<IonRow className="ion-text-center">
|
||||
<IonCol size="12">
|
||||
<IonCardSubtitle color="medium">balance</IonCardSubtitle>
|
||||
<IonCardSubtitle id={`slide_${index}_balance`} className={` ${styles.balance} animate__animated`}>
|
||||
<span className={styles.poundSign}>£</span>
|
||||
{formatBalance(card.balance)}
|
||||
<IonButton
|
||||
className={styles.addButton}
|
||||
size="small"
|
||||
style={{ '--background': card.color, '--background-focused': card.color, '--background-hover': card.color, '--background-activated': card.color }}
|
||||
routerLink={`/add-transaction/${card.id}`}
|
||||
>
|
||||
<IonIcon icon={addOutline} />
|
||||
</IonButton>
|
||||
</IonCardSubtitle>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
<IonRow id={`card_${index}_container`} className="animate__animated ion-text-center ion-justify-content-center">
|
||||
<IonCol size="12">
|
||||
<DebitCard key={index} {...card} profile={profile} />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className={styles.heading}>
|
||||
<IonCol size="12">
|
||||
<h6>Transactions</h6>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
{card.transactions.length > 0 && (
|
||||
<IonRow id={`slide_${index}_transactions`} className="animate__animated">
|
||||
<IonCol size="12">
|
||||
<IonList className={styles.transactionList}>
|
||||
{card.transactions.length > 0 &&
|
||||
card.transactions
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.map((transaction, index) => <TransactionItem key={`card_transaction_${index}`} {...transaction} color={card.color} />)}
|
||||
</IonList>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
)}
|
||||
|
||||
{card.transactions.length === 0 && (
|
||||
<IonRow id={`slide_${index}_transactions`} className="animate__animated">
|
||||
<IonCol size="12">
|
||||
<h5>No transactions found</h5>
|
||||
<IonButton
|
||||
style={{ '--background': card.color, '--background-focused': card.color, '--background-hover': card.color, '--background-activated': card.color }}
|
||||
routerLink={`/add-transaction/${card.id}`}
|
||||
>
|
||||
<IonIcon icon={arrowRedoOutline} />
|
||||
Transfer funds
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardSlide;
|
||||
@@ -0,0 +1,51 @@
|
||||
.customSlide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.transactionList {
|
||||
overflow: scroll;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.poundSign {
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.heading h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left !important;
|
||||
float: left !important;
|
||||
text-align: left !important;
|
||||
color: rgb(124, 124, 124);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.heading {
|
||||
width: 83%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
--border-radius: 500px !important;
|
||||
width: fit-content !important;
|
||||
margin-top: 0.45rem;
|
||||
margin-left: 1rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import styles from './DebitCard.module.css';
|
||||
|
||||
const DebitCard = (props) => {
|
||||
const { type, number, profile, expiry, secret, color } = props;
|
||||
const [lastFourCardNumbers, setLastFourCardNumbers] = useState('****');
|
||||
|
||||
const cardClass = `card_${color}`;
|
||||
const cardTypeLogo = type === 'visa' ? '/visa.png' : '/mastercard.png';
|
||||
|
||||
useEffect(() => {
|
||||
var lastFourNumbers = number ? number.substr(number.length - 4) : '1234';
|
||||
setLastFourCardNumbers(lastFourNumbers);
|
||||
}, [number]);
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<div className={`${styles.card__front} ${styles.card__part} ${styles[cardClass]}`}>
|
||||
<img className={`${styles.card__front_chip} ${styles.card__square}`} src="/chip.png" alt="1" />
|
||||
<img className={`${styles.card__front_square} ${styles.card__square}`} src="/ionicwhite.png" alt="1" />
|
||||
<img className={`${styles.card__front_logo} ${styles.card__logo}`} src={cardTypeLogo} alt="2" />
|
||||
<p className={styles.card_number}>**** **** **** {lastFourCardNumbers}</p>
|
||||
<div className={styles.card__space_75}>
|
||||
<span className={styles.card__label}>Card holder</span>
|
||||
<p className={styles.card__info}>{`${profile.firstname} ${profile.surname}`}</p>
|
||||
</div>
|
||||
<div className={styles.card__space_25}>
|
||||
<span className={styles.card__label}>Expires</span>
|
||||
<p className={styles.card__info}>{expiry}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.card__back} ${styles.card__part} ${styles[cardClass]}`}>
|
||||
<div className={styles.card__black_line}></div>
|
||||
<div className={styles.card__back_content}>
|
||||
<div className={styles.card__secret}>
|
||||
<p className={styles.card__secret__last}>{secret}</p>
|
||||
</div>
|
||||
|
||||
<img className={`${styles.card__back_square} ${styles.card__square}`} src="/ionicwhite.png" alt="3" />
|
||||
<img className={`${styles.card__back_logo} ${styles.card__logo}`} src={cardTypeLogo} alt="5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DebitCard;
|
||||
@@ -0,0 +1,188 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Space Mono', monospace;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
color: #162969;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 320px;
|
||||
height: 190px;
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.card__part {
|
||||
box-shadow: 1px 1px #aaa3a3;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 320px;
|
||||
height: 190px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
|
||||
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
-moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
-ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
-o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card_orange {
|
||||
background: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #c74261, #d62158);
|
||||
}
|
||||
|
||||
.card_blue {
|
||||
background: linear-gradient(to right bottom, #699dfd, #61b5fa, #58aff6, #4b86c9, #2151d6);
|
||||
}
|
||||
|
||||
.card_black {
|
||||
background: linear-gradient(to right bottom, #292929, #363636, #555555, #444444, #0f0f0f);
|
||||
}
|
||||
|
||||
.card_purple {
|
||||
background: linear-gradient(to right bottom, #7a43df, #644897, #8964cf, #633cac, #512c96);
|
||||
}
|
||||
|
||||
.card__front {
|
||||
padding: 18px;
|
||||
-webkit-transform: rotateY(0);
|
||||
-moz-transform: rotateY(0);
|
||||
}
|
||||
|
||||
.card__back {
|
||||
padding: 18px 0;
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
-moz-transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.card__black_line {
|
||||
margin-top: 5px;
|
||||
height: 38px;
|
||||
background-color: #303030;
|
||||
}
|
||||
|
||||
.card__logo {
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.card__front_chip {
|
||||
left: 1.2rem;
|
||||
height: 1.5rem !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card__front_logo {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.card__square {
|
||||
border-radius: 5px;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.card_number {
|
||||
display: block;
|
||||
width: 100%;
|
||||
word-spacing: 4px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card__space_75 {
|
||||
width: 75%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.card__space_25 {
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.card__label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card__info {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card__back_content {
|
||||
padding: 15px 15px 0;
|
||||
}
|
||||
.card__secret__last {
|
||||
color: #303030;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card__secret {
|
||||
padding: 5px 12px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card__secret:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
height: calc(100% + 6px);
|
||||
width: calc(100% - 42px);
|
||||
border-radius: 4px;
|
||||
background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
|
||||
}
|
||||
|
||||
.card__back_logo {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.card__back_square {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.card:hover .card__front {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card:hover .card__back {
|
||||
-webkit-transform: rotateY(0deg);
|
||||
-moz-transform: rotateY(0deg);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -0,0 +1,56 @@
|
||||
import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
|
||||
import { formatBalance } from '../data/Utils';
|
||||
import styles from './TransactionItem.module.css';
|
||||
|
||||
const TransactionItem = (props) => {
|
||||
const { name, amount, deposit, color } = props;
|
||||
|
||||
const getContactNameInitials = (contactName) => {
|
||||
var nameInitials = '';
|
||||
|
||||
if (contactName && contactName !== '' && contactName !== undefined) {
|
||||
const nameParts = contactName && contactName.split(' ');
|
||||
|
||||
if (nameParts) {
|
||||
if (nameParts[0].charAt(0).match(/^[a-z]+$/i)) {
|
||||
nameInitials += nameParts[0].charAt(0).toUpperCase();
|
||||
}
|
||||
|
||||
if (nameParts[1]) {
|
||||
if (nameParts[1].charAt(0).match(/^[a-z]+$/i)) {
|
||||
nameInitials += nameParts[1].charAt(0).toUpperCase();
|
||||
}
|
||||
} else {
|
||||
nameInitials += nameParts[0].charAt(1).toUpperCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nameInitials;
|
||||
};
|
||||
|
||||
return (
|
||||
<IonItem lines="full" detail={false} className={`item-text-wrap ion-text-wrap ${styles.transactionItem}`}>
|
||||
<div className={styles.transactionItemContent}>
|
||||
<IonAvatar slot="start">
|
||||
<div style={{ borderColor: 'grey', color: 'grey' }} className={styles.avatarImage}>
|
||||
{getContactNameInitials(name)}
|
||||
</div>
|
||||
</IonAvatar>
|
||||
|
||||
<IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
|
||||
<h2>{name}</h2>
|
||||
</IonLabel>
|
||||
|
||||
<IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
|
||||
<h4 className={deposit ? styles.green : styles.red}>
|
||||
{deposit ? '+' : '-'}
|
||||
£{formatBalance(amount)}
|
||||
</h4>
|
||||
</IonLabel>
|
||||
</div>
|
||||
</IonItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionItem;
|
||||
@@ -0,0 +1,48 @@
|
||||
.avatarImage {
|
||||
/* background-color: var(--ion-color); */
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 500px;
|
||||
color: black;
|
||||
font-size: 1.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem !important;
|
||||
border: 2px solid rgb(44, 44, 44);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.transactionItem {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.transactionItemContent {
|
||||
padding-left: 3rem;
|
||||
padding-right: 2rem;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-top: -0.2rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
|
||||
.transactionContent {
|
||||
padding: 1rem;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: rgb(0, 165, 0);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
119
03_source/mobile/src/pages/DemoBankingUi/data/AccountStore.js
Normal file
119
03_source/mobile/src/pages/DemoBankingUi/data/AccountStore.js
Normal file
@@ -0,0 +1,119 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
export const AccountStore = new Store({
|
||||
profile: {
|
||||
firstname: 'Alan',
|
||||
surname: 'Montgomery',
|
||||
avatar: '/assets/DemoBankingUi/alan.jpg',
|
||||
},
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
type: 'visa',
|
||||
description: 'Current Account',
|
||||
number: '4859 2390 5635 7347',
|
||||
expiry: '11/22',
|
||||
secret: '483',
|
||||
color: 'orange',
|
||||
balance: '38.21',
|
||||
transactions: [
|
||||
{
|
||||
name: 'Joe Bloggs',
|
||||
amount: '2.50',
|
||||
deposit: true,
|
||||
},
|
||||
{
|
||||
name: 'Ocean Pratt',
|
||||
amount: '12.99',
|
||||
deposit: true,
|
||||
},
|
||||
{
|
||||
name: 'Eugene Piper',
|
||||
amount: '74.99',
|
||||
deposit: false,
|
||||
},
|
||||
{
|
||||
name: 'Emeli Potts',
|
||||
amount: '4.20',
|
||||
deposit: false,
|
||||
},
|
||||
{
|
||||
name: 'Asia Wells',
|
||||
amount: '12.73',
|
||||
deposit: true,
|
||||
},
|
||||
{
|
||||
name: 'Awais Brook',
|
||||
amount: '17.10',
|
||||
deposit: false,
|
||||
},
|
||||
{
|
||||
name: 'Coen Haas',
|
||||
amount: '9.99',
|
||||
deposit: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'visa',
|
||||
description: 'Savings',
|
||||
number: '7349 1284 6790 4587',
|
||||
expiry: '05/23',
|
||||
secret: '590',
|
||||
color: 'blue',
|
||||
balance: '120.90',
|
||||
transactions: [
|
||||
{
|
||||
name: 'Joe Bloggs',
|
||||
amount: '120.90',
|
||||
deposit: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'visa',
|
||||
description: 'House Fund',
|
||||
number: '6783 5692 4475 6682',
|
||||
expiry: '01/24',
|
||||
secret: '321',
|
||||
color: 'purple',
|
||||
balance: '0',
|
||||
transactions: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const addCardToAccount = (newCard) => {
|
||||
AccountStore.update((s) => {
|
||||
s.cards = [...s.cards, newCard];
|
||||
});
|
||||
};
|
||||
|
||||
export const addTransactionToCard = (newTransaction, cardID) => {
|
||||
AccountStore.update((s) => {
|
||||
s.cards.find((c, index) =>
|
||||
parseInt(c.id) === parseInt(cardID) ? (s.cards[index].transactions = [...s.cards[index].transactions, newTransaction]) : false
|
||||
);
|
||||
});
|
||||
|
||||
if (newTransaction.deposit) {
|
||||
AccountStore.update((s) => {
|
||||
s.cards.find((c, index) =>
|
||||
parseInt(c.id) === parseInt(cardID) ? (s.cards[index].balance = parseFloat(s.cards[index].balance) + parseFloat(newTransaction.amount)) : false
|
||||
);
|
||||
});
|
||||
} else {
|
||||
AccountStore.update((s) => {
|
||||
s.cards.find((c, index) =>
|
||||
parseInt(c.id) === parseInt(cardID) ? (s.cards[index].balance = parseFloat(s.cards[index].balance) - parseFloat(newTransaction.amount)) : false
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// export const removeFromCart = productIndex => {
|
||||
|
||||
// AccountStore.update(s => { s.product_ids.splice(productIndex, 1) });
|
||||
// }
|
||||
@@ -0,0 +1,6 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
export const CardStore = new Store({
|
||||
card_colors: ['orange', 'black', 'blue', 'purple'],
|
||||
card_types: ['visa', 'mastercard'],
|
||||
});
|
||||
9
03_source/mobile/src/pages/DemoBankingUi/data/Utils.js
Normal file
9
03_source/mobile/src/pages/DemoBankingUi/data/Utils.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export const formatBalance = (balance) => {
|
||||
var formatter = new Intl.NumberFormat('en-GB', {
|
||||
// style: 'currency',
|
||||
currency: 'GBP',
|
||||
minimumFractionDigits: 2,
|
||||
});
|
||||
|
||||
return formatter.format(balance);
|
||||
};
|
||||
42
03_source/mobile/src/pages/DemoBankingUi/index.tsx
Normal file
42
03_source/mobile/src/pages/DemoBankingUi/index.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
import Tab1 from './AppPages/Tab1';
|
||||
import Tab2 from './AppPages/Tab2';
|
||||
|
||||
import Home from './pages/Home.jsx';
|
||||
import Account from './pages/Account';
|
||||
import AddCard from './pages/AddCard';
|
||||
import AddTransaction from './pages/AddTransaction';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
function DemoBankingUi() {
|
||||
return (
|
||||
<IonTabs className="demo-banking-ui">
|
||||
<IonRouterOutlet>
|
||||
<Route path="/demo-banking-ui/home" exact={true}>
|
||||
<Home />
|
||||
</Route>
|
||||
|
||||
<Route path="/demo-banking-ui/account" exact={true}>
|
||||
<Account />
|
||||
</Route>
|
||||
|
||||
<Route path="/demo-banking-ui/account/add-card" exact={true}>
|
||||
<AddCard />
|
||||
</Route>
|
||||
|
||||
<Route path="/demo-banking-ui/add-transaction/:card_id" exact={true}>
|
||||
<AddTransaction />
|
||||
</Route>
|
||||
|
||||
<Redirect exact path="/demo-banking-ui" to="/demo-banking-ui/home" />
|
||||
</IonRouterOutlet>
|
||||
</IonTabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default DemoBankingUi;
|
||||
95
03_source/mobile/src/pages/DemoBankingUi/pages/Account.jsx
Normal file
95
03_source/mobile/src/pages/DemoBankingUi/pages/Account.jsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import styles from './Account.module.css';
|
||||
import { AccountStore } from '../data/AccountStore';
|
||||
import { addOutline, logOutOutline } from 'ionicons/icons';
|
||||
import { formatBalance } from '../data/Utils';
|
||||
|
||||
const Account = () => {
|
||||
const cards = AccountStore.useState((s) => s.cards);
|
||||
const profile = AccountStore.useState((s) => s.profile);
|
||||
|
||||
return (
|
||||
<IonPage className={styles.accountPage}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton color="dark" />
|
||||
</IonButtons>
|
||||
|
||||
<IonTitle>Account</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton>
|
||||
<IonIcon color="dark" icon={logOutOutline} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
<IonGrid>
|
||||
<IonRow className="ion-text-center ion-justify-content-center">
|
||||
<IonCol size="4" className="animate__animated animate__fadeInTopLeft animate__faster">
|
||||
<img src={profile.avatar} className={styles.avatar} alt="account avatar" />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className={`ion-no-margin ion-text-center ion-justify-content-center ${styles.profileDetails}`}>
|
||||
<IonCol size="12">
|
||||
<h5>{`${profile.firstname} ${profile.surname}`}</h5>
|
||||
<h6>{cards.length} current cards</h6>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-text-center">
|
||||
<IonCol size="12">
|
||||
<IonButton color="primary" routerLink="/account/add-card" routerDirection="forward">
|
||||
<IonIcon icon={addOutline} />
|
||||
Add Card
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
{cards.map((card, index) => {
|
||||
return (
|
||||
<IonRow key={`smallCard_${index}`} className="animate__animated animate__fadeInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
<IonItem className={styles.cardItem} detail={false} lines="none">
|
||||
<div className={styles.smallCard} style={{ backgroundColor: card.color }}></div>
|
||||
|
||||
<IonLabel className={`ion-text-left ${styles.cardDescription}`}>
|
||||
<h4>{card.description}</h4>
|
||||
</IonLabel>
|
||||
|
||||
<IonLabel className="ion-text-right">
|
||||
<h4>£{formatBalance(card.balance)}</h4>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Account;
|
||||
@@ -0,0 +1,54 @@
|
||||
.accountPage ion-toolbar {
|
||||
--border-style: none;
|
||||
--padding-top: 1rem;
|
||||
--padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 500px;
|
||||
border: 3px solid var(--ion-color-primary);
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.profileDetails {
|
||||
}
|
||||
|
||||
.profileDetails h6,
|
||||
.profileDetails h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profileDetails h6 {
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.cards {
|
||||
/* margin-top: */
|
||||
}
|
||||
|
||||
.smallCard {
|
||||
width: 15%;
|
||||
height: 80%;
|
||||
border-radius: 5px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.cardDescription h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cardItem {
|
||||
--background: rgb(246, 246, 246);
|
||||
--border-radius: 5px;
|
||||
--padding-start: 1rem;
|
||||
--padding-end: 1rem;
|
||||
--padding-top: 0.5rem;
|
||||
--padding-bottom: 0.5rem;
|
||||
}
|
||||
209
03_source/mobile/src/pages/DemoBankingUi/pages/AddCard.jsx
Normal file
209
03_source/mobile/src/pages/DemoBankingUi/pages/AddCard.jsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import styles from './Account.module.css';
|
||||
import DebitCard from '../components/DebitCard';
|
||||
import { AccountStore, addCardToAccount } from '../data/AccountStore';
|
||||
import { CardStore } from '../data/CardStore';
|
||||
import { addOutline, timerOutline } from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
const AddCard = () => {
|
||||
const cards = AccountStore.useState((s) => s.cards);
|
||||
const cardTypes = CardStore.useState((s) => s.card_types);
|
||||
const cardColors = CardStore.useState((s) => s.card_colors);
|
||||
const profile = AccountStore.useState((s) => s.profile);
|
||||
|
||||
const [cardType, setCardType] = useState(cardTypes[0]);
|
||||
const [cardColor, setCardColor] = useState(cardColors[0]);
|
||||
const [cardDescription, setCardDescription] = useState('');
|
||||
const [cardNumber, setCardNumber] = useState('1234 1234 1234 1234');
|
||||
const [cardSecret, setCardSecret] = useState('123');
|
||||
const [cardExpiry, setCardExpiry] = useState('01/22');
|
||||
const [cardBalance, setCardBalance] = useState(0);
|
||||
|
||||
const history = useHistory();
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
const addCard = async () => {
|
||||
setAdding(true);
|
||||
|
||||
const newCard = {
|
||||
id: cards.length + 1,
|
||||
type: cardType,
|
||||
color: cardColor,
|
||||
description: cardDescription,
|
||||
number: cardNumber,
|
||||
secret: cardSecret,
|
||||
expiry: cardExpiry,
|
||||
balance: cardBalance,
|
||||
transactions: [
|
||||
{
|
||||
name: 'Starting Balance',
|
||||
amount: cardBalance,
|
||||
deposit: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
await addCardToAccount(newCard);
|
||||
|
||||
setTimeout(() => {
|
||||
setAdding(false);
|
||||
history.goBack();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage className={styles.accountPage}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton color="dark" />
|
||||
</IonButtons>
|
||||
|
||||
<IonTitle>Add Card</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
<IonGrid>
|
||||
<IonRow className="animate__animated animate__fadeInTopLeft animate__faster ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12" className="ion-justify-content-center ion-text-center">
|
||||
<DebitCard color={cardColor} type={cardType} expiry={cardExpiry} number={cardNumber} secret={cardSecret} profile={profile} />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-padding-top">
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Type</IonLabel>
|
||||
<IonSelect placeholder="Select type" value={cardType} onIonChange={(e) => setCardType(e.currentTarget.value)}>
|
||||
{cardTypes.map((option, index) => {
|
||||
return (
|
||||
<IonSelectOption key={index} value={option}>
|
||||
{option.toUpperCase()}
|
||||
</IonSelectOption>
|
||||
);
|
||||
})}
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Color</IonLabel>
|
||||
<IonSelect placeholder="Select color" value={cardColor} onIonChange={(e) => setCardColor(e.currentTarget.value)}>
|
||||
{cardColors.map((option, index) => {
|
||||
return (
|
||||
<IonSelectOption key={index} value={option}>
|
||||
{option.toUpperCase()}
|
||||
</IonSelectOption>
|
||||
);
|
||||
})}
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Name</IonLabel>
|
||||
<IonInput
|
||||
type="text"
|
||||
inputmode="text"
|
||||
placeholder="Card name"
|
||||
value={cardDescription}
|
||||
onIonChange={(e) => setCardDescription(e.currentTarget.value)}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Starting Balance</IonLabel>
|
||||
<IonInput type="text" inputmode="text" placeholder="0" value={cardBalance} onIonChange={(e) => setCardBalance(e.currentTarget.value)} />
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Number</IonLabel>
|
||||
<IonInput
|
||||
type="text"
|
||||
inputmode="text"
|
||||
placeholder="**** **** **** ****"
|
||||
value={cardNumber}
|
||||
onIonChange={(e) => setCardNumber(e.currentTarget.value)}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Expiry</IonLabel>
|
||||
<IonInput type="text" inputmode="text" placeholder="01/22" value={cardExpiry} onIonChange={(e) => setCardExpiry(e.currentTarget.value)} />
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Card Secret</IonLabel>
|
||||
<IonInput type="text" inputmode="text" placeholder="123" value={cardSecret} onIonChange={(e) => setCardSecret(e.currentTarget.value)} />
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton
|
||||
style={{ '--background': cardColor, '--background-focused': cardColor, '--background-hover': cardColor, '--background-activated': cardColor }}
|
||||
expand="block"
|
||||
disabled={adding}
|
||||
onClick={addCard}
|
||||
>
|
||||
{!adding && (
|
||||
<>
|
||||
<IonIcon icon={addOutline} />
|
||||
Add Card
|
||||
</>
|
||||
)}
|
||||
|
||||
{adding && (
|
||||
<>
|
||||
<IonIcon icon={timerOutline} />
|
||||
Adding...
|
||||
</>
|
||||
)}
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCard;
|
||||
@@ -0,0 +1,165 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
IonTitle,
|
||||
IonToggle,
|
||||
IonToolbar,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import styles from './Account.module.css';
|
||||
import DebitCard from '../components/DebitCard';
|
||||
import { AccountStore, addCardToAccount, addTransactionToCard } from '../data/AccountStore';
|
||||
import { CardStore } from '../data/CardStore';
|
||||
import { addOutline, timerOutline } from 'ionicons/icons';
|
||||
import { useHistory, useParams } from 'react-router';
|
||||
|
||||
const AddTransaction = () => {
|
||||
const cards = AccountStore.useState((s) => s.cards);
|
||||
const profile = AccountStore.useState((s) => s.profile);
|
||||
|
||||
const [cardID, setCardID] = useState(false);
|
||||
const [card, setCard] = useState({});
|
||||
const [transactionName, setTransactionName] = useState('Test Transaction');
|
||||
const [transactionAmount, setTransactionAmount] = useState(0);
|
||||
const [transactionDeposit, setTransactionDeposit] = useState(false);
|
||||
|
||||
const history = useHistory();
|
||||
const params = useParams();
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
const tempCardID = params.card_id;
|
||||
const tempCard = cards.filter((c) => parseInt(c.id) === parseInt(tempCardID))[0];
|
||||
setCardID(tempCardID);
|
||||
setCard(tempCard);
|
||||
});
|
||||
|
||||
const addTransaction = async () => {
|
||||
setAdding(true);
|
||||
|
||||
const newTransaction = {
|
||||
name: transactionName,
|
||||
amount: transactionAmount,
|
||||
deposit: transactionDeposit,
|
||||
};
|
||||
|
||||
await addTransactionToCard(newTransaction, cardID);
|
||||
|
||||
setTimeout(() => {
|
||||
setAdding(false);
|
||||
history.goBack();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage className={styles.accountPage}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton color="dark" />
|
||||
</IonButtons>
|
||||
|
||||
<IonTitle>Add Transaction</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
<IonGrid>
|
||||
<IonRow className="animate__animated animate__fadeInTopLeft animate__faster ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12" className="ion-justify-content-center ion-text-center">
|
||||
<DebitCard {...card} profile={profile} />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Name</IonLabel>
|
||||
<IonInput
|
||||
type="text"
|
||||
inputmode="text"
|
||||
placeholder="Transaction name"
|
||||
value={transactionName}
|
||||
onIonChange={(e) => setTransactionName(e.currentTarget.value)}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonItem lines="full">
|
||||
<IonLabel position="floating">Amount</IonLabel>
|
||||
<IonInput
|
||||
type="text"
|
||||
inputmode="text"
|
||||
placeholder="0"
|
||||
value={transactionAmount}
|
||||
onIonChange={(e) => setTransactionAmount(e.currentTarget.value)}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem lines="full">
|
||||
<IonLabel>Deposit?</IonLabel>
|
||||
<IonToggle
|
||||
style={{ '--background-checked': card.color }}
|
||||
slot="end"
|
||||
value={transactionDeposit}
|
||||
onIonChange={(e) => setTransactionDeposit(e.currentTarget.checked)}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton
|
||||
style={{
|
||||
'--background': card.color,
|
||||
'--background-focused': card.color,
|
||||
'--background-hover': card.color,
|
||||
'--background-activated': card.color,
|
||||
}}
|
||||
expand="block"
|
||||
disabled={adding}
|
||||
onClick={addTransaction}
|
||||
>
|
||||
{!adding && (
|
||||
<>
|
||||
<IonIcon icon={addOutline} />
|
||||
Add Transaction
|
||||
</>
|
||||
)}
|
||||
|
||||
{adding && (
|
||||
<>
|
||||
<IonIcon icon={timerOutline} />
|
||||
Adding...
|
||||
</>
|
||||
)}
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddTransaction;
|
||||
116
03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx
Normal file
116
03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonRouter, useIonViewDidEnter } from '@ionic/react';
|
||||
import styles from './Home.module.css';
|
||||
import { AccountStore } from '../data/AccountStore';
|
||||
import CardSlide from '../components/CardSlide';
|
||||
import { chevronBackOutline, searchOutline } from 'ionicons/icons';
|
||||
|
||||
// Import Swiper React components
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
|
||||
// Import Swiper styles
|
||||
// import 'swiper/swiper.scss';
|
||||
import 'swiper/css';
|
||||
|
||||
import stylesS from './Home.module.scss';
|
||||
|
||||
const Home = () => {
|
||||
const cards = AccountStore.useState((s) => s.cards);
|
||||
const profile = AccountStore.useState((s) => s.profile);
|
||||
|
||||
const [pageTitle, setPageTitle] = useState(cards[0].description);
|
||||
const [mainColor, setMainColor] = useState(cards[0].color);
|
||||
const [slideSpace, setSlideSpace] = useState(10);
|
||||
|
||||
const slidesRef = useRef();
|
||||
|
||||
useIonViewDidEnter(() => {
|
||||
setSlideSpace(0);
|
||||
});
|
||||
|
||||
const changeSlide = async (e) => {
|
||||
const swiper = e;
|
||||
const swiperIndex = swiper.activeIndex;
|
||||
|
||||
setPageTitle(cards[swiperIndex].description);
|
||||
setMainColor(cards[swiperIndex].color);
|
||||
|
||||
document.getElementById(`slide_${swiperIndex}_balance`).classList.add('animate__headShake');
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById(`slide_${swiperIndex}_balance`).classList.remove('animate__headShake');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const manageTouch = async (touched, e) => {
|
||||
const swiper = e;
|
||||
const swiperIndex = swiper.activeIndex;
|
||||
|
||||
if (touched) {
|
||||
document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeOut');
|
||||
} else {
|
||||
document.getElementById(`slide_${swiperIndex}_transactions`).classList.remove('animate__fadeOut');
|
||||
document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeIn');
|
||||
}
|
||||
};
|
||||
|
||||
const router = useIonRouter();
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage className={stylesS.homePage}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
{/* */}
|
||||
<IonButton
|
||||
//
|
||||
routerLink="/demo-banking-ui/account"
|
||||
className={stylesS.toolbarAvatar}
|
||||
>
|
||||
<img alt="toolbar avatar" className={stylesS.toolbarAvatarImage} src={profile.avatar} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
|
||||
<IonTitle>{pageTitle}</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
{/* */}
|
||||
<IonButton>
|
||||
<IonIcon color="light" icon={searchOutline} style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
<IonGrid>
|
||||
<Swiper
|
||||
spaceBetween={slideSpace}
|
||||
ref={slidesRef}
|
||||
slidesPerView={1}
|
||||
className={stylesS.cardsContainer}
|
||||
onTouchStart={(e) => manageTouch(true, e)}
|
||||
onTouchEnd={(e) => manageTouch(false, e)}
|
||||
onSlideChange={(e) => changeSlide(e)}
|
||||
>
|
||||
{cards.map((card, index) => {
|
||||
return (
|
||||
<SwiperSlide key={`slide_${index}`} id={`slide_${index}`} className={stylesS.customSlide}>
|
||||
<CardSlide key={index} card={card} profile={profile} index={index} />
|
||||
</SwiperSlide>
|
||||
);
|
||||
})}
|
||||
</Swiper>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,38 @@
|
||||
.homePage ion-toolbar {
|
||||
--border-style: none;
|
||||
--padding-top: 1rem;
|
||||
--padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.customSlide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.transactionList {
|
||||
overflow: scroll;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.poundSign {
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.toolbarAvatarImage {
|
||||
border-radius: 500px;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.helloworld {
|
||||
background-color: gold;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.homePage ion-toolbar {
|
||||
--border-style: none;
|
||||
--padding-top: 1rem;
|
||||
--padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.customSlide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.transactionList {
|
||||
overflow: scroll;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.poundSign {
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.toolbarAvatarImage {
|
||||
border-radius: 500px;
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.helloworld {
|
||||
background-color: cyan;
|
||||
}
|
||||
139
03_source/mobile/src/pages/DemoBankingUi/style.scss
Normal file
139
03_source/mobile/src/pages/DemoBankingUi/style.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
.demo-banking-ui {
|
||||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/ */
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
* {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
|
||||
ion-item {
|
||||
--padding-start: 0;
|
||||
--inner-padding-end: 0;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
ion-item h2 {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-item p {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
ion-item .date {
|
||||
float: right;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ion-item ion-icon {
|
||||
color: #c9c9ca;
|
||||
}
|
||||
|
||||
ion-item ion-note {
|
||||
font-size: 15px;
|
||||
margin-right: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ion-item ion-note.md {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
align-self: start;
|
||||
margin: 16px 10px 16px 16px;
|
||||
}
|
||||
|
||||
.dot-unread {
|
||||
background: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
ion-footer ion-title {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user