Improved settings dialog behaviour

* Show when settings are saving
  * Show when settings are being retrieved
  * Disable Send/Cancel buttons while settings are saving
  * Prevent concurrent retrieval
This commit is contained in:
Gina Häußge 2015-07-24 14:27:02 +02:00
parent 7708eeaa87
commit 88eb124a35
2 changed files with 49 additions and 6 deletions

View file

@ -6,6 +6,10 @@ $(function() {
self.users = parameters[1];
self.printerProfiles = parameters[2];
self.receiving = ko.observable(false);
self.sending = ko.observable(false);
self.callbacks = [];
self.api_enabled = ko.observable(undefined);
self.api_key = ko.observable(undefined);
self.api_allowCrossOrigin = ko.observable(undefined);
@ -261,13 +265,37 @@ $(function() {
};
self.requestData = function(callback) {
if (self.receiving()) {
if (callback) {
self.callbacks.push(callback);
}
return;
}
self.receiving(true);
$.ajax({
url: API_BASEURL + "settings",
type: "GET",
dataType: "json",
success: function(response) {
self.fromResponse(response);
if (callback) callback();
var callbacks = self.callbacks;
self.callbacks = [];
if (callback) {
callbacks.push(callback);
}
try {
self.fromResponse(response);
_.each(callbacks, function(cb) {
cb();
});
} finally {
self.receiving(false);
}
},
error: function(xhr) {
self.receiving(false);
}
});
};
@ -429,6 +457,8 @@ $(function() {
self.settingsDialog.trigger("beforeSave");
if (data == undefined) {
// we only set sending to true when we didn't include data
self.sending(true);
data = ko.mapping.toJS(self.settings);
data = _.extend(data, {
@ -525,11 +555,24 @@ $(function() {
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(data),
success: function(response) {
self.fromResponse(response);
if (successCallback) successCallback(response);
self.receiving(true);
self.sending(false);
try {
self.fromResponse(response);
if (successCallback) successCallback(response);
} finally {
self.receiving(false);
}
},
error: function(xhr) {
self.sending(false);
}
});
};
self.onEventSettingsUpdated = function() {
self.requestData();
};
}
OCTOPRINT_VIEWMODELS.push([

View file

@ -1,7 +1,7 @@
<div id="settings_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }}</h3>
<h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }} <i class="icon-spinner icon-spin" data-bind="visible: receiving"></i></h3>
</div>
<div class="modal-body">
<div class="full-sized-box">
@ -49,6 +49,6 @@
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</button>
<button class="btn btn-primary" data-bind="click: function() { saveData(undefined, $root.hide) }">{{ _('Save') }}</button>
<button class="btn btn-primary" data-bind="click: function() { saveData(undefined, $root.hide) }, enable: !sending(), css: {disabled: sending()}"><i class="icon-spinner icon-spin" data-bind="visible: sending"></i> {{ _('Save') }}</button>
</div>
</div>