mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
More work on new manager design
This commit is contained in:
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -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();
|
||||
})
|
||||
|
||||
|
||||
@@ -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;
|
||||
53
manager/javascripts/wizardpage.js
Normal file
53
manager/javascripts/wizardpage.js
Normal 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;
|
||||
Reference in New Issue
Block a user