mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Pax1601
GitHub
commit
0e9b249bba
@ -32,6 +32,7 @@
|
||||
}
|
||||
|
||||
#manager-installations .option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
@ -70,6 +71,19 @@
|
||||
|
||||
#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">
|
||||
@ -98,7 +112,7 @@
|
||||
<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 already installed'): 'Olympus not installed yet' %>
|
||||
<%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
|
||||
</span>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
#manager-instances .button.cancel {
|
||||
position: absolute;
|
||||
left: 110px;
|
||||
top: 180px;
|
||||
top: 130px;
|
||||
}
|
||||
|
||||
#manager-instances .server-data {
|
||||
@ -104,25 +104,120 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#manager-instances .start-stop-client {
|
||||
margin-right: auto;
|
||||
#manager-instances .instance-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(2) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--lightgray);
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(2).installed {
|
||||
font-weight: 600;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(2).error {
|
||||
font-weight: 600;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(3) {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: var(--lightgray);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info>span:nth-child(4) {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#manager-instances .instance-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info .info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info .info>div:nth-child(1) {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info .info>div:nth-child(2) {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#manager-instances .instance-info .divider {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#manager-instances .start, #manager-instances .open-browser {
|
||||
margin-right: auto;
|
||||
color: var(--offwhite);
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
#manager-instances .start {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#manager-instances .start>div {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#manager-instances .edit,
|
||||
#manager-instances .uninstall,
|
||||
#manager-instances .stop {
|
||||
color: var(--offwhite);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-instances .edit:hover,
|
||||
#manager-instances .uninstall:hover,
|
||||
#manager-instances .stop:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-instances">
|
||||
<div class="content">
|
||||
<div class="button cancel">
|
||||
Return to menu
|
||||
<img src="./icons/chevron-left-solid.svg"/> Return to menu
|
||||
</div>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
<%= manage? "View and manage instances": "Update Olympus settings" %>
|
||||
View and manage installs
|
||||
</span>
|
||||
<span>
|
||||
The following versions of Olympus have been detected.
|
||||
</span>
|
||||
<span>
|
||||
<%= manage? "You can inspect and manage you Olympus instances by selecting the options below.": "You can edit your settings or remove Olympus by selecting the options below." %>
|
||||
The following Oympus installs have been identified. <br>You can start an Olympus server, modify settings and uninstall below.
|
||||
</span>
|
||||
</div>
|
||||
<div class="scroll-container">
|
||||
@ -134,19 +229,16 @@
|
||||
<span class="<%= instances[i].installed? (instances[i].error? 'error': ''): '' %>">
|
||||
<%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': ''): '' %>
|
||||
</span>
|
||||
<% if (!manage) { %>
|
||||
<span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
|
||||
<% } else { %>
|
||||
<div class="server-data">
|
||||
<div class="server-status webserver online hide">ACTIVE</div>
|
||||
<div class="server-status webserver offline">OFFLINE</div>
|
||||
<div class="server-status backend online hide">CONNECTED</div>
|
||||
<div class="server-status backend offline">DISCONNECTED</div>
|
||||
<div class="server-data-entry fps"><img src="./icons/display-solid.svg"><span>FPS: </span><span class="data">0</span></div>
|
||||
<div class="server-data-entry load"><img src="./icons/server-solid.svg"><span>Load: </span><span class="data">0</span></div>
|
||||
<div class="server-data-entry uptime"></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
|
||||
<div class="server-data">
|
||||
<div class="server-status webserver online hide">ACTIVE</div>
|
||||
<div class="server-status webserver offline">OFFLINE</div>
|
||||
<div class="server-status backend online hide">CONNECTED</div>
|
||||
<div class="server-status backend offline">DISCONNECTED</div>
|
||||
<div class="server-data-entry fps"><img src="./icons/display-solid.svg"><span>FPS: </span><span class="data">0</span></div>
|
||||
<div class="server-data-entry load"><img src="./icons/server-solid.svg"><span>Load: </span><span class="data">0</span></div>
|
||||
<div class="server-data-entry uptime"></div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="info">
|
||||
<div>Client port</div>
|
||||
@ -162,13 +254,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="instance-buttons">
|
||||
<% if (!manage) { %>
|
||||
<div class="button edit">Edit settings</div>
|
||||
<div class="button uninstall">Uninstall</div>
|
||||
<% } else { %>
|
||||
<div class="button start-stop-server">Start server</div>
|
||||
<div class="button start-stop-client">Start client</div>
|
||||
<% } %>
|
||||
<div class="button start collapse">
|
||||
Start Olympus
|
||||
<div>
|
||||
<div class="button start-server">Start server</div>
|
||||
<div class="button start-client">Start client</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button edit">Edit settings</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>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
@ -85,12 +85,8 @@
|
||||
<div class="option install <%= installEnabled? '': 'disabled' %>">
|
||||
Install Olympus
|
||||
</div>
|
||||
<div class="option update <%= updateEnabled? '': 'disabled' %>">
|
||||
Update/remove Olympus
|
||||
</div>
|
||||
<div class="option divider"></div>
|
||||
<div class="option manage <%= manageEnabled? '': 'disabled' %>">
|
||||
View and manage instances
|
||||
View / Manage installs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
1
manager/icons/chevron-down-solid.svg
Normal file
1
manager/icons/chevron-down-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#F2F2F2" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
|
||||
|
After Width: | Height: | Size: 449 B |
1
manager/icons/chevron-left-solid.svg
Normal file
1
manager/icons/chevron-left-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#F2F2F2" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
|
||||
|
After Width: | Height: | Size: 446 B |
1
manager/icons/chevron-right-solid.svg
Normal file
1
manager/icons/chevron-right-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#F2F2F2" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
|
||||
|
After Width: | Height: | Size: 449 B |
8
manager/icons/discord.svg
Normal file
8
manager/icons/discord.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#F2F2F2" fill-rule="nonzero">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
3
manager/icons/github.svg
Normal file
3
manager/icons/github.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
10
manager/icons/youtube.svg
Normal file
10
manager/icons/youtube.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" width="71.412064" height="50" x="0" y="0" version="1.1" viewBox="0 0 71.412065 50">
|
||||
<style id="style3" type="text/css">
|
||||
.st2{fill:#F2F2F2}
|
||||
</style>
|
||||
<g id="g5" transform="scale(.58824)">
|
||||
<path id="path7" fill="#F2F2F2" fill-opacity="1" d="M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z"/>
|
||||
<path id="polygon9" fill="#181e25" d="M80.2 42.5 48.6 24.3v36.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 738 B |
@ -26,8 +26,12 @@
|
||||
<div> DCS Olympus Manager</div>
|
||||
<div class="accent-green">{{OLYMPUS_VERSION_NUMBER}}</div>
|
||||
</div>
|
||||
<div class="link first" data-link="https://github.com/Pax1601/DCSOlympus">GitHub</div>
|
||||
<div class="link" data-link="https://discord.gg/pCfCykAdrw">Discord</div>
|
||||
<div class="link first" data-link="https://github.com/Pax1601/DCSOlympus/wiki/2.-User-Guide">User Guide</div>
|
||||
<div class="link" data-link="https://github.com/Pax1601/DCSOlympus/wiki/Setup-Troubleshooting">Troubleshooting Guide</div>
|
||||
<div style="width: 15px;"></div>
|
||||
<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>
|
||||
<div id="loader" class="manager-page hide">
|
||||
Loading, please wait...
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -139,11 +139,17 @@ 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)
|
||||
|
||||
if (this.webserverOnline)
|
||||
instanceDiv.querySelector(".button.start").classList.remove("loading")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -354,7 +360,6 @@ class DCSInstance {
|
||||
}
|
||||
}
|
||||
else {
|
||||
logger.log(list[0])
|
||||
logger.error(`The process listening on the specified port has an incorrect name: ${list[0].name}`)
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,8 @@ class InstallationsPage extends ManagerPage {
|
||||
}
|
||||
|
||||
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
|
||||
|
||||
super.render();
|
||||
}
|
||||
|
||||
async onOptionClicked(e) {
|
||||
|
||||
@ -17,47 +17,79 @@ 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) {
|
||||
e.target.closest(".collapse").classList.add("loading");
|
||||
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) {
|
||||
e.target.closest(".collapse").classList.add("loading");
|
||||
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() {
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -17,6 +17,8 @@ class ResultPage extends ManagerPage {
|
||||
element.innerHTML = str;
|
||||
|
||||
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
|
||||
|
||||
super.render();
|
||||
}
|
||||
|
||||
show() {
|
||||
|
||||
@ -1 +1 @@
|
||||
nodemon --watch . --exec "./scripts/copy-package"
|
||||
nodemon --watch ./**/*.* --exec "./scripts/copy-package"
|
||||
@ -1,7 +1,10 @@
|
||||
:root {
|
||||
--background: #181e25;
|
||||
--background-dark: #13181f;
|
||||
--background-light: #202831;
|
||||
--background-disabled: #212A34;
|
||||
--offwhite: #F2F2F2;
|
||||
--offwhite-transparent: #F2F2F255;
|
||||
--blue: #247be2;
|
||||
--red: #FF5858;
|
||||
--green: #8bff63;
|
||||
@ -85,7 +88,7 @@ body {
|
||||
#header {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
align-items: center;
|
||||
color: #F2F2F2;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
@ -109,6 +112,10 @@ body {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#header img.link {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
@ -213,6 +220,9 @@ body {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.next {
|
||||
@ -220,17 +230,6 @@ body {
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
.uninstall {
|
||||
color: var(--offwhite);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--offwhite);
|
||||
}
|
||||
|
||||
.edit, .start-stop-server, .start-stop-client {
|
||||
color: var(--offwhite);
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.back {
|
||||
color: var(--offwhite);
|
||||
background-color: var(--background);
|
||||
@ -312,6 +311,8 @@ input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 15px 0px !important;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#popup .footer {
|
||||
@ -450,65 +451,6 @@ input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.instance-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.instance-info>span:nth-child(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.instance-info>span:nth-child(2) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--lightgray);
|
||||
}
|
||||
|
||||
.instance-info>span:nth-child(2).installed {
|
||||
font-weight: 600;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.instance-info>span:nth-child(2).error {
|
||||
font-weight: 600;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.instance-info>span:nth-child(3) {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.instance-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.instance-info .info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.instance-info .info>div:nth-child(1) {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.instance-info .info>div:nth-child(2) {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-top: 0px solid transparent !important;
|
||||
border-bottom: 1px solid var(--offwhite) !important;
|
||||
@ -517,11 +459,6 @@ input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.instance-info .divider {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
@ -531,3 +468,57 @@ input {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
.button.collapse {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.button.collapse::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("../icons/chevron-down-solid.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.button.collapse.loading::after {
|
||||
background-image: url("../icons/spinner-solid.svg");
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.button.collapse>div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: translate(-15px, calc(50% + 20px));
|
||||
}
|
||||
|
||||
.button.collapse.open>div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button.collapse .button {
|
||||
color: var(--offwhite);
|
||||
background-color: var(--background-light);
|
||||
}
|
||||
|
||||
.button.collapse .button:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
.button.collapse .button:first-child {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.button.collapse .button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.button.collapse .button:last-child {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user