Split settings view up

2018-12-19 09:53:37 +01:00
parent f7fc65507e
commit 1c9eea3aa0
16 changed files with 210 additions and 119 deletions
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import {
+  ScrollView, View
+} from 'react-native'
+import styles from '../../../styles'
+import { settings as labels } from '../../../i18n/en/settings'
+import AppText from '../../app-text'
+import TempSlider from './temp-slider'
+import UseCervixSetting from './use-cervix'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <UseCervixSetting/>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.tempScale.segmentTitle}
+          </AppText>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TempSlider/>
+        </View>
+      </ScrollView>
+    )
+  }
+}
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import Slider from '@ptomasroos/react-native-multi-slider'
+import AppText from '../../app-text'
+import {
+  scaleObservable,
+  saveTempScale,
+} from '../../../local-storage'
+import { secondaryColor } from '../../../styles/index'
+import { settings as labels } from '../../../i18n/en/settings'
+import config from '../../../config'
+import alertError from '../alert-error'
+
+export default class TempSlider extends Component {
+  constructor(props) {
+    super(props)
+    this.state = Object.assign({}, scaleObservable.value)
+  }
+
+  onValuesChange = (values) => {
+    this.setState({
+      min: values[0],
+      max: values[1]
+    })
+  }
+
+  onValuesChangeFinish = (values) => {
+    this.setState({
+      min: values[0],
+      max: values[1]
+    })
+    try {
+      saveTempScale(this.state)
+    } catch(err) {
+      alertError(labels.tempScale.saveError)
+    }
+  }
+
+  render() {
+    return (
+      <View style={{ alignItems: 'center' }}>
+        <AppText>{`${labels.tempScale.min} ${this.state.min.toFixed(1)}`}</AppText>
+        <AppText>{`${labels.tempScale.max} ${this.state.max.toFixed(1)}`}</AppText>
+        <Slider
+          values={[this.state.min, this.state.max]}
+          min={config.temperatureScale.min}
+          max={config.temperatureScale.max}
+          step={0.5}
+          onValuesChange={this.onValuesChange}
+          onValuesChangeFinish={this.onValuesChangeFinish}
+          selectedStyle={{
+            backgroundColor: 'darkgrey',
+          }}
+          unselectedStyle={{
+            backgroundColor: 'silver',
+          }}
+          trackStyle={{
+            height: 10,
+          }}
+          markerStyle={{
+            backgroundColor: secondaryColor,
+            height: 20,
+            width: 20,
+            borderRadius: 100,
+            marginTop: 10
+          }}
+        />
+      </View>
+    )
+  }
+}
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+  Switch
+} from 'react-native'
+import AppText from '../../app-text'
+import {
+  useCervixObservable,
+  saveUseCervix
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import { settings as labels } from '../../../i18n/en/settings'
+
+export default class UseCervixSetting extends Component {
+  constructor() {
+    super()
+    this.state = {useCervix: useCervixObservable.value}
+  }
+
+  render() {
+    return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+      >
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.useCervix.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            {this.state.useCervix ?
+              <AppText>{labels.useCervix.cervixModeOn}</AppText>
+              :
+              <AppText>{labels.useCervix.cervixModeOff}</AppText>
+            }
+          </View>
+          <Switch
+            value={this.state.useCervix}
+            onValueChange={bool => {
+              this.setState({ useCervix: bool })
+              saveUseCervix(bool)
+            }}
+          />
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}