add error handling in listmap, improve setting the error class in inputs and arrayinputs

source/Ox.UI/js/Form/Ox.ArrayInput.js

@@ -1,3 +1,7 @@
+/*@
+Ox.ArrayInput <f> Array input
+@*/
+
 Ox.ArrayInput = function(options, self) {
 
     self = self || {};
@@ -141,7 +145,6 @@ Ox.ArrayInput = function(options, self) {
 
     self.setOption = function(key, value) {
         if (key == 'value') {
-            Ox.print('--value--', value, self.$input)
             if (self.options.value.length == 0) {
                 self.options.value = [''];
             }
@@ -156,6 +159,12 @@ Ox.ArrayInput = function(options, self) {
         }
     }
 
+    that.setErrors = function(values) {
+        self.$input.forEach(function($input) {
+            values.indexOf($input.value()) > -1 && $input.addClass('OxError');
+        });
+    };
+
     // fixme: can't we generally use options.value for this?
     that.value = function() {
         if (arguments.length == 0) {

source/Ox.UI/js/Form/Ox.Input.js

@@ -810,6 +810,7 @@ Ox.Input = function(options, self) {
                 self.options.value = self.options.value.toFixed(self.options.decimals);
             }
             self.$input.val(self.options.value);
+            that.is('.OxError') && that.removeClass('OxError');
             setPlaceholder();
         } else if (key == 'width') {
             that.css({width: self.options.width + 'px'});

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

@@ -356,7 +356,15 @@ Ox.ListMap = function(options, self) {
             width: 208
         })
         .css({float: 'left', margin: '4px 0 4px 0'})
-        .appendTo(self.$placeTitle);
+        .appendTo(self.$placeTitle)
+        .bindEvent({
+            singleclick: function() {
+                self.$map.panToPlace();
+            },
+            doubleclick: function() {
+                self.$map.zoomToPlace();
+            }
+        });
 
     self.$deselectPlaceButton = Ox.Button({
             title: 'close',
@@ -371,73 +379,80 @@ Ox.ListMap = function(options, self) {
         })
         .appendTo(self.$placeTitle);
 
+    self.$nameInput = Ox.Input({
+        id: 'name',
+        label: 'Name',
+        labelWidth: 64,
+        width: 240
+    }).bindEvent({
+        change: function(data) {
+            var isResult = self.selectedPlace[0] == '_';
+            !isResult && self.$list.value(self.selectedPlace, 'name', data.value);
+            if (!self.isAsync) {
+                Ox.getObjectById(
+                    self.options.places, self.selectedPlace
+                ).name = data.value;
+            } else {
+                !isResult && editPlace(['name']);
+            }
+            self.$map.value(self.selectedPlace, 'name', data.value);
+        }
+    });
+
+    self.$alternativeNamesInput = Ox.ArrayInput({
+        id: 'alternativeNames',
+        label: 'Alternative Names',
+        max: 10,
+        //sort: true,
+        values: [],
+        width: 240
+    }).bindEvent({
+        change: function(data) {
+            var isResult = self.selectedPlace[0] == '_';
+            if (!self.isAsync) {
+                
+            } else {
+                !isResult && editPlace(['alternativeNames'])
+            }
+            self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
+        }
+    });
+
+    self.$geonameInput = Ox.Input({
+        id: 'geoname',
+        label: 'Geoname',
+        labelWidth: 64,
+        width: 240
+    }).bindEvent({
+        change: function(data) {
+            var geoname = data.value,
+                country = Ox.getCountryByGeoname(geoname),
+                countryCode = country ? country.code : '',
+                isResult = self.selectedPlace[0] == '_';
+            self.$placeTitleFlag.attr({
+                src: Ox.getImageByGeoname('icon', 16, geoname)
+            });
+            self.$placeTitleName.options({title: geoname});
+            self.$placeForm.values({countryCode: countryCode});
+            if (!self.isAsync) {
+                if (!isResult) {
+                    self.$list.value(self.selectedPlace, 'geoname', geoname);
+                    self.$list.value(self.selectedPlace, 'countryCode', countryCode);
+                }
+            } else {
+                !isResult && editPlace(['countryCode', 'geoname']);
+            }
+            self.$map.value(self.selectedPlace, 'countryCode', countryCode);
+            self.$map.value(self.selectedPlace, 'geoname', geoname);
+        }
+    });
+
     // fixme: form should have a change event
+    // fixme: it has one now, but inputs fire on blur
     self.$placeFormItems = Ox.merge([
-        Ox.Input({
-            id: 'name',
-            label: 'Name',
-            labelWidth: 64,
-            width: 240
-        }).bindEvent({
-            change: function(data) {
-                var isResult = self.selectedPlace[0] == '_';
-                !isResult && self.$list.value(self.selectedPlace, 'name', data.value);
-                if (!self.isAsync) {
-                    Ox.getObjectById(
-                        self.options.places, self.selectedPlace
-                    ).name = data.value;
-                } else {
-                    !isResult && editPlace(['name']);
-                }
-                self.$map.value(self.selectedPlace, 'name', data.value);
-            }
-        }),
-        Ox.ArrayInput({
-            id: 'alternativeNames',
-            label: 'Alternative Names',
-            max: 10,
-            //sort: true,
-            values: [],
-            width: 240
-        }).bindEvent({
-            change: function(data) {
-                var isResult = self.selectedPlace[0] == '_';
-                if (!self.isAsync) {
-                    
-                } else {
-                    !isResult && editPlace(['alternativeNames'])
-                }
-                self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
-            }
-        }),
-        Ox.Input({
-            id: 'geoname',
-            label: 'Geoname',
-            labelWidth: 64,
-            width: 240
-        }).bindEvent({
-            change: function(data) {
-                var geoname = data.value,
-                    country = Ox.getCountryByGeoname(geoname),
-                    countryCode = country ? country.code : '',
-                    isResult = self.selectedPlace[0] == '_';
-                self.$placeTitleFlag.attr({
-                    src: Ox.getImageByGeoname('icon', 16, geoname)
-                });
-                self.$placeTitleName.options({title: geoname});
-                self.$placeForm.values({countryCode: countryCode});
-                if (!self.isAsync) {
-                    if (!isResult) {
-                        self.$list.value(self.selectedPlace, 'geoname', geoname);
-                        self.$list.value(self.selectedPlace, 'countryCode', countryCode);
-                    }
-                } else {
-                    !isResult && editPlace(['countryCode', 'geoname']);
-                }
-                self.$map.value(self.selectedPlace, 'countryCode', countryCode);
-                self.$map.value(self.selectedPlace, 'geoname', geoname);
-            }
-        }),
+        self.$nameInput,
+        self.$alternativeNamesInput,
+        self.$geonameInput,
         Ox.Input({
             id: 'countryCode'
         }).hide(),
@@ -661,18 +676,33 @@ Ox.ListMap = function(options, self) {
                 selected: [place.id]
             });
             self.$map.addPlace(place);
+            self.$placeButton.options({title: 'Remove Place'});
             //setStatus();
         }
         //that.triggerEvent('addplace', {place: place});
         if (self.isAsync) {
+            self.$placeButton.options({disabled: true, title: 'Adding Place'});
             self.options.addPlace(place, function(result) {
-                place.id = result.data.id;
-                self.selectedPlace = place.id;
-                self.$list.reloadList().options({selected: [place.id]});
-                self.$map.addPlace(place);
+                if (result.status.code == 200) {
+                    place.id = result.data.id;
+                    self.selectedPlace = place.id;
+                    self.$list.reloadList().options({selected: [place.id]});
+                    self.$map.addPlace(place);
+                    self.$placeButton.options({disabled: false, title: 'Remove Place'});
+                } else {
+                    if (result.data.names) {
+                        if (result.data.names.indexOf(self.$nameInput.value()) > -1) {
+                            self.$nameInput.addClass('OxError');
+                        }
+                        self.$alternativeNamesInput.setErrors(result.data.names);
+                    }
+                    if (result.data.geoname) {
+                        self.$geonameInput.addClass('OxError');
+                    }
+                    self.$placeButton.options({disabled: false, title: 'Add Place'});
+                }
             });
         }
-        self.$placeButton.options({title: 'Remove Place'});
     }
 
     function editPlace(keys) {