diff --git a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue index 5c99374478..d995450596 100644 --- a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue +++ b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue @@ -27,11 +27,19 @@ > - + {{ mode.label }} @@ -53,10 +61,11 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { faBatteryFull as fasBatteryFull, faBatteryHalf as fasBatteryHalf, - faCar as fasCar + faCar as fasCar, + faPlug as fasPlug } from "@fortawesome/free-solid-svg-icons"; /* add icons to the library */ -library.add(fasBatteryFull, fasBatteryHalf, fasCar); +library.add(fasBatteryFull, fasBatteryHalf, fasCar, fasPlug); export default { name: "BatteryModeModal", @@ -71,27 +80,30 @@ export default { batteryModes: [ { value: 'ev_mode', - label: 'Fahrzeuge', + label: 'Verbraucher', color: 'primary', - symbol: { icon: ['fas', 'fa-car'], rotation: 0 }, + symbols: [ + { icon: ['fas', 'car'], rotation: 0 }, + { icon: ['fas', 'plug'], rotation: 0 } + ], }, { value: 'bat_mode', label: 'Speicher', color: 'primary', - symbol: { + symbols: [{ icon: ['fas', 'battery-full'], rotation: 270, - }, + }], }, { value: 'min_soc_bat_mode', label: 'Mindest-SoC', color: 'primary', - symbol: { + symbols: [{ icon: ['fas', 'battery-half'], rotation: 270, - }, + }], }, ] }; diff --git a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue index cccbf1afcb..b335d463d7 100644 --- a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue +++ b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue @@ -301,19 +301,33 @@ export default { chargePoint3Discharging() { return this.chargePoint3Power.value < 0; }, - batteryModeIcon() { + batteryModeIcons() { const mode = this.mqttStore.getBatteryMode; switch (mode) { case "ev_mode": - return VehicleIcon; + return [VehicleIcon, ConsumerIcon]; case "bat_mode": - return BatteryIcon; + return [BatteryIcon]; case "min_soc_bat_mode": - return Battery40Icon; + return [Battery40Icon]; default: return "---"; } }, + batteryModeIconSize() { + return this.svgSize.circleRadius * (this.batteryModeIcons.length > 1 ? 0.45 : 0.6); + }, + batteryModeIconSeparatorWidth() { + return this.svgSize.circleRadius * 0.15; + }, + batteryModeIconStartX() { + const buttonX = this.svgSize.circleRadius * 1.2; + const buttonWidth = this.svgSize.circleRadius * 1.1; + const groupWidth = + this.batteryModeIcons.length * this.batteryModeIconSize + + (this.batteryModeIcons.length - 1) * this.batteryModeIconSeparatorWidth; + return buttonX + (buttonWidth - groupWidth) / 2; + }, svgComponents() { var components = []; // add grid component @@ -944,14 +958,29 @@ export default { opacity="1" filter="url(#f-shadow)" /> - + diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue index 59fabface5..c0d9a72a2f 100644 --- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue @@ -39,7 +39,12 @@ >
Ladepriorität:
- +
{{ batteryMode.label }}
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue index 9cf3c6b0bf..b0200d9d66 100644 --- a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue +++ b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue @@ -4,12 +4,15 @@ v-for="mode in batteryModes" :key="mode.value" :color="batMode.value === mode.value ? 'primary' : 'grey'" - :label="mode.label" - :icon="mode.icon" :outline="batMode.value !== mode.value" size="sm" @click="batMode.value = mode.value" > + + {{ mode.label }} {{ mode.tooltip }} diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue index 7cfa0c1660..a13c204194 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue @@ -70,7 +70,9 @@ const acChargingEnabled = computed( const DC_POWER_FALLBACK = 300; // entspricht dc_max_current-Default 435 A const dcMaxPower = computed( -() => mqttStore.chargePointDcMaxPower(props.chargePointId).value ?? DC_POWER_FALLBACK, + () => + mqttStore.chargePointDcMaxPower(props.chargePointId).value ?? + DC_POWER_FALLBACK, ); const dcMinPower = computed(() => -dcMaxPower.value); diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts index c9f60823e7..e534bc1257 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts +++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts @@ -12,11 +12,7 @@ export interface ChartComponentRef { } export type Category = - | 'chargepoint' - | 'vehicle' - | 'battery' - | 'consumer' - | 'component'; + 'chargepoint' | 'vehicle' | 'battery' | 'consumer' | 'component'; export const CONSUMER_TOTAL_LABEL = 'Verbraucher ges.'; diff --git a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts index 12d260b412..5e4ffaac73 100644 --- a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts +++ b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts @@ -2,23 +2,23 @@ export const useBatteryModes = () => { const batteryModes = [ { value: 'ev_mode', - label: 'Fahrzeuge', + label: 'Verbraucher', color: 'primary', - icon: 'directions_car', - tooltip: 'Fahrzeuge', + icons: ['directions_car', 'power'], + tooltip: 'Verbraucher', }, { value: 'bat_mode', label: 'Speicher', color: 'primary', - icon: 'battery_charging_full', + icons: ['battery_charging_full'], tooltip: 'Speicher', }, { value: 'min_soc_bat_mode', label: 'Nach SoC des Speichers', color: 'primary', - icon: 'battery_4_bar', + icons: ['battery_4_bar'], tooltip: 'Nach SoC des Speichers', }, ];