Merge pull request #883 from sweiland-openrails/SwitchPanel

SwitchPanel disconnect/connect handling
openrails · Dec 3, 2023 · 01614a1 · 01614a1
2 parents 89833d4 + edcc2dd
commit 01614a1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.css b/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.css
@@ -69,3 +69,17 @@ label {
     min-width: 1px;
 }
 
+#overlay {
+    position: fixed; /* Sit on top of the page content */
+    display: none; /* Hidden by default */
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100%; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.6); /* Black background with opacity */
+    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+    cursor: pointer; /* Add a pointer on hover */
+}
+
diff --git a/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.html b/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.html
@@ -25,6 +25,7 @@
     </head>
 
     <body style="background-color: white">
+        <div id="overlay"></div>
         <table id="tableSwitchPanel"></table>
         <script src="index2.js"></script>
     </body>

diff --git a/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.js b/Source/RunActivity/Viewer3D/WebServices/Web/SwitchPanel/index2.js
@@ -30,12 +30,14 @@ function createSocket() {
     const connection = new WebSocket(uri, "json");
 
     connection.onopen = function (evt) {
-        console.log("websocket opened: " + evt.type);
+        console.log("Websocket opened: " + evt.type);
+        // connected, turn off the dark overlay
+        document.getElementById("overlay").style.display = "none"; 
     };
 
     connection.onmessage = function (evt) {
         const json = JSON.parse(evt.data);
-        console.log("websocket message received: ", json);
+        console.log("Websocket message received: ", json);
         if (initStillToBeDone) {
             if (json.type == "init") {
                 initReceived(json.data);
@@ -48,13 +50,28 @@ function createSocket() {
     }
 
     connection.onerror = function (evt) {
-        console.error("websocket error: ", evt.type);
+        console.error("Websocket error: ", evt.type);
+        // this will also fire the onclose after this
     }
 
     connection.onclose = function (evt) {
-        console.log("WebSocket is closed now: " + evt.type);
+        console.log("WebSocket is closed: ", evt.type);
+        // dark overlay displayed so that it's clear the connection has gone
+        document.getElementById("overlay").style.display = "block"; 
+        // try to reconnect after 1 second
+        setTimeout(function () {
+            websocket = createSocket();
+        }, 1000);
     };
 
+    setTimeout(function () {
+        // close the socket if no connection established after 3 seconds
+        // otherwise it will wait with the reconnect after a timeout of 2 minutes
+        if (websocket.readyState != 1) {
+            websocket.close();
+        }
+    }, 3000);
+
     return connection;
 }