diff --git a/App/screens/DataUpload.tsx b/App/screens/DataUpload.tsx index 79d134d..35784a3 100644 --- a/App/screens/DataUpload.tsx +++ b/App/screens/DataUpload.tsx @@ -33,7 +33,7 @@ export const DataUpload: React.FC<{
navigation.navigate('HomeBluetooth'), + fn: (): void => navigation.navigate('Home'), }} showHelp={true} /> diff --git a/App/screens/Home.tsx b/App/screens/Home.tsx index 8221acf..5910834 100644 --- a/App/screens/Home.tsx +++ b/App/screens/Home.tsx @@ -7,7 +7,6 @@ import { NativeModules, NativeEventEmitter, } from 'react-native'; -import {Button} from 'react-native-elements'; import Icon from 'react-native-vector-icons/Feather'; import {StackNavigationProp} from '@react-navigation/stack'; import {RootStackParamList} from 'App/App'; @@ -17,73 +16,66 @@ import {global} from '../styles'; import BasicButton from '../components/BasicButton'; import {BlurBackground} from '../components/BackgroundBlur'; import {useTranslation} from 'react-i18next'; -import {BottomMenu, MenuItem} from '../components/BottomMenu'; +import {BottomMenu} from '../components/BottomMenu'; import {ButtonPopup} from '../components/ButtonPopup'; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from 'react-native-responsive-screen'; const styles = StyleSheet.create({ lastFetchRow: { - flex: 1, flexDirection: 'row', justifyContent: 'center', + padding: 0, + marginBottom: hp('2%'), }, lastFetch: { color: '#595959', fontSize: 16, textAlign: 'center', fontFamily: 'Ubuntu-R', - marginBottom: 8, marginRight: 8, }, refreshIcon: { color: '#595959', }, - radiusContainer: { + circlesContainer: { margin: 0, - paddingTop: 16, - paddingBottom: 64, + justifyContent: 'center', alignItems: 'center', - flex: 10, }, - radius1: { - position: 'absolute', - top: 135, - borderRadius: 50, - borderWidth: 5, - borderColor: 'black', - width: 100, - height: 100, + outerCircle: { + position: 'relative', + alignSelf: 'center', + borderRadius: wp('22.2%'), + width: wp('44.4%'), + height: wp('44.4%'), + borderColor: '#a1ffeb', + borderWidth: 2, + marginBottom: hp('0%'), }, - radius1Icon: { + innerCircle: { position: 'absolute', - top: 170, - paddingLeft: 35, - width: 100, - height: 100, - zIndex: 3, + alignSelf: 'center', + borderRadius: wp('12%'), + width: wp('24%'), + height: wp('24%'), }, - radius2: { + pausePlayIcon: { position: 'absolute', - top: 80, - borderRadius: 110, - width: 220, - height: 220, - }, - radius3: { - borderRadius: 170, - width: 340, - height: 340, + zIndex: 3, + fontSize: wp('12%'), + width: wp('12%'), + height: wp('12%'), + top: wp('16%'), + left: wp('24%') + wp('18%') - 12, }, contacts: { color: '#595959', fontSize: 18, textAlign: 'center', fontFamily: 'Ubuntu-B', - marginBottom: 100, - }, - bottomButtonContainer: { - flex: 3, - justifyContent: 'flex-end', - backgroundColor: 'white', }, IDMatchPopup: { backgroundColor: 'white', @@ -99,59 +91,43 @@ const styles = StyleSheet.create({ marginBottom: 16, }, pausedText: { - position: 'absolute', - top: 300, textAlign: 'center', fontFamily: 'Ubuntu-R', color: '#595959', }, visible: {opacity: 1}, invisible: {opacity: 0}, + removed: {display: 'none'}, popup: { - position: 'absolute', - bottom: 100, - left: 20, - right: 20, + position: 'relative', }, }); const stylesNoContacts = StyleSheet.create({ - radius1: { + innerCircle: { backgroundColor: '#7dc6b6', }, - radius2: { + outerCircle: { backgroundColor: 'rgba(135, 202, 187, 0.2)', }, - radius3: { - backgroundColor: 'rgba(133, 201, 186, 0.2)', - }, - contacts: {}, }); const stylesFewContacts = StyleSheet.create({ - radius1: { + innerCircle: { backgroundColor: '#7dc6b6', }, - radius2: { + outerCircle: { backgroundColor: 'rgba(136, 202, 187, 0.4)', }, - radius3: { - backgroundColor: 'rgba(136, 202, 187, 0.2)', - }, - contacts: {}, }); const stylesManyContacts = StyleSheet.create({ - radius1: { + innerCircle: { backgroundColor: '#7dc6b6', }, - radius2: { + outerCircle: { backgroundColor: 'rgba(135, 202, 187, 0.6)', }, - radius3: { - backgroundColor: 'rgba(136, 202, 187, 0.4)', - }, - contacts: {}, }); type HomeScreenNavigationProp = StackNavigationProp; @@ -203,9 +179,8 @@ export const Home: React.FC<{ setIDMatchSeen(true); }; - const r1Distances = distances.filter((d) => d <= 1.5); - const r2Distances = distances.filter((d) => d > 1.5 && d <= 5); - const r3Distances = distances.filter((d) => d > 5); + const closeDistances = distances.filter((d) => d <= 1.5); + const furtherDistances = distances.filter((d) => d > 1.5 && d <= 5); // let contactDescription; let contactStyles; if (distances.length === 0) { @@ -218,77 +193,58 @@ export const Home: React.FC<{ contactStyles = stylesManyContacts; // contactDescription = 'many contacts around you'; } - let radius1Style; - if (r1Distances.length < 1) { - radius1Style = StyleSheet.flatten([ - styles.radius1, - stylesNoContacts.radius1, + let innerCircleStyle; + if (closeDistances.length < 1) { + innerCircleStyle = StyleSheet.flatten([ + styles.innerCircle, + stylesNoContacts.innerCircle, ]); - } else if (r1Distances.length >= 1 && r1Distances.length < 5) { - radius1Style = StyleSheet.flatten([ - styles.radius1, - stylesFewContacts.radius1, + } else if (closeDistances.length >= 1 && closeDistances.length < 5) { + innerCircleStyle = StyleSheet.flatten([ + styles.innerCircle, + stylesFewContacts.innerCircle, ]); } else { - radius1Style = StyleSheet.flatten([ - styles.radius1, - stylesManyContacts.radius1, + innerCircleStyle = StyleSheet.flatten([ + styles.innerCircle, + stylesManyContacts.innerCircle, ]); } - let radius2Style; - if (r1Distances.length >= 1) { - radius2Style = StyleSheet.flatten([ - styles.radius2, - stylesManyContacts.radius2, + let outerCircleStyle; + if (closeDistances.length >= 1) { + outerCircleStyle = StyleSheet.flatten([ + styles.outerCircle, + stylesManyContacts.outerCircle, ]); - } else if (r2Distances.length < 1) { - radius2Style = StyleSheet.flatten([ - styles.radius2, - stylesNoContacts.radius2, + } else if (furtherDistances.length < 1) { + outerCircleStyle = StyleSheet.flatten([ + styles.outerCircle, + stylesNoContacts.outerCircle, ]); - } else if (r2Distances.length >= 1 && r2Distances.length < 5) { - radius2Style = StyleSheet.flatten([ - styles.radius2, - stylesFewContacts.radius2, + } else if (furtherDistances.length >= 1 && furtherDistances.length < 5) { + outerCircleStyle = StyleSheet.flatten([ + styles.outerCircle, + stylesFewContacts.outerCircle, ]); } else { - radius2Style = StyleSheet.flatten([ - styles.radius2, - stylesManyContacts.radius2, + outerCircleStyle = StyleSheet.flatten([ + styles.outerCircle, + stylesManyContacts.outerCircle, ]); } - let radius3Style; - if (r3Distances.length < 1) { - radius3Style = StyleSheet.flatten([ - styles.radius3, - stylesNoContacts.radius3, - ]); - } else if (r3Distances.length >= 1 && r3Distances.length < 5) { - radius3Style = StyleSheet.flatten([ - styles.radius3, - stylesFewContacts.radius3, - ]); - } else { - radius3Style = StyleSheet.flatten([ - styles.radius3, - stylesManyContacts.radius3, - ]); - } - const contactsStyle = StyleSheet.flatten([ - styles.contacts, - contactStyles.contacts, - ]); const avgDistance = distances.length ? distances.reduce((prev, cur) => prev + cur, 0) / distances.length : null; - const circle2Diameter = - avgDistance === null ? 220 : 80 + Math.cbrt(avgDistance) * 100; + const innerCircleDiameter = + avgDistance === null + ? wp('35.26%') + : wp('44.4%') - Math.min(wp('44.4%'), Math.sqrt(avgDistance) * wp('6%')); const [isBLERunning, setIsBLERunning] = useState(true); return ( - + {showIDMatch && ( @@ -304,47 +260,54 @@ export const Home: React.FC<{ {t('home.lastIdFetch')}: {latestFetch} - - - { - setIsBLERunning((): boolean => !isBLERunning); + // TODO: call library to fetch TCNs }} /> - - - app is paused {'\n'}press to resume collection - - + + setIsBLERunning(!isBLERunning)} + /> + - + ito is paused {'\n'} + + press to resume collection now + + + {`${distances.length} ${t('home.contacts')} (avg: ${ avgDistance === null ? 'n/a' : `${avgDistance.toPrecision(2)}m` @@ -352,14 +315,14 @@ export const Home: React.FC<{ { + fn: (): void => { navigation.navigate('Endangerment'); }, title: t('home.popup_info.button'), }}> {t('home.popup_info.text')} - + ); diff --git a/App/screens/PositiveResult.tsx b/App/screens/PositiveResult.tsx index 01f51ca..6b75eb3 100644 --- a/App/screens/PositiveResult.tsx +++ b/App/screens/PositiveResult.tsx @@ -74,7 +74,7 @@ export const PositiveResult: React.FC<{ }, 1000); } }, [navigation, uploadSuccess]); - const doUpload = () => { + const doUpload = (): void => { // allows uploading again when going back / visiting the screen anew // going back should be prevented once actual verification is implemented setUploadSuccess(null);