More work on new manager design

This commit is contained in:
Pax1601
2024-01-16 17:45:52 +01:00
parent d56a95cfa3
commit a0de159234
15 changed files with 318 additions and 460 deletions

View File

@@ -4,7 +4,7 @@ const ejs = require('ejs')
const { logger } = require("./filesystem");
const { showConfirmPopup } = require("./popup");
class InstallationsPage extends ManagerPage {
class installationPage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
@@ -64,4 +64,4 @@ class InstallationsPage extends ManagerPage {
}
}
module.exports = InstallationsPage;
module.exports = installationPage;

View File

@@ -1,18 +1,13 @@
const MenuPage = require("./menu");
const InstallationsPage = require('./installations');
const ConnectionsPage = require('./connections');
const PasswordsPage = require('./passwords');
const ResultPage = require('./result');
const InstancesPage = require('./instances');
const path = require("path")
const fs = require("fs");
const DCSInstance = require('./dcsinstance');
const { showErrorPopup, showWaitPopup, showConfirmPopup } = require('./popup');
const { fixInstances } = require('./filesystem');
const { logger } = require("./filesystem")
const path = require("path")
const fs = require("fs");
const WelcomePage = require("./welcome");
const TypePage = require("./type");
const ManagerPage = require("./managerpage");
const WizardPage = require("./wizardpage");
class Manager {
options = {
@@ -21,7 +16,7 @@ class Manager {
};
welcomePage = null;
installationsPage = null;
folderPage = null;
typePage = null;
connectionsPage = null;
passwordsPage = null;
@@ -29,10 +24,19 @@ class Manager {
instancesPage = null;
constructor() {
}
document.addEventListener("signal", (ev) => {
const callback = ev.detail.callback;
const params = ev.detail.params;
try {
eval(`this.${callback}(${params})`)
} catch (e) {
console.error(e);
}
});
}
async start() {
/* Check if the options file exists */
if (fs.existsSync("options.json")) {
/* Load the options from the json file */
try {
@@ -47,17 +51,17 @@ class Manager {
/* Hide the loading page */
document.getElementById("loader").classList.add("hide");
/* Show page to select basic vs advanced mode */
this.welcomePage = new WelcomePage(this);
document.body.appendChild(this.welcomePage.getElement());
/* Show page to select basic vs expert mode */
this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
this.welcomePage.show();
}
else {
document.getElementById("header").classList.remove("hide");
/* Initialize mode switching */
if (this.options.mode === "basic") {
document.getElementById("switch-mode").innerText = "Advanced mode";
document.getElementById("switch-mode").onclick = () => { this.switchMode("advanced"); }
document.getElementById("switch-mode").innerText = "Expert mode";
document.getElementById("switch-mode").onclick = () => { this.switchMode("expert"); }
}
else {
document.getElementById("switch-mode").innerText = "Basic mode";
@@ -96,27 +100,19 @@ class Manager {
this.options.singleInstance = this.options.instances.length === 1;
/* Create all the HTML pages */
this.menuPage = new MenuPage(this);
this.installationsPage = new InstallationsPage(this);
this.typePage = new TypePage(this);
this.connectionsPage = new ConnectionsPage(this);
this.passwordsPage = new PasswordsPage(this);
this.resultPage = new ResultPage(this);
this.instancesPage = new InstancesPage(this);
document.body.appendChild(this.menuPage.getElement());
document.body.appendChild(this.installationsPage.getElement());
document.body.appendChild(this.typePage.getElement());
document.body.appendChild(this.connectionsPage.getElement());
document.body.appendChild(this.passwordsPage.getElement());
document.body.appendChild(this.resultPage.getElement());
document.body.appendChild(this.instancesPage.getElement());
this.menuPage = new ManagerPage(this, "./ejs/menu.ejs");
this.folderPage = new WizardPage(this, "./ejs/installation.ejs");
this.typePage = new WizardPage(this, "./ejs/type.ejs");
//this.connectionsPage = new ConnectionsPage(this);
//this.passwordsPage = new PasswordsPage(this);
//this.resultPage = new ResultPage(this);
//this.instancesPage = new InstancesPage(this);
if (this.options.mode === "basic") {
/* In basic mode no dashboard is shown */
this.menuPage.show();
} else {
/* In advanced mode we go directly to the dashboard */
/* In Expert mode we go directly to the dashboard */
this.instancesPage.show();
}
}
@@ -126,12 +122,76 @@ class Manager {
return this.options.activeInstance;
}
createOptionsFile(mode) {
try {
fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
location.reload();
} catch (e) {
showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
}
}
switchMode(newMode) {
/* Change the mode in the options.json and reload the page */
var options = JSON.parse(fs.readFileSync("options.json"));
options.mode = newMode;
fs.writeFileSync("options.json", JSON.stringify(options));
location.reload();
}
/************************************************/
/* CALLBACKS */
/************************************************/
/* Switch to basic mode */
onBasicClicked() {
this.createOptionsFile("basic");
}
/* Switch to expert mode */
onExpertClicked() {
this.createOptionsFile("expert");
}
/* When the install button is clicked go the installation page */
onInstallClicked() {
this.options.install = true;
if (this.options.singleInstance) {
this.options.activeInstance = this.options.instances[0];
/* Show the type selection page */
if (!this.options.activeInstance.installed) {
this.menuPage.hide();
this.typePage.show(this.menuPage);
} else {
showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
() => {
this.menuPage.hide();
this.typePage.show(this.menuPage);
}
)
}
} else {
/* Show the folder selection page */
this.menuPage.hide();
this.folderPage.show(this.menuPage);
}
}
/* When the edit button is clicked go to the instances page */
onEditClicked() {
this.hide();
this.options.install = false;
if (this.options.singleInstance) {
this.options.activeInstance = this.options.instances[0];
this.typePage.show(this);
} else {
this.folderPage.show(this);
}
}
}
module.exports = Manager;

View File

@@ -1,14 +1,19 @@
const { logger } = require("./filesystem");
const ejs = require('ejs')
class ManagerPage {
manager;
ejsFile;
element;
options;
options = {};
previousPage;
constructor(manager, options) {
constructor(manager, ejsFile) {
this.manager = manager;
this.options = options ?? {};
this.element = document.createElement('div');
this.element.classList.add("manager-page", "hide");
this.ejsFile = ejsFile;
document.body.appendChild(this.element);
}
getElement() {
@@ -16,6 +21,14 @@ class ManagerPage {
}
show(previousPage) {
ejs.renderFile(this.ejsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
this.element.classList.remove("hide");
if (previousPage !== undefined)
@@ -26,29 +39,16 @@ class ManagerPage {
this.element.classList.add("hide");
}
render() {
render(str) {
this.element.innerHTML = str;
/* Connect all the collapsable buttons */
let buttons = document.querySelectorAll(".button.collapse");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => {
buttons[i].classList.toggle("open");
})
}
/* Connect the back, next and cancel buttons */
if (this.element.querySelector(".back"))
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
if (this.element.querySelector(".next"))
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
if (this.element.querySelector(".cancel"))
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
}
onBackClicked() {
this.hide();
this.previousPage.show()
}
}
}

View File

@@ -1,87 +0,0 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
const { logger } = require("./filesystem");
const { showConfirmPopup } = require("./popup");
class MenuPage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
render(str) {
const element = this.getElement();
element.innerHTML = str;
element.querySelector(".install").addEventListener("click", (e) => this.onInstallClicked(e));
element.querySelector(".edit").addEventListener("click", (e) => this.onEditClicked(e));
element.querySelector(".uninstall").addEventListener("click", (e) => this.onUninstallClicked(e));
super.render();
}
show(previousPage) {
ejs.renderFile("./ejs/menu.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
super.show(previousPage);
}
/* When the install button is clicked go the installation page */
onInstallClicked(e) {
this.manager.options.install = true;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
/* Show the connections page */
if (!this.manager.options.activeInstance.installed) {
this.hide();
this.manager.typePage.show(this);
} else {
showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
() => {
this.hide();
this.manager.typePage.show(this);
}
)
}
} else {
this.hide();
this.manager.installationsPage.show(this);
}
}
/* When the edit button is clicked go to the instances page */
onEditClicked(e) {
this.hide();
this.manager.options.install = false;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
this.manager.typePage.show(this);
} else {
this.manager.installationsPage.show(this);
}
}
/* When the remove button is clicked go to the instances page */
onUninstallClicked(e) {
this.manager.options.install = false;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
this.manager.options.activeInstance.uninstall();
} else {
// TODO select instance to remove
}
}
}
module.exports = MenuPage;

View File

@@ -256,7 +256,6 @@ contextBridge.exposeInMainWorld(
}
});
/* On content loaded */
window.addEventListener('DOMContentLoaded', async () => {
/* Compute the height of the content page */
@@ -297,4 +296,3 @@ ipcRenderer.on("check-version", () => {
/* Check if a new version is available */
checkVersion();
})

View File

@@ -1,52 +0,0 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
const { logger } = require("./filesystem")
const fs = require("fs");
const { showErrorPopup } = require("./popup");
class WelcomePage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
render(str) {
const element = this.getElement();
element.innerHTML = str;
element.querySelector(".basic").addEventListener("click", (e) => this.onbasicClicked(e));
element.querySelector(".advanced").addEventListener("click", (e) => this.onAdvancedClicked(e));
super.render();
}
show(previousPage) {
ejs.renderFile("./ejs/welcome.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
super.show(previousPage);
}
onbasicClicked(e) {
this.createOptionsFile("basic");
}
onAdvancedClicked(e) {
this.createOptionsFile("advanced");
}
createOptionsFile(mode) {
try {
fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
location.reload();
} catch (e) {
showErrorPopup(`A critical error occurred, check ${this.manager.options.logLocation} for more info.`)
}
}
}
module.exports = WelcomePage;

View File

@@ -0,0 +1,53 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
class WizardPage extends ManagerPage {
contentEjsFile;
constructor(manager, contentEjsFile) {
super(manager, './ejs/wizard.ejs');
this.contentEjsFile = contentEjsFile;
}
render(str) {
super.render(str);
/* Connect the back, next and cancel buttons */
if (this.element.querySelector(".back"))
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
if (this.element.querySelector(".next"))
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
if (this.element.querySelector(".cancel"))
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
ejs.renderFile(this.contentEjsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.element.querySelector(".content").innerHTML = str;
} else {
logger.error(err);
}
});
}
onBackClicked() {
console.log(this.previousPage)
this.hide();
this.previousPage.show()
}
onCancelClicked() {
this.hide();
if (this.manager.options.mode === "basic") {
/* In basic mode no dashboard is shown */
this.manager.menuPage.show();
} else {
/* In Expert mode we go directly to the dashboard */
this.manager.instancesPage.show();
}
}
}
module.exports = WizardPage;