From bbef38f0a9a0b0facca6a07963420cea84c7e615 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 3 Oct 2011 23:25:38 +0000 Subject: [PATCH] add error handling in listmap, improve setting the error class in inputs and arrayinputs --- source/Ox.UI/js/Form/Ox.ArrayInput.js | 11 +- source/Ox.UI/js/Form/Ox.Input.js | 1 + source/Ox.UI/js/Map/Ox.ListMap.js | 172 +++++++++++++++----------- 3 files changed, 112 insertions(+), 72 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js index b964ecc4..71f84a86 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayInput.js +++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js @@ -1,3 +1,7 @@ +/*@ +Ox.ArrayInput 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) { diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index a5b7bfa4..002737c5 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/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'}); diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 863730ce..d938dcce 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/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) {