fix section navigation code

Author: FarrelAD

src/web/index.html

@@ -98,14 +98,31 @@ <h1 class="font-bold text-2xl text-center flex items-baseline justify-center spa
 
 
 
+        <section id="model-visualization" class="hidden">
+            <h1>Visualization</h1>
+        </section>
+
+
+
+        <section id="model-testing" class="hidden">
+            <h1>Testing</h1>
+        </section>
 
-        <nav class="section-controller fixed bottom-0 left-0 w-full flex justify-between bg-indigo-600 p-4 border-t border-indigo-700 lg:px-24">
-            <button id="btn-prev" class="w-auto bg-white text-indigo-600 py-2 px-4 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 invisible">
-                Back
-            </button>                  
-            <button id="btn-next" class="w-auto bg-white text-indigo-600 py-2 px-4 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed" disabled>
-                Next
-            </button>
+
+
+        <nav id="section-controller" class="fixed bottom-0 left-0 w-full flex justify-between bg-indigo-600 p-4 border-t border-indigo-700 lg:px-24">
+            <div id="btn-back-container" class="flex items-center space-x-3 invisible">
+                <button id="btn-back" class="w-auto bg-white text-indigo-600 py-2 px-4 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    Back
+                </button>
+                <span id="btn-back-support-text" class="text-white">Input data</span>
+            </div>
+            <div id="btn-next-container" class="flex items-center space-x-3">
+                <span id="btn-next-support-text" class="text-white">Model selection</span>
+                <button id="btn-next" class="w-auto bg-white text-indigo-600 py-2 px-4 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed" disabled>
+                    Next
+                </button>
+            </div>
         </nav>
     </main>
 

src/web/script.js

@@ -5,8 +5,12 @@ const fileName = document.getElementById('file-name')
 const btnPreviewData = document.getElementById('btn-preview-data')
 const previewData = document.getElementById('preview-data-container')
 
-const btnPrev = document.getElementById('btn-prev')
+const btnBackContainer = document.getElementById('btn-back-container')
+const btnBack = document.getElementById('btn-back')
+const btnBackSupportText = document.getElementById('btn-back-support-text')
+const btnNextContainer = document.getElementById('btn-next-container')
 const btnNext = document.getElementById('btn-next')
+const btnNextSupportText = document.getElementById('btn-next-support-text')
 
 const sections = document.querySelectorAll('section')
 
@@ -34,29 +38,53 @@ const btnCopy = document.getElementById('btn-copy')
 let equation = null
 
 // Global data
-let currentSection = 1
+let currentSection = 0
+const sectionsArray = [
+    'Input data',
+    'Model selection',
+    'Model visualization',
+    'Model testing'
+]
 let fileData = null 
 
 
 
-btnPrev.addEventListener('click', () => {
-    sections[currentSection - 1].classList.toggle('hidden')
+btnBack.addEventListener('click', () => {
+    sections[currentSection].classList.toggle('hidden')
     currentSection--
-    sections[currentSection - 1].classList.toggle('hidden')
-    if (currentSection == 1) {
-        btnPrev.classList.toggle('invisible')
+    sections[currentSection].classList.toggle('hidden')
+
+    if (currentSection == 0) {
+        btnBackContainer.classList.toggle('invisible')
+    }
+
+    if (currentSection < sectionsArray.length) {
+        if (btnNextContainer.classList.contains('invisible')) {
+            btnNextContainer.classList.remove('invisible')
+        }
     }
+
+    btnBackSupportText.textContent = sectionsArray[currentSection - 1] || ''
+    btnNextSupportText.textContent = sectionsArray[currentSection + 1] || ''
 })
 
 btnNext.addEventListener('click', () => {
-    sections[currentSection - 1].classList.toggle('hidden')
+    sections[currentSection].classList.toggle('hidden')
     currentSection++
-    sections[currentSection - 1].classList.toggle('hidden')
-    if (currentSection > 1) {
-        if (btnPrev.classList.contains('invisible')) {
-            btnPrev.classList.remove('invisible')
+    sections[currentSection].classList.toggle('hidden')
+
+    if (currentSection == sectionsArray.length - 1) {
+        btnNextContainer.classList.toggle('invisible')
+    }
+
+    if (currentSection > 0) {
+        if (btnBackContainer.classList.contains('invisible')) {
+            btnBackContainer.classList.remove('invisible')
         }
     }
+    
+    btnBackSupportText.textContent = sectionsArray[currentSection - 1] || ''
+    btnNextSupportText.textContent = sectionsArray[currentSection + 1] || ''
 })