Global write permission | lock button

+ lock icon added: click -> toggle global write permission

client/SEAWebClient.html

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

client/cssFiles/SEAWebClientGroup.css

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

client/cssFiles/SEAWebClientMain.css

@@ -179,48 +179,57 @@ meta, body {
 }
 
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
-/* CLOSE CROSS */
+/* MAIN ICONS */
 
-#close-cross {
+.icon-main-container {
-	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 {
 	z-index: 1001;
-	bottom: 9px;
-	right: 12px;
 	position: fixed;
 	color: white;
 	cursor: pointer;
 }
 
-.log-icon-container-hidden {
+.icon-main {
-	display: none;
-}
-
-.log-icon {
 	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;
 }

client/jsFiles/SEAWebClientCommunication.js

@@ -239,31 +239,31 @@ function updateStatus(component) {
         status_info.innerHTML = component.formatted;
     }
 
-    status_icon.classList.remove('status-icon-disabled');
+    status_icon.classList.remove('icon-status-disabled');
-    status_icon.classList.remove('status-icon-idle');
+    status_icon.classList.remove('icon-status-idle');
-    status_icon.classList.remove('status-icon-warn');
+    status_icon.classList.remove('icon-status-warn');
-    status_icon.classList.remove('status-icon-busy');
+    status_icon.classList.remove('icon-status-busy');
-    status_icon.classList.remove('status-icon-error');
+    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();

client/jsFiles/SEAWebClientGroup.js

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

client/jsFiles/SEAWebClientMain.js

@@ -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">';
+                icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
-                document.getElementsByClassName('log-icon-container')[0].classList.remove("log-icon-container-hidden");
+                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">';
+                icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_modules.png">';
-                document.getElementsByClassName('log-icon-container')[0].classList.add("log-icon-container-hidden");
+                icon_log_container.classList.add("icon-main-container-hidden");
             }
         }
         adjustGrid();
       }
     }
 
-    let logIcon = document.getElementsByClassName("log-icon-container")[0];
+    icon_log_container.onclick = function(){
-    logIcon.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 () {