From e0ef5b02618a4474a3cad6d55d35c1476e82c844 Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@gmail.com>
Date: Mon, 30 May 2022 11:35:19 +0200
Subject: [PATCH] Basic navigation

---
 js/defaults_dialog.js         | 34 ++++++++++++++-
 js/defaults_dialog_entries.js |  2 +-
 main.html                     | 78 ++++++++++++++++++++---------------
 src/css/defaults_dialog.css   | 17 +++++++-
 wizard/buttons.html           |  8 ++++
 wizard/filters.html           |  1 +
 wizard/gps.html               |  1 +
 wizard/outputs.html           |  1 +
 wizard/pids.html              |  1 +
 wizard/receiver.html          |  1 +
 10 files changed, 107 insertions(+), 37 deletions(-)
 create mode 100644 wizard/buttons.html
 create mode 100644 wizard/filters.html
 create mode 100644 wizard/gps.html
 create mode 100644 wizard/outputs.html
 create mode 100644 wizard/pids.html
 create mode 100644 wizard/receiver.html

diff --git a/js/defaults_dialog.js b/js/defaults_dialog.js
index 27c465ef..64009317 100644
--- a/js/defaults_dialog.js
+++ b/js/defaults_dialog.js
@@ -37,20 +37,48 @@ helper.defaultsDialog = (function (data) {
         }
     };
 
+    privateScope.saveWizardStep = function (selectedDefaultPreset, wizardStep) {
+        //TODO add saving logic
+
+        privateScope.wizard(selectedDefaultPreset, wizardStep + 1);
+    };
+
     privateScope.wizard = function (selectedDefaultPreset, wizardStep) {
 
         const steps = selectedDefaultPreset.wizardPages;
         const stepsCount = selectedDefaultPreset.wizardPages.length;
         const stepName = steps[wizardStep];
-
+        
         console.log(steps[wizardStep], wizardStep, stepsCount);
 
-        if (wizardStep >= stepsCount) {
+        if (wizardStep >= stepsCount - 1) {
             //This is the last step, time to finalize
+            $container.hide();
             privateScope.saveAndReboot();
         } else {
+            const $content = $container.find('.defaults-dialog__wizard');
 
+            $.get("./wizard/" + stepName + ".html", function(data) {
+                $content.html(data);
+            });
 
+            $.get("./wizard/buttons.html", function(data) {
+                $(data).appendTo($content);
+            });
+
+            $container.on('click', '#wizard-next', function () {
+                privateScope.saveWizardStep(selectedDefaultPreset, wizardStep);
+            });
+
+            $container.on('click', '#wizard-skip', function () {
+                privateScope.wizard(selectedDefaultPreset, wizardStep + 1);
+            });
+
+            $container.find('.defaults-dialog__content').hide();
+            $container.find('.defaults-dialog__wizard').show();
+            
+            savingDefaultsModal.close();
+            $container.show();
 
         }
 
@@ -150,6 +178,8 @@ helper.defaultsDialog = (function (data) {
     };
 
     privateScope.render = function () {
+        $container.find('.defaults-dialog__content').show();
+        $container.find('.defaults-dialog__wizard').hide();
         let $place = $container.find('.defaults-dialog__options');
         $place.html("");
         for (let i in data) {
diff --git a/js/defaults_dialog_entries.js b/js/defaults_dialog_entries.js
index 9336e27f..78ae7ce4 100644
--- a/js/defaults_dialog_entries.js
+++ b/js/defaults_dialog_entries.js
@@ -6,7 +6,7 @@ helper.defaultsDialogData = [{
     "notRecommended": false,
     "reboot": true,
     "mixerToApply": 3,
-    "wizardPages": ['receiver', 'motors', 'gps', 'filter', 'pid'],
+    "wizardPages": ['receiver', 'outputs', 'gps', 'filters', 'pids'],
     "settings": [
         {
             key: "model_preview_type",
diff --git a/main.html b/main.html
index 71da7b46..8d7689ab 100755
--- a/main.html
+++ b/main.html
@@ -16,8 +16,12 @@
                 <div class="modal__text" data-i18n="appUpdateNotificationDescription"></div>
             </div>
             <div class="modal__buttons modal__buttons--upbottom">
-                <a href="https://github.com/iNavFlight/inav-configurator/releases" target="_blank" id="update-notification-download" class="modal__button modal__button--main modal__button--main--inline" data-i18n="downloadUpdatesBtn"></a>
-                <a id="update-notification-close" class="modal__button modal__button--main modal__button--main--inline" data-i18n="closeUpdateBtn"></a>
+                <a href="https://github.com/iNavFlight/inav-configurator/releases" target="_blank"
+                    id="update-notification-download"
+                    class="modal__button modal__button--main modal__button--main--inline"
+                    data-i18n="downloadUpdatesBtn"></a>
+                <a id="update-notification-close" class="modal__button modal__button--main modal__button--main--inline"
+                    data-i18n="closeUpdateBtn"></a>
             </div>
         </div>
         <div class="headerbar">
@@ -42,38 +46,39 @@
                 </div>
                 <div id="portsinput">
                     <div class="portsinput__row">
-                        <div id="port-override-option" class="portsinput__top-element portsinput__top-element--port-override">
+                        <div id="port-override-option"
+                            class="portsinput__top-element portsinput__top-element--port-override">
                             <label id="port-override-label" for="port-override">Port: </label>
                             <input id="port-override" type="text" value="/dev/rfcomm0" />
                         </div>
                         <div class="dropdown dropdown-dark portsinput__top-element">
                             <!--suppress HtmlFormInputWithoutLabel -->
                             <select class="dropdown-select" id="port" title="Port">
-                            <option value="manual">Manual</option>
-                            <!-- port list gets generated here -->
-                        </select>
+                                <option value="manual">Manual</option>
+                                <!-- port list gets generated here -->
+                            </select>
                         </div>
                         <div class="dropdown dropdown-dark portsinput__top-element">
                             <!--suppress HtmlFormInputWithoutLabel -->
                             <select class="dropdown-select" id="baud" title="Baud Rate">
-                            <option value="115200" selected="selected">115200</option>
-                            <option value="57600">57600</option>
-                            <option value="38400">38400</option>
-                            <option value="28800">28800</option>
-                            <option value="19200">19200</option>
-                            <option value="14400">14400</option>
-                            <option value="9600">9600</option>
-                            <option value="4800">4800</option>
-                            <option value="2400">2400</option>
-                            <option value="1200">1200</option>
-                        </select>
+                                <option value="115200" selected="selected">115200</option>
+                                <option value="57600">57600</option>
+                                <option value="38400">38400</option>
+                                <option value="28800">28800</option>
+                                <option value="19200">19200</option>
+                                <option value="14400">14400</option>
+                                <option value="9600">9600</option>
+                                <option value="4800">4800</option>
+                                <option value="2400">2400</option>
+                                <option value="1200">1200</option>
+                            </select>
                         </div>
                     </div>
                     <div class="portsinput__row">
                         <div class="portsinput__top-element portsinput__top-element--inline">
                             <label for="wireless-mode">
-                            <span class="" data-i18n="wirelessModeSwitch"></span>
-                        </label>
+                                <span class="" data-i18n="wirelessModeSwitch"></span>
+                            </label>
                             <input id="wireless-mode" class=" togglesmall" type="checkbox" />
                         </div>
                     </div>
@@ -92,10 +97,10 @@
                             <form name="profile-change" id="profile-change">
                                 <!--suppress HtmlFormInputWithoutLabel -->
                                 <select class="dropdown-select" id="profilechange">
-                                <option value="0">Profile 1</option>
-                                <option value="1">Profile 2</option>
-                                <option value="2">Profile 3</option>
-                            </select>
+                                    <option value="0">Profile 1</option>
+                                    <option value="1">Profile 2</option>
+                                    <option value="2">Profile 3</option>
+                                </select>
                             </form>
                         </div>
                     </div>
@@ -104,10 +109,10 @@
                             <form name="battery-profile-change" id="battery-profile-change">
                                 <!--suppress HtmlFormInputWithoutLabel -->
                                 <select class="dropdown-select" id="batteryprofilechange">
-                                <option value="0">Battery profile 1</option>
-                                <option value="1">Battery profile 2</option>
-                                <option value="2">Battery profile 3</option>
-                            </select>
+                                    <option value="0">Battery profile 1</option>
+                                    <option value="1">Battery profile 2</option>
+                                    <option value="2">Battery profile 3</option>
+                                </select>
                             </form>
                         </div>
                     </div>
@@ -173,13 +178,16 @@
                         <a href="#" data-i18n="tabLanding" class="tabicon ic_welcome" title="Welcome"></a>
                     </li>
                     <li class="tab_help">
-                        <a href="https://github.com/iNavFlight/inav/wiki" target="_blank" data-i18n="tabHelp" class="tabicon ic_help" title="Documentation &amp; Support"></a>
+                        <a href="https://github.com/iNavFlight/inav/wiki" target="_blank" data-i18n="tabHelp"
+                            class="tabicon ic_help" title="Documentation &amp; Support"></a>
                     </li>
                     <li class="tab_mission_control">
-                        <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission" title="Mission Control"></a>
+                        <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
+                            title="Mission Control"></a>
                     </li>
                     <li class="tab_firmware_flasher">
-                        <a href="#" data-i18n="tabFirmwareFlasher" class="tabicon ic_flasher" title="Firmware Flasher"></a>
+                        <a href="#" data-i18n="tabFirmwareFlasher" class="tabicon ic_flasher"
+                            title="Firmware Flasher"></a>
                     </li>
                 </ul>
                 <ul class="mode-connected">
@@ -208,7 +216,8 @@
                         <a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" title="PID Tuning"></a>
                     </li>
                     <li class="tab_advanced_tuning">
-                        <a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced" title="Advanced Tuning"></a>
+                        <a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
+                            title="Advanced Tuning"></a>
                     </li>
                     <li class="tab_programming">
                         <a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
@@ -229,7 +238,8 @@
                         <a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
                     </li>
                     <li class="tab_mission_control">
-                        <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission" title="Mission Control"></a>
+                        <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
+                            title="Mission Control"></a>
                     </li>
                     <li class="tab_osd">
                         <a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
@@ -302,7 +312,9 @@
         <div data-i18n="savingDefaults"></div>
     </div>
     <div id="defaults-wrapper" style="display: none">
+
         <div class="defaults-dialog__background"></div>
+        <div class="defaults-dialog__wizard"></div>
         <div class="defaults-dialog__content">
             <div class="tab_title" data-i18n="defaultsDialogTitle"></div>
             <div class="defaults-dialog__content--wrapper">
@@ -314,4 +326,4 @@
     </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/css/defaults_dialog.css b/src/css/defaults_dialog.css
index 9ec599a7..10f7e9a2 100644
--- a/src/css/defaults_dialog.css
+++ b/src/css/defaults_dialog.css
@@ -9,7 +9,22 @@
     z-index: 2001;
 }
 
-.defaults-dialog__content {
+.defaults-dialog__bottom_buttons {
+    position: absolute;
+    bottom: 1em;
+    width: 500px;
+}
+
+.defaults-dialog__bottom_buttons .btn {
+    float: right;
+    margin-left: 2em;
+}
+
+.defaults-dialog__bottom_buttons  {
+    font-size: 14pt !important;
+}
+
+.defaults-dialog__content, .defaults-dialog__wizard {
     background-color: #efefef;
     border-radius: 2px;
     z-index: 2002;
diff --git a/wizard/buttons.html b/wizard/buttons.html
new file mode 100644
index 00000000..71258e64
--- /dev/null
+++ b/wizard/buttons.html
@@ -0,0 +1,8 @@
+<div class="defaults-dialog__bottom_buttons">
+    <div class="btn default_btn narrow green">
+        <a id="wizard-next" href="#">Next</a>
+    </div>
+    <div class="btn default_btn narrow">
+        <a id="wizard-skip" href="#">Skip</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/wizard/filters.html b/wizard/filters.html
new file mode 100644
index 00000000..320c51e7
--- /dev/null
+++ b/wizard/filters.html
@@ -0,0 +1 @@
+<h2>Filters wizard</h2>
\ No newline at end of file
diff --git a/wizard/gps.html b/wizard/gps.html
new file mode 100644
index 00000000..1177218c
--- /dev/null
+++ b/wizard/gps.html
@@ -0,0 +1 @@
+<h2>GPS wizard</h2>
\ No newline at end of file
diff --git a/wizard/outputs.html b/wizard/outputs.html
new file mode 100644
index 00000000..85f57a3b
--- /dev/null
+++ b/wizard/outputs.html
@@ -0,0 +1 @@
+<h2>Outputs wizard</h2>
\ No newline at end of file
diff --git a/wizard/pids.html b/wizard/pids.html
new file mode 100644
index 00000000..01ddf707
--- /dev/null
+++ b/wizard/pids.html
@@ -0,0 +1 @@
+<h2>PIDs wizard</h2>
\ No newline at end of file
diff --git a/wizard/receiver.html b/wizard/receiver.html
new file mode 100644
index 00000000..4638458a
--- /dev/null
+++ b/wizard/receiver.html
@@ -0,0 +1 @@
+<h2>Receiver wizard</h2>
\ No newline at end of file