status-icon with statuscode, use entire row as link to parameters

client/SEAWebClient.html

@@ -33,7 +33,7 @@
 <script src="components/states_indicator/dates/dates.js"></script>
 
 <!-- CSS-Files -->
-<!-- <link rel="stylesheet" href="externalFiles/alertify.css"> -->
+<link rel="stylesheet" href="externalFiles/alertify.css">
 <!-- <link rel="stylesheet" href="externalFiles/swiper-bundle.min.css"> -->
 <link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css">
 <link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">

client/cssFiles/SEAWebClientGroup.css

@@ -41,6 +41,20 @@
 	position: relative;
 }
 
+.row-clickable {
+	cursor: pointer;
+}
+
+.row-clickable:hover {
+	background-color:WhiteSmoke;
+	opacity: .7;
+}
+
+.row-disabled {
+	opacity: .3;
+	/* background-color: lightgray; */
+}
+
 .clickable:hover {
 	background-color: lightgray;
 }
@@ -78,6 +92,10 @@
 	float: right;
 }
 
+.col-right-disabled {
+	display: none;
+}
+
 .modules-title {
 	display: inline-block;
 	min-width: 120px;
@@ -88,17 +106,25 @@
 	width: 16px;
 	height: 16px;
 	line-height: 16px;
-	margin-left: 4px;
+	margin-right: 4px;
 	opacity: .8;
 }
 
 .status-icon {
 	border-radius: 50%;
-	background-color: dimgray;
+	background-color: lightgray;
 	opacity: .8;
 	/* box-shadow: -2px -2px 5px inset; */
 }
 
+.status-icon-idle {
+	background-color: lightgray;
+}
+
+.status-icon-idle {
+	background-color: white;
+}
+
 .status-icon-busy {
 	background-color: yellow;
 }

client/cssFiles/SEAWebClientMain.css

@@ -136,6 +136,20 @@ meta, body {
 	overflow: hidden;
 }
 
+.grid-element-3 {
+	position: absolute;
+	display: block;
+	bottom: 0;
+	width: 100%;
+	height: 0;
+	opacity: .9;
+	z-index: 1000;
+}
+
+.grid-element-3-visible {
+	height: 50%;
+}
+
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* CLOSE CROSS */
 
@@ -161,7 +175,7 @@ meta, body {
 /* LOG ICON */
 
 #log-icon-container {
-	z-index: 50;
+	z-index: 1001;
 	bottom: 9px;
 	right: 12px;
 	position: fixed;

client/jsFiles/SEAWebClientCommunication.js

@@ -218,12 +218,16 @@ function updateValues(message, src) {
     }
 
     // Handles changes of parameter-values
-
     for (var i = 0; i < message.updates.length; i++) {
         let component = message.updates[i];
         let value = component.value;
         let matches = document.getElementsByName(component.name);
-        console.log(component);
+        
+        // Check for status updates
+        if (component.name.split(":")[1] == 'status') {
+            updateStatus(component);
+
+        }
 
         for (var j = 0; j < matches.length; j++) {
             let elem = matches[j];
@@ -263,6 +267,39 @@ 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");
+    let right = row.lastChild;
+    right.classList.remove('col-right-disabled');
+    let statusCode = component.statuscode;
+    switch (statusCode) {
+        case 0:
+            status_icon.classList.add('status-icon-disabled');
+            row.classList.add('row-disabled');
+            right.innerHTML = 'col-right-disabled';
+            break;
+        case 1:
+            status_icon.classList.add('status-icon-idle');
+            break;
+        case 2:
+            status_icon.classList.add('status-icon-warn');
+            break;
+        case 3:
+            status_icon.classList.add('status-icon-busy');
+            break;
+            case 3:
+            status_icon.classList.add('status-icon-error');
+            break;
+    }
+
+}
+
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // XMLHttpRequest
 

client/jsFiles/SEAWebClientGroup.js

@@ -46,11 +46,13 @@ 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)
+        if (createFunc) {
-            content.appendChild(createFunc(s, component))
+            let row = createFunc(s, component);
+            content.appendChild(row);
+        }
     }
     return content;
 }
@@ -74,7 +76,6 @@ function create_group_row(s, component) {
     }
 
     // Creates row-element containing link.
-
     var title = component.title;
 
     var row = document.createElement('row');
@@ -148,11 +149,12 @@ function create_rdlink_row(s, component) {
     var left = createTitle(component, 1);
     left.id = component.name;
     left.name = component.title;  // or setAttribute('name'.. ?
-
+    let row = appendToContent(component, left, createParElement(component));
-    // left.onclick = function () {
+    row.onclick = function () {
-    //     getGroup(s, component.title);
+            getGroup(s, component.title);
-    // }
+    }
-    return appendToContent(component, left, createParElement(component));
+    row.classList.add('row-clickable');
+    return row;
 }
 
 function create_pushbutton_row(s, component) {
@@ -338,9 +340,11 @@ function posTextfield(s, left) {
         console.log("%cfunction: posTextfield", "color:white;background:salmon");
     }
 
-    var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
+    // var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
-    var row = left.parentNode;
+    // var row = left.parentNode;
-    content.scrollTop = row.offsetTop - 30;
+    // content.scrollTop = row.offsetTop - 30;
+
+    // ---------------------> Not working anymore since swiper was removed!!!
 }
 
 function resizeTextfield(input) {
@@ -506,35 +510,29 @@ function createTitle(component, modules) {
     // At the modules-block a status-icon is added
 
     var left = document.createElement('span');
-    // var status_icon =  document.createElement('p');
+    // if (component.info) {
-    // status_icon.classList.add("status-icon");
+    //     left.classList.add("col-left", "event-toggle-info");
-    if (component.info) {
-        left.classList.add("col-left", "event-toggle-info");
 
-        left.onclick = function () {
+    //     left.onclick = function () {
-            var infoBox = left.parentNode.childNodes[0];
+    //         var infoBox = left.parentNode.childNodes[0];
-            if (infoBox.style.display == "none") {
+    //         if (infoBox.style.display == "none") {
-                infoBox.style.display = "block";
+    //             infoBox.style.display = "block";
-            } else {
+    //         } else {
-                infoBox.style.display = "none";
+    //             infoBox.style.display = "none";
-            }
+    //         }
-        }
+    //     }
 
-        left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
+    //     left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
-    }
+    // }
 
     var title = component.title;
     if (modules) {
-        var icon_status = '<img class = "modules-icon status-icon" src="res/icon_status.png">';
+        var icon_status = '<img name = ' + title + ':status class = "modules-icon status-icon" src="res/icon_status.png">';
-        var icon_edit   = '<img class = "modules-icon edit-icon" src="res/icon_edit.png">';
-        var icon_info   = '<img class = "modules-icon info-icon" src="res/icon_info.png" onclick = getGroup(1,"' + title + '")>';
 
-        left.innerHTML = '<span class = "modules-title">' + component.title + '</span>';
         if (component.statusname) {
-            left.innerHTML += icon_status;
+            left.innerHTML = icon_status;
         }
-        left.innerHTML += icon_edit;
+        left.innerHTML += '<span class = "modules-title">' + component.title + '</span>';
-        left.innerHTML += icon_info;
     } else {
         left.innerHTML = component.title;
     }
@@ -587,6 +585,7 @@ function appendToContent(component, left, right) {
         row.appendChild(createInfo(component));
     }
     row.appendChild(left);
+    console.log(component);
     row.appendChild(right);
     return row;
 }

client/jsFiles/SEAWebClientMain.js

@@ -86,7 +86,6 @@ new Settings()
     .treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
     .treat("showMain", "sm", to_bool, true)
     .treat("showConsole", "sc", to_bool, true)
-    .treat("showOverview", "so", to_bool, false)
     .treat("showGraphics", "sg", to_bool, true) // false)
     .treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
     .treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
@@ -116,7 +115,6 @@ function loadFirstBlocks() {
     if (showConsole) pushInitCommand("console?", "console")
     if (nColumns == 1) { // probably mobile phone}
         if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
-        if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
         var goFS = document.getElementById('header');
         goFS.addEventListener(
             'click',
@@ -126,7 +124,6 @@ function loadFirstBlocks() {
             false,
         );
     } else {
-        if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
         if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
         // last is shown first
     }
@@ -196,14 +193,26 @@ window.onload = function() {
                 document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_modules.png">';
             }
         }
+        if (elements[0].style.display == "inline-block") {          // only graphics is visible
+                elements[0].style.display = "none";                         // hide graphics
+                elements[1].style.display = "inline-block";                 // show modules
+                elements[2].style.display = "none";                         // hide parameters
+            } else if (elements[1].style.display == "inline-block") {   // only modules are visible
+                elements[0].style.display = "inline-block";                 // show graphics
+                elements[1].style.display = "none";                         // hide modules
+                elements[2].style.display = "none";                         // hide parameters
+            } else if (elements[2].style.display == "inline-block") {   // only parameters are visible
+                elements[0].style.display = "none";                         // hide graphics
+                elements[1].style.display = "inline-block";                 // show modules
+                elements[2].style.display = "none";                         // hide parameters
+            }
         adjustGrid();
       }
     }
 
     let logIcon = document.getElementById("log-icon-container");
     logIcon.onclick = function(){
-        console.log("show log");
+        elements[3].classList.toggle('grid-element-3-visible');
-        adjustGrid();
       }
 
     var homeButton = document.getElementById("home-icon");

client/jsFiles/SEAWebClientResponsivity.js

@@ -22,6 +22,7 @@ function createGrid() {
     for (var i = 0; i < 4; i++) {
         var element = document.createElement('div');
         element.classList.add("grid-element");
+        element.classList.add("grid-element-"+i);
         document.getElementById("center").appendChild(element);
         elements.push(element);
     }
@@ -86,34 +87,22 @@ function adjustGrid() {
         style(0,"100vw","100vh");
         style(1); // hide
         style(2); // hide
-        style(3); // hide
+        // style(3); // hide
-        return
+        return;
     }
 
     switch (nColumns) {
     case 1:
         if (menuMode) {
             leftWidth = Math.min(100, MINWIDTH / width * 100);
-            style(0,leftWidth + "vw","100vh");
+            style(1,leftWidth + "vw","100vh");
         } else {
             // we may want to switch to 90vh on safari ios (workaround)
-            style(0,"100vw","100vh");
+            style(0); // hide
+            style(1,"100vw","100vh");
+            style(2); // hide
+            // style(3); // hide
         }    
-
-
-        if (elements[0].style.display == "inline-block") {          // only graphics is visible
-            elements[0].style.display = "none";                         // hide graphics
-            elements[1].style.display = "inline-block";                 // show modules
-            elements[2].style.display = "none";                         // hide parameters
-        } else if (elements[1].style.display == "inline-block") {   // only modules are visible
-            elements[0].style.display = "inline-block";                 // show graphics
-            elements[1].style.display = "none";                         // hide modules
-            elements[2].style.display = "none";                         // hide parameters
-        } else if (elements[2].style.display == "inline-block") {   // only parameters are visible
-            elements[0].style.display = "none";                         // hide graphics
-            elements[1].style.display = "inline-block";                 // show modules
-            elements[2].style.display = "none";                         // hide parameters
-        }
         break;
     case 2:
         rightWidth = Math.min(50, MINWIDTH / width * 100);
@@ -123,25 +112,29 @@ function adjustGrid() {
                 style(0,leftWidth + "vw","100vh");
                 style(1); // hide
                 style(2,rightWidth + "vw","100vh");
-                style(3); // hide
+                // style(3); // hide
             } else {
                 style(0,leftWidth + "vw","100vh");
                 style(1,rightWidth + "vw","100vh");
                 style(2); // hide
-                style(3); // hide
+                // style(3); // hide
             }
         } else {
-            if (showParams) {
+            // if (showParams) {
-                style(0,leftWidth + "vw","100vh");
+            //     style(0,leftWidth + "vw","100vh");
-                style(1); // hide
+            //     style(1); // hide
-                style(2,rightWidth + "vw","50vh");
+            //     style(2,rightWidth + "vw","50vh");
-                style(3,rightWidth + "vw","50vh");
+            //     style(3,rightWidth + "vw","50vh");
-            } else {
+            // } else {
-                style(0,leftWidth + "vw","100vh");
+            //     style(0,leftWidth + "vw","100vh");
-                style(1,rightWidth + "vw","50vh");
+            //     style(1,rightWidth + "vw","50vh");
-                style(2); // hide
+            //     style(2); // hide
-                style(3,rightWidth + "vw","50vh");
+            //     style(3,rightWidth + "vw","50vh");
-            }
+            // }
+            style(0,leftWidth + "vw","100vh");
+            style(1,rightWidth + "vw","50vh");
+            style(2,rightWidth + "vw","50vh");
+            // style(3); // hide
         }
          break;
     case 3:
@@ -152,46 +145,50 @@ function adjustGrid() {
                 style(0,leftWidth + "vw","100vh");
                 style(1); // hide
                 style(2,rightWidth + "vw","100vh");
-                style(3); // hide
+                // style(3); // hide
             } else {
                 style(0,leftWidth + "vw","100vh");
                 style(1,rightWidth + "vw","100vh");
                 style(2); // hide
-                style(3); // hide
+                // style(3); // hide
             }
         } else {
-            if (showParams) {
+        //     if (showParams) {
-                style(0,leftWidth + "vw","100vh");
+        //         style(0,leftWidth + "vw","100vh");
-                style(1); // hide
+        //         style(1); // hide
-                style(2,rightWidth + "vw","50vh");
+        //         style(2,rightWidth + "vw","50vh");
-                style(3,rightWidth + "vw","50vh");
+        //         style(3,rightWidth + "vw","50vh");
-            } else {
+        //     } else {
-                style(0,leftWidth + "vw","100vh");
+        //         style(0,leftWidth + "vw","100vh");
-                style(1,rightWidth + "vw","50vh");
+        //         style(1,rightWidth + "vw","50vh");
-                style(2); // hide
+        //         style(2); // hide
-                style(3,rightWidth + "vw","50vh");
+        //         style(3,rightWidth + "vw","50vh");
-            }
+        //     }
+            style(0,leftWidth + "vw","100vh");
+            style(1,rightWidth + "vw","50vh");
+            style(2,rightWidth + "vw","50vh");
+            // style(3); // hide
         }
         break;
     case 4:
         rightWidth = MINWIDTH / width * 100;
         leftWidth = 100 - 2 * rightWidth;
-        if (nRows == 1 || !window['showConsole']) {
+        // if (nRows == 1 || !window['showConsole']) {
             style(0,leftWidth + "vw","100vh");
             style(1,rightWidth + "vw","100vh");
-            if (window['showConsole']) {
+            // if (window['showConsole']) {
-              style(2); // hide
+            //   style(2); // hide
-              style(3,rightWidth + "vw","100vh");
+            //   style(3,rightWidth + "vw","100vh");
-            } else {
+            // } else {
               style(2,rightWidth + "vw","100vh");
-              style(3); // hide
+            //   style(3); // hide
-            }
+            // }
-        } else {
+        // } else {
-            style(0,leftWidth + "vw","100vh");
+        //     style(0,leftWidth + "vw","100vh");
-            style(1,rightWidth + "vw","50vh");
+        //     style(1,rightWidth + "vw","50vh");
-            style(2,rightWidth + "vw","50vh");
+        //     style(2,rightWidth + "vw","50vh");
-            style(3,(2 * rightWidth) + "vw","50vh");
+        //     style(3,(2 * rightWidth) + "vw","50vh");
-        }
+        // }
         break;
     default:
         break;