Styled the server load panel

client/src/index.ts

@@ -17,6 +17,7 @@ import { Dropdown } from "./controls/dropdown";
 import { HotgroupPanel } from "./panels/hotgrouppanel";
 import { SVGInjector } from "@tanem/svg-injector";
 import { BLUE_COMMANDER, GAME_MASTER, RED_COMMANDER } from "./constants/constants";
+import { ServerStatusPanel } from "./panels/serverstatuspanel";
 
 var map: Map;
 
@@ -28,6 +29,7 @@ var atc: ATC;
 
 var unitInfoPanel: UnitInfoPanel;
 var connectionStatusPanel: ConnectionStatusPanel;
+var serverStatusPanel: ServerStatusPanel;
 var unitControlPanel: UnitControlPanel;
 var mouseInfoPanel: MouseInfoPanel;
 var logPanel: LogPanel;
@@ -53,9 +55,10 @@ function setup() {
     unitInfoPanel = new UnitInfoPanel("unit-info-panel");
     unitControlPanel = new UnitControlPanel("unit-control-panel");
     connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
+    serverStatusPanel = new ServerStatusPanel("server-status-panel");
     mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
     hotgroupPanel = new HotgroupPanel("hotgroup-panel");
-    //logPanel = new LogPanel("log-panel");
+    
 
     /* Popups */
     infoPopup = new Popup("info-popup");
@@ -247,6 +250,10 @@ export function getConnectionStatusPanel() {
     return connectionStatusPanel;
 }
 
+export function getServerStatusPanel() {
+    return serverStatusPanel;
+}
+
 export function getHotgroupPanel() {
     return hotgroupPanel;
 }

client/src/panels/connectionstatuspanel.ts

@@ -8,12 +8,4 @@ export class ConnectionStatusPanel extends Panel {
     update(connected: boolean) {
         this.getElement().toggleAttribute( "data-is-connected", connected );
     }
-
-    setMetrics(frameRate: number, load: number) {
-        const dt = this.getElement().querySelector("dt");
-        if (dt) {
-            dt.dataset["framerate"] = String(frameRate);
-            dt.dataset["load"] = String(load);
-        }
-    }
 }

client/src/panels/serverstatuspanel.ts

@@ -0,0 +1,26 @@
+import { Panel } from "./panel";
+
+export class ServerStatusPanel extends Panel {
+    constructor(ID: string) {
+        super(ID);
+    }
+
+    update(frameRate: number, load: number) {
+        const frameRateEl = this.getElement().querySelector("#server-frame-rate");
+        if (frameRateEl) {
+            frameRateEl.textContent = `${frameRate}`;
+            frameRateEl.classList.toggle("fps-high", frameRate >= 60)
+            frameRateEl.classList.toggle("fps-medium", frameRate >= 30 && frameRate < 60)
+            frameRateEl.classList.toggle("fps-low", frameRate <= 30)
+        }
+
+        const loadEl = this.getElement().querySelector("#server-load");
+        if (loadEl) {
+            loadEl.textContent = `${load}`;
+            loadEl.classList.toggle("load-high", load >= 1000)
+            loadEl.classList.toggle("load-medium", load >= 100 && load < 1000)
+            loadEl.classList.toggle("load-low", load <= 100)
+        }
+        
+    }
+}

client/src/server/server.ts

@@ -1,5 +1,5 @@
 import { LatLng } from 'leaflet';
-import { getConnectionStatusPanel, getInfoPopup, getMissionData, getUnitDataTable, getUnitsManager, setLoginStatus } from '..';
+import { getConnectionStatusPanel, getInfoPopup, getMissionData, getServerStatusPanel, getUnitDataTable, getUnitsManager, setLoginStatus } from '..';
 import { GeneralSettings, Radio, TACAN } from '../@types/unit';
 import { ROEs, emissionsCountermeasures, reactionsToThreat } from '../constants/constants';
 
@@ -59,8 +59,8 @@ export function GET(callback: CallableFunction, uri: string, options?: { time?:
                 const result = JSON.parse(xmlHttp.responseText);
                 lastUpdateTimes[uri] = callback(result);
 
-                if ("frameRate" in result && "load" in result)
-                    getConnectionStatusPanel().setMetrics(result.frameRate, result.load);
+                if (result.frameRate && result.load)
+                    getServerStatusPanel().update(result.frameRate, result.load);
             }
         } else if (xmlHttp.status == 401) {
             /* Bad credentials */