More work on database manager

client/plugins/databasemanager/src/airuniteditor.ts

@@ -11,14 +11,19 @@ export class AirUnitEditor extends UnitEditor {
         super(contentDiv1, contentDiv2, contentDiv3);
         this.#loadoutEditor = new LoadoutEditor(this.contentDiv3);
         this.contentDiv2.addEventListener("refresh", () => { 
-            if (this.#blueprint !== null)
-                this.setBlueprint(this.#blueprint);
+            if (this.visible) {
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+            }
         });
         
         this.contentDiv3.addEventListener("refresh", () => { 
-            if (this.#blueprint !== null)
-                this.setBlueprint(this.#blueprint);
-            this.#loadoutEditor?.show();
+            if (this.visible) {
+                console.log("refresh")
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+                this.#loadoutEditor?.show();
+            }
         });
     }
 
@@ -72,4 +77,9 @@ export class AirUnitEditor extends UnitEditor {
             this.setBlueprint(this.#blueprint);
         }    
     }
+
+    hide() {
+        super.hide();
+        this.#loadoutEditor?.hide();
+    }
 }

client/plugins/databasemanager/src/databasemanagerplugin.ts

@@ -1,6 +1,8 @@
 import { OlympusPlugin } from "interfaces";
 import { AirUnitEditor } from "./airuniteditor";
 import { OlympusApp } from "olympusapp";
+import { GroundUnitEditor } from "./grounduniteditor";
+import { PrimaryToolbar } from "toolbars/primarytoolbar";
 
 export class DatabaseManagerPlugin implements OlympusPlugin {
     #app: OlympusApp | null = null;
@@ -11,56 +13,102 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
     #contentDiv2: HTMLElement;
     #contentDiv3: HTMLElement;
 
+    #button1: HTMLButtonElement;
+    #button2: HTMLButtonElement;
+    #button3: HTMLButtonElement;
+    #button4: HTMLButtonElement;
+
+    #button5: HTMLButtonElement;
+    #button6: HTMLButtonElement;
+    #button7: HTMLButtonElement;
+    #button8: HTMLButtonElement;
+
     #aircraftEditor: AirUnitEditor;
     #helicopterEditor: AirUnitEditor;
-        
+    #groundUnitEditor: GroundUnitEditor;
+
     constructor() {
         this.#element = document.createElement("div");
-        this.#element.id = "database-control-panel";
+        this.#element.id = "database-manager-panel";
         this.#element.oncontextmenu = () => { return false; }
         this.#element.classList.add("ol-dialog");
         document.body.appendChild(this.#element);
 
-        let buttonContainer = document.createElement("div");
+        this.toggle(false);
 
-        let button1 = document.createElement("button");
-        button1.textContent = "Aircraft";
-        button1.onclick = () => this.#aircraftEditor.show();
-        buttonContainer.appendChild(button1);
+        let topButtonContainer = document.createElement("div");
 
-        let button2 = document.createElement("button");
-        button2.textContent = "Helicopter";
-        button2.onclick = () => this.#helicopterEditor.show();
-        buttonContainer.appendChild(button2);
+        this.#button1 = document.createElement("button");
+        this.#button1.classList.add("tab-button");
+        this.#button1.textContent = "Aircraft database";
+        this.#button1.onclick = () => { this.hideAll(); this.#aircraftEditor.show(); this.#button1.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button1);
 
-        let button3 = document.createElement("button");
-        button3.textContent = "Ground Unit";
-        buttonContainer.appendChild(button3);
+        this.#button2 = document.createElement("button");
+        this.#button2.classList.add("tab-button");
+        this.#button2.textContent = "Helicopter database";
+        this.#button2.onclick = () => { this.hideAll(); this.#helicopterEditor.show(); this.#button2.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button2);
 
-        let button4 = document.createElement("button");
-        button4.textContent = "Navy Unit";
-        buttonContainer.appendChild(button4);
+        this.#button3 = document.createElement("button");
+        this.#button3.classList.add("tab-button");
+        this.#button3.textContent = "Ground Unit database";
+        this.#button3.onclick = () => { this.hideAll(); this.#groundUnitEditor.show(); this.#button3.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button3);
 
-        this.#element.appendChild(buttonContainer);
+        this.#button4 = document.createElement("button");
+        this.#button4.classList.add("tab-button");
+        this.#button4.textContent = "Navy Unit database";
+        topButtonContainer.appendChild(this.#button4);
+
+        this.#element.appendChild(topButtonContainer);
 
         this.#container = document.createElement("div");
-        this.#container.classList.add("dc-container");
+        this.#container.classList.add("dm-container");
         this.#element.appendChild(this.#container)
 
         this.#contentDiv1 = document.createElement("div");
-        this.#contentDiv1.classList.add("dc-content-container");
+        this.#contentDiv1.classList.add("dm-content-container");
         this.#container.appendChild(this.#contentDiv1);
 
         this.#contentDiv2 = document.createElement("div");
-        this.#contentDiv2.classList.add("dc-content-container");
+        this.#contentDiv2.classList.add("dm-content-container");
         this.#container.appendChild(this.#contentDiv2);
 
         this.#contentDiv3 = document.createElement("div");
-        this.#contentDiv3.classList.add("dc-content-container");
+        this.#contentDiv3.classList.add("dm-content-container");
         this.#container.appendChild(this.#contentDiv3);
 
         this.#aircraftEditor = new AirUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
         this.#helicopterEditor = new AirUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
+        this.#groundUnitEditor = new GroundUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
+
+        let bottomButtonContainer = document.createElement("div");
+
+        this.#button5 = document.createElement("button");
+        this.#button5.textContent = "Save";
+        this.#button5.title = "Save the changes on the server"
+        this.#button5.onclick = () => { };
+        bottomButtonContainer.appendChild(this.#button5);
+
+        this.#button6 = document.createElement("button");
+        this.#button6.textContent = "Discard";
+        this.#button6.title = "Discard all changes and reload the database from the server"
+        this.#button6.onclick = () => { this.loadDatabases(); };
+        bottomButtonContainer.appendChild(this.#button6);
+
+        this.#button7 = document.createElement("button");
+        this.#button7.textContent = "Reload";
+        this.#button7.onclick = () => { };
+        //bottomButtonContainer.appendChild(this.#button7);
+
+        this.#button8 = document.createElement("button");
+        this.#button8.textContent = "Close";
+        this.#button8.title = "Close the Database Manager"
+        this.#button8.onclick = () => { this.toggle(false); };
+        bottomButtonContainer.appendChild(this.#button8);
+
+        this.#element.appendChild(bottomButtonContainer);
     }
 
     getName() {
@@ -69,25 +117,59 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
 
     initialize(app: any) {
         this.#app = app;
-        
-        var aircraftDatabase = this.#app?.getAircraftDatabase();
-        if (aircraftDatabase != null) {
-            this.#aircraftEditor.setDatabase(aircraftDatabase);
-        }
+        this.loadDatabases();
 
-        var helicopterDatabase = this.#app?.getHelicopterDatabase();
-        if (helicopterDatabase != null) {
-            this.#helicopterEditor.setDatabase(helicopterDatabase);
-        }
+        var mainButtonDiv = document.createElement("div");
+        var mainButton = document.createElement("button");
+        mainButton.textContent = "Database Manager";
+        mainButtonDiv.appendChild(mainButton);
+        var toolbar: PrimaryToolbar = this.#app?.getToolbarsManager().get("primaryToolbar") as PrimaryToolbar;
+        var elements = toolbar.getMainDropdown().getOptionElements();
+        var arr = Array.prototype.slice.call(elements);
+        arr.splice(arr.length - 1, 0, mainButtonDiv);
+        toolbar.getMainDropdown().setOptionsElements(arr);
+        mainButton.onclick = () => { this.toggle(); }
 
         return true;
     }
 
+    loadDatabases() {
+        var aircraftDatabase = this.#app?.getAircraftDatabase();
+        if (aircraftDatabase != null)
+            this.#aircraftEditor.setDatabase(aircraftDatabase);
+
+        var helicopterDatabase = this.#app?.getHelicopterDatabase();
+        if (helicopterDatabase != null)
+            this.#helicopterEditor.setDatabase(helicopterDatabase);
+
+        var groundUnitDatabase = this.#app?.getGroundUnitDatabase();
+        if (groundUnitDatabase != null)
+            this.#groundUnitEditor.setDatabase(groundUnitDatabase);
+
+        this.hideAll();
+        this.#aircraftEditor.show();
+        this.#button1.classList.add("selected");
+    }
+
     getElement() {
         return this.#element;
     }
 
     toggle(bool?: boolean) {
-        this.getElement().classList.toggle("hide", bool);
+        if (bool)
+            this.getElement().classList.toggle("hide", !bool);
+        else
+        this.getElement().classList.toggle("hide");
+    }
+
+    hideAll() {
+        this.#aircraftEditor.hide();
+        this.#helicopterEditor.hide();
+        this.#groundUnitEditor.hide();
+
+        this.#button1.classList.remove("selected");
+        this.#button2.classList.remove("selected");
+        this.#button3.classList.remove("selected");
+        this.#button4.classList.remove("selected");
     }
 }

client/plugins/databasemanager/src/grounduniteditor.ts

@@ -0,0 +1,55 @@
+import { UnitBlueprint } from "interfaces";
+import { UnitEditor } from "./uniteditor";
+import { addDropdownInput, addStringInput } from "./utils";
+
+export class GroundUnitEditor extends UnitEditor {
+    #blueprint: UnitBlueprint | null = null;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        super(contentDiv1, contentDiv2, contentDiv3);
+        this.contentDiv2.addEventListener("refresh", () => { 
+            if (this.visible) {
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+            }
+        });
+        
+        this.contentDiv3.addEventListener("refresh", () => { 
+            if (this.visible) {
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+            }
+        });
+    }
+
+    setBlueprint(blueprint: UnitBlueprint) {
+        this.#blueprint = blueprint;
+
+        if (this.#blueprint !== null) {
+            this.contentDiv2.replaceChildren();
+            
+            addStringInput(this.contentDiv2, "Name", blueprint.name, "text", (value: string) => {blueprint.name = value; }, true);
+            addStringInput(this.contentDiv2, "Label", blueprint.label, "text", (value: string) => {blueprint.label = value; });
+            addStringInput(this.contentDiv2, "Short label", blueprint.shortLabel, "text", (value: string) => {blueprint.shortLabel = value; });
+            addStringInput(this.contentDiv2, "Type", blueprint.type?? "", "text", (value: string) => {blueprint.type = value; });
+            addDropdownInput(this.contentDiv2, "Coalition", blueprint.coalition, ["", "blue", "red"],);
+            addDropdownInput(this.contentDiv2, "Era", blueprint.era, ["WW2", "Early Cold War", "Mid Cold War", "Late Cold War", "Modern"]);
+            addStringInput(this.contentDiv2, "Filename", blueprint.filename?? "", "text", (value: string) => {blueprint.filename = value; });
+            addStringInput(this.contentDiv2, "Cost", String(blueprint.cost)?? "", "number", (value: string) => {blueprint.cost = parseFloat(value); });
+        }
+    }
+
+    addBlueprint(key: string) {
+        if (this.database != null) {
+            this.database.blueprints[key] = {
+                name: key,
+                coalition: "",
+                label: "",
+                shortLabel: "",
+                era: ""
+            }
+            this.show();
+            this.setBlueprint(this.database.blueprints[key]);
+        }
+    }
+}

client/plugins/databasemanager/src/loadouteditor.ts

@@ -4,10 +4,15 @@ import { addLoadoutItemsEditor, addStringInput } from "./utils";
 export class LoadoutEditor {
     #contentDiv: HTMLElement;
     #loadout: LoadoutBlueprint | null = null;
+    #visible: boolean = false;
 
     constructor(contentDiv: HTMLElement) {
+        
         this.#contentDiv = contentDiv;
-        this.#contentDiv.addEventListener("refresh", () => { this.show(); })
+        this.#contentDiv.addEventListener("refresh", () => { 
+            if (this.#visible)
+                this.show(); 
+        })
     }
 
     setLoadout(loadout: LoadoutBlueprint) {
@@ -15,6 +20,7 @@ export class LoadoutEditor {
     }
 
     show() {
+        this.#visible = true;
         this.#contentDiv.replaceChildren();
 
         if (this.#loadout) {
@@ -26,6 +32,7 @@ export class LoadoutEditor {
     }
 
     hide() {
+        this.#visible = false;
         this.#contentDiv.replaceChildren();
     }
 }

client/plugins/databasemanager/src/uniteditor.ts

@@ -4,6 +4,7 @@ import { addBlueprintsScroll, addNewElementInput } from "./utils";
 
 export abstract class UnitEditor {
     database: {blueprints: {[key: string]: UnitBlueprint}} | null = null;
+    visible: boolean = false;
     contentDiv1: HTMLElement;
     contentDiv2: HTMLElement;
     contentDiv3: HTMLElement;
@@ -12,7 +13,10 @@ export abstract class UnitEditor {
         this.contentDiv1 = contentDiv1;
         this.contentDiv2 = contentDiv2;
         this.contentDiv3 = contentDiv3;
-        this.contentDiv1.addEventListener("refresh", () => { this.show(); })
+        this.contentDiv1.addEventListener("refresh", () => { 
+            if (this.visible)
+                this.show(); 
+        })
     }
 
     setDatabase(database: UnitDatabase) {
@@ -20,6 +24,7 @@ export abstract class UnitEditor {
     }
 
     show() {
+        this.visible = true;
         this.contentDiv1.replaceChildren();
         this.contentDiv2.replaceChildren();
         this.contentDiv3.replaceChildren();
@@ -37,6 +42,7 @@ export abstract class UnitEditor {
     }
 
     hide() {
+        this.visible = false;
         this.contentDiv1.replaceChildren();
         this.contentDiv2.replaceChildren();
         this.contentDiv3.replaceChildren();

client/plugins/databasemanager/src/utils.ts

@@ -40,7 +40,7 @@ export function addDropdownInput(div: HTMLElement, key: string, value: string, o
 
 export function addLoadoutItemsEditor(div: HTMLElement, loadout: LoadoutBlueprint) {
     var itemsEl = document.createElement("div");
-    itemsEl.classList.add("dc-scroll-container", "dc-items-container");
+    itemsEl.classList.add("dm-scroll-container", "dm-items-container");
     loadout.items.forEach((item: LoadoutItemBlueprint, index: number) => {
         var rowDiv = document.createElement("div");
 
@@ -79,7 +79,7 @@ export function addLoadoutItemsEditor(div: HTMLElement, loadout: LoadoutBlueprin
     div.appendChild(itemsEl);
 
     var inputDiv = document.createElement("div");
-    inputDiv.classList.add("dc-new-item-input");
+    inputDiv.classList.add("dm-new-item-input");
     var button = document.createElement("button");
     button.innerText = "Add";
     inputDiv.appendChild(button);
@@ -96,7 +96,7 @@ export function addLoadoutItemsEditor(div: HTMLElement, loadout: LoadoutBlueprin
 
 export function addNewElementInput(div: HTMLElement, callback: CallableFunction) {
     var inputDiv = document.createElement("div");
-    inputDiv.classList.add("dc-new-element-input");
+    inputDiv.classList.add("dm-new-element-input");
     var input = document.createElement("input");
     inputDiv.appendChild(input);
     var button = document.createElement("button");
@@ -108,7 +108,7 @@ export function addNewElementInput(div: HTMLElement, callback: CallableFunction)
 
 export function addBlueprintsScroll(div: HTMLElement, database: {blueprints: {[key: string]: UnitBlueprint}}, callback: CallableFunction) {
     var scrollDiv = document.createElement("div");
-    scrollDiv.classList.add("dc-scroll-container");
+    scrollDiv.classList.add("dm-scroll-container");
     if (database !== null) {
         var blueprints: {[key: string]: UnitBlueprint} = database.blueprints;
 
@@ -135,7 +135,7 @@ export function addBlueprintsScroll(div: HTMLElement, database: {blueprints: {[k
 
 export function addLoadoutsScroll(div: HTMLElement, loadouts: LoadoutBlueprint[], callback: CallableFunction) {
     var loadoutsEl = document.createElement("div");
-    loadoutsEl.classList.add("dc-scroll-container", "dc-loadout-container")
+    loadoutsEl.classList.add("dm-scroll-container", "dm-loadout-container")
     
     loadouts.forEach((loadout: LoadoutBlueprint, index: number) => {
         var rowDiv = document.createElement("div");