From 53a0e88ad2ea12ea062a89243e6eff67e748050f Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Thu, 1 Aug 2024 17:08:50 +0100
Subject: [PATCH] refactor: use list and add pretty naming

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../runout-sensors/RunoutSensorsCard.vue      | 53 ++++++++++---------
 src/store/printer/getters.ts                  |  1 +
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
index 25642537a9..ad829bcf97 100644
--- a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
+++ b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
@@ -20,32 +20,36 @@
       </app-btn>
     </template>
 
-    <v-container class="px-0 py-2">
-      <v-row
+    <v-list>
+      <v-list-item
         v-for="item in sensors"
         :key="item.name"
       >
-        <v-col class="pb-0">
-          <v-subheader>
-            <span>{{ item.name }}</span>
-            <v-spacer />
-            <v-icon
-              :color="(item.filament_detected) ? 'success' : 'warning'"
-              class="ml-3"
-              left
-            >
-              {{ (item.filament_detected) ? '$checkedCircle' : '$alertCircle' }}
-            </v-icon>
-            <v-switch
-              class="ml-2"
-              color="success"
-              :input-value="item.enabled"
-              @change="changeSensor(item, $event)"
-            />
-          </v-subheader>
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-list-item-content>
+          <v-list-item-title>{{ item.prettyName }}</v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-icon>
+          <v-icon
+            v-if="item.filament_detected"
+            color="success"
+          >
+            $checkedCircle
+          </v-icon>
+          <v-icon
+            v-else
+            color="warning"
+          >
+            $alertCircle
+          </v-icon>
+        </v-list-item-icon>
+        <v-list-item-action>
+          <v-switch
+            :input-value="item.enabled"
+            @change="changeSensor(item, $event)"
+          />
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
   </collapsable-card>
 </template>
 
@@ -64,8 +68,7 @@ export default class RunoutSensorsCard extends Mixins(StateMixin) {
   }
 
   changeSensor (item: RunoutSensor, value: boolean) {
-    const enable: number = (value) ? 1 : 0
-    this.sendGcode(`SET_FILAMENT_SENSOR SENSOR=${item.name} ENABLE=${enable}`)
+    this.sendGcode(`SET_FILAMENT_SENSOR SENSOR=${item.name} ENABLE=${+value}`)
   }
 }
 </script>
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 15a7712303..3918fe044d 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -425,6 +425,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
         const sensor = get(state.printer, item, undefined)
         sensors.push({
           name,
+          prettyName: Vue.$filters.prettyCase(name),
           ...sensor
         })
       }