ugly buttons

control.js

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,
  },


});