fix view map in configuration mode in admin panel. (7fc91320) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+41 −24

Original line number	Diff line number	Diff line
		@@ -225,7 +225,7 @@ class IDCMap extends Component {
		if (pl.type === 'UE') {
		map.ueList.push({
		assetName: pl.name,
		id: pl.id,
		id: (this.props.type === TYPE_CFG) ? pl.name : (pl.id \|\| pl.name),
		radius: pl.geoData ? pl.geoData.radius : 0,
		location: pl.geoData && pl.geoData.location ? pl.geoData.location : {type: 'Point', coordinates: [0,0]},
		path: pl.geoData && pl.geoData.path ? pl.geoData.path : null,
		@@ -235,7 +235,7 @@ class IDCMap extends Component {
		} else if (pl.type === 'FOG' \|\| pl.type === 'EDGE' \|\| pl.type === 'DC') {
		map.computeList.push({
		assetName: pl.name,
		id: pl.id,
		id: (this.props.type === TYPE_CFG) ? pl.name : (pl.id \|\| pl.name),
		location: pl.geoData && pl.geoData.location ? pl.geoData.location : {type: 'Point', coordinates: [0,0]}
		});
		}
		@@ -245,7 +245,7 @@ class IDCMap extends Component {
		if (nl.type === 'POA' \|\| nl.type === 'POA-4G' \|\| nl.type === 'POA-5G' \|\| nl.type === 'POA-WIFI') {
		map.poaList.push({
		assetName: nl.name,
		id: nl.id,
		id: (this.props.type === TYPE_CFG) ? nl.name : (nl.id \|\| nl.name),
		location: nl.geoData && nl.geoData.location ? nl.geoData.location : {type: 'Point', coordinates: [0,0]},
		radius: nl.geoData ? nl.geoData.radius : 0
		});
		@@ -808,7 +808,7 @@ class IDCMap extends Component {
		// Find existing UE marker
		var existingMarker;
		this.ueOverlay.eachLayer((marker) => {
		if (marker.options.meep.ue.id === ue.assetName){
		if (marker.options.meep.ue.id === (ue.id \|\| ue.assetName)){
		existingMarker = marker;
		return;
		}
		@@ -850,7 +850,8 @@ class IDCMap extends Component {
		var m = L.marker(latlng, {
		meep: {
		ue: {
		id: ue.assetName,
		id: ue.id \|\| ue.assetName,
		name: ue.assetName,
		path: p,
		eopMode: ue.eopMode,
		velocity: ue.velocity,
		@@ -943,7 +944,7 @@ class IDCMap extends Component {
		// Find existing POA marker
		var existingMarker;
		this.poaOverlay.eachLayer((marker) => {
		if (marker.options.meep.poa.id === poa.assetName){
		if (marker.options.meep.poa.id === (poa.id \|\| poa.assetName)){
		existingMarker = marker;
		return;
		}
		@@ -974,7 +975,8 @@ class IDCMap extends Component {
		var m = L.marker(latlng, {
		meep: {
		poa: {
		id: poa.assetName,
		id: poa.id \|\| poa.assetName,
		name: poa.assetName,
		range: c
		}
		},
		@@ -1024,7 +1026,7 @@ class IDCMap extends Component {
		// Find existing COMPUTE marker
		var existingMarker;
		this.computeOverlay.eachLayer((marker) => {
		if (marker.options.meep.compute.id === compute.assetName){
		if (marker.options.meep.compute.id === (compute.id \|\| compute.assetName)){
		existingMarker = marker;
		return;
		}
		@@ -1044,7 +1046,8 @@ class IDCMap extends Component {
		var m = L.marker(latlng, {
		meep: {
		compute: {
		id: compute.assetName,
		id: compute.id \|\| compute.assetName,
		name: compute.assetName,
		connected: true
		}
		},
		@@ -1241,20 +1244,20 @@ class IDCMap extends Component {
		}

		onEditModeToggle(e) {
		var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);
		var targetElemId = this.props.configuredElement ? this.props.configuredElement.id : null;
		if (e.enabled) {
		this.setTarget(targetElemName);
		this.setTarget(targetElemId);
		} else {
		this.updateTargetGeoData(targetElemName, '', '');
		this.updateTargetGeoData(targetElemId, '', '');
		}
		}

		onDragModeToggle(e) {
		var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);
		var targetElemId = this.props.configuredElement ? this.props.configuredElement.id : null;
		if (e.enabled) {
		this.setTarget(targetElemName);
		this.setTarget(targetElemId);
		} else {
		this.updateTargetGeoData(targetElemName, '', '');
		this.updateTargetGeoData(targetElemId, '', '');
		}
		}

		@@ -1274,8 +1277,8 @@ class IDCMap extends Component {
		}

		// Update configured element & refresh map to create the new marker or path
		var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);
		this.updateTargetGeoData(targetElemName, location, path);
		var targetElemId = this.props.configuredElement ? this.props.configuredElement.id : null;
		this.updateTargetGeoData(targetElemId, location, path);
		}

		onPoaMoved(e) {
		@@ -1289,14 +1292,14 @@ class IDCMap extends Component {
		this.props.cfgElemUpdate(updatedElem);
		}

		updateTargetGeoData(targetElemName, location, path) {
		if (!targetElemName) {
		updateTargetGeoData(targetElemId, location, path) {
		if (!targetElemId) {
		return;
		}

		// Get latest geoData from map, if any
		if (!location) {
		var markerInfo = this.getMarkerInfo(targetElemName);
		var markerInfo = this.getMarkerInfo(targetElemId);
		if (markerInfo && markerInfo.marker) {
		location = JSON.stringify(L.GeoJSON.latLngToCoords(markerInfo.marker.getLatLng()));
		if (!path && markerInfo.type === TYPE_UE && markerInfo.marker.options.meep.ue.path) {
		@@ -1332,6 +1335,8 @@ class IDCMap extends Component {

		setTarget(target) {
		// Disable changes on all markers except target
		var isDragModeEnabled = this.map.pm.globalDragModeEnabled();

		this.ueOverlay.eachLayer((marker) => {
		var path = marker.options.meep.ue.path;
		if (marker.pm && (!target \|\| marker.options.meep.ue.id !== target)) {
		@@ -1343,8 +1348,14 @@ class IDCMap extends Component {
		}
		} else {
		marker.setOpacity(OPACITY_TARGET);
		if (marker.pm && isDragModeEnabled) {
		marker.pm.enable();
		}
		if (path) {
		path.setStyle({opacity: OPACITY_TARGET});
		if (path.pm && this.map.pm.globalEditEnabled()) {
		path.pm.enable();
		}
		}
		}
		});
		@@ -1355,6 +1366,9 @@ class IDCMap extends Component {
		marker.options.meep.poa.range.setStyle({opacity: target ? POA_RANGE_OPACITY_BACKGROUND : POA_RANGE_OPACITY});
		} else {
		marker.setOpacity(OPACITY_TARGET);
		if (marker.pm && isDragModeEnabled) {
		marker.pm.enable();
		}
		marker.options.meep.poa.range.setStyle({opacity: OPACITY_TARGET});
		}
		});
		@@ -1364,6 +1378,9 @@ class IDCMap extends Component {
		marker.setOpacity(target ? COMPUTE_OPACITY_BACKGROUND : COMPUTE_OPACITY);
		} else {
		marker.setOpacity(OPACITY_TARGET);
		if (marker.pm && isDragModeEnabled) {
		marker.pm.enable();
		}
		}
		});
		}
		@@ -1380,11 +1397,11 @@ class IDCMap extends Component {
		var removalModeEnabled = false;

		// Update target element name & reset controls on target change
		var targetElemName = getElemFieldVal(this.props.configuredElement, FIELD_NAME);
		var targetElemId = this.props.configuredElement ? this.props.configuredElement.id : null;

		// Determine which controls to enable
		if (targetElemName) {
		var markerInfo = this.getMarkerInfo(targetElemName);
		if (targetElemId) {
		var markerInfo = this.getMarkerInfo(targetElemId);
		if (markerInfo && markerInfo.marker) {
		// Enable path create/edit for UE only
		if (markerInfo.type === TYPE_UE) {
		@@ -1429,7 +1446,7 @@ class IDCMap extends Component {
		}

		// Set target element & disable edit on all other markers
		this.setTarget(targetElemName);
		this.setTarget(targetElemId);
		}

		render() {