Commit 0d77d2a3 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

path update support

parent 92f7409d

js-apps/meep-frontend/src/js/containers/cfg/cfg-network-element-container.js

+11 −4
Original line number Diff line number Diff line
@@ -228,6 +228,14 @@ const validateInt = val => { 
  return val.indexOf('.') === -1 ? null : 'Must be an integer';

};



const validatePositiveInt = val => {

  const intError = validateInt(val);

  if (intError) {

    return intError;

  }

  return val >= 0 ? null : 'Must be a positive integer';

};



const validatePath = val => {

  /*eslint-disable */

  if (val.match(/^.*?(?=[\^#%&$\*<>\?\{\|\} ]).*$/)) {
@@ -295,9 +303,8 @@ const validateCellularCellId = val => { 


const validateLocation = val => {

  if (val) {

    // TODO -- Validate location format

    try {

      JSON.parse(val);

      L.GeoJSON.coordsToLatLng(JSON.parse(val));

    } catch(e) {

      return '[longitude,latitude]';

    }
@@ -309,7 +316,7 @@ const validateGeoPath = val => { 
  if (val) {

    // TODO -- Validate location format

    try {

      JSON.parse(val);

      L.GeoJSON.coordsToLatLngs(JSON.parse(val),0);

    } catch(e) {

      return '[[longitude,latitude],...]';

    }
@@ -752,7 +759,7 @@ const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element } 
            element={element}

            isNumber={true}

            label='Radius (m)'

            validate={validateNumber}

            validate={validatePositiveInt}

            fieldName={FIELD_GEO_RADIUS}

            cydata={CFG_ELEM_GEO_RADIUS}

          />

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

+3 −1
Original line number Diff line number Diff line
@@ -121,7 +121,9 @@ class CfgPageContainer extends Component { 
  // EDIT

  onEditElement(element) {

    if (element !== null) {

      if (!this.props.configuredElement || (element.id !== this.props.configuredElement.id)) {

        this.props.cfgElemEdit(element);

      }

    } else {

      this.props.cfgElemClear();

    }

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

+175 −145
Original line number Diff line number Diff line
@@ -22,7 +22,10 @@ import 'mapbox-gl'; 
import 'mapbox-gl-leaflet';

import '@geoman-io/leaflet-geoman-free';

import deepEqual from 'deep-equal';

import { updateObject } from '../util/object-util';

import {

  updateObject,

  deepCopy

} from '../util/object-util';

import { execChangeTable } from '../state/exec';

import {

  cfgChangeTable,
@@ -52,7 +55,9 @@ import { 
  FIELD_TYPE,

  FIELD_GEO_LOCATION,

  FIELD_GEO_PATH,

  FIELD_GEO_RADIUS,

  getElemFieldVal,

  getElemFieldErr,

  setElemFieldVal,

  setElemFieldErr

} from '../util/elem-utils';
@@ -159,6 +164,20 @@ class IDCMap extends Component { 
    // Open selected element in element configuration pane

    if (this.props.type === TYPE_CFG) {

      this.props.onEditElement(elem);



      // Update target element name & reset controls on target change

      if (name !== this.targetElemName) {

        this.map.pm.disableDraw('Marker');

        this.map.pm.disableDraw('Line');

        this.map.pm.disableGlobalEditMode();

        if (this.map.pm.globalDragModeEnabled()) {

          this.map.pm.toggleGlobalDragMode();

        }

        if (this.map.pm.globalRemovalEnabled()) {

          this.map.pm.toggleGlobalRemovalMode();

        }

      }

      this.targetElemName = name;

    }

  }
@@ -289,8 +308,7 @@ class IDCMap extends Component { 


  setUeMarker(ue) {

    var latlng = L.latLng(L.GeoJSON.coordsToLatLng(ue.location.coordinates));

    var p = ue.path ? L.GeoJSON.geometryToLayer(ue.path) : null;

    console.log(p);

    var pathLatLngs = ue.path ? L.GeoJSON.coordsToLatLngs(ue.path.coordinates) : null;



    // Find existing UE marker

    var existingMarker;
@@ -302,7 +320,12 @@ class IDCMap extends Component { 
    });



    if (existingMarker === undefined) {

      // Create new UE marker & path

      // Create path, if any

      // var p = ue.path ? L.GeoJSON.geometryToLayer(ue.path) : null;

      var p = pathLatLngs ? L.polyline(pathLatLngs) : null;

      console.log('New path', p);



      // Create new UE marker

      var m = L.marker(latlng, {

        meep: {

          ue: {
@@ -320,22 +343,12 @@ class IDCMap extends Component { 
      // Handlers

      var _this = this;

      m.on('click', function() {_this.clickUeMarker(this);});

      // m.on('dragend', function(e) {_this.onLayerMoved(this, e);});

      // m.on('pm:edit', e => console.log(e));

      // m.on('pm:update', e => console.log(e));

      // m.on('pm:edit', e => _this.onLayerEdited(this, e));

      // m.on('pm:update', e => _this.onLayerEdited(this, e));

      if (p) {

        p.on('dragend', function(e) {_this.onLayerMoved(this, e);});

        p.on('move', function(e) {_this.onLayerMoved(this, e);});



        p.on('pm:dragend', e => _this.onLayerMoved(this, e));

        p.on('pm:edit', e => _this.onLayerEdited(this, e));

        p.on('pm:update', e => _this.onLayerEdited(this, e));

        p.on('pm:markerdragend', e => _this.onLayerMoved(this, e));

      }



      console.log(m);

      // if (p) {

      //   p.on('pm:edit', e => console.log(e));

      //   p.on('pm:update', e => console.log(e));

      // }



      // Add to map overlay

      m.addTo(this.ueOverlay);
@@ -347,13 +360,32 @@ class IDCMap extends Component { 
      // Update UE position & path

      existingMarker.setLatLng(latlng);



      // Update path

      // console.log('pathLatLngs', pathLatLngs);

      // console.log('Existing: updated path', existingMarker.options.meep.ue.path);

      // if (pathLatLngs) {

      //   if (existingMarker.options.meep.ue.path) {

      //     existingMarker.options.meep.ue.path.setLatLngs(pathLatLngs);

      //     console.log('Existing: updated path', existingMarker.options.meep.ue.path);

      //   }

      // }



      // Update, create or remove path

      if (pathLatLngs) {

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

          existingMarker.options.meep.ue.path.setLatLngs(pathLatLngs);

          console.log('Existing: updated path', existingMarker.options.meep.ue.path);

        } else {

          var path = L.polyline(pathLatLngs);

          existingMarker.options.meep.ue.path = path;

          path.addTo(this.uePathOverlay);

          console.log('Existing: New polyline', path);

        }

      } else {

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

          console.log('Existing: removing path', existingMarker.options.meep.ue.path);

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

          existingMarker.options.meep.ue.path = null;

        }

      if (p) {

        existingMarker.options.meep.ue.path = p;

        p.addTo(this.uePathOverlay);

      }

    }

  }
@@ -398,17 +430,20 @@ class IDCMap extends Component { 
      // Handlers

      var _this = this;

      m.on('click', function() {_this.clickPoaMarker(this);});

      m.on('dragend', e => _this.onLayerMoved(this, e));

      m.on('pm:edit', e => _this.onLayerEdited(this, e));

      m.on('drag', e => _this.onPoaMoved(e));

      m.on('dragend', e => _this.onPoaMoved(e));



      // Add to map overlay

      m.addTo(this.poaOverlay);

      c.addTo(this.poaRangeOverlay);

      // console.log('PoA ' + id + ' added @ ' + latlng.toString());

    } else {

      // Update POA position

      // Update POA position & range

      existingMarker.setLatLng(latlng);

      existingMarker.options.meep.poa.range.setLatLng(latlng);

      if (Number.isInteger(poa.radius) && poa.radius >= 0) {

        existingMarker.options.meep.poa.range.setRadius(poa.radius);

      }

    }

  }
@@ -441,8 +476,6 @@ class IDCMap extends Component { 
      // Handlers

      var _this = this;

      m.on('click', function() {_this.clickComputeMarker(this);});

      m.on('pm:dragend', e => _this.onLayerMoved(this, e));

      m.on('pm:edit', e => _this.onLayerEdited(this, e));



      // Add to map overlay

      m.addTo(this.computeOverlay);
@@ -498,23 +531,17 @@ class IDCMap extends Component { 
      .openOn(this.map);

  }



  updateMarkers() {

    if (!this.map) {

  updateTargetMarker(map) {

    const target = this.props.configuredElement;

    if (!target) {

      return;

    }



    // Get copy of map data 

    var map = updateObject({}, this.getMap(this.props));

    if (!map) {

      return;

    }



    // Update Configured element geodata, if any

    if (this.props.configuredElement) {

      var location = getElemFieldVal(this.props.configuredElement, FIELD_GEO_LOCATION);

      if (location) {

        var name = getElemFieldVal(this.props.configuredElement, FIELD_NAME);

        var type = getElemFieldVal(this.props.configuredElement, FIELD_TYPE);

    const location = getElemFieldVal(target, FIELD_GEO_LOCATION);

    const locationErr = getElemFieldErr(target, FIELD_GEO_LOCATION);

    if (location && !locationErr) {

      var name = getElemFieldVal(target, FIELD_NAME);

      var type = getElemFieldVal(target, FIELD_TYPE);

      var geoDataAsset;



      switch (type) {
@@ -531,9 +558,10 @@ class IDCMap extends Component { 
        }

        geoDataAsset.location = {type: 'Point', coordinates: JSON.parse(location)};



          var path = getElemFieldVal(this.props.configuredElement, FIELD_GEO_PATH);

          geoDataAsset.path = !path ? null : {type: 'LineString', coordinates: JSON.parse(path)};

          return;

        var path = getElemFieldVal(target, FIELD_GEO_PATH);

        var pathErr = getElemFieldErr(target, FIELD_GEO_PATH);

        geoDataAsset.path = (pathErr || !path) ? null : {type: 'LineString', coordinates: JSON.parse(path)};

        break;



      case ELEMENT_TYPE_POA:

      case ELEMENT_TYPE_POA_CELL:
@@ -548,7 +576,8 @@ class IDCMap extends Component { 
          map.poaList.push(geoDataAsset);

        }

        geoDataAsset.location = {type: 'Point', coordinates: JSON.parse(location)};

          return;

        geoDataAsset.radius = getElemFieldVal(target, FIELD_GEO_RADIUS);

        break;



      case ELEMENT_TYPE_FOG:

      case ELEMENT_TYPE_EDGE:
@@ -564,14 +593,28 @@ class IDCMap extends Component { 
          map.computeList.push(geoDataAsset);

        }

        geoDataAsset.location = {type: 'Point', coordinates: JSON.parse(location)};

          return;

        break;



      default:

          return;

        break;

      }

    }

  }



  updateMarkers() {

    if (!this.map) {

      return;

    }



    // Get copy of map data 

    var map = deepCopy(this.getMap(this.props));

    if (!map) {

      return;

    }



    // Update target marker geodata using configured element geodata, if any

    this.updateTargetMarker(map);



    // Set UE markers

    var ueMap = {};

    if (map.ueList) {
@@ -629,6 +672,8 @@ class IDCMap extends Component { 
  }



  onEditModeToggle(e) {

    console.log('onEditModeToggle', this.map);

    console.log(e);

    var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);

    if (e.enabled) {

      this.setTarget(targetElemName);
@@ -686,14 +731,8 @@ class IDCMap extends Component { 
    // var marker = this.findMarker(this.props.configuredElement);

  }



  onLayerEdited(layer, e) {

    console.log('onLayerEdited');

    console.log(e);

  }



  onLayerMoved(layer, e) {

    console.log('onLayerMoved');

    console.log(e);

  onPoaMoved(e) {

    e.target.options.meep.poa.range.setLatLng(e.target.getLatLng());

  }



  updateConfiguredElement(name, val, err) {
@@ -705,51 +744,40 @@ class IDCMap extends Component { 
  }



  updateTargetGeoData(targetElemName) {

    if (targetElemName) {

    if (!targetElemName) {

      return;

    }

    console.log('Updating geodata for: ', targetElemName);

    var location = '';

    var path = '';



      // var mapCfg = updateObject({}, this.getMap(this.props));

    // Get latest geoData from map, if any

    var markerInfo = this.getMarkerInfo(targetElemName);

    if (markerInfo && markerInfo.marker) {

        // Update target element geodata location

        // var coords = L.GeoJSON.latLngToCoords(markerInfo.marker.getLatLng());

        // mapCfg.ueList



        console.log(markerInfo.marker.getLatLng());

        this.updateConfiguredElement(FIELD_GEO_LOCATION, JSON.stringify(L.GeoJSON.latLngToCoords(markerInfo.marker.getLatLng())), null);



        // geoData: !location ? null : {

        //   location: {

        //     type: 'Point',

        //     coordinates: JSON.parse(location)

        //   }

        // },



      location = JSON.stringify(L.GeoJSON.latLngToCoords(markerInfo.marker.getLatLng()));

      if (markerInfo.type === 'UE' && markerInfo.marker.options.meep.ue.path) {

          // Update geodata path

          

        }

      } else {

        // Remove geodata



        path = JSON.stringify(L.GeoJSON.latLngsToCoords(markerInfo.marker.options.meep.ue.path.getLatLngs()));

      }

    }



    // Update configured element with map geodata

    this.updateConfiguredElement(FIELD_GEO_LOCATION, location, null);

    this.updateConfiguredElement(FIELD_GEO_PATH, path, null);

  }



  getMarkerInfo(name) {

    var marker;

    for (marker of Object.values(this.ueOverlay._layers)) {

    for (marker of this.ueOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.ue.id === name)) {

        return {marker: marker, type: 'UE'};

      }

    }

    for (marker of Object.values(this.poaOverlay._layers)) {

    for (marker of this.poaOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.poa.id === name)) {

        return {marker: marker, type: 'POA'};

      }

    }

    for (marker of Object.values(this.computeOverlay._layers)) {

    for (marker of this.computeOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.compute.id === name)) {

        return {marker: marker, type: 'COMPUTE'};

      }
@@ -759,19 +787,19 @@ class IDCMap extends Component { 


  removeMarker(name) {

    var marker;

    for (marker of Object.values(this.ueOverlay._layers)) {

    for (marker of this.ueOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.ue.id === name)) {

        marker.removeFrom(this.ueOverlay);

        return;

      }

    }

    for (marker of Object.values(this.poaOverlay._layers)) {

    for (marker of this.poaOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.poa.id === name)) {

        marker.removeFrom(this.poaOverlay);

        return;

      }

    }

    for (marker of Object.values(this.computeOverlay._layers)) {

    for (marker of this.computeOverlay.getLayers()) {

      if (marker.options.meep && (marker.options.meep.compute.id === name)) {

        marker.removeFrom(this.computeOverlay);

        return;
@@ -813,24 +841,26 @@ class IDCMap extends Component { 
    var dragModeEnabled = false;

    var removalModeEnabled = false;



    // Get target element name

    // Update target element name & reset controls on target change

    var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);



    // Determine which controls to enable

    if (targetElemName) {

      var markerInfo = this.getMarkerInfo(targetElemName);

      if (markerInfo && markerInfo.marker) {

        // Enable path creation if UE with no path

        if ((markerInfo.type === 'UE') && !markerInfo.marker.options.meep.ue.path) {

        // Enable path create/edit for UE only

        if (markerInfo.type === 'UE') {

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

            drawPolylineEnabled = true;

          }

          editModeEnabled = true;

        }

        dragModeEnabled = true;

        removalModeEnabled = true;

      } else {

        // Enable marker creation

        drawMarkerEnabled = true;

      }



    }



    // Enable necessary controls
@@ -843,9 +873,9 @@ class IDCMap extends Component { 
    });



    // If in drawMarker mode, enable it by default

    // if (drawMarkerEnabled) {

    //   this.map.pm.enableDraw('Marker');

    // }

    if (drawMarkerEnabled) {

      this.map.pm.enableDraw('Marker');

    }



    // Set target element & disable edit on all other markers

    this.setTarget(targetElemName);