more styling

data/scripts.js

@@ -113,7 +113,7 @@ var $ = function(selector){
                                 actuator.data.call(this) : [this.value]
                         );
                     }
-                    $(domEl).on(actuator.event, handle) 
+                    domEl.addEventListener(actuator.event, handle) 
                 });
             };
         },
@@ -163,31 +163,46 @@ var $ = function(selector){
         }
     };Sui.ready(() => {
     let debugResponse = (data) => {
-        document.querySelector('#response').html(data);
+        document.querySelector('#response').innerHTML = data;
     };
+    
+    // init collapsible containers
     Sui.select('.collapsible').forEach((container) => {
         container.querySelector('.heading').addEventListener('click', (item) => {
             container.classList.toggle('open');
         });
     });
+    
+    // init actuators
     [{
         api: 'MOTOR',
         method: 'POST',
-        selector: '.motor.slider',
-        event: 'change',
-        data: function() {
-            let payload = {};
-            payload['motor' + this.getAttribute('data-motor-nr')] = this.value;
-            return Sui.util.serialize(payload);
-        },
-        onResponse: debugResponse
-    }, {
-        api: 'LASER',
-        method: 'POST',
-        selector: '.laser.slider',
+        selector: '.slider.motor',
         event: 'change',
         onResponse: debugResponse,
         data: function() {
+            let payload = {},
+                motorValue = this.value,
+                motorNr = this.getAttribute('data-motor-nr'),
+                actuatorId = 'motor' + motorNr;
+            // update actuator value label
+            Sui.select('[data-actuator-id=\"'+ actuatorId + '\"]')
+                .forEach( element => element.innerHTML = motorValue);
+            // add actuator to payload
+            payload[actuatorId] = motorValue;
+            return Sui.util.serialize(payload);
+        }
+    }, {
+        api: 'LASER',
+        method: 'POST',
+        selector: '.slider.laser',
+        event: 'change',
+        onResponse: debugResponse,
+        data: function() {
+            // update actuator value label
+            Sui.select('[data-actuator-id="laser"]')
+                .forEach( element => element.innerHTML = this.value );
+            // return payload
             return Sui.util.serialize({
                 laser: this.value
             });