Changes between Initial Version and Version 1 of ZooWebSite/Demo/WFS-TJs

Timestamp:

Dec 2, 2010, 11:50:47 AM (13 years ago)

Author:

djay

Comment:

JavaScritpt file for WFS-T demo page

ZooWebSite/Demo/WFS-TJs

@@ +1 @@
+{{{
+#!html
+<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
+
+<link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" />
+
+<script type="text/javascript">
+<![CDATA[
+var previousMode='NONE';
+var editMode='NONE';
+var map, layerLS,tselect, editable,efeature,modify,mapControls;
+var MAPFILE='/var/www/localhost/htdocs/ZOODEMOREP/wfs.map';
+var layerNames=['test001'];
+
+OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
+
+function init(){
+  map = new OpenLayers.Map('map', { controls:[new OpenLayers.Control.Navigation()]});
+  
+  
+  var saveStrategy = new OpenLayers.Strategy.Save();
+  wfsPolygon = new OpenLayers.Layer.WFS( 
+                                 "Editable Features", '/cgi-bin/mapserv?map='+MAPFILE,
+                                 {typename: 'test001'},
+                                 { extractAttributes: true,isBaseLayer: true}
+                                  );
+  
+  editable = new OpenLayers.Layer.Vector("Selection");
+  
+  map.addLayers([editable,wfsPolygon]);
+  map.zoomToExtent(new OpenLayers.Bounds(2.1822340,41.3932440,2.1822342,41.3932442));
+  
+  tselect=new OpenLayers.Control.SelectFeature(wfsPolygon, {callbacks: {'click':feature_info}})
+  mapControls = {
+    pan: new OpenLayers.Control.Pan({title:"Pan"}),
+    zoomin: new OpenLayers.Control.ZoomBox({title:"Zoom in box", out: false}),
+    zoomout: new OpenLayers.Control.ZoomBox({title:"Zoom out box", out: true}),
+    createpolygon: new OpenLayers.Control.DrawFeature(editable, OpenLayers.Handler.Polygon),
+    select: tselect//new OpenLayers.Control.SelectFeature(wfsPolygon, {callbacks: {'click':feature_info}})
+  };
+
+  for(var key in mapControls) {
+    control = mapControls[key];
+    map.addControl(control);
+  }
+
+  var history = new OpenLayers.Control.NavigationHistory();
+  map.addControl(history);
+    
+  var btnPrev = new OpenLayers.Control.Panel({
+    div: document.getElementById("btnPrev"), displayClass:"prev"
+        });
+  var btnNext = new OpenLayers.Control.Panel({
+    div: document.getElementById("btnNext"), displayClass:"next"
+        });
+  
+  map.addControl(btnPrev);
+  btnPrev.addControls([history.previous]);
+  map.addControl(btnNext);
+  
+  btnNext.addControls([history.next]);
+};
+
+function toggleControl(element) {
+  for(key in mapControls) {
+    var control = mapControls[key];
+    if(element.name == key && $(element).is('.ui-state-active') && 
+       !$(element).is('.zoo-action')) {
+      control.activate();
+    } else {
+      control.deactivate();
+    }
+  }
+}
+
+function cancelWFSTEdit(){
+  try{modify.unselectFeature(editable.features[0]);}catch(e){}
+  editable.removeFeatures(editable.features);
+  try{
+  for(var i in efeature.attributes){
+       try{
+         document.getElementById("l_"+i).value="";
+       }catch(e){/*alert(i+" "+e);*/}
+  }
+  }catch(e){}
+  modify.deactivate();
+  mapControls.select=tselect;//new OpenLayers.Control.SelectFeature(wfsPolygon, {callbacks: {'click':feature_info}})
+  map.addControl(mapControls.select);
+}
+
+var local_fields=["osm_id","name","type"];
+function getInsertRequest(){
+  query='<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0" service="WFS"><wfs:Insert><test001>';
+  for(var i=0;i< local_fields.length;i++){
+    try{
+      if(document.getElementById("l_"+local_fields[i]).value!="")
+      query+='<'+local_fields[i]+'>'+document.getElementById("l_"+local_fields[i]).value+'</'+local_fields[i]+'>';
+      document.getElementById("l_"+local_fields[i]).value="";
+    }catch(e){/*alert(i+" "+e);*/}
+  }
+  try{
+    var toto=new OpenLayers.Format.GML();
+    var toto1=toto.buildGeometryNode(editable.features[0].geometry);
+    var str=(new XMLSerializer()).serializeToString(toto1);
+    query+='<msGeometry>'+str+'</msGeometry>';
+  }catch(e){alert(e);}
+  query+='</test001></wfs:Insert></wfs:Transaction>';
+  editMode='NONE';
+  mapControls.select=tselect;//new OpenLayers.Control.SelectFeature(wfsPolygon, {callbacks: {'click':feature_info}});
+  map.addControl(mapControls.select);
+  mapControls.select.activate();
+  return query;
+}
+
+function getUpdateRequest(){
+  query='<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0" service="WFS"><wfs:Update typeName="test001">';
+  for(var i in efeature.attributes){
+    try{
+      query+='<wfs:Property><wfs:Name>'+i+'</wfs:Name><wfs:Value>'+document.getElementById("l_"+i).value+'</wfs:Value></wfs:Property>';
+    }catch(e){/*alert(i+" "+e);*/}
+  }
+  try{
+    var toto=new OpenLayers.Format.GML();
+    var toto1=toto.buildGeometryNode(editable.features[0].geometry);
+    var str=(new XMLSerializer()).serializeToString(toto1);
+    query+='<wfs:Property><wfs:Name>msGeometry</wfs:Name><wfs:Value>'+str+'</wfs:Value></wfs:Property>';
+  }catch(e){alert(e);}
+  query+='<ogc:Filter><ogc:FeatureId fid="test001.'+efeature.attributes[local_fields[0]]+'" /></ogc:Filter>';
+  query+='</wfs:Update></wfs:Transaction>';
+  return query;
+}
+
+function getDeleteRequest(){
+  query='<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0" service="WFS"><wfs:Delete typeName="test001">';
+  query+='<ogc:Filter><ogc:FeatureId fid="test001.'+efeature.attributes[local_fields[0]]+'" /></ogc:Filter>';
+  query+='</wfs:Delete></wfs:Transaction>';
+  return query;
+}
+
+
+function saveWFSTEdit(){
+  query=editMode=='Insert'?getInsertRequest():editMode=='Delete'?getDeleteRequest():getUpdateRequest();
+  var request = new OpenLayers.Request.XMLHttpRequest();
+  request.open('POST','/cgi-bin/proxy-wfst.cgi?map='+MAPFILE+'&url=http://localhost/cgi-bin-new/zoo_loader.cgi',true);
+  request.setRequestHeader('Content-Type','text/xml');
+  request.onreadystatechange = function() {
+    if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
+      wfsPolygon.refresh();
+    }
+  }
+  request.send(query);
+  try{
+    for(var i in efeature.attributes){
+      try{
+        document.getElementById("l_"+i).value="";
+      }catch(e){/*alert(i+" "+e);*/}
+    }
+  }catch(e){}
+  modify.unselectFeature(editable.features[0]);  
+  editable.removeFeatures(editable.features);
+  if(previousMode!='NONE'){
+    editMode=previousMode;
+    previousMode='NONE';
+  }
+  modify.deactivate();
+}
+
+function feature_info(feature) {
+  try{editable.removeFeatures(editable.features);}catch(e){}
+  efeature=feature;
+  editable.addFeatures(feature.clone());
+  modify=new OpenLayers.Control.ModifyFeature(editable);
+  map.addControl(modify);
+  modify.activate();
+  modify.beforeSelectFeature(editable.features[0]);
+  modify.selectFeature(editable.features[0]);
+  for(var i in feature.attributes){
+    try{
+      document.getElementById("l_"+i).value=feature.attributes[i];
+    }catch(e){/*alert(i+" "+e);*/}
+  }
+}
+
+$(function(){
+    $(".fg-button:not(.ui-state-disabled)")
+      .hover(
+             function(){ 
+               $(this).addClass("ui-state-hover"); 
+             },
+             function(){ 
+               $(this).removeClass("ui-state-hover"); 
+             }
+             )
+      .mousedown(function(){
+          if(!$(this).is('.zoo-action')){
+            $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
+            if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
+            else { $(this).addClass("ui-state-active"); }
+          }
+        })
+      .mouseup(function(){
+          if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
+            $(this).removeClass("ui-state-active");
+          }
+        });
+  });   
+
+$(document).ready(function(){
+
+    $('#btnPrev[title], #btnNext[title], a[title]').qtip({ 
+      style: { 
+        name: 'dark', 
+            tip: true,
+            border:{width:2,color:'#fe8701',radius:3},
+            width:{min:120}
+        }
+      });
+  });
+
+]]>
+</script>
+
+}}}