diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue index 5bfa18597..d42802baa 100644 --- a/assets/js/components/Energyflow/Energyflow.vue +++ b/assets/js/components/Energyflow/Energyflow.vue @@ -82,7 +82,6 @@ :name="$t('main.energyflow.pvProduction')" icon="sun" :power="pvProduction" - :powerTooltip="pvTooltip" :details="solarForecastRemainingToday" :detailsFmt="forecastFmt" :detailsTooltip="solarForecastTooltip" @@ -90,15 +89,27 @@ :detailsIcon="solarForecastIcon" :detailsClickable="solarForecastExists" :powerUnit="powerUnit" + :expanded="pvExpanded" data-testid="energyflow-entry-production" @details-clicked="openForecastModal" - /> + @toggle="togglePv" + > + + + + - `${title ? `${title}: ` : ""}${this.fmtW(power, this.powerUnit)}` - ); - }, - batteryDischargeTooltip() { - return this.batteryTooltip(true); - }, - batteryChargeTooltip() { - return this.batteryTooltip(false); - }, batteryFmt() { return (soc) => this.fmtPercentage(soc, 0); }, @@ -412,6 +433,12 @@ export default { } return []; }, + pvExpanded() { + return settings.energyflowPv; + }, + batteryExpanded() { + return settings.energyflowBattery; + }, }, watch: { pvConfigured() { @@ -494,17 +521,19 @@ export default { chargePower(power) { return Math.abs(Math.min(0, power) * -1); }, - batteryTooltip(discharge = false) { - if (!Array.isArray(this.battery) || this.battery.length <= 1) { - return; - } - return this.battery.map(({ power, soc, title }) => { - const value = discharge ? this.dischargePower(power) : this.chargePower(power); - - const powerFmt = this.fmtW(value, this.powerUnit); - const socFmt = this.fmtPercentage(soc, 0); - return `${title ? `${title}: ` : ""}${powerFmt} (${socFmt})`; - }); + toggleBattery() { + settings.energyflowBattery = !settings.energyflowBattery; + this.$nextTick(this.updateHeight); + }, + togglePv() { + settings.energyflowPv = !settings.energyflowPv; + this.$nextTick(this.updateHeight); + }, + genericBatteryTitle(index) { + return `${this.$t("config.devices.batteryStorage")} #${index + 1}`; + }, + genericPvTitle(index) { + return `${this.$t("config.devices.solarSystem")} #${index + 1}`; }, }, }; diff --git a/assets/js/components/Energyflow/Entry.vue b/assets/js/components/Energyflow/Entry.vue index 82d83ff5d..0f56e4b4f 100644 --- a/assets/js/components/Energyflow/Entry.vue +++ b/assets/js/components/Energyflow/Entry.vue @@ -1,39 +1,63 @@