implement systray status

diff --git a/ppt_control/static/ppt-control.js b/ppt_control/static/ppt-control.js
index 9bba1714f2b97a088cc6f4c39d6209cacb41bb17..f884d90a8cfef532b74bbaf6064db4c953cc5ce4 100644 (file)
--- a/ppt_control/static/ppt-control.js
+++ b/ppt_control/static/ppt-control.js
@@ -2,25 +2,6 @@ var DEFAULT_TITLE = "ppt-control"
 var preloaded = false;
 var preload = [];
 
-function imageRefresh(id) {
-    img = document.getElementById(id);
-    var d = new Date;
-    var http = img.src;
-    if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; } 
-    img.src = http + '?t=' + d.getTime();
-}
-
-function startWebsocket() {
-    ws = new WebSocket("ws://" + window.location.host + ":5678/");
-    ws.onclose = function(){
-        //websocket = null;
-        setTimeout(function(){startWebsocket()}, 10000);
-    }
-    return ws;
-}
-
-var websocket = startWebsocket();
-
 var prev = document.querySelector('#prev'),
     next = document.querySelector('#next'),
     first = document.querySelector('#first'),
@@ -30,7 +11,7 @@ var prev = document.querySelector('#prev'),
     slide_label = document.querySelector('#slide_label'),
     current = document.querySelector('#current'),
     total = document.querySelector('#total'),
-    users = document.querySelector('.users'),
+    status_text = document.querySelector('.status_text'),
     current_img = document.querySelector('#current_img'),
     next_img = document.querySelector('#next_img'),
     current_div = document.querySelector('#current_div'),
@@ -41,6 +22,23 @@ var prev = document.querySelector('#prev'),
     show_next = document.querySelector('#show_next'),
     shortcuts = document.querySelector('#shortcuts');
 
+
+function startWebsocket() {
+    console.log("Attempting to connect")
+    ws = new WebSocket("ws://" + window.location.host + ":5678/");
+    ws.onmessage = receive_message;
+    ws.onclose = function(){
+        ws = null;
+        setTimeout(function(){websocket = startWebsocket()}, 1000);
+    }
+    if (ws.readyState !== WebSocket.OPEN) {
+      disconnect()
+    }
+    return ws;
+}
+
+var websocket = startWebsocket();
+
 prev.onclick = function (event) {
     websocket.send(JSON.stringify({action: 'prev'}));
 }
@@ -161,80 +159,66 @@ document.addEventListener('keydown', function (e) {
        }
 });
 
-function sleep(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-}
-
 function disconnect() {
-       document.title = DEFAULT_TITLE;
+  console.log("Disconnecting")
+    document.title = DEFAULT_TITLE;
     current_img.src = "/black.jpg";
     next_img.src = "/black.jpg";
-    users.textContent = "Connection to PowerPoint failed";
+    status_text.textContent = "Disconnected";
+    total.textContent = "?";
+    current.value = "";
 }
 
-websocket.onmessage = function (event) {
-       console.log("Received data");
+function receive_message(event) {
     data = JSON.parse(event.data);
     switch (data.type) {
         case 'state':
             if (data.connected == "0" || data.connected == 0) {
-                               console.log("Disconnected");
                disconnect();
                break;
+            } else {
+              status_text.textContent = "Connected";
             }
             var d = new Date;
-            switch (data.visible) {
-                case 3:
-                    current_img.src = "/black.jpg";
-                    break;
-                case 4:
-                    current_img.src = "/white.jpg";
-                    break;
-                default:
-                    //current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
-                    current_img.src = "/cache/" + data.current + ".jpg";
-                    break;
+            if (show_current.checked) {
+              switch (data.visible) {
+                  case 3:
+                      current_img.src = "/black.jpg";
+                      break;
+                  case 4:
+                      current_img.src = "/white.jpg";
+                      break;
+                  default:
+                      current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
+                      //current_img.src = "/cache/" + data.current + ".jpg";
+                      break;
+              }
             }
             if (data.current == data.total + 1) { 
-                //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
-                next_img.src = "/cache/" + (data.total + 1) + ".jpg";
+                next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
+                //next_img.src = "/cache/" + (data.total + 1) + ".jpg";
             } else {
-                //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
-                next_img.src = "/cache/" + (data.current + 1) + ".jpg";
+                next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
+                //next_img.src = "/cache/" + (data.current + 1) + ".jpg";
             }
 
-                       if (document.activeElement != current) {
+            if (document.activeElement != current) {
                current.value = data.current;
             }
             total.textContent = data.total;
             document.title = data.name;
             break;
-        case 'users':
-            users.textContent = (
-                data.count.toString() + " client" +
-                (data.count == 1 ? "" : "s"));
-            break;
         default:
             console.error(
-                "unsupported event", data);
+                "Unsupported event", data);
     }
        if (preloaded == false && ! isNaN(total.textContent)) {
                image = document.getElementById("preload_img");
                for (let i=1; i<=Number(total.textContent); i++) {
                        image.src = "/cache/" + i + ".jpg";
                        preload.push(image);
-               console.log("Preloaded " + total.textContent);
-                       //sleep(0.5)
                }
                preloaded = true;
        }
 
 };
-
-var interval = setInterval(refresh, 1000);
-
-function refresh() {
-       console.log("Refreshing")
-    websocket.send(JSON.stringify({action: 'refresh'}));
-}
-