weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added folder selection page and port availability checks

Browse Source
This commit is contained in:
Pax1601 2024-01-24 19:08:42 +01:00
parent 6f7b251094
commit 1d38bd6fea
8 changed files with 105 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manager/ejs/connections.ejs
View File

@ -48,7 +48,8 @@
title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely">
</span>
<div>
<input type="number" min="1024" max="65535" value="<%= activeInstance["clientPort"] %>">
<input type="number" min="1024" max="65535" value="<%= activeInstance["clientPort"] %>"
onchange="signal('onClientPortChanged', this.value)">
<img class="success hide">
<div class="error hide">
<img> <span>Port already in use</span>

24
manager/ejs/folder.ejs Normal file
View File

@ -0,0 +1,24 @@
<style>
</style>
<div>
<div class="instructions">
<div class="step">
Step 1 of 4
</div>
<div class="title">
Which DCS instance you want to add Olympus to?
</div>
<div class="description">
Olympus is added to DCS instances individually, and will only work for that specific instance. <br>
You can have Olympus installed across multiple DCS instances. Re-run in the install wizard to add Olympus to another DCS install.
</div>
</div>
<div class="wizard-inputs">
<% for (var i = 0; i < instances.length; i++) { %>
<div class="button radio" onclick="signal('onFolderClicked', '<%= instances[i].name %>')" data-folder="<%= instances[i].folder %>">
<%= instances[i].name %>
</div>
<% } %>
</div>
</div>

143
manager/ejs/installation.ejs
View File

@ -1,143 +0,0 @@
<style>
#manager-installations .scroll-container {
height: 100%;
overflow-y: auto;
}
#manager-installations .scrollable {
display: flex;
flex-direction: column;
row-gap: 8px;
height: fit-content;
align-items: center;
padding: 15px;
}
#manager-installations .option {
cursor: pointer;
background-color: var(--darkgray);
width: 600px;
height: 100px;
color: white;
display: flex;
font-size: 13px;
font-weight: 600;
padding-left: 15px;
align-items: center;
border-radius: 5px;
}
#manager-installations .option * {
pointer-events: none;
}
#manager-installations .option {
position: relative;
display: flex;
flex-direction: column;
row-gap: 5px;
align-items: start;
justify-content: center;
}
#manager-installations .option>span:nth-child(1) {
font-size: 18px;
font-weight: 600;
}
#manager-installations .option>span:nth-child(2) {
display: flex;
column-gap: 10px;
justify-content: center;
font-size: 13px;
font-weight: normal;
}
#manager-installations .option>span:nth-child(3) {
font-size: 13px;
font-weight: 600;
color: var(--lightgray);
}
#manager-installations .option>span:nth-child(3).installed {
font-weight: 600;
color: var(--green);
}
#manager-installations .option>span:nth-child(3).error {
font-weight: 600;
color: orange;
}
#manager-installations .option.installed {
pointer-events: none;
background-color: var(--background-disabled);
}
#manager-installations .option:not(.installed)::after {
display: block;
content: " ";
width: 20px;
height: 20px;
background-image: url("./icons/chevron-right-solid.svg");
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
right: 20px;
}
</style>
<div id="manager-installations">
<div class="step-summary">
<div class="white <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
<div class="blue">Type of install</div>
<div class="empty">Ports and address</div>
<div class="empty">Passwords</div>
<div class="empty"> <%= install? 'Install': 'Update' %></div>
</div>
<div class="content">
<div class="instructions">
<span>
<% if (install) { %>
Select a DCS path to install Olympus to.
<% } else { %>
Select an Olympus instance to edit.
<% } %>
</span>
<span>
<% if (install) { %>
We have automatically detected the following DCS installations under your Saved Games / DCS folder.
<% } else { %>
These are the DCS instances in which Olympus has already been installed.
<% } %>
</span>
<span>
<% if (install) { %>
Please select which DCS installations you want to add Olympus to.
<% } else { %>
Please select which Olympus installations you want to edit.
<% } %>
</span>
</div>
<div class="scroll-container">
<div class="scrollable">
<% for (let i = 0; i < instances.length; i++) {%>
<div class="option" data-folder="<%= instances[i].folder %>">
<span><%= instances[i].name %></span>
<span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
<span class="<%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>">
<%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
</span>
</div>
<% } %>
</div>
</div>
<div class="button cancel">
<% if (install) { %>
Cancel installation
<% } else { %>
Cancel editing
<% } %>
</div>
</div>
</div>

24
manager/ejs/result.ejs
View File

@ -74,10 +74,16 @@
height: 30px;
width: 30px;
}
#result-page .link {
display: inline;
color: #5CA7FF;
font-weight: bold;
}
</style>
<div id="result-page">
<div class="result-summary success hide">
<div class="title"><img src="./icons/check-solid-background.svg">Olympus successfully added to <i style="margin-left: 3px"><%= activeInstance["name"] %></i></div>
<div class="title"><img src="./icons/check-solid-background.svg">Olympus successfully added to <i style="margin-left: 3px"><%= activeInstance["name"] %></i>!</div>
<div class="description">See the <b>DCS Olympus Wiki</b> for more information on how to use Olympus and for troubleshooting issues. You may now close the installer.</div>
</div>
<div class="result-summary error hide">
@ -89,52 +95,52 @@
How to launch Olympus
</div>
<div style="font-size: 13px; color: var(--offwhite);">
To launch Olympus, there are shortcuts available in the DCS Olympus folder under Saved Games.
To launch Olympus, there are shortcuts available in the <i><b><%= activeInstance["name"] %></b></i> folder under <i><b>Saved Games</b></i>.
</div>
<% if (activeInstance["installationType"] === "singleplayer") { %>
<div class="usage-instructions" style="width: 600px;">
<div>
<img src="./icons/olympus_white.png">
<div>
Launch the Olympus Client via the shortcut in DCS Olympus / Saved Games.
Launch the <b>Olympus Client</b> via the shortcut on your desktop or in <i><b><%= activeInstance["name"] %></b></i>.
</div>
</div>
<img src="./icons/arrow-right-solid.svg">
<div>
<img src="./icons/gamepad-solid.svg">
<div>
Launch DCS, load a mission and unpause the game. Enjoy!
<b>Launch DCS</b>, load a mission and unpause the game. Enjoy!
</div>
</div>
</div>
<div style="font-size: 13px;">
Alternatively, you can run the Olympus Server instead and visit http://localhost:<%= activeInstance["clientPort"] %> in a web browser (Google Chrome recommended) to replace the first step above.
Alternatively, you can run the <b>Olympus Server</b> instead and visit <div class="link">http://localhost:<%= activeInstance["clientPort"] %></div> in a web browser (Google Chrome recommended) to replace the first step above.
</div>
<% } else { %>
<div class="usage-instructions">
<div>
<img src="./icons/server-solid.svg">
<div>
Launch the Olympus Server via the shortcut in DCS Olympus / Saved Games.
Launch the <b>Olympus Server</b> via the shortcut on your desktop or in <b><%= activeInstance["name"] %></b>.
</div>
</div>
<img src="./icons/arrow-right-solid.svg">
<div>
<img src="./icons/chrome.svg">
<div>
Visit http://<%= ip %>:<%= activeInstance["clientPort"] %> in a web browser (Google Chrome recommended).
To access Olympus remotely visit <div class="link">http://<%= ip %>:<%= activeInstance["clientPort"] %></div> <b>in a web browser</b> (Google Chrome recommended).
</div>
</div>
<img src="./icons/arrow-right-solid.svg">
<div>
<img src="./icons/gamepad-solid.svg">
<div>
Launch DCS, load a mission and unpause the game. Enjoy!
<b>Launch DCS</b>, load a mission and unpause the game. Enjoy!
</div>
</div>
</div>
<div style="font-size: 13px;">
Note, to access Olympus from this PC, you need to visit http://localhost:<%= activeInstance["clientPort"] %> in a web browser (Google Chrome recommended) instead.
<b>To access Olympus from this PC</b>, you need to visit <div class="link">http://localhost:<%= activeInstance["clientPort"] %></div> in a web browser (Google Chrome recommended) instead.
</div>
<% } %>
</div>

1
manager/index.html
View File

@ -34,6 +34,7 @@
<img class="link" data-link="https://github.com/Pax1601/DCSOlympus" src="./icons/github.svg" />
<img class="link" data-link="https://discord.gg/pCfCykAdrw" src="./icons/discord.svg" />
<img class="link" data-link="https://www.youtube.com/@DCSOlympus" src="./icons/youtube.svg" />
<div class="link" onclick="signal('reload')">Debug reload</div>
</div>
<div id="loader" class="manager-page hide">
Loading, please wait...

21
manager/javascripts/dcsinstance.js
View File

@ -135,28 +135,20 @@ class DCSInstance {
}, 1000);
}
/** Asynchronously check if the client port is free and if it is, set the new value
/** Asynchronously set the client port
*
*/
async setClientPort(newPort) {
if (await this.checkClientPort(newPort)) {
logger.log(`Instance ${this.folder} client port set to ${newPort}`)
this.clientPort = newPort;
return true;
}
return false;
logger.log(`Instance ${this.folder} client port set to ${newPort}`)
this.clientPort = newPort;
}
/** Asynchronously check if the client port is free and if it is, set the new value
/** Asynchronously set the backend port
*
*/
async setBackendPort(newPort) {
if (await this.checkBackendPort(newPort)) {
logger.log(`Instance ${this.folder} backend port set to ${newPort}`)
this.backendPort = newPort;
return true;
}
return false;
logger.log(`Instance ${this.folder} backend port set to ${newPort}`)
this.backendPort = newPort;
}
/** Set backend address
@ -227,6 +219,7 @@ class DCSInstance {
else {
logger.log(`Port ${port} currently in use`);
}
logger.log(`Port ${port} is free`);
res(portFree);
})
})

58
manager/javascripts/manager.js
View File

@ -115,7 +115,7 @@ class Manager {
/* Create all the HTML pages */
this.menuPage = new ManagerPage(this, "./ejs/menu.ejs");
this.folderPage = new WizardPage(this, "./ejs/installation.ejs");
this.folderPage = new WizardPage(this, "./ejs/folder.ejs");
this.typePage = new WizardPage(this, "./ejs/type.ejs");
this.connectionsTypePage = new WizardPage(this, "./ejs/connectionsType.ejs");
this.connectionsPage = new WizardPage(this, "./ejs/connections.ejs");
@ -207,6 +207,18 @@ class Manager {
}
}
onFolderClicked(name) {
this.getClickedInstance(name).then((instance) => {
var instanceDivs = this.folderPage.getElement().querySelectorAll(".button.radio");
console.log(instanceDivs);
for (let i = 0; i < instanceDivs.length; i++) {
instanceDivs[i].classList.toggle('selected', instanceDivs[i].dataset.folder === instance.folder);
if (instanceDivs[i].dataset.folder === instance.folder)
this.options.activeInstance = instance;
}
});
}
/* When the installation type is selected */
onInstallTypeClicked(type) {
this.typePage.getElement().querySelector(`.singleplayer`).classList.toggle("selected", type === 'singleplayer');
@ -230,7 +242,10 @@ class Manager {
/* When the next button of a wizard page is clicked */
onNextClicked() {
/* Choose which page to show depending on the active page */
if (this.activePage == this.typePage) {
if (this.activePage == this.folderPage) {
this.activePage.hide();
this.typePage.show();
} else if (this.activePage == this.typePage) {
this.activePage.hide();
this.connectionsTypePage.show();
} else if (this.activePage == this.connectionsTypePage) {
@ -250,8 +265,26 @@ class Manager {
showErrorPopup("A critical error has occurred. Please restart the Manager.")
}
} else if (this.activePage == this.connectionsPage) {
this.activePage.hide();
this.passwordsPage.show();
this.options.activeInstance.checkClientPort(this.options.activeInstance.clientPort).then(
(portFree) => {
console.log(this.options.activeInstance.clientPort)
console.log(portFree)
if (portFree) {
return this.options.activeInstance.checkBackendPort(this.options.activeInstance.backendPort);
} else {
return Promise.reject('Port not free');
}
}).then((portFree) => {
if (portFree) {
this.activePage.hide();
this.passwordsPage.show();
} else {
return Promise.reject('Port not free');
}
}).catch(() => {
showErrorPopup('Please, make sure both the client and backend ports are free!');
}
);
} else if (this.activePage == this.passwordsPage) {
if (this.options.activeInstance) {
if (this.options.activeInstance.installed && !this.options.activeInstance.arePasswordsEdited()) {
@ -429,10 +462,14 @@ class Manager {
/* Set the selected port to the dcs instance */
async setPort(port, value) {
var success;
if (port === 'client')
success = await this.options.activeInstance.setClientPort(value);
else
success = await this.options.activeInstance.setBackendPort(value);
if (port === 'client'){
success = await this.options.activeInstance.checkClientPort(value);
this.options.activeInstance.setClientPort(value);
}
else {
success = await this.options.activeInstance.checkBackendPort(value);
this.options.activeInstance.setBackendPort(value);
}
var successEls = this.connectionsPage.getElement().querySelector(`.${port}-port`).querySelectorAll(".success");
for (let i = 0; i < successEls.length; i++) {
@ -486,6 +523,11 @@ class Manager {
}
}
}
reload() {
console.log("reload")
this.activePage.show();
}
}
module.exports = Manager;

10
manager/javascripts/preload.js
View File

@ -268,10 +268,12 @@ window.addEventListener('DOMContentLoaded', async () => {
/* Create event listeners for the hyperlinks */
var links = document.querySelectorAll(".link");
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => {
if (e.target.dataset.link)
exec("start " + e.target.dataset.link);
})
if (links[i].dataset.link) {
links[i].addEventListener("click", (e) => {
if (e.target.dataset.link)
exec("start " + e.target.dataset.link);
})
}
}
})