Jaffrey98
2/1/2018 - 7:07 PM
ugly buttons
ugly buttons
import React from 'react';
import {
ScrollView,
StyleSheet,
Modal,
Text,
TextInput,
TouchableOpacity,
View,
Platform,
} from 'react-native';
import {Button} from 'react-native-elements'
import PivotCircle from "../components/PivotCircle";
import { NavigationActions } from 'react-navigation'
var KeyWordHelpers = require("../components/KeyWordHelpers")
var _ = require('lodash');
// Mobx state stores
import { inject, observer, Provider } from 'mobx-react';
import { observable, action } from "mobx";
import stores from '../stores/stores';
@observer
export default class SiteControlScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
activeCommand: "null",
activeCommandText: "null",
commandedSpeed: "null",
confirmModalVisible: false
}
}
componentWillMount(){
console.log(`props be ${this.props.navigation.navigate }`)
}
backToSummary(){
const resetAction = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: 'Main'})]
})
this.props.navigation.dispatch(resetAction);
}
getConfirm(){
this.state.confirmModalVisible = true;
}
cancelCommand(){
console.log("cancel even fired");
this.setState({confirmModalVisible: false})
}
sendSimpleCommand = async () => {
this.setState({confirmModalVisible: false})
site = stores.systemStore.activeSite;
console.log(`found state command to be ${this.state.activeCommand}`);
if (this.state.activeCommand == "null"){
console.log("delay on state update.. better try this again");
setTimeout(this.sendSimpleCommand, 1000);
}else{
var apiURL = "http://api.pivotrac.com/out_command/send_simple_command"
var apiParams = '?device=android&site=' + site.id + "&command=" + this.state.activeCommand;
var requestURL = apiURL + apiParams;
console.log(requestURL);
await fetch(requestURL)
.then((response) => response.json())
.then((responseData) => {
alert(this.state.activeCommandText);
})
}
}
sendSpeed(){
speedCommand = `set_speed_${this.state.commandedSpeed}`
this.setState({activeCommand: speedCommand})
this.setState({activeCommandText: `setting ${stores.systemStore.activeSite.name} to ${this.state.commandedSpeed} ` })
this.getConfirm();
}
sendDryMode(){
this.setState({activeCommand: "set_dry_mode"})
this.setState({activeCommandText: `setting ${stores.systemStore.activeSite.name} to dry mode` })
this.getConfirm();
}
sendWetMode(){
this.setState({activeCommand: "set_wet_mode"})
this.setState({activeCommandText: `setting ${stores.systemStore.activeSite.name} to wet mode` })
this.getConfirm();
}
sendAuto(){
this.setState({activeCommand: "auto"})
this.setState({activeCommandText: `setting ${stores.systemStore.activeSite.name} to auto mode` })
this.getConfirm();
}
sendManual(){
this.setState({activeCommand: "manual"})
this.setState({activeCommandText: `setting ${stores.systemStore.activeSite.name} to manual mode` })
this.getConfirm();
}
enableSchedule(){
this.setState({activeCommand: "enable_schedule"})
this.setState({activeCommandText: `enable scheduled commands for ${stores.systemStore.activeSite.name}` })
this.getConfirm();
}
disableSchedule(){
this.setState({activeCommand: "disable_schedule"})
this.setState({activeCommandText: `disable scheduled commands for ${stores.systemStore.activeSite.name}` })
this.getConfirm();
}
sendReverse(){
this.setState({activeCommand: "reverse"})
this.setState({activeCommandText: `sending reverse command to ${stores.systemStore.activeSite.name} ` })
this.getConfirm();
}
sendForward(){
this.setState({activeCommand: "forward"})
this.setState({activeCommandText: `sending forward command to ${stores.systemStore.activeSite.name}` })
this.getConfirm();
}
sendStop(){
this.setState({activeCommand: "stop"})
this.setState({activeCommandText: `sending stop command to ${stores.systemStore.activeSite.name} ` })
this.getConfirm();
}
sendStart(){
this.setState({activeCommand: "start"})
this.setState({activeCommandText: `sending start command to ${stores.systemStore.activeSite.name} ` })
this.getConfirm();
}
render() {
site = stores.systemStore.activeSite;
if (Platform.OS == "ios"){
kbd = "numbers-and-punctuation"
}else{
kbd = "numeric"
}
return(
<View style={styles.container}>
<Modal
visible={this.state.confirmModalVisible}
backdropColor={'red'}
backdropOpacity={1}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<View style={styles.confirmModal}>
<Text> {this.state.activeCommandText} </Text>
<View style={styles.confirmCancel}>
<Button
backgroundColor="green"
onPress={() => this.sendSimpleCommand()}
title="Confirm"
containerViewStyle={styles.button}
/>
<Button
backgroundColor="red"
onPress={() => this.cancelCommand()}
title="Cancel"
containerViewStyle={styles.button}
/>
</View>
</View>
</Modal>
<View style={styles.row}>
<View style={styles.cellCenter} >
<Text style={styles.titleText}>{site.name}</Text>
<Text style={styles.baseText}>{site.DescriptiveStatus}</Text>
</View>
<View style={styles.gridImage} >
<PivotCircle site={site}/>
</View>
<View style={styles.cellCenter} >
<TouchableOpacity onPress={ this.backToSummary.bind(this) }>
<Text> Pivot Summary</Text>
</TouchableOpacity>
</View>
</View>
{ (stores.controlStore.controlOptions.drawStartStop ) ?
<View style={styles.control}>
{ (stores.controlStore.controlOptions.hasStartOption) ? (
<Button
color={"green"}
outline={true}
onPress={() => this.sendStart()}
title="Start"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => console.log("filler button")}
title="start"
transparent={true}
containerViewStyle={styles.button}
/>
)}
{ (stores.controlStore.controlOptions.hasStopOption) ? (
<Button style={styles.button}
onPress={() => this.sendStop()}
outline={true}
color={"red"}
title="Stop"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => console.log("filler button")}
transparent={true}
title="Stop"
containerViewStyle={styles.button}
/>
)}
</View>
:
<Text>no start stop </Text>
}
{ (stores.controlStore.controlOptions.hasDirectionOption) ? (
<View style={styles.control}>
<Button style={styles.button}
onPress={() => this.sendForward()}
title="Forward"
containerViewStyle={styles.button}
/>
<Button style={styles.button}
onPress={() => this.sendReverse()}
title="Reverse"
containerViewStyle={styles.button}
/>
</View>
) : (
<Text> </Text>
)
}
{ (site.speedTimer != "null") ? (
<View style={styles.control}>
<Button style={styles.button}
onPress={() => this.sendAuto()}
title="Set Auto"
containerViewStyle={styles.button}
/>
<Button style={styles.button}
onPress={() => this.sendManual()}
title="Set Manual"
containerViewStyle={styles.button}
/>
</View>
) : (
<Text> </Text>
)
}
{ (site.speedTimer != "null") ? (
<View style={styles.control}>
{ (site.statusSensor.control_hold == 1) ? (
<Button style={styles.button}
onPress={() => this.enableSchedule()}
title="enable schedules"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => this.enableSchedule()}
title="enable schedules"
containerViewStyle={styles.button}
/>
)
}
{ (site.statusSensor.control_hold == 0) ? (
<Button style={styles.button}
onPress={() => this.disableSchedule()}
title="disable schedules"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => this.disableSchedule()}
title="disable schedules"
containerViewStyle={styles.button}
/>
)
}
</View>
) : (
<Text> </Text>
)
}
{ (stores.controlStore.controlOptions.drawWetDryMode) ? (
<View style={styles.control}>
{ (site.pressureSensor.run_on_pressure == 1) ? (
<Button style={styles.button}
onPress={() => this.sendWetMode()}
title="Wet Mode"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => this.sendWetMode()}
title="Wet Mode"
containerViewStyle={styles.button}
/>
)
}
{ (site.pressureSensor.run_on_pressure == 0) ? (
<Button style={styles.button}
onPress={() => this.sendDryMode()}
title="Dry Mode"
containerViewStyle={styles.button}
/>
) : (
<Button style={styles.button}
onPress={() => this.sendDryMode()}
title="Dry Mode"
containerViewStyle={styles.button}
/>
)
}
</View>
):(
<View><Text>No pressure sensor</Text></View>
)
}
{ (site.speedTimer != "null") ? (
<View style={styles.container}>
<Text style={{paddingTop: 15}}> Set speed to </Text>
<View>
<TextInput
onChangeText={(commandedSpeed) => this.setState({commandedSpeed})}
placeholder={`current: ${site.speedTimer.current_cycle}`}
keyboardType = {kbd}
placeholderTextColor="#808080"
style={styles.input}
/>
<Text> percent </Text>
</View>
<View>
<TouchableOpacity activeOpacity={.5} onPress={() => this.sendSpeed()}>
<View style={styles.button}>
<Text >Send speed command</Text>
</View>
</TouchableOpacity>
</View>
</View>
):(
<View><Text>No speed control</Text></View>
)
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "column",
flex: 1,
backgroundColor: '#fff',
},
control: {
flexDirection: "row",
marginTop: 20,
},
row: {
flex: 1,
justifyContent: "space-between",
flexDirection: "row"
},
headerRow: {
flex: 1,
height: 100,
flexDirection: "row"
},
HeaderText: {
textAlign: 'center',
fontSize: 18,
fontWeight: 'bold',
},
titleText: {
fontSize: 16,
fontWeight: 'bold',
},
cellLeft: {
paddingRight: 40,
flex: .3,
},
cellRight: {
flex: .4,
},
header: {
flex: 1,
height: 24,
backgroundColor: '#fff',
},
baseText: {
fontSize: 12,
},
separator: {
height: 2,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "4%",
marginRight: "4%"
},
input: {
justifyContent: "center",
paddingHorizontal: 10,
},
button: {
flex:1
},
confirmModal: {
paddingTop: 80,
flexDirection: "column",
backgroundColor: "#FBB827",
justifyContent: "space-between",
},
confirmButton: {
backgroundColor: "green",
paddingVertical: 3,
alignItems: "center",
justifyContent: "center",
marginTop: 3,
},
cancelButton: {
backgroundColor: "red",
paddingVertical: 3,
alignItems: "center",
justifyContent: "center",
marginTop: 3,
},
});