Added success/failure banner and fixed instance status

manager/.vscode/tasks.json

@@ -6,7 +6,7 @@
         {
             "label": "mirror-package",
             "type": "shell",
-            "command": "./scripts/mirror-package.bat",
+            "command": "call ./scripts/mirror-package.bat",
             "isBackground": true
         }
     ]

manager/ejs/instances.ejs

@@ -3,6 +3,12 @@
     
 </style>
     <div class="dashboard">
+        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+        </div>
+        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+        </div>
         <div class="content">
             <div class="instructions">
                 <span class="title">

manager/ejs/result.ejs

@@ -6,38 +6,6 @@
         padding: 60px 120px;
     }
     
-    #result-page .result-summary {
-        padding: 25px 15px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
-    }
-
-    #result-page .result-summary .title {
-        font-weight: bold;
-        font-size: var(--big);
-        display: flex;
-        align-items: center;
-    }
-
-    #result-page .result-summary .title img {
-        margin-right: 10px;
-    }
-
-    #result-page .result-summary .description {
-        font-size: var(--normal);
-    }
-
-    #result-page .result-summary.success{
-        color: var(--background-color);
-        background-color: var(--green);
-    }
-
-    #result-page .result-summary.error{
-        color: var(--background-color);
-        background-color: var(--red);
-    }
-
     #result-page .instructions-group {
         display: flex;
         color: var(--offwhite);

manager/ejs/settings.ejs

@@ -2,9 +2,15 @@
     
 </style>
     <div class="dashboard">
-        <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onBackClicked')">
+        <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onCancelClicked')">
             <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Back to menu
         </div>
+        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+        </div>
+        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+        </div>
         <div class="content">
             <div class="instructions">
                 <span class="title">

manager/icons/triangle-exclamation-solid-orange.svg

@@ -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 2023 Fonticons, Inc.--><path opacity="1" fill="#ffa500" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>

manager/javascripts/dcsinstance.js

@@ -474,9 +474,10 @@ class DCSInstance {
             logger.log(`Editing completed successfully`);
             hidePopup();
 
-            getManager().options.mode === "basic"? getManager().menuPage.show(): getManager().instancesPage.show();
+            getManager().options.mode === "basic"? getManager().settingsPage.show(): getManager().instancesPage.show();
         } catch (err) {
             logger.log(`An error occurred during editing: ${err}`);
+            getManager().getActiveInstance().error = true;
             hidePopup();
             showErrorPopup(`A critical error occurred, check ${getManager().options.logLocation} for more info.`)
         }

manager/javascripts/manager.js

@@ -359,12 +359,19 @@ class Manager {
     /* When the back button of a wizard page is clicked */
     onBackClicked() {
         this.activePage.hide();
+
+        /* If we have backed to the menu, instances or settings page, reset the active instance */
+        if ([this.instancesPage, this.settingsPage].includes(this.activePage.previousPage)) {
+            delete this.options.activeInstance;
+        }
+
         this.activePage.previousPage.show(true); // Don't change the previous page
         this.updateInstances();
     }
 
     onCancelClicked() {
         this.activePage.hide();
+        delete this.options.activeInstance;
         if (this.options.mode === "basic") 
             this.menuPage.show(true);
         else
@@ -606,7 +613,7 @@ class Manager {
         document.getElementById("loader").style.opacity = "0%";
         window.setTimeout(() => {
             document.getElementById("loader").classList.add("hide");
-        }, 200);        
+        }, 250);        
     }
 }
 

manager/javascripts/managerpage.js

@@ -40,20 +40,17 @@ class ManagerPage {
         this.element.style.opacity = "0%";
         window.setTimeout(() => {
             this.element.classList.add("hide");
-        }, 200);        
+        }, 250);        
     }
 
     render(str) { 
         this.element.innerHTML = str;
         this.element.style.opacity = "0%";
 
-        window.setTimeout(() => {
+        this.element.classList.remove("hide");
-            this.element.classList.remove("hide");
-        }, 200)
-
         window.setTimeout(() => {
             this.element.style.opacity = "100%";
-        }, 300)
+        }, 0)
 
         /* Connect all the collapsable buttons */
         let buttons = document.querySelectorAll(".button.collapse");

manager/javascripts/popup.js

@@ -97,7 +97,7 @@ function hidePopup() {
     window.setTimeout(() => {
         document.getElementById("grayout").classList.add("hide");
         document.getElementById("popup").classList.add("hide");
-    }, 200);
+    }, 250);
 }
 
 function setPopupLoadingProgress(message, percent) {

manager/stylesheets/style.css

@@ -212,9 +212,10 @@ body {
 /* Manager page                                 */
 /************************************************/
 .manager-page {
+    position: absolute;
     min-width: 1200px;
     overflow-y: auto;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -230,7 +231,7 @@ body {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.30);
     z-index: 999;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -250,7 +251,7 @@ body {
     padding: 20px 40px;
     align-items: start;
     z-index: 999;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -472,7 +473,7 @@ input {
     flex-direction: column;
     row-gap: 15px;
     height: 100%;
-    padding: 80px;
+    padding: 40px 80px;
 }
 
 .dashboard .scroll-container {
@@ -625,6 +626,9 @@ input {
     font-size: var(--normal);
     font-weight: 600;
     color: var(--lightgray);
+    display: flex;
+    flex-direction: row;
+    column-gap: 8px;
 }
 
 .dashboard .instance-info>.status.installed {
@@ -632,11 +636,23 @@ input {
     color: var(--green);
 }
 
+.dashboard .instance-info>.status.installed::before {
+    content: url("../icons/check-solid-green.svg");
+    height: 14px;
+    width: 14px;
+}
+
 .dashboard .instance-info>.status.error {
     font-weight: 600;
     color: orange;
 }
 
+.dashboard .instance-info>.status.error::before {
+    content: url("../icons/triangle-exclamation-solid-orange.svg");
+    height: 14px;
+    width: 14px;
+}
+
 .dashboard .instance-buttons {
     display: flex;
     flex-direction: row;
@@ -724,6 +740,41 @@ input {
     cursor: default;
 }
 
+/************************************************/
+/* Result summary                               */
+/************************************************/
+.result-summary {
+    padding: 25px 15px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.result-summary .title {
+    font-weight: bold;
+    font-size: var(--big);
+    display: flex;
+    align-items: center;
+}
+
+.result-summary .title img {
+    margin-right: 10px;
+}
+
+.result-summary .description {
+    font-size: var(--normal);
+}
+
+.result-summary.success{
+    color: var(--background-color);
+    background-color: var(--green);
+}
+
+.result-summary.error{
+    color: var(--background-color);
+    background-color: var(--red);
+}
+
 /************************************************/
 /* Misc                                         */
 /************************************************/