TableAjaxMap: add map style rules, use layer events to save state

SE/se-lib/TableAjax.php

@@ -888,7 +888,7 @@ class TableAjax extends ViewAjax {
 									cellCnt.html('<i class="cell-mapfld icon-map-marker"></i>');
 									cellCnt.on('click', {recordID: cellID, fieldValue: val}, function(e) {
 										priv.mapEditorShow();
-										_mapEditor.TableAjaxMapZoomToExtent(e.data.fieldValue);
+										_mapEditor.TableAjaxMapSelectRecord(e.data.recordID, e.data.fieldValue);
 									});
 									break;
 							}

SE/se-lib/TableAjaxMap.php

@@ -35,6 +35,8 @@ class TableAjaxMap {
 .olControlEditingToolbar .olControlModifyFeatureItemActive   { background-image:url(stuff/open-layers/theme/default/img/draw_point_on.png); }
 .olControlEditingToolbar .olControlRefreshItemInactive { background-image: url(stuff/open-layers/theme/default/img/refresh_feature_off.png); }
 .olControlEditingToolbar .olControlRefreshItemActive { background-image: url(stuff/open-layers/theme/default/img/refresh_feature_on.png); }
+.olControlEditingToolbar .olControlSaveItemInactive { background-image: url(stuff/open-layers/theme/default/img/save_features_off.png); }
+.olControlEditingToolbar .olControlSaveItemActive { background-image: url(stuff/open-layers/theme/default/img/save_features_on.png); }
 .olControlLayerSwitcher .layersDiv { border-radius:10px 0 0 10px; opacity:0.75; filter:alpha(opacity=75); }
 .notsupported { color:red; }
 .TableAjaxMap .layersDiv input { margin:0; }
@@ -98,6 +100,9 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			_nodeAbstract = $('<p></p>');
 			_nodeInput = $('<div></div>');
 			_nodeOutput = $('<div></div>');
+			_selectedFeature = null;
+			_selectedRecordId = 0;
+
 			var div = $('<div></div>');
 			div.append(_nodeProcesses);
 			div.append(_nodeAbstract);
@@ -141,6 +146,59 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					featureType: "restricted",
 					geometryName: "the_geom",
 					schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
+				}),
+				styleMap: new OpenLayers.StyleMap({
+					'default': new OpenLayers.Style(null, {
+						rules: [
+							new OpenLayers.Rule({
+								symbolizer: {
+									stroke: true,
+									fill: true,
+									fillColor: "#90EE90",
+									strokeColor: "#90EE90",
+								}
+							})
+							, new OpenLayers.Rule({
+								symbolizer: {
+									stroke: true,
+									fill: true,
+									fillColor: "#ee9900",
+									strokeColor: "#ee9900",
+								},
+								filter: new OpenLayers.Filter.Comparison({
+									type: OpenLayers.Filter.Comparison.GREATER_THAN,
+									property: "recordId",
+									value: 0
+								})
+							})
+							, new OpenLayers.Rule({
+								symbolizer: {
+									stroke: true,
+									fill: true,
+									fillColor: "#ff0000",
+									strokeColor: "#ff0000",
+								},
+								filter: new OpenLayers.Filter.Comparison({
+									type: OpenLayers.Filter.Comparison.GREATER_THAN,
+									property: "_newRecordId",
+									value: 0
+								})
+							})
+							, new OpenLayers.Rule({
+								symbolizer: {
+									stroke: true,
+									fill: true,
+									fillColor: "#ff0000",
+									strokeColor: "#ff0000",
+								},
+								filter: new OpenLayers.Filter.Comparison({
+									type: OpenLayers.Filter.Comparison.GREATER_THAN,
+									property: "_modified",
+									value: 0
+								})
+							})
+						]
+					})
 				})
 			});
 
@@ -159,11 +217,36 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					}
 				}
 			});
+			_layer.events.on({
+				'beforefeaturemodified': function(e) {
+					console.log('Event: beforefeaturemodified modified(', e.feature.attributes._modified, ')', e.feature.attributes, ' selAttras', (_selectedFeature)? _selectedFeature.attributes : 'null');// TODO: DBG
+					// NOTE: beforefeaturemodified from new node is fired before afterfeaturemodified from old node when click from one shape to enother
+					priv.checkSelectedFeatureModifications('before');
+					priv.setSelectedFeature(e.feature);
+				},
+				'featuremodified': function(e) {
+					console.log('Event: featuremodified modified(', e.feature.attributes._modified, ') ', e.feature.attributes, ' selAttras', (_selectedFeature)? _selectedFeature.attributes : 'null');// TODO: DBG
+					_selectedFeature.attributes._modified = 1;
+				},
+				'afterfeaturemodified': function(e) {
+					console.log('Event: afterfeaturemodified fid('+e.feature.fid+'/'+(_selectedFeature ? _selectedFeature.fid : 'null')+') modified(', e.feature.attributes._modified, ') ', e.feature.attributes, ' selAttras', (_selectedFeature)? _selectedFeature.attributes : 'null');// TODO: DBG
+					if (_selectedFeature && _selectedFeature.fid != e.feature.fid) {
+						console.log('Event: afterfeaturemodified pomiń check!');
+					} else {
+						priv.checkSelectedFeatureModifications('after');
+						priv.setSelectedFeature(null);
+					}
+				}
+			});
+
 
 			var toolbar = new OpenLayers.Control.EditingToolbar(_layer);
-			toolbar.addControls([new OpenLayers.Control.ModifyFeature(_layer, {
-				title: "Select feature"
-			})]);
+			toolbar.addControls([
+				new OpenLayers.Control.ModifyFeature(_layer, {
+					title: "Edytuj"
+					, mode: OpenLayers.Control.ModifyFeature.DRAG | OpenLayers.Control.ModifyFeature.RESHAPE
+				})
+			]);
 			toolbar.addControls([
 				new OpenLayers.Control.SelectFeature(_layer, {
 					title: "Select Test",
@@ -178,22 +261,33 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			]);
 			toolbar.addControls([
 				new OpenLayers.Control.Button({
-					title: "Zoom Test",
-					displayClass: "olControlZoomToPoly",
+					title: "Refresh",
+					displayClass: "olControlRefresh",
 					trigger: function() {
-						var multiPolygon = OpenLayers.Geometry.fromWKT("MULTIPOLYGON(((2072016.74395199 7234076.79293037,2072016.74395199 7234115.01144451,2072131.3994944 7234115.01144451,2072131.3994944 7234076.79293037,2072016.74395199 7234076.79293037)))").getBounds();
-						_map.zoomToExtent(multiPolygon);
+						_layer.refresh({force: true});
+					}
+				})
+			]);
+			toolbar.addControls([
+				new OpenLayers.Control.Button({
+					title: "Test mark as recordId 999",
+					displayClass: "olControlSave",
+					trigger: function() {
+						if (_selectedFeature) {
+							if (!_selectedRecordId) {
+								alert('Select Record from table');
+							}
+							else {
+								_selectedFeature.attributes['tblId'] = <?php echo $this->_zasobID; ?>;
+								_selectedFeature.attributes['recordId'] = _selectedRecordId;
+							}
+						}
+						else {
+							alert('Select feature')
+						}
 					}
 				})
 			]);
-			var btnRefresh = new OpenLayers.Control.Button({
-				title: "Refresh",
-				displayClass: "olControlRefresh",
-				trigger: function() {
-					_layer.refresh({force: true});
-				}
-			});
-			toolbar.addControls([btnRefresh]);
 
 			var extent = new OpenLayers.Bounds(
 				2035059.4410645328, 7200979.560689885, 2113330.958028555, 7279251.0776539035
@@ -233,9 +327,76 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 				],
 				layers: [gphy,_layer]
 			});
+
 			_map.zoomToMaxExtent();
 		};
 
+		priv.updateState = function() {
+			// TODO: update state view
+			//console.log('updateState: _selectedFeature:', _selectedFeature, ' _selectedRecordId:', _selectedRecordId);
+			if (_selectedFeature || _selectedRecordId) {
+				
+			} else {
+				
+			}
+		};
+
+		priv.setSelectedFeature = function(feature) {
+			_selectedFeature = feature;
+			priv.updateState();
+		};
+
+		priv.setSelectedRecordId = function(id) {
+			_selectedRecordId = id;
+			priv.updateState();
+		};
+
+		priv.getSelectedRecordId = function() {
+			return _selectedRecordId;
+		};
+
+		priv.isSelectedRecordId = function() {
+			return _selectedRecordId > 0;
+		};
+
+		priv.isSelectedFeature = function() {
+			return !!_selectedFeature;
+		};
+
+		priv.cancelSelectedFeatureModifications = function() {
+			if (!_selectedFeature) return false;
+			if (_selectedFeature.attributes._newRecordId) {
+				delete _selectedFeature.attributes._newRecordId;
+			}
+			if (_selectedFeature.attributes._modified) {
+				delete _selectedFeature.attributes._modified;
+			}
+		};
+
+		priv.isSelectedFeatureModified = function() {
+			if (!_selectedFeature) return false;
+			if (_selectedFeature.attributes) {
+				if (_selectedFeature.attributes._newRecordId) {
+					return true;
+				}
+				if (_selectedFeature.attributes._modified) {
+					return true;
+				}
+			}
+		};
+
+		priv.checkSelectedFeatureModifications = function(when) {
+			if (priv.isSelectedFeatureModified()) {
+				if (confirm('Anulować zmiany wprowadzone dla zaznaczonego elementu?' + when)) {
+					priv.cancelSelectedFeatureModifications();
+					_layer.refresh({force:true});
+				}
+				else {
+					// _layer.refresh();
+				}
+			}
+		};
+
 		// using OpenLayers.Format.WPSCapabilities to read the capabilities
 		priv.getCapabilities = function() {
 			OpenLayers.Request.GET({
@@ -546,6 +707,27 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			_map.zoomToExtent(extentBounds);
 		};
 
+		publ.selectRecord = function(recordId, extent) {
+			if (priv.isSelectedRecordId()) {
+				if (priv.getSelectedRecordId() != recordId) {
+					if (priv.isSelectedFeature()) {
+						if (confirm('Aktualnie przypisany rekord to ' + priv.getSelectedRecordId() + ' czy zmienić na ' + recordId + '?')) {
+							priv.setSelectedRecordId(recordId);
+						}
+					} else {
+						priv.setSelectedRecordId(recordId);
+						publ.zoomToExtent(extent);
+					}
+				} else {
+					publ.zoomToExtent(extent);
+				}
+			}
+			else {
+				priv.setSelectedRecordId(recordId);
+				publ.zoomToExtent(extent);
+			}
+		};
+
 		publ.init = function(options) {
 			if (priv.options.debug) console.log('TableAjaxMap initialization...', options);
 			//merge supplied options with defaults
@@ -578,6 +760,17 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 		return this;
 	};
 
+	$.fn.TableAjaxMapSelectRecord = function(recordId, extent) {
+		if (!recordId) return;
+		return this.each(function() {
+			var tblAjaxMap = $(this).data('TableAjaxMap');
+			if (tblAjaxMap) {
+				tblAjaxMap.selectRecord(recordId, extent);
+			}
+		});
+		return this;
+	};
+
 	$.fn.TableAjaxMap = function(options) {
 		options = options || {};
 		return this.each(function() {