From 53e8ccc29438fe891ae6650330b8f8c825859dfd Mon Sep 17 00:00:00 2001 From: peteruithoven Date: Thu, 17 Oct 2013 14:09:09 +0200 Subject: [PATCH] Save settings before connect to network / create access point and display validation errors and only close settings when settings are saved --- css/settings.css | 8 ++ js/SettingsWindow.js | 189 +++++++++++++++++++++++++------------------ 2 files changed, 117 insertions(+), 80 deletions(-) diff --git a/css/settings.css b/css/settings.css index 88a070a..7747b58 100644 --- a/css/settings.css +++ b/css/settings.css @@ -93,4 +93,12 @@ form .button { form #passwordLabel, form #password { display: none; +} + +form input.error, form textarea.error, form select.error { + border: #f00 solid 2px; +} +form .errorMsg { + color: #f00; + margin: 0 0 0 1em; } \ No newline at end of file diff --git a/js/SettingsWindow.js b/js/SettingsWindow.js index 6be02d2..b2a6ed5 100644 --- a/js/SettingsWindow.js +++ b/js/SettingsWindow.js @@ -113,8 +113,9 @@ function SettingsWindow() { this.submitwindow = function(e) { e.preventDefault(); e.stopPropagation(); - self.saveSettings(); - self.hideSettings(); + self.saveSettings(self.readForm(),function(){ + self.hideSettings(); + }); clearTimeout(self.retryRetrieveNetworkStatusDelay); } @@ -162,45 +163,6 @@ function SettingsWindow() { this.refreshNetworks(); this.retrieveNetworkStatus(false); } - - this.saveSettings = function(callback) { - console.log("Settings:saveSettings"); - - this.readForm(); - - if (communicateWithWifibox) { - $.ajax({ - url: this.wifiboxURL + "/config", - type: "POST", - data: settings, - dataType: 'json', - timeout: this.timeoutTime, - success: function(data){ - console.log("Settings:saveSettings response: ",data); - if(data.status == "error") { - clearTimeout(self.retrySaveSettingsDelay); - self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay - } else { - var savedSettings = data.data; - $.each(savedSettings, function(index, val) { - if (val != "ok") { - console.log("ERROR: value '" + index + "' not successfully set. Message: " + val); - } - }); - // TODO something like a callback or feedback that saving went well / or failed - if (callback != undefined) { - callback(); - } - } - } - }).fail(function() { - console.log("Settings:saveSettings: failed"); - clearTimeout(self.retrySaveSettingsDelay); - self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay - }); - } - } - this.fillForm = function() { console.log("SettingsWindow:fillForm"); @@ -232,15 +194,72 @@ function SettingsWindow() { }); } + this.saveSettings = function(newSettings,complete) { + if (communicateWithWifibox) { + $.ajax({ + url: this.wifiboxURL + "/config", + type: "POST", + data: newSettings, + dataType: 'json', + timeout: this.timeoutTime, + success: function(data){ + console.log("Settings:saveSettings response: ",data); + if(data.status == "error") { + clearTimeout(self.retrySaveSettingsDelay); + self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings) },self.retryDelay); // retry after delay + } else { + var savedSettings = data.data; + self.clearValidationErrors(); + var validated = true; + $.each(savedSettings, function(key, val) { + if (val != "ok") { + console.log("ERROR: setting '" + key + "' not successfully set. Message: " + val); + self.displayValidationError(key,val); + validated = false; + } + }); + if(complete && validated) complete(); + } + } + }).fail(function() { + console.log("Settings:saveSettings: failed"); + clearTimeout(self.retrySaveSettingsDelay); + self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings) },self.retryDelay); // retry after delay + }); + } + } + this.displayValidationError = function(key,msg) { + var formElement = self.form.find("[name|='"+key+"']"); + console.log("formElement: ",formElement); + formElement.addClass("error"); + var errorMsg = "

"+msg+"

" + formElement.after(errorMsg); + } + this.clearValidationErrors = function() { + console.log("clearValidationErrors"); + console.log(" remove: ",self.form.find(".errorMsg").remove()); + var formElements = self.form.find(".error"); + console.log(" formElements: ",formElements); + formElements.each( function(index,element) { + + var element = $(element); + console.log(" element: ",element); + element.removeClass("error"); + }); + } + this.readForm = function() { - console.log("SettingsWindow:readForm"); - var selects = this.form.find("select"); + //console.log("SettingsWindow:readForm"); + var settings = {}; + var selects = self.form.find("select"); selects.each( function(index,element) { var element = $(element); - settings[element.attr('name')] = element.val(); + if(element.attr('name') != "network.client.network") { + settings[element.attr('name')] = element.val(); + } }); - var inputs = this.form.find("input"); + var inputs = self.form.find("input"); inputs.each( function(index,element) { var element = $(element); switch(element.attr("type")) { @@ -254,15 +273,15 @@ function SettingsWindow() { } }); - var textareas = this.form.find("textarea"); + var textareas = self.form.find("textarea"); textareas.each( function(index,element) { var element = $(element); settings[element.attr('name')] = element.val(); }); - console.log(settings); + //console.log(settings); + return settings; } - /* * Networks ui */ @@ -514,26 +533,31 @@ function SettingsWindow() { this.connectToNetwork = function() { console.log("connectToNetwork"); if(self.selectedNetwork == undefined) return; - postData = { + var postData = { ssid:self.selectedNetwork, phrase:self.form.find("#password").val(), recreate:true } console.log(" postData: ",postData); if (communicateWithWifibox) { - $.ajax({ - url: self.wifiboxCGIBinURL + "/network/associate", - type: "POST", - data: postData, - dataType: 'json', - timeout: self.timeoutTime, - success: function(response){ - console.log("Settings:connectToNetwork response: ",response); - } - }).fail(function() { - console.log("Settings:connectToNetwork: timeout (normal behavior)"); - //clearTimeout(self.retrySaveSettingsDelay); - //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay + + // save network related settings and on complete, connect to network + self.saveSettings(self.readForm(),function() { + + $.ajax({ + url: self.wifiboxCGIBinURL + "/network/associate", + type: "POST", + data: postData, + dataType: 'json', + timeout: self.timeoutTime, + success: function(response){ + console.log("Settings:connectToNetwork response: ",response); + } + }).fail(function() { + console.log("Settings:connectToNetwork: timeout (normal behavior)"); + //clearTimeout(self.retrySaveSettingsDelay); + //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay + }); }); } self.setClientModeState(SettingsWindow.CONNECTING,""); @@ -545,28 +569,33 @@ function SettingsWindow() { } this.createAP = function() { + console.log("createAP"); if (communicateWithWifibox) { - $.ajax({ - url: self.wifiboxCGIBinURL + "/network/openap", - type: "POST", - dataType: 'json', - timeout: self.timeoutTime, - success: function(response){ - console.log("Settings:createAP response: ",response); + + // save network related settings and on complete, create access point + self.saveSettings(self.readForm(),function() { + $.ajax({ + url: self.wifiboxCGIBinURL + "/network/openap", + type: "POST", + dataType: 'json', + timeout: self.timeoutTime, + success: function(response){ + console.log("Settings:createAP response: ",response); + } + }).fail(function() { + console.log("Settings:createAP: timeout (normal behavior)"); + //clearTimeout(self.retrySaveSettingsDelay); + //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay + }); + + self.setAPModeState(SettingsWindow.CREATING_AP,""); - } - }).fail(function() { - console.log("Settings:createAP: timeout (normal behavior)"); - //clearTimeout(self.retrySaveSettingsDelay); - //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay + // after switching wifi network or creating a access point we delay the status retrieval + // because the webserver needs time to switch + clearTimeout(self.retrieveNetworkStatusDelay); + self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime); }); } - self.setAPModeState(SettingsWindow.CREATING_AP,""); - - // after switching wifi network or creating a access point we delay the status retrieval - // because the webserver needs time to switch - clearTimeout(self.retrieveNetworkStatusDelay); - self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime); } }