Skip to content

Instantly share code, notes, and snippets.

@shawn-kb

shawn-kb/control.js

Created February 1, 2018 18:20
Show Gist options
  • Save shawn-kb/c1635a6782d67decba56b525aad0c7c9 to your computer and use it in GitHub Desktop.
Save shawn-kb/c1635a6782d67decba56b525aad0c7c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. skrite created this gist Feb 1, 2018.
    488 changes: 488 additions & 0 deletions control.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,488 @@
    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"
    />
    <Button
    backgroundColor="red"
    onPress={() => this.cancelCommand()}
    title="Cancel"
    />
    </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"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => console.log("filler button")}
    title="start"
    transparent={true}
    />
    )}

    { (stores.controlStore.controlOptions.hasStopOption) ? (
    <Button style={styles.button}
    onPress={() => this.sendStop()}
    outline={true}
    color={"red"}
    title="Stop"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => console.log("filler button")}
    transparent={true}
    title="Stop"
    />
    )}
    </View>

    :
    <Text>no start stop </Text>
    }


    { (stores.controlStore.controlOptions.hasDirectionOption) ? (
    <View style={styles.control}>

    <Button style={styles.button}
    onPress={() => this.sendForward()}
    title="Forward"
    />

    <Button style={styles.button}
    onPress={() => this.sendReverse()}
    title="Reverse"
    />
    </View>

    ) : (

    <Text> </Text>

    )
    }

    { (site.speedTimer != "null") ? (
    <View style={styles.control}>
    <Button style={styles.button}
    onPress={() => this.sendAuto()}
    title="Set Auto"
    />

    <Button style={styles.button}
    onPress={() => this.sendManual()}
    title="Set Manual"
    />
    </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"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => this.enableSchedule()}
    title="enable schedules"
    />
    )
    }

    { (site.statusSensor.control_hold == 0) ? (
    <Button style={styles.button}
    onPress={() => this.disableSchedule()}
    title="disable schedules"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => this.disableSchedule()}
    title="disable schedules"
    />
    )
    }
    </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"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => this.sendWetMode()}
    title="Wet Mode"
    />
    )
    }

    { (site.pressureSensor.run_on_pressure == 0) ? (
    <Button style={styles.button}
    onPress={() => this.sendDryMode()}
    title="Dry Mode"
    />
    ) : (
    <Button style={styles.button}
    onPress={() => this.sendDryMode()}
    title="Dry Mode"
    />
    )
    }
    </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",
    paddingTop: 20,
    justifyContent: "space-between",
    },
    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: {
    paddingVertical: 3,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 3,
    },

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


    });