update list when editing place

This commit is contained in:
rolux 2011-05-29 19:44:48 +02:00
parent 09641b11e4
commit 25b86dd085
3 changed files with 78 additions and 32 deletions

View file

@ -46,6 +46,27 @@ Ox.load('Geo', function() {
}); });
var $listmap = new Ox.ListMap({ 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, height: window.innerHeight,
places: function(options, callback) { places: function(options, callback) {
// this simulates a remote API // this simulates a remote API
@ -134,23 +155,17 @@ Ox.load('Geo', function() {
result: {code: 200, text: 'OK'} result: {code: 200, text: 'OK'}
}); });
}, },
removePlace: function(data, callback) {
var i = Ox.getPositionById(places, data.id);
places.splice(i, 1);
callback();
},
width: window.innerWidth width: window.innerWidth
}) })
.bindEvent({ .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) { geocode: function(event, data) {
Ox.print(event) Ox.print(event)
Ox.print(JSON.stringify(data)) Ox.print(JSON.stringify(data))
},
removeplace: function(data) {
var i = Ox.getPositionById(places, data.id);
places.splice(i, 1);
} }
}) })
.appendTo(Ox.UI.$body); .appendTo(Ox.UI.$body);

View file

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

View file

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