oidshfs

2025-12-14 18:15:22 +01:00 · 2017-11-25 00:42:04 +01:00
parent 99b662ab6a
commit d7e9e22828
10 changed files with 362 additions and 225 deletions
--- a/data/index.html
+++ b/data/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <title>LaserSpirograph</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
@@ -8,6 +9,7 @@
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="scripts.js"></script>
 </head>
+
 <body class="sui">
  <div class="content">
    <form id="prototypControls" class="spiro-control container collapsible open">
@@ -42,7 +44,14 @@
          <li class="form-row">
            <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
          </li>
-                    
+          <div class="form-row">
+              <label for="ap">Preset Mode</label>
+              <label class="switch preset-mode" data-state="false">
+                <input type="checkbox" name="presetMode">
+                <span class="slider round" data-state="false"></span>
+              </label>
+            <button class="disabled">Add</button>
+          </div>
        </ul>
      </div>
    </form>
@@ -63,15 +72,31 @@
        </div>
      </div>
    </form>
-    	<div class="settings container collapsible">
+    <form id="prototypControls" class="container collapsible">
+      <span class="heading">Presets</span>
+      <div class="content">
+        <li class="form-row">
+          <label for="ap">Preset Mode</label>
+          <label class="switch preset-mode" data-state="0">
+            <input type="checkbox">
+            <span class="slider round"></span>
+          </label>
+        </li>
+        <div class="form-row">
+          <label>Do stuff</label>
+          <button>Run</button>
+        </div>
+      </div>
+    </form>
+    <div class="settings container collapsible open">
      <span class="heading">WiFi Settings</span>
      <div class="content">
        <form>
          <li class="form-row">
            <label for="ap">AP Mode</label>
-                      <label class="switch">
-                          <input type="checkbox">
-                          <span class="slider round"></span>
+            <label class="switch ap-mode">
+              <input type="checkbox" name="apMode">
+              <span class="slider round" data-bind="apMode" data-state="false"></span>
            </label>
          </li>
          <li class="form-row">
@@ -105,4 +130,5 @@
    </div>
  </div>
 </body>
+
 </html>
--- a/data/scripts.js
+++ b/data/scripts.js
@@ -96,22 +96,18 @@ var $ = function(selector){
        },
        link: (node) => {
            return (actuator) => {
-                let update = function(endpoint, method, props) {
+                let update = actuator.handler || function(actuator) {
                    Sui.http.ajax({
-                        method: method,
-                        endpoint: node.api[endpoint],
-                        data: props,
+                        method: actuator.method,
+                        endpoint: actuator.api,
+                        data: actuator.data ? 
+                            actuator.data.call(this) : [this.value],
                        cache: false
                    }, actuator.onResponse || null);
                };
                Sui.select(actuator.selector).forEach( (domEl) =>{
                    let handle = function(event) {
-                        update.call(this, 
-                            actuator.api, 
-                            actuator.method, 
-                            actuator.data ? 
-                                actuator.data.call(this) : [this.value]
-                        );
+                        update.call(this, actuator);
                    }
                    domEl.addEventListener(actuator.event, handle) 
                });
@@ -161,7 +157,20 @@ var $ = function(selector){
                request.send(postData);
            }
        }
-    };Sui.ready(() => {
+    };
+let click = element => element.click();
+let check = element => element.setAttribute('checked','checked');
+let uncheck = element => element.removeAttribute('checked');
+
+let switchElementState = element =>  {
+    let state = element.getAttribute('data-state') == 'false';
+    element.setAttribute('data-state', state);
+    return state;
+};
+let bindData = (element, attribute, data) => {
+    element.setAttribute('data-' + attribute, data);
+};
+Sui.ready(() => {
    let debugResponse = (data) => {
        document.querySelector('#response').innerHTML = data;
    };
@@ -175,7 +184,33 @@ var $ = function(selector){
    
    // init actuators
    [{
-        api: 'MOTOR',
+        api: '/wificonfig',
+        method: 'POST',
+        selector: '.switch.ap-mode .slider',
+        event: 'click',
+        onResponse: debugResponse,
+        handler: function() {
+            let nextState = switchElementState(this);
+            /*let bindingName = this.getAttribute('data-bind');
+            Sui.select('.switch.ap-mode [name="'+ bindingName+'"]')
+                .forEach(check);*/
+            console.log(nextState);
+        }
+    },{
+        api: '/presetMode',
+        method: 'POST',
+        selector: '.switch.preset-mode .slider',
+        event: 'click',
+        onResponse: debugResponse,
+        data: function() {
+            let state = switchElementState(this);
+            console.log(state);
+            return Sui.util.serialize({
+                mode: state ? 1 : 0
+            });
+        }
+    },{
+        api: '/spirograph',
        method: 'POST',
        selector: '.slider.motor',
        event: 'change',
@@ -193,7 +228,7 @@ var $ = function(selector){
            return Sui.util.serialize(payload);
        }
    }, {
-        api: 'LASER',
+        api: '/spirograph',
        method: 'POST',
        selector: '.slider.laser',
        event: 'change',
@@ -210,7 +245,8 @@ var $ = function(selector){
    }].forEach(Sui.link({
        api: {
            MOTOR: '/spirograph', // {motorNr}/{value}
-            LASER: '/spirograph' // {value}
+            LASER: '/spirograph', // {value}
+            PRESET: '/presetMode'
        }
    }));
 });
--- a/data/styles.css
+++ b/data/styles.css
@@ -4,6 +4,9 @@
 .shown {
  display: block;
 }
+.disabled {
+  opacity: 0.65;
+}
 .sui {
  background: #000000;
  color: #0eb8c0;
@@ -23,9 +26,11 @@
 }
 .sui button {
  background: #097479;
-  color: white;
+  color: #eeeeee;
+  font-size: 0.9em;
  border: 0;
  padding: .8em;
+  margin: 0 .4em;
 }
 .heading {
  font-size: 1.2em;
@@ -157,10 +162,11 @@ input[type=range]:focus::-ms-fill-upper {
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: #b3b2b2;
+  background-color: #7b7b7b;
  -webkit-transition: .4s;
  transition: .4s;
-  margin-left: -40px;
+  margin-left: -50px;
+  margin-top: 4px;
 }
 .switch .slider:before {
  position: absolute;
--- a/data/wifi.json
+++ b/data/wifi.json
@@ -1,5 +1,5 @@
 {
-	"apMode": 0,
+	"apMode": 1,
 	"SSID": "LaserSpiro",
 	"Password": "th3r31sn0sp00n"
 }
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <title>LaserSpirograph</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
@@ -8,6 +9,7 @@
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="scripts.js"></script>
 </head>
+
 <body class="sui">
  <div class="content">
    <form id="prototypControls" class="spiro-control container collapsible open">
@@ -42,7 +44,14 @@
          <li class="form-row">
            <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
          </li>
-                    
+          <div class="form-row">
+              <label for="ap">Preset Mode</label>
+              <label class="switch preset-mode" data-state="false">
+                <input type="checkbox" name="presetMode">
+                <span class="slider round" data-state="false"></span>
+              </label>
+            <button class="disabled">Add</button>
+          </div>
        </ul>
      </div>
    </form>
@@ -63,15 +72,31 @@
        </div>
      </div>
    </form>
-    	<div class="settings container collapsible">
+    <form id="prototypControls" class="container collapsible">
+      <span class="heading">Presets</span>
+      <div class="content">
+        <li class="form-row">
+          <label for="ap">Preset Mode</label>
+          <label class="switch preset-mode" data-state="0">
+            <input type="checkbox">
+            <span class="slider round"></span>
+          </label>
+        </li>
+        <div class="form-row">
+          <label>Do stuff</label>
+          <button>Run</button>
+        </div>
+      </div>
+    </form>
+    <div class="settings container collapsible open">
      <span class="heading">WiFi Settings</span>
      <div class="content">
        <form>
          <li class="form-row">
            <label for="ap">AP Mode</label>
-                      <label class="switch">
-                          <input type="checkbox">
-                          <span class="slider round"></span>
+            <label class="switch ap-mode">
+              <input type="checkbox" name="apMode">
+              <span class="slider round" data-bind="apMode" data-state="false"></span>
            </label>
          </li>
          <li class="form-row">
@@ -105,4 +130,5 @@
    </div>
  </div>
 </body>
+
 </html>
--- a/frontend/scripts/sui.js
+++ b/frontend/scripts/sui.js
@@ -9,22 +9,18 @@ var Sui = {
        },
        link: (node) => {
            return (actuator) => {
-                let update = function(endpoint, method, props) {
+                let update = actuator.handler || function(actuator) {
                    Sui.http.ajax({
-                        method: method,
-                        endpoint: node.api[endpoint],
-                        data: props,
+                        method: actuator.method,
+                        endpoint: actuator.api,
+                        data: actuator.data ? 
+                            actuator.data.call(this) : [this.value],
                        cache: false
                    }, actuator.onResponse || null);
                };
                Sui.select(actuator.selector).forEach( (domEl) =>{
                    let handle = function(event) {
-                        update.call(this, 
-                            actuator.api, 
-                            actuator.method, 
-                            actuator.data ? 
-                                actuator.data.call(this) : [this.value]
-                        );
+                        update.call(this, actuator);
                    }
                    domEl.addEventListener(actuator.event, handle) 
                });
--- a/frontend/scripts/zMain.js
+++ b/frontend/scripts/zMain.js
@@ -1,3 +1,16 @@
+
+let click = element => element.click();
+let check = element => element.setAttribute('checked','checked');
+let uncheck = element => element.removeAttribute('checked');
+
+let switchElementState = element =>  {
+    let state = element.getAttribute('data-state') == 'false';
+    element.setAttribute('data-state', state);
+    return state;
+};
+let bindData = (element, attribute, data) => {
+    element.setAttribute('data-' + attribute, data);
+};
 Sui.ready(() => {
    let debugResponse = (data) => {
        document.querySelector('#response').innerHTML = data;
@@ -12,7 +25,33 @@ Sui.ready(() => {
    
    // init actuators
    [{
-        api: 'MOTOR',
+        api: '/wificonfig',
+        method: 'POST',
+        selector: '.switch.ap-mode .slider',
+        event: 'click',
+        onResponse: debugResponse,
+        handler: function() {
+            let nextState = switchElementState(this);
+            /*let bindingName = this.getAttribute('data-bind');
+            Sui.select('.switch.ap-mode [name="'+ bindingName+'"]')
+                .forEach(check);*/
+            console.log(nextState);
+        }
+    },{
+        api: '/presetMode',
+        method: 'POST',
+        selector: '.switch.preset-mode .slider',
+        event: 'click',
+        onResponse: debugResponse,
+        data: function() {
+            let state = switchElementState(this);
+            console.log(state);
+            return Sui.util.serialize({
+                mode: state ? 1 : 0
+            });
+        }
+    },{
+        api: '/spirograph',
        method: 'POST',
        selector: '.slider.motor',
        event: 'change',
@@ -30,7 +69,7 @@ Sui.ready(() => {
            return Sui.util.serialize(payload);
        }
    }, {
-        api: 'LASER',
+        api: '/spirograph',
        method: 'POST',
        selector: '.slider.laser',
        event: 'change',
@@ -47,7 +86,8 @@ Sui.ready(() => {
    }].forEach(Sui.link({
        api: {
            MOTOR: '/spirograph', // {motorNr}/{value}
-            LASER: '/spirograph' // {value}
+            LASER: '/spirograph', // {value}
+            PRESET: '/presetMode'
        }
    }));
 });
--- a/frontend/styles/base.less
+++ b/frontend/styles/base.less
@@ -6,6 +6,10 @@
    display: block;
 }

+.disabled {
+    opacity: 0.65;
+}
+
 .sui {
    background: @color-black;
    color: @color-main-light;
@@ -18,7 +22,6 @@
        -webkit-tap-highlight-color: transparent;
    }

-    
    > .content {
        padding: @default-padding;
    }
@@ -29,8 +32,10 @@
    
    button {
        background: @color-main;
-        color: white;
+        color: @color-white;
+        font-size: 0.9em;
        border: 0;
        padding: .8em;
+        margin: 0 .4em;
    }
 }
--- a/frontend/styles/form/switch.less
+++ b/frontend/styles/form/switch.less
@@ -15,10 +15,11 @@
      left: 0;
      right: 0;
      bottom: 0;
-      background-color: @color-grey;
+      background-color: @color-grey2;
      -webkit-transition: .4s;
      transition: .4s;
-      margin-left: -40px;
+      margin-left: -50px;
+      margin-top: 4px;
    }
    
    .slider:before {
--- a/frontend/styles/theme.less
+++ b/frontend/styles/theme.less
@@ -3,6 +3,7 @@
@color-black: #000000;
@color-white: #eeeeee;
@color-grey: #b3b2b2;
+@color-grey2: #7b7b7b;
@color-main: #097479;
@color-main-light: #0eb8c0;
@color-container: #333333;