update list when editing place
This commit is contained in:
rolux
parent
09641b11e4
commit
25b86dd085
3 changed files with 78 additions and 32 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue