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,9 +379,7 @@ Ox.ListMap = function(options, self) {
         })
         .appendTo(self.$placeTitle);
 
-    // fixme: form should have a change event
-    self.$placeFormItems = Ox.merge([
-        Ox.Input({
+    self.$nameInput = Ox.Input({
         id: 'name',
         label: 'Name',
         labelWidth: 64,
@@ -391,8 +397,9 @@ Ox.ListMap = function(options, self) {
             }
             self.$map.value(self.selectedPlace, 'name', data.value);
         }
-        }),
-        Ox.ArrayInput({
+    });
+
+    self.$alternativeNamesInput = Ox.ArrayInput({
         id: 'alternativeNames',
         label: 'Alternative Names',
         max: 10,
@@ -409,8 +416,9 @@ Ox.ListMap = function(options, self) {
             }
             self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
         }
-        }),
-        Ox.Input({
+    });
+
+    self.$geonameInput = Ox.Input({
         id: 'geoname',
         label: 'Geoname',
         labelWidth: 64,
@@ -437,7 +445,14 @@ Ox.ListMap = function(options, self) {
             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([
+        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) {
+                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) {