Merge branch 'develop' into develop

Author: TomW1605

components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -15,6 +16,7 @@ declare module 'vue' {
     AppBtnCollapse: typeof import('./src/components/ui/AppBtnCollapse.vue')['default']
     AppBtnCollapseGroup: typeof import('./src/components/ui/AppBtnCollapseGroup.vue')['default']
     AppBtnGroup: typeof import('./src/components/ui/AppBtnGroup.vue')['default']
+    AppBtnToggle: typeof import('./src/components/ui/AppBtnToggle.vue')['default']
     AppBtnToolheadMove: typeof import('./src/components/ui/AppBtnToolheadMove.vue')['default']
     AppChart: typeof import('./src/components/ui/AppChart.vue')['default']
     AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']

src/api/socketActions.ts

@@ -779,6 +779,9 @@ export const SocketActions = {
   async serverSensorsList () {
     baseEmit(
       'server.sensors.list', {
+        params: {
+          extended: true
+        },
         dispatch: 'sensors/onSensorsList'
       }
     )

src/components/ui/AppBtnToggle.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-btn-toggle
+    v-bind="$attrs"
+    :class="{
+      'elevation-2': !disabled
+    }"
+    v-on="$listeners"
+  >
+    <slot />
+  </v-btn-toggle>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  inheritAttrs: false
+})
+export default class AppBtn extends Vue {
+  @Prop({ type: Boolean })
+  disabled?: boolean
+}
+</script>

src/components/ui/AppColorPicker.vue

@@ -78,7 +78,7 @@
         </v-layout>
 
         <div class="text-right mt-4 mr-1">
-          <v-btn-toggle
+          <app-btn-toggle
             v-model="valueRange"
             mandatory
           >
@@ -94,7 +94,7 @@
             >
               0..1
             </app-btn>
-          </v-btn-toggle>
+          </app-btn-toggle>
         </div>
 
         <v-layout

src/components/ui/AppColumnPicker.vue

@@ -47,7 +47,7 @@
               <v-list-item-title>{{ header.text }}</v-list-item-title>
             </v-list-item-content>
             <v-list-item-action class="my-0">
-              <v-checkbox :input-value="header.visible" />
+              <v-checkbox :input-value="header.visible !== false" />
             </v-list-item-action>
           </v-list-item>
         </template>
@@ -58,33 +58,37 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import type { AppTableHeader } from '@/types'
-import type { AppTablePartialHeader } from '@/types/tableheaders'
+import type { AppDataTableHeader } from '@/types'
+import type { ConfiguredTableHeader } from '@/store/config/types'
 
 @Component({})
 export default class AppColumnPicker extends Vue {
   @Prop({ type: String, required: true })
   readonly keyName!: string
 
-  @Prop({ type: Array<AppTableHeader>, required: true })
-  readonly headers!: AppTableHeader[]
+  @Prop({ type: Array<AppDataTableHeader>, required: true })
+  readonly headers!: AppDataTableHeader[]
 
-  get configurableHeaders (): AppTableHeader[] {
+  get configurableHeaders (): AppDataTableHeader[] {
     return this.headers
   }
 
-  set configurableHeaders (value: AppTableHeader[]) {
+  set configurableHeaders (value: AppDataTableHeader[]) {
     const headers = value
-      .map(({ value, visible }): AppTablePartialHeader => ({
+      .map(({ value, visible }): ConfiguredTableHeader => ({
         value,
         visible
       }))
 
     this.$store.dispatch('config/updateHeaders', { name: this.keyName, headers })
   }
 
-  handleToggleHeader (header: AppTablePartialHeader) {
-    header.visible = !header.visible
+  handleToggleHeader (value: AppDataTableHeader) {
+    const header : ConfiguredTableHeader = {
+      value: value.value,
+      visible: !(value.visible !== false)
+    }
+
     this.$store.dispatch('config/updateHeader', { name: this.keyName, header })
   }
 }

src/components/ui/AppDataTableRow.vue

@@ -22,7 +22,13 @@
           :header="header"
           :value="getValue(header)"
         >
-          {{ getValue(header) ?? '--' }}
+          <slot
+            name="item.data-table-default"
+            :header="header"
+            :value="getValue(header)"
+          >
+            {{ formatValue(getValue(header)) }}
+          </slot>
         </slot>
       </td>
     </template>
@@ -50,5 +56,11 @@ export default class AppDataTableRow extends Vue {
   getValue (header: DataTableHeader) {
     return get(this.item, header.value)
   }
+
+  formatValue (value: unknown) {
+    return value == null || value === ''
+      ? '--'
+      : value
+  }
 }
 </script>