sartography
/
uva-covid19-testing-kiosk
mirror of https://github.com/sartography/uva-covid19-testing-kiosk.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Aaron Louie 2020-09-01 15:55:23 -04:00
parent f270e5f2bf
commit 801e3ebc9b
12 changed files with 7270 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
App.tsx
View File

@ -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>

1
android/java_pid85993.hprof.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
740298381f187a32302d19c6c1c7e8d8f06f3ed5

3
app.json
View File

@ -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"
}
}
}
}

2
components/Common.tsx
View File

@ -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}

4
components/Print.tsx
View File

@ -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"

52
components/Scan.tsx
View File

@ -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 => {

99
components/Styles.tsx
View File

@ -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,
},
});

1
models/BarcodeScannerAppState.tsx
View File

@ -6,4 +6,5 @@ export enum BarcodeScannerAppState {
PRINTING = 'PRINTING',
PRINTED = 'PRINTED',
ERROR = 'ERROR',
SETTINGS = 'SETTINGS',
}

1
models/ElementProps.tsx
View File

@ -21,6 +21,7 @@ export interface ButtonProps extends ElementProps {
export interface ScannerProps extends ElementProps {
onScanned: BarCodeScannedCallback;
onCancel: () => void;
}
export interface PrintingProps extends BarCodeProps {

7024
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
package.json
View File

@ -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
View File

@ -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"