breathing time and health history UI added

CRX/src/subScreens/Breathtime.js

+// Example of React Native Timer and Stopwatch
+// https://aboutreact.com/react-native-timer-stopwatch/
+
+// import React in our code
+import { Button, Card } from '@ui-kitten/components';
+import React, {useState} from 'react';
+import { app_name, API, API1, API_VERSION, cipher } from '../_Configuration';
+// import all the components we are going to use
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  Image,
+  View,
+  TouchableHighlight,
+  YellowBox,
+} from 'react-native';
+
+// importing library to use Stopwatch and Timer
+import {Stopwatch, Timer} from 'react-native-stopwatch-timer';
+
+export const Breathtime = ({navigation,route}) => {
+ 
+  const [age,setAge] = React.useState(route.params.age);
+  const [gender,setGender] = React.useState(route.params.gender);
+  const [isTimerStart, setIsTimerStart] = useState(false);
+  const [isStopwatchStart, setIsStopwatchStart] = useState(false);
+  const [timerDuration, setTimerDuration] = useState(1000);
+  const [resetTimer, setResetTimer] = useState(false);
+  const [resetStopwatch, setResetStopwatch] = useState(false);
+  const [times, setTimes] = useState();
+  const [timeinsec, setTimeinsec] = useState();
+  const [respose, setRespose] = useState(2); //0= low risk 1- high risk, 2-not response
+  const getResults=()=> {
+    console.log('news');
+    var e= this;
+    var xdata = {
+      Age:age,
+      Gender:gender,
+      Time:timeinsec
+
+    };
+    API1.post('api/breath',xdata)
+    .then(function (response) {
+      
+      if(response){
+        // setPricing(response.data.co);
+            console.log("user screen - pricing - success", response.data);
+            if( response.data==1){
+             setRespose(1);
+            }else{
+                setRespose(0);
+            }
+            //   () => {console.log("this will be fired after setstate complete",e.state.pricing);
+            // });
+            
+        }else{
+            console.log("user screen - home - failed", response.data);
+            
+        }
+    })
+    .catch(function (error) {
+        console.log("user screen - home - error", error.message);
+      
+    });
+  }
+ function second(time){
+   var hours,minutes,seconds;
+  [hours, minutes, seconds] = time.split(':');
+ var  totalSeconds = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds);
+
+  setTimeinsec(totalSeconds);
+}
+
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
+        <Text style={styles.title}>
+         Breath-holding Time Analysis 
+        </Text>
+        <Image style={{height:100,width:250}} source={require('../Images/breath.jpg')}/>
+        <View style={styles.sectionStyle}>
+          <Stopwatch
+            laps
+            
+            start={isStopwatchStart}
+            // To start
+            reset={resetStopwatch}
+            // To reset
+            options={options}
+            // Options for the styling
+            getTime={(time) => {
+            //   console.log(time);
+               setTimes(time);
+            }}
+          />
+          <View style={{flexDirection:'row',paddingVertical:20}}>
+            <TouchableHighlight
+              onPress={() => {
+                setIsStopwatchStart(!isStopwatchStart);
+                setResetStopwatch(false);
+                second(times);
+                setRespose(2);
+              }}><View>
+              <Text style={styles.buttonText}>
+                {!isStopwatchStart ? 'START' : 'STOP'}
+              </Text></View>
+            </TouchableHighlight>
+            <TouchableHighlight
+              onPress={() => {
+                setIsStopwatchStart(false);
+                setResetStopwatch(true);
+                setTimeinsec(0);
+                setRespose(2);
+              }}>
+              <Text style={styles.buttonText}>RESET</Text>
+            </TouchableHighlight>
+          </View>
+          <View style={{paddingVertical:20}}>
+          <Card>
+            <Text style={{fontWeight:'bold'}}>Instructions </Text>
+            <Text>* Take a deep breath.</Text>
+            <Text>* Then click on start button and hold your breath.</Text>
+            </Card>
+            {(respose==0)?<Card style={{height:150, justifyContent: 'center', alignItems: 'center',marginTop:20,backgroundColor:'green'}}>
+              <Text style={{fontSize:17}}>
+              You are in the low risk level for COVID-19
+              Please contact your doctor soon
+              Stay Safe
+            </Text>
+          </Card>:(respose==1)?<Card style={{height:150, justifyContent: 'center', alignItems: 'center',marginTop:20,backgroundColor:'yellow'}}>
+        <Text style={{fontSize:17}}>
+              You are in the high risk level for COVID-19
+              Please contact your doctor soon
+              Stay Safe
+        </Text>
+        </Card>:(respose==2)?<View style={{marginTop:50}}><Button onPress={()=>{getResults();}}>Check</Button></View>:null}
+          </View>
+        </View>
+      </View>
+      
+    </SafeAreaView>
+  );
+};
+
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor:'white'
+  },
+  title: {
+    textAlign: 'center',
+    fontSize: 20,
+    fontWeight: 'bold',
+    padding: 20,
+    
+  },
+  sectionStyle: {
+    flex: 1,
+    marginTop: 32,
+    alignItems: 'center',
+    paddingVertical:20
+  },
+  buttonText: {
+    fontSize: 20,
+    marginTop: 10,
+    paddingHorizontal:50
+  },
+});
+
+const options = {
+  container: {
+    backgroundColor: '#FF0000',
+    padding: 5,
+    borderRadius: 5,
+    width: 200,
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 25,
+    color: '#FFF',
+    marginLeft: 7,
+  },
+};
\ No newline at end of file