Added simplified mode and disabled not useful buttons

This commit is contained in:
Pax1601 2024-01-01 18:19:56 +01:00
parent c9dc5eb2f5
commit bf93b8e90a
9 changed files with 98 additions and 21 deletions

View File

@ -0,0 +1,3 @@
Microsoft (R) Windows Script Host Versione 5.812
Copyright (C) Microsoft Corporation. Tutti i diritti riservati.

View File

@ -29,7 +29,7 @@
</style>
<div id="manager-connections">
<div class="step-summary">
<div class="blue <%= !install? 'hide': '' %>">User path</div>
<div class="blue <%= !install || simplified? 'hide': '' %>">User path</div>
<div class="white">Ports and address</div>
<div class="empty">Passwords</div>
<div class="empty"> <%= install? 'Install': 'Update' %></div>
@ -75,15 +75,19 @@
<input type="text" value="<%= instance["backendAddress"] %>">
</div>
<div class="buttons-footer">
<% if (!simplified) { %>
<div class="button back">
Back
</div>
<% } %>
<div class="button next">
Next
</div>
</div>
<% if (!simplified) { %>
<div class="button cancel">
Cancel installation
</div>
<% } %>
</div>
</div>

View File

@ -55,6 +55,8 @@
align-items: center;
border-radius: 5px;
cursor: pointer;
background-color: transparent;
color: var(--offwhite);
}
#manager-menu .option:hover {
@ -62,6 +64,12 @@
background-color: var(--offwhite);
}
#manager-menu .option.disabled {
pointer-events: none;
color: var(--darkgray);
border-color: var(--darkgray);
}
#manager-menu .option * {
pointer-events: none;
}
@ -74,14 +82,14 @@
<div>Using this manager, you can install Olympus, update settings, and view and manage instances</div>
</div>
<div id="menu">
<div class="option install">
<div class="option install <%= installEnabled? '': 'disabled' %>">
Install Olympus
</div>
<div class="option update">
<div class="option update <%= updateEnabled? '': 'disabled' %>">
Update/remove Olympus
</div>
<div class="option divider"></div>
<div class="option manage">
<div class="option manage <%= manageEnabled? '': 'disabled' %>">
View and manage instances
</div>
</div>

View File

@ -3,7 +3,7 @@
</style>
<div id="manager-passwords">
<div class="step-summary">
<div class="blue <%= !install? 'hide': '' %>">User path</div>
<div class="blue <%= !install || simplified? 'hide': '' %>">User path</div>
<div class="blue">Ports and address</div>
<div class="white">Passwords</div>
<div class="empty"> <%= install? 'Install': 'Update' %></div>
@ -41,8 +41,10 @@
Next
</div>
</div>
<% if (!simplified) { %>
<div class="button cancel">
Cancel installation
</div>
<% } %>
</div>
</div>

View File

@ -15,9 +15,14 @@ class ConnectionsPage extends ManagerPage {
const element = this.getElement();
element.innerHTML = str;
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
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));
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)); })

View File

@ -10,13 +10,17 @@ const { showErrorPopup, showWaitPopup } = require('./popup');
const { fixInstances } = require('./filesystem');
class Manager {
simplified = true;
constructor() {
}
async start() {
var instances = await DCSInstance.getInstances();
this.simplified = instances.length === 1 && !instances[0].installed;
document.getElementById("loader").classList.add("hide");
if (instances.some((instance) => {
@ -33,8 +37,18 @@ class Manager {
})
}
const installEnabled = instances.some((instance) => { return !instance.installed; });
const updateEnabled = instances.some((instance) => { return instance.installed; });
const manageEnabled = instances.some((instance) => { return instance.installed; });
/* Menu */
var menuPage = new MenuPage();
menuPage.options = {
...menuPage.options,
installEnabled: installEnabled,
updateEnabled: updateEnabled,
manageEnabled: manageEnabled
}
menuPage.onInstallClicked = (e) => {
menuPage.hide();
installationsPage.show();
@ -66,16 +80,19 @@ class Manager {
connectionsPage.options = {
...connectionsPage.options,
instance: activeInstance,
simplified: this.simplified,
install: true
}
passwordsPage.options = {
...passwordsPage.options,
instance: activeInstance,
simplified: this.simplified,
install: true
}
resultPage.options = {
...resultPage.options,
instance: activeInstance,
simplified: this.simplified,
install: true
}
installationsPage.hide();
@ -101,16 +118,19 @@ class Manager {
connectionsPage.options = {
...connectionsPage.options,
instance: activeInstance,
simplified: this.simplified,
install: false
}
passwordsPage.options = {
...passwordsPage.options,
instance: activeInstance,
simplified: this.simplified,
install: false
}
resultPage.options = {
...resultPage.options,
instance: activeInstance,
simplified: this.simplified,
install: false
}
instancesPage.hide();
@ -199,7 +219,30 @@ class Manager {
document.body.appendChild(passwordsPage.getElement());
document.body.appendChild(resultPage.getElement());
menuPage.show();
if (this.simplified) {
connectionsPage.options = {
...connectionsPage.options,
instance: instances[0],
simplified: this.simplified,
install: true
}
passwordsPage.options = {
...passwordsPage.options,
instance: instances[0],
simplified: this.simplified,
install: true
}
resultPage.options = {
...resultPage.options,
instance: instances[0],
simplified: this.simplified,
install: true
}
instancesPage.hide();
connectionsPage.show();
} else {
menuPage.show();
}
}
}

View File

@ -8,14 +8,6 @@ class MenuPage extends ManagerPage {
constructor(options) {
super(options);
ejs.renderFile("./ejs/menu.ejs", options, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
console.error(err);
}
});
}
render(str) {
@ -26,6 +18,20 @@ class MenuPage extends ManagerPage {
element.querySelector(".update").addEventListener("click", (e) => this.onUpdateClicked(e))
element.querySelector(".manage").addEventListener("click", (e) => this.onManageClicked(e))
}
show() {
this.instance = this.options.instance;
ejs.renderFile("./ejs/menu.ejs", this.options, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
console.error(err);
}
});
super.show();
}
}
module.exports = MenuPage;

View File

@ -14,9 +14,14 @@ class PasswordsPage extends ManagerPage {
const element = this.getElement();
element.innerHTML = str;
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
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));
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); })

View File

@ -180,6 +180,7 @@ body {
display: flex;
flex-direction: column;
row-gap: 10px;
width: 50%;
}
.instructions>span {