feat: add show hidden option to outputs panel

src/components/settings/GeneralSettings.vue

@@ -443,7 +443,7 @@ export default class GeneralSettings extends Mixins(StateMixin) {
         ]
       : []
 
-    const pins: OutputPin[] = this.$typedGetters['printer/getPins']
+    const pins: OutputPin[] = this.$typedGetters['printer/getPins']()
     const pinEntries = pins.length
       ? [
           { header: 'Klipper' },

src/components/widgets/outputs/Outputs.vue

@@ -55,11 +55,15 @@ import type { Fan, Led, OutputPin } from '@/store/printer/types'
   }
 })
 export default class Outputs extends Mixins(StateMixin) {
+  get showHidden () {
+    return this.$store.state.config.uiSettings.general.showHiddenOutputs
+  }
+
   get all () {
     const items: Array<Fan | Led | OutputPin> = [
-      ...this.$typedGetters['printer/getAllFans'],
-      ...this.$typedGetters['printer/getPins'],
-      ...this.$typedGetters['printer/getAllLeds']
+      ...this.$typedGetters['printer/getAllFans'](this.showHidden),
+      ...this.$typedGetters['printer/getPins'](this.showHidden),
+      ...this.$typedGetters['printer/getAllLeds'](this.showHidden)
     ]
     let col1: Array<Fan | Led | OutputPin> = []
     let col2: Array<Fan | Led | OutputPin> = []

src/components/widgets/outputs/OutputsCard.vue

@@ -6,6 +6,40 @@
     layout-path="dashboard.outputs-card"
     menu-breakpoint="lg"
   >
+    <template #menu>
+      <v-menu
+        bottom
+        left
+        offset-y
+        transition="slide-y-transition"
+        :close-on-content-click="false"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            icon
+            v-bind="attrs"
+            v-on="on"
+          >
+            <v-icon dense>
+              $cog
+            </v-icon>
+          </v-btn>
+        </template>
+
+        <v-list dense>
+          <v-list-item @click="showHidden = !showHidden">
+            <v-list-item-action class="my-0">
+              <v-checkbox :input-value="showHidden" />
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>
+                Show Hidden
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </template>
     <outputs />
   </collapsable-card>
 </template>
@@ -20,5 +54,16 @@ import Outputs from '@/components/widgets/outputs/Outputs.vue'
   }
 })
 export default class OutputsCard extends Vue {
+  get showHidden () {
+    return this.$store.state.config.uiSettings.general.showHiddenOutputs
+  }
+
+  set showHidden (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.showHiddenOutputs',
+      value,
+      server: true
+    })
+  }
 }
 </script>

src/store/config/state.ts

@@ -68,7 +68,8 @@ export const defaultState = (): ConfigState => {
         printProgressCalculation: ['file'],
         printEtaCalculation: ['file'],
         enableDiagnostics: false,
-        colorPickerValueRange: 'absolute'
+        colorPickerValueRange: 'absolute',
+        showHiddenOutputs: false
       },
       theme: {
         isDark: true,

src/store/config/types.ts

@@ -124,6 +124,7 @@ export interface GeneralConfig {
   printEtaCalculation: PrintEtaCalculation[];
   enableDiagnostics: boolean;
   colorPickerValueRange: ColorPickerValueRange;
+  showHiddenOutputs: boolean;
 }
 
 export type ToolheadControlStyle = 'cross' | 'bars' | 'circle'

src/store/printer/getters.ts

@@ -569,71 +569,72 @@ export const getters = {
       .sort((a, b) => a.name.localeCompare(b.name))
   },
 
-  getAllLeds: (_, getters) => {
+  getAllLeds: (_, getters) => (showHidden = false) => {
     return getters.getOutputs([
       'led',
       'neopixel',
       'dotstar',
       'pca9533',
       'pca9632'
-    ])
+    ], showHidden)
   },
 
-  getAllFans: (_, getters) => {
+  getAllFans: (_, getters) => (showHidden = false) => {
     return getters.getOutputs([
       'temperature_fan',
       'controller_fan',
       'heater_fan',
       'fan_generic',
       'fan'
-    ])
+    ], showHidden)
   },
 
   /**
    * Return toolhead fans
    */
-  getToolHeadFans: (_, getters) => {
+  getToolHeadFans: (_, getters) => (showHidden = false) => {
     return getters.getOutputs([
       // 'temperature_fan',
       // 'controller_fan',
       'heater_fan',
       // 'fan_generic',
       'fan'
-    ])
+    ], showHidden)
   },
 
-  getOtherFans: (_, getters) => {
+  getOtherFans: (_, getters) => (showHidden = false) => {
     return getters.getOutputs([
       'temperature_fan',
       'controller_fan',
       // 'heater_fan',
       'fan_generic'
       // 'fan'
-    ])
+    ], showHidden)
   },
 
   /**
    * Return output pins
    */
-  getPins: (_, getters) => {
+  getPins: (_, getters) => (showHidden = false) => {
     const outputs = getters.getOutputs([
       'output_pin',
       'pwm_tool',
       'pwm_cycle_time'
-    ])
+    ], showHidden)
     return outputs.sort((output: OutputPin) => output.pwm ? 1 : -1)
   },
 
   getPinByName: (state, getters) => (name: string) => {
     const pins: OutputPin[] = getters.getPins
+    // const pins = getters.getPins() as OutputPin[]
 
     return pins.find(pin => pin.name === name)
   },
 
   /**
   * Return available fans and output pins
   */
-  getOutputs: (state, getters) => (filter?: string[]): Array<Fan | Led | OutputPin> => {
+  getOutputs: (state, getters) => (filter?: string[], showHidden = false): Array<Fan | Led | OutputPin> => {
     // Fans..
     const fans = [
       'temperature_fan',
@@ -707,7 +708,7 @@ export const getters = {
 
       if (
         supportedTypes.includes(type) &&
-        (!filterByPrefix.includes(type) || !name.startsWith('_'))
+        (showHidden || !filterByPrefix.includes(type) || !name.startsWith('_'))
       ) {
         const prettyName = name === 'fan'
           ? 'Part Fan' // If we know its the part fan.

src/views/Dashboard.vue

@@ -157,9 +157,9 @@ export default class Dashboard extends Mixins(StateMixin) {
 
   get hasOutputs (): boolean {
     return (
-      this.$typedGetters['printer/getAllFans'].length > 0 ||
-      this.$typedGetters['printer/getPins'].length > 0 ||
-      this.$typedGetters['printer/getAllLeds'].length > 0
+      this.$typedGetters['printer/getAllFans']().length > 0 ||
+      this.$typedGetters['printer/getPins']().length > 0 ||
+      this.$typedGetters['printer/getAllLeds']().length > 0
     )
   }