870 lines
31 KiB
JavaScript
870 lines
31 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
// % GROUP
|
|
|
|
var writePermissionTimeout; // Sets writePermission to 'false,
|
|
// restarts by user-interaction.
|
|
|
|
var prompt = false // True while a prompt is opened.
|
|
|
|
function getGroup(s, name) {
|
|
console.log('name: ',name, ', id: '.ClientID);
|
|
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
|
+ "&id=" + clientID, successHandler, errorHandler);
|
|
}
|
|
|
|
function sendCommand(s, command) {
|
|
reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
|
|
+ "&id=" + clientID, successHandler, errorHandler);
|
|
}
|
|
|
|
function createContent(message) {
|
|
// Depending on the message received from the server the content of the
|
|
// group is created dynamically. Handles draw-message.
|
|
|
|
var content = document.createElement('div');
|
|
content.classList.add("content");
|
|
// Process components of the message
|
|
for (var i = 0; i < message.components.length; i++) {
|
|
var component = message.components[i];
|
|
if (!("title" in component))
|
|
component.title = component.name;
|
|
if (!("command" in component))
|
|
component.command = component.name;
|
|
|
|
if (message.title == 'modules') {
|
|
let row = create_row_for_modules(component);
|
|
content.appendChild(row);
|
|
} else {
|
|
let row = create_row_for_parameters(component);
|
|
content.appendChild(row);
|
|
}
|
|
}
|
|
return content;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
|
|
|
|
function create_row_for_modules(component) {
|
|
// Creates row-element containing link AND read-only-item.
|
|
let name = component.name;
|
|
let status = component.statusname;
|
|
|
|
let left = createTitle(component, 1);
|
|
left.id = component.name;
|
|
left.name = component.title; // or setAttribute('name'.. ?
|
|
let right = createParElement(component);
|
|
let edit = document.createElement('img');
|
|
edit.setAttribute('src', 'res/icon_edit.png');
|
|
edit.classList.add('modules-icon');
|
|
edit.classList.add('edit-icon');
|
|
let row = appendToContent(component, left, right, edit);
|
|
row.onclick = function () {
|
|
getGroup(s, component.title);
|
|
}
|
|
row.classList.add('row-clickable');
|
|
return row;
|
|
}
|
|
|
|
function create_row_for_parameters(component) {
|
|
let left = createTitle(component);
|
|
let right = document.createElement('span');
|
|
right.classList.add('col-right-parameters');
|
|
let value = document.createElement('span');
|
|
value.classList.add('rdonly');
|
|
value.setAttribute('name', component.name);
|
|
value.__ctype__ = 'rdonly';
|
|
right.appendChild(value);
|
|
|
|
if (component.type == 'input' ||
|
|
component.type == 'pushbutton' ||
|
|
component.type == 'checkbox' ||
|
|
component.type == 'enum'
|
|
) {
|
|
value.classList.add('col-right-parameters-value');
|
|
let edit = document.createElement('img');
|
|
edit.setAttribute('src', 'res/icon_edit.png');
|
|
edit.classList.add('modules-icon');
|
|
edit.classList.add('edit-icon');
|
|
createFunc = window['create_' + component.type]
|
|
let hidden_elem = createFunc(component);
|
|
hidden_elem.classList.add('hidden-input-element');
|
|
edit.onclick = function () {
|
|
hidden_elem.classList.toggle('hidden-input-element');
|
|
}
|
|
right.appendChild(edit);
|
|
right.appendChild(hidden_elem);
|
|
}
|
|
return appendToContent(component, left, right);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
// input elements
|
|
|
|
function create_pushbutton(component) {
|
|
// Creates row-element containing a push button
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var elem = createParElement(component);
|
|
elem.classList.add("clickable", "push-button");
|
|
elem.onclick = function () {
|
|
// if (writePermission) {
|
|
let row = elem.closest('div');
|
|
elem.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command);
|
|
// } else {
|
|
// prompt = true;
|
|
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
// + "</b>. <br>"
|
|
// + "Are you sure you want to modify things here?",
|
|
// function () {
|
|
// // User decided to proceed.
|
|
// writePermission = true;
|
|
// writePermissionTimeout = setTimeout(function () {
|
|
// writePermission = false;
|
|
// }, 3600000);
|
|
// let row = elem.closest('div');
|
|
// row.style.backgroundColor = "orangered";
|
|
// // Request for command
|
|
// sendCommand(s, command);
|
|
// prompt = false;
|
|
// }, function () {
|
|
// // User decided to cancel
|
|
// prompt = false;
|
|
// });
|
|
// }
|
|
}
|
|
return elem;
|
|
}
|
|
|
|
function create_input(component) {
|
|
// Creates row-element containing input-item.
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var input = createParElement(component, 'input', 'input-text');
|
|
input.type = "text";
|
|
input.style.width = "100px";
|
|
input.addEventListener("focus", function(evt) {
|
|
let elm = evt.target;
|
|
setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
|
|
});
|
|
|
|
input.onkeydown = function (e) {
|
|
if (e.which === 27 || e.key == "Escape") {
|
|
// User decided to cancel
|
|
input.value = intput.oldValue;
|
|
resizeTextfield(input);
|
|
var row = input.closest('div');
|
|
row.style.backgroundColor = "white";
|
|
}
|
|
}
|
|
|
|
input.onfocus = function () {
|
|
input.oldValue = input.value;
|
|
|
|
if (isTouchDevice)
|
|
setTimeout(function () {
|
|
posTextfield(s, left);
|
|
}, 1);
|
|
}
|
|
|
|
input.onblur = function () {
|
|
if (prompt) {
|
|
return false;
|
|
}
|
|
var row = input.closest('div');
|
|
var value = input.value;
|
|
let oldValue = 'oldValue' in input ? input.oldValue : value;
|
|
if (!('actualValue' in input)) input.actualValue = oldValue;
|
|
actualValue = input.actualValue;
|
|
if (value == actualValue || value == oldValue ||
|
|
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
|
|
input.value = actualValue;
|
|
// nothing to do.
|
|
row.style.backgroundColor = "white";
|
|
return false;
|
|
}
|
|
// User changed value and moved focus to other object.
|
|
alertify.confirm("", "You changed a field without pressing the return key.<br>"
|
|
+ "Hint: press ESC for leaving a field unchanged.<b>"
|
|
+ "You are connected with <b>" + clientTitle + "</b>.<br>"
|
|
+ "Are you sure you want to change the value of<br><b>"
|
|
+ name + "</b> from <b>" + actualValue
|
|
+ "</b> to <b>" + value + "</b>?", function () {
|
|
// User decided to proceed.
|
|
// writePermission = true;
|
|
// writePermissionTimeout = setTimeout(function () {
|
|
// writePermission = false;
|
|
// }, 3600000);
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
input.closest('form').classList.toggle('hidden-input-element');
|
|
}, function () {
|
|
// User decided to cancel
|
|
input.value = input.actualValue;
|
|
resizeTextfield(input);
|
|
row.style.backgroundColor = "white";
|
|
prompt = false;
|
|
input.closest('form').classList.toggle('hidden-input-element');
|
|
});
|
|
}
|
|
|
|
var form = document.createElement('form');
|
|
form.onsubmit = function (e) {
|
|
e.preventDefault();
|
|
// if (writePermission) {
|
|
var row = form.closest('div');
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
input.actualValue = input.value;
|
|
sendCommand(s, name + " " + input.value);
|
|
input.blur();
|
|
form.classList.toggle('hidden-input-element');
|
|
// } else {
|
|
// var value = input.value
|
|
// prompt = true;
|
|
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
// + "</b>. <br>"
|
|
// + "Are you sure you want to modify things here?",
|
|
// function () {
|
|
// // User decided to proceed.
|
|
// writePermission = true;
|
|
// writePermissionTimeout = setTimeout(function () {
|
|
// writePermission = false;
|
|
// }, 3600000);
|
|
// var row = form.closest('div');
|
|
// row.style.backgroundColor = "orangered";
|
|
// input.actualValue = value;
|
|
// // Request for command
|
|
// sendCommand(s, command + " " + value);
|
|
// resizeTextfield(input);
|
|
// prompt = false;
|
|
// }, function () {
|
|
// // User decided to cancel
|
|
// input.value = input.oldValue;
|
|
// resizeTextfield(input);
|
|
// prompt = false;
|
|
// });
|
|
// }
|
|
};
|
|
form.appendChild(input);
|
|
return form;
|
|
|
|
function posTextfield(s, left) {
|
|
if (debug_group_daniel) {
|
|
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
|
}
|
|
|
|
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
|
// var row = left.parentNode;
|
|
// content.scrollTop = row.offsetTop - 30;
|
|
|
|
// ---------------------> Not working anymore since swiper was removed!!!
|
|
}
|
|
}
|
|
|
|
function create_checkbox(component) {
|
|
// Creates row-element containing checkbox-item
|
|
var command = component.command;
|
|
var input = createParElement(component, 'input', 'parameter-checkbox');
|
|
input.type = "checkbox";
|
|
input.onkeyup = function (e) {
|
|
if (e.keyCode === 32) {
|
|
handleCheckbox();
|
|
}
|
|
}
|
|
|
|
var label = document.createElement('label');
|
|
label.for = input;
|
|
label.classList.add("parameter-label");
|
|
|
|
label.onclick = function () {
|
|
handleCheckbox();
|
|
}
|
|
|
|
function handleCheckbox() {
|
|
// if (writePermission) {
|
|
var row = input.closest('div');
|
|
row.style.backgroundColor = "orangered";
|
|
if (input.checked) {
|
|
var value = "0";
|
|
input.checked = false;
|
|
} else {
|
|
var value = "1";
|
|
input.checked = true;
|
|
}
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
input.closest('span').classList.toggle('hidden-input-element');
|
|
// } else {
|
|
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
// + "</b>. <br>"
|
|
// + "Are you sure you want to modify things here?",
|
|
// function () {
|
|
// // User decided to proceed.
|
|
// writePermission = true;
|
|
// writePermissionTimeout = setTimeout(function () {
|
|
// writePermission = false;
|
|
// }, 3600000);
|
|
// var row = input.closest('div');
|
|
// row.style.backgroundColor = "orangered";
|
|
// if (input.checked) {
|
|
// var value = "0";
|
|
// input.checked = false;
|
|
// } else {
|
|
// var value = "1";
|
|
// input.checked = true;
|
|
// }
|
|
// // Request for command
|
|
// sendCommand(s, command + " " + value);
|
|
// }, function () {
|
|
// // User decided to cancel
|
|
// });
|
|
// }
|
|
};
|
|
|
|
var right = document.createElement('span');
|
|
right.appendChild(input);
|
|
right.appendChild(label);
|
|
return right;
|
|
}
|
|
|
|
function create_enum(component) {
|
|
// Creates row-element containing dropdown-selection.
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var buttons = component.enum_names;
|
|
var select = createParElement(component, 'select', 'select-params');
|
|
select.onfocus = function () {
|
|
select.oldIndex = select.selectedIndex;
|
|
}
|
|
|
|
select.oninput = function () {
|
|
if (writePermission && component.title != "device config") {
|
|
var row = select.closest('div');
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + this.value);
|
|
} else {
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = select.closest('div');
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + select.value);
|
|
}, function () {
|
|
// User decided to cancel
|
|
select.value = select.options[select.oldIndex].value
|
|
});
|
|
}
|
|
};
|
|
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
var option = document.createElement('option');
|
|
option.type = "enum";
|
|
option.classList.add("option-params");
|
|
option.value = buttons[i].value;
|
|
option.appendChild(document.createTextNode(buttons[i].title));
|
|
select.add(option);
|
|
}
|
|
select.style.display = "none";
|
|
|
|
var right = document.createElement('span');
|
|
right.appendChild(select);
|
|
return right;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
// obsolete...
|
|
|
|
function create_pushbutton_row(component) {
|
|
// Creates row-element containing a push button
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var left = createTitle(component);
|
|
|
|
left.id = component.name;
|
|
left.name = component.title;
|
|
|
|
var right = createParElement(component);
|
|
right.classList.add("clickable", "push-button");
|
|
|
|
row = appendToContent(component, left, right);
|
|
right.onclick = function () {
|
|
if (writePermission) {
|
|
var row = left.parentNode;
|
|
right.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command);
|
|
} else {
|
|
prompt = true;
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
prompt = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
row.classList.add("row");
|
|
return row;
|
|
}
|
|
|
|
function create_input_row(component) {
|
|
// Creates row-element containing input-item.
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var left = createTitle(component);
|
|
|
|
var input = createParElement(component, 'input', 'input-text');
|
|
input.type = "text";
|
|
input.style.width = "100px";
|
|
input.addEventListener("focus", function(evt) {
|
|
let elm = evt.target;
|
|
setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
|
|
});
|
|
|
|
input.onkeydown = function (e) {
|
|
if (e.which === 27 || e.key == "Escape") {
|
|
// User decided to cancel
|
|
input.value = intput.oldValue;
|
|
resizeTextfield(input);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "white";
|
|
}
|
|
}
|
|
|
|
input.onfocus = function () {
|
|
input.oldValue = input.value;
|
|
|
|
if (isTouchDevice)
|
|
setTimeout(function () {
|
|
posTextfield(s, left);
|
|
}, 1);
|
|
}
|
|
|
|
input.onblur = function () {
|
|
if (prompt) {
|
|
return false;
|
|
}
|
|
var row = left.parentNode;
|
|
var value = input.value;
|
|
let oldValue = 'oldValue' in input ? input.oldValue : value;
|
|
if (!('actualValue' in input)) input.actualValue = oldValue;
|
|
actualValue = input.actualValue;
|
|
if (value == actualValue || value == oldValue ||
|
|
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
|
|
input.value = actualValue;
|
|
// nothing to do.
|
|
row.style.backgroundColor = "white";
|
|
return false;
|
|
}
|
|
// User changed value and moved focus to other object.
|
|
alertify.confirm("", "You changed a field without pressing the return key.<br>"
|
|
+ "Hint: press ESC for leaving a field unchanged.<b>"
|
|
+ "You are connected with <b>" + clientTitle + "</b>.<br>"
|
|
+ "Are you sure you want to change the value of<br><b>"
|
|
+ name + "</b> from <b>" + actualValue
|
|
+ "</b> to <b>" + value + "</b>?", function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
input.value = input.actualValue;
|
|
resizeTextfield(input);
|
|
row.style.backgroundColor = "white";
|
|
prompt = false;
|
|
});
|
|
}
|
|
|
|
var form = document.createElement('form');
|
|
form.onsubmit = function (e) {
|
|
e.preventDefault();
|
|
if (writePermission) {
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
input.actualValue = input.value;
|
|
sendCommand(s, name + " " + input.value);
|
|
input.blur();
|
|
} else {
|
|
var value = input.value
|
|
prompt = true;
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
input.actualValue = value;
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
input.value = input.oldValue;
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
});
|
|
}
|
|
};
|
|
form.appendChild(input);
|
|
var right = createParElement(component);
|
|
right.appendChild(form);
|
|
return appendToContent(component, left, right);
|
|
|
|
function posTextfield(s, left) {
|
|
if (debug_group_daniel) {
|
|
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
|
}
|
|
|
|
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
|
// var row = left.parentNode;
|
|
// content.scrollTop = row.offsetTop - 30;
|
|
|
|
// ---------------------> Not working anymore since swiper was removed!!!
|
|
}
|
|
}
|
|
|
|
function create_checkbox_row(component) {
|
|
// Creates row-element containing checkbox-item
|
|
var command = component.command;
|
|
var left = createTitle(component);
|
|
var input = createParElement(component, 'input', 'parameter-checkbox');
|
|
input.type = "checkbox";
|
|
input.onkeyup = function (e) {
|
|
if (e.keyCode === 32) {
|
|
handleCheckbox();
|
|
}
|
|
}
|
|
|
|
var label = document.createElement('label');
|
|
label.for = input;
|
|
label.classList.add("parameter-label");
|
|
|
|
label.onclick = function () {
|
|
handleCheckbox();
|
|
}
|
|
|
|
function handleCheckbox() {
|
|
if (writePermission) {
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
if (input.checked) {
|
|
var value = "0";
|
|
input.checked = false;
|
|
} else {
|
|
var value = "1";
|
|
input.checked = true;
|
|
}
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
} else {
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
if (input.checked) {
|
|
var value = "0";
|
|
input.checked = false;
|
|
} else {
|
|
var value = "1";
|
|
input.checked = true;
|
|
}
|
|
// Request for command
|
|
sendCommand(s, command + " " + value);
|
|
}, function () {
|
|
// User decided to cancel
|
|
});
|
|
}
|
|
};
|
|
|
|
var right = document.createElement('span');
|
|
right.classList.add("col-right");
|
|
right.appendChild(input);
|
|
right.appendChild(label);
|
|
return appendToContent(component, left, right);
|
|
}
|
|
|
|
function create_enum_row(component) {
|
|
// Creates row-element containing dropdown-selection.
|
|
var name = component.name;
|
|
var command = component.command;
|
|
var buttons = component.enum_names;
|
|
var left = createTitle(component);
|
|
var select = createParElement(component, 'select', 'select-params');
|
|
select.onfocus = function () {
|
|
select.oldIndex = select.selectedIndex;
|
|
}
|
|
|
|
select.oninput = function () {
|
|
if (writePermission && component.title != "device config") {
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + this.value);
|
|
} else {
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, command + " " + select.value);
|
|
}, function () {
|
|
// User decided to cancel
|
|
select.value = select.options[select.oldIndex].value
|
|
});
|
|
}
|
|
};
|
|
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
var option = document.createElement('option');
|
|
option.type = "enum";
|
|
option.classList.add("option-params");
|
|
option.value = buttons[i].value;
|
|
option.appendChild(document.createTextNode(buttons[i].title));
|
|
select.add(option);
|
|
}
|
|
select.style.display = "none";
|
|
|
|
var right = document.createElement('span');
|
|
right.classList.add("col-right");
|
|
right.appendChild(select);
|
|
return appendToContent(component, left, right);
|
|
}
|
|
|
|
// ...obsolete
|
|
/* ---------------------------------------------------------------------------------- */
|
|
// The following two functions seem unreachable
|
|
|
|
/* ########## Is this function used? How? Where? ########## */
|
|
function create_group_row(component) {
|
|
// Creates row-element containing link.
|
|
var title = component.title;
|
|
var row = document.createElement('row');
|
|
row.id = component.name;
|
|
row.name = title;
|
|
row.classList.add("interactive", "row", "link");
|
|
row.tabIndex = "0";
|
|
|
|
console.log('createGroupRow');
|
|
|
|
row.onclick = function () {
|
|
var slideNames = getSlideNames();
|
|
slideNames[0] = component.name;
|
|
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
|
history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
|
|
getGroup(s, component.name);
|
|
}
|
|
|
|
if (title === "console" || title === "device config") {
|
|
row.classList.add("interactive", "row", "link", "link-static");
|
|
row.innerHTML = "console";
|
|
}
|
|
row.innerHTML = title;
|
|
return row;
|
|
}
|
|
|
|
/* ########## Is this function used? How? Where? ########## */
|
|
function create_rdonly_row(component) {
|
|
// Creates row-element containing link AND read-only-item.
|
|
var link = component.link;
|
|
if (!link) // simple rdonly
|
|
return appendToContent(component, createTitle(component),
|
|
createParElement(component));
|
|
|
|
// with link
|
|
var left = document.createElement('a');
|
|
left.classList.add("col-left");
|
|
left.innerHTML = component.title;
|
|
|
|
console.log('ccc')
|
|
|
|
left.id = component.name;
|
|
left.name = component.title;
|
|
left.classList.add("interactive", "link");
|
|
|
|
row = appendToContent(component, left, createParElement(component));
|
|
row.onclick = function () {
|
|
this.style.backgroundColor = "orangered";
|
|
left.click();
|
|
}
|
|
if (link.charAt(0) == ':') {
|
|
left.href = "http://" + location.hostname + link + "/";
|
|
} else {
|
|
left.href = link;
|
|
}
|
|
|
|
row.classList.add("row", "clickable");
|
|
return row;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
|
|
function createTitle(component, modules) {
|
|
// Creates left side of row-tag containing title. Title may hold additional
|
|
// information, which is shown, when title-tag is clicked.
|
|
// At the modules-block a status-icon is added
|
|
|
|
var left = document.createElement('span');
|
|
// if (component.info) {
|
|
// left.classList.add("col-left", "event-toggle-info");
|
|
|
|
// left.onclick = function () {
|
|
// var infoBox = left.parentNode.childNodes[0];
|
|
// if (infoBox.style.display == "none") {
|
|
// infoBox.style.display = "block";
|
|
// } else {
|
|
// infoBox.style.display = "none";
|
|
// }
|
|
// }
|
|
|
|
// left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
|
|
// }
|
|
|
|
var title = component.title;
|
|
if (modules) {
|
|
var icon_status = '<img name = ' + title + ':status class = "modules-icon status-icon" src="res/icon_status.png">';
|
|
if (component.statusname) {
|
|
left.innerHTML = icon_status;
|
|
}
|
|
left.innerHTML += '<span class = "modules-title">' + title + '</span>';
|
|
if (component.statusname) {
|
|
let name = title + '-info'
|
|
left.innerHTML += '<span name = ' + name + ' class = "status-info"></span>';
|
|
}
|
|
} else {
|
|
left.innerHTML = component.title;
|
|
}
|
|
return left;
|
|
}
|
|
|
|
function createParElement(component, tag='span', cls='col-right-modules') {
|
|
var right = document.createElement(tag);
|
|
if (cls)
|
|
right.classList.add(cls);
|
|
// right.name = is not sufficient, getElementsByName would not work
|
|
right.setAttribute('name', component.name);
|
|
// Add DOM-property
|
|
right.__ctype__ = component.type;
|
|
right.classList.add(component.type);
|
|
return right;
|
|
}
|
|
|
|
function appendToContent(component, left, right, edit) {
|
|
// Creates row-tag containing infoBox (not visible by default), left side
|
|
// (span) and right side (span).
|
|
var row = document.createElement('div');
|
|
row.classList.add("row");
|
|
if (component.info) {
|
|
row.appendChild(createInfo(component));
|
|
}
|
|
row.appendChild(left);
|
|
row.appendChild(right);
|
|
if (edit) {
|
|
row.appendChild(edit);
|
|
}
|
|
return row;
|
|
|
|
function createInfo(component) {
|
|
// Creates info-box, which isn't visible by default but can be displayed.
|
|
var infoBox = document.createElement('div');
|
|
infoBox.classList.add("info-box");
|
|
|
|
infoBox.onclick = function () {
|
|
infoBox.style.display = "none";
|
|
}
|
|
|
|
infoBox.innerHTML = component.info;
|
|
return infoBox;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
|
|
function appendToGridElement(s, title, type, content) {
|
|
var panel = document.createElement('div');
|
|
panel.classList.add("panel");
|
|
|
|
titlewrapper = document.createElement('span');
|
|
titlewrapper.innerHTML = title;
|
|
panel.appendChild(titlewrapper);
|
|
|
|
var gridContainer = document.createElement('div');
|
|
gridContainer.classList.add("grid-container");
|
|
// Store type so it can be found easiely later.
|
|
gridContainer.slideType = type;
|
|
gridContainer.appendChild(panel);
|
|
gridContainer.appendChild(content);
|
|
|
|
var gridelements = document.getElementsByClassName('grid-element');
|
|
gridelements[s].innerHTML = "";
|
|
gridelements[s].appendChild(gridContainer);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- */
|
|
|
|
function resizeTextfield(input) {
|
|
if (input.value.length > input.size * 12 / 20) {
|
|
var str0 = window.getComputedStyle(input).fontSize;
|
|
var str1 = str0.substring(0, str0.length - 2);
|
|
if (input.value.length < 43) {
|
|
input.style.width = input.value.length * str1 * 12 / 20 + "px";
|
|
}
|
|
} else {
|
|
input.style.width = "100px";
|
|
}
|
|
}
|