Cards Display

packages/modules/display_themes/cards/source/src/App.vue

@@ -49,6 +49,8 @@ export default {
         "openWB/chargepoint/+/set/charge_template",
         "openWB/chargepoint/+/set/charge_template/chargemode/scheduled_charging/plans/+",
         "openWB/chargepoint/+/set/charge_template/time_charging/plans/+",
+        "openWB/chargepoint/+/get/fault_state",
+        "openWB/chargepoint/+/get/fault_str",
         "openWB/chargepoint/+/get/phases_in_use",
         "openWB/chargepoint/+/get/plug_state",
         "openWB/chargepoint/+/get/power",

packages/modules/display_themes/cards/source/src/components/ChargePointFaultBadge.vue

@@ -0,0 +1,74 @@
+<script>
+import { useMqttStore } from "@/stores/mqtt.js";
+
+/* fontawesome */
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faCheckCircle as fasCheckCircle,
+  faExclamationTriangle as fasExclamationTriangle,
+  faTimesCircle as fasTimesCircle,
+} from "@fortawesome/free-solid-svg-icons";
+/* add icons to the library */
+library.add(fasCheckCircle, fasExclamationTriangle, fasTimesCircle);
+
+export default {
+  name: "ChargePointFaultBadge",
+  components: { FontAwesomeIcon },
+  props: {
+    chargePointId: { required: true, type: Array },
+  },
+  data() {
+    return {
+      mqttStore: useMqttStore(),
+    };
+  },
+  computed: {
+    faultState() {
+      if (this.chargePointId.length != 1) {
+        return 0;
+      }
+      return this.mqttStore.getChargePointFaultState(this.chargePointId[0]);
+    },
+    faultIcon() {
+      if (this.faultState == 2) {
+        return ["fas", "fa-times-circle"];
+      }
+      if (this.faultState == 1) {
+        return ["fas", "fa-exclamation-triangle"];
+      }
+      return ["fas", "fa-check-circle"];
+    },
+    faultClass() {
+      if (this.faultState == 2) {
+        return "_color:danger";
+      }
+      if (this.faultState == 1) {
+        return "_color:warning";
+      }
+      return "_color:success";
+    },
+  },
+};
+</script>
+
+<template>
+  <i-badge
+    v-if="faultState > 0"
+    size="lg"
+    class="clickable"
+    @click="showFaultModal = true"
+  >
+    <font-awesome-icon
+      fixed-width
+      :icon="faultIcon"
+      :class="faultClass"
+    />
+  </i-badge>
+</template>
+
+<style scoped>
+.wrap {
+  white-space: normal;
+}
+</style>

packages/modules/display_themes/cards/source/src/components/ChargePoints/ChargePointCard.vue

@@ -3,6 +3,7 @@ import { useMqttStore } from "@/stores/mqtt.js";
 import DashboardCard from "@/components/DashboardCard.vue";
 import SparkLine from "@/components/SparkLine.vue";
 import ChargePointPlugBadge from "@/components/ChargePointPlugBadge.vue";
+import ChargePointFaultBadge from "@/components/ChargePointFaultBadge.vue";
 import ChargePointLockButton from "@/components/ChargePointLockButton.vue";
 import ChargePointCodeButton from "@/components/ChargePointCodeButton.vue";
 
@@ -45,6 +46,7 @@ export default {
     DashboardCard,
     SparkLine,
     ChargePointPlugBadge,
+    ChargePointFaultBadge,
     ChargePointLockButton,
     ChargePointCodeButton,
     FontAwesomeIcon,
@@ -93,6 +95,7 @@ export default {
       {{ mqttStore.getChargePointName(chargePointId) }}
     </template>
     <template #headerRight>
+      <charge-point-fault-badge :charge-point-id="[chargePointId]" />
       <charge-point-plug-badge :charge-point-id="[chargePointId]" />
     </template>
     <i-container>

packages/modules/display_themes/cards/source/src/stores/mqtt.js

@@ -461,6 +461,14 @@ export const useMqttStore = defineStore("mqtt", {
         return state.getChargePointName(chargePointId) !== undefined;
       };
     },
+    getChargePointFaultState(state) {
+      return (chargePointId) => {
+        if (state.topics[`openWB/chargepoint/${chargePointId}/get/fault_state`]) {
+          return state.topics[`openWB/chargepoint/${chargePointId}/get/fault_state`];
+        }
+        return 0;
+      };
+    },
     getChargePointName(state) {
       return (chargePointId) => {
         if (