323 lines
13 KiB
JavaScript
323 lines
13 KiB
JavaScript
$(function () {
|
|
function CustomControlViewModel(parameters) {
|
|
var self = this;
|
|
|
|
self.loginState = parameters[0];
|
|
self.settingsViewModel = parameters[1];
|
|
self.controlViewModel = parameters[2];
|
|
self.containerDialogViewModel = parameters[3];
|
|
|
|
self.popup = undefined;
|
|
|
|
self.controls = ko.observableArray([]);
|
|
|
|
self.controlsFromServer = [];
|
|
self.additionalControls = [];
|
|
|
|
self.staticID = 0;
|
|
|
|
self._showPopup = function (options, eventListeners) {
|
|
if (self.popup !== undefined) {
|
|
self.popup.remove();
|
|
}
|
|
self.popup = new PNotify(options);
|
|
|
|
if (eventListeners) {
|
|
var popupObj = self.popup.get();
|
|
_.each(eventListeners, function (value, key) {
|
|
popupObj.on(key, value);
|
|
})
|
|
}
|
|
};
|
|
|
|
self.onStartup = function () {
|
|
self.requestData();
|
|
};
|
|
|
|
self.requestData = function () {
|
|
$.ajax({
|
|
url: API_BASEURL + "printer/command/custom",
|
|
method: "GET",
|
|
dataType: "json",
|
|
success: function (response) {
|
|
self._fromResponse(response);
|
|
}
|
|
});
|
|
};
|
|
|
|
self._fromResponse = function (response) {
|
|
self.controlsFromServer = response.controls;
|
|
self.rerenderControls();
|
|
};
|
|
|
|
self.rerenderControls = function () {
|
|
|
|
// TODO: Brainstorming about how to handle additionalControls...
|
|
|
|
self.staticID = 0;
|
|
self.controls(self._processControls(undefined, self.controlsFromServer))
|
|
};
|
|
|
|
self._processControls = function (parent, controls) {
|
|
for (var i = 0; i < controls.length; i++) {
|
|
controls[i] = self._processControl(parent, controls[i]);
|
|
}
|
|
return controls;
|
|
};
|
|
|
|
self._processControl = function (parent, control) {
|
|
control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
|
|
control.parent = parent;
|
|
|
|
if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output"))
|
|
control.output = ko.observable("");
|
|
|
|
if (control.hasOwnProperty("children")) {
|
|
if (control.processed) {
|
|
control.children(self._processControls(control, control.children()));
|
|
if (control.hasOwnProperty("layout") && !(control.layout() == "vertical" || control.layout() == "horizontal" || control.layout() == "horizontal_grid"))
|
|
control.layout("vertical");
|
|
else if (!control.hasOwnProperty("layout"))
|
|
control.layout = ko.observable("vertical");
|
|
}
|
|
else {
|
|
control.name = ko.observable(control.name);
|
|
control.children = ko.observableArray(self._processControls(control, control.children));
|
|
if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal" || control.layout == "horizontal_grid"))
|
|
control.layout = ko.observable("vertical");
|
|
else
|
|
control.layout = ko.observable(control.layout);
|
|
|
|
control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
|
|
control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
|
|
}
|
|
}
|
|
|
|
if (control.hasOwnProperty("input")) {
|
|
for (var i = 0; i < control.input.length; i++) {
|
|
if (!control.processed) {
|
|
control.input[i].value = ko.observable(control.input[i].default);
|
|
control.input[i].default = ko.observable(control.input[i].default);
|
|
}
|
|
|
|
if (control.processed)
|
|
control.input[i].value(control.input[i].default());
|
|
|
|
if (!control.input[i].hasOwnProperty("slider"))
|
|
control.input[i].slider = ko.observable(false);
|
|
else if (!control.processed)
|
|
control.input[i].slider = ko.observable(control.input[i].slider);
|
|
}
|
|
}
|
|
|
|
var js;
|
|
if (control.hasOwnProperty("javascript")) {
|
|
js = control.javascript;
|
|
|
|
// if js is a function everything's fine already, but if it's a string we need to eval that first
|
|
/*if (!_.isFunction(js)) {
|
|
control.javascript = function (data) {
|
|
eval(js);
|
|
};
|
|
}*/
|
|
}
|
|
|
|
if (control.hasOwnProperty("enabled")) {
|
|
js = control.enabled;
|
|
|
|
// if js is a function everything's fine already, but if it's a string we need to eval that first
|
|
/*if (!_.isFunction(js)) {
|
|
control.enabled = function (data) {
|
|
return eval(js);
|
|
}
|
|
}*/
|
|
}
|
|
|
|
control.processed = true;
|
|
return control;
|
|
};
|
|
|
|
self.displayMode = function (customControl) {
|
|
if (customControl.hasOwnProperty("children")) {
|
|
return "settingsCustomControls_containerTemplate";
|
|
} else {
|
|
return "settingsCustomControls_controlTemplate";
|
|
}
|
|
}
|
|
|
|
self.rowCss = function (customControl) {
|
|
var span = "span2";
|
|
var offset = "";
|
|
if (customControl.hasOwnProperty("width") && customControl.width() != "") {
|
|
span = "span" + customControl.width();
|
|
}
|
|
if (customControl.hasOwnProperty("offset") && customControl.offset() != "") {
|
|
offset = "offset" + customControl.offset();
|
|
}
|
|
return span + " " + offset;
|
|
};
|
|
|
|
self.searchElement = function (list, id) {
|
|
for (var i = 0; i < list.length; i++)
|
|
{
|
|
if (list[i].id() == id)
|
|
return list[i];
|
|
|
|
if (list[i].hasOwnProperty("children")) {
|
|
var element = self.searchElement(list[i].children(), id);
|
|
if (element != undefined)
|
|
return element;
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
self.controlContextMenu = function (invokedOn, contextParent, selectedMenu)
|
|
{
|
|
switch (selectedMenu.attr('cmd')) {
|
|
case "createContainer": {
|
|
if (invokedOn.attr('id') == "base") {
|
|
self.containerDialogViewModel.element({
|
|
name: undefined,
|
|
children:[],
|
|
layout: "vertical",
|
|
width: "2",
|
|
offset: ""
|
|
});
|
|
|
|
self.containerDialogViewModel.show(function (e) {
|
|
self.controlsFromServer.push(self.containerDialogViewModel.element());
|
|
self.rerenderControls();
|
|
});
|
|
}
|
|
else {
|
|
var parentElement = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
|
|
if (parentElement == undefined) {
|
|
self._showPopup({
|
|
title: gettext("Something went wrong while creating the new Element"),
|
|
type:"error"
|
|
});
|
|
return;
|
|
}
|
|
|
|
self.containerDialogViewModel.element({
|
|
parent: parentElement,
|
|
name: undefined,
|
|
children: [],
|
|
layout: "vertical",
|
|
width: "2",
|
|
offset: ""
|
|
});
|
|
|
|
self.containerDialogViewModel.show(function (e) {
|
|
parentElement.children.push(self._processControl(parentElement, self.containerDialogViewModel.element()));
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
case "editContainer": {
|
|
var element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
|
|
if (element == undefined) {
|
|
self._showPopup({
|
|
title: gettext("Something went wrong while creating the new Element"),
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
|
|
var dialog = $('#containerDialog');
|
|
var primarybtn = $('.btn-primary', dialog);
|
|
|
|
var el = {
|
|
parent: element.parent,
|
|
name: ko.observable(element.name()),
|
|
layout: ko.observable(element.layout()),
|
|
width: ko.observable("2"),
|
|
offset: ko.observable("")
|
|
};
|
|
if (element.hasOwnProperty("width"))
|
|
el.width(element.width());
|
|
if (element.hasOwnProperty("offset"))
|
|
el.offset(element.offset());
|
|
|
|
self.containerDialogViewModel.element(el);
|
|
primarybtn.unbind('click').bind('click', function (e) {
|
|
var ele = self.containerDialogViewModel.element();
|
|
|
|
element.name(ele.name());
|
|
element.layout(ele.layout());
|
|
if (ele.parent.layout() == "horizontal_grid") {
|
|
if (ele.width() != undefined)
|
|
element.width(ele.width());
|
|
|
|
if (ele.offset() != undefined)
|
|
element.offset(ele.offset());
|
|
}
|
|
});
|
|
|
|
dialog.modal({
|
|
show: 'true',
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
break;
|
|
}
|
|
case "deleteContainer": {
|
|
var element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
|
|
if (element == undefined) {
|
|
self._showPopup({
|
|
title: gettext("Something went wrong while creating the new Element"),
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
|
|
showConfirmationDialog("", function (e) {
|
|
if (element.parent != undefined)
|
|
element.parent.children.remove(element);
|
|
else {
|
|
self.controlsFromServer = _.without(self.controlsFromServer, element);
|
|
self.rerenderControls();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
self.editStyle = function (type) {
|
|
}
|
|
|
|
self.recursiveDeleteProperties = function (list) {
|
|
for (var i = 0; i < list.length; i++) {
|
|
if (list[i].parent && list[i].parent.hasOwnProperty("layout") && list[i].parent.layout() != "horizontal_grid")
|
|
{
|
|
delete list[i].width;
|
|
delete list[i].offset;
|
|
}
|
|
|
|
delete list[i].id;
|
|
delete list[i].parent;
|
|
delete list[i].processed;
|
|
|
|
if (list[i].hasOwnProperty("children"))
|
|
self.recursiveDeleteProperties(list[i].children());
|
|
}
|
|
}
|
|
self.onSettingsBeforeSave = function () {
|
|
self.recursiveDeleteProperties(self.controlsFromServer);
|
|
self.settingsViewModel.settings.plugins.octoprint_customControl.controls = self.controlsFromServer;
|
|
}
|
|
|
|
self.onEventSettingsUpdated = function (payload) {
|
|
self.requestData();
|
|
}
|
|
}
|
|
|
|
// view model class, parameters for constructor, container to bind to
|
|
OCTOPRINT_VIEWMODELS.push([
|
|
CustomControlViewModel,
|
|
["loginStateViewModel", "settingsViewModel", "controlViewModel", "containerDialogViewModel"],
|
|
"#settings_plugin_octoprint_customControl"
|
|
]);
|
|
}); |