vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00
Code Issues Releases Wiki Activity

Save settings before connect to network / create access point and display validation errors and only close settings when settings are saved

Browse Source
This commit is contained in:
peteruithoven 2013-10-17 14:09:09 +02:00
parent b2191217cb
commit 53e8ccc294
2 changed files with 117 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/settings.css
View File

@ -93,4 +93,12 @@ form .button {
form #passwordLabel, form #password { form #passwordLabel, form #password {
display: none; display: none;
}
form input.error, form textarea.error, form select.error {
border: #f00 solid 2px;
}
form .errorMsg {
color: #f00;
margin: 0 0 0 1em;
} }

189
js/SettingsWindow.js
View File

@ -113,8 +113,9 @@ function SettingsWindow() {
this.submitwindow = function(e) { this.submitwindow = function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
self.saveSettings(); self.saveSettings(self.readForm(),function(){
self.hideSettings(); self.hideSettings();
});
clearTimeout(self.retryRetrieveNetworkStatusDelay); clearTimeout(self.retryRetrieveNetworkStatusDelay);
} }
@ -162,45 +163,6 @@ function SettingsWindow() {
this.refreshNetworks(); this.refreshNetworks();
this.retrieveNetworkStatus(false); 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() { this.fillForm = function() {
console.log("SettingsWindow:fillForm"); 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 = "<p class='errorMsg'>"+msg+"</p>"
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() { this.readForm = function() {
console.log("SettingsWindow:readForm"); //console.log("SettingsWindow:readForm");
var selects = this.form.find("select"); var settings = {};
var selects = self.form.find("select");
selects.each( function(index,element) { selects.each( function(index,element) {
var element = $(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) { inputs.each( function(index,element) {
var element = $(element); var element = $(element);
switch(element.attr("type")) { 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) { textareas.each( function(index,element) {
var element = $(element); var element = $(element);
settings[element.attr('name')] = element.val(); settings[element.attr('name')] = element.val();
}); });
console.log(settings); //console.log(settings);
return settings;
} }
/* /*
* Networks ui * Networks ui
*/ */
@ -514,26 +533,31 @@ function SettingsWindow() {
this.connectToNetwork = function() { this.connectToNetwork = function() {
console.log("connectToNetwork"); console.log("connectToNetwork");
if(self.selectedNetwork == undefined) return; if(self.selectedNetwork == undefined) return;
postData = { var postData = {
ssid:self.selectedNetwork, ssid:self.selectedNetwork,
phrase:self.form.find("#password").val(), phrase:self.form.find("#password").val(),
recreate:true recreate:true
} }
console.log(" postData: ",postData); console.log(" postData: ",postData);
if (communicateWithWifibox) { if (communicateWithWifibox) {
$.ajax({
url: self.wifiboxCGIBinURL + "/network/associate", // save network related settings and on complete, connect to network
type: "POST", self.saveSettings(self.readForm(),function() {
data: postData,
dataType: 'json', $.ajax({
timeout: self.timeoutTime, url: self.wifiboxCGIBinURL + "/network/associate",
success: function(response){ type: "POST",
console.log("Settings:connectToNetwork response: ",response); data: postData,
} dataType: 'json',
}).fail(function() { timeout: self.timeoutTime,
console.log("Settings:connectToNetwork: timeout (normal behavior)"); success: function(response){
//clearTimeout(self.retrySaveSettingsDelay); console.log("Settings:connectToNetwork response: ",response);
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay }
}).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,""); self.setClientModeState(SettingsWindow.CONNECTING,"");
@ -545,28 +569,33 @@ function SettingsWindow() {
} }
this.createAP = function() { this.createAP = function() {
console.log("createAP");
if (communicateWithWifibox) { if (communicateWithWifibox) {
$.ajax({
url: self.wifiboxCGIBinURL + "/network/openap", // save network related settings and on complete, create access point
type: "POST", self.saveSettings(self.readForm(),function() {
dataType: 'json', $.ajax({
timeout: self.timeoutTime, url: self.wifiboxCGIBinURL + "/network/openap",
success: function(response){ type: "POST",
console.log("Settings:createAP response: ",response); 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,"");
} // after switching wifi network or creating a access point we delay the status retrieval
}).fail(function() { // because the webserver needs time to switch
console.log("Settings:createAP: timeout (normal behavior)"); clearTimeout(self.retrieveNetworkStatusDelay);
//clearTimeout(self.retrySaveSettingsDelay); self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
}); });
} }
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);
} }
} }