add changes for wizard side panel

O-MG · Feb 2, 2024 · 728698a · 728698a
1 parent a240c86
commit 728698a
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 21 deletions.
diff --git a/core/script.js b/core/script.js
@@ -16,14 +16,12 @@ const maxLogLength = 100;
 const log = document.getElementById("log");
 const stepBox = document.getElementById("steps-container");
 const butWelcome = document.getElementById("btnWelcome");
-const butAdvanced = document.getElementById("btnAdvanced");
 const butRejectFlash = document.getElementById("btnDeny");
 const butWizardStart = document.getElementById("btnWizardStart"); 
 
 const butStart = document.getElementById("btnStart");
 const butConnect = document.getElementById("btnConnect");
 const butSkipWelcome = document.getElementById("welcomeScreenCheck");
-const butAdvancedMode = document.getElementById("advancedMode");
 const agreementModal = document.getElementById("agreement-modal");
 
 // Console Modal
@@ -83,8 +81,7 @@ var settings = {
     "devWiFiPass": txtSSIDPass,
     "devWifiMode": butWifiMode,
     "firmwareRelease": butBranch,
-    "skipWelcome": butSkipWelcome,
-    "advancedMode": butAdvancedMode
+    "skipWelcome": butSkipWelcome
 }
 
 var releaseDataCache = {}
@@ -194,7 +191,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // set the clear button and reset
     butWelcome.addEventListener("click", clickWelcome);
-    butAdvanced.addEventListener("click", clickAdvanced);
     butStart.addEventListener("click",clickWelcomeStart);
     butRejectFlash.addEventListener("click",clickRejectFlash);
     //butSkipWelcome.addEventListener("click", clickSkipWelcome);
@@ -228,7 +224,7 @@ document.addEventListener("DOMContentLoaded", () => {
     // to ensure people read things. 
     butWelcome.disabled=true;
     butProgram.disabled = true;
-    buildReleaseSelectors(); // DISABLE IN DEBUG / RENABLE FOR RELEASE
+    //buildReleaseSelectors(); // DISABLE IN DEBUG / RENABLE FOR RELEASE
     accordionDisable();
     logMsg("Welcome to O.MG Web Serial Flasher. Ready...");
 
@@ -518,11 +514,7 @@ async function clickAdvanced(){
 }
 
 async function clickWelcome() {
-    if(!butWizardStart.classList.contains("d-none") || butAdvancedMode.checked == false){
-        switchStep("step-mode-selector");
-    } else {
-        await clickAdvanced();
-    }
+    await clickAdvanced();
 }
 
 async function clickRejectFlash(){

diff --git a/core/style.css b/core/style.css
@@ -244,4 +244,68 @@ button.fancy:hover::after {
 .wizard-button {
   padding-left: 5px;
   padding-right: 4px;
+}
+
+.wizard-container {
+  margin-top: 20px;
+}
+
+.wizard-steps {
+  margin-top: 10px;
+  padding-top: 2rem;
+}
+
+
+#wizard-slideout {
+  background: #fafafa;
+  color: #333;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Shadow */
+  position: fixed;
+  top: 0;
+  left: -600px; 
+  width: 600px;
+  height: 100%;
+  z-index: 9999;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+#wizard-slideout.on {
+  left: 0;
+}
+
+.wizard-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 8rem;
+  background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */
+  box-shadow: 0 4px 2px -2px gray;
+}
+
+.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+
+.wizard-close-button {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #b8b8b8;
+  text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
+}
+
+.start-support {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  background-color: #f0f0f0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
diff --git a/core/wizard.js b/core/wizard.js
@@ -2,8 +2,10 @@
 "use strict";
 
 const wizardFile = 'wizard/wizard.json'
-const stepsContainer = document.getElementById('steps-container');
+const helpPanel = document.getElementById('wizard-slideout')
+const stepsContainer = document.getElementById('wizard-steps');
 const butWizard = document.getElementById("btnWizardStart"); 
+const butCloseWizard = document.getElementById("wizard-close-button")
 
 let wizardStart = ""
 
@@ -15,6 +17,26 @@ function doesElementExist(elementId) {
     return !!document.getElementById(elementId);
 }
 
+
+async function wizardStep(activeStep) {
+    // this may need to be more specific
+    let steps = stepsContainer.getElementsByClassName("wizard-step");
+    console.log("in here")
+    console.log(steps);
+    console.log(activeStep);
+    for (let i = 0; i < steps.length; i++) {
+        let step = steps[i];
+        console.log(activeStep);
+        console.log(step);
+        if (activeStep === step.id) {
+            step.classList.remove("d-none");
+        } else {
+            step.classList.add("d-none");
+        }
+    }
+}
+
+
 async function loadWizard() {
 	fetch(wizardFile)
 	.then(response => {
@@ -37,19 +59,20 @@ async function loadWizard() {
 
 function generateStepHTML(step) {
     var stepContainer = document.createElement('div');
-    stepContainer.classList.add('step', 'd-none');
+    stepContainer.classList.add('wizard-step', 'd-none');
     stepContainer.id = `wizard_${step.step}`;
 
     var h2Element = document.createElement('h2');
     h2Element.textContent = step.title;
+    h2Element.classList.add('pb-2','border-bottom');
 
     stepContainer.appendChild(h2Element);
 
     if(step.image){
         let imageDiv = document.createElement('div');
         imageDiv.classList.add('wizard-image',"container");
         let imageRes = document.createElement('img');
-        imageRes.classList.add("img-fluid","mw-80")
+        imageRes.classList.add("img-fluid","mw-80","rounded-4","shadow-lg");
         imageRes.src = step.image;
         imageRes.alt = step.step;
         imageDiv.appendChild(imageRes);
@@ -119,6 +142,8 @@ function renderWizard(steps){
     }
     steps.forEach(step => {
         stepsContainer.prepend(generateStepHTML(step));
+        console.log(stepsContainer)
+        console.log(generateStepHTML(step))
     });
 }
 
@@ -142,21 +167,35 @@ function handleNextWizardStep(step,clicked_step){
             ready = window[step.validator](step);
         }
         if(ready){
-            switchStep(next_step);
+            wizardStep(next_step);
         }
     } else {
     	console.log(`Attempting to navigate to nonexistant wizard step ${clicked_step}`)
     }
 }
 
+function toggleHelpPanel(){
+    helpPanel.classList.toggle("on");
+    if(helpPanel.classList.contains("on")){
+        butWizard.textContent="Close Help"
+    } else {
+        butWizard.textContent = "Continue Help"
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     loadWizard();
     console.log("HERE");
     console.log(wizardStart);
     butWizard.addEventListener('click', async function() {
         if(wizardStart != ""){
             logMsg(`User starting guided wizard for flashing. Initial Step: ${wizardStart}`)
-            await switchStep(wizardStart);
+            toggleHelpPanel();
+            await wizardStep(wizardStart);
+
         }
     });
+    butCloseWizard.addEventListener('click', () => {
+        toggleHelpPanel();
+    })
 });
diff --git a/index.html b/index.html
@@ -149,7 +149,7 @@ <h4>Terms of Use</h4>
 								</div>
 								<!--<div class="p-4"></div>-->
                             </div>
-                            <div class="step d-none" id="step-mode-selector">
+                            <!--<div class="step d-none" id="step-mode-selector">
 								<div class="d-flex justify-content-between bd-highlight mb-3">
 									<div class="p-2 bd-highlight"></div>
 									<div class="p-2 bd-highlight"><h2>O.MG Web Flasher</h2></div>
@@ -173,16 +173,14 @@ <h2>Welcome to the O.MG Web Programmer </h2>
 										<div class="d-flex p-2 font-weight-normal">
 											<p>Welcome to the O.MG WebFlasher. This tool is designed to get you started with your O.MG Device. To begin, please select "Advanced" mode or the "Step by Step" Wizard</p><p></p>
 										</div>
-									<!--</div>
-									<div class="m-2 bg-white">-->
 										<div class="d-flex justify-content-center align-items-center p-2">
-											<button id="btnWizardStart" class="btn btn-danger btn-mode-select me-2 d-none">Step by Step</button>
+											
 											<button id="btnAdvanced" class="btn btn-danger btn-mode-select">Advanced</button>
 										</div>
 									</div>
 									<div class="p-4"></div>
 								</div>
-                            </div>
+                            </div>-->
                             <div class="step d-none" id="modular-stepper">
 								<div class="d-flex justify-content-between bd-highlight mb-3">
 									<div class="p-2 bd-highlight"></div>
@@ -555,6 +553,15 @@ <h5 class="modal-title">Help: Programming</h5>
 			</div>
 		</div>
 	</div>
+	<div id="wizard-slideout">
+		<div class="container px-4 py-5" id="wizard-container">
+			<div id="wizard-close-button" class="wizard-close-button btn btn-secondary btn-sm">X</div>
+			<div id="wizard-steps">
+				<!--content fill here-->
+			</div>
+			<div class="wizard-footer"></div>	
+		</div>		
+	</div>
 	<div class="modal fade" id="notSupported" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="notSupported" aria-hidden="true">
 		<div class="modal-dialog modal-fullscreen">
 			<div class="modal-content text-center align-middle p-5">
@@ -570,6 +577,9 @@ <h1 class="text-danger fs-1 h1">Unsupported Browser</h1>
 			</div>
 		</div>
 	</div>
+	<div class="start-support">
+		<button id="btnWizardStart" class="btn btn-danger btn-mode-select me-2 d-none">Step by Step</button>
+	</div>
     <script src="js/bootstrap.min.js "></script>
 </body>
 </html>