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

Global write permission | lock button

Browse Source 
+ lock icon added: click -> toggle global write permission
This commit is contained in:
Daniel
2025-04-27 09:36:03 +02:00
parent bd9efaa3de
commit a9ca113f2c
8 changed files with 119 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/SEAWebClient.html
View File

@ -76,12 +76,14 @@
</div>
</div>
<div id="center"></div>
<div id="close-cross">
<!-- &#215; -->
<img class = "icon-close" src="res/icon_sinus.png">
<div class = "icon-close-container icon-main-container">
<img class = "icon-close icon-main" src="res/icon_sinus.png">
</div>
<div class="log-icon-container">
<img class = "log-icon" src="res/icon_log.png">
<div class="icon-log-container icon-main-container">
<img class = "icon-log icon-main" src="res/icon_log.png">
</div>
<div class="icon-lock-container icon-main-container">
<img class = "icon-lock icon-main" src="res/icon_lock_closed.png">
</div>
</body>

32
client/cssFiles/SEAWebClientGroup.css
View File

@ -21,8 +21,6 @@
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* panel */
/* ------------------------------ modules-icons ------------------------------ */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* row */
@ -53,7 +51,9 @@
background-color: orangered;
}
.modules-icon {
/* ------------------------------ icon-modules ------------------------------ */
.icon-modules {
display: inline-block;
width: 12px;
height: 12px;
@ -95,31 +95,31 @@
display: inline-block;
}
/* ------------------------------ status-icon ------------------------------ */
/* ------------------------------ icon-status ------------------------------ */
.status-icon {
.icon-status {
border-radius: 50%;
background-color: lightgray;
margin-right: 4px;
}
.status-icon-idle {
.icon-status-idle {
background-color: lightgray;
}
.status-icon-idle {
.icon-status-idle {
background-color: white;
}
.status-icon-busy {
.icon-status-busy {
background-color: yellow;
}
.status-icon-warn {
.icon-status-warn {
background-color: orange;
}
.status-icon-error {
.icon-status-error {
background-color: red;
}
@ -134,7 +134,7 @@
display: none;
}
.status-icon:hover ~ .status-info {
.icon-status:hover ~ .status-info {
display: inline-block;
}
@ -163,18 +163,22 @@
/* ------------------------------ edit-icon ------------------------------ */
.edit-icon {
.icon-edit {
position: absolute;
top: 4px;
right: 2px;
cursor: pointer;
}
.edit-icon:hover {
.icon-edit:hover {
transform: scale(.8);
opacity: .6;
}
.icon-edit-hidden {
display: none;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* INPUT ELEMENTS */
@ -188,7 +192,7 @@
text-align: right;
}
.input-element-hidden {
.input-element-hidden, .input-element-button-hidden {
display: none;
}

71
client/cssFiles/SEAWebClientMain.css
View File

@ -179,48 +179,57 @@ meta, body {
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* CLOSE CROSS */
/* MAIN ICONS */
#close-cross {
z-index: 50;
top: 9px;
right: 12px;
position: fixed;
cursor: pointer;
}
.icon-close {
height: 20px;
width: 20px;
}
.icon-close:hover {
transform: scale(90%);
transition: .5s;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* LOG ICON */
.log-icon-container {
.icon-main-container {
z-index: 1001;
bottom: 9px;
right: 12px;
position: fixed;
color: white;
cursor: pointer;
}
.log-icon-container-hidden {
display: none;
}
.log-icon {
.icon-main {
height: 20px;
width: 20px;
}
.log-icon:hover {
.icon-main:hover {
transform: scale(90%);
transition: .5s;
}
.icon-main-container-hidden {
display: none;
}
/* ----------------------------------------------------------------------------------------------------- */
/* CLOSE CROSS */
.icon-close-container {
top: 9px;
right: 12px;
}
/* ----------------------------------------------------------------------------------------------------- */
/* LOG ICON */
.icon-log-container {
bottom: 9px;
right: 42px;
}
.icon-log-container-hidden {
display: none;
}
/* ----------------------------------------------------------------------------------------------------- */
/* LOCK ICON */
.icon-lock-container {
bottom: 9px;
right: 12px;
}
.icon-lock-container-hidden {
display: none;
}

22
client/jsFiles/SEAWebClientCommunication.js
View File

@ -239,31 +239,31 @@ function updateStatus(component) {
status_info.innerHTML = component.formatted;
}
status_icon.classList.remove('status-icon-disabled');
status_icon.classList.remove('status-icon-idle');
status_icon.classList.remove('status-icon-warn');
status_icon.classList.remove('status-icon-busy');
status_icon.classList.remove('status-icon-error');
status_icon.classList.remove('icon-status-disabled');
status_icon.classList.remove('icon-status-idle');
status_icon.classList.remove('icon-status-warn');
status_icon.classList.remove('icon-status-busy');
status_icon.classList.remove('icon-status-error');
row.classList.remove('row-disabled');
right.classList.remove = 'col-right-disabled';
switch (statusCode) {
case 0:
status_icon.classList.add('status-icon-disabled');
status_icon.classList.add('icon-status-disabled');
row.classList.add('row-disabled');
right.classList.add = 'col-right-disabled';
break;
case 1:
status_icon.classList.add('status-icon-idle');
status_icon.classList.add('icon-status-idle');
break;
case 2:
status_icon.classList.add('status-icon-warn');
status_icon.classList.add('icon-status-warn');
break;
case 3:
status_icon.classList.add('status-icon-busy');
status_icon.classList.add('icon-status-busy');
break;
case 4:
status_icon.classList.add('status-icon-error');
status_icon.classList.add('icon-status-error');
break;
}
@ -399,7 +399,7 @@ function successHandler(s, message) {
isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
adjustGrid();
if (nColumns == 1 || nColumns == 2 || nColumns == 3) {
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
document.getElementsByClassName('icon-close-container')[0].innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
}
}
nextInitCommand();

10
client/jsFiles/SEAWebClientGroup.js
View File

@ -82,7 +82,7 @@ function createRowForParameters(component) {
break;
case 'pushbutton':
input_element = createPushbutton(component);
input_element.classList.add('input-element-button');
input_element.classList.add('input-element-button', 'input-element-button-hidden');
break;
case 'input':
input_element = createInput(component);
@ -104,7 +104,7 @@ function createRowForParameters(component) {
function createIconEdit () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden');
icon_edit.onclick = function () {
let is_hidden = input_element.classList.contains('input-element-hidden');
@ -156,14 +156,14 @@ function createLeftColumnForModules(component) {
let icon_status = document.createElement('img');
icon_status.setAttribute('src', 'res/icon_status.png');
icon_status.setAttribute('name', component.title + ':status');
icon_status.classList.add('modules-icon', 'status-icon');
icon_status.classList.add('icon-modules', 'icon-status');
return icon_status;
}
function createInfoIcon(component) {
let icon_info = document.createElement('img');
icon_info.setAttribute('src', 'res/icon_info.png');
icon_info.classList.add('modules-icon', 'icon-info');
icon_info.classList.add('icon-modules', 'icon-info');
if (isTouchDevice) {
icon_info.onclick = function (event) {
event.stopPropagation()
@ -206,7 +206,7 @@ function createRightColumnForModules(component) {
function createIconEdit () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden');
icon_edit.onclick = function (event) {
event.stopPropagation()

48
client/jsFiles/SEAWebClientMain.js
View File

@ -148,32 +148,36 @@ window.onload = function() {
// rows 'n'
adjustGrid();
let crossElement = document.getElementById("close-cross");
/* ----------------------------------------------------------------------------------------------------- */
/* MIAN ICONS */
let icon_close_container = document.getElementsByClassName("icon-close-container")[0];
let icon_log_container = document.getElementsByClassName("icon-log-container")[0];
let icon_lock_container = document.getElementsByClassName("icon-lock-container")[0];
if (window.hideRightPart){
document.body.removeChild(crossElement);
document.body.removeChild(icon_close_container);
} else {
crossElement.onclick = function(){
icon_close_container.onclick = function(){
if (showParams) {
showParams = false;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
} else {
if (window.wideGraphs) {
window.wideGraphs = false;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
document.getElementsByClassName('log-icon-container')[0].classList.remove("log-icon-container-hidden");
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
icon_log_container.classList.remove("icon-main-container-hidden");
} else {
window.wideGraphs = true;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_modules.png">';
document.getElementsByClassName('log-icon-container')[0].classList.add("log-icon-container-hidden");
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_modules.png">';
icon_log_container.classList.add("icon-main-container-hidden");
}
}
adjustGrid();
}
}
let logIcon = document.getElementsByClassName("log-icon-container")[0];
logIcon.onclick = function(){
icon_log_container.onclick = function(){
if (showConsole) {
showConsole = false;
} else {
@ -182,6 +186,30 @@ window.onload = function() {
adjustGrid();
}
icon_lock_container.onclick = function(){
let array_icon_edit = document.getElementsByClassName('icon-edit');
let array_button = document.getElementsByClassName('input-element-button');
if (writePermission == false) {
writePermission = true;
icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
for(i = 0; i < array_icon_edit.length; i++) {
array_icon_edit[i].classList.remove('icon-edit-hidden');
}
for(i = 0; i < array_button.length; i++) {
array_button[i].classList.remove('input-element-button-hidden');
}
} else {
writePermission = false;
icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_closed.png">';
for(i = 0; i < array_icon_edit.length; i++) {
array_icon_edit[i].classList.add('icon-edit-hidden');
}
for(i = 0; i < array_button.length; i++) {
array_button[i].classList.add('input-element-button-hidden');
}
}
}
var homeButton = document.getElementById("home-icon");
homeButton.onclick = function () {

BIN
client/res/icon_lock_closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
client/res/icon_lock_open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB