feat: Migrate Configuration Tab to Vue 3

locales/en/messages.json

@@ -1414,6 +1414,9 @@
     "configurationFeatures": {
         "message": "Other Features"
     },
+    "configurationFeatureHelp": {
+        "message": "Help"
+    },
     "configurationReceiver": {
         "message": "Receiver"
     },
@@ -1444,8 +1447,14 @@
     "configurationSpiRxHelp": {
         "message": "<strong>Note:</strong> The SPI RX provider will only work if the required hardware is on board or connected to an SPI bus."
     },
-    "configurationOtherFeaturesHelp": {
-        "message": "<strong>Note:</strong> Not all features are supported by all flight controllers. If you enable a specific feature, and it is disabled after you hit 'Save and Reboot', it means that this feature is not supported on your board."
+    "configurationActiveImu": {
+        "message": "Active IMU"
+    },
+    "configurationSensors": {
+        "message": "Sensor Configuration"
+    },
+    "configurationSensorsHelp": {
+        "message": "Configure additional sensors and advanced features."
     },
     "configurationMagAlignmentHelp": {
         "message": "The magnetometer alignment is the orientation of the magnetometer sensor on the flight controller board. The default is usually correct, but if you have a custom build or a flight controller with a different magnetometer orientation, you may need to adjust this setting."
@@ -1534,6 +1543,30 @@
         "message": "$t(configurationBoardAlignmentYaw.message)",
         "description": "Don't translate!!!"
     },
+    "configurationGyro1AlignmentRoll": {
+        "message": "Roll Degrees",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro1AlignmentPitch": {
+        "message": "Pitch Degrees",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro1AlignmentYaw": {
+        "message": "Yaw Degrees",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentRoll": {
+        "message": "Roll Degrees",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentPitch": {
+        "message": "Pitch Degrees",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentYaw": {
+        "message": "Yaw Degrees",
+        "description": "Don't translate!!!"
+    },
     "configurationSensorAlignmentGyro": {
         "message": "GYRO Alignment"
     },
@@ -1570,6 +1603,10 @@
     "configurationSensorAlignmentDefaultOption": {
        "message": "Default"
     },
+    "configurationSensorAlignmentCustom": {
+        "message": "Custom"
+    },
+
     "configurationAccelTrims": {
         "message": "Accelerometer Trim"
     },
@@ -1600,6 +1637,9 @@
     "configurationGyroCalOnFirstArm": {
         "message": "Calibrate Gyro on first arm"
     },
+    "configurationGyroCalOnFirstArmHelp": {
+        "message": "When enabled, the gyroscope will be calibrated on the first arm after power on. This can help reduce gyro drift during flight."
+    },
     "configurationMotorIdle": {
         "message": "Motor Idle (%)"
     },
@@ -7105,6 +7145,9 @@
     "configurationGyroSyncDenom": {
         "message": "Gyro update frequency"
     },
+    "configurationGyroFrequency": {
+        "message": "Gyro update frequency"
+    },
     "configurationPidProcessDenom": {
         "message": "PID loop frequency"
     },

src/css/tabs/configuration.less

@@ -27,8 +27,12 @@
         gap: 0.5rem;
         .sensor_align_inputs {
             display: flex;
+            align-items: center;
             label {
                 white-space: nowrap;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
             }
         }
     }

src/js/fc.js

@@ -481,6 +481,14 @@ const FC = {
             gyro_to_use: 0,
             gyro_1_align: 0,
             gyro_2_align: 0,
+
+            gyro_1_align_roll: 0,
+            gyro_1_align_pitch: 0,
+            gyro_1_align_yaw: 0,
+            gyro_2_align_roll: 0,
+            gyro_2_align_pitch: 0,
+            gyro_2_align_yaw: 0,
+
             mag_align_roll: 0,
             mag_align_pitch: 0,
             mag_align_yaw: 0,

src/js/main.js

@@ -13,7 +13,7 @@ import CliAutoComplete from "./CliAutoComplete.js";
 import DarkTheme, { setDarkTheme } from "./DarkTheme.js";
 import { isExpertModeEnabled } from "./utils/isExpertModeEnabled.js";
 import { updateTabList } from "./utils/updateTabList.js";
-import { mountVueTab } from "./vue_tab_mounter.js";
+import { mountVueTab, unmountVueTab } from "./vue_tab_mounter.js";
 import * as THREE from "three";
 import NotificationManager from "./utils/notifications.js";
 
@@ -27,12 +27,6 @@ import("./msp/debug/msp_debug_tools.js")
         console.warn("Failed to load MSP debug tools:", err);
     });
 
-if (typeof String.prototype.replaceAll === "undefined") {
-    String.prototype.replaceAll = function (match, replace) {
-        return this.replace(new RegExp(match, "g"), () => replace);
-    };
-}
-
 $(document).ready(function () {
     appReady();
 });
@@ -216,6 +210,7 @@ function startProcess() {
 
                 // detach listeners and remove element data
                 const content = $("#content");
+                unmountVueTab();
                 content.empty();
 
                 // display loading screen
@@ -291,9 +286,7 @@ function startProcess() {
                         import("./tabs/setup_osd").then(({ setup_osd }) => setup_osd.initialize(content_ready));
                         break;
                     case "configuration":
-                        import("./tabs/configuration").then(({ configuration }) =>
-                            configuration.initialize(content_ready),
-                        );
+                        mountVueTab("configuration", content_ready);
                         break;
                     case "pid_tuning":
                         import("./tabs/pid_tuning").then(({ pid_tuning }) => pid_tuning.initialize(content_ready));

src/js/msp/MSPHelper.js

@@ -14,7 +14,7 @@ import huffmanDecodeBuf from "../huffman";
 import { defaultHuffmanTree, defaultHuffmanLenIndex } from "../default_huffman_tree";
 import { updateTabList } from "../utils/updateTabList";
 import { showErrorDialog } from "../utils/showErrorDialog";
-import GUI, { TABS } from "../gui";
+import GUI from "../gui";
 import { OSD } from "../tabs/osd";
 
 // Used for LED_STRIP