From d6a69ba05e622874d7a53a00e2b13b9e1eab0ad7 Mon Sep 17 00:00:00 2001
From: Daniel <mail@codecupkunst.de>
Date: Mon, 5 May 2025 10:17:35 +0200
Subject: [PATCH] Prepare radio-button-group

---
 client/cssFiles/SEAWebClientGroup.css       | 16 +++++--
 client/jsFiles/SEAWebClientCommunication.js | 14 +++---
 client/jsFiles/SEAWebClientGroup.js         | 48 ++++++++++++++++++---
 3 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css
index 706ab9e..5b5c8eb 100644
--- a/client/cssFiles/SEAWebClientGroup.css
+++ b/client/cssFiles/SEAWebClientGroup.css
@@ -48,7 +48,7 @@
 }
 
 .row-waiting-for-answer {
-	background-color: LightGoldenrodYellow;
+	background-color: orangered;
 }
 
 /* ------------------------------ icon-modules ------------------------------ */
@@ -143,12 +143,22 @@
 /* ------------------------------ pushbutton ------------------------------ */
 
 .push-button-active {
-	text-decoration: underline;
+	display: inline-block;
+	height: 20px;
+	padding: 0 4px 0 4px;
+	border-radius: 6px;
 	cursor: pointer;
+	text-align: center;
+	/* border: 1px solid #303030; */
+	color: #303030;
+	background: #dddddd;
+
+	/* box-shadow: 2px 4px 4px lightgray; */
 }
 
 .push-button-active:hover {
-	color: blue;
+	background: whitesmoke;
+	/* box-shadow: 1px 2px 2px dimgray; */
 }
 
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js
index 3c89899..5974359 100644
--- a/client/jsFiles/SEAWebClientCommunication.js
+++ b/client/jsFiles/SEAWebClientCommunication.js
@@ -300,13 +300,13 @@ function updateValue(component) {
             let row = elem.closest('div');
             row.classList.remove('row-waiting-for-answer');
         
-            let options = elem.childNodes;
-            for (var j = 0; j < options.length; j++) {
-                if (options[j].label == component.value) {
-                    elem.value = j + 1;
-                }
-            }
-        } else if (type == "pushbutton") {
+            // let options = elem.childNodes;
+            // for (var j = 0; j < options.length; j++) {
+            //     if (options[j].label == component.value) {
+            //         elem.value = j + 1;
+            //     }
+            // }
+            elem.value = component.value;
             console.log('update pushbutton');
             console.log('component.name:', component.name);
             console.log('element', elem);
diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js
index 560b68d..30ca0a1 100644
--- a/client/jsFiles/SEAWebClientGroup.js
+++ b/client/jsFiles/SEAWebClientGroup.js
@@ -1,4 +1,4 @@
-var writePermission = false;
+var writePermission = true;
 var showParams = false;
 var showConsole = false;
 var prompt = false // True while a prompt is opened.
@@ -188,7 +188,7 @@ function createRightColumnForModules(component) {
             component.type == 'checkbox' ||
             component.type == 'enum'
         ) {
-            let input_element = createType(component);
+            let input_element = chooseTypeOfInput(component);
             let icon_edit = createIconEdit(input_element);
             right.appendChild(icon_edit);
             right.appendChild(input_element);
@@ -208,7 +208,7 @@ function createRightColumnForParameters(component) {
         component.type == 'checkbox' ||
         component.type == 'enum'
     ) {
-        let input_element = createType(component);
+        let input_element = chooseTypeOfInput(component);
         let icon_edit = createIconEdit(input_element);
         right.appendChild(icon_edit);
         right.appendChild(input_element);
@@ -255,7 +255,7 @@ function createIconEdit (input_element) {
     return icon_edit;
 }
 
-function createType (component) {
+function chooseTypeOfInput (component) {
     let input_element;
     switch (component.type) {
         case 'enum':
@@ -337,13 +337,13 @@ function createInputText(component) {
 
 function createCheckbox(component) {
     // Creates row-element containing checkbox-item
-    var input = createInputElement(component, 'input', 'parameter-checkbox');
+    let input = createInputElement(component, 'input', 'parameter-checkbox');
     input.type = "checkbox";
     input.onclick = function (e) {
         e.stopPropagation;
     }
 
-    var form = document.createElement('form');
+    let form = document.createElement('form');
     form.onsubmit = function (e) {
         e.preventDefault();
         var row = form.closest('div');
@@ -389,6 +389,42 @@ function createEnum(component) {
     return right;
 }
 
+function createRadio(component) {
+    
+    console.log(component);
+    let array_names = component.enum_names;
+
+    let form  = createInputElement(component, 'form', 'radio-button-group');
+    form.onsubmit = function (e) {
+        e.preventDefault();
+        var row = form.closest('div');
+        row.classList.add('row-waiting-for-answer');
+        sendCommand(s, component.command + " " + 'on');
+        hideInputElements();
+    };
+
+    for (var i = 0; i < array_names.length; i++) {
+        let label = document.createElement('label');
+        label.setAttribute('for', array_names[i].title);
+        label.innerHTML = array_names[i].title;
+
+        let radio = document.createElement('input');
+        radio.setAttribute('type', 'radio');
+        radio.classList.add("radio");
+        radio.setAttribute('id', array_names[i].title);
+        radio.setAttribute('name', component.name);
+        radio.onclick = function(e) {
+            e.stopPropagation();
+        }
+
+        form.appendChild(label);
+        form.appendChild(radio);
+    }
+    
+    form.appendChild(createSubmitButton());
+    return form;
+}
+
 function createInputElement(component, tag='span', cls='col-right-modules') {
     var input_element = document.createElement(tag);
     input_element.classList.add('col-right');