From 75fa2f3714cc97c6e5073d7b37495b33e3fa3f09 Mon Sep 17 00:00:00 2001
From: VitroidFPV <vitroid05@gmail.com>
Date: Fri, 5 Jul 2024 18:17:12 +0200
Subject: [PATCH] Feature: Create Development tab

Cleanup: Remove commented-out test code
---
 locales/en/messages.json      |   5 +-
 src/index.html                |   1 +
 src/js/gui.js                 |   6 ++
 src/js/main.js                |   7 +++
 src/js/tabs/development.js    |  25 ++++++++
 src/js/utils/updateTabList.js |  13 +++--
 src/main.html                 |   1 +
 src/tabs/development.html     | 105 ++++++++++++++++++++++++++++++++++
 8 files changed, 158 insertions(+), 5 deletions(-)
 create mode 100644 src/js/tabs/development.js
 create mode 100644 src/tabs/development.html

diff --git a/locales/en/messages.json b/locales/en/messages.json
index c26fe3b09b..51fc9d780c 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -340,6 +340,9 @@
     "tabOptions": {
         "message": "Options"
     },
+    "tabDevelopment": {
+        "message": "Development"
+    },
 
     "tabSetup": {
         "message": "Setup"
@@ -6279,7 +6282,7 @@
         "message": "RSSI dBm",
         "description": "Text of the RSSI dBm alarm"
       },
-  
+
     "osdWarningTextArmingDisabled": {
         "message": "Arming disabled",
         "description": "One of the warnings that can be selected to be shown in the OSD"
diff --git a/src/index.html b/src/index.html
index 469824a91f..38686e68ce 100644
--- a/src/index.html
+++ b/src/index.html
@@ -133,6 +133,7 @@
                     <li class="tab_help" id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help" i18n_title="tabHelp"></a></li>
                     <li class="tab_options" id="tab_options"><a href="#" i18n="tabOptions" class="tabicon ic_config" i18n_title="tabOptions"></a></li>
                     <li class="tab_firmware_flasher" id="tabFirmware"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher" i18n_title="tabFirmwareFlasher"></a></li>
+                    <li class="tab_development" id="tab_development"><a href="#" i18n="tabDevelopment" class="tabicon ic_config" i18n_title="tabDevelopment"></a></li>
                 </ul>
                 <ul class="mode-connected">
                     <li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup" i18n_title="tabSetup"></a></li>
diff --git a/src/js/gui.js b/src/js/gui.js
index 22bda5348e..c0187eca9e 100644
--- a/src/js/gui.js
+++ b/src/js/gui.js
@@ -4,6 +4,8 @@ import Switchery from 'switchery-latest';
 import jBox from 'jbox';
 import $ from 'jquery';
 
+const appMode = import.meta.env.MODE;
+
 const TABS = {};
 
 const GUI_MODES = {
@@ -60,6 +62,10 @@ class GuiControl {
             'transponder',
         ];
 
+        if (appMode === 'development') {
+            this.defaultAllowedTabsWhenDisconnected.push('development');
+        }
+
         this.defaultAllowedFCTabsWhenConnected = [ ...this.defaultAllowedTabs, ...this.defaultCloudBuildTabOptions];
 
         this.allowedTabs = this.defaultAllowedTabsWhenDisconnected;
diff --git a/src/js/main.js b/src/js/main.js
index 4f283baad0..08af98ae9c 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -91,6 +91,8 @@ function appReady() {
 
     cleanupLocalStorage();
 
+    updateTabList();
+
     i18n.init(function() {
 
         // pass the configurator version as a custom header for every AJAX request.
@@ -435,6 +437,11 @@ function startProcess() {
                             presets.initialize(content_ready),
                         );
                         break;
+                    case 'development':
+                        import("./tabs/development").then(({ development }) =>
+                            development.initialize(content_ready),
+                        );
+                        break;
 
                     default:
                         console.log(`Tab not found: ${tab}`);
diff --git a/src/js/tabs/development.js b/src/js/tabs/development.js
new file mode 100644
index 0000000000..5480418d40
--- /dev/null
+++ b/src/js/tabs/development.js
@@ -0,0 +1,25 @@
+import GUI, { TABS } from '../gui';
+import { i18n } from '../localization';
+import $ from 'jquery';
+
+const development = {};
+development.initialize = function (callback) {
+
+    if (GUI.active_tab != 'development') {
+        GUI.active_tab = 'development';
+    }
+
+    $('#content').load("./tabs/development.html", function () {
+        i18n.localizePage();
+
+        GUI.content_ready(callback);
+    });
+};
+
+development.cleanup = function (callback) {
+    if (callback) callback();
+};
+
+TABS.development = development;
+
+export { development };
diff --git a/src/js/utils/updateTabList.js b/src/js/utils/updateTabList.js
index 0cbd14988d..eec5ceebfc 100644
--- a/src/js/utils/updateTabList.js
+++ b/src/js/utils/updateTabList.js
@@ -1,8 +1,13 @@
 import $ from 'jquery';
 import FC from '../fc';
 
+const appMode = import.meta.env.MODE;
+
 export function updateTabList(features) {
     const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(':checked');
+    const isDevelopmentMode = appMode === 'development';
+
+    $('#tabs ul.mode-disconnected li.tab_development').toggle(isDevelopmentMode);
 
     $('#tabs ul.mode-connected li.tab_failsafe').toggle(isExpertModeEnabled);
     $('#tabs ul.mode-connected li.tab_adjustments').toggle(isExpertModeEnabled);
@@ -10,8 +15,8 @@ export function updateTabList(features) {
     $('#tabs ul.mode-connected li.tab_logging').toggle(isExpertModeEnabled);
     $('#tabs ul.mode-connected li.tab_servos').toggle(isExpertModeEnabled && FC.CONFIG?.buildOptions?.includes('USE_SERVOS'));
 
-    $('#tabs ul.mode-connected li.tab_gps').toggle(features.isEnabled('GPS'));
-    $('#tabs ul.mode-connected li.tab_led_strip').toggle(features.isEnabled('LED_STRIP'));
-    $('#tabs ul.mode-connected li.tab_transponder').toggle(features.isEnabled('TRANSPONDER'));
-    $('#tabs ul.mode-connected li.tab_osd').toggle(features.isEnabled('OSD'));
+    $('#tabs ul.mode-connected li.tab_gps').toggle(features?.isEnabled('GPS'));
+    $('#tabs ul.mode-connected li.tab_led_strip').toggle(features?.isEnabled('LED_STRIP'));
+    $('#tabs ul.mode-connected li.tab_transponder').toggle(features?.isEnabled('TRANSPONDER'));
+    $('#tabs ul.mode-connected li.tab_osd').toggle(features?.isEnabled('OSD'));
 }
diff --git a/src/main.html b/src/main.html
index a7745098d5..7652f20000 100644
--- a/src/main.html
+++ b/src/main.html
@@ -223,6 +223,7 @@
                     <li class="tab_help" id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help" i18n_title="tabHelp"></a></li>
                     <li class="tab_options" id="tab_options"><a href="#" i18n="tabOptions" class="tabicon ic_config" i18n_title="tabOptions"></a></li>
                     <li class="tab_firmware_flasher" id="tabFirmware"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher" i18n_title="tabFirmwareFlasher"></a></li>
+                    <li class="tab_development" id="tab_development"><a href="#" i18n="tabDevelopment" class="tabicon ic_config" i18n_title="tabDevelopment"></a></li>
                 </ul>
                 <ul class="mode-connected">
                     <li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup" i18n_title="tabSetup"></a></li>
diff --git a/src/tabs/development.html b/src/tabs/development.html
new file mode 100644
index 0000000000..2adb27fc4a
--- /dev/null
+++ b/src/tabs/development.html
@@ -0,0 +1,105 @@
+<div class="tab-development">
+    <div class="content_wrapper">
+
+        <div class="grid-box col1">
+            <div class="grid-box col2">
+                <div class="col-span-2">
+                    <div class="gui_box">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">Wide GUI Box</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div>Spacer Box Content</div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-1">
+                    <div class="gui_box">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">GUI Box</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div>Spacer Box Content</div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-1">
+                    <div class="gui_box">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">GUI Box</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div>Spacer Box Content</div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="note">
+                <div>
+                    Note Content
+                </div>
+                <div>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloribus amet voluptas error corporis veniam recusandae adipisci a rerum distinctio asperiores omnis inventore eum, illum aut delectus vel pariatur alias.
+                </div>
+            </div>
+
+            <div class="danger">
+                <div>
+                    Danger Content
+                </div>
+                <div>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloribus amet voluptas error corporis veniam recusandae adipisci a rerum distinctio asperiores omnis inventore eum, illum aut delectus vel pariatur alias.
+                </div>
+            </div>
+
+            <div class="default_btn">
+                <a href="#">Button</a>
+            </div>
+
+            <div class="default_btn" style="width: fit-content">
+                <a href="#">Button</a>
+            </div>
+
+            <div class="default_btn" style="width: fit-content">
+                <a href="#" class="disabled">Button</a>
+            </div>
+
+            <label>
+                <input class="toggle" type="checkbox" />
+                <span></span>
+            </label>
+
+            <label>
+                <input class="togglesmall" type="checkbox" />
+                <span></span>
+            </label>
+
+            <select style="width: fit-content">
+                <option value="0">Option 1</option>
+                <option value="1">Option 2</option>
+                <option value="2">Option 3</option>
+                <option value="3">Option 4 with more text</option>
+            </select>
+
+            <input type="text" style="width: fit-content">
+
+        </div>
+
+    </div>
+
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn">
+        <a href="#">B</a>
+    </div>
+    <div class="btn">
+        <a href="#">Button</a>
+    </div>
+    <div class="btn">
+        <a href="#">Very Long Button With A Lot Of Text To Break On Small Screens</a>
+    </div>
+</div>