Export matrix reads from data

client/public/stylesheets/style/style.css

@@ -740,7 +740,16 @@ nav.ol-panel> :last-child {
 }
 
 /****************************************************************************************/
-#import-from-file-dialog td {
+#unit-import-export-dialog th {
+    padding:4px 8px;
+}
+
+#unit-import-export-dialog tr :first-child {
+    text-align: left;
+}
+
+#unit-import-export-dialog td {
+    color:white;
     text-align: center;
 }
 

client/src/unit/unitdatafile.ts

@@ -0,0 +1,3 @@
+export abstract class unitDataFile {
+    constructor() {}
+}

client/src/unit/unitdatafileexport.ts

@@ -0,0 +1,73 @@
+import { Dialog } from "../dialog/dialog";
+import { Unit } from "./unit";
+import { unitDataFile } from "./unitdatafile";
+
+export class UnitDataFileExport extends unitDataFile {
+
+    #dialog:Dialog;
+    #element!:HTMLElement;
+    #categoryCoalitionHeaders!: HTMLElement;
+    #categoryCoalitionMatrix!: HTMLElement;
+
+    constructor( elementId:string ) {
+        super();
+        this.#dialog = new Dialog(elementId);
+        this.#element = this.#dialog.getElement();
+        this.#categoryCoalitionMatrix  = <HTMLElement>this.#element.querySelector("tbody");
+        this.#categoryCoalitionHeaders = <HTMLElement>this.#element.querySelector("thead");
+    }
+
+    /**
+     * Show the form to start the export journey
+     */
+    showForm(units:Unit[]) {
+        this.#element.setAttribute( "data-mode", "export" );
+        
+        const data:any = {};
+
+        const categories:string[] = [];
+        const coalitions:string[] = [];
+
+        units.filter((unit:Unit) => unit.getControlled() && unit.getAlive()).forEach((unit:Unit) => {
+            const category = unit.getCategory();
+            const coalition = unit.getCoalition();
+
+            if (!coalitions.includes(coalition))
+                coalitions.push(coalition);
+
+            if (!data.hasOwnProperty(category)) {
+                data[category] = {};
+                categories.push(category);
+            }
+
+            //  Cache unit data
+            if (!data[category].hasOwnProperty(coalition))
+                data[category][coalition] = [];
+
+            data[category][coalition].push(unit);
+        });
+
+        categories.sort();
+        coalitions.sort();
+
+        let headersHTML:string = ``;
+        let matrixHTML:string = ``;
+
+        categories.forEach((category:string, index) => {
+            matrixHTML += `<tr><td>${category}</td>`;
+
+            coalitions.forEach((coalition:string) => {
+                if (index === 0)
+                    headersHTML += `<th data-coalition="${coalition}">${coalition}</th>`;
+                matrixHTML += `<td data-coalition="${coalition}">${(data[category].hasOwnProperty(coalition)) ? `<input type="checkbox" value="${category}:${coalition}" checked />`: "-"}</td>`;
+            });
+
+            matrixHTML += "</tr>";
+        });
+
+        this.#categoryCoalitionHeaders.innerHTML = `<tr><td>&nbsp;</td>${headersHTML}</tr>`;
+        this.#categoryCoalitionMatrix.innerHTML = matrixHTML;
+        this.#dialog.show();
+    }
+
+}

client/src/unit/unitsmanager.ts

@@ -15,6 +15,7 @@ import { Popup } from "../popups/popup";
 import { HotgroupPanel } from "../panels/hotgrouppanel";
 import { Contact, UnitData, UnitSpawnTable } from "../interfaces";
 import { Dialog } from "../dialog/dialog";
+import { UnitDataFileExport } from "./unitdatafileexport";
 
 /** The UnitsManager handles the creation, update, and control of units. Data is strictly updated by the server ONLY. This means that any interaction from the user will always and only
  * result in a command to the server, executed by means of a REST PUT request. Any subsequent change in data will be reflected only when the new data is sent back by the server. This strategy allows
@@ -985,6 +986,9 @@ export class UnitsManager {
      *  TODO: Extend to aircraft and helicopters
      */
     exportToFile() {
+        const fileExport = new UnitDataFileExport("unit-import-export-dialog");
+        fileExport.showForm(Object.values(this.#units));
+        return;
         var unitsToExport: { [key: string]: any } = {};
         for (let ID in this.#units) {
             var unit = this.#units[ID];

client/views/other/dialogs.ejs

@@ -1,6 +1,6 @@
 <%- include('dialogs/advancedsettings.ejs') %>
 <%- include('dialogs/commandmodesettings.ejs') %>
 <%- include('dialogs/customformation.ejs') %>
-<%- include('dialogs/importfromfile.ejs') %>
+<%- include('dialogs/importexport.ejs') %>
 <%- include('dialogs/slowdelete.ejs') %>
 <%- include('dialogs/splash.ejs') %>

client/views/other/dialogs/importexport.ejs

@@ -0,0 +1,20 @@
+<div id="unit-import-export-dialog" class="ol-panel ol-dialog hide" oncontextmenu="return false;">
+    <div class="ol-dialog-header">
+        <h3>Export unit data to file</h3>
+    </div>
+
+    <div class="ol-dialog-content">
+        <p>This data will only include Olympus-controlled units.</p>
+        <table>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="ol-dialog-footer ol-group">
+        <button>Export units to file</button>
+        <button>Cancel</button>
+    </div>
+</div>

client/views/other/dialogs/importfromfile.ejs

@@ -1,43 +0,0 @@
-<div id="import-from-file-dialog" class="ol-panel ol-dialog" oncontextmenu="return false;">
-    <div class="ol-dialog-header">
-        <h3>Import from file</h3>
-    </div>
-
-    <div class="ol-dialog-content">
-        <table>
-            <thead>
-                <tr>
-                    <td>&nbsp;</td>
-                    <th>BLUEFOR</th>
-                    <th>NEUTRAL</th>
-                    <th>REDFOR</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <th>Aircraft</th>
-                    <td><input type="checkbox" checked /></td>
-                    <td></td>
-                    <td><input type="checkbox" checked /></td>
-                </tr>
-                <tr>
-                    <th>Helicopter</th>
-                    <td>&nbsp;</td>
-                    <td>&nbsp;</td>
-                    <td><input type="checkbox" checked /></td>
-                </tr>
-                <tr>
-                    <th>Ground units</th>
-                    <td><input type="checkbox" checked /></td>
-                    <td><input type="checkbox" checked /></td>
-                    <td><input type="checkbox" checked /></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <div class="ol-dialog-footer ol-group">
-        <button>Import units from file</button>
-        <button>Cancel</button>
-    </div>
-</div>