Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
- import React, {Component} from 'react';
- import {AppRegistry, StyleSheet, Alert, Text, View, TextInput, Button} from 'react-native';
- import _ from 'lodash';
- import CheckBox from 'react-native-checkbox';
- export default class Sensors extends Component {
- constructor(props) {
- super(props);
- this.state = {
- list: [],
- url: 'http://septen.pl/json.php',
- emptyList: true,
- changeUrl: false
- };
- }
- componentDidMount() {
- this.interval = setInterval(() => {
- if (this.state.changeUrl) {
- fetch(this.state.url)
- .then((response) => response.json())
- .then((responseJson) => {
- let keys = _.keys(responseJson.data);
- this.setState({
- list: _.map(keys, (key, i) => ({
- ...responseJson.data[key],
- checked: typeof this.state.list[i] != 'undefined' ? this.state.list[i].checked : true
- })),
- emptyList: false
- });
- })
- .catch((error) => {
- this.setState({
- list: [],
- emptyList: true
- }, () => {
- clearInterval(this.interval);
- Alert.alert(
- 'Connection error',
- 'Connection error'
- )
- });
- });
- }
- }, 1000);
- }
- onChange(i) {
- this.state.list[i].checked = !this.state.list[i].checked;
- this.setState({list: this.state.list});
- }
- onChangeText(url) {
- this.state.url = url;
- }
- onClick() {
- this.setState({changeUrl: true});
- }
- render() {
- const {emptyList, list} = this.state;
- let filteredList = _.filter(list, {checked: true});
- return <View style={styles.container2}>
- {emptyList && <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
- label="URL" value={this.state.url}
- onChangeText={this.onChangeText.bind(this)}/>}
- {emptyList && <Button onPress={this.onClick.bind(this)}
- title="Ustaw url"/>}
- {emptyList && <Text style={styles.empty}>
- Brak sensorów
- </Text>}
- {!emptyList && <Text style={styles.sensors}>
- Sensory
- </Text>}
- <View style={{flexDirection: 'row', flexWrap: 'wrap', marginBottom: 50}}>
- {
- _.map(list, (elem, i) => <CheckBox label={elem.sensor_name}
- style={{flexGrow: 0}}
- key={i}
- checked={elem.checked}
- onChange={this.onChange.bind(this, i)}/>)
- }
- </View>
- {
- _.map(filteredList, (elem, i) => {
- let length = elem.measurement.length;
- let value = elem.measurement[length - 1].measurement_value;
- return <Text key={i}>{`${elem.sensor_name} wartość: ${value}`}</Text>
- })
- }
- </View>;
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF'
- },
- container2: {
- flex: 1,
- paddingTop: 30,
- alignItems: 'center',
- backgroundColor: '#F5FCFF'
- },
- sensors: {
- fontSize: 30,
- margin: 10
- },
- empty: {
- fontSize: 30,
- margin: 10
- },
- sensor: {
- alignSelf: "flex-start",
- fontSize: 18,
- margin: 10
- }
- });
- AppRegistry.registerComponent('Sensors', () => Sensors);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement