Minor graphic changes

client/src/dcs/dcs.ts

@@ -1,5 +1,5 @@
 import * as L from 'leaflet'
-import { getUnitsManager } from '..';
+import { getUnitsManager, setConnected } from '..';
 import { ConvertDDToDMS } from '../other/utils';
 
 /* Edit here to change server address */
@@ -15,10 +15,12 @@ export function getDataFromDCS(callback: CallableFunction)
     {
         var data = JSON.parse(xmlHttp.responseText);
         callback(data);
+        setConnected(true);
     };
 
     xmlHttp.onerror = function () {
         console.error("An error occurred during the XMLHttpRequest");
+        setConnected(false);
     };
     xmlHttp.send( null );
 }

client/src/index.ts

@@ -5,7 +5,9 @@ import { UnitsManager } from "./units/unitsmanager";
 import { UnitInfoPanel } from "./panels/unitinfopanel";
 import { SelectionScroll } from "./controls/selectionscroll";
 import { Dropdown } from "./controls/dropdown";
+import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
 
+/* TODO: should this be a class? */
 var map: Map;
 var selectionWheel: SelectionWheel;
 var selectionScroll: SelectionScroll;
@@ -14,6 +16,8 @@ var unitInfoPanel: UnitInfoPanel;
 var activeCoalition: string;
 var scenarioDropdown: Dropdown;
 var mapSourceDropdown: Dropdown;
+var connected: boolean;
+var connectionStatusPanel: ConnectionStatusPanel;
 
 function setup()
 {
@@ -25,14 +29,24 @@ function setup()
     unitInfoPanel = new UnitInfoPanel("unit-info-panel");
     scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Nevada", "Marianas", "South Atlantic", "The channel"], () => {});
     mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
+    connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
 
+    /* Default values */
     activeCoalition = "blue";
+    connected = false;
 
-    /* Main update rate = 250ms is minimum time, equal to server update time. */
-    setInterval(() => getDataFromDCS(update), 250);
+    requestUpdate();
 }
 
-function update(data: JSON)
+function requestUpdate()
+{
+    getDataFromDCS(update);
+    /* Main update rate = 250ms is minimum time, equal to server update time. */
+    setTimeout(() => requestUpdate(), getConnected() ? 250: 1000);
+    connectionStatusPanel.update(getConnected() );
+}
+
+export function update(data: JSON)
 {
     unitsManager.update(data);
 }
@@ -62,9 +76,9 @@ export function getUnitInfoPanel()
     return unitInfoPanel;
 }
 
-export function setActiveCoalition(coalition: string)
+export function setActiveCoalition(newActiveCoalition: string)
 {
-    activeCoalition = coalition;
+    activeCoalition = newActiveCoalition;
 }
 
 export function getActiveCoalition()
@@ -72,4 +86,14 @@ export function getActiveCoalition()
     return activeCoalition;
 }
 
+export function setConnected(newConnected: boolean)
+{
+    connected = newConnected
+}
+
+export function getConnected()
+{
+    return connected;
+}
+
 window.onload = setup;

client/src/panels/connectionstatuspanel.ts

@@ -0,0 +1,32 @@
+export class ConnectionStatusPanel
+{
+    #element: HTMLElement
+
+    constructor(ID: string)
+    {
+        this.#element = <HTMLElement>document.getElementById(ID);
+    }
+
+    update(connected: boolean)
+    {
+        if (this.#element != null)
+        {
+            var div = this.#element.querySelector("#status-string");
+            if (div != null)
+            {
+                if (connected)
+                {
+                    div.innerHTML = "Connected";
+                    div.classList.add("olympus-status-connected");
+                    div.classList.remove("olympus-status-disconnected");
+                }
+                else
+                {
+                    div.innerHTML = "Disconnected";
+                    div.classList.add("olympus-status-disconnected");
+                    div.classList.remove("olympus-status-connected");
+                }
+            }
+        }
+    }
+}

client/src/panels/unitinfopanel.ts

@@ -13,7 +13,7 @@ export class UnitInfoPanel
         if (this.#element != null)
         {
             this.#display = this.#element.style.display;
-            this.hide();
+            this.show();
         }
     }