add connect button

api/index.js

@@ -9,10 +9,8 @@ var received_picture = false;
 app.use(express.static("public"));
 app.use(express.json());
 
-var ws = new WebSocket("ws://10.100.0.40:9001/");
+var ws;
 var api_connected = false;
-console.log("connecting to API...");
-while (ws.readyState != 1) { }
 
 ws.on("open", function open() {
   console.log("connected with websockets to API!");
@@ -73,5 +71,13 @@ app.post("/move", function (req, res) {
   ws.send(request);
 });
 
+app.get("/connect", function (req, res) {
+    console.log("got connect request");
+    ws = new WebSocket("ws://10.100.0.40:9001/");
+    while (api_connected == false) { }
+    res.status(200).json({ connected: true });
+    
+});
+
 app.listen(8080);
 console.log("Server is listening on port 8080");

api/views/index.ejs

@@ -17,6 +17,7 @@
             <div id="connectedbuttons">
                 <div id="connectedstatus">
                     <p>Connected: <%- api_connected %></p>
+                    <button id="connectbutton" onclick="connect()">Connect</button>
                 </div>
                 <div id="buttons">
                     <button id="take_picture" onclick="take_picture()">Take picture</button>
@@ -142,6 +143,22 @@
     function arm_disarm() {
         console.log("arm/disarm");
     }
+
+    function connect() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "/connect", true);
+        xhr.onreadystatechange = function () {
+            if (this.status == 200) {
+                console.log(this.responseText);
+                if (this.responseText.length > 0) {
+                    var status = JSON.parse(this.responseText);
+                    // console.log(status)
+                    document.getElementById("connectedstatus").innerHTML = "Connected: " + status.connected;
+                }
+            }
+        };
+        xhr.send();
+    }
     // window onload function die elke seconde een request doet om te kijken of er al nieuwe foto is
     // function die elke 100 ms een request doet om de status te updaten
     // button callbacks