update list when editing place

demos/listmap2/js/listmap.js

@@ -46,6 +46,27 @@ Ox.load('Geo', function() {
         });
 
         var $listmap = new Ox.ListMap({
+                addPlace: function(data, callback) {
+                    var id = Ox.encodeBase32(Ox.uid());
+                    Ox.print('addplace', getGeonameSort(data.place.geoname));
+                    places.push(Ox.extend(data.place, {
+                        geonameSort: getGeonameSort(data.place.geoname),
+                        id: id
+                    }));
+                    callback({
+                        data: {id: id},
+                        result: {code: 200, text: 'OK'}
+                    });
+                },
+                editPlace: function(data, callback) {
+                    var place = Ox.getObjectById(places, data.id);
+                    place = Ox.extend(place, data, {
+                        geonameSort: getGeonameSort(data.geoname)
+                    });
+                    callback({
+                        result: {code: 200, text: 'OK'}
+                    });
+                },
                 height: window.innerHeight,
                 places: function(options, callback) {
                     // this simulates a remote API
@@ -134,23 +155,17 @@ Ox.load('Geo', function() {
                         result: {code: 200, text: 'OK'}
                     });
                 },
+                removePlace: function(data, callback) {
+                    var i = Ox.getPositionById(places, data.id);
+                    places.splice(i, 1);
+                    callback();
+                },
                 width: window.innerWidth
             })
             .bindEvent({
-                addplace: function(data) {
-                    Ox.print('addplace', getGeonameSort(data.place.geoname));
-                    places.push(Ox.extend(data.place, {
-                        geonameSort: getGeonameSort(data.place.geoname),
-                        id: Ox.encodeBase32(Ox.uid())
-                    }));
-                },
                 geocode: function(event, data) {
                     Ox.print(event)
                     Ox.print(JSON.stringify(data))
-                },
-                removeplace: function(data) {
-                    var i = Ox.getPositionById(places, data.id);
-                    places.splice(i, 1);
                 }
             })
             .appendTo(Ox.UI.$body);

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -19,10 +19,13 @@ Ox.ListMap = function(options, self) {
     var self = self || {},
         that = Ox.Element({}, self)
             .defaults({
+                addPlace: null,
+                editPlace: null,
                 height: 256,
                 labels: false,
                 pageLength: 100,
                 places: null,
+                removePlace: null,
                 selected: [],
                 sort: [{key: 'geoname', operator: '+'}],
                 width: 256
@@ -82,7 +85,7 @@ Ox.ListMap = function(options, self) {
             width: 16
         },
         {
-            editable: true,
+            //editable: true,
             id: 'name',
             operator: '+',
             removable: false,
@@ -103,7 +106,7 @@ Ox.ListMap = function(options, self) {
             width: 144
         },
         {
-            editable: true,
+            //editable: true,
             id: 'geoname',
             removable: false,
             map: function(v) {
@@ -342,8 +345,14 @@ Ox.ListMap = function(options, self) {
         }).bindEvent({
             change: function(data) {
                 var isResult = self.selectedPlace[0] == '_';
-                Ox.getObjectById(self.options.places, self.selectedPlace).name = data.value;
                 !isResult && self.$list.value(self.selectedPlace, 'name', data.value);
+                if (!self.isAsync) {
+                    Ox.getObjectById(
+                        self.options.places, self.selectedPlace
+                    ).name = data.value;
+                } else {
+                    editPlace();
+                }
                 self.$map.value(self.selectedPlace, 'name', data.value);
             }
         }),
@@ -368,6 +377,11 @@ Ox.ListMap = function(options, self) {
                     src: Ox.getImageByGeoname('icon', 16, geoname)
                 });
                 self.$placeTitleName.options({title: geoname});
+                if (!self.isAsync) {
+                    
+                } else {
+                    editPlace();
+                }
             }
         }),
         Ox.ArrayInput({
@@ -541,22 +555,35 @@ Ox.ListMap = function(options, self) {
         var place = self.$placeForm.values(),
             country = Ox.getCountryByGeoname(place.geoname);
         place.countryCode = country ? country.code : '';
-        self.selectedPlace = self.selectedPlace.substr(1); // fixme: safe?
-        place.id = self.selectedPlace;
         if (!self.isAsync) {
+            place.id = self.selectedPlace.substr(1); // fixme: safe?
+            self.selectedPlace = place.id;
             self.options.places.push(place);
             self.$list.options({
                 items: Ox.clone(self.options.places),
                 selected: [place.id]
             });
+            self.$map.addPlace(place);
             //setStatus();
         }
-        self.$map.addPlace(place);
+        //that.triggerEvent('addplace', {place: place});
-        self.$placeButton.options({title: 'Remove Place'});
-        that.triggerEvent('addplace', {place: place});
         if (self.isAsync) {
-            self.$list.reloadList().options({selected: [place.id]});
+            self.options.addPlace({place: place}, function(result) {
+                place.id = result.data.id;
+                self.selectedPlace = place.id;
+                self.$list.reloadList().options({selected: [place.id]});
+                self.$map.addPlace(place);
+            });
         }
+        self.$placeButton.options({title: 'Remove Place'});
+    }
+
+    function editPlace() {
+        self.options.editPlace(Ox.extend(self.$placeForm.values(), {
+            id: self.selectedPlace
+        }), function() {
+            self.$list.reloadList();
+        });
     }
 
     function removePlace() {
@@ -570,7 +597,9 @@ Ox.ListMap = function(options, self) {
         self.$placeButton.options({title: 'Add Place'});
         that.triggerEvent('removeplace', {id: self.selectedPlace});
         if (self.isAsync) {
-            self.$list.options({selected: []}).reloadList(true);
+            self.options.removePlace({id: self.selectedPlace}, function() {
+                self.$list.options({selected: []}).reloadList(true);
+            });
         }
         
     }
@@ -602,13 +631,14 @@ Ox.ListMap = function(options, self) {
     }
 
     function selectPlace(place) {
+        Ox.print('selectPlace', place.id && !isResult ? [place.id] : [])
+        var isResult = place.id && place.id[0] == '_';
+        self.$list.options({
+            selected: place.id && !isResult ? [place.id] : []
+        });
         if (place.id) {
-            isResult = place.id[0] == '_';
             //isResult && self.options.places.push(place);
             self.selectedPlace = place.id;
-            self.$list.options({
-                selected: place.id && !isResult ? [place.id] : []
-            });
             self.$placeTitleFlag.attr({
                 src: Ox.getImageByGeoname('icon', 16, place.geoname)
             });

source/Ox.UI/js/Map/Ox.Map.js

@@ -389,7 +389,7 @@ Ox.Map = function(options, self) {
                     countryCode: '',
                     editable: true,
                     geoname: '',
-                    id: '_' + Ox.uid(), // fixme: stupid
+                    id: '_' + Ox.encodeBase32(Ox.uid()), // fixme: stupid
                     lat: center.lat(),
                     lng: center.lng(),
                     map: that,
@@ -418,12 +418,10 @@ Ox.Map = function(options, self) {
     function addPlaceToPlaces(data) {
         var place = getSelectedPlace(),
             country = Ox.getCountryByGeoname(place.geoname);
-        if (self.options.selected == place.id) {
-            self.options.selected = place.id.substr(1);
-        }
-        place.id = place.id.substr(1); // fixme: NOT SAFE!
         Ox.extend(place, data);
+        self.options.selected = place.id;
         place.countryCode = country ? country.code : '';
+        Ox.print('addP2P', data, place);
         place.marker.update();
         self.places.push(place);
         self.resultPlace = null;
@@ -822,7 +820,7 @@ Ox.Map = function(options, self) {
 		        editable: self.options.editable,
 		        fullGeoname: getFullGeoname(data.address_components),
 		        geoname: data.formatted_address,
-		        id: '_' + Ox.uid(),
+		        id: '_' + Ox.encodeBase32(Ox.uid()),
 		        map: that,
                 name: data.formatted_address.split(', ')[0],
 		        north: bounds.getNorthEast().lat(),
@@ -949,10 +947,13 @@ Ox.Map = function(options, self) {
                         select();
                     });
                 }
+            } else {
+                place = null;
+                select();
             }
         }
         function select() {
-            place.select();
+            place && place.select();
             self.options.selected = id;
             setStatus();
             that.triggerEvent('selectplace', place);