Merge branch 'master' into 73-implement-nfp-logic-for-mucus-mode

2018-07-16 13:50:57 +02:00
parent 18d6a8c05a 5725739d4e
commit c96d3d4550
16 changed files with 601 additions and 371 deletions
@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  View,
+  Button,
+} from 'react-native'
+import { saveSymptom } from '../../db'
+
+export default function (showView) {
+  return function ({ symptom, cycleDay, saveAction, saveDisabled}) {
+    const buttons = [
+      {
+        title: 'Cancel',
+        action: () => showView('dayView')
+      },
+      {
+        title: 'Delete',
+        action: () => {
+          saveSymptom(symptom, cycleDay)
+          showView('dayView')
+        }
+      }, {
+        title: 'Save',
+        action: () => {
+          saveAction()
+          showView('dayView')
+        },
+        disabledCondition: saveDisabled
+      }
+    ]
+
+    return buttons.map(({ title, action, disabledCondition }, i) => {
+      const style = { flex: 1, marginHorizontal: 10 }
+      if (i === 0) style.marginLeft = 0
+      if (i === buttons.length - 1) style.marginRight = 0
+      return (
+        <View style={style} key={i}>
+          <Button
+            onPress={action}
+            disabled={disabledCondition}
+            title={title}>
+          </Button>
+        </View >
+      )
+    })
+  }
+}
@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text
+} from 'react-native'
+import styles from '../../styles'
+import {
+  bleeding as bleedingLabels,
+  mucusFeeling as feelingLabels,
+  mucusTexture as textureLabels,
+  mucusNFP as computeSensiplanMucusLabels,
+} from './labels/labels'
+import cycleDayModule from '../../lib/cycle'
+import { bleedingDaysSortedByDate } from '../../db'
+
+const getCycleDayNumber = cycleDayModule().getCycleDayNumber
+
+export default class DayView extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.showView = props.showView
+    this.state = {
+      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
+    }
+
+    this.setStateWithCurrentCycleDayNumber = (function (DayViewComponent) {
+      return function () {
+        DayViewComponent.setState({
+          cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCurrentCycleDayNumber)
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentCycleDayNumber)
+  }
+
+  render() {
+    const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
+    let bleedingLabel
+    if (typeof bleedingValue === 'number') {
+      bleedingLabel = `${bleedingLabels[bleedingValue]}`
+      if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
+    } else {
+      bleedingLabel = 'edit'
+    }
+    const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value
+    let temperatureLabel
+    if (typeof temperatureValue === 'number') {
+      temperatureLabel = `${temperatureValue} °C - ${this.cycleDay.temperature.time}`
+      if (this.cycleDay.temperature.exclude) {
+        temperatureLabel = "( " + temperatureLabel + " )"
+      }
+    } else {
+      temperatureLabel = 'edit'
+    }
+
+    const mucusFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.feeling
+    const mucusTextureValue = this.cycleDay.mucus && this.cycleDay.mucus.texture
+    const mucusComputedValue = this.cycleDay.mucus && this.cycleDay.mucus.computedNfp
+    let mucusLabel
+    if (typeof mucusFeelingValue === 'number' && typeof mucusTextureValue === 'number') {
+      mucusLabel = `${feelingLabels[mucusFeelingValue]} + ${textureLabels[mucusTextureValue]} ( ${computeSensiplanMucusLabels[mucusComputedValue]} )`
+      if (this.cycleDay.mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
+    } else {
+      mucusLabel = 'edit'
+    }
+
+    return (
+      <View style={styles.symptomEditView}>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Bleeding</Text>
+          <View style={styles.symptomEditButton}>
+            <Button
+              onPress={() => this.showView('bleedingEditView')}
+              title={bleedingLabel}>
+            </Button>
+          </View>
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Temperature</Text>
+          <View style={styles.symptomEditButton}>
+            <Button
+              onPress={() => this.showView('temperatureEditView')}
+              title={temperatureLabel}>
+            </Button>
+          </View>
+        </View>
+        <View style={ styles.symptomViewRowInline }>
+          <Text style={styles.symptomDayView}>Mucus</Text>
+          <View style={ styles.symptomEditButton }>
+            <Button
+              onPress={() => this.showView('mucusEditView')}
+              title={mucusLabel}>
+            </Button>
+          </View>
+        </View>
+      </View >
+    )
+  }
+}
@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import cycleModule from '../../lib/cycle'
+import getFertilityStatus from '../../lib/sympto-adapter'
+import DayView from './cycle-day-overview'
+import BleedingEditView from './symptoms/bleeding'
+import TemperatureEditView from './symptoms/temperature'
+import MucusEditView from './symptoms/mucus'
+import { formatDateForViewHeader } from './labels/format'
+import styles from '../../styles'
+import actionButtonModule from './action-buttons'
+
+const getCycleDayNumber = cycleModule().getCycleDayNumber
+
+export default class Day extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.navigation.state.params.cycleDay
+
+    this.state = {
+      visibleComponent: 'dayView',
+    }
+
+    this.showView = view => {
+      this.setState({visibleComponent: view})
+    }
+
+    this.makeActionButtons = actionButtonModule(this.showView)
+  }
+
+  render() {
+    const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
+    const fertilityStatus = getFertilityStatus(this.cycleDay.date)
+    return (
+      <View>
+        <View style={ styles.cycleDayDateView }>
+          <Text style={styles.dateHeader}>
+            {formatDateForViewHeader(this.cycleDay.date)}
+          </Text>
+        </View >
+        <View style={ styles.cycleDayNumberView }>
+          { cycleDayNumber &&
+            <Text style={styles.cycleDayNumber} >
+              Cycle day {cycleDayNumber}
+            </Text> }
+
+          <Text style={styles.cycleDayNumber} >
+            {fertilityStatus}
+          </Text>
+        </View >
+        <View>
+          {
+            { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
+              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
+              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
+              mucusEditView: <MucusEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>
+            }[this.state.visibleComponent]
+          }
+        </View >
+      </View >
+    )
+  }
+}
@@ -0,0 +1,5 @@
+import moment from "moment"
+
+export function formatDateForViewHeader(date) {
+  return moment(date).format('MMMM Do YYYY')
+}
@@ -0,0 +1,11 @@
+const bleeding = ['spotting', 'light', 'medium', 'heavy']
+const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
+const mucusTexture = ['nothing', 'creamy', 'egg white']
+const mucusNFP = ['t', 'Ø', 'f', 'S', '+S']
+
+export {
+  bleeding,
+  mucusFeeling,
+  mucusTexture,
+  mucusNFP
+}
@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Switch
+} from 'react-native'
+import RadioForm from 'react-native-simple-radio-button'
+import styles from '../../../styles'
+import { saveSymptom } from '../../../db'
+import { bleeding as labels } from '../labels/labels'
+
+export default class Bleeding extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
+    if (!(typeof bleedingValue === 'number')) {
+      bleedingValue = -1
+    }
+    this.state = {
+      currentValue: bleedingValue,
+      exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false
+    }
+  }
+
+  render() {
+    const bleedingRadioProps = [
+      { label: labels[0], value: 0 },
+      { label: labels[1], value: 1 },
+      { label: labels[2], value: 2 },
+      { label: labels[3], value: 3 },
+    ]
+    return (
+      <View style={styles.symptomEditView}>
+        <Text style={styles.symptomDayView}>Bleeding</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={bleedingRadioProps}
+            initial={this.state.currentValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentValue: itemValue })
+            }}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons(
+            {
+              symptom: 'bleeding',
+              cycleDay: this.cycleDay,
+              saveAction: () => {
+                saveSymptom('bleeding', this.cycleDay, {
+                  value: this.state.currentValue,
+                  exclude: this.state.exclude
+                })
+              },
+              saveDisabled: this.state.currentValue === -1
+            }
+          )}
+        </View>
+      </View>
+    )
+  }
+}
@@ -0,0 +1,109 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Switch
+} from 'react-native'
+import RadioForm from 'react-native-simple-radio-button'
+import styles from '../../../styles'
+import { saveSymptom } from '../../../db'
+import {
+  mucusFeeling as feelingLabels,
+  mucusTexture as textureLabels
+} from '../labels/labels'
+import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+
+
+export default class Mucus extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    this.state = {
+      exclude: this.cycleDay.mucus ? this.cycleDay.mucus.exclude : false
+    }
+
+    this.state.currentFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.feeling
+    if (typeof this.state.currentFeelingValue !== 'number') {
+      this.state.currentFeelingValue = -1
+    }
+
+    this.state.currentTextureValue = this.cycleDay.mucus && this.cycleDay.mucus.texture
+    if (typeof this.state.currentTextureValue !== 'number') {
+      this.state.currentTextureValue = -1
+    }
+  }
+
+  render() {
+    const mucusFeelingRadioProps = [
+      {label: feelingLabels[0], value: 0 },
+      {label: feelingLabels[1], value: 1 },
+      {label: feelingLabels[2], value: 2 },
+      {label: feelingLabels[3], value: 3 }
+    ]
+    const mucusTextureRadioProps = [
+      {label: textureLabels[0], value: 0 },
+      {label: textureLabels[1], value: 1 },
+      {label: textureLabels[2], value: 2 }
+    ]
+    return(
+      <View style={ styles.symptomEditView }>
+        <Text style={styles.symptomDayView}>Mucus</Text>
+        <Text style={styles.symptomDayView}>Feeling</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={mucusFeelingRadioProps}
+            initial={this.state.currentFeelingValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentFeelingValue: itemValue })
+            }}
+          />
+        </View>
+        <Text style={styles.symptomDayView}>Texture</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={mucusTextureRadioProps}
+            initial={this.state.currentTextureValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentTextureValue: itemValue })
+            }}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons(
+            {
+              symptom: 'mucus',
+              cycleDay: this.cycleDay,
+              saveAction: () => {
+                saveSymptom('mucus', this.cycleDay, {
+                  feeling: this.state.currentFeelingValue,
+                  texture: this.state.currentTextureValue,
+                  computedNfp: computeSensiplanValue(this.state.currentFeelingValue, this.state.currentTextureValue),
+                  exclude: this.state.exclude
+                })
+              },
+              saveDisabled: this.state.currentFeelingValue === -1 || this.state.currentTextureValue === -1
+            }
+          )}
+        </View>
+
+      </View>
+    )
+  }
+}
@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  TextInput,
+  Switch
+} from 'react-native'
+
+import { getPreviousTemperature, saveSymptom } from '../../../db'
+import styles from '../../../styles'
+import { LocalTime, ChronoUnit } from 'js-joda'
+
+export default class Temp extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    let initialValue
+
+    if (this.cycleDay.temperature) {
+      initialValue = this.cycleDay.temperature.value.toString()
+      this.time = this.cycleDay.temperature.time
+    } else {
+      const prevTemp = getPreviousTemperature(this.cycleDay)
+      initialValue = prevTemp ? prevTemp.toString() : ''
+    }
+
+    this.state = {
+      currentValue: initialValue,
+      exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false
+    }
+  }
+
+  render() {
+    const cycleDay = this.cycleDay
+    return (
+      <View style={styles.symptomEditView}>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+          <TextInput
+            style={styles.temperatureTextInput}
+            placeholder="Enter"
+            onChangeText={(val) => {
+              this.setState({ currentValue: val })
+            }}
+            keyboardType='numeric'
+            value={this.state.currentValue}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons({
+            symptom: 'temperature',
+            cycleDay: this.cycleDay,
+            saveAction: () => {
+              const dataToSave = {
+                value: Number(this.state.currentValue),
+                exclude: this.state.exclude
+              }
+              if (!cycleDay.temperature || cycleDay.temperature && !cycleDay.temperature.time) {
+                const now = LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString()
+                dataToSave.time = now
+              }
+              saveSymptom('temperature', cycleDay, dataToSave)
+            },
+            saveDisabled: this.state.currentValue === ''
+          })}
+        </View>
+      </View>
+    )
+  }
+}