Skip to content

E
EmidWife-New
Commit d5a7607b authored by Devin B's avatar Devin B
Browse files
Options

updated

parent 82cf4e3e
Hide whitespace changes
Inline Side-by-side
Showing with 434 additions and 152 deletions
src/screens/home/skin/AdditionalSymptoms.js
View file @ d5a7607b
......@@ -10,9 +10,12 @@ import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -39,14 +42,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
{ key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' },
{ key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' },
{ key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
{ key: 'symptom12', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
{ key: 'symptom10', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
],
[
{ key: 'symptom10', text: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
{ key: 'symptom11', text: 'Heart burn | හදවත දැවෙනවා' },
{ key: 'symptom12', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{ key: 'symptom13', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
{ key: 'symptom14', text: 'Breast Pain |පියයුරු වේදනාව'},
{ key: 'symptom11', text: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
{ key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා' },
{ key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{ key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
],
// Add more groups as needed
];
......@@ -68,9 +71,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom12', 'symptom5', 'symptom4','symptom10', 'symptom8', 'symptom6'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
};
const toggleFullscreen = () => {
......@@ -175,7 +185,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
......
src/screens/home/skin/AdditionalSymptoms1.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false,
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -20,6 +26,27 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374537/3D/ulxecngohldnmcizzrej.mp4";
const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Headache | හිසරදය' },
{ key: 'symptom2', text: 'Shoulder pain |උරහිස් වේදනාව'},
{ key: 'symptom3', text: 'Swelling in the hands | අත්වල ඉදිමීම'},
],
[ { key: 'symptom4', text: 'Change in vision | ඇස් පෙනීම වෙනස් වීම'},
{ key: 'symptom5', text: 'Shortness in breath | හුස්ම හිරවීම'},
{ key: 'symptom6', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව'},
],
[
{ key: 'symptom7', text: 'Swelling in joints | සන්ධි ඉදිමීම'},
{ key: 'symptom8', text: 'Back Pain | පිටුපස වේදනාව'},
{ key: 'symptom9', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
],
// Add more groups as needed
];
const handleLoad = () => {
......@@ -38,9 +65,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom7','symptom9'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
};
const toggleFullscreen = () => {
......@@ -79,13 +113,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>patechiae Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Patechiae Additional Symptoms</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +142,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +213,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width:'100%',
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
paddingTop:10
......@@ -193,6 +246,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +256,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +306,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +329,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +342,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +363,44 @@ const styles = StyleSheet.create({
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -20,6 +25,24 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374525/3D/tu1jhgaa6hvcyby5zybr.mp4";
const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Headache | හිසරදය' },
{ key: 'symptom2', text: 'Sore throat | උගුරේ අමාරුව'},
{ key: 'symptom3', text: 'Swelling in joints | සන්ධි ඉදිමීම'},
],
[
{ key: 'symptom5', text: 'Shortness in breath | හුස්ම හිරවීම'},
{ key: 'symptom6', text: 'Large mouth ulcers | මුඛයේ විශාල වණ'},
{ key: 'symptom4', text: 'Weight loss | බර අඩුවීම '},
],
// Add more groups as needed
];
const handleLoad = () => {
......@@ -38,9 +61,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
};
const toggleFullscreen = () => {
......@@ -79,13 +109,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +138,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +209,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width:'100%',
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
paddingTop:10
......@@ -193,6 +242,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +252,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +302,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +325,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +338,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +359,44 @@ const styles = StyleSheet.create({
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -20,6 +25,19 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374517/3D/q2zk6ka9aqamthwgn1vv.mp4";
const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Headache | හිසරදය' },
{ key: 'symptom2', text: 'Sore throat | උගුරේ අමාරුව'},
{ key: 'symptom3', text: 'Pain around genitals | ලිංගික අවයව වටා වේදනාව'},
{ key: 'symptom5', text: 'Pain in urination | මුත්රා කිරීමේදී වේදනාව'},
],
];
const handleLoad = () => {
......@@ -38,9 +56,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
};
const toggleFullscreen = () => {
......@@ -79,13 +104,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +133,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +204,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width:'100%',
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
paddingTop:10
......@@ -193,6 +237,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +247,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +297,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +320,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +333,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +354,44 @@ const styles = StyleSheet.create({
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles
});
......
src/screens/home/skin/SkinUploader.js
View file @ d5a7607b
......@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO)}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO2)}
/>
</View>
</View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment