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'; ...@@ -10,9 +10,12 @@ import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: 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 [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -39,14 +42,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -39,14 +42,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
{ key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' }, { key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' },
{ key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' }, { key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' },
{ key: 'symptom9', text: 'Breast 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: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
{ key: 'symptom11', text: 'Heart burn | හදවත දැවෙනවා' }, { key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා' },
{ key: 'symptom12', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'}, { key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{ key: 'symptom13', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'}, { key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
{ key: 'symptom14', text: 'Breast Pain |පියයුරු වේදනාව'},
], ],
// Add more groups as needed // Add more groups as needed
]; ];
...@@ -68,9 +71,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -68,9 +71,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
// Handle the submission of symptoms // Checking for specific symptoms that lead to SKIN_RISK
console.log(selectedSymptoms); const skinRiskSymptoms = ['symptom12', 'symptom5', 'symptom4','symptom10', 'symptom8', 'symptom6'];
// Navigate or perform next steps 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 = () => { const toggleFullscreen = () => {
...@@ -175,7 +185,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -175,7 +185,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
......
src/screens/home/skin/AdditionalSymptoms1.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: false,}); symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false,
});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -20,6 +26,27 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -20,6 +26,27 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374537/3D/ulxecngohldnmcizzrej.mp4"; const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374537/3D/ulxecngohldnmcizzrej.mp4";
const videoRef = useRef(null); 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 = () => { const handleLoad = () => {
...@@ -38,9 +65,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -38,9 +65,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
// Handle the submission of symptoms // Checking for specific symptoms that lead to SKIN_RISK
console.log(selectedSymptoms); const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom7','symptom9'];
// Navigate or perform next steps 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 = () => { const toggleFullscreen = () => {
...@@ -79,13 +113,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -79,13 +113,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>patechiae Additional Symptoms </Text> <Text style={styles.topicText}>Patechiae Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
</Text> </Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
// ref={videoRef} // ref={videoRef}
...@@ -106,44 +142,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,44 +142,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Image source={require('./skinassets/scanme.png')}
<View style={styles.checkboxContainer}> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
{/* Repeat this CheckBox component for each symptom */} <View style={styles.qrCodeBox}>
<View style={styles.individualCheckboxContainer}> <Image
<CheckBox source={require('./skinassets/QR1.png')} // Make sure the path is correct
value={selectedSymptoms['symptom1']} style={styles.qrCodeImage}
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')}
/> />
<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> </View>
</View>
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
...@@ -170,20 +213,30 @@ const styles = StyleSheet.create({ ...@@ -170,20 +213,30 @@ const styles = StyleSheet.create({
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 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: { checkboxContainer: {
backgroundColor: COLORS.lightBlue,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, 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, marginLeft:197,
paddingTop:10
...@@ -193,6 +246,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +246,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black,
}, },
checkboxRow: { checkboxRow: {
flexDirection: 'row', flexDirection: 'row',
...@@ -202,6 +256,7 @@ const styles = StyleSheet.create({ ...@@ -202,6 +256,7 @@ const styles = StyleSheet.create({
checkboxText: { checkboxText: {
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
}, },
submitButton: { submitButton: {
backgroundColor: COLORS.primary, backgroundColor: COLORS.primary,
...@@ -251,9 +306,10 @@ const styles = StyleSheet.create({ ...@@ -251,9 +306,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width width: '98%', // Width 100% to fill container width
marginLeft:-100, marginLeft:-95,
elevation: 6, elevation: 6,
minHeight: 50,
}, },
...@@ -273,7 +329,7 @@ const styles = StyleSheet.create({ ...@@ -273,7 +329,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content 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 width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -286,6 +342,7 @@ const styles = StyleSheet.create({ ...@@ -286,6 +342,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
...@@ -306,6 +363,44 @@ const styles = StyleSheet.create({ ...@@ -306,6 +363,44 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom 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 // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: 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 [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -20,6 +25,24 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -20,6 +25,24 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374525/3D/tu1jhgaa6hvcyby5zybr.mp4"; const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374525/3D/tu1jhgaa6hvcyby5zybr.mp4";
const videoRef = useRef(null); 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 = () => { const handleLoad = () => {
...@@ -38,9 +61,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -38,9 +61,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
// Handle the submission of symptoms // Checking for specific symptoms that lead to SKIN_RISK
console.log(selectedSymptoms); const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6'];
// Navigate or perform next steps 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 = () => { const toggleFullscreen = () => {
...@@ -79,13 +109,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -79,13 +109,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text> <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
</Text> </Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
// ref={videoRef} // ref={videoRef}
...@@ -106,44 +138,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,44 +138,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Image source={require('./skinassets/scanme.png')}
<View style={styles.checkboxContainer}> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
{/* Repeat this CheckBox component for each symptom */} <View style={styles.qrCodeBox}>
<View style={styles.individualCheckboxContainer}> <Image
<CheckBox source={require('./skinassets/QR1.png')} // Make sure the path is correct
value={selectedSymptoms['symptom1']} style={styles.qrCodeImage}
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> <TouchableOpacity
</View> style={styles.orButton}
<View style={styles.individualCheckboxContainer}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<CheckBox <Text style={styles.orButtonText}>OR Click This</Text>
value={selectedSymptoms['symptom3']} </TouchableOpacity>
onValueChange={() => toggleCheckbox('symptom3')} </View>
/> <Text style={styles.checkboxLabel}>Check the related box</Text>
<Text style={styles.checkboxText}>Yellow discharges</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> </View>
</View>
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
...@@ -170,20 +209,30 @@ const styles = StyleSheet.create({ ...@@ -170,20 +209,30 @@ const styles = StyleSheet.create({
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 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: { checkboxContainer: {
backgroundColor: COLORS.lightBlue,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, 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, marginLeft:197,
paddingTop:10
...@@ -193,6 +242,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +242,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black,
}, },
checkboxRow: { checkboxRow: {
flexDirection: 'row', flexDirection: 'row',
...@@ -202,6 +252,7 @@ const styles = StyleSheet.create({ ...@@ -202,6 +252,7 @@ const styles = StyleSheet.create({
checkboxText: { checkboxText: {
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
}, },
submitButton: { submitButton: {
backgroundColor: COLORS.primary, backgroundColor: COLORS.primary,
...@@ -251,9 +302,10 @@ const styles = StyleSheet.create({ ...@@ -251,9 +302,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width width: '98%', // Width 100% to fill container width
marginLeft:-100, marginLeft:-95,
elevation: 6, elevation: 6,
minHeight: 50,
}, },
...@@ -273,7 +325,7 @@ const styles = StyleSheet.create({ ...@@ -273,7 +325,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content 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 width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -286,6 +338,7 @@ const styles = StyleSheet.create({ ...@@ -286,6 +338,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
...@@ -306,6 +359,44 @@ const styles = StyleSheet.create({ ...@@ -306,6 +359,44 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom 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 // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ d5a7607b
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: 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 [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -20,6 +25,19 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -20,6 +25,19 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374517/3D/q2zk6ka9aqamthwgn1vv.mp4"; const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374517/3D/q2zk6ka9aqamthwgn1vv.mp4";
const videoRef = useRef(null); 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 = () => { const handleLoad = () => {
...@@ -38,9 +56,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -38,9 +56,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
// Handle the submission of symptoms // Checking for specific symptoms that lead to SKIN_RISK
console.log(selectedSymptoms); const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6'];
// Navigate or perform next steps 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 = () => { const toggleFullscreen = () => {
...@@ -79,13 +104,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -79,13 +104,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes Additional Symptoms </Text> <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
</Text> </Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
// ref={videoRef} // ref={videoRef}
...@@ -106,44 +133,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,44 +133,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Image source={require('./skinassets/scanme.png')}
<View style={styles.checkboxContainer}> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
{/* Repeat this CheckBox component for each symptom */} <View style={styles.qrCodeBox}>
<View style={styles.individualCheckboxContainer}> <Image
<CheckBox source={require('./skinassets/QR1.png')} // Make sure the path is correct
value={selectedSymptoms['symptom1']} style={styles.qrCodeImage}
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> <TouchableOpacity
</View> style={styles.orButton}
<View style={styles.individualCheckboxContainer}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<CheckBox <Text style={styles.orButtonText}>OR Click This</Text>
value={selectedSymptoms['symptom3']} </TouchableOpacity>
onValueChange={() => toggleCheckbox('symptom3')} </View>
/> <Text style={styles.checkboxLabel}>Check the related box</Text>
<Text style={styles.checkboxText}>Yellow discharges</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> </View>
</View>
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
...@@ -170,20 +204,30 @@ const styles = StyleSheet.create({ ...@@ -170,20 +204,30 @@ const styles = StyleSheet.create({
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 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: { checkboxContainer: {
backgroundColor: COLORS.lightBlue,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, 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, marginLeft:197,
paddingTop:10
...@@ -193,6 +237,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +237,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black,
}, },
checkboxRow: { checkboxRow: {
flexDirection: 'row', flexDirection: 'row',
...@@ -202,6 +247,7 @@ const styles = StyleSheet.create({ ...@@ -202,6 +247,7 @@ const styles = StyleSheet.create({
checkboxText: { checkboxText: {
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
}, },
submitButton: { submitButton: {
backgroundColor: COLORS.primary, backgroundColor: COLORS.primary,
...@@ -251,9 +297,10 @@ const styles = StyleSheet.create({ ...@@ -251,9 +297,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width width: '98%', // Width 100% to fill container width
marginLeft:-100, marginLeft:-95,
elevation: 6, elevation: 6,
minHeight: 50,
}, },
...@@ -273,7 +320,7 @@ const styles = StyleSheet.create({ ...@@ -273,7 +320,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content 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 width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -286,6 +333,7 @@ const styles = StyleSheet.create({ ...@@ -286,6 +333,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
...@@ -306,6 +354,44 @@ const styles = StyleSheet.create({ ...@@ -306,6 +354,44 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom 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 // ... possibly other styles
}); });
......
src/screens/home/skin/SkinUploader.js
View file @ d5a7607b
...@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => { ...@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => {
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO)} onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO2)}
/> />
</View> </View>
</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