Batteries: refactor api appearance (BC)

assets/js/components/Battery/BatterySettingsModal.vue

@@ -33,7 +33,7 @@
 		<div v-show="usageTabActive" class="row">
 			<p class="text-center text-md-start col-md-6 order-md-2 col-lg-3 order-lg-3 pt-lg-2">
 				{{ $t("batterySettings.batteryLevel") }}:
-				<strong>{{ fmtSoc(batterySoc) }}</strong>
+				<strong>{{ fmtSoc(battery?.soc ?? 0) }}</strong>
 				<small v-for="(line, index) in batteryDetails" :key="index" class="d-block">
 					{{ line }}
 				</small>
@@ -106,7 +106,7 @@
 					</div>
 					<div
 						class="batterySoc ps-0 bg-white pe-none"
-						:style="{ top: `${100 - batterySoc}%` }"
+						:style="{ top: `${100 - (battery?.soc ?? 100)}%` }"
 					></div>
 					<div
 						class="bufferStartIndicator pe-none"
@@ -264,7 +264,7 @@ import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import collector from "@/mixins/collector.js";
 import api from "@/api";
 import { defineComponent, type PropType } from "vue";
-import type { BatteryMeter, SelectOption, CURRENCY, Forecast } from "@/types/evcc";
+import type { Battery, SelectOption, CURRENCY, Forecast } from "@/types/evcc";
 import { SMART_COST_TYPE } from "@/types/evcc";
 
 export default defineComponent({
@@ -274,10 +274,9 @@ export default defineComponent({
 	props: {
 		bufferSoc: { type: Number, default: 100 },
 		prioritySoc: { type: Number, default: 0 },
-		batterySoc: { type: Number, default: 0 },
 		bufferStartSoc: { type: Number, default: 0 },
 		batteryDischargeControl: Boolean,
-		battery: { type: Array as PropType<BatteryMeter[]>, default: () => [] },
+		battery: { type: Object as PropType<Battery> },
 		batteryGridChargeLimit: { type: Number, default: null },
 		smartCostAvailable: Boolean,
 		smartCostType: String as PropType<SMART_COST_TYPE>,
@@ -310,7 +309,7 @@ export default defineComponent({
 			return options;
 		},
 		controllable() {
-			return this.battery.some(({ controllable }) => controllable);
+			return this.battery && this.battery.devices.some(({ controllable }) => controllable);
 		},
 		gridChargePossible() {
 			return this.controllable && this.isModalVisible && this.smartCostAvailable;
@@ -366,13 +365,13 @@ export default defineComponent({
 			return this.prioritySoc;
 		},
 		batteryDetails() {
-			if (!Array.isArray(this.battery)) {
+			if (!this.battery) {
 				return;
 			}
-			return this.battery
+			const multipleBatteries = this.battery.devices.length > 1;
+			return this.battery.devices
 				.filter(({ capacity }) => capacity > 0)
 				.map(({ soc = 0, capacity }) => {
-					const multipleBatteries = this.battery.length > 1;
 					const energy = this.fmtWh(
 						(capacity / 100) * soc * 1e3,
 						POWER_UNIT.KW,

assets/js/components/Energyflow/Energyflow.vue

@@ -19,7 +19,7 @@
 				:batteryHold="batteryHold"
 				:pvProduction="pvProduction"
 				:homePower="homePower"
-				:batterySoc="batterySoc"
+				:battery="battery"
 				:powerUnit="powerUnit"
 				:vehicleIcons="vehicleIcons"
 				:inPower="inPower"
@@ -113,10 +113,10 @@
 							:powerUnit="powerUnit"
 							:iconProps="{
 								hold: batteryHold,
-								soc: batterySoc,
+								soc: battery?.soc,
 								gridCharge: batteryGridChargeActive,
 							}"
-							:details="batterySoc"
+							:details="battery?.soc"
 							:detailsFmt="batteryFmt"
 							:expanded="batteryExpanded"
 							detailsClickable
@@ -127,9 +127,9 @@
 							<template v-if="batteryGridChargeLimitSet" #subline>
 								<div class="d-none d-md-block">&nbsp;</div>
 							</template>
-							<template v-if="battery.length > 1" #expanded>
+							<template v-if="battery && battery.devices.length > 1" #expanded>
 								<EnergyflowEntry
-									v-for="(b, index) in battery"
+									v-for="(b, index) in battery.devices"
 									:key="index"
 									:name="b.title || genericBatteryTitle(index)"
 									:details="b.soc"
@@ -231,10 +231,10 @@
 							:powerUnit="powerUnit"
 							:iconProps="{
 								hold: batteryHold,
-								soc: batterySoc,
+								soc: battery?.soc,
 								gridCharge: batteryGridChargeActive,
 							}"
-							:details="batterySoc"
+							:details="battery?.soc"
 							:detailsFmt="batteryFmt"
 							:expanded="batteryExpanded"
 							detailsClickable
@@ -262,9 +262,9 @@
 									</span>
 								</button>
 							</template>
-							<template v-if="battery.length > 1" #expanded>
+							<template v-if="battery && battery.devices.length > 1" #expanded>
 								<EnergyflowEntry
-									v-for="(b, index) in battery"
+									v-for="(b, index) in battery.devices"
 									:key="index"
 									:name="b.title || genericBatteryTitle(index)"
 									:details="b.soc"
@@ -304,7 +304,7 @@ import collector from "@/mixins/collector.js";
 import { defineComponent, type PropType } from "vue";
 import {
 	SMART_COST_TYPE,
-	type BatteryMeter,
+	type Battery,
 	type Meter,
 	type CURRENCY,
 	type Forecast,
@@ -330,9 +330,7 @@ export default defineComponent({
 		pvPower: { type: Number, default: 0 },
 		loadpoints: { type: Array as PropType<UiLoadpoint[]>, default: () => [] },
 		batteryConfigured: { type: Boolean },
-		battery: { type: Array as PropType<BatteryMeter[]>, default: () => [] },
-		batteryPower: { type: Number, default: 0 },
-		batterySoc: { type: Number, default: 0 },
+		battery: { type: Object as PropType<Battery> },
 		batteryDischargeControl: { type: Boolean },
 		batteryGridChargeLimit: { type: Number },
 		batteryGridChargeActive: { type: Boolean },
@@ -362,10 +360,10 @@ export default defineComponent({
 			return Math.abs(this.pvPower);
 		},
 		batteryDischarge() {
-			return this.dischargePower(this.batteryPower);
+			return this.dischargePower(this.battery?.power ?? 0);
 		},
 		batteryCharge() {
-			return this.chargePower(this.batteryPower);
+			return this.chargePower(this.battery?.power ?? 0);
 		},
 		batteryChargeLabel() {
 			return this.$t(`main.energyflow.battery${this.batteryHold ? "Hold" : "Charge"}`);

assets/js/components/Energyflow/Visualization.vue

@@ -10,7 +10,7 @@
 					<shopicon-regular-sun></shopicon-regular-sun>
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('top', 'batteryDischarge')">
-					<BatteryIcon :soc="batterySoc" />
+					<BatteryIcon :soc="battery?.soc" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('top', 'gridImport')">
 					<shopicon-regular-powersupply></shopicon-regular-powersupply>
@@ -91,7 +91,7 @@
 					<VehicleIcon :names="[lp.icon]" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'batteryCharge')">
-					<BatteryIcon :soc="batterySoc" :gridCharge="batteryGridCharge" />
+					<BatteryIcon :soc="battery?.soc" :gridCharge="batteryGridCharge" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'gridExport')">
 					<shopicon-regular-powersupply></shopicon-regular-powersupply>
@@ -116,7 +116,7 @@ import QuestionIcon from "../MaterialIcon/Question.vue";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/home";
 import { defineComponent, type PropType } from "vue";
-import type { UiLoadpoint } from "@/types/evcc";
+import type { Battery, UiLoadpoint } from "@/types/evcc";
 
 export default defineComponent({
 	name: "Visualization",
@@ -128,13 +128,13 @@ export default defineComponent({
 		selfBattery: { type: Number, default: 0 },
 		pvExport: { type: Number, default: 0 },
 		loadpoints: { type: Array as PropType<UiLoadpoint[]>, default: () => [] },
+		battery: { type: Object as PropType<Battery> },
 		batteryCharge: { type: Number, default: 0 },
 		batteryDischarge: { type: Number, default: 0 },
 		batteryHold: { type: Boolean, default: false },
 		batteryGridCharge: { type: Boolean, default: false },
 		pvProduction: { type: Number, default: 0 },
 		homePower: { type: Number, default: 0 },
-		batterySoc: { type: Number, default: 0 },
 		powerUnit: { type: String as PropType<POWER_UNIT>, default: POWER_UNIT.KW },
 		inPower: { type: Number, default: 0 },
 		outPower: { type: Number, default: 0 },

assets/js/components/Site/Site.vue

@@ -63,7 +63,7 @@
 				:gridConfigured="gridConfigured"
 				:pvConfigured="pvConfigured"
 				:batteryConfigured="batteryConfigured"
-				:batterySoc="batterySoc"
+				:batterySoc="battery?.soc"
 				:forecast="forecast"
 				:selectedId="selectedLoadpointId"
 				@id-changed="selectedLoadpointChanged"
@@ -87,7 +87,7 @@ import WelcomeIcons from "./WelcomeIcons.vue";
 import { defineComponent, type PropType } from "vue";
 import type {
 	AuthProviders,
-	BatteryMeter,
+	Battery,
 	Meter,
 	CURRENCY,
 	Forecast,
@@ -127,13 +127,11 @@ export default defineComponent({
 		pv: { type: Array as PropType<Meter[]>, default: () => [] },
 		aux: { type: Array as PropType<Meter[]>, default: () => [] },
 		ext: { type: Array as PropType<Meter[]>, default: () => [] },
-		batteryPower: Number,
-		batterySoc: Number,
 		batteryDischargeControl: Boolean,
 		batteryGridChargeLimit: { type: Number, default: null },
 		batteryGridChargeActive: Boolean,
 		batteryMode: String,
-		battery: { type: Array as PropType<BatteryMeter[]>, default: () => [] },
+		battery: { type: Object as PropType<Battery> },
 		gridCurrents: Array,
 		prioritySoc: Number,
 		bufferSoc: Number,
@@ -174,7 +172,7 @@ export default defineComponent({
 			return this.loadpoints.filter((lp) => lp.visible);
 		},
 		batteryConfigured() {
-			return this.battery?.length > 0;
+			return this.battery && this.battery.devices.length > 0;
 		},
 		pvConfigured() {
 			return this.pv?.length > 0;

assets/js/components/Top/Navigation.vue

@@ -140,7 +140,7 @@ import baseAPI from "./baseapi";
 import { isApp, sendToApp } from "@/utils/native";
 import { isUserConfigError } from "@/utils/fatal";
 import { defineComponent, type PropType } from "vue";
-import type { FatalError, Sponsor, AuthProviders, EvOpt } from "@/types/evcc";
+import type { FatalError, Sponsor, AuthProviders, EvOpt, Battery } from "@/types/evcc";
 import type { Provider as Provider } from "./types";
 
 export default defineComponent({
@@ -150,7 +150,7 @@ export default defineComponent({
 		authProviders: { type: Object as PropType<AuthProviders>, default: () => ({}) },
 		sponsor: { type: Object as PropType<Sponsor>, default: () => ({}) },
 		forecast: Object,
-		battery: Array,
+		battery: { type: Object as PropType<Battery> },
 		evopt: { type: Object as PropType<EvOpt>, required: false },
 		fatal: { type: Array as PropType<FatalError[]>, default: () => [] },
 	},
@@ -162,7 +162,7 @@ export default defineComponent({
 	},
 	computed: {
 		batteryConfigured() {
-			return this.battery?.length;
+			return this.battery && this.battery.devices.length;
 		},
 		providerLogins(): Provider[] {
 			return Object.entries(this.authProviders).map(([title, { authenticated, id }]) => ({

assets/js/types/evcc.ts

@@ -58,7 +58,7 @@ export interface State {
   authProviders?: AuthProviders;
   evopt?: EvOpt;
   version?: string;
-  battery?: BatteryMeter[];
+  battery?: Battery;
   pv?: Meter[];
   aux?: Meter[];
   ext?: Meter[];
@@ -364,6 +364,13 @@ export interface Meter {
   energy?: number;
 }
 
+export interface Battery {
+  power: number;
+  capacity: number;
+  soc: number;
+  devices: BatteryMeter[];
+}
+
 export interface BatteryMeter extends Meter {
   soc: number;
   controllable: boolean;

assets/js/views/App.vue

@@ -3,7 +3,11 @@
 		<router-view :notifications="notifications" :offline="offline"></router-view>
 
 		<GlobalSettingsModal v-bind="globalSettingsProps" />
-		<BatterySettingsModal v-if="batteryModalAvailabe" v-bind="batterySettingsProps" />
+		<BatterySettingsModal
+			v-if="batteryModalAvailabe"
+			v-bind="batterySettingsProps"
+			:battery="state.battery"
+		/>
 		<ForecastModal v-bind="forecastModalProps" />
 		<HelpModal />
 		<PasswordModal />
@@ -65,7 +69,7 @@ export default defineComponent({
 			return store.state.version;
 		},
 		batteryModalAvailabe() {
-			return store.state.battery?.length;
+			return store.state.battery?.devices.length;
 		},
 		state() {
 			const { state, uiLoadpoints } = store;

core/keys/site.go

@@ -40,19 +40,15 @@ const (
 	AuxMeters     = "auxMeters"
 
 	// battery settings
-	BatteryCapacity         = "batteryCapacity"
 	BatteryDischargeControl = "batteryDischargeControl"
 	BatteryGridChargeLimit  = "batteryGridChargeLimit"
 	BatteryGridChargeActive = "batteryGridChargeActive"
 	BufferSoc               = "bufferSoc"
 	BufferStartSoc          = "bufferStartSoc"
 
 	// battery status
-	Battery       = "battery"
-	BatteryEnergy = "batteryEnergy"
-	BatteryMode   = "batteryMode"
-	BatteryPower  = "batteryPower"
-	BatterySoc    = "batterySoc"
+	Battery     = "battery"
+	BatteryMode = "batteryMode"
 
 	// external battery control
 	BatteryModeExternal = "batteryModeExternal"