WIP: Adds settings screen to change location code. Adds cancel button and flip camera button to Scan screen.
Former-commit-id: ab58b957c470ed0b8b8a4e42a3398fcc45c6b6b5
This commit is contained in:
parent
f270e5f2bf
commit
801e3ebc9b
130
App.tsx
130
App.tsx
|
@ -1,7 +1,16 @@
|
|||
import {BarCodeEvent, BarCodeScanner, PermissionResponse} from 'expo-barcode-scanner';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {AppRegistry, SafeAreaView, Text, View} from 'react-native';
|
||||
import {Appbar, DarkTheme, DefaultTheme, Provider as PaperProvider, Surface} from 'react-native-paper';
|
||||
import React, {ReactElement, useEffect, useState} from 'react';
|
||||
import {AppRegistry, SafeAreaView, View} from 'react-native';
|
||||
import {
|
||||
Appbar,
|
||||
Button, DarkTheme,
|
||||
DefaultTheme,
|
||||
HelperText,
|
||||
Provider as PaperProvider,
|
||||
Snackbar, Subheading,
|
||||
TextInput,
|
||||
Title
|
||||
} from 'react-native-paper';
|
||||
import {expo as appExpo} from './app.json';
|
||||
import {CancelButton} from './components/Common';
|
||||
import {BarCodeDisplay, PrintButton, PrintingMessage} from './components/Print';
|
||||
|
@ -15,7 +24,7 @@ const theme = {
|
|||
colors: colors,
|
||||
}
|
||||
|
||||
export default function Main () {
|
||||
export default function Main() {
|
||||
const [appState, setAppState] = useState<BarcodeScannerAppState>(BarcodeScannerAppState.INITIAL);
|
||||
const [barCodeData, setBarCodeData] = useState<string>('');
|
||||
const [date, setDate] = useState<Date>(new Date());
|
||||
|
@ -31,41 +40,108 @@ export default function Main () {
|
|||
});
|
||||
}, []);
|
||||
|
||||
const _doNothing = () => {};
|
||||
const _scan = () => setAppState(BarcodeScannerAppState.SCANNING);
|
||||
const _print = () => setAppState(BarcodeScannerAppState.PRINTING);
|
||||
const _home = () => setAppState(BarcodeScannerAppState.DEFAULT);
|
||||
const _settings = () => setAppState(BarcodeScannerAppState.SETTINGS);
|
||||
|
||||
const handleBarCodeScanned = (e: BarCodeEvent) => {
|
||||
setBarCodeData(e.data);
|
||||
setDate(new Date());
|
||||
setAppState(BarcodeScannerAppState.SCANNED);
|
||||
// Make sure the data is the right length.
|
||||
const barCodeString = e.data;
|
||||
const pattern = /^[\d]{14}$/;
|
||||
if (pattern.test(barCodeString)) {
|
||||
setBarCodeData(e.data);
|
||||
setDate(new Date());
|
||||
setAppState(BarcodeScannerAppState.SCANNED);
|
||||
} else {
|
||||
setAppState(BarcodeScannerAppState.ERROR);
|
||||
}
|
||||
};
|
||||
|
||||
function ErrorMessage(props: ElementProps) {
|
||||
return <Text>Something went wrong.</Text>;
|
||||
function ErrorMessage(props: ElementProps): ReactElement {
|
||||
return <View style={styles.fullScreen}>
|
||||
<View style={styles.container}>
|
||||
<ScanButton onClicked={_scan}/>
|
||||
</View>
|
||||
<Snackbar
|
||||
visible={appState === BarcodeScannerAppState.ERROR}
|
||||
onDismiss={_doNothing}
|
||||
style={styles.error}
|
||||
>Something went wrong. Try again.</Snackbar>
|
||||
</View>
|
||||
}
|
||||
|
||||
function LoadingMessage(props: ElementProps) {
|
||||
return <Text>Loading...</Text>;
|
||||
function LoadingMessage(props: ElementProps): ReactElement {
|
||||
return <Snackbar
|
||||
visible={appState === BarcodeScannerAppState.INITIAL}
|
||||
onDismiss={_doNothing}
|
||||
>Loading...</Snackbar>;
|
||||
}
|
||||
|
||||
function SuccessMessage(props: ElementProps) {
|
||||
return <Text>Your barcode label has printed successfully.</Text>;
|
||||
function SuccessMessage(props: ElementProps): ReactElement {
|
||||
return <Title>Your barcode label has printed successfully.</Title>;
|
||||
}
|
||||
|
||||
function ActionButtons(props: ElementProps) {
|
||||
return <View style={styles.container}>
|
||||
function ActionButtons(props: ElementProps): ReactElement {
|
||||
return <View>
|
||||
<PrintButton onClicked={_print}/>
|
||||
<CancelButton onClicked={_home}/>
|
||||
</View>
|
||||
}
|
||||
|
||||
function App(props: StateProps) {
|
||||
function SettingsModal(props: ElementProps): ReactElement {
|
||||
const [inputStr, setInputStr] = useState<string>(locationStr);
|
||||
const pattern = /^[\d]{4}$/;
|
||||
const hasErrors = () => {
|
||||
return !pattern.test(inputStr);
|
||||
};
|
||||
|
||||
return <View style={styles.settings}>
|
||||
<Title style={styles.headingInverse}>Settings</Title>
|
||||
<View style={{marginBottom: 10}}>
|
||||
<Subheading style={{color: DefaultTheme.colors.text, marginBottom: 60}}>
|
||||
Please do NOT change this unless you know what you are doing. Entering an incorrect location number may prevent patients from getting accurate info about their test results.
|
||||
</Subheading>
|
||||
<TextInput
|
||||
label="Location #"
|
||||
value={inputStr}
|
||||
onChangeText={inputStr => setInputStr(inputStr)}
|
||||
mode="outlined"
|
||||
theme={DefaultTheme}
|
||||
/>
|
||||
<HelperText type="error" visible={hasErrors()}>
|
||||
Location number must be exactly 4 digits. No other characters are allowed.
|
||||
</HelperText>
|
||||
<Button
|
||||
icon="save"
|
||||
mode="contained"
|
||||
color={colors.primary}
|
||||
style={{marginBottom: 10}}
|
||||
disabled={hasErrors()}
|
||||
onPress={() => {
|
||||
setLocationStr(inputStr);
|
||||
_home();
|
||||
}}
|
||||
>Save</Button>
|
||||
<Button
|
||||
icon="cancel"
|
||||
mode="outlined"
|
||||
color={colors.primary}
|
||||
onPress={_home}
|
||||
>Cancel</Button>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
|
||||
function App(props: StateProps): ReactElement {
|
||||
switch (props.appState) {
|
||||
case BarcodeScannerAppState.INITIAL:
|
||||
return <LoadingMessage/>;
|
||||
case BarcodeScannerAppState.DEFAULT:
|
||||
return <ScanButton onClicked={_scan}/>;
|
||||
return <View style={styles.container}>
|
||||
<ScanButton onClicked={_scan}/>
|
||||
</View>;
|
||||
case BarcodeScannerAppState.PRINTED:
|
||||
return <SuccessMessage/>;
|
||||
case BarcodeScannerAppState.PRINTING:
|
||||
|
@ -77,10 +153,15 @@ export default function Main () {
|
|||
case BarcodeScannerAppState.SCANNED:
|
||||
return <View style={styles.container}>
|
||||
<BarCodeDisplay id={barCodeData} date={date} location={locationStr}/>
|
||||
<ActionButtons></ActionButtons>
|
||||
<ActionButtons/>
|
||||
</View>;
|
||||
case BarcodeScannerAppState.SCANNING:
|
||||
return <Scanner onScanned={handleBarCodeScanned}/>;
|
||||
return <Scanner
|
||||
onScanned={handleBarCodeScanned}
|
||||
onCancel={_home}
|
||||
/>;
|
||||
case BarcodeScannerAppState.SETTINGS:
|
||||
return <SettingsModal/>;
|
||||
default:
|
||||
return <ErrorMessage/>;
|
||||
}
|
||||
|
@ -88,13 +169,12 @@ export default function Main () {
|
|||
|
||||
return (
|
||||
<PaperProvider theme={theme}>
|
||||
<Appbar.Header>
|
||||
<Appbar.Content title={appExpo.name} />
|
||||
<Appbar.Action icon="home" onPress={_home} />
|
||||
<Appbar.Action icon="camera" onPress={_scan} />
|
||||
<Appbar.Action icon="printer" onPress={_print} />
|
||||
<Appbar.Header dark={true}>
|
||||
<Appbar.Content title={`${appExpo.description} #${locationStr}`}/>
|
||||
<Appbar.Action icon="home" onPress={_home}/>
|
||||
<Appbar.Action icon="settings" onPress={_settings}/>
|
||||
</Appbar.Header>
|
||||
<SafeAreaView style={styles.surface}>
|
||||
<SafeAreaView style={styles.safeAreaView}>
|
||||
<App appState={appState}/>
|
||||
</SafeAreaView>
|
||||
</PaperProvider>
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
740298381f187a32302d19c6c1c7e8d8f06f3ed5
|
3
app.json
3
app.json
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"expo": {
|
||||
"description": "UVA Testing Kiosk",
|
||||
"name": "uva-covid19-testing-kiosk",
|
||||
"slug": "uva-covid19-testing-kiosk",
|
||||
"version": "1.0.0",
|
||||
|
@ -33,4 +34,4 @@
|
|||
"package": "com.ajlouie.uvacovid19testingkiosk"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@ import {colors, styles} from './Styles';
|
|||
|
||||
export const CancelButton = (props: ButtonProps): ReactElement => {
|
||||
return <Button
|
||||
icon="camera"
|
||||
icon="cancel"
|
||||
color={colors.text}
|
||||
onPress={props.onClicked}
|
||||
style={styles.btnLg}
|
||||
|
|
|
@ -2,7 +2,7 @@ import React, {ReactElement, useEffect, useState} from 'react';
|
|||
import {Text, View} from 'react-native';
|
||||
// @ts-ignore
|
||||
import Barcode from 'react-native-barcode-builder';
|
||||
import {Button} from 'react-native-paper';
|
||||
import {Button, Title} from 'react-native-paper';
|
||||
import {BarCodeProps, ButtonProps, PrintingProps} from '../models/ElementProps';
|
||||
import {colors, styles} from './Styles';
|
||||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
|
@ -146,7 +146,7 @@ export const PrintingMessage = (props: PrintingProps): ReactElement => {
|
|||
<BarCodeDisplay id={props.id} date={props.date} location={props.location} />
|
||||
</View>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.heading}>{statusStr}</Text>
|
||||
<Title style={styles.heading}>{statusStr}</Title>
|
||||
<RetryButton />
|
||||
<Button
|
||||
icon="cancel"
|
||||
|
|
|
@ -1,14 +1,56 @@
|
|||
import {BarCodeScanner} from 'expo-barcode-scanner';
|
||||
import React, {ReactElement} from 'react';
|
||||
import React, {ReactElement, useState} from 'react';
|
||||
import {View, Text} from 'react-native';
|
||||
import {Button} from 'react-native-paper';
|
||||
import {ButtonProps, ScannerProps} from '../models/ElementProps';
|
||||
import {colors, styles} from './Styles';
|
||||
|
||||
declare type CameraType = number | 'front' | 'back' | undefined;
|
||||
|
||||
export const Scanner = (props: ScannerProps): ReactElement => {
|
||||
return <BarCodeScanner
|
||||
onBarCodeScanned={props.onScanned}
|
||||
style={styles.fullScreen}
|
||||
/>;
|
||||
const [componentKey, setComponentKey] = useState<number>(0);
|
||||
const [cameraType, setCameraType] = useState<CameraType>('back');
|
||||
|
||||
const _toggleCameraType = () => {
|
||||
setCameraType(cameraType === 'front' ? 'back' : 'front');
|
||||
setComponentKey(componentKey + 1);
|
||||
}
|
||||
|
||||
const ScanCamera = (): ReactElement => {
|
||||
return <View style={styles.container}>
|
||||
<View style={styles.container}>
|
||||
<BarCodeScanner
|
||||
type={cameraType}
|
||||
onBarCodeScanned={props.onScanned}
|
||||
style={styles.fullScreen}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.centerMiddle}>
|
||||
<View style={styles.captureBox} />
|
||||
</View>
|
||||
<Text style={styles.subtitle}>
|
||||
Hold your ID card up, with the barcode facing the camera. Keep the card in the green box.
|
||||
</Text>
|
||||
<View style={styles.centerMiddle}>
|
||||
<Button
|
||||
mode="contained"
|
||||
color={colors.primary}
|
||||
icon="camera-switch"
|
||||
onPress={_toggleCameraType}
|
||||
style={{marginVertical: 10}}
|
||||
>Switch Camera</Button>
|
||||
<Button
|
||||
mode="text"
|
||||
color={colors.primary}
|
||||
icon="cancel"
|
||||
onPress={props.onCancel}
|
||||
style={styles.btnWhite}
|
||||
>Cancel</Button>
|
||||
</View>
|
||||
</View>;
|
||||
}
|
||||
|
||||
return <ScanCamera key={componentKey} />;
|
||||
};
|
||||
|
||||
export const ScanButton = (props: ButtonProps): ReactElement => {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {StyleSheet} from 'react-native';
|
||||
import {DarkTheme} from 'react-native-paper';
|
||||
import {DefaultTheme, DarkTheme} from 'react-native-paper';
|
||||
|
||||
|
||||
export const colors = {
|
||||
|
@ -10,30 +10,97 @@ export const colors = {
|
|||
notification: '#E57200',
|
||||
};
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
const _common = StyleSheet.create({
|
||||
container: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
flex: 1,
|
||||
backgroundColor: colors.primary,
|
||||
alignItems: 'stretch',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 40,
|
||||
padding: 40,
|
||||
},
|
||||
dark: {
|
||||
backgroundColor: colors.primary,
|
||||
color: DarkTheme.colors.text,
|
||||
},
|
||||
light: {
|
||||
backgroundColor: DefaultTheme.colors.background,
|
||||
color: DefaultTheme.colors.text,
|
||||
},
|
||||
heading: {
|
||||
color: colors.onBackground,
|
||||
fontSize: 40,
|
||||
padding: 40,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
captureBox: {
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'green',
|
||||
borderWidth: 10,
|
||||
height: 213,
|
||||
width: 338,
|
||||
borderRadius: 20,
|
||||
},
|
||||
centerMiddle: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
container: {
|
||||
..._common.container,
|
||||
..._common.dark,
|
||||
},
|
||||
containerDark: {
|
||||
..._common.container,
|
||||
..._common.dark,
|
||||
},
|
||||
containerLight: {
|
||||
..._common.container,
|
||||
..._common.light,
|
||||
},
|
||||
containerNoPadding: {
|
||||
..._common.container,
|
||||
padding: 0,
|
||||
},
|
||||
error: {
|
||||
backgroundColor: colors.error,
|
||||
color: colors.onBackground,
|
||||
fontSize: 20,
|
||||
},
|
||||
subtitle: {
|
||||
color: colors.onBackground,
|
||||
fontSize: 20,
|
||||
padding: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
heading: {
|
||||
..._common.heading,
|
||||
color: colors.onBackground,
|
||||
},
|
||||
headingInverse: {
|
||||
..._common.heading,
|
||||
color: DefaultTheme.colors.text,
|
||||
},
|
||||
btnLg: {
|
||||
fontSize: 20,
|
||||
padding: 4,
|
||||
margin: 4,
|
||||
},
|
||||
btnWhite: {
|
||||
color: DefaultTheme.colors.text,
|
||||
backgroundColor: DefaultTheme.colors.background
|
||||
},
|
||||
button: {
|
||||
color: colors.text,
|
||||
},
|
||||
fullScreen: StyleSheet.absoluteFillObject,
|
||||
fullScreen: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
flex: 1,
|
||||
alignItems: 'stretch',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
label: {
|
||||
fontSize: 16,
|
||||
},
|
||||
|
@ -66,5 +133,23 @@ export const styles = StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: colors.primary,
|
||||
}
|
||||
},
|
||||
safeAreaView: {
|
||||
flex: 1
|
||||
},
|
||||
row: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
settings: {
|
||||
flex: 1,
|
||||
alignItems: 'stretch',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: 80,
|
||||
backgroundColor: DefaultTheme.colors.background,
|
||||
color: DefaultTheme.colors.text,
|
||||
},
|
||||
});
|
||||
|
|
|
@ -6,4 +6,5 @@ export enum BarcodeScannerAppState {
|
|||
PRINTING = 'PRINTING',
|
||||
PRINTED = 'PRINTED',
|
||||
ERROR = 'ERROR',
|
||||
SETTINGS = 'SETTINGS',
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@ export interface ButtonProps extends ElementProps {
|
|||
|
||||
export interface ScannerProps extends ElementProps {
|
||||
onScanned: BarCodeScannedCallback;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export interface PrintingProps extends BarCodeProps {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
|
@ -6,44 +6,45 @@
|
|||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-community/async-storage": "^1.12.0",
|
||||
"@react-native-community/netinfo": "^5.9.6",
|
||||
"expo": "~38.0.8",
|
||||
"expo-barcode-scanner": "~8.2.1",
|
||||
"expo-print": "~9.0.1",
|
||||
"expo-splash-screen": "^0.5.0",
|
||||
"expo-status-bar": "^1.0.2",
|
||||
"expo-updates": "~0.2.10",
|
||||
"jsbarcode": "^3.11.0",
|
||||
"react": "~16.11.0",
|
||||
"react-dom": "~16.11.0",
|
||||
"react-native": "~0.62.2",
|
||||
"react-native-gesture-handler": "~1.6.1",
|
||||
"react-native-reanimated": "~1.9.0",
|
||||
"react-native-screens": "~2.9.0",
|
||||
"react-native-unimodules": "~0.10.1",
|
||||
"react-native-web": "~0.11.7",
|
||||
"@react-native-community/async-storage": "^1.12.0",
|
||||
"@react-native-community/netinfo": "^5.9.6",
|
||||
"expo-barcode-scanner": "~8.2.1",
|
||||
"expo-print": "~9.0.1",
|
||||
"jsbarcode": "^3.11.0",
|
||||
"react-native-barcode-builder": "github:cdesch/react-native-barcode-builder#master",
|
||||
"react-native-canvas": "^0.1.37",
|
||||
"react-native-easy-grid": "^0.2.2",
|
||||
"react-native-gesture-handler": "~1.6.1",
|
||||
"react-native-html-to-pdf": "^0.8.0",
|
||||
"react-native-paper": "^4.1.0",
|
||||
"react-native-print": "^0.6.0",
|
||||
"react-native-reanimated": "~1.9.0",
|
||||
"react-native-screens": "~2.9.0",
|
||||
"react-native-share": "^3.7.0",
|
||||
"react-native-svg": "^12.1.0",
|
||||
"react-native-svg-transformer": "^0.14.3",
|
||||
"react-native-unimodules": "~0.10.1",
|
||||
"react-native-vector-icons": "^7.0.0",
|
||||
"react-native-web": "~0.11.7",
|
||||
"react-native-webview": "^10.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.6",
|
||||
"@types/react": "~16.9.41",
|
||||
"@types/react-native": "^0.62.18",
|
||||
"babel-jest": "~25.2.6",
|
||||
"jest": "~25.2.6",
|
||||
"react-test-renderer": "~16.11.0",
|
||||
"@types/react": "~16.9.41",
|
||||
"@types/react-native": "^0.62.18",
|
||||
"typescript": "~3.9.5"
|
||||
},
|
||||
"private": true,
|
||||
"name": "uva-covid19-testing-kiosk",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
17
yarn.lock
17
yarn.lock
|
@ -3846,6 +3846,16 @@ expo-barcode-scanner@~8.2.1:
|
|||
lodash "^4.6.0"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
expo-camera@~8.3.1:
|
||||
version "8.3.1"
|
||||
resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-8.3.1.tgz#e17c080c4aafd71f66495c2b6dfc53dcd31b0368"
|
||||
integrity sha512-weFanDVsJKAbm5g90zWIUD4zVrXKoQq7g2BTg4zy4p24YsGfXKYRH4ja0YRgr3Ci/abGaaRNZjsPMJiNskR+tA==
|
||||
dependencies:
|
||||
fbjs "1.0.0"
|
||||
invariant "2.2.4"
|
||||
lodash "^4.6.0"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
expo-constants@~9.1.1:
|
||||
version "9.1.1"
|
||||
resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-9.1.1.tgz#bca141ee3d4550e308798128f66c6d9c6a206ca1"
|
||||
|
@ -6971,6 +6981,13 @@ react-native-canvas@^0.1.37:
|
|||
dependencies:
|
||||
ctx-polyfill "^1.1.4"
|
||||
|
||||
react-native-easy-grid@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz#f0be33620be1ebe2d2295918eb58b0a27e8272ab"
|
||||
integrity sha512-MlYrNIldnEMKn6TVatQN1P64GoVlwGIuz+8ncdfJ0Wq/xtzUkQwlil8Uksyp7MhKfENE09MQnGNcba6Mx3oSAA==
|
||||
dependencies:
|
||||
lodash "^4.17.15"
|
||||
|
||||
react-native-gesture-handler@~1.6.1:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17"
|
||||
|
|
Loading…
Reference in New Issue