Updated add entry form

parent d21f8417
......@@ -19,7 +19,7 @@ const AddData = () => {
if (!isNaN(sleepHoursValue)) {
const postData = {
Job_Satisfication: jobSatisfactionValue,
Job_Satisfaction: jobSatisfactionValue,
Sleep_Hours: sleepHoursValue,
Text: Additional_Text,
isNew: false
......@@ -53,72 +53,74 @@ const AddData = () => {
}}
>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<View style={styles.radioGroup}>
<Text style={styles.radioLabel}>Select Your Job Satisfaction</Text>
<View style={styles.radioButtons}>
<Image source={require('../images/SmileFace.jpg')} style={styles.SmileFace} resizeMode="contain" />
<TouchableOpacity
style={Job_Satisfaction === 'Yes' ? styles.radioButtonSelectedSmile : styles.radioButton1}
onPress={() => setJobSatisfaction('Yes')}
activeOpacity={0.8}>
<Text style={styles.radioButtonText1}>Yes</Text>
</TouchableOpacity>
<Image source={require('../images/SadFace.jpg')} style={styles.SadFace} resizeMode="contain" />
<TouchableOpacity
style={Job_Satisfaction === 'No' ? styles.radioButtonSelectedSad : styles.radioButton2}
onPress={() => setJobSatisfaction('No')}
activeOpacity={0.8}>
<Text style={styles.radioButtonText2}>No</Text>
</TouchableOpacity>
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<View style={styles.modalContent}>
<View style={styles.radioGroup}>
<Text style={styles.radioLabel}>Select Your Job Satisfaction</Text>
<View style={styles.radioButtons}>
<Image source={require('../images/SmileFace.jpg')} style={styles.SmileFace} resizeMode="contain" />
<TouchableOpacity
style={Job_Satisfaction === 'Yes' ? styles.radioButtonSelectedSmile : styles.radioButton1}
onPress={() => setJobSatisfaction('Yes')}
activeOpacity={0.8}>
<Text style={styles.radioButtonText1}>Yes</Text>
</TouchableOpacity>
<Image source={require('../images/SadFace.jpg')} style={styles.SadFace} resizeMode="contain" />
<TouchableOpacity
style={Job_Satisfaction === 'No' ? styles.radioButtonSelectedSad : styles.radioButton2}
onPress={() => setJobSatisfaction('No')}
activeOpacity={0.8}>
<Text style={styles.radioButtonText2}>No</Text>
</TouchableOpacity>
</View>
</View>
</View>
<Text style={styles.textLabel1}>Select Your Sleep Hours </Text>
<TextInput
placeholder='Sleep hours'
value={selectedHours}
onChangeText={(text) => setSelectedHours(text)}
style={styles.Sleepinput}
keyboardType='numeric'
/>
<ScrollView
horizontal
contentContainerStyle={styles.horizontalPicker}
>
{[5, 6, 7, 8, 9, 10].map((hour) => (
<TouchableOpacity
key={hour}
onPress={() => handleHourSelection(hour.toString())}
style={[styles.hourItem, selectedHours === hour.toString() && styles.selectedHourItem]}
>
<Text style={styles.hourText}>{hour}</Text>
</TouchableOpacity>
))}
</ScrollView>
{selectedHours !== '' && (
<View style={styles.selectedLineContainer}>
<View style={styles.selectedLine} />
<Text style={styles.selectedHour}>{selectedHours}</Text>
</View>
)}
<Text style={styles.textLabel2}>Write Your Entry</Text>
<TextInput
placeholder='Additional text'
value={Additional_Text}
onChangeText={(text) => setText(text)}
style={styles.Additionalinput}
/>
<View style={styles.bottomButtons}>
<Button
title='ADD DATA'
onPress={updateData}
<Text style={styles.textLabel1}>Select Your Sleep Hours </Text>
<TextInput
placeholder='Sleep hours'
value={selectedHours}
onChangeText={(text) => setSelectedHours(text)}
style={styles.Sleepinput}
keyboardType='numeric'
/>
<Button
title='Close'
onPress={() => setModalVisible(false)}
<ScrollView
horizontal
contentContainerStyle={styles.horizontalPicker}
>
{[5, 6, 7, 8, 9, 10].map((hour) => (
<TouchableOpacity
key={hour}
onPress={() => handleHourSelection(hour.toString())}
style={[styles.hourItem, selectedHours === hour.toString() && styles.selectedHourItem]}
>
<Text style={styles.hourText}>{hour}</Text>
</TouchableOpacity>
))}
</ScrollView>
{selectedHours !== '' && (
<View style={styles.selectedLineContainer}>
<View style={styles.selectedLine} />
<Text style={styles.selectedHour}>{selectedHours}</Text>
</View>
)}
<Text style={styles.textLabel2}>Write Your Entry</Text>
<TextInput
placeholder='Additional text'
value={Additional_Text}
onChangeText={(text) => setText(text)}
style={styles.Additionalinput}
/>
<View style={styles.bottomButtons}>
<Button
title='ADD DATA'
onPress={updateData}
/>
<Button
title='Close'
onPress={() => setModalVisible(false)}
/>
</View>
</View>
</View>
</ScrollView>
</View>
</Modal>
</View>
......@@ -155,18 +157,18 @@ const styles = StyleSheet.create({
fontSize: 18,
borderRadius: 6,
top: 50,
width: 200,
display:'none',
width: 200,
display: 'none',
},
Additionalinput: {
borderWidth: 1,
borderColor: 'black',
margin: 10,
margin: -10,
padding: 10,
fontSize: 18,
borderRadius: 6,
top: 15,
height: 150,
top: -10,
height: 220,
},
image: {
width: '100%',
......@@ -182,12 +184,12 @@ const styles = StyleSheet.create({
height: '200%',
top: '-2%',
},
scaleimg :{
width: '250%',
height: '13%',
left: -200,
top: 280 ,
position:'absolute',
scaleimg: {
width: '250%',
height: '13%',
left: -200,
top: 280,
position: 'absolute',
},
modalContainer: {
flex: 1,
......@@ -199,8 +201,13 @@ const styles = StyleSheet.create({
backgroundColor: '#fff',
padding: 20,
borderRadius: 10,
width: '90%',
height: '80%',
width: '96%',
minHeight: '90%',
marginLeft: 10,
},
scrollViewContent: {
flexGrow: 1,
justifyContent: 'center',
},
radioGroup: {
marginBottom: 20,
......@@ -264,7 +271,7 @@ const styles = StyleSheet.create({
bottomButtons: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
marginTop: 20,
},
textLabel1: {
fontSize: 16,
......@@ -274,12 +281,12 @@ const styles = StyleSheet.create({
top: '12%',
},
textLabel2: {
fontSize: 16,
marginBottom: 15,
fontWeight: 'bold',
color: '#7B241C',
top: '5%',
},
fontSize: 16,
marginBottom: 15,
fontWeight: 'bold',
color: '#7B241C',
top: '-5%',
},
horizontalPicker: {
marginTop: -10,
paddingHorizontal: 10,
......@@ -291,12 +298,12 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 6,
height: 50,
top: 80,
height: 50,
top: 80,
},
selectedHourItem: {
backgroundColor: 'lightblue',
borderColor: 'lightblue',
borderColor: 'lightblue',
},
hourText: {
fontSize: 16,
......@@ -305,13 +312,13 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
selectedLine: {
height: 50,
height: 50,
backgroundColor: 'black',
},
selectedHour: {
fontSize: 16,
top: 40,
fontWeight: 'bold',
display:'none',
display: 'none',
},
});
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