4465100a65
Co-authored-by: Michael Geers <michael@geers.tv> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: andig <184815+andig@users.noreply.github.com>
104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<DeviceCard
|
|
:id="`meter_${meterType}_${meter.name}`"
|
|
:title="cardTitle"
|
|
:name="meter.name"
|
|
:editable="!!meter.id"
|
|
:error="hasError"
|
|
:disabled="!!meter.deviceDisable"
|
|
:banner="banner"
|
|
:data-testid="meterType"
|
|
@edit="$emit('edit', meterType, meter.id)"
|
|
@enable="$emit('enable')"
|
|
>
|
|
<template #icon>
|
|
<VehicleIcon v-if="isVehicleIcon" :name="iconName" />
|
|
<component :is="iconComponent" v-else />
|
|
</template>
|
|
<template #tags>
|
|
<DeviceTags :tags="tags" />
|
|
</template>
|
|
</DeviceCard>
|
|
</template>
|
|
|
|
<script>
|
|
import DeviceCard from "./DeviceCard.vue";
|
|
import DeviceTags from "./DeviceTags.vue";
|
|
import VehicleIcon from "../VehicleIcon";
|
|
|
|
export default {
|
|
name: "MeterCard",
|
|
components: {
|
|
DeviceCard,
|
|
DeviceTags,
|
|
VehicleIcon,
|
|
},
|
|
props: {
|
|
meter: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
meterType: {
|
|
type: String,
|
|
required: true,
|
|
validator: (value) =>
|
|
["grid", "pv", "battery", "aux", "ext", "consumer"].includes(value),
|
|
},
|
|
hasError: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
tags: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
banner: {
|
|
type: String,
|
|
},
|
|
},
|
|
emits: ["edit", "enable"],
|
|
computed: {
|
|
cardTitle() {
|
|
if (this.title) {
|
|
return this.title;
|
|
}
|
|
if (this.meter.deviceTitle) {
|
|
return this.meter.deviceTitle;
|
|
}
|
|
if (this.meter.config?.template) {
|
|
return this.meter.config.template;
|
|
}
|
|
return this.fallbackTitle;
|
|
},
|
|
fallbackTitle() {
|
|
const titleMap = {
|
|
grid: this.$t("config.grid.title"),
|
|
pv: this.$t("config.devices.solarSystem"),
|
|
battery: this.$t("config.devices.batteryStorage"),
|
|
aux: this.$t("config.devices.auxMeter"),
|
|
ext: this.$t("config.devices.extMeter"),
|
|
consumer: this.$t("config.devices.consumer"),
|
|
};
|
|
return titleMap[this.meterType];
|
|
},
|
|
isVehicleIcon() {
|
|
return ["aux", "ext", "consumer"].includes(this.meterType);
|
|
},
|
|
iconComponent() {
|
|
const iconMap = {
|
|
grid: "shopicon-regular-powersupply",
|
|
pv: "shopicon-regular-sun",
|
|
battery: "shopicon-regular-batterythreequarters",
|
|
};
|
|
return iconMap[this.meterType];
|
|
},
|
|
iconName() {
|
|
const defaults = { aux: "smartconsumer", consumer: "generic", ext: "meter" };
|
|
return this.meter.deviceIcon || defaults[this.meterType] || null;
|
|
},
|
|
},
|
|
};
|
|
</script>
|