From 7de5c415273968c432d74dcbfcc4f799b8223856 Mon Sep 17 00:00:00 2001
From: HelgeKeck <helgekeck@hotmail.com>
Date: Fri, 26 Jul 2024 17:04:28 +0200
Subject: [PATCH] improve fan and outputs panel layout

---
 components.d.ts                            |   2 +-
 src/components/widgets/outputs/Outputs.vue | 221 +++++++++++++++------
 src/store/printer/getters.ts               |  15 +-
 src/views/Dashboard.vue                    |   3 +-
 4 files changed, 178 insertions(+), 63 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index dd1589584a..ff05cf4dcd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
diff --git a/src/components/widgets/outputs/Outputs.vue b/src/components/widgets/outputs/Outputs.vue
index ab1dc32a2c..49f672d66d 100644
--- a/src/components/widgets/outputs/Outputs.vue
+++ b/src/components/widgets/outputs/Outputs.vue
@@ -1,46 +1,155 @@
 <template>
-  <v-card-text>
-    <v-row>
-      <v-col
-        cols="12"
-        sm="6"
-        md="12"
-        lg="6"
-      >
-        <template v-for="(item, i) in all.col1">
-          <OutputItem
-            :key="item.key"
-            :item="item"
-          />
-
-          <v-divider
-            v-if="i < all.col1.length - 1 || $vuetify.breakpoint.mdAndDown"
-            :key="`divider-0${i}`"
-            class="my-2"
-          />
-        </template>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="6"
-        md="12"
-        lg="6"
-      >
-        <template v-for="(item, i) in all.col2">
-          <OutputItem
-            :key="item.key"
-            :item="item"
-          />
-
-          <v-divider
-            v-if="i < all.col2.length - 1"
-            :key="`divider-1${i}`"
-            class="my-2"
-          />
-        </template>
-      </v-col>
-    </v-row>
-  </v-card-text>
+  <div>
+    <v-expansion-panels
+      accordion
+      multiple
+    >
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          v-if="all.controllableFans.length > 0"
+        >
+          <template #actions>
+            <v-icon
+              small
+              class="mr-2"
+            >
+              $expand
+            </v-icon>
+          </template>
+          <div>
+            {{ $t('app.general.title.controllable_fans') }}
+            <v-chip
+              small
+              class="ml-2"
+            >
+              {{ all.controllableFans.length }}
+            </v-chip>
+          </div>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <template v-for="(item, i) in all.controllableFans">
+            <OutputItem
+              :key="item.key"
+              :item="item"
+            />
+            <v-divider
+              v-if="i < all.controllableFans.length - 1"
+              :key="`divider-controllableFans${i}`"
+              class="my-2"
+            />
+          </template>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          v-if="all.unControllableFans.length > 0"
+        >
+          <template #actions>
+            <v-icon
+              small
+              class="mr-2"
+            >
+              $expand
+            </v-icon>
+          </template>
+          <div>
+            {{ $t('app.general.title.other_fans') }}
+            <v-chip
+              small
+              class="ml-2"
+            >
+              {{ all.unControllableFans.length }}
+            </v-chip>
+          </div>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <template v-for="(item, i) in all.unControllableFans">
+            <OutputItem
+              :key="item.key"
+              :item="item"
+            />
+            <v-divider
+              v-if="i < all.unControllableFans.length - 1"
+              :key="`divider-unControllableFans${i}`"
+              class="my-2"
+            />
+          </template>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          v-if="all.pins.length > 0"
+        >
+          <template #actions>
+            <v-icon
+              small
+              class="mr-2"
+            >
+              $expand
+            </v-icon>
+          </template>
+          <div>
+            {{ $t('app.general.title.output_pins') }}
+            <v-chip
+              small
+              class="ml-2"
+            >
+              {{ all.pins.length }}
+            </v-chip>
+          </div>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <template v-for="(item, i) in all.pins">
+            <OutputItem
+              :key="item.key"
+              :item="item"
+            />
+            <v-divider
+              v-if="i < all.pins.length - 1"
+              :key="`divider-pins${i}`"
+              class="my-2"
+            />
+          </template>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          v-if="all.leds.length > 0"
+        >
+          <template #actions>
+            <v-icon
+              small
+              class="mr-2"
+            >
+              $expand
+            </v-icon>
+          </template>
+          <div>
+            {{ $t('app.general.title.leds') }}
+            <v-chip
+              small
+              class="ml-2"
+            >
+              {{ all.leds.length }}
+            </v-chip>
+          </div>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <template v-for="(item, i) in all.leds">
+            <OutputItem
+              :key="item.key"
+              :item="item"
+            />
+            <v-divider
+              v-if="i < all.leds.length - 1"
+              :key="`divider-leds${i}`"
+              class="my-2"
+            />
+          </template>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
 </template>
 
 <script lang="ts">
@@ -56,23 +165,23 @@ import type { Fan, Led, OutputPin } from '@/store/printer/types'
 })
 export default class Outputs extends Mixins(StateMixin) {
   get all () {
-    const items: Array<Fan | Led | OutputPin> = [
-      ...this.$store.getters['printer/getAllFans'],
-      ...this.$store.getters['printer/getPins'],
+    const controllableFans: Array<Fan> = [
+      ...this.$store.getters['printer/getControllableFans']
+    ]
+    const unControllableFans: Array<Fan> = [
+      ...this.$store.getters['printer/getUnctrollableFans']
+    ]
+    const pins: Array<OutputPin> = [
+      ...this.$store.getters['printer/getPins']
+    ]
+    const leds: Array<Led> = [
       ...this.$store.getters['printer/getAllLeds']
     ]
-    let col1: Array<Fan | Led | OutputPin> = []
-    let col2: Array<Fan | Led | OutputPin> = []
-    if (items.length > 1) {
-      const half = Math.ceil(items.length / 2)
-      col1 = items.splice(0, half)
-      col2 = items
-    } else {
-      col1 = items
-    }
     return {
-      col1,
-      col2
+      controllableFans,
+      unControllableFans,
+      pins,
+      leds
     }
   }
 }
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 15a7712303..1e7b5882c5 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -524,13 +524,18 @@ export const getters: GetterTree<PrinterState, RootState> = {
     ])
   },
 
-  getAllFans: (_, getters) => {
+  getControllableFans: (_, getters) => {
+    return getters.getOutputs([
+      'fan',
+      'fan_generic'
+    ])
+  },
+
+  getUnctrollableFans: (_, getters) => {
     return getters.getOutputs([
-      'temperature_fan',
       'controller_fan',
-      'heater_fan',
-      'fan_generic',
-      'fan'
+      'temperature_fan',
+      'heater_fan'
     ])
   },
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5a20b869e4..aa11229114 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -158,7 +158,8 @@ export default class Dashboard extends Mixins(StateMixin) {
 
   get hasOutputs () {
     return (
-      this.$store.getters['printer/getAllFans'].length > 0 ||
+      this.$store.getters['printer/getControllableFans'].length > 0 ||
+      this.$store.getters['printer/getUnctrollableFans'].length > 0 ||
       this.$store.getters['printer/getPins'].length > 0 ||
       this.$store.getters['printer/getAllLeds'].length > 0
     )