lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layouts of cycle-day, edit symptoms screens and home

Browse Source
This commit is contained in:
tina
2018-06-15 19:31:29 +02:00
parent a46eb4421b
commit 4a5afd4662
6 changed files with 228 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bleeding.js
+63 -39
View File
@@ -33,45 +33,69 @@ export default class Bleeding extends Component {
{label: labels[3], value: 3 }, {label: labels[3], value: 3 },
] ]
return ( return (
<View style={styles.container}> <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
<Text>Bleeding</Text> <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<RadioForm <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
radio_props={bleedingRadioProps} <View style={{flex: 1}}>
initial={this.state.currentValue} <Text style={styles.symptomDayView}>Bleeding</Text>
formHorizontal={true} </View>
labelHorizontal={false} <View style={{flex: 1}}>
onPress={(itemValue) => { <RadioForm
this.setState({currentValue: itemValue}) radio_props={bleedingRadioProps}
}} initial={this.state.currentValue}
/> formHorizontal={true}
<Text>Exclude</Text> labelHorizontal={false}
<Switch labelStyle={styles.radioButton}
onValueChange={(val) => { onPress={(itemValue) => {
this.setState({exclude: val}) this.setState({currentValue: itemValue})
}} }}
value={this.state.exclude} /> />
<Button </View>
onPress={() => this.showView('dayView')} </View>
title="Cancel"> <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
</Button> <View style={{flex: 1, margin: 5}}>
<Button <Text style={styles.symptomDayView}>Exclude</Text>
onPress={() => { </View>
saveBleeding(this.cycleDay) <View style={{flex: 1, margin: 5}}>
this.showView('dayView') <Switch
}} onValueChange={(val) => {
title="Delete entry"> this.setState({exclude: val})
</Button> }}
<Button value={this.state.exclude}
onPress={() => { />
saveBleeding(this.cycleDay, { </View>
value: this.state.currentValue, </View>
exclude: this.state.exclude </View>
}) <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
this.showView('dayView') <View style={{flex: 1, margin: 5}}>
}} <Button
disabled={ this.state.currentValue === -1 } onPress={() => this.showView('dayView')}
title="Save"> title="Cancel">
</Button> </Button>
</View>
<View style={{flex: 1, margin: 5}}>
<Button
onPress={() => {
saveBleeding(this.cycleDay)
this.showView('dayView')
}}
title="Delete">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<Button
onPress={() => {
saveBleeding(this.cycleDay, {
value: this.state.currentValue,
exclude: this.state.exclude
})
this.showView('dayView')
}}
disabled={ this.state.currentValue === -1 }
title="Save">
</Button>
</View>
</View>
</View> </View>
) )
} }
cycle-day-overview.js
+29 -17
View File
@@ -39,32 +39,44 @@ export default class DayView extends Component {
const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
let bleedingLabel let bleedingLabel
if (typeof bleedingValue === 'number') { if (typeof bleedingValue === 'number') {
bleedingLabel = `Bleeding: ${labels[bleedingValue]}` bleedingLabel = `${labels[bleedingValue]}`
if (this.cycleDay.bleeding.exclude) bleedingLabel += " (Excluded)" if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
} else { } else {
bleedingLabel = null bleedingLabel = 'edit'
} }
const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value
let temperatureLabel let temperatureLabel
if (typeof temperatureValue === 'number') { if (typeof temperatureValue === 'number') {
temperatureLabel = `Temperature: ${temperatureValue}` temperatureLabel = `${temperatureValue} °C`
if (this.cycleDay.temperature.exclude) temperatureLabel += " (Excluded)" if (this.cycleDay.temperature.exclude) temperatureLabel = "( " + temperatureLabel + " )"
} else { } else {
temperatureLabel = null temperatureLabel = 'edit'
} }
return ( return (
<View> <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
<Text style={styles.welcome}>{bleedingLabel}</Text> <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<Text style={styles.welcome}>{temperatureLabel}</Text> <View style={{flex: 1}}>
<Button <Text style={styles.symptomDayView}>Bleeding</Text>
onPress={() => this.showView('bleedingEditView')} </View>
title="Edit bleeding"> <View style={{flex: 1, margin:5}}>
</Button> <Button
<Button onPress={() => this.showView('bleedingEditView')}
onPress={() => this.showView('temperatureEditView')} title={bleedingLabel}>
title="Edit temperature"> </Button>
</Button> </View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Temperature</Text>
</View>
<View style={{flex: 1, margin:5}}>
<Button
onPress={() => this.showView('temperatureEditView')}
title={temperatureLabel}>
</Button>
</View>
</View>
</View > </View >
) )
} }
cycle-day.js
+17 -10
View File
@@ -29,16 +29,23 @@ export default class Day extends Component {
render() { render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date) const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
return ( return (
<View style={styles.container}> <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}>
<Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text> <View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}>
{ cycleDayNumber && <Text>Cycle day {cycleDayNumber}</Text> } <Text style={styles.dateHeader}>
{ {formatDateForViewHeader(this.cycleDay.date)}
{ dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />, </Text>
bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>, </View >
temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/> <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}>
}[this.state.visibleComponent] { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
} </View >
<View style={{flex: 8, justifyContent: 'center',}}>
{
{ dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>
}[this.state.visibleComponent]
}
</View >
</View > </View >
) )
} }
home.js
+26 -14
View File
@@ -46,20 +46,32 @@ export default class Home extends Component {
render() { render() {
const navigate = this.props.navigation.navigate const navigate = this.props.navigation.navigate
return ( return (
<View style={styles.container}> <View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}>
<Text style={styles.welcome}>{this.state.welcomeText}</Text> <View style={{flex: 2}}>
<Button <View>
onPress={() => this.passTodayToDayView()} <Text style={styles.welcome}>{this.state.welcomeText}</Text>
title="Edit symptoms for today"> </View>
</Button> </View>
<Button <View style={{flex: 3, flexDirection: 'column', justifyContent: 'space-around', margin: 5}}>
onPress={() => navigate('calendar')} <View>
title="Go to calendar"> <Button
</Button> onPress={() => this.passTodayToDayView()}
<Button title="Edit symptoms for today">
onPress={() => deleteAll()} </Button>
title="delete everything"> </View>
</Button> <View>
<Button
onPress={() => navigate('calendar')}
title="Go to calendar">
</Button>
</View>
<View>
<Button
onPress={() => deleteAll()}
title="delete everything">
</Button>
</View>
</View>
</View> </View>
) )
} }
styles.js
+29 -2
View File
@@ -8,6 +8,33 @@ export default StyleSheet.create({
welcome: { welcome: {
fontSize: 20, fontSize: 20,
margin: 30, margin: 30,
textAlign: 'center' textAlign: 'center',
} textAlignVertical: 'center'
},
dateHeader: {
fontSize: 20,
fontWeight: 'bold',
margin: 30,
color: 'white',
textAlign: 'center',
textAlignVertical: 'center'
},
cycleDayNumber: {
fontSize: 18,
margin: 20,
textAlign: 'center',
textAlignVertical: 'center'
},
symptomDayView: {
fontSize: 20,
margin: 30,
textAlign: 'left',
textAlignVertical: 'center'
},
radioButton: {
fontSize: 18,
margin: 5,
textAlign: 'center',
textAlignVertical: 'center'
},
}) })
temperature.js
+64 -41
View File
@@ -8,6 +8,7 @@ import {
} from 'react-native' } from 'react-native'
import { saveTemperature, getPreviousTemperature } from './db' import { saveTemperature, getPreviousTemperature } from './db'
import styles from './styles'
export default class Temp extends Component { export default class Temp extends Component {
constructor(props) { constructor(props) {
@@ -32,47 +33,69 @@ export default class Temp extends Component {
render() { render() {
const cycleDay = this.cycleDay const cycleDay = this.cycleDay
return ( return (
<View> <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
<Text>Temperature</Text> <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<TextInput <View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
placeholder="Enter temperature" <View style={{flex: 3, margin: 5}}>
onChangeText={(val) => { <Text style={styles.symptomDayView}>Temperature (°C)</Text>
this.setState({currentValue: val}) </View>
}} <View style={{flex: 1, margin: 5}}>
keyboardType='numeric' <TextInput
value = {this.state.currentValue} placeholder="Enter temperature"
/> onChangeText={(val) => {
<Text>Exclude</Text> this.setState({currentValue: val})
<Switch }}
onValueChange = {(val) => { keyboardType='numeric'
this.setState({ exclude: val }) value = {this.state.currentValue}
}} />
value = { this.state.exclude } </View>
/> </View>
<Button <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
onPress={() => { <View style={{flex: 1, margin: 5}}>
this.showView('dayView') <Text style={styles.symptomDayView}>Exclude</Text>
}} </View>
title="Cancel"> <View style={{flex: 1, margin: 5}}>
</Button> <Switch
<Button onValueChange = {(val) => {
onPress={() => { this.setState({ exclude: val })
saveTemperature(cycleDay) }}
this.showView('dayView') value = { this.state.exclude }
}} />
title="Delete entry"> </View>
</Button> </View>
<Button </View>
onPress={() => { <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
saveTemperature(cycleDay, { <View style={{flex: 1, margin: 5}}>
value: Number(this.state.currentValue), <Button
exclude: this.state.exclude onPress={() => {
}) this.showView('dayView')
this.showView('dayView') }}
}} title="Cancel">
disabled={ this.state.currentValue === '' } </Button>
title="Save"> </View>
</Button> <View style={{flex: 1, margin: 5}}>
<Button
onPress={() => {
saveTemperature(cycleDay)
this.showView('dayView')
}}
title="Delete">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<Button
onPress={() => {
saveTemperature(cycleDay, {
value: Number(this.state.currentValue),
exclude: this.state.exclude
})
this.showView('dayView')
}}
disabled={ this.state.currentValue === '' }
title="Save">
</Button>
</View>
</View>
</View> </View>
) )
} }