Merged view and update pages according to new design

This commit is contained in:
Pax1601
2024-01-09 17:33:20 +01:00
parent ec91b597c8
commit 5542109daf
21 changed files with 309 additions and 153 deletions

View File

@@ -31,6 +31,8 @@ class ConnectionsPage extends ManagerPage {
this.element.querySelector(".client-port").querySelector("input").addEventListener("change", async (e) => { this.setClientPort(Number(e.target.value)); })
this.element.querySelector(".backend-port").querySelector("input").addEventListener("change", async (e) => { this.setBackendPort(Number(e.target.value)); })
this.element.querySelector(".backend-address").querySelector("input").addEventListener("change", async (e) => { this.instance.setBackendAddress(e.target.value); })
super.render();
}
show() {

View File

@@ -139,11 +139,14 @@ class DCSInstance {
if (this.backendOnline) {
instanceDiv.querySelector(".fps .data").innerText = this.fps;
instanceDiv.querySelector(".load .data").innerTexr = this.load;
instanceDiv.querySelector(".load .data").innerText = this.load;
}
instanceDiv.querySelector(".start-stop-server").innerText = this.webserverOnline ? "Stop" : "Start server";
instanceDiv.querySelector(".start-stop-client").innerText = this.webserverOnline ? "Open in browser" : "Start client";
instanceDiv.querySelector(".button.start").classList.toggle("hide", this.webserverOnline)
instanceDiv.querySelector(".button.uninstall").classList.toggle("hide", this.webserverOnline)
instanceDiv.querySelector(".button.edit").classList.toggle("hide", this.webserverOnline)
instanceDiv.querySelector(".button.open-browser").classList.toggle("hide", !this.webserverOnline)
instanceDiv.querySelector(".button.stop").classList.toggle("hide", !this.webserverOnline)
}
}
}

View File

@@ -20,6 +20,8 @@ class InstallationsPage extends ManagerPage {
}
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
super.render();
}
async onOptionClicked(e) {

View File

@@ -17,47 +17,77 @@ class InstancesPage extends ManagerPage {
render(str) {
this.element.innerHTML = str;
var editButtons = this.element.querySelectorAll(".edit");
var editButtons = this.element.querySelectorAll(".button.edit");
for (let i = 0; i < editButtons.length; i++) {
editButtons[i].onclick = (e) => {this.onEditClicked(e);}
}
var uninstallButtons = this.element.querySelectorAll(".uninstall");
var uninstallButtons = this.element.querySelectorAll(".button.uninstall");
for (let i = 0; i < uninstallButtons.length; i++) {
uninstallButtons[i].onclick = (e) => {this.onUninstallClicked(e);}
}
var startStopServerButtons = this.element.querySelectorAll(".start-stop-server");
for (let i = 0; i < startStopServerButtons.length; i++) {
startStopServerButtons[i].onclick = (e) => {this.onStartStopServerClicked(e);}
var startServerButtons = this.element.querySelectorAll(".button.start-server");
for (let i = 0; i < startServerButtons.length; i++) {
startServerButtons[i].onclick = (e) => {this.onStartServerClicked(e);}
}
var startStopClientButtons = this.element.querySelectorAll(".start-stop-client");
for (let i = 0; i < startStopClientButtons.length; i++) {
startStopClientButtons[i].onclick = (e) => {this.onStartStopClientClicked(e);}
var startClientButtons = this.element.querySelectorAll(".button.start-client");
for (let i = 0; i < startClientButtons.length; i++) {
startClientButtons[i].onclick = (e) => {this.onStartClientClicked(e);}
}
var openBrowserButtons = this.element.querySelectorAll(".button.open-browser");
for (let i = 0; i < openBrowserButtons.length; i++) {
openBrowserButtons[i].onclick = (e) => {this.onOpenBrowserClicked(e);}
}
var stopButtons = this.element.querySelectorAll(".button.stop");
for (let i = 0; i < stopButtons.length; i++) {
stopButtons[i].onclick = (e) => {this.onStopClicked(e);}
}
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
super.render();
}
async onEditClicked(e) {
logger.log(e.target.dataset.folder)
this.setSelectedInstance((await DCSInstance.getInstances()).find((instance) => {return instance.folder === e.target.closest('.option').dataset.folder}));
this.getClickedInstance(e).then((instance) => {
instance.webserverOnline || instance.backendOnline? showErrorPopup("Error, the selected Olympus instance is currently active, please stop Olympus before editing it!") :
this.setSelectedInstance(instance);
}
);
}
async onStartStopServerClicked(e) {
var instance = (await DCSInstance.getInstances()).find((instance) => {return instance.folder === e.target.closest('.option').dataset.folder});
instance.webserverOnline? instance.stop(): instance.startServer();
async onStartServerClicked(e) {
this.getClickedInstance(e).then((instance) => instance.startServer());
}
async onStartStopClientClicked(e) {
var instance = (await DCSInstance.getInstances()).find((instance) => {return instance.folder === e.target.closest('.option').dataset.folder});
instance.webserverOnline? exec(`start http://localhost:${instance.clientPort}`): instance.startClient();
async onStartClientClicked(e) {
this.getClickedInstance(e).then(instance => instance.startClient());
}
async onOpenBrowserClicked(e) {
this.getClickedInstance(e).then((instance) => exec(`start http://localhost:${instance.clientPort}`));
}
async onStopClicked(e) {
this.getClickedInstance(e).then((instance) => instance.stop());
}
async onUninstallClicked(e) {
var instance = (await DCSInstance.getInstances()).find((instance) => {return instance.folder === e.target.closest('.option').dataset.folder});
instance.webserverOnline || instance.backendOnline? showErrorPopup("Error, the selected Olympus instance is currently active, please stop Olympus before uninstalling it!") : instance.uninstall();
this.getClickedInstance(e).then((instance) => {
instance.webserverOnline || instance.backendOnline? showErrorPopup("Error, the selected Olympus instance is currently active, please stop Olympus before uninstalling it!") : instance.uninstall();
});
}
async getClickedInstance(e) {
return DCSInstance.getInstances().then((instances) => {
return instances.find((instance) => {
return instance.folder === e.target.closest('.option').dataset.folder
})
});
}
show() {

View File

@@ -47,8 +47,7 @@ class Manager {
}
/* Check which buttons should be enabled */
const installEnabled = instances.some((instance) => { return !instance.installed; });
const updateEnabled = instances.some((instance) => { return instance.installed; });
const installEnabled = true;
const manageEnabled = instances.some((instance) => { return instance.installed; });
/* Menu */
@@ -56,7 +55,6 @@ class Manager {
menuPage.options = {
...menuPage.options,
installEnabled: installEnabled,
updateEnabled: updateEnabled,
manageEnabled: manageEnabled
}
/* When the install button is clicked go the installation page */
@@ -64,22 +62,9 @@ class Manager {
menuPage.hide();
installationsPage.show();
}
/* When the update button is clicked go to the instances page in "update mode" (i.e. manage = false) */
menuPage.onUpdateClicked = (e) => {
menuPage.hide();
instancesPage.options = {
...instancesPage.options,
manage: false
}
instancesPage.show();
}
/* When the manage button is clicked go to the instances page in "manage mode" (i.e. manage = true) */
menuPage.onManageClicked = (e) => {
menuPage.hide();
instancesPage.options = {
...instancesPage.options,
manage: true
}
instancesPage.show();
}

View File

@@ -19,6 +19,16 @@ class ManagerPage {
hide() {
this.element.classList.add("hide");
}
render() {
/* 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");
})
}
}
}
module.exports = ManagerPage;

View File

@@ -16,8 +16,9 @@ class MenuPage extends ManagerPage {
element.innerHTML = str;
element.querySelector(".install").addEventListener("click", (e) => this.onInstallClicked(e));
element.querySelector(".update").addEventListener("click", (e) => this.onUpdateClicked(e))
element.querySelector(".manage").addEventListener("click", (e) => this.onManageClicked(e))
element.querySelector(".manage").addEventListener("click", (e) => this.onManageClicked(e));
super.render();
}
show() {

View File

@@ -27,6 +27,8 @@ class PasswordsPage extends ManagerPage {
this.element.querySelector(".game-master").querySelector("input").addEventListener("change", async (e) => { this.instance.setGameMasterPassword(e.target.value); })
this.element.querySelector(".blue-commander").querySelector("input").addEventListener("change", async (e) => { this.instance.setBlueCommanderPassword(e.target.value); })
this.element.querySelector(".red-commander").querySelector("input").addEventListener("change", async (e) => { this.instance.setRedCommanderPassword(e.target.value); })
super.render();
}
show() {

View File

@@ -17,6 +17,8 @@ class ResultPage extends ManagerPage {
element.innerHTML = str;
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
super.render();
}
show() {