update demo-react-qr-code,
This commit is contained in:
louiscklaw
@@ -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,27 @@
|
|||||||
|
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
|
||||||
|
import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
|
||||||
|
|
||||||
|
export const CustomFab = ({ start }) => {
|
||||||
|
return (
|
||||||
|
<IonFab
|
||||||
|
vertical="bottom"
|
||||||
|
horizontal="end"
|
||||||
|
slot="fixed"
|
||||||
|
className="ion-padding-bottom ion-padding-end"
|
||||||
|
>
|
||||||
|
<IonFabButton>
|
||||||
|
<IonIcon icon={qrCodeOutline} />
|
||||||
|
</IonFabButton>
|
||||||
|
|
||||||
|
<IonFabList side="top" className="ion-padding-bottom">
|
||||||
|
<IonFabButton color="primary" onClick={start}>
|
||||||
|
<IonIcon icon={cameraOutline} />
|
||||||
|
</IonFabButton>
|
||||||
|
|
||||||
|
<IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
|
||||||
|
<IonIcon icon={addOutline} />
|
||||||
|
</IonFabButton>
|
||||||
|
</IonFabList>
|
||||||
|
</IonFab>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { IonCol, IonRow, IonText } from '@ionic/react';
|
||||||
|
|
||||||
|
export const NoQRCodes = () => (
|
||||||
|
<IonRow className="ion-text-center ion-justify-content-center">
|
||||||
|
<IonCol size="9">
|
||||||
|
<h3>It looks like you don't have any QR codes stored.</h3>
|
||||||
|
<img src="/assets/icon2.png" alt="icon" />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
|
||||||
|
generate a code.
|
||||||
|
</p>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
);
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import {
|
||||||
|
IonButton,
|
||||||
|
IonButtons,
|
||||||
|
IonCard,
|
||||||
|
IonCardContent,
|
||||||
|
IonCardHeader,
|
||||||
|
IonCardTitle,
|
||||||
|
IonCol,
|
||||||
|
IonContent,
|
||||||
|
IonGrid,
|
||||||
|
IonHeader,
|
||||||
|
IonIcon,
|
||||||
|
IonNote,
|
||||||
|
IonPage,
|
||||||
|
IonRow,
|
||||||
|
IonTitle,
|
||||||
|
IonToolbar,
|
||||||
|
useIonToast,
|
||||||
|
} from '@ionic/react';
|
||||||
|
import QRCode from 'react-qr-code';
|
||||||
|
import { addQRCode } from '../store/QRStore';
|
||||||
|
|
||||||
|
import useSound from 'use-sound';
|
||||||
|
import closeSound from '../sounds/close.wav';
|
||||||
|
import { reloadOutline } from 'ionicons/icons';
|
||||||
|
|
||||||
|
export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
|
||||||
|
const [play] = useSound(closeSound);
|
||||||
|
const [showToast] = useIonToast();
|
||||||
|
|
||||||
|
const handleDismiss = () => {
|
||||||
|
dismiss();
|
||||||
|
play();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleScanAgain = () => {
|
||||||
|
handleDismiss();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
scan();
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
addQRCode(code.text ? code.text : code, true);
|
||||||
|
showToast({
|
||||||
|
header: 'Success!',
|
||||||
|
message: 'QR Code stored successfully.',
|
||||||
|
duration: 3000,
|
||||||
|
color: 'primary',
|
||||||
|
});
|
||||||
|
|
||||||
|
handleDismiss();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>View QR Code</IonTitle>
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton onClick={handleDismiss}>Close</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent>
|
||||||
|
<IonGrid className="ion-padding-top ion-margin-top">
|
||||||
|
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||||
|
<IonCol size="12">
|
||||||
|
<QRCode value={code.text ? code.text : code} />
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCard>
|
||||||
|
<IonCardHeader>
|
||||||
|
<IonCardTitle>QR Code data</IonCardTitle>
|
||||||
|
<IonNote>This is what the code represents</IonNote>
|
||||||
|
</IonCardHeader>
|
||||||
|
<IonCardContent>
|
||||||
|
<p>{code.text ? code.text : code}</p>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton expand="block" fill="outline" onClick={handleScanAgain}>
|
||||||
|
<IonIcon icon={reloadOutline} />
|
||||||
|
Scan again
|
||||||
|
</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton expand="block" onClick={handleAdd}>
|
||||||
|
Store →
|
||||||
|
</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import {
|
||||||
|
IonButton,
|
||||||
|
IonButtons,
|
||||||
|
IonCol,
|
||||||
|
IonContent,
|
||||||
|
IonGrid,
|
||||||
|
IonHeader,
|
||||||
|
IonPage,
|
||||||
|
IonRow,
|
||||||
|
IonTitle,
|
||||||
|
IonToolbar,
|
||||||
|
} from '@ionic/react';
|
||||||
|
// import QrReader from "react-qr-reader";
|
||||||
|
|
||||||
|
export const QRWebModal = ({ dismiss, set, scan, error }) => {
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>Scan QR Code</IonTitle>
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton onClick={dismiss}>Close</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent>
|
||||||
|
<IonGrid className="ion-padding-top ion-margin-top">
|
||||||
|
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||||
|
<IonCol size="12">
|
||||||
|
{/*
|
||||||
|
<QrReader
|
||||||
|
delay={ 500 }
|
||||||
|
onError={ error }
|
||||||
|
onScan={ scan }
|
||||||
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
/>
|
||||||
|
*/}
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
@@ -3,38 +3,30 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
|
|||||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||||
import { Route, Redirect } from 'react-router';
|
import { Route, Redirect } from 'react-router';
|
||||||
|
|
||||||
import Tab1 from './AppPages/Tab1';
|
// import Tab1 from './AppPages/Tab1';
|
||||||
import Tab2 from './AppPages/Tab2';
|
// import Tab2 from './AppPages/Tab2';
|
||||||
|
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
function DemoReactQrCode() {
|
function DemoWeatherAppUi() {
|
||||||
return (
|
return (
|
||||||
<IonTabs>
|
<IonTabs>
|
||||||
<IonRouterOutlet>
|
<IonRouterOutlet>
|
||||||
<Route exact path="/demo-react-qr-code/tab1">
|
<Route exact path="/demo-react-qr-code/home">
|
||||||
<Tab1 />
|
<Tab1 />
|
||||||
</Route>
|
</Route>
|
||||||
<Route exact path="/demo-react-qr-code/tab2">
|
<Route exact path="/demo-react-qr-code/manual">
|
||||||
<Tab2 />
|
<Tab2 />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/tab1" />
|
<Route exact path="/demo-react-qr-code/camera">
|
||||||
</IonRouterOutlet>
|
<Tab3 />
|
||||||
|
</Route>
|
||||||
|
|
||||||
{/* */}
|
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
|
||||||
<IonTabBar slot="bottom">
|
</IonRouterOutlet>
|
||||||
<IonTabButton tab="tab1" href="/demo-react-qr-code/tab1">
|
|
||||||
<IonIcon icon={cloudOutline} />
|
|
||||||
<IonLabel>Dashboard</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="tab2" href="/demo-react-qr-code/tab2">
|
|
||||||
<IonIcon icon={searchOutline} />
|
|
||||||
<IonLabel>Search</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
</IonTabs>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DemoReactQrCode;
|
export default DemoWeatherAppUi;
|
||||||
|
|||||||
114
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.jsx
Normal file
114
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.jsx
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
|
||||||
|
import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
|
||||||
|
import { useStoreState } from 'pullstate';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import useSound from 'use-sound';
|
||||||
|
import { CustomFab } from '../components/CustomFab';
|
||||||
|
import { NoQRCodes } from '../components/NoQRCodes';
|
||||||
|
import { QRCodeList } from '../components/QRCodeList';
|
||||||
|
import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
|
||||||
|
import { QRStore } from '../store';
|
||||||
|
import { getCodes } from '../store/Selectors';
|
||||||
|
import './Tab1.css';
|
||||||
|
|
||||||
|
import openSound from "../sounds/open.wav";
|
||||||
|
import { QRWebModal } from '../components/QRWebModal';
|
||||||
|
|
||||||
|
const Tab1 = () => {
|
||||||
|
|
||||||
|
const pageRef = useRef();
|
||||||
|
const codes = useStoreState(QRStore, getCodes);
|
||||||
|
const [ play ] = useSound(openSound);
|
||||||
|
|
||||||
|
const [ QRData, setQRData ] = useState(false);
|
||||||
|
|
||||||
|
const handleScan = data => {
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
|
||||||
|
setQRData(data);
|
||||||
|
play();
|
||||||
|
handleSuccess(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleError = err => {
|
||||||
|
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = async () => {
|
||||||
|
|
||||||
|
const platforms = getPlatforms();
|
||||||
|
const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
|
||||||
|
|
||||||
|
if (!isWeb) {
|
||||||
|
|
||||||
|
const data = await BarcodeScanner.scan();
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
handleSuccess(data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
presentWebModal({
|
||||||
|
|
||||||
|
presentingElement: pageRef.current
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSuccess = data => {
|
||||||
|
|
||||||
|
setQRData(data);
|
||||||
|
console.log(data);
|
||||||
|
dismissWebModal();
|
||||||
|
|
||||||
|
play();
|
||||||
|
present({
|
||||||
|
|
||||||
|
presentingElement: pageRef.current
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
|
||||||
|
|
||||||
|
dismiss: () => dismiss(),
|
||||||
|
code: QRData,
|
||||||
|
set: () => setQRData(),
|
||||||
|
scan: () => start()
|
||||||
|
});
|
||||||
|
|
||||||
|
const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
|
||||||
|
|
||||||
|
dismiss: () => dismissWebModal(),
|
||||||
|
set: () => setQRData(),
|
||||||
|
scan: handleScan,
|
||||||
|
error: handleError
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage ref={ pageRef }>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>QR Codes</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">QR Codes</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonGrid>
|
||||||
|
{ codes.length < 1 && <NoQRCodes /> }
|
||||||
|
{ codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
|
||||||
|
</IonGrid>
|
||||||
|
<CustomFab start={ start } />
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tab1;
|
||||||
105
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.jsx
Normal file
105
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.jsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||||
|
import './Tab2.css';
|
||||||
|
|
||||||
|
import QRCode from "react-qr-code";
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { addQRCode } from '../store/QRStore';
|
||||||
|
|
||||||
|
const Tab2 = () => {
|
||||||
|
|
||||||
|
const [ data, setData ] = useState("");
|
||||||
|
const [ showToast ] = useIonToast();
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
|
||||||
|
if (data === "") {
|
||||||
|
|
||||||
|
showToast({
|
||||||
|
|
||||||
|
header: "Error!",
|
||||||
|
message: "Please enter some data to store.",
|
||||||
|
duration: 3000,
|
||||||
|
color: "danger"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
|
||||||
|
addQRCode(data);
|
||||||
|
showToast({
|
||||||
|
|
||||||
|
header: "Success!",
|
||||||
|
message: "QR Code stored successfully.",
|
||||||
|
duration: 3000,
|
||||||
|
color: "primary"
|
||||||
|
});
|
||||||
|
|
||||||
|
setData("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton text="QR Codes" />
|
||||||
|
</IonButtons>
|
||||||
|
<IonTitle>Generate QR Code</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">Generate QR Code</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonLabel className="ion-text-wrap">
|
||||||
|
<h1>You can generate a QR code to store or share with friends.</h1>
|
||||||
|
<p>You'll see a live preview of the QR Code</p>
|
||||||
|
</IonLabel>
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonItem>
|
||||||
|
<IonLabel position="stacked">Data to store</IonLabel>
|
||||||
|
<IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className="ion-text-center ion-margin-top">
|
||||||
|
<IonCol size="12">
|
||||||
|
{ data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className="ion-text-center ion-justify-content-center">
|
||||||
|
<IonCol size="10">
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonLabel className="ion-text-wrap ion-text-center">
|
||||||
|
<p>When you're ready, you can store the generated QR Code</p>
|
||||||
|
</IonLabel>
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tab2;
|
||||||
102
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.jsx
Normal file
102
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.jsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||||
|
import './Tab3.css';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { BarcodeScanner } from "@ionic-native/barcode-scanner";
|
||||||
|
import QRCode from 'react-qr-code';
|
||||||
|
import { addQRCode } from '../store/QRStore';
|
||||||
|
import { reloadOutline } from 'ionicons/icons';
|
||||||
|
|
||||||
|
const Tab3 = () => {
|
||||||
|
|
||||||
|
const [ QRData, setQRData ] = useState(false);
|
||||||
|
|
||||||
|
const start = async () => {
|
||||||
|
|
||||||
|
const data = await BarcodeScanner.scan();
|
||||||
|
setQRData(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [ showToast ] = useIonToast();
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
|
||||||
|
addQRCode(QRData.text, true);
|
||||||
|
showToast({
|
||||||
|
|
||||||
|
header: "Success!",
|
||||||
|
message: "QR Code stored successfully.",
|
||||||
|
duration: 3000,
|
||||||
|
color: "primary"
|
||||||
|
});
|
||||||
|
|
||||||
|
setQRData(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton text="QR Codes" />
|
||||||
|
</IonButtons>
|
||||||
|
<IonTitle>Scan QR Code</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">Scan QR Code</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
{ !QRData &&
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonButton expand="block" onClick={ start }>Scan →</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
}
|
||||||
|
|
||||||
|
{ QRData &&
|
||||||
|
<>
|
||||||
|
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||||
|
<IonCol size="12">
|
||||||
|
<QRCode value={ QRData.text } />
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCard>
|
||||||
|
<IonCardHeader>
|
||||||
|
<IonCardTitle>QR Code data</IonCardTitle>
|
||||||
|
<IonNote>This is what the code represents</IonNote>
|
||||||
|
</IonCardHeader>
|
||||||
|
<IonCardContent>
|
||||||
|
<p>{ QRData.text }</p>
|
||||||
|
</IonCardContent>
|
||||||
|
</IonCard>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton expand="block" fill="outline" onClick={ start }>
|
||||||
|
<IonIcon icon={ reloadOutline } />
|
||||||
|
Scan again</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
<IonCol size="6">
|
||||||
|
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tab3;
|
||||||
BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/close.wav
Normal file
BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/close.wav
Normal file
Binary file not shown.
BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/open.wav
Normal file
BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/open.wav
Normal file
Binary file not shown.
19
03_source/mobile/src/pages/DemoReactQrCode/store/QRStore.js
Normal file
19
03_source/mobile/src/pages/DemoReactQrCode/store/QRStore.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { Store } from 'pullstate';
|
||||||
|
|
||||||
|
const QRStore = new Store({
|
||||||
|
codes: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default QRStore;
|
||||||
|
|
||||||
|
export const addQRCode = (data, scanned = false) => {
|
||||||
|
QRStore.update((s) => {
|
||||||
|
s.codes = [...s.codes, { id: new Date(), data, scanned }];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const removeQRCode = (id) => {
|
||||||
|
QRStore.update((s) => {
|
||||||
|
s.codes = s.codes.filter((code) => code.id !== id);
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { createSelector } from 'reselect';
|
||||||
|
|
||||||
|
const getState = (state) => state;
|
||||||
|
|
||||||
|
// General getters
|
||||||
|
export const getCodes = createSelector(getState, (state) => state.codes);
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as QRStore } from './QRStore';
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
:root {
|
||||||
|
|
||||||
|
/* --ion-background-color: white; */
|
||||||
|
--ion-tab-bar-color: rgb(76, 112, 141);
|
||||||
|
--ion-tab-bar-color-selected: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-tab-bar {
|
||||||
|
|
||||||
|
--background: rgb(1, 72, 131);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
|
||||||
|
border-radius: 50px !important;
|
||||||
|
|
||||||
|
height: 50px;
|
||||||
|
width: 40%;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
|
||||||
|
bottom: 24px;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-tab-button {
|
||||||
|
|
||||||
|
border-radius: 16px !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
/* Ionic Variables and Theming. For more info, please see:
|
||||||
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
|
/** Ionic CSS Variables **/
|
||||||
|
:root {
|
||||||
|
/** 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user