Merge pull request #1282 from darrindevine/add-toggle-hide-unused-modes

Adding Toggle in Modes to hide unused modes

_locales/en/messages.json

@@ -1203,6 +1203,9 @@
 
     "auxiliaryHelp": {
         "message": "Use ranges to define the switches on your transmitter and corresponding mode assignments.  A receiver channel that gives a reading between a range min/max will activate the mode.  Remember to save your settings using the Save button."
+    },
+	    "auxiliaryToggleUnused": {
+        "message": "Hide unused modes"
     },
     "auxiliaryMin": {
         "message": "Min"

src/css/tabs/auxiliary.css

@@ -192,6 +192,11 @@
 .tab-auxiliary .save_btn a {
     line-height: 28px;
 }
+.tab-auxiliary .toolbox {
+    font-weight: bold;
+    color: rgb(105, 99, 99);
+    padding: 10px 5px;
+}
 
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .tab-auxiliary .fixed_band {

tabs/auxiliary.html

@@ -6,6 +6,12 @@
                 <p i18n="auxiliaryHelp"></p>
             </div>
         </div>
+        <div class="toolbox">
+            <form>
+                <input type="checkbox" id="switch-toggle-unused" name="switch-toggle-unused" class="toggle" />
+                <span i18n="auxiliaryToggleUnused"></span>
+            </form>
+        </div>
         <table class="modes">
             <tbody>
             </tbody>

tabs/auxiliary.js

@@ -343,6 +343,7 @@ TABS.auxiliary.initialize = function (callback) {
         }
 
         function update_ui() {
+            let hasUsedMode = false;
             for (var i = 0; i < AUX_CONFIG.length; i++) {
                 var modeElement = $('#mode-' + i);
                 if (modeElement.find(' .range').length == 0) {
@@ -356,8 +357,16 @@ TABS.auxiliary.initialize = function (callback) {
                 } else {
                     $('.mode .name').eq(modeElement.data('index')).data('modeElement').removeClass('on').addClass('off');
                 }
+                hasUsedMode = true;
             }
-
+        
+            let hideUnused = hideUnusedModes && hasUsedMode;
+            for (let i = 0; i < AUX_CONFIG.length; i++) {
+                let modeElement = $('#mode-' + i);
+                if (modeElement.find(' .range').length == 0) {
+                    modeElement.toggle(!hideUnused);
+                }
+            }    
             var auxChannelCount = RC.active_channels - 4;
 
             for (var i = 0; i < (auxChannelCount); i++) {
@@ -365,6 +374,17 @@ TABS.auxiliary.initialize = function (callback) {
             }
         }
 
+        let hideUnusedModes = false;
+        chrome.storage.local.get('hideUnusedModes', function (result) {
+            $("input#switch-toggle-unused")
+                .change(function() {
+                    hideUnusedModes = $(this).prop("checked");
+                    chrome.storage.local.set({ hideUnusedModes: hideUnusedModes });
+                    update_ui();
+                })
+                .prop("checked", !!result.hideUnusedModes)
+                .change();
+        });  
         // update ui instantly on first load
         update_ui();