linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniel
2025-04-16 13:31:24 +02:00
parent 8747b0e7f8
commit 3be94ba3f6
7 changed files with 184 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/SEAWebClient.html
View File

@ -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">

30
client/cssFiles/SEAWebClientGroup.css
View File

@ -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;
}

16
client/cssFiles/SEAWebClientMain.css
View File

@ -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;

41
client/jsFiles/SEAWebClientCommunication.js
View File

@ -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

65
client/jsFiles/SEAWebClientGroup.js
View File

@ -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)
content.appendChild(createFunc(s, component))
if (createFunc) {
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'.. ?
// left.onclick = function () {
// getGroup(s, component.title);
// }
return appendToContent(component, left, createParElement(component));
let row = appendToContent(component, left, createParElement(component));
row.onclick = function () {
getGroup(s, component.title);
}
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 row = left.parentNode;
content.scrollTop = row.offsetTop - 30;
// 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) {
@ -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');
// status_icon.classList.add("status-icon");
if (component.info) {
left.classList.add("col-left", "event-toggle-info");
// 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.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>";
}
// 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_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 + '")>';
var icon_status = '<img name = ' + title + ':status class = "modules-icon status-icon" src="res/icon_status.png">';
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 += icon_info;
left.innerHTML += '<span class = "modules-title">' + component.title + '</span>';
} 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;
}

19
client/jsFiles/SEAWebClientMain.js
View File

@ -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");
adjustGrid();
elements[3].classList.toggle('grid-element-3-visible');
}
var homeButton = document.getElementById("home-icon");

113
client/jsFiles/SEAWebClientResponsivity.js
View File

@ -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
return
// style(3); // hide
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) {
style(0,leftWidth + "vw","100vh");
style(1); // hide
style(2,rightWidth + "vw","50vh");
style(3,rightWidth + "vw","50vh");
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
}
// if (showParams) {
// style(0,leftWidth + "vw","100vh");
// style(1); // hide
// style(2,rightWidth + "vw","50vh");
// style(3,rightWidth + "vw","50vh");
// } else {
// style(0,leftWidth + "vw","100vh");
// style(1,rightWidth + "vw","50vh");
// style(2); // hide
// 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) {
style(0,leftWidth + "vw","100vh");
style(1); // hide
style(2,rightWidth + "vw","50vh");
style(3,rightWidth + "vw","50vh");
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
}
// if (showParams) {
// style(0,leftWidth + "vw","100vh");
// style(1); // hide
// style(2,rightWidth + "vw","50vh");
// style(3,rightWidth + "vw","50vh");
// } else {
// style(0,leftWidth + "vw","100vh");
// style(1,rightWidth + "vw","50vh");
// style(2); // hide
// 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']) {
style(2); // hide
style(3,rightWidth + "vw","100vh");
} else {
// if (window['showConsole']) {
// style(2); // hide
// style(3,rightWidth + "vw","100vh");
// } else {
style(2,rightWidth + "vw","100vh");
style(3); // hide
}
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2,rightWidth + "vw","50vh");
style(3,(2 * rightWidth) + "vw","50vh");
}
// style(3); // hide
// }
// } else {
// style(0,leftWidth + "vw","100vh");
// style(1,rightWidth + "vw","50vh");
// style(2,rightWidth + "vw","50vh");
// style(3,(2 * rightWidth) + "vw","50vh");
// }
break;
default:
break;