Map: fix handle selected record id, add widget with current selected record and clear btn

SE/se-lib/TableAjaxMap.php

@@ -45,6 +45,10 @@ class TableAjaxMap {
 .notsupported { color:red; }
 .TableAjaxMap .layersDiv input { margin:0; }
 .TableAjaxMap .layersDiv label { display:inline; }
+.olControlSelectedRecord { background: rgba(255, 255, 255, 0.6); padding:1px 0 0 3px; position:absolute; bottom:0; right:0; }
+.olControlSelectedRecordClear { cursor:pointer; color:#bbb; }
+.olControlSelectedRecordClear:hover { color:#f00; }
+.olControlSelectedRecordMsg { color:#000; }
 </style>
 		<?php
 	}
@@ -55,6 +59,79 @@ class TableAjaxMap {
 <script>
 OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_task=PROXY&url=";
 
+var myOpenLayers_Control_SelectedRecord = OpenLayers.Class(OpenLayers.Control, {
+
+	selectedRecordId: 0,
+	msgNode: null,
+
+	/**
+	 * Method: draw
+	 *
+	 * Returns:
+	 * {DOMElement}
+	 */
+	draw: function() {
+		OpenLayers.Control.prototype.draw.apply(this, arguments);
+		if (!this.msgNode) {
+			this.msgNode = document.createElement("span");
+			this.msgNode.className = this.displayClass + "Msg";
+			this.div.appendChild(this.msgNode);
+		}
+		if (!this.clearNode) {
+			this.clearNode = document.createElement("span");
+			this.clearNode.title = "Usuń zaznaczenie";
+			this.clearNode.className = this.displayClass + "Clear";
+			this.clearNode.className += ' glyphicon glyphicon-remove';
+			var that = this;
+			jQuery(this.clearNode).on('click', function(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				that.clearSelectedRecordId();
+				return false;
+			});
+			this.div.appendChild(this.clearNode);
+		}
+		//this.map.events.register('moveend', this, this.update);
+		this.updateView();
+		return this.div;
+	},
+
+	setSelectedRecordId: function(recordId) {
+		this.selectedRecordId = recordId;
+		this.updateView();
+	},
+
+	getSelectedRecordId: function() {
+		return this.selectedRecordId;
+	},
+
+	isSelectedRecordId: function() {
+		return (this.selectedRecordId > 0);
+	},
+
+	clearSelectedRecordId: function() {
+		this.selectedRecordId = 0;
+		this.updateView();
+	},
+
+	/**
+	 * Method: updateView
+	 * Update the size of the bars, and the labels they contain.
+	 */
+	updateView: function() {
+		this.clearNode.style.visibility = "hidden";
+		if (this.selectedRecordId > 0) {
+			this.msgNode.innerHTML = 'Zaznaczony rekord nr: ' + this.selectedRecordId + ' ';
+			this.clearNode.style.visibility = "visible";
+		} else {
+			this.msgNode.innerHTML = 'Brak zaznaczonego rekordu ';
+		}
+	},
+
+	CLASS_NAME: "OpenLayers.Control.SelectedRecord"
+});
+
+
 (function( $ ) {
 	var TableAjaxMap = function() {
 		var priv = {}; //private api
@@ -83,6 +160,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 		var _layer;
 		var _map;
 		var _styleMap;
+		var _controlSelectedRecord;
 
 		/*
 		 initialize the plugin.
@@ -106,7 +184,6 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			_nodeInput = $('<div></div>');
 			_nodeOutput = $('<div></div>');
 			_selectedFeature = null;
-			_selectedRecordId = 0;
 			priv.options.zoomStrategyActivate = (priv.options.zoomStrategyActivate > 0)? priv.options.zoomStrategyActivate : 15;
 
 			var div = $('<div></div>');
@@ -302,19 +379,6 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 								console.log("_layer: ", _layer);
 							}, 200);
 						}
-						console.log('TODO: getUserLocation!');
-						return;
-
-						if (_selectedFeature) {
-							if (!_selectedRecordId) {
-								alert('Wybierz rekord  tabeli');
-							}
-							else {
-							}
-						}
-						else {
-							alert('Wybierz element na mapie');
-						}
 					}
 				})
 			]);
@@ -413,7 +477,8 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					displayClass: "olControlSave",
 					trigger: function() {
 						if (_selectedFeature) {
-							if (!_selectedRecordId) {
+							var selectedRecordId = priv.getSelectedRecordId();
+							if (!selectedRecordId) {
 								alert('Wybierz rekord  tabeli');
 							}
 							else {
@@ -442,6 +507,8 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 				]);
 			}
 
+			_controlSelectedRecord = new myOpenLayers_Control_SelectedRecord();
+
 			var gphy =  new OpenLayers.Layer.OSM("Mapa", null, {
 				resolutions: [156543.03390625, 78271.516953125, 39135.7584765625,
 					19567.87923828125, 9783.939619140625, 4891.9698095703125,
@@ -479,6 +546,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					new OpenLayers.Control.PanPanel(),
 					new OpenLayers.Control.LayerSwitcher(),
 					new OpenLayers.Control.ScaleLine(),
+					_controlSelectedRecord,
 					// TODO: add box with selected record from table, x for remove selection
 					new OpenLayers.Control.KeyboardDefaults()
 				],
@@ -536,37 +604,33 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			priv.hidePopup(_selectedFeature);
 		};
 
-		priv.updateState = function() {
-			// TODO: update state view
-			if (priv.options.debug) console.log('updateState: _selectedRecordId:', _selectedRecordId, ' _selectedFeature:', _selectedFeature);
-			if (_selectedFeature || _selectedRecordId) {
-				
-			} else {
-				
-			}
-		};
-
 		priv.setSelectedFeature = function(feature) {
 			_selectedFeature = feature;
 			if (_selectedFeature && _selectedFeature.attributes && _selectedFeature.attributes.recordId > 0) {
-				if (_selectedFeature.attributes.recordId != _selectedRecordId) {
-					_selectedRecordId = _selectedFeature.attributes.recordId;
+				if (_selectedFeature.attributes.recordId != priv.getSelectedRecordId()) {
+					priv.setSelectedRecordId(_selectedFeature.attributes.recordId);
 				}
 			}
-			priv.updateState();
 		};
 
 		priv.setSelectedRecordId = function(id) {
-			_selectedRecordId = id;
-			priv.updateState();
+			if (_controlSelectedRecord) {
+				_controlSelectedRecord.setSelectedRecordId(id);
+			}
 		};
 
 		priv.getSelectedRecordId = function() {
-			return _selectedRecordId;
+			if (_controlSelectedRecord) {
+				return _controlSelectedRecord.getSelectedRecordId();
+			}
+			return null;
 		};
 
 		priv.isSelectedRecordId = function() {
-			return _selectedRecordId > 0;
+			if (_controlSelectedRecord) {
+				return _controlSelectedRecord.isSelectedRecordId();
+			}
+			return false;
 		};
 
 		priv.isSelectedFeature = function() {
@@ -613,15 +677,16 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					var selFeatureGeometry = _selectedFeature.geometry.clone();
 					var selFeatureGeomTransformed = selFeatureGeometry.transform(sourceProj, targetProj);
 					var selFeatureExtent = new OpenLayers.Format.WKT().extractGeometry(selFeatureGeomTransformed);
-					priv.options.onSaveFeature.call(this, _selectedRecordId, selFeatureExtent);
+					priv.options.onSaveFeature.call(this, priv.getSelectedRecordId(), selFeatureExtent);
 				}
 			}
 		}
 
 		priv.checkSelectedFeatureModifications = function(when) {
 			if (priv.isSelectedFeatureModified()) {
-				var msgRecordId = (_selectedRecordId > 0)? ' - rekord nr ' + _selectedRecordId : '';
-				// TODO: if !_selectedRecordId then "Create new record"
+				var selectedRecordId = priv.getSelectedRecordId();
+				var msgRecordId = (selectedRecordId > 0)? ' - rekord nr ' + selectedRecordId : '';
+				// TODO: if !selectedRecordId then "Create new record"
 				if (confirm('Czy zapisać zmiany wprowadzone dla zaznaczonego elementu' + msgRecordId + '?')) {
 					// _layer.refresh();
 					priv.saveSelectedFeature();