From e41d4a63946d1e317c3cf5435c0c695db9342f57 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Fri, 3 Nov 2017 03:37:48 +0000
Subject: [PATCH] more styling

---
 data/index.html                               |  17 ++-
 data/scripts.js                               |  43 ++++--
 data/styles.css                               | 140 ++++++++++++++++++
 frontend/pages/index.html                     |  17 ++-
 frontend/scripts/sui.js                       |   2 +-
 frontend/scripts/zMain.js                     |  41 +++--
 .../styles/{form.less => form/layout.less}    |   3 +
 frontend/styles/form/slider.less              |  85 +++++++++++
 frontend/styles/form/switch.less              |  58 ++++++++
 frontend/styles/main.less                     |  22 +--
 frontend/styles/styles.old.css                | 119 ---------------
 frontend/styles/theme.less                    |  17 +++
 12 files changed, 385 insertions(+), 179 deletions(-)
 rename frontend/styles/{form.less => form/layout.less} (93%)
 create mode 100644 frontend/styles/form/slider.less
 create mode 100644 frontend/styles/form/switch.less
 delete mode 100644 frontend/styles/styles.old.css
 create mode 100644 frontend/styles/theme.less

diff --git a/data/index.html b/data/index.html
index 0954010..2a1d07a 100644
--- a/data/index.html
+++ b/data/index.html
@@ -16,28 +16,28 @@
     	       <ul>
                     <li class="form-row info">
                 		<label>Frequency</label>
-                		<label>123</label>
+                		<label data-actuator-id="laser">1</label>
                     </li>
-                    <li class="form-row info">
+                    <li class="form-row">
                 		<input type="range" class="laser slider" value="1" min="1" max="128">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 1</label>
-                		<label>23</label>
+                		<label data-actuator-id="motor1">1</label>
                     </li>
-                    <li class="form-row info">
+                    <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 3</label>
-                		<label>324</label>
+                		<label data-actuator-id="motor2">1</label>
                     </li>
                     <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 3</label>
-                		<label>123</label>
+                		<label data-actuator-id="motor3">1</label>
                     </li>
                     <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
@@ -69,7 +69,10 @@
                 <form>
                     <li class="form-row">
                       <label for="ap">AP Mode</label>
-                      <span class="toggle"><input type="checkbox" name="ap"></span>
+                      <label class="switch">
+                          <input type="checkbox">
+                          <span class="slider round"></span>
+                        </label>
                     </li>
                     <li class="form-row">
                       <label for="ssid">SSID</label>
diff --git a/data/scripts.js b/data/scripts.js
index 5f0ecc3..517c435 100644
--- a/data/scripts.js
+++ b/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
             });
diff --git a/data/styles.css b/data/styles.css
index ea8e9a2..84c65d3 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -1,3 +1,140 @@
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 8.4px 0;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #097479;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -8.6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #0eb4bb;
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #097479;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #043437;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: #097479;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+  height: 3.2px;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #097479;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #0eb4bb;
+}
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline;
+  /* The slider */
+  /* Rounded sliders */
+}
+.switch input {
+  display: none;
+}
+.switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #b3b2b2;
+  -webkit-transition: .4s;
+  transition: .4s;
+  margin-left: -40px;
+}
+.switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+.switch input:checked + .slider {
+  background-color: #097479;
+}
+.switch input:focus + .slider {
+  box-shadow: 0 0 1px #0eb8c0;
+}
+.switch input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+.switch .slider.round {
+  border-radius: 34px;
+  height: 34px;
+  width: 60px;
+}
+.switch .slider.round:before {
+  border-radius: 50%;
+}
 form .form-row {
   display: flex;
   justify-content: flex-end;
@@ -11,6 +148,9 @@ form .form-row > label {
 form .form-row > label + label {
   flex: 0;
 }
+form .form-row > label.switch + label {
+  flex: 1;
+}
 form .form-row > input {
   flex: 2;
 }
diff --git a/frontend/pages/index.html b/frontend/pages/index.html
index 0954010..2a1d07a 100644
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -16,28 +16,28 @@
     	       <ul>
                     <li class="form-row info">
                 		<label>Frequency</label>
-                		<label>123</label>
+                		<label data-actuator-id="laser">1</label>
                     </li>
-                    <li class="form-row info">
+                    <li class="form-row">
                 		<input type="range" class="laser slider" value="1" min="1" max="128">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 1</label>
-                		<label>23</label>
+                		<label data-actuator-id="motor1">1</label>
                     </li>
-                    <li class="form-row info">
+                    <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 3</label>
-                		<label>324</label>
+                		<label data-actuator-id="motor2">1</label>
                     </li>
                     <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
                     </li>
                     <li class="form-row info">
                 		<label>Motor 3</label>
-                		<label>123</label>
+                		<label data-actuator-id="motor3">1</label>
                     </li>
                     <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
@@ -69,7 +69,10 @@
                 <form>
                     <li class="form-row">
                       <label for="ap">AP Mode</label>
-                      <span class="toggle"><input type="checkbox" name="ap"></span>
+                      <label class="switch">
+                          <input type="checkbox">
+                          <span class="slider round"></span>
+                        </label>
                     </li>
                     <li class="form-row">
                       <label for="ssid">SSID</label>
diff --git a/frontend/scripts/sui.js b/frontend/scripts/sui.js
index a86f9d5..e904a18 100644
--- a/frontend/scripts/sui.js
+++ b/frontend/scripts/sui.js
@@ -26,7 +26,7 @@ var Sui = {
                                 actuator.data.call(this) : [this.value]
                         );
                     }
-                    $(domEl).on(actuator.event, handle) 
+                    domEl.addEventListener(actuator.event, handle) 
                 });
             };
         },
diff --git a/frontend/scripts/zMain.js b/frontend/scripts/zMain.js
index 829863b..839b8e2 100644
--- a/frontend/scripts/zMain.js
+++ b/frontend/scripts/zMain.js
@@ -1,30 +1,45 @@
 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
             });
diff --git a/frontend/styles/form.less b/frontend/styles/form/layout.less
similarity index 93%
rename from frontend/styles/form.less
rename to frontend/styles/form/layout.less
index 32ddf1e..0eead58 100644
--- a/frontend/styles/form.less
+++ b/frontend/styles/form/layout.less
@@ -13,6 +13,9 @@ form {
   .form-row > label + label {
       flex: 0;
   }
+  .form-row > label.switch  + label {
+      flex: 1;
+  }
   .form-row > input {
     flex: 2;
 
diff --git a/frontend/styles/form/slider.less b/frontend/styles/form/slider.less
new file mode 100644
index 0000000..d4624bf
--- /dev/null
+++ b/frontend/styles/form/slider.less
@@ -0,0 +1,85 @@
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 8.4px 0;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #097479;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -8.6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #0eb4bb;
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #097479;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 3.2px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #043437;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: #097479;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+  border: 0.4px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  background: #0eb8c0;
+  cursor: pointer;
+  height: 3.2px;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #097479;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #0eb4bb;
+}
diff --git a/frontend/styles/form/switch.less b/frontend/styles/form/switch.less
new file mode 100644
index 0000000..fcc3adf
--- /dev/null
+++ b/frontend/styles/form/switch.less
@@ -0,0 +1,58 @@
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline;
+    
+    input {display:none;}
+  
+    /* The slider */
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: @color-grey;
+      -webkit-transition: .4s;
+      transition: .4s;
+      margin-left: -40px;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: @color-main;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px @color-main-light;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+      height: 34px;
+      width: 60px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+}
\ No newline at end of file
diff --git a/frontend/styles/main.less b/frontend/styles/main.less
index ff8b3bf..1c1c2ff 100644
--- a/frontend/styles/main.less
+++ b/frontend/styles/main.less
@@ -1,22 +1,8 @@
-@import "form.less";
+@import "form/slider.less";
+@import "form/switch.less";
+@import "form/layout.less";
 
-@default-font: "Open Sans";
-
-@color-black: #000000;
-@color-white: #eeeeee;
-@color-grey: #b3b2b2;
-@color-main: #097479;
-@color-main-light: #0eb8c0;
-@color-container: #333333;
-
-@default-padding: 16px;
-@default-margin: 16px;
-@default-margin-small: 8px;
-@default-border-radius: 4px;
-@default-border-color: #555555;
-
-@input-text-height: 16px;
-@input-checkbox-scale: 2;
+@import "theme.less";
 
 .sui {
     background: @color-black;
diff --git a/frontend/styles/styles.old.css b/frontend/styles/styles.old.css
deleted file mode 100644
index 8f7d17e..0000000
--- a/frontend/styles/styles.old.css
+++ /dev/null
@@ -1,119 +0,0 @@
-
-label {
-	width: 10%;
-	display: inline-block;
-}
-.slider {
-	width: 80%;
-	display: inline-block;
-}
-
-
-
-body {
-	font-size: 14px;
-	font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
-	background: #00979d none repeat scroll 0px 0px;
-	align: Center;
-}
-#Main {
-	width: 600px;	
-	margin: 5px 3px 3px 12px;
-}
-
-text#titleGlitch {
-	fill: #006666;
-	font-weight: bold;
-	text-shadow: 2px 2px black;
-	font-family: sans-serif;
-	font-size: 36px;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-text#titleText {
-	fill: #006666;
-	text-shadow: 1px 1px black;
-	font-family: sans-serif;
-	font-size: 26px;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-svg {
-	border: solid 1px black;
-	width: 100%;
-	height: 50px;
-	display: block;
-	position: relative;
-	/*overflow: hidden; */ 
-	background: #66bebe;
-	-webkit-border-radius: 10px;
-	-moz-border-radius: 10px;
-	border-radius: 10px;
-}
-#prototypControls {
-	margin-top:3px;
-	padding: 10px;
-	border: solid black 1px;
-	background: #66bebe;
-	-webkit-border-radius: 10px;
-	-moz-border-radius: 10px;
-	border-radius: 10px;
-}
-.sectionTitle {
-	font-size: 28px;
-	font-weight: bold;
-	font-family: "impact","Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
-	float: left;
-    clear: left;
-	color: #006666;
-	text-shadow: 2px 2px black;
-}
-.sectionDesc {
-	font-weight: bold;
-	float: left;
-    clear: left;
-}
-
-
-#ledMacroButtonsCont {
-	padding: 18px 5px 15px 5px;
-	text-decoration: none;
-	float:none;
-	clear:left;
-}
-
-
-.ledMacroButton {
-  height: 50px;
-  background: #00989d;
-  background-image: -webkit-linear-gradient(top, #00989d, #0a787a);
-  background-image: -moz-linear-gradient(top, #00989d, #0a787a);
-  background-image: -ms-linear-gradient(top, #00989d, #0a787a);
-  background-image: -o-linear-gradient(top, #00989d, #0a787a);
-  background-image: linear-gradient(to bottom, #00989d, #0a787a);
-  -webkit-border-radius: 17;
-  -moz-border-radius: 17;
-  border-radius: 17px;
-  text-shadow: 6px 4px 4px #4d424d;
-  -webkit-box-shadow: 0px 1px 3px #666666;
-  -moz-box-shadow: 0px 1px 3px #666666;
-  box-shadow: 0px 1px 3px #666666;
-  color: #fafafa;
-  font-size:12px;
-  padding: 10px 15px 10px 15px;
-  border: solid #26b3b3 4px;
-  text-decoration: none;
-  margin: 23px 4px 23px 6px;
-	position: relative;
-}
-
-.ledMacroButton:hover {
-  background: #307070;
-  background-image: -webkit-linear-gradient(top, #307070, #66bebe);
-  background-image: -moz-linear-gradient(top, #307070, #66bebe);
-  background-image: -ms-linear-gradient(top, #307070, #66bebe);
-  background-image: -o-linear-gradient(top, #307070, #66bebe);
-  background-image: linear-gradient(to bottom, #307070, #66bebe);
-  text-decoration: underline;
-}
-
diff --git a/frontend/styles/theme.less b/frontend/styles/theme.less
new file mode 100644
index 0000000..a46ea0d
--- /dev/null
+++ b/frontend/styles/theme.less
@@ -0,0 +1,17 @@
+@default-font: "Open Sans";
+
+@color-black: #000000;
+@color-white: #eeeeee;
+@color-grey: #b3b2b2;
+@color-main: #097479;
+@color-main-light: #0eb8c0;
+@color-container: #333333;
+
+@default-padding: 16px;
+@default-margin: 16px;
+@default-margin-small: 8px;
+@default-border-radius: 4px;
+@default-border-color: #555555;
+
+@input-text-height: 16px;
+@input-checkbox-scale: 2;