mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added distinction between basic and advanced mode
This commit is contained in:
Pax1601
@@ -1,4 +1,33 @@
|
||||
<style>
|
||||
#manager-connections .option {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--offwhite);
|
||||
width: 220px;
|
||||
height: 60px;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--offwhite);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#manager-connections .option:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-connections .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
#manager-connections .success,
|
||||
#manager-connections .error {
|
||||
position: absolute;
|
||||
@@ -29,65 +58,85 @@
|
||||
</style>
|
||||
<div id="manager-connections">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= !install || simplified? 'hide': '' %>">User path</div>
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="blue">Type of install</div>
|
||||
<div class="white">Ports and address</div>
|
||||
<div class="empty">Passwords</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Accept or modify port settings (optional)
|
||||
</span>
|
||||
<span>
|
||||
If you are installing Olympus locally for Single player use, it's recommended you leave these as default and continue.
|
||||
If you are installing a dedicated server, then follow the instructions available on the DCS Olympus Wiki.
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group client-port">
|
||||
<span>Client port
|
||||
<img src="./icons/circle-info-solid.svg" 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="<%= instance["clientPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
<% if (selectAutoOrManual) { %>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Do you want to set port and address settings manually?
|
||||
</span>
|
||||
<span>
|
||||
We can auto setup ports and addresses for you, or you can set the manually. <br>
|
||||
If you don't have an understanding of how Olympus works, we recommend the auto option.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="option button auto">
|
||||
Auto apply settings
|
||||
</div>
|
||||
<div class="option button manual">
|
||||
Manually set options
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-port">
|
||||
<span>Backend port
|
||||
<img src="./icons/circle-info-solid.svg" 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="<%= instance["backendPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
|
||||
<% } else { %>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Enter the ports and address to use.
|
||||
</span>
|
||||
<span>
|
||||
Select client and backend ports, making sure they are free to use with the provided check. <br>
|
||||
Unless you want to support direct API calls to the backend, you can keep the address to localhost even for dedicated servers.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group client-port">
|
||||
<span>Client port
|
||||
<img src="./icons/circle-info-solid.svg" 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"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-address">
|
||||
<span>Backend address
|
||||
<img src="./icons/circle-info-solid.svg" title="This is the backend address Olympus will listen on. Unless you know what you are doing, leave it as localhost, even for dedicated server installations.">
|
||||
</span>
|
||||
<input type="text" value="<%= instance["backendAddress"] %>">
|
||||
</div>
|
||||
<div class="input-group backend-port">
|
||||
<span>Backend port
|
||||
<img src="./icons/circle-info-solid.svg" 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["backendPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-address">
|
||||
<span>Backend address
|
||||
<img src="./icons/circle-info-solid.svg" title="This is the backend address Olympus will listen on. Unless you know what you are doing, leave it as localhost, even for dedicated server installations.">
|
||||
</span>
|
||||
<input type="text" value="<%= activeInstance["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">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,27 +88,41 @@
|
||||
</style>
|
||||
<div id="manager-installations">
|
||||
<div class="step-summary">
|
||||
<div class="white">User path</div>
|
||||
<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</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Select a DCS path to install Olympus to.
|
||||
<% if (install) { %>
|
||||
Select a DCS path to install Olympus to.
|
||||
<% } else { %>
|
||||
Select an Olympus instance to edit.
|
||||
<% } %>
|
||||
</span>
|
||||
<span>
|
||||
We have automatically detected the following DCS installations under your Saved Games / DCS folder.
|
||||
<% 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>
|
||||
Please select which DCS installations you want to add Olympus to.
|
||||
<% 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 <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
|
||||
<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'): '' %>">
|
||||
@@ -118,9 +132,12 @@
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button cancel">
|
||||
Cancel installation
|
||||
<% if (install) { %>
|
||||
Cancel installation
|
||||
<% } else { %>
|
||||
Cancel editing
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,6 +36,18 @@
|
||||
row-gap: 25px;
|
||||
}
|
||||
|
||||
#manager-instances .option:not(.installed) {
|
||||
background-color: var(--background-disabled);
|
||||
}
|
||||
|
||||
#manager-instances .option:not(.installed) .info {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
#manager-instances .option:not(.installed) .server-data {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
#manager-instances>.instructions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -192,6 +204,7 @@
|
||||
}
|
||||
|
||||
#manager-instances .edit,
|
||||
#manager-instances .install,
|
||||
#manager-instances .uninstall,
|
||||
#manager-instances .stop {
|
||||
color: var(--offwhite);
|
||||
@@ -200,34 +213,36 @@
|
||||
}
|
||||
|
||||
#manager-instances .edit:hover,
|
||||
#manager-instances .install:hover,
|
||||
#manager-instances .uninstall:hover,
|
||||
#manager-instances .stop:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-instances .install {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-instances">
|
||||
<div class="content">
|
||||
<div class="button cancel">
|
||||
<img src="./icons/chevron-left-solid.svg"/> Return to menu
|
||||
</div>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
View and manage installs
|
||||
</span>
|
||||
<span>
|
||||
The following Oympus installs have been identified. <br>You can start an Olympus server, modify settings and uninstall below.
|
||||
The following DCS installations have been identified. <br>You can start an Olympus server, modify settings and uninstall below.
|
||||
</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 %>">
|
||||
<div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
|
||||
<div class="instance-info">
|
||||
<span><%= instances[i].name %></span>
|
||||
<span class="<%= instances[i].installed? (instances[i].error? 'error': ''): '' %>">
|
||||
<%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': ''): '' %>
|
||||
<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>
|
||||
<span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
|
||||
<div class="server-data">
|
||||
@@ -242,15 +257,15 @@
|
||||
<div class="divider"></div>
|
||||
<div class="info">
|
||||
<div>Client port</div>
|
||||
<div> <%= instances[i].clientPort %> </div>
|
||||
<div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div>Backend port</div>
|
||||
<div> <%= instances[i].backendPort %> </div>
|
||||
<div> <%= instances[i].installed? instances[i].backendPort: "N/A" %> </div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div>Backend address</div>
|
||||
<div> <%= instances[i].backendAddress %> </div>
|
||||
<div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="instance-buttons">
|
||||
@@ -263,6 +278,7 @@
|
||||
</div>
|
||||
|
||||
<div class="button edit">Edit settings</div>
|
||||
<div class="button install">Install Olympus</div>
|
||||
<div class="button uninstall">Uninstall Olympus</div>
|
||||
<div class="button open-browser hide">Open in browser</div>
|
||||
<div class="button stop hide">Stop Olympus</div>
|
||||
|
||||
@@ -74,6 +74,11 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#manager-menu .divider {
|
||||
width: 460px;
|
||||
border-color: var(--darkgray) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-menu">
|
||||
<div id="summary">
|
||||
@@ -83,10 +88,14 @@
|
||||
</div>
|
||||
<div id="menu">
|
||||
<div class="option install <%= installEnabled? '': 'disabled' %>">
|
||||
Install Olympus
|
||||
Run Install wizard
|
||||
</div>
|
||||
<div class="option manage <%= manageEnabled? '': 'disabled' %>">
|
||||
View / Manage installs
|
||||
<div class="option edit <%= editEnabled? '': 'disabled' %>">
|
||||
Update settings
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="option uninstall <%= uninstallEnabled? '': 'disabled' %>">
|
||||
Remove Olympus
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,7 +3,8 @@
|
||||
</style>
|
||||
<div id="manager-passwords">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= !install || simplified? 'hide': '' %>">User path</div>
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="blue">Type of install</div>
|
||||
<div class="blue">Ports and address</div>
|
||||
<div class="white">Passwords</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
@@ -41,7 +42,7 @@
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
<% if (!simplified) { %>
|
||||
<% if (!singleInstance) { %>
|
||||
<div class="button cancel">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
</div>
|
||||
|
||||
@@ -129,10 +129,10 @@
|
||||
<img class="wait"><img class="success hide"><img class="error hide">
|
||||
<div>
|
||||
<span>
|
||||
<%= instance.name %>
|
||||
<%= activeInstance.name %>
|
||||
</span>
|
||||
<span><img src="./icons/folder-open-solid.svg">
|
||||
<%= instance.folder %>
|
||||
<%= activeInstance.folder %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
61
manager/ejs/type.ejs
Normal file
61
manager/ejs/type.ejs
Normal file
@@ -0,0 +1,61 @@
|
||||
<style>
|
||||
#manager-type .option {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--offwhite);
|
||||
width: 220px;
|
||||
height: 60px;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--offwhite);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#manager-type .option:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-type .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
</style>
|
||||
<div id="manager-type">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="white">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>
|
||||
Do you want to install Olympus for singleplayer or multiplayer?
|
||||
</span>
|
||||
<span>
|
||||
Select Single player if you only want to play locally on your own computer. <br>
|
||||
If you want Olympus to be used on a different computer or over the internet for a dedicated server, select the multiplayer option.
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="option button singleplayer">
|
||||
Singleplayer
|
||||
</div>
|
||||
<div class="option button multiplayer">
|
||||
Multiplayer
|
||||
</div>
|
||||
</div>
|
||||
<div class="button cancel">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
67
manager/ejs/welcome.ejs
Normal file
67
manager/ejs/welcome.ejs
Normal file
@@ -0,0 +1,67 @@
|
||||
<style>
|
||||
#manager-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#manager-welcome span {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-welcome .option {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--offwhite);
|
||||
width: 460px;
|
||||
height: 70px;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-welcome .option:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-welcome .option.disabled {
|
||||
pointer-events: none;
|
||||
color: var(--darkgray);
|
||||
border-color: var(--darkgray);
|
||||
}
|
||||
|
||||
#manager-welcome .option * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-welcome">
|
||||
<span style="font-size: 28px; font-weight: bold;">
|
||||
Do you want to use the Olympus Manager in basic or advanced mode?
|
||||
</span>
|
||||
<span style="color: var(--gray);">
|
||||
Basic mode is recommended for most users. <br>
|
||||
Advanced mode is for those who know how Olympus works or for server owners.
|
||||
</span>
|
||||
<span style="color: var(--gray); font-weight: bold;">
|
||||
You can change this setting at any time.
|
||||
</span>
|
||||
<div class="option basic">
|
||||
Basic mode
|
||||
</div>
|
||||
<div class="option advanced">
|
||||
Advanced mode
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user