Merge branch 'develop'

Author: guFalcon

src/components/KioskMultiStatePanel.vue

@@ -4,17 +4,18 @@
       class="multi-state-hint-icon"
       :class="{ 'multi-state-hint-icon-override': isOverrideActive }"
       small
+      :style="activeState && activeState.colorDialog ? { color: activeState.colorSelectedIcon + ' !important' } : {}"
     >format_list_bulleted</v-icon>
     <KioskPanel
       :isEnabled="calculateEnabled"
       pa="1"
       @click="openDialog"
       class="noFocus"
+      :borderColorRaw="activeState && activeState.colorSelectedIcon ? activeState.colorSelectedIcon : null"
     >
       <template v-slot:title>
         <v-avatar
-          :color="
-            (isOverrideActive ? 'on ' : 'off ') + ' darken-1'
+          :color="isOverrideActive && activeState.colorSelectedIcon ? activeState.colorSelectedIcon : (isOverrideActive ? 'on ' : 'off ') + ' darken-1'
           "
           size="38"
         >
@@ -44,6 +45,7 @@
             @click="selectState(state)"
             class="multi-state-item"
             :class="state.id === activeStateId ? 'multi-state-item-active' : 'multi-state-item-passive'"
+            :style="state.colorDialog ? { backgroundColor: state.colorDialog } : {}"
           >
             <v-list-item-icon v-if="state.icon">
               <v-icon>{{ state.icon }}</v-icon>

src/components/KioskPanel.vue

@@ -4,6 +4,7 @@
     :class="`ma-1 pa-${borderSize - 1} ${
       borderColor ? borderColor : (enabled ? 'on ' : 'off ') + 'darken-1'
     }`"
+    :style="borderColorRaw ? { borderColor: borderColorRaw + ' !important' } : {}"
     :max-width="maxWidth"
     :min-width="minWidth"
     v-bind="$attrs"
@@ -35,6 +36,8 @@ export default {
     isEnabled: {},
     borderColor: {},
     bgColor: {},
+    borderColorRaw: null,
+    bgColorRaw: null,
     minWidth: { default: '140px' },
     maxWidth: { default: '180px' },
     renderTitle: { default: true },

src/views/KioskOverview.vue

@@ -424,24 +424,27 @@ export default {
       states: [
         {
           id: 'home',
-          label: 'Alle da',
+          label: 'daheim',
           icon: 'home'
         },
-        {
-          id: 'away',
-          label: 'Alle weg',
-          icon: 'directions_walk',
-          planIdForCheckIfOn: 65,
-          onAction: { kind: 'event-trigger', applianceId: 22, sensorPath: 'switch1', eventPath: 'off.click' },
-          offAction: { kind: 'event-trigger', applianceId: 22, sensorPath: 'switch1', eventPath: 'off.click' }
-        },
         {
           id: 'asleep',
-          label: 'Alle schlafen',
+          label: 'schlafen',
           icon: 'bedtime',
           planIdForCheckIfOn: 70,
           onAction: { kind: 'event-trigger', applianceId: 72, sensorPath: 'switch1', eventPath: 'off.click' },
           offAction: { kind: 'event-trigger', applianceId: 72, sensorPath: 'switch1', eventPath: 'off.click' }
+        },
+        {
+          id: 'away',
+          label: 'WEG',
+          icon: 'directions_walk',
+          planIdForCheckIfOn: 65,
+          colorSelectedIcon: 'rgba(255, 0, 0, 0.6)',
+          colorSelected: 'rgba(255, 0, 0, 0.3)',
+          colorDialog: 'rgba(255, 0, 0, 0.15)',
+          onAction: { kind: 'event-trigger', applianceId: 22, sensorPath: 'switch1', eventPath: 'off.click' },
+          offAction: { kind: 'event-trigger', applianceId: 22, sensorPath: 'switch1', eventPath: 'off.click' }
         }
       ]
     },