mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Started readding old core frontend code
This commit is contained in:
Pax1601
66
frontend/react/src/unit/importexport/unitdatafile.ts
Normal file
66
frontend/react/src/unit/importexport/unitdatafile.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
//import { Dialog } from "../../dialog/dialog";
|
||||
//import { createCheckboxOption } from "../../other/utils";
|
||||
|
||||
var categoryMap = {
|
||||
"Aircraft": "Aircraft",
|
||||
"Helicopter": "Helicopter",
|
||||
"GroundUnit": "Ground units",
|
||||
"NavyUnit": "Naval units"
|
||||
}
|
||||
|
||||
export abstract class UnitDataFile {
|
||||
|
||||
protected data: any;
|
||||
//protected dialog!: Dialog;
|
||||
|
||||
constructor() { }
|
||||
|
||||
buildCategoryCoalitionTable() {
|
||||
|
||||
const categories = this.#getCategoriesFromData();
|
||||
const coalitions = ["blue", "neutral", "red"];
|
||||
|
||||
let headersHTML: string = ``;
|
||||
let matrixHTML: string = ``;
|
||||
|
||||
//categories.forEach((category: string, index) => {
|
||||
// matrixHTML += `<tr><td>${categoryMap[category as keyof typeof categoryMap]}</td>`;
|
||||
//
|
||||
// coalitions.forEach((coalition: string) => {
|
||||
// if (index === 0)
|
||||
// headersHTML += `<th data-coalition="${coalition}">${coalition[0].toUpperCase() + coalition.substring(1)}</th>`;
|
||||
//
|
||||
// const optionIsValid = this.data[category].hasOwnProperty(coalition);
|
||||
// let checkboxHTML = createCheckboxOption(``, category, optionIsValid, () => { }, {
|
||||
// "disabled": !optionIsValid,
|
||||
// "name": "category-coalition-selection",
|
||||
// "readOnly": !optionIsValid,
|
||||
// "value" : `${category}:${coalition}`
|
||||
// }).outerHTML;
|
||||
//
|
||||
// if (optionIsValid)
|
||||
// checkboxHTML = checkboxHTML.replace(`"checkbox"`, `"checkbox" checked`); // inner and outerHTML screw default checked up
|
||||
//
|
||||
// matrixHTML += `<td data-coalition="${coalition}">${checkboxHTML}</td>`;
|
||||
//
|
||||
// });
|
||||
// matrixHTML += "</tr>";
|
||||
//});
|
||||
//
|
||||
//const table = <HTMLTableElement>this.dialog.getElement().querySelector("table.categories-coalitions");
|
||||
|
||||
//(<HTMLElement>table.tHead).innerHTML = `<tr><td> </td>${headersHTML}</tr>`;
|
||||
//(<HTMLElement>table.querySelector(`tbody`)).innerHTML = matrixHTML;
|
||||
|
||||
}
|
||||
|
||||
#getCategoriesFromData() {
|
||||
const categories = Object.keys(this.data);
|
||||
categories.sort();
|
||||
return categories;
|
||||
}
|
||||
|
||||
getData() {
|
||||
return this.data;
|
||||
}
|
||||
}
|
||||
101
frontend/react/src/unit/importexport/unitdatafileexport.ts
Normal file
101
frontend/react/src/unit/importexport/unitdatafileexport.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { getApp } from "../../olympusapp";
|
||||
//import { Dialog } from "../../dialog/dialog";
|
||||
import { zeroAppend } from "../../other/utils";
|
||||
import { Unit } from "../unit";
|
||||
import { UnitDataFile } from "./unitdatafile";
|
||||
|
||||
export class UnitDataFileExport extends UnitDataFile {
|
||||
|
||||
protected data!: any;
|
||||
//protected dialog: Dialog;
|
||||
#element!: HTMLElement;
|
||||
#filename: string = "export.json";
|
||||
|
||||
constructor(elementId: string) {
|
||||
super();
|
||||
//this.dialog = new Dialog(elementId);
|
||||
//this.#element = this.dialog.getElement();
|
||||
|
||||
this.#element.querySelector(".start-transfer")?.addEventListener("click", (ev: MouseEventInit) => {
|
||||
this.#doExport();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form to start the export journey
|
||||
*/
|
||||
showForm(units: Unit[]) {
|
||||
//this.dialog.getElement().querySelectorAll("[data-on-error]").forEach((el:Element) => {
|
||||
// el.classList.toggle("hide", el.getAttribute("data-on-error") === "show");
|
||||
//});
|
||||
//
|
||||
//const data: any = {};
|
||||
//const unitCanBeExported = (unit: Unit) => !["Aircraft", "Helicopter"].includes(unit.getCategory());
|
||||
//
|
||||
//units.filter((unit: Unit) => unit.getAlive() && unitCanBeExported(unit)).forEach((unit: Unit) => {
|
||||
// const category = unit.getCategory();
|
||||
// const coalition = unit.getCoalition();
|
||||
//
|
||||
// if (!data.hasOwnProperty(category)) {
|
||||
// data[category] = {};
|
||||
// }
|
||||
//
|
||||
// if (!data[category].hasOwnProperty(coalition))
|
||||
// data[category][coalition] = [];
|
||||
//
|
||||
// data[category][coalition].push(unit);
|
||||
//});
|
||||
//
|
||||
//this.data = data;
|
||||
//this.buildCategoryCoalitionTable();
|
||||
//this.dialog.show();
|
||||
//
|
||||
//const date = new Date();
|
||||
//this.#filename = `olympus_${getApp().getMissionManager().getTheatre().replace(/[^\w]/gi, "").toLowerCase()}_${date.getFullYear()}${zeroAppend(date.getMonth() + 1, 2)}${zeroAppend(date.getDate(), 2)}_${zeroAppend(date.getHours(), 2)}${zeroAppend(date.getMinutes(), 2)}${zeroAppend(date.getSeconds(), 2)}.json`;
|
||||
//var input = this.#element.querySelector("#export-filename") as HTMLInputElement;
|
||||
//input.onchange = (ev: Event) => {
|
||||
// this.#filename = (ev.currentTarget as HTMLInputElement).value;
|
||||
//}
|
||||
//if (input)
|
||||
// input.value = this.#filename;
|
||||
}
|
||||
|
||||
#doExport() {
|
||||
|
||||
let selectedUnits: Unit[] = [];
|
||||
|
||||
this.#element.querySelectorAll(`input[type="checkbox"][name="category-coalition-selection"]:checked`).forEach(<HTMLInputElement>(checkbox: HTMLInputElement) => {
|
||||
if (checkbox instanceof HTMLInputElement) {
|
||||
const [category, coalition] = checkbox.value.split(":"); // e.g. "category:coalition"
|
||||
selectedUnits = selectedUnits.concat(this.data[category][coalition]);
|
||||
}
|
||||
});
|
||||
|
||||
if (selectedUnits.length === 0) {
|
||||
alert("Please select at least one option for export.");
|
||||
return;
|
||||
}
|
||||
|
||||
var unitsToExport: { [key: string]: any } = {};
|
||||
selectedUnits.forEach((unit: Unit) => {
|
||||
var data: any = unit.getData();
|
||||
if (unit.getGroupName() in unitsToExport)
|
||||
unitsToExport[unit.getGroupName()].push(data);
|
||||
else
|
||||
unitsToExport[unit.getGroupName()] = [data];
|
||||
});
|
||||
|
||||
|
||||
const a = document.createElement("a");
|
||||
const file = new Blob([JSON.stringify(unitsToExport)], { type: 'text/plain' });
|
||||
a.href = URL.createObjectURL(file);
|
||||
|
||||
var filename = this.#filename;
|
||||
if (!this.#filename.toLowerCase().endsWith(".json"))
|
||||
filename += ".json";
|
||||
a.download = filename;
|
||||
a.click();
|
||||
//this.dialog.hide();
|
||||
}
|
||||
|
||||
}
|
||||
150
frontend/react/src/unit/importexport/unitdatafileimport.ts
Normal file
150
frontend/react/src/unit/importexport/unitdatafileimport.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { getApp } from "../../olympusapp";
|
||||
//import { Dialog } from "../../dialog/dialog";
|
||||
import { UnitData } from "../../interfaces";
|
||||
//import { ImportFileJSONSchemaValidator } from "../../schemas/schema";
|
||||
import { UnitDataFile } from "./unitdatafile";
|
||||
|
||||
export class UnitDataFileImport extends UnitDataFile {
|
||||
|
||||
protected data!: any;
|
||||
//protected dialog: Dialog;
|
||||
#fileData!: { [key: string]: UnitData[] };
|
||||
|
||||
constructor(elementId: string) {
|
||||
super();
|
||||
//this.dialog = new Dialog(elementId);
|
||||
//this.dialog.getElement().querySelector(".start-transfer")?.addEventListener("click", (ev: MouseEventInit) => {
|
||||
// this.#doImport();
|
||||
// this.dialog.hide();
|
||||
//});
|
||||
}
|
||||
|
||||
#doImport() {
|
||||
|
||||
//let selectedCategories: any = {};
|
||||
//const unitsManager = getApp().getUnitsManager();
|
||||
//
|
||||
//this.dialog.getElement().querySelectorAll(`input[type="checkbox"][name="category-coalition-selection"]:checked`).forEach(<HTMLInputElement>(checkbox: HTMLInputElement) => {
|
||||
// if (checkbox instanceof HTMLInputElement) {
|
||||
// const [category, coalition] = checkbox.value.split(":"); // e.g. "category:coalition"
|
||||
// selectedCategories[category] = selectedCategories[category] || {};
|
||||
// selectedCategories[category][coalition] = true;
|
||||
// }
|
||||
//});
|
||||
//
|
||||
//for (const [groupName, groupData] of Object.entries(this.#fileData)) {
|
||||
// if (groupName === "" || groupData.length === 0 || !this.#unitGroupDataCanBeImported(groupData))
|
||||
// continue;
|
||||
//
|
||||
// let { category, coalition } = groupData[0];
|
||||
//
|
||||
// if (!selectedCategories.hasOwnProperty(category)
|
||||
// || !selectedCategories[category].hasOwnProperty(coalition)
|
||||
// || selectedCategories[category][coalition] !== true)
|
||||
// continue;
|
||||
//
|
||||
// let unitsToSpawn = groupData.filter((unitData: UnitData) => this.#unitDataCanBeImported(unitData)).map((unitData: UnitData) => {
|
||||
// return { unitType: unitData.name, location: unitData.position, liveryID: "", skill: "High" }
|
||||
// });
|
||||
//
|
||||
// unitsManager.spawnUnits(category, unitsToSpawn, coalition, false);
|
||||
//}
|
||||
}
|
||||
|
||||
selectFile() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.addEventListener("change", (e: any) => {
|
||||
var file = e.target.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e: any) => {
|
||||
|
||||
try {
|
||||
this.#fileData = JSON.parse(e.target.result);
|
||||
|
||||
//const validator = new ImportFileJSONSchemaValidator();
|
||||
//if (!validator.validate(this.#fileData)) {
|
||||
// const errors = validator.getErrors().reduce((acc:any, error:any) => {
|
||||
// let errorString = error.instancePath.substring(1) + ": " + error.message;
|
||||
// if (error.params) {
|
||||
// const {allowedValues} = error.params;
|
||||
// if (allowedValues)
|
||||
// errorString += ": " + allowedValues.join(', ');
|
||||
// }
|
||||
// acc.push(errorString);
|
||||
// return acc;
|
||||
// }, [] as string[]);
|
||||
// this.#showFileDataErrors(errors);
|
||||
//} else {
|
||||
// this.#showForm();
|
||||
//}
|
||||
} catch(e:any) {
|
||||
this.#showFileDataErrors([e]);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
})
|
||||
input.click();
|
||||
}
|
||||
|
||||
#showFileDataErrors( reasons:string[]) {
|
||||
|
||||
//this.dialog.getElement().querySelectorAll("[data-on-error]").forEach((el:Element) => {
|
||||
// el.classList.toggle("hide", el.getAttribute("data-on-error") === "hide");
|
||||
//});
|
||||
//
|
||||
//const reasonsList = this.dialog.getElement().querySelector(".import-error-reasons");
|
||||
//if (reasonsList instanceof HTMLElement)
|
||||
// reasonsList.innerHTML = `<li>${reasons.join("</li><li>")}</li>`;
|
||||
//
|
||||
//this.dialog.show();
|
||||
}
|
||||
|
||||
#showForm() {
|
||||
//this.dialog.getElement().querySelectorAll("[data-on-error]").forEach((el:Element) => {
|
||||
// el.classList.toggle("hide", el.getAttribute("data-on-error") === "show");
|
||||
//});
|
||||
//
|
||||
//const data: any = {};
|
||||
//
|
||||
//for (const [group, units] of Object.entries(this.#fileData)) {
|
||||
// if (group === "" || units.length === 0)
|
||||
// continue;
|
||||
//
|
||||
// if (units.some((unit: UnitData) => !this.#unitDataCanBeImported(unit)))
|
||||
// continue;
|
||||
//
|
||||
// const category = units[0].category;
|
||||
//
|
||||
// if (!data.hasOwnProperty(category)) {
|
||||
// data[category] = {};
|
||||
// }
|
||||
//
|
||||
// units.forEach((unit: UnitData) => {
|
||||
// if (!data[category].hasOwnProperty(unit.coalition))
|
||||
// data[category][unit.coalition] = [];
|
||||
//
|
||||
// data[category][unit.coalition].push(unit);
|
||||
// });
|
||||
//
|
||||
//}
|
||||
//
|
||||
//this.data = data;
|
||||
//this.buildCategoryCoalitionTable();
|
||||
//this.dialog.show();
|
||||
}
|
||||
|
||||
#unitDataCanBeImported(unitData: UnitData) {
|
||||
return unitData.alive && this.#unitGroupDataCanBeImported([unitData]);
|
||||
}
|
||||
|
||||
#unitGroupDataCanBeImported(unitGroupData: UnitData[]) {
|
||||
return unitGroupData.every((unitData: UnitData) => {
|
||||
return !["Aircraft", "Helicopter"].includes(unitData.category);
|
||||
}) && unitGroupData.some((unitData: UnitData) => unitData.alive);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user