Updated add entry form

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