From c6b490b2a4c87a87dece2ee21def654fccb961fb Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 21 Aug 2018 14:26:54 +0200
Subject: [PATCH] Add slider and save value in LocalStorage
---
components/labels.js | 5 ++++
components/settings.js | 62 ++++++++++++++++++++++++++++++++++++++++--
local-storage/index.js | 11 ++++++++
package-lock.json | 46 +++++++++++++++++++++++--------
package.json | 1 +
styles/index.js | 5 ++++
6 files changed, 116 insertions(+), 14 deletions(-)
create mode 100644 local-storage/index.js
diff --git a/components/labels.js b/components/labels.js
index 99400a2d..bd294b65 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -29,5 +29,10 @@ export const settings = {
success: {
message: 'Data successfully imported'
}
+ },
+ tempScale: {
+ segmentTitle: 'Change temperature scale',
+ min: 'Min',
+ max: 'Max'
}
}
\ No newline at end of file
diff --git a/components/settings.js b/components/settings.js
index 97907b10..0f8f76a6 100644
--- a/components/settings.js
+++ b/components/settings.js
@@ -3,21 +3,28 @@ import {
View,
Button,
ScrollView,
- Alert
+ Alert,
+ Text
} from 'react-native'
-
+import Slider from '@ptomasroos/react-native-multi-slider'
import Share from 'react-native-share'
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
import rnfs from 'react-native-fs'
import styles from '../styles/index'
+import config from '../config'
import { settings as labels } from './labels'
import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
import importCsv from '../lib/import-export/import-from-csv'
+import { getTempScale, saveTempScale } from '../local-storage'
export default class Settings extends Component {
render() {
return (
<ScrollView>
+ <View style={styles.settingsSegment}>
+ <Text>{labels.tempScale.segmentTitle}</Text>
+ <TempSlider/>
+ </View>
<View style={styles.homeButtons}>
<View style={styles.homeButton}>
<Button
@@ -37,6 +44,55 @@ export default class Settings extends Component {
}
}
+class TempSlider extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ min: config.temperatureScale.low,
+ max: config.temperatureScale.high
+ }
+ this.getStoredScale()
+ }
+
+ async getStoredScale() {
+ const storedScale = await getTempScale()
+ if (!storedScale) return
+ this.setState(storedScale)
+ }
+
+ onValuesChange = (values) => {
+ this.setState({
+ min: values[0],
+ max: values[1]
+ })
+ }
+
+ onValuesChangeFinish = (values) => {
+ this.setState({
+ min: values[0],
+ max: values[1]
+ })
+ saveTempScale(this.state)
+ }
+
+ render() {
+ return (
+ <View>
+ <Text>{`${labels.tempScale.min} ${this.state.min}`}</Text>
+ <Text>{`${labels.tempScale.max} ${this.state.max}`}</Text>
+ <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}
+ />
+ </View>
+ )
+ }
+}
+
async function openShareDialogAndExport() {
let data
try {
@@ -117,4 +173,4 @@ function alertError(msg) {
function importError(msg) {
const postFixed = `${msg}\n\n${labels.import.errors.postFix}`
alertError(postFixed)
-}
\ No newline at end of file
+}
diff --git a/local-storage/index.js b/local-storage/index.js
new file mode 100644
index 00000000..5fff2335
--- /dev/null
+++ b/local-storage/index.js
@@ -0,0 +1,11 @@
+import { AsyncStorage } from 'react-native'
+
+export async function getTempScale() {
+ const result = await AsyncStorage.getItem('tempScale')
+ if (!result) return result
+ return JSON.parse(result)
+}
+
+export async function saveTempScale(scale) {
+ return AsyncStorage.setItem('tempScale', JSON.stringify(scale))
+}
diff --git a/package-lock.json b/package-lock.json
index 2e57413b..66bd9e78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -723,6 +723,11 @@
}
}
},
+ "@ptomasroos/react-native-multi-slider": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@ptomasroos/react-native-multi-slider/-/react-native-multi-slider-1.0.0.tgz",
+ "integrity": "sha512-NpX22rQLArg9widwMzGf7XsInTDf6mfY/D1XaDVjglNkVphj3NSN37+nF6MofArCxC++1P+jHv0SGWbmJQwy4g=="
+ },
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3727,7 +3732,8 @@
},
"ansi-regex": {
"version": "2.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -3745,11 +3751,13 @@
},
"balanced-match": {
"version": "1.0.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3762,15 +3770,18 @@
},
"code-point-at": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3873,7 +3884,8 @@
},
"inherits": {
"version": "2.0.3",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3883,6 +3895,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3895,17 +3908,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -3922,6 +3938,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3994,7 +4011,8 @@
},
"number-is-nan": {
"version": "1.0.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -4004,6 +4022,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -4079,7 +4098,8 @@
},
"safe-buffer": {
"version": "5.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4109,6 +4129,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4126,6 +4147,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4164,11 +4186,13 @@
},
"wrappy": {
"version": "1.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"yallist": {
"version": "3.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
}
}
},
diff --git a/package.json b/package.json
index 6ff1901c..d1c38e5a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"lint": "eslint components lib test"
},
"dependencies": {
+ "@ptomasroos/react-native-multi-slider": "^1.0.0",
"assert": "^1.4.1",
"csvtojson": "^2.0.8",
"date-range": "0.0.2",
diff --git a/styles/index.js b/styles/index.js
index fde1700a..7d5af98e 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -88,5 +88,10 @@ export default StyleSheet.create({
margin: 30,
textAlign: 'left',
textAlignVertical: 'center'
+ },
+ settingsSegment: {
+ backgroundColor: 'lightgrey',
+ padding: 10,
+ marginTop: 10
}
})
\ No newline at end of file
--
GitLab