From c9350aa8dbd10245a88b86dd5585417dccf8fa4b Mon Sep 17 00:00:00 2001
From: Sunpy <sunpy@osufx.com>
Date: Thu, 1 Aug 2019 19:02:02 +0200
Subject: [PATCH] Console inoutput

---
 www/main.html | 130 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 86 insertions(+), 44 deletions(-)

diff --git a/www/main.html b/www/main.html
index 88fa897..04ab29f 100644
--- a/www/main.html
+++ b/www/main.html
@@ -6,8 +6,8 @@
         <script src="js/fly-ws.js"></script>
         <style>
             html, body {
-                width: 100%;
-                height: 100%;
+                width: 100vw;
+                height: 100vh;
                 top: 0px;
                 left: 0px;
                 margin: 0px;
@@ -18,8 +18,8 @@
 
             body {
                 grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
-                grid-template-areas: "title          title          title           console"
-                                     "ws-status      ws-input       ws-connect      console"
+                grid-template-areas: "title          title          title           stdin"
+                                     "ws-status      ws-input       ws-connect      stdin"
                                      ".              map            data-al         console"
                                      ".              map            data-sp         console"
                                      ".              map            data-ps         console"
@@ -53,7 +53,7 @@
                 background: gray;
             }
             .online {
-                background: lime;
+                background: lime !important;
             }
             .offline {
                 background: red;
@@ -63,6 +63,14 @@
                 justify-self: start;
             }
 
+            .console {
+                overflow: auto;
+            }
+
+            #stdin > * {
+                font-size: 20px;
+            }
+
             /* Yea... im seperating this */
             .title {
                 grid-area: title;
@@ -94,6 +102,9 @@
             .data-hp {
                 grid-area: data-hp;
             }
+            #stdin {
+                grid-area: stdin;
+            }
 
         </style>
     </head>
@@ -101,7 +112,7 @@
         <div class="title">
             <h1>Websocket DEMO</h1>
         </div>
-        <div class="ws ws-status border"></div>
+        <div class="ws ws-status border" id="ws_status"></div>
         <div class="ws ws-input">
             <input id="addr" value="ws://127.0.0.1:7767"/>
         </div>
@@ -113,56 +124,87 @@
         <div class="data-sp border"></div>
         <div class="data-ps border"></div>
         <div class="data-hp border"></div>
-        <div class="console border" id="stdout"></div>
+        <div class="console border">
+            <pre id="stdout"></pre>
+        </div>
+        <div class="border" id="stdin">
+            <button onclick="button(0)">0: Get All Flights</button>
+            <button onclick="button(1)">1: Subscribe flight changes</button>
+            <button onclick="button(2)">2: Subscribe flight data</button>
+            <button onclick="button(3)">3: Fetch flight data</button>
+        </div>
         <script>
             var fs;
 
+            function* buffer2HexArray(buff, start = 0, end = buff.byteLength) {
+                for (let i = start; i < end; i++) {
+                    let hex = buff.getUint8(i).toString(16);
+                    if (hex.length == 1)
+                        hex = "0" + hex;
+                    yield hex;
+                }
+            }
+
             function callbackData(data) {
                 console.log(data);
             }
 
+            function callbackRaw(data) {
+                let hex = Array.from( buffer2HexArray(data) ).join(" ");
+                stdout.innerHTML += hex + "\n";
+            }
+
             function connect() {
                 fs = new FLYSocket(
                     addr.value, // websocket addr
-                    callbackData
-                    // callbackRaw
+                    callbackData,
+                    callbackRaw
                     );
+                fs.ws.onopen = function() {
+                    ws_status.classList.add("online");
+                }
+                fs.ws.onclose = fs.ws.onerror = function() {
+                    ws_status.classList.add("offline");
+                    ws_status.classList.remove("online");
+                }
+            }
+
+            function button(i) {
+                if (!(fs instanceof FLYSocket))
+                    throw Error("FLYSocket not created");
+
+                let data;
+                let uuid = NaN;
+                switch (i) {
+                    default:
+                        return;
+                    case 0:
+                        data = new DataView( new ArrayBuffer(1) );
+                        data.setUint8(0, 0);
+                        break;
+                    case 1:
+                        data = new DataView( new ArrayBuffer(2) );
+                        data.setUint8(0, 1);
+                        data.setUint8(1, true);
+                        break;
+                    case 2:
+                        data = new DataView( new ArrayBuffer(6) );
+                        data.setUint8(0, 2);
+                        while (isNaN(uuid))
+                            uuid = parseInt( prompt("FlightUUID", 0) );
+                        data.setUint32(1, uuid, true);
+                        data.setUint8(5, true);
+                        break;
+                    case 3:
+                        data = new DataView( new ArrayBuffer(5) );
+                        data.setUint8(0, 3);
+                        while (isNaN(uuid))
+                            uuid = parseInt( prompt("FlightUUID", 0) );
+                        data.setUint32(1, uuid, true);
+                        break;
+                }
+                fs.ws.send(data);
             }
         </script>
-        <!--
-        <script>
-            function hex(str)
-            {
-                var arr1 = [];
-                for (var n = 0, l = str.length; n < l; n ++) 
-                {
-                    var hex = Number(str.charCodeAt(n)).toString(16);
-                    arr1.push(hex);
-                }
-                return arr1.join(' ');
-            }
-
-            var ws = new WebSocket("ws://127.0.0.1:7767/"),
-            messages = document.createElement('ul');
-            ws.onmessage = function (event) {
-                var messages = document.getElementsByTagName('ul')[0],
-                    message = document.createElement('li'),
-                    res = new Response(event.data).arrayBuffer().then(
-                        function(buff) {
-                            last = buff;
-                            data = new DataView(buff);
-
-                            data_str = "";
-                            for (let i = 0; i < data.byteLength; i++)
-                                data_str += String.fromCharCode(data.getInt8(i));
-
-                            content = document.createTextNode(data_str + " | " + hex(data_str));
-                            message.appendChild(content);
-                            messages.appendChild(message);
-                        }
-                    );
-            };
-            document.body.appendChild(messages);
-        </script>-->
     </body>
 </html>
\ No newline at end of file