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:
parent
7708eeaa87
commit
88eb124a35
2 changed files with 49 additions and 6 deletions
|
|
@ -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([
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue