Styled the server load panel

client/demo.js

@@ -290,8 +290,10 @@ class DemoDataGenerator {
     }
     
     logs(req, res){
-        var ret = {logs: {}};
+        var ret = {logs: {"1": "I'm a log!", "2": "I'm a different log!"}};
         ret.time = Date.now();
+        ret.frameRate = 60;
+        ret.load = 0;
         res.send(JSON.stringify(ret));
     };
     

client/public/stylesheets/layout/layout.css

@@ -38,7 +38,16 @@
 	font-size: 12px;
 	position: absolute;
 	right: 10px;
-	width: 250px;
+	width: 180px;
+	z-index: 9999;
+}
+
+#server-status-panel {
+	bottom: 20px;
+	font-size: 12px;
+	position: absolute;
+	right: 200px;
+	width: 300px;
 	z-index: 9999;
 }
 

client/public/stylesheets/olympus.css

@@ -3,6 +3,7 @@
 @import url("atc/unitdatatable.css");
 @import url("aic/aic.css");
 @import url("panels/connectionstatus.css");
+@import url("panels/serverstatus.css");
 @import url("panels/mouseinfo.css");
 @import url("panels/unitcontrol.css");
 @import url("panels/unitinfo.css");

client/public/stylesheets/panels/connectionstatus.css

@@ -11,7 +11,7 @@
 }
 
 #connection-status-panel[data-is-connected] dt::before {
-	content: "Connected FPS: " attr(data-framerate) " Load: " attr(data-load);
+	content: "Connected";
 }
 
 #connection-status-panel[data-is-connected] dd::after {

client/public/stylesheets/panels/serverstatus.css

@@ -0,0 +1,43 @@
+#server-status-panel {
+	display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    column-gap: 10px;
+}
+
+#server-status-panel .ol-data-grid {
+    width: 100%;
+}
+
+#server-status-panel .ol-data-grid:first-of-type {
+    border-right: 1px solid gray;
+    padding-right: 10px;
+}
+
+#server-status-panel dd {
+    font-weight: bold;
+}
+
+.fps-low {
+    color: red;
+}
+
+.fps-medium {
+    color: orange;
+}
+
+.fps-high {
+    color: lightgreen;
+}
+
+.load-low {
+    color: lightgreen;
+}
+
+.load-medium {
+    color: orange;
+}
+
+.load-high {
+    color: red;
+}

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 */

client/views/index.ejs

@@ -24,6 +24,7 @@
   <%- include('panels/unitinfo.ejs') %>
   <%- include('panels/mouseinfo.ejs') %>
   <%- include('panels/connectionstatus.ejs') %>
+  <%- include('panels/serverstatus.ejs') %>
   <%- include('panels/hotgroup.ejs') %>
   <%- include('panels/navbar.ejs') %>
 

client/views/panels/serverstatus.ejs

@@ -0,0 +1,10 @@
+<div id="server-status-panel" class="ol-panel" oncontextmenu="return false;">
+    <dl class="ol-data-grid">
+        <dt>Server frame rate:</dt>
+        <dd id="server-frame-rate"></dd>
+    </dl>
+    <dl class="ol-data-grid">
+        <dt>Olympus load:</dt>
+        <dd id="server-load"></dd>
+    </dl>
+</div>