diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html
index d742de5..2a3adc7 100644
--- a/client/SEAWebClient.html
+++ b/client/SEAWebClient.html
@@ -35,7 +35,7 @@
-
+
@@ -55,7 +55,7 @@
-
+
diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css
index bc51208..a2bd7da 100644
--- a/client/cssFiles/SEAWebClientGroup.css
+++ b/client/cssFiles/SEAWebClientGroup.css
@@ -88,7 +88,12 @@
cursor: pointer;
}
-.col-right {
+.col-right-modules {
+ position: absolute;
+ right: 16px;
+}
+
+.col-right-parameters {
float: right;
}
@@ -101,13 +106,16 @@
min-width: 120px;
}
+/* ------------------------------ modules-icons ------------------------------ */
+
.modules-icon {
display: inline-block;
- width: 16px;
- height: 16px;
+ width: 12px;
+ height: 12px;
line-height: 16px;
- margin-right: 4px;
opacity: .8;
+ text-align: top;
+ margin-bottom: 4px;
}
/* ------------------------------ status-icon ------------------------------ */
@@ -115,8 +123,7 @@
.status-icon {
border-radius: 50%;
background-color: lightgray;
- opacity: .8;
- /* box-shadow: -2px -2px 5px inset; */
+ margin-right: 4px;
}
.status-icon-idle {
@@ -156,6 +163,33 @@
opacity: 1.0;
}
+/* ------------------------------ value ------------------------------ */
+
+.col-right-parameters-value {
+ position: absolute;
+ right: 16px;
+}
+
+/* ------------------------------ edit-icon ------------------------------ */
+
+.edit-icon {
+ /* position: absolute; */
+ /* right: 0; */
+ float: right;
+ cursor: pointer;
+}
+
+.edit-icon:hover {
+ transform: scale(.8);
+ opacity: .6;
+}
+
+/* ------------------------------ hidden-input_element ------------------------------ */
+
+.hidden-input-element {
+ display: none;
+}
+
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* TEXT */
.input-text {
diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css
index 8d4a5ae..815e48a 100644
--- a/client/cssFiles/SEAWebClientMain.css
+++ b/client/cssFiles/SEAWebClientMain.css
@@ -153,6 +153,27 @@ meta, body {
height: 50%;
}
+/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
+/* PANEL */
+.panel {
+ background-color: #303030;
+ /* position: absolute; */
+ z-index: 20;
+ width: 100%;
+ height: 30px;
+}
+.panel:not(.graphics) {
+ color: white;
+ text-align: center;
+ padding: 6px 6px 6px 6px;
+}
+
+.panel.graphics{
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 12px;
+}
+
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* CLOSE CROSS */
diff --git a/client/cssFiles/SEAWebClientSwiper.css b/client/cssFiles/SEAWebClientSwiper.css
index a535b2d..48ca40a 100644
--- a/client/cssFiles/SEAWebClientSwiper.css
+++ b/client/cssFiles/SEAWebClientSwiper.css
@@ -1,5 +1,7 @@
@CHARSET "UTF-8";
+/* This file is obsolete because the swoiper was removed */
+
.swiper-container-main {
width: 100%;
height: 100%;
diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js
index 755c3d7..b85cfa8 100644
--- a/client/jsFiles/SEAWebClientCommunication.js
+++ b/client/jsFiles/SEAWebClientCommunication.js
@@ -1,9 +1,6 @@
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % COMMUNICATION
-// local debugging: print the name of every executed funtion to the console
-var debug_communication_daniel = 0;
-
var timeoutID; // We need this ID to reset the timer every 30 seconds
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -11,10 +8,6 @@ var timeoutID; // We need this ID to reset the timer every 30 seconds
function buildUpdateConnection() {
- if (debug_communication_daniel) {
- console.log("%cfunction: buildUpdateConnection", "color:white;background:darkblue");
- }
-
// Establishes server-sent-event-connection, which is used for all sorts of
// updates and exists as long as the client is running.
// Executed at program start (see also SEAWebClientMain.js).
@@ -62,12 +55,7 @@ function buildUpdateConnection() {
}
function handleUpdateMessage(src, message) {
- if (debug_communication_daniel) {
- console.log("%cfunction: handleUpdateMessage", "color:white;background:darkblue");
- }
-
// Handles incoming SSE-messages depending on type of message.
-
if (debugCommunication > 1) {
console.log("%cfrom server (SSE): " + message.type,
"color:white;background:lightgray", message);
@@ -183,10 +171,6 @@ function handleUpdateMessage(src, message) {
}
function htmlEscape(str) {
- if (debug_communication_daniel) {
- console.log("%cfunction: htmlEscape", "color:white;background:darkblue");
- }
-
str = "" + str;
if (!str) return "";
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g,
@@ -194,10 +178,6 @@ function htmlEscape(str) {
}
function resetTimer(src) {
- if (debug_communication_daniel) {
- console.log("%cfunction: resetTimer", "color:white;background:darkblue");
- }
-
// Executed every time a heartbeat-message is obtained.
// If no heartbeat-messages are obtained for a certain amount of time,
// an error-message is thrown.
@@ -213,10 +193,6 @@ function resetTimer(src) {
}
function updateValues(message, src) {
- if (debug_communication_daniel) {
- console.log("%cfunction: updateValues", "color:white;background:darkblue");
- }
-
// Handles changes of parameter-values
for (var i = 0; i < message.updates.length; i++) {
let component = message.updates[i];
@@ -226,12 +202,17 @@ function updateValues(message, src) {
// Check for status updates
if (component.name.split(":")[1] == 'status') {
updateStatus(component);
-
}
for (var j = 0; j < matches.length; j++) {
let elem = matches[j];
let type = elem.__ctype__; // -> Show Dom-Properties
+
+ // let text = htmlEscape(component.formatted);
+ // if (text) {
+ // elem.innerHTML = text;
+ // }
+
if (type == "rdonly" || type == "rdlink") {
let text = htmlEscape(component.formatted);
if (text) {
@@ -268,9 +249,6 @@ function updateValues(message, src) {
}
function updateStatus(component) {
- if (debug_communication_daniel) {
- console.log("%cfunction: updateStatus", "color:white;background:darkblue");
- }
let matches = document.getElementsByName(component.name);
let status_icon = matches[0];
let row = status_icon.closest(".row");
@@ -310,10 +288,6 @@ function updateStatus(component) {
// XMLHttpRequest
function reqJSON(s, url, successHandler, errorHandler) {
- if (debug_communication_daniel) {
- console.log("%cfunction: reqJSON", "color:white;background:darkblue");
- }
-
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
if (debugCommunication) {
@@ -340,10 +314,6 @@ function reqJSON(s, url, successHandler, errorHandler) {
}
function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
- if (debug_communication_daniel) {
- console.log("%cfunction: reqJSONPOST", "color:white;background:darkblue");
- }
-
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
if (debugCommunication) {
@@ -370,12 +340,7 @@ function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
xhr.send(parameters);
}
-
function successHandler(s, message) {
- if (debug_communication_daniel) {
- console.log("%cfunction: successHandler", "color:white;background:darkblue");
- }
-
// Handles incoming XMLHttp-messages depending on type of message.
if (debugCommunication) {
console.log("%cfrom server (reqJSON): " + message.type,
@@ -386,12 +351,12 @@ function successHandler(s, message) {
case "draw":
if (message.path == "main") {
// Happens only initially or at device change.
- appendToGridElement(1, message.title, "main", createContent(1, message));
- appendToGridElement(2, "", "parameters", createContent(2, {components:[]}));
+ appendToGridElement(1, message.title, "main", createContent(message));
+ // appendToGridElement(2, "", "parameters", createContent({components:[]}));
} else {
// In the module-block a parameter was selected
// -> write parameter-block to grid-element2
- isl = appendToGridElement(2, message.title, 'parameters', createContent(2, message));
+ isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
if (nColumns == 1) {
elements[1].style.display = "none"; // hide modules
elements[2].style.display = "inline-block"; // show parameters
@@ -487,10 +452,6 @@ function successHandler(s, message) {
}
function errorHandler(status) {
- if (debug_communication_daniel) {
- console.log("%cfunction: errorHandler", "color:white;background:darkblue");
- }
-
if (debugCommunication) {
console.log("error", status);
}
diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js
index 518d60c..a6aeebb 100644
--- a/client/jsFiles/SEAWebClientGraphics.js
+++ b/client/jsFiles/SEAWebClientGraphics.js
@@ -1021,17 +1021,6 @@ let graphs = (function (){
let f = 0;
appendToGridElement(f, " ", "graphics", container);
- // let currentSwiper = swiper[f];
-
- // function setSlidingMode(mode) {
- // currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
- // }
-
- // currentSwiper.enableSwiping(false);
- // currentSwiper.on('reachBeginning', function () {
- // currentSwiper.enableSwiping(false);
- // })
-
let graphicsPanel = container.parentNode.querySelector('.panel')
graphicsPanel.classList.add('graphics');
graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js
index 3572f62..509a9be 100644
--- a/client/jsFiles/SEAWebClientGroup.js
+++ b/client/jsFiles/SEAWebClientGroup.js
@@ -1,37 +1,23 @@
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % GROUP
-// local debugging: print the name of every executed funtion to the console
-var debug_group_daniel = 0;
-
var writePermissionTimeout; // Sets writePermission to 'false,
// restarts by user-interaction.
var prompt = false // True while a prompt is opened.
function getGroup(s, name) {
- if (debug_group_daniel) {
- console.log("%cfunction: getGroup", "color:white;background:salmon");
- }
console.log('name: ',name, ', id: '.ClientID);
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
+ "&id=" + clientID, successHandler, errorHandler);
}
function sendCommand(s, command) {
- if (debug_group_daniel) {
- console.log("%cfunction: sendCommand", "color:white;background:salmon");
- }
-
reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
+ "&id=" + clientID, successHandler, errorHandler);
}
-function createContent(s, message) {
- if (debug_group_daniel) {
- console.log("%cfunction: createContent", "color:white;background:salmon");
- }
-
+function createContent(message) {
// Depending on the message received from the server the content of the
// group is created dynamically. Handles draw-message.
@@ -42,110 +28,37 @@ function createContent(s, message) {
var component = message.components[i];
if (!("title" in component))
component.title = component.name;
- if (!("command" in component))
+ if (!("command" in component))
component.command = component.name;
- createFunc = window['create_' + component.type + '_row']
- if (createFunc) {
- let row = createFunc(s, component);
+
+ 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 gotoGroups(slideNames) {
- if (debug_group_daniel) {
- console.log("%cfunction: gotoGroups", "color:white;background:salmon");
- }
+/* ---------------------------------------------------------------------------------- */
- slideNames = slideNames.split("%20");
- var l = Math.min(MAXBLOCK,slideNames.length);
- document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
- for (var s=0; s" + clientTitle
+ // + ".
"
+ // + "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";
+ }
}
- // Creates row-element containing a push button
+ 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.
"
+ + "Hint: press ESC for leaving a field unchanged."
+ + "You are connected with " + clientTitle + ".
"
+ + "Are you sure you want to change the value of
"
+ + name + " from " + actualValue
+ + " to " + value + "?", 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 " + clientTitle
+ // + ".
"
+ // + "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 " + clientTitle
+ // + ".
"
+ // + "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 " + clientTitle
+ + ".
"
+ + "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);
@@ -204,19 +434,10 @@ function create_pushbutton_row(s, component) {
return row;
}
-function create_input_row(s, component) {
- if (debug_group_daniel) {
- console.log("%cfunction: create_input_row", "color:white;background:salmon");
- }
-
+function create_input_row(component) {
// Creates row-element containing input-item.
-
var name = component.name;
var command = component.command;
-
- if (component.info) {
- var infoBox = createInfo(component);
- }
var left = createTitle(component);
var input = createParElement(component, 'input', 'input-text');
@@ -329,50 +550,26 @@ function create_input_row(s, component) {
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 resizeTextfield(input) {
- if (debug_group_daniel) {
- console.log("%cfunction: resizeTextfield", "color:white;background:salmon");
- }
-
- 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";
+ function posTextfield(s, left) {
+ if (debug_group_daniel) {
+ console.log("%cfunction: posTextfield", "color:white;background:salmon");
}
- } else {
- input.style.width = "100px";
+
+ // 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(s, component) {
- if (debug_group_daniel) {
- console.log("%cfunction: create_checkbox_row", "color:white;background:salmon");
- }
-
+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();
@@ -434,21 +631,13 @@ function create_checkbox_row(s, component) {
return appendToContent(component, left, right);
}
-function create_enum_row(s, component) {
- if (debug_group_daniel) {
- console.log("%cfunction: create_enum_row", "color:white;background:salmon");
- }
-
+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;
}
@@ -496,11 +685,75 @@ function create_enum_row(s, component) {
return appendToContent(component, left, right);
}
-function createTitle(component, modules) {
- if (debug_group_daniel) {
- console.log("%cfunction: createTitle", "color:white;background:salmon");
+// ...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
@@ -538,10 +791,7 @@ function createTitle(component, modules) {
return left;
}
-function createParElement(component, tag='span', cls='col-right') {
- if (debug_group_daniel) {
- console.log("%cfunction: createParElement", "color:white;background:salmon");
- }
+function createParElement(component, tag='span', cls='col-right-modules') {
var right = document.createElement(tag);
if (cls)
right.classList.add(cls);
@@ -549,35 +799,13 @@ function createParElement(component, tag='span', cls='col-right') {
right.setAttribute('name', component.name);
// Add DOM-property
right.__ctype__ = component.type;
+ right.classList.add(component.type);
return right;
}
-function createInfo(component) {
- if (debug_group_daniel) {
- console.log("%cfunction: createInfo", "color:white;background:salmon");
- }
-
- // 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 appendToContent(component, left, right) {
- if (debug_group_daniel) {
- console.log("%cfunction: appendToContent", "color:white;background:salmon");
- }
-
+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) {
@@ -585,15 +813,28 @@ function appendToContent(component, left, right) {
}
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) {
- if (debug_swiper_daniel) {
- console.log("%cfunction: appendToGridElement", "color:white;background:lightblue");
- console.log("title: ",title);
- }
+/* ---------------------------------------------------------------------------------- */
+function appendToGridElement(s, title, type, content) {
var panel = document.createElement('div');
panel.classList.add("panel");
@@ -612,3 +853,17 @@ function appendToGridElement(s, title, type, content) {
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";
+ }
+}
diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js
index c155213..ce0f181 100644
--- a/client/jsFiles/SEAWebClientMain.js
+++ b/client/jsFiles/SEAWebClientMain.js
@@ -1,9 +1,6 @@
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % INIT
-// local debugging: print the name of every executed funtion to the console
-var debug_main_daniel = 0;
-
var MAXBLOCK = 4; // max number of blocks
var elements = []; // grid elements
var swiper = []; // This array contains main-swiper-Instances.
@@ -21,10 +18,6 @@ var firstState = 0;
var showParams = false;
function Settings() {
- if (debug_main_daniel) {
- console.log("%cfunction: Settings", "color:white;background:limegreen");
- }
-
// get key/value pairs from search part of the URL and fill into query
var qstr = location.search;
// console.log(qstr);
@@ -70,10 +63,6 @@ function Settings() {
}
function to_bool(string) {
- if (debug_main_daniel) {
- console.log("%cfunction: to_bool", "color:white;background:limegreen");
- }
-
// everything else than false, 0 or an empty string is considered as true
return !/^(false|FALSE|False|0|)$/.test(string);
}
@@ -107,10 +96,6 @@ if (window.instrument) {
// console.log('TAGS', window.clientTags);
function loadFirstBlocks() {
- if (debug_main_daniel) {
- console.log("%cfunction: loadFirstBlocks", "color:white;background:limegreen");
- }
-
if (showMain) pushInitCommand("getblock?path=main&", "main")
if (showConsole) pushInitCommand("console?", "console")
if (nColumns == 1) { // probably mobile phone}
@@ -130,10 +115,6 @@ function loadFirstBlocks() {
}
function nextInitCommand() {
- if (debug_main_daniel) {
- console.log("%cfunction: nextInitCommand", "color:white;background:limegreen");
- }
-
// do the next init request
if (initCommands.length > 0) {
next = initCommands.shift();
@@ -146,19 +127,26 @@ function nextInitCommand() {
var loadingScreen = document.getElementsByClassName("loading-div")[0];
loadingScreen.style.display = "none";
loadingShown = false;
- if (location.hash) { // there was a #hash part
- var slideNames = location.hash.substr(1);
- gotoGroups(slideNames);
- }
+ /* Not working without swiper, necessary??? */
+ // if (location.hash) { // there was a #hash part
+ // var slideNames = location.hash.substr(1);
+ // gotoGroups(slideNames);
+ // }
console.log("loading finished");
+
+ // function gotoGroups(slideNames) {
+
+ // slideNames = slideNames.split("%20");
+ // var l = Math.min(MAXBLOCK,slideNames.length);
+ // document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
+ // for (var s=0; s