Basic PID Tab rework

_locales/en/messages.json

@@ -3168,7 +3168,10 @@
         "message": "BIQUAD offers better noise attenuation for a price of higher delay. PT1 has lower attenuation but offers lower delay."
     },
     "tabFilteringAdvanced": {
-        "message": "Advanced filtering"
+        "message": "Other filters"
+    },
+    "mainFilters": {
+        "message": "Main filters"
     },
     "acc_lpf_type": {
         "message": "Accelerometer LPF type"

gulpfile.js

@@ -106,6 +106,7 @@ sources.js = [
     './js/logicConditionsStatus.js',
     './js/vtx.js',
     './main.js',
+    './js/tabs.js',
     './tabs/*.js',
     './js/eventFrequencyAnalyzer.js',
     './js/periodicStatusUpdater.js',

js/tabs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var helper = helper || {};
+
+helper.tabs = (function () {
+    let self = {},
+        $container;
+
+    function onHeaderClick(event) {
+        let $cT = $(event.currentTarget),
+            attrFor = $cT.attr("for");
+
+        $container.find('.subtab__header_label').removeClass("subtab__header_label--current");
+        $cT.addClass("subtab__header_label--current");
+        $container.find(".subtab__content--current").removeClass("subtab__content--current");
+        $container.find("#" + attrFor).addClass("subtab__content--current");
+    };
+
+    self.init = function ($dom) {
+        $container = $dom;
+
+        $container.find(".subtab__header_label").click(onHeaderClick);
+    };
+
+    return self;
+
+})();

main.css

@@ -2089,4 +2089,35 @@ select {
 
 #modal-reconnect div {
     text-align: center;
+}
+
+.subtab__header {
+    padding: 0;
+    height: auto;
+}
+
+.subtab__header_label {
+    display: inline-block;
+    padding: 0 1em;
+    background-color: #ccc;
+    min-width: 7em;
+    height: 1.5em;
+    line-height: 1.5em;
+    cursor: pointer;
+}
+
+.subtab__header_label--current {
+    font-weight: bold;
+}
+
+.subtab__header_label:hover {
+    background-color: #c5c5c5;
+}
+
+.subtab__content {
+    display: none;
+}
+
+.subtab__content--current {
+    display: block;
 }

tabs/pid_tuning.js

@@ -109,6 +109,8 @@ TABS.pid_tuning.initialize = function (callback) {
         // translate to user-selected language
         localize();
 
+        helper.tabs.init($('.tab-pid_tuning'));
+
         hideUnusedPids(CONFIG.activeSensors);
 
         $('#showAllPids').on('click', function(){