Commit 03485802 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

disconnected marker styles in frontend maps

parent f8959e4d

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

+106 −46
Original line number Diff line number Diff line
@@ -82,6 +82,7 @@ const ZONE_COLOR_LIST = [ 
  'gold',

  'darkturquoise'

];

const DISCONNECTED_COLOR = 'red';



const TYPE_UE = 'UE';

const TYPE_POA = 'POA';
@@ -433,8 +434,10 @@ class IDCMap extends Component { 
  getZoneColor(zone) {

    var color = null;

    if (zone) {

      var table = this.getTable();

      if (table && table.entries) {

        // Get zone color from meta

      color = getElemFieldVal(this.getTable().entries[zone], FIELD_META_DISPLAY_MAP_COLOR);

        color = getElemFieldVal(table.entries[zone], FIELD_META_DISPLAY_MAP_COLOR);

        if (!color) {

          // Get zone color from zone color map

          color = this.zoneColorMap[zone];
@@ -446,11 +449,16 @@ class IDCMap extends Component { 
          }

        }

      }

    }

    return color;

  }



  getUeColor(ue) {

    var color = this.getZoneColor(this.getUeZone(ue));

    // var color = this.getZoneColor(this.getUeZone(ue));

    var color = undefined;

    if (!this.isConnected(ue)) {

      color = DISCONNECTED_COLOR;

    }

    return color ? color : UE_COLOR_DEFAULT;

  }
@@ -460,21 +468,51 @@ class IDCMap extends Component { 
  }



  getComputeColor(compute) {

    var color = this.getZoneColor(this.getComputeZone(compute));

    var color = undefined;

    if (this.isConnected(compute)) {

      color = this.getZoneColor(this.getComputeZone(compute));

    } else {

      color = DISCONNECTED_COLOR;

    }

    return color ? color : COMPUTE_COLOR_DEFAULT;

  }



  // Get connected status

  isConnected(name) {

    var connected = false;

    var table = this.getTable();

    if (table && table.entries) {

      connected = getElemFieldVal(table.entries[name], FIELD_CONNECTED);

    }

    return connected;

  }



  // Get wireless type Priority

  getWirelessTypePrio(name) {

    var wirelessTypePrio = '';

    var table = this.getTable();

    if (table && table.entries) {

      wirelessTypePrio = getElemFieldVal(table.entries[name], FIELD_WIRELESS_TYPE);

    }

    return wirelessTypePrio;

  }



  // Set Icons

  setUeIcon(iconDiv, ue) {

    var metaIcon = getElemFieldVal(this.getTable().entries[ue], FIELD_META_DISPLAY_MAP_ICON);

    var table = this.getTable();

    if (table && table.entries) {

      var metaIcon = getElemFieldVal(table.entries[ue], FIELD_META_DISPLAY_MAP_ICON);

      var icon = metaIcon ? metaIcon : UE_ICON;

      iconDiv.className = 'custom-marker-icon ion ' + icon;

      iconDiv.innerHTML = '';

    }

  }



  setPoaIcon(iconDiv, iconTextDiv, poa) {

    var poaType = getElemFieldVal(this.getTable().entries[poa], FIELD_TYPE);

    var metaIcon = getElemFieldVal(this.getTable().entries[poa], FIELD_META_DISPLAY_MAP_ICON);

    var table = this.getTable();

    if (table && table.entries) {

      var poaType = getElemFieldVal(table.entries[poa], FIELD_TYPE);

      var metaIcon = getElemFieldVal(table.entries[poa], FIELD_META_DISPLAY_MAP_ICON);

      var icon = metaIcon ? metaIcon : (poaType === ELEMENT_TYPE_POA_WIFI) ? POA_ICON_WIFI : POA_ICON;

      iconDiv.className = 'custom-marker-icon ion ' + icon;

      iconDiv.innerHTML = '';
@@ -490,22 +528,26 @@ class IDCMap extends Component { 
      }

      iconTextDiv.innerHTML = innerHTML;

    }

  }



  setComputeIcon(iconDiv, compute) {

    var metaIcon = getElemFieldVal(this.getTable().entries[compute], FIELD_META_DISPLAY_MAP_ICON);

    var table = this.getTable();

    if (table && table.entries) {

      var metaIcon = getElemFieldVal(table.entries[compute], FIELD_META_DISPLAY_MAP_ICON);

      var icon = metaIcon ? metaIcon : COMPUTE_ICON;

      iconDiv.className = 'custom-marker-icon ion ' + icon;

      iconDiv.innerHTML = '';

    }

  }



  // Set styles

  setUeMarkerStyle(marker) {

    if (marker._icon) {

      // // Set marker border color

      // var color = tinycolor(this.getUeColor(marker.options.meep.ue.id));

      // var markerStyle = marker._icon.querySelector('.custom-marker-pin').style;

      // markerStyle['background'] = color;

      // markerStyle['border-color'] = color.darken(10);

      // Set marker color

      var color = tinycolor(this.getUeColor(marker.options.meep.ue.id));

      var markerStyle = marker._icon.querySelector('.custom-marker-pin').style;

      markerStyle['background'] = color;

      markerStyle['border-color'] = color.darken(10);



      // Set marker icon

      var iconDiv = marker._icon.querySelector('.custom-marker-icon');
@@ -556,9 +598,7 @@ class IDCMap extends Component { 
    var msg = '<b>id: ' + marker.options.meep.ue.id + '</b><br>';

    msg += 'velocity: ' + (hasPath ? marker.options.meep.ue.velocity : '0') + ' m/s<br>';

    

    var ue = this.getTable().entries[marker.options.meep.ue.id];

    var connected = getElemFieldVal(ue, FIELD_CONNECTED);

    if (connected) {

    if (this.isConnected(marker.options.meep.ue.id)) {

      var poa = this.getUePoa(marker.options.meep.ue.id);

      var poaType = getElemFieldVal(this.getTable().entries[poa], FIELD_TYPE);

      msg += 'poa: ' + poa + '<br>';
@@ -578,7 +618,7 @@ class IDCMap extends Component { 
      msg += 'zone: ' + this.getUeZone(marker.options.meep.ue.id) + '<br>';

    } else {

      msg += 'state: <b style="color:red;">DISCONNECTED</b><br>';

      msg += 'types: ' + (getElemFieldVal(ue, FIELD_WIRELESS_TYPE) || 'wifi,5g,4g,other') + '<br>';

      msg += 'types: ' + (this.getWirelessTypePrio(marker.options.meep.ue.id) || 'wifi,5g,4g,other') + '<br>';

    }

    

    msg += 'location: ' + this.getLocationStr(latlng);
@@ -658,7 +698,8 @@ class IDCMap extends Component { 
            id: ue.assetName,

            path: p,

            eopMode: ue.eopMode,

            velocity: ue.velocity

            velocity: ue.velocity,

            connected: true

          }

        },

        icon: markerIcon,
@@ -715,10 +756,19 @@ class IDCMap extends Component { 
        }

      }



      // Refresh marker style & position

      // Refresh marker style if necessary

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

        this.setUeMarkerStyle(existingMarker);

      } else {

        var connected = this.isConnected(ue.assetName);

        if (existingMarker.options.meep.ue.connected !== connected) {

          this.setUeMarkerStyle(existingMarker);

          existingMarker.options.meep.ue.connected = connected;

        }

      }



      // Refresh popup text & position

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

        this.updateUePopup(existingMarker);

      }

    }
@@ -831,7 +881,8 @@ class IDCMap extends Component { 
      var m = L.marker(latlng, {

        meep: {

          compute: {

            id: compute.assetName

            id: compute.assetName,

            connected: true

          }

        },

        icon: markerIcon,
@@ -858,10 +909,19 @@ class IDCMap extends Component { 
      // Update COMPUTE position

      existingMarker.setLatLng(latlng);



      // Refresh marker style & position

      // Refresh marker style if necessary

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

        this.setComputeMarkerStyle(existingMarker);

      } else {

        var connected = this.isConnected(compute.assetName);

        if (existingMarker.options.meep.compute.connected !== connected) {

          this.setComputeMarkerStyle(existingMarker);

          existingMarker.options.meep.compute.connected = connected;

        }

      }



      // Refresh popup text & position

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

        this.updateComputePopup(existingMarker);

      }

    }