Some refactoring in CuraViewModel
* Use click data-bind for submit button instead of manual click
binding
* Keep metadata synchronized (otherwise changing identifier, name,
description, overwrite or default flag after adding a file does
absolutely nothing)
* Disable submit button and fields when no file is selected.
* Disable submit button (and show spinned) when request is in
progress.
Related to #1893
This commit is contained in:
Gina Häußge
parent
f5fad5186e
commit
0161d915d6
2 changed files with 93 additions and 36 deletions
|
|
@ -25,16 +25,34 @@ $(function() {
|
|||
self.profileAllowOverwrite = ko.observable(true);
|
||||
self.profileMakeDefault = ko.observable(false);
|
||||
|
||||
// make sure to update form data if any of the metadata changes
|
||||
self.profileName.subscribe(function() { self.copyProfileMetadata(); });
|
||||
self.profileDisplayName.subscribe(function() {
|
||||
if (self.profileDisplayName()) {
|
||||
self.placeholderName(self._sanitize(self.profileDisplayName()).toLowerCase());
|
||||
}
|
||||
self.copyProfileMetadata();
|
||||
});
|
||||
self.profileDescription.subscribe(function() { self.copyProfileMetadata(); });
|
||||
self.profileAllowOverwrite.subscribe(function() { self.copyProfileMetadata(); });
|
||||
self.profileMakeDefault.subscribe(function() { self.copyProfileMetadata(); });
|
||||
|
||||
self.unconfiguredCuraEngine = ko.observable();
|
||||
self.unconfiguredSlicingProfile = ko.observable();
|
||||
|
||||
self.uploadDialog = $("#settings_plugin_cura_import");
|
||||
self.uploadElement = $("#settings-cura-import");
|
||||
self.uploadButton = $("#settings-cura-import-start");
|
||||
self.uploadData = null;
|
||||
self.uploadButton.on("click", function() {
|
||||
if (self.uploadData) {
|
||||
self.uploadData.submit();
|
||||
}
|
||||
self.uploadData = ko.observable(undefined);
|
||||
self.uploadBusy = ko.observable(false);
|
||||
|
||||
self.uploadEnabled = ko.pureComputed(function() {
|
||||
return self.fieldsEnabled();
|
||||
});
|
||||
self.fieldsEnabled = ko.pureComputed(function() {
|
||||
return self.uploadData() && !self.uploadBusy()
|
||||
&& (self.profileName() || self.placeholderName())
|
||||
&& (self.profileDisplayName() || self.placeholderDisplayName())
|
||||
&& (self.profileDescription() || self.placeholderDescription());
|
||||
});
|
||||
|
||||
self.profiles = new ItemListHelper(
|
||||
|
|
@ -72,7 +90,42 @@ $(function() {
|
|||
return name.replace(/[^a-zA-Z0-9\-_\.\(\) ]/g, "").replace(/ /g, "_");
|
||||
};
|
||||
|
||||
self.performUpload = function() {
|
||||
if (self.uploadData()) {
|
||||
self.uploadData().submit();
|
||||
}
|
||||
};
|
||||
|
||||
self.copyProfileMetadata = function(form) {
|
||||
form = form || (self.uploadData() ? self.uploadData().formData : {});
|
||||
|
||||
if (self.profileName() !== undefined) {
|
||||
form["name"] = self.profileName();
|
||||
} else if (self.placeholderName() !== undefined) {
|
||||
form["name"] = self.placeholderName();
|
||||
}
|
||||
|
||||
if (self.profileDisplayName() !== undefined) {
|
||||
form["displayName"] = self.profileDisplayName();
|
||||
} else if (self.placeholderDisplayName() !== undefined) {
|
||||
form["displayName"] = self.placeholderDisplayName();
|
||||
}
|
||||
|
||||
if (self.profileDescription() !== undefined) {
|
||||
form["description"] = self.profileDescription();
|
||||
} else if (self.placeholderDescription() !== undefined) {
|
||||
form["description"] = self.placeholderDescription();
|
||||
}
|
||||
|
||||
if (self.profileMakeDefault()) {
|
||||
form["default"] = true;
|
||||
}
|
||||
|
||||
return form;
|
||||
};
|
||||
|
||||
self.clearUpload = function() {
|
||||
self.uploadData(undefined);
|
||||
self.fileName(undefined);
|
||||
self.placeholderName(undefined);
|
||||
self.placeholderDisplayName(undefined);
|
||||
|
|
@ -81,7 +134,7 @@ $(function() {
|
|||
self.profileDisplayName(undefined);
|
||||
self.profileDescription(undefined);
|
||||
self.profileAllowOverwrite(true);
|
||||
self.uploadData = null;
|
||||
self.profileMakeDefault(false);
|
||||
};
|
||||
|
||||
self.uploadElement.fileupload({
|
||||
|
|
@ -91,6 +144,11 @@ $(function() {
|
|||
headers: OctoPrint.getRequestHeaders(),
|
||||
add: function(e, data) {
|
||||
if (data.files.length == 0) {
|
||||
// no files? ignore
|
||||
return false;
|
||||
}
|
||||
if (self.uploadData()) {
|
||||
// data already defined? ignore (should never happen)
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -104,27 +162,19 @@ $(function() {
|
|||
var form = {
|
||||
allowOverwrite: self.profileAllowOverwrite()
|
||||
};
|
||||
data.formData = self.copyProfileMetadata(form);
|
||||
|
||||
if (self.profileName() !== undefined) {
|
||||
form["name"] = self.profileName();
|
||||
}
|
||||
if (self.profileDisplayName() !== undefined) {
|
||||
form["displayName"] = self.profileDisplayName();
|
||||
}
|
||||
if (self.profileDescription() !== undefined) {
|
||||
form["description"] = self.profileDescription();
|
||||
}
|
||||
if (self.profileMakeDefault()) {
|
||||
form["default"] = true;
|
||||
}
|
||||
|
||||
data.formData = form;
|
||||
self.uploadData = data;
|
||||
self.uploadData(data);
|
||||
},
|
||||
submit: function(e, data) {
|
||||
self.copyProfileMetadata();
|
||||
self.uploadBusy(true);
|
||||
},
|
||||
done: function(e, data) {
|
||||
self.uploadBusy(false);
|
||||
self.clearUpload();
|
||||
|
||||
$("#settings_plugin_cura_import").modal("hide");
|
||||
self.uploadDialog.modal("hide");
|
||||
self.requestData();
|
||||
self.slicingViewModel.requestData();
|
||||
}
|
||||
|
|
@ -167,13 +217,9 @@ $(function() {
|
|||
});
|
||||
};
|
||||
|
||||
self.showImportProfileDialog = function(makeDefault) {
|
||||
self.showImportProfileDialog = function() {
|
||||
self.clearUpload();
|
||||
if (makeDefault == undefined) {
|
||||
makeDefault = _.filter(self.profiles.items(), function(profile) { profile.isdefault() }).length == 0;
|
||||
}
|
||||
self.profileMakeDefault(makeDefault);
|
||||
$("#settings_plugin_cura_import").modal("show");
|
||||
self.uploadDialog.modal("show");
|
||||
};
|
||||
|
||||
self.testEnginePath = function() {
|
||||
|
|
@ -215,7 +261,18 @@ $(function() {
|
|||
|
||||
self.onBeforeBinding = function () {
|
||||
self.settings = self.settingsViewModel.settings;
|
||||
//self.requestData();
|
||||
};
|
||||
|
||||
self.onAllBound = function() {
|
||||
self.uploadDialog.on("hidden", function(event) {
|
||||
if (event.target.id == "settings_plugin_cura_import") {
|
||||
self.clearUpload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
self.onSettingsShown = function() {
|
||||
self.requestData();
|
||||
};
|
||||
|
||||
self.onSettingsHidden = function() {
|
||||
|
|
|
|||
|
|
@ -20,31 +20,31 @@
|
|||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Identifier') }}</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileName, attr: {placeholder: placeholderName}">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileName, attr: {placeholder: placeholderName}, enable: fieldsEnabled, css: {disabled: !fieldsEnabled()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Name') }}</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileDisplayName, attr: {placeholder: placeholderDisplayName}">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileDisplayName, valueUpdate: 'afterkeydown', attr: {placeholder: placeholderDisplayName}, enable: fieldsEnabled, css: {disabled: !fieldsEnabled()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Description') }}</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileDescription, attr: {placeholder: placeholderDescription}">
|
||||
<input type="text" class="input-block-level" data-bind="value: profileDescription, attr: {placeholder: placeholderDescription}, enable: fieldsEnabled, css: {disabled: !fieldsEnabled()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<label class="checkbox" data-bind="enable: fieldsEnabled, css: {disabled: !fieldsEnabled()}">
|
||||
<input type="checkbox" data-bind="checked: profileMakeDefault"> {{ _('Make default profile') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<label class="checkbox" data-bind="enable: fieldsEnabled, css: {disabled: !fieldsEnabled()}">
|
||||
<input type="checkbox" data-bind="checked: profileAllowOverwrite"> {{ _('Overwrite existing file') }}
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -59,6 +59,6 @@
|
|||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
|
||||
<button class="btn btn-primary" id="settings-cura-import-start">{{ _('Confirm') }}</button>
|
||||
<button class="btn btn-primary" data-bind="click: performUpload, enable: uploadEnabled, css: {disabled: !uploadEnabled()}" id="settings-cura-import-start"><i class="icon-spinner icon-spin" data-bind="visible: uploadBusy"></i> {{ _('Confirm') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue