From 25b86dd08589ea58df23112824a6fde456603090 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 29 May 2011 19:44:48 +0200 Subject: [PATCH] update list when editing place --- demos/listmap2/js/listmap.js | 37 ++++++++++++++------ source/Ox.UI/js/Map/Ox.ListMap.js | 58 +++++++++++++++++++++++-------- source/Ox.UI/js/Map/Ox.Map.js | 15 ++++---- 3 files changed, 78 insertions(+), 32 deletions(-) diff --git a/demos/listmap2/js/listmap.js b/demos/listmap2/js/listmap.js index 4645e73b..40fa68e2 100644 --- a/demos/listmap2/js/listmap.js +++ b/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); diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 8f3150c9..b5f9fe09 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/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); - self.$placeButton.options({title: 'Remove Place'}); - that.triggerEvent('addplace', {place: 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) }); diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 0c9e2527..b8b439c6 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/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);