From 769d6e0bc1fa11e70554962e731bf87f52d7d9f7 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Tue, 6 Oct 2020 12:37:47 +0200
Subject: [PATCH] dynamic html

---
 node_app/public/index.html   | 48 +++++++++++++++++++-----------------
 node_app/public/sym/dark.css |  9 ++++---
 node_app/server.js           | 17 +++++++------
 3 files changed, 41 insertions(+), 33 deletions(-)
diff --git a/node_app/public/index.html b/node_app/public/index.html
index 9692bdb..5cb9046 100644
--- a/node_app/public/index.html
+++ b/node_app/public/index.html
@@ -12,9 +12,10 @@
     <link rel="stylesheet" type="text/css" href="/sym/dark.css"/>
 
     <script>
-        const wsurl = 'ws://127.0.0.1:8081'
+        const wsurl = 'ws://10.8.0.2:8081'
         const socket = new WebSocket(wsurl)
-        let devices;
+        let devices = [];
+        function element(id){ return document.getElementById(id)}
 
         socket.onopen = () => {
             socket.send('new session')
@@ -30,16 +31,17 @@
             else if (msg[0] === 'device') {
                 if (!devices.includes(msg[1])){
                     devices.push(msg[1])
-                    e.data
+                    let new_device = element('template_led').innerHTML.replace(`{{id}}`, msg[1])
+                    element('devices').innerHTML += element('template_led').innerHTML.replaceAll(`{{id}}`, msg[1])
                 }
-                if (msg[2] === 'online') document.getElementById(msg[1]).style.display = "block"
-                else if (msg[2] === 'offline') document.getElementById(msg[1]).style.display = "none"
-                else document.getElementById('led1_title').innerText = `LED 1 (currently ${msg[1]}):`
+                if (msg[2] === 'online') element(msg[1]).style.backgroundColor = "#546E7A"
+                else if (msg[2] === 'offline') element(msg[1]).style.backgroundColor = "#BA3D3D"
+                else element(`${msg[1]}_title`).innerText = `${msg[1]} (currently ${msg[2]}):`
             }
         }
         function show_error(msg) {
-            let error_style = document.getElementById('error-box').style
-            document.getElementById('error-message').innerText = msg
+            let error_style = element('error-box').style
+            element('error-message').innerText = msg
             error_style.display = "block"
             error_style.animation = "slide-from-left alternate 0.2s"
             setTimeout(to => {error_style.animation = ""}, 200)
@@ -48,20 +50,22 @@
 </head>
 <body>
     <div class="title">ESP-IoT</div>
-    <div class="devices">
-        <div id="led1" class="device_box">
-            <div class="title2" id="led1_title">LED 1:</div>
-            <button class="btn-green"
-                 style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
-                 onclick="socket.send('device;led1;on')">
-                <div class="btn-text">on</div>
-            </button>
-            <button class="btn-red"
-                 style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
-                 onclick="socket.send('device;led1;off')">
-                <div class="btn-text">off</div>
-            </button>
-        </div>
+    <div id="devices" class="devices">
+        <template id="template_led">
+            <div id="{{id}}" class="device_box">
+                <div class="title2">{{id}}</div>
+                <button class="btn-green"
+                        style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
+                        onclick="socket.send('device;{{id}};on')">
+                    <div class="btn-text">on</div>
+                </button>
+                <button class="btn-red"
+                        style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
+                        onclick="socket.send('device;{{id}};off')">
+                    <div class="btn-text">off</div>
+                </button>
+            </div>
+        </template>
     </div>
     <div id="error-box" class="error">
         <div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
diff --git a/node_app/public/sym/dark.css b/node_app/public/sym/dark.css
index a6e5819..f5a38d9 100644
--- a/node_app/public/sym/dark.css
+++ b/node_app/public/sym/dark.css
@@ -100,22 +100,25 @@ input[id="longurl-input"]::-webkit-input-placeholder {
     cursor: pointer;
     height: 2.5rem;
     background-color: #00BCD4;
-    box-shadow: 3px 3px 10px #333;
+    box-shadow: 3px 3px 10px #3336;
     border-radius: 1.25rem;
+    border: 0;
 }
 .btn-green{
     cursor: pointer;
     height: 2.5rem;
     background-color: #009688;
-    box-shadow: 3px 3px 10px #333;
+    box-shadow: 3px 3px 10px #3336;
     border-radius: 1.25rem;
+    border: 0;
 }
 .btn-red{
     cursor: pointer;
     height: 2.5rem;
     background-color: #E53935;
-    box-shadow: 3px 3px 10px #333;
+    box-shadow: 3px 3px 10px #3336;
     border-radius: 1.25rem;
+    border: 0;
 }
 .btn-text {
     position: absolute;
diff --git a/node_app/server.js b/node_app/server.js
index a402b09..968bd55 100644
--- a/node_app/server.js
+++ b/node_app/server.js
@@ -96,13 +96,13 @@ let check_devices = setInterval(to => {
         })}
     })
 }, 5000)
-
+///*
 //WS handler
-wss.on('connection', ws => {
+wss.on('connection', (ws, req) => {
     ws.on('message', message => {
-        console.log(`Received message => ${message}`)
+        console.log(`${req.socket.remoteAddress} => ${message}`)
         let msg = message.split(";", 3)
-        if (msg[0] === 'device') {
+        if (msg[0] === "device") {
             redis_cli.hget(`device;${msg[1]}`, "ip", function(err, ip) {
                 if(err) console.log(err)
                 if(ip){
@@ -114,7 +114,7 @@ wss.on('connection', ws => {
                             })
                         }
                     }
-                    xhr.open('GET', `http://[${ip}/${msg[1]}`, true);
+                    xhr.open('GET', `http://[${ip}]/${msg[2]}`, true);
                     xhr.send();
                     setTimeout(to => {if (xhr.readyState !== 4){
                         ws.send(`error;device "${msg[1]}" took too long to reach`)
@@ -123,9 +123,10 @@ wss.on('connection', ws => {
                     }}, 1500)
                 }
             })
-        }else ws.send('error;try again')
+        }
     })
-    ws.send('websocket connected')
+    ws.send(`connected as ${req.socket.remoteAddress}`)
+    console.log(`${req.socket.remoteAddress} connected`)
     //on new connection
     redis_cli.keys("device;*", function(err, keys) {
         if (err) console.log(err)
@@ -136,4 +137,4 @@ wss.on('connection', ws => {
             })
         })}
     })
-})
+})//*/
