First commit

client/src/panels/connectionstatuspanel.ts

@@ -2,7 +2,7 @@ import { Panel } from "./panel";
 
 export class ConnectionStatusPanel extends Panel {
     constructor(ID: string) {
-        super(ID);
+        super( ID );
     }
 
     update(connected: boolean) {

client/src/panels/hotgrouppanel.ts

@@ -4,7 +4,7 @@ import { Panel } from "./panel";
 
 export class HotgroupPanel extends Panel {
     constructor(ID: string) {
-        super(ID);
+        super( ID );
         document.addEventListener("unitDeath", () => this.refreshHotgroups());
     }
 

client/src/panels/logpanel.ts

@@ -8,7 +8,7 @@ export class LogPanel extends Panel {
     #logs: {[key: string]: string} = {};
 
     constructor(ID: string) {
-        super(ID);
+        super( ID );
 
         document.addEventListener("toggleLogPanel", () => {
             this.getElement().classList.toggle("open");

client/src/panels/mouseinfopanel.ts

@@ -13,7 +13,7 @@ export class MouseInfoPanel extends Panel {
     #measureBox: HTMLElement;
 
     constructor(ID: string) {
-        super(ID);
+        super( ID );
 
         this.#measureIcon = new Icon({ iconUrl: 'resources/theme/images/icons/pin.svg', iconAnchor: [16, 32] });
         this.#measureMarker = new Marker([0, 0], { icon: this.#measureIcon, interactive: false });

client/src/panels/panel.ts

@@ -1,6 +1,11 @@
-export class Panel {
+import { OlympusApp } from "../olympusapp";
+import { PanelEventsManager } from "./paneleventsmanager";
+
+export abstract class Panel {
+
     #element: HTMLElement
-    #visible: boolean = true;
+    #eventsManager!: PanelEventsManager;
+    #olympusApp!: OlympusApp;
 
     constructor(ID: string) {
         this.#element = <HTMLElement>document.getElementById(ID);
@@ -8,17 +13,17 @@ export class Panel {
 
     show() {
         this.#element.classList.toggle("hide", false);
-        this.#visible = true;
+        this.getEventsManager()?.trigger( "show", {} );
     }
 
     hide() {
         this.#element.classList.toggle("hide", true);
-        this.#visible = false;
+        this.getEventsManager()?.trigger( "hide", {} );
     }
 
     toggle() {
         // Simple way to track if currently visible
-        if (this.#visible)
+        if (this.getVisible())
             this.hide();
         else 
             this.show();
@@ -29,6 +34,20 @@ export class Panel {
     }
 
     getVisible(){
-        return this.#visible;
+        return (!this.getElement().classList.contains( "hide" ) );
     }
+
+    getEventsManager() {
+        return this.#eventsManager;
+    }
+
+    getOlympusApp() {
+        return this.#olympusApp;
+    }
+
+    setOlympusApp( olympusApp:OlympusApp ) {
+        this.#olympusApp   = olympusApp;
+        this.#eventsManager = new PanelEventsManager( this.getOlympusApp() );
+    }
+
 }

client/src/panels/paneleventsmanager.ts

@@ -0,0 +1,50 @@
+import { OlympusApp } from "../olympusapp";
+import { EventsManager } from "../other/eventsmanager";
+
+interface IListener {
+    callback: CallableFunction;
+    name?: string
+}
+
+export class PanelEventsManager extends EventsManager {
+
+    constructor( olympusApp:OlympusApp ) {
+        
+        super( olympusApp );
+
+        this.add( "hide", [] );
+        this.add( "show", [] );
+
+    }
+
+    on( eventName:string, listener:IListener ) {
+
+        const event = this.get( eventName );
+
+        if ( !event ) {
+            throw new Error( `Event name "${eventName}" is not valid.` );
+        }
+
+        this.get( eventName ).push({
+            "callback": listener.callback
+        });
+
+    }
+
+    trigger( eventName:string, contextData:object ) {
+
+        const listeners = this.get( eventName );
+
+        if ( listeners ) {
+
+            listeners.forEach( ( listener:IListener ) => {
+
+                listener.callback( contextData );
+
+            });
+
+        }
+
+    }
+
+}

client/src/panels/panelsmanager.ts

@@ -0,0 +1,17 @@
+import { OlympusApp } from "../olympusapp";
+import { Manager } from "../other/manager";
+import { Panel } from "./panel";
+
+export class PanelsManager extends Manager {
+
+    #panels: { [key:string]: Panel } = {}
+
+    constructor( olympusApp:OlympusApp ) {
+        super( olympusApp );
+    }
+
+    get( name:string ): Panel {
+        return super.get( name );
+    }
+
+}

client/src/panels/serverstatuspanel.ts

@@ -2,7 +2,7 @@ import { Panel } from "./panel";
 
 export class ServerStatusPanel extends Panel {
     constructor(ID: string) {
-        super(ID);
+        super( ID );
     }
 
     update(frameRate: number, load: number) {

client/src/panels/unitcontrolpanel.ts

@@ -26,7 +26,7 @@ export class UnitControlPanel extends Panel {
     #selectedUnitsTypes: string[] = [];
 
     constructor(ID: string) {
-        super(ID);
+        super( ID );
 
         /* Unit control sliders */
         this.#altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => { getUnitsManager().selectedUnitsSetAltitude(ftToM(value)); });

client/src/panels/unitinfopanel.ts

@@ -1,6 +1,4 @@
-import { getUnitsManager } from "..";
 import { Ammo } from "../@types/unit";
-import { ConvertDDToDMS, rad2deg } from "../other/utils";
 import { aircraftDatabase } from "../unit/aircraftdatabase";
 import { Unit } from "../unit/unit";
 import { Panel } from "./panel";
@@ -23,7 +21,7 @@ export class UnitInfoPanel extends Panel {
     #unitName: HTMLElement;
 
     constructor(ID: string) {
-        super(ID);
+        super( ID );
 
         this.#altitude = (this.getElement().querySelector("#altitude")) as HTMLElement;
         this.#currentTask = (this.getElement().querySelector("#current-task")) as HTMLElement;