Commit 5d3fd6c2 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

event automation enable/disable in frontend

parent f6bf248d

js-apps/meep-frontend/src/js/containers/exec/event-automation-pane.js

0 → 100644
+194 −0
Original line number Diff line number Diff line 
/*

 * Copyright (c) 2019  InterDigital Communications, Inc

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import { connect } from 'react-redux';

import React, { Component } from 'react';

import { Button } from '@rmwc/button';

import { Checkbox } from '@rmwc/checkbox';

import { Grid, GridInner, GridCell } from '@rmwc/grid';

import { Typography } from '@rmwc/typography';



import {

  uiExecChangeAutomationMovementMode,

  uiExecChangeAutomationMobilityMode,

  uiExecChangeAutomationPoasInRangeMode

} from '../../state/ui';



const AUTO_TYPE_MOVEMENT = 'MOVEMENT';

const AUTO_TYPE_MOBILITY = 'MOBILITY';

const AUTO_TYPE_POAS_IN_RANGE = 'POAS-IN-RANGE';



class EventAutomationPane extends Component {

  constructor(props) {

    super(props);

    this.state = {};

  }



  componentDidMount() {

    this.refreshAutomationModes();

  }



  componentDidUpdate(prevProps) {

    if (this.props.sandbox !== prevProps.sandbox) {

      this.refreshAutomationModes();

    }

  }



  // Sync automation states with backend

  refreshAutomationModes() {

    this.props.api.getAutomationState((error, data) => {

      if (!error) {

        for (var i = 0; i < data.states.length; i++) {

          let mode = data.states[i].active ? true : false;

          switch (data.states[i].type) {

          case AUTO_TYPE_MOVEMENT:

            this.props.changeAutomationMovementMode(mode);

            break;

          case AUTO_TYPE_MOBILITY:

            this.props.changeAutomationMobilityMode(mode);

            break;

          case AUTO_TYPE_POAS_IN_RANGE:

            this.props.changeAutomationPoasInRangeMode(mode);

            break;

          default:

            break;

          }

        }

      }

    });

  }



  setMovementMode(mode) {

    this.props.changeAutomationMovementMode(mode);

    this.props.api.setAutomationStateByName(AUTO_TYPE_MOVEMENT, mode, (error) => {

      if (error) {

        // TODO consider showing an alert

        // console.log(error);

      }

    });

  }



  setMobilityMode(mode) {

    this.props.changeAutomationMobilityMode(mode);

    this.props.api.setAutomationStateByName(AUTO_TYPE_MOBILITY, mode, (error) => {

      if (error) {

        // TODO consider showing an alert

        // console.log(error);

      }

    });

  }



  setPoasInRangeMode(mode) {

    this.props.changeAutomationPoasInRangeMode(mode);

    this.props.api.setAutomationStateByName(AUTO_TYPE_POAS_IN_RANGE, mode, (error) => {

      if (error) {

        // TODO consider showing an alert

        // console.log(error);

      }

    });

  }



  render() {

    if (this.props.hide) {

      return null;

    }



    return (

      <div style={{ padding: 10 }}>

        <div style={styles.block}>

          <Typography use="headline6">Event Automation</Typography>

        </div>



        <Grid style={{ marginBottom: 20 }}>

          <GridCell span={12}>

            <Checkbox

              checked={this.props.automationMovementMode}

              onChange={e => this.setMovementMode(e.target.checked)}

            >

              Movement

            </Checkbox>

          </GridCell>

          <GridCell span={12}>

            <Checkbox

              checked={this.props.automationMobilityMode}

              onChange={e => this.setMobilityMode(e.target.checked)}

            >

              Mobility

            </Checkbox>

          </GridCell>

          <GridCell span={12}>

            <Checkbox

              checked={this.props.automationPoasInRangeMode}

              onChange={e => this.setPoasInRangeMode(e.target.checked)}

            >

              POAs in range

            </Checkbox>

          </GridCell>

        </Grid>



        <Grid style={{ marginTop: 10 }}>

          <GridInner>

            <GridCell span={12}>

              <Button

                outlined

                style={styles.button}

                onClick={this.props.onClose}

              >

                Close

              </Button>

            </GridCell>

          </GridInner>

        </Grid>

      </div>

    );

  }

}



const styles = {

  button: {

    marginRight: 10

  },

  block: {

    marginBottom: 20

  },

  field: {

    marginBottom: 10

  }

};



const mapStateToProps = state => {

  return {

    automationMovementMode: state.ui.automationMovementMode,

    automationMobilityMode: state.ui.automationMobilityMode,

    automationPoasInRangeMode: state.ui.automationPoasInRangeMode,

    sandbox: state.ui.sandbox

  };

};



const mapDispatchToProps = dispatch => {

  return {

    changeAutomationMovementMode: mode => dispatch(uiExecChangeAutomationMovementMode(mode)),

    changeAutomationMobilityMode: mode => dispatch(uiExecChangeAutomationMobilityMode(mode)),

    changeAutomationPoasInRangeMode: mode => dispatch(uiExecChangeAutomationPoasInRangeMode(mode))

  };

};



const ConnectedEventAutomationPane = connect(

  mapStateToProps,

  mapDispatchToProps

)(EventAutomationPane);



export default ConnectedEventAutomationPane;

js-apps/meep-frontend/src/js/containers/exec/event-container.js

+21 −0
Original line number Diff line number Diff line
@@ -23,11 +23,13 @@ import { Typography } from '@rmwc/typography'; 


import {

  uiExecChangeEventCreationMode,

  uiExecChangeEventAutomationMode,

  uiExecChangeEventReplayMode

} from '../../state/ui';



import {

  EXEC_BTN_MANUAL_REPLAY,

  EXEC_BTN_AUTOMATION,

  EXEC_BTN_AUTO_REPLAY,

  EXEC_BTN_SAVE_REPLAY

} from '../../meep-constants';
@@ -85,12 +87,21 @@ class EventContainer extends Component { 
  // CREATE EVENT PANE

  onCreateEvent() {

    this.props.changeEventCreationMode(true);

    this.props.changeEventAutomationMode(false);

    this.props.changeEventReplayMode(false);

  }



  // EVENT AUTOMATION PANE

  onAutomateEvent() {

    this.props.changeEventCreationMode(false);

    this.props.changeEventAutomationMode(true);

    this.props.changeEventReplayMode(false);

  }



  // SHOW REPLAY EVENT PANE

  onReplayEvent() {

    this.props.changeEventCreationMode(false);

    this.props.changeEventAutomationMode(false);

    this.props.changeEventReplayMode(true);



    // Refresh
@@ -129,6 +140,14 @@ class EventContainer extends Component { 
                >

                  MANUAL

                </Button>

                <Button

                  outlined

                  style={styles.button}

                  onClick={() => this.onAutomateEvent()}

                  data-cy={EXEC_BTN_AUTOMATION}

                >

                  AUTOMATION

                </Button>

                <Button

                  outlined

                  style={styles.button}
@@ -179,6 +198,7 @@ class EventContainer extends Component { 
const mapStateToProps = state => {

  return {

    eventCreationMode: state.exec.eventCreationMode,

    eventAutomationMode: state.exec.eventAutomationMode,

    eventReplayMode: state.exec.eventReplayMode,

    replayStatus: state.exec.state.replayStatus

  };
@@ -187,6 +207,7 @@ const mapStateToProps = state => { 
const mapDispatchToProps = dispatch => {

  return {

    changeEventCreationMode: mode => dispatch(uiExecChangeEventCreationMode(mode)),

    changeEventAutomationMode: mode => dispatch(uiExecChangeEventAutomationMode(mode)),

    changeEventReplayMode: mode => dispatch(uiExecChangeEventReplayMode(mode))

  };

};

js-apps/meep-frontend/src/js/containers/exec/exec-page-container.js

+20 −3
Original line number Diff line number Diff line
@@ -27,6 +27,7 @@ import ExecPageScenarioButtons from './exec-page-scenario-buttons'; 


import HeadlineBar from '../../components/headline-bar';

import EventCreationPane from './event-creation-pane';

import EventAutomationPane from './event-automation-pane';

import EventReplayPane from './event-replay-pane';



import ExecTable from './exec-table';
@@ -44,6 +45,7 @@ import { execChangeScenarioList, execVisFilteredData } from '../../state/exec'; 
import {

  uiChangeCurrentDialog,

  uiExecChangeEventCreationMode,

  uiExecChangeEventAutomationMode,

  uiExecChangeEventReplayMode,

  uiExecChangeDashCfgMode,

  uiExecChangeEventCfgMode,
@@ -258,6 +260,11 @@ class ExecPageContainer extends Component { 
    this.props.changeEventCreationMode(false);

  }



  // CLOSE EVENT AUTOMATION PANE

  onQuitEventAutomationMode() {

    this.props.changeEventAutomationMode(false);

  }



  // CLOSE REPLAY EVENT PANE

  onQuitEventReplayMode() {

    this.props.changeEventReplayMode(false);
@@ -382,8 +389,9 @@ class ExecPageContainer extends Component { 
      (this.props.exec.state.scenario !== EXEC_STATE_IDLE) ? this.props.execScenarioName : 'None' :

      this.props.cfgScenarioName;



    const spanLeft = (this.props.eventCreationMode || this.props.eventReplayMode) ? 9 : 12;

    const spanRight = (this.props.eventCreationMode || this.props.eventReplayMode) ? 3 : 0;

    const eventPaneOpen = this.props.eventCreationMode || this.props.eventAutomationMode || this.props.eventReplayMode;

    const spanLeft = eventPaneOpen ? 9 : 12;

    const spanRight = eventPaneOpen ? 3 : 0;

    return (

      <div style={{ width: '100%' }}>

        {this.renderDialogs()}
@@ -469,7 +477,7 @@ class ExecPageContainer extends Component { 
              </GridCell>

              <GridCell

                span={spanRight}

                hidden={!this.props.eventCreationMode && !this.props.eventReplayMode}

                hidden={!eventPaneOpen}

                style={styles.inner}

              >

                <Elevation className="component-style" z={2}>
@@ -490,6 +498,13 @@ class ExecPageContainer extends Component { 
                    onClose={() => this.onQuitEventCreationMode()}

                  />

                </Elevation>

                <Elevation className="component-style" z={2}>

                  <EventAutomationPane

                    api={this.props.automationApi}

                    hide={!this.props.eventAutomationMode}

                    onClose={() => this.onQuitEventAutomationMode()}

                  />

                </Elevation>

              </GridCell>

            </Grid>

          </>
@@ -528,6 +543,7 @@ const mapStateToProps = state => { 
    scenario: state.exec.scenario,

    scenarios: state.exec.apiResults.scenarios,

    eventCreationMode: state.ui.eventCreationMode,

    eventAutomationMode: state.ui.eventAutomationMode,

    eventReplayMode: state.ui.eventReplayMode,

    dashCfgMode: state.ui.dashCfgMode,

    eventCfgMode: state.ui.eventCfgMode,
@@ -546,6 +562,7 @@ const mapDispatchToProps = dispatch => { 
    changeScenarioName: name => dispatch(execChangeScenarioName(name)),

    changeState: s => dispatch(execChangeScenarioState(s)),

    changeEventCreationMode: val => dispatch(uiExecChangeEventCreationMode(val)), // (true or false)

    changeEventAutomationMode: mode => dispatch(uiExecChangeEventAutomationMode(mode)),

    changeEventReplayMode: val => dispatch(uiExecChangeEventReplayMode(val)), // (true or false)

    changeDashCfgMode: val => dispatch(uiExecChangeDashCfgMode(val)), // (true or false)

    changeEventCfgMode: val => dispatch(uiExecChangeEventCfgMode(val)), // (true or false)

js-apps/meep-frontend/src/js/containers/idc-map.js

+26 −26
Original line number Diff line number Diff line
@@ -615,23 +615,20 @@ class IDCMap extends Component { 
      this.updateTargetMarker(map);

    }



    // Set UE markers

    var ueMap = {};

    if (map.ueList) {

      for (let i = 0; i < map.ueList.length; i++) {

        let ue = map.ueList[i];

        this.setUeMarker(ue);

        ueMap[ue.assetName] = true;

    // Set COMPUTE markers

    var computeMap = {};

    if (map.computeList) {

      for (let i = 0; i < map.computeList.length; i++) {

        let compute = map.computeList[i];

        this.setComputeMarker(compute);

        computeMap[compute.assetName] = true;

      }

    }



    // Remove old UE markers

    this.ueOverlay.eachLayer((marker) => {

      if (!ueMap[marker.options.meep.ue.id]) {

        if (marker.options.meep.ue.path) {

          marker.options.meep.ue.path.removeFrom(this.uePathOverlay);

        }

        marker.removeFrom(this.ueOverlay);

    // Remove old COMPUTE markers

    this.computeOverlay.eachLayer((marker) => {

      if (!computeMap[marker.options.meep.compute.id]) {

        marker.removeFrom(this.computeOverlay);

      }

    });
@@ -653,20 +650,23 @@ class IDCMap extends Component { 
      }

    });



    // Set COMPUTE markers

    var computeMap = {};

    if (map.computeList) {

      for (let i = 0; i < map.computeList.length; i++) {

        let compute = map.computeList[i];

        this.setComputeMarker(compute);

        computeMap[compute.assetName] = true;

    // Set UE markers

    var ueMap = {};

    if (map.ueList) {

      for (let i = 0; i < map.ueList.length; i++) {

        let ue = map.ueList[i];

        this.setUeMarker(ue);

        ueMap[ue.assetName] = true;

      }

    }



    // Remove old COMPUTE markers

    this.computeOverlay.eachLayer((marker) => {

      if (!computeMap[marker.options.meep.compute.id]) {

        marker.removeFrom(this.computeOverlay);

    // Remove old UE markers

    this.ueOverlay.eachLayer((marker) => {

      if (!ueMap[marker.options.meep.ue.id]) {

        if (marker.options.meep.ue.path) {

          marker.options.meep.ue.path.removeFrom(this.uePathOverlay);

        }

        marker.removeFrom(this.ueOverlay);

      }

    });   

  }

js-apps/meep-frontend/src/js/containers/meep-container.js

+2 −0
Original line number Diff line number Diff line
@@ -112,6 +112,7 @@ class MeepContainer extends Component { 
    this.meepActiveScenarioApi = new meepSandboxCtrlRestApiClient.ActiveScenarioApi();

    this.meepEventsApi = new meepSandboxCtrlRestApiClient.EventsApi();

    this.meepEventReplayApi = new meepSandboxCtrlRestApiClient.EventReplayApi();

    this.meepEventAutomationApi = new meepGisEngineRestApiClient.AutomationApi();

    this.meepGeoDataApi = new meepGisEngineRestApiClient.GeospatialDataApi();

  }
@@ -612,6 +613,7 @@ class MeepContainer extends Component { 
              style={{ width: '100%' }}

              api={this.meepActiveScenarioApi}

              eventsApi={this.meepEventsApi}

              automationApi={this.meepEventAutomationApi}

              replayApi={this.meepEventReplayApi}

              cfgApi={this.meepScenarioConfigurationApi}

              sandboxApi={this.meepSandboxControlApi}