Merge remote-tracking branch 'upstream/master'

Author: WulfgarW

assets/js/components/Energyflow/Energyflow.vue

@@ -64,17 +64,19 @@
 				>
 					<div class="d-flex justify-content-between align-items-end mb-4">
 						<h3 class="m-0">In</h3>
-						<span class="fw-bold">
+						<span v-if="pvPossible" class="fw-bold">
 							<AnimatedNumber :to="inPower" :format="kw" />
 						</span>
 					</div>
 					<div>
 						<EnergyflowEntry
+							v-if="pvPossible"
 							:name="$t('main.energyflow.pvProduction')"
 							icon="sun"
 							:power="pvProduction"
 							:powerTooltip="pvTooltip"
 							:powerInKw="powerInKw"
+							data-testid="energyflow-entry-production"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
@@ -106,19 +108,21 @@
 				>
 					<div class="d-flex justify-content-between align-items-end mb-4">
 						<h3 class="m-0">Out</h3>
-						<span class="fw-bold">
+						<span v-if="pvPossible" class="fw-bold">
 							<AnimatedNumber :to="outPower" :format="kw" />
 						</span>
 					</div>
 					<div>
 						<EnergyflowEntry
+							v-if="pvPossible"
 							:name="$t('main.energyflow.homePower')"
 							icon="home"
 							:power="homePower"
 							:powerInKw="powerInKw"
 							:details="detailsValue(tariffPriceHome, tariffCo2Home)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffPriceHome, tariffCo2Home)"
+							data-testid="energyflow-entry-home"
 						/>
 						<EnergyflowEntry
 							:name="
@@ -139,6 +143,7 @@
 							:detailsTooltip="
 								detailsTooltip(tariffPriceLoadpoints, tariffCo2Loadpoints)
 							"
+							data-testid="energyflow-entry-loadpoints"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
@@ -153,13 +158,15 @@
 							@details-clicked="openBatterySettingsModal"
 						/>
 						<EnergyflowEntry
+							v-if="pvPossible"
 							:name="$t('main.energyflow.pvExport')"
 							icon="powersupply"
 							:power="pvExport"
 							:powerInKw="powerInKw"
 							:details="detailsValue(-tariffFeedIn)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(-tariffFeedIn)"
+							data-testid="energyflow-entry-gridexport"
 						/>
 					</div>
 				</div>
@@ -293,6 +300,9 @@ export default {
 		co2Available() {
 			return this.smartCostType === CO2_TYPE;
 		},
+		pvPossible() {
+			return this.pvConfigured || this.gridConfigured;
+		},
 	},
 	mounted() {
 		window.addEventListener("resize", this.updateHeight);

assets/js/components/Energyflow/Visualization.vue

@@ -60,11 +60,8 @@
 					:format="fmtBarValue"
 				/>
 			</div>
-			<div
-				v-if="totalAdjusted <= 0"
-				class="site-progress-bar bg-light border no-wrap w-100 text-dark"
-			>
-				<span>{{ $t("main.energyflow.noEnergy") }}</span>
+			<div v-if="totalAdjusted <= 0" class="site-progress-bar w-100 grid-import">
+				<span>{{ fmtKw(0, false, true) }}</span>
 			</div>
 		</div>
 		<div class="label-scale d-flex">

assets/js/components/Loadpoint.vue

@@ -15,7 +15,7 @@
 				<LoadpointSettingsButton :id="id" class="d-block d-sm-none" />
 			</div>
 			<div class="mb-3 d-flex align-items-center">
-				<Mode class="flex-grow-1" :mode="mode" @updated="setTargetMode" />
+				<Mode class="flex-grow-1" v-bind="modeProps" @updated="setTargetMode" />
 				<LoadpointSettingsButton :id="id" class="d-none d-sm-block ms-2" />
 			</div>
 		</div>
@@ -98,6 +98,7 @@ import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
 import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
 import VehicleIcon from "./VehicleIcon";
 import LoadpointSessionInfo from "./LoadpointSessionInfo.vue";
+import smartCostAvailable from "../utils/smartCostAvailable";
 
 export default {
 	name: "Loadpoint",
@@ -189,6 +190,8 @@ export default {
 		tariffCo2: Number,
 		currency: String,
 		multipleLoadpoints: Boolean,
+		gridConfigured: Boolean,
+		pvConfigured: Boolean,
 	},
 	data() {
 		return {
@@ -218,6 +221,9 @@ export default {
 		phasesProps: function () {
 			return this.collectProps(Phases);
 		},
+		modeProps: function () {
+			return this.collectProps(Mode);
+		},
 		sessionInfoProps: function () {
 			return this.collectProps(LoadpointSessionInfo);
 		},
@@ -251,6 +257,12 @@ export default {
 		socBasedPlanning: function () {
 			return this.socBasedCharging && this.vehicle?.capacity > 0;
 		},
+		pvPossible: function () {
+			return this.pvConfigured || this.gridConfigured;
+		},
+		hasSmartCost: function () {
+			return smartCostAvailable(this.smartCostType);
+		},
 	},
 	watch: {
 		phaseRemaining() {

assets/js/components/Loadpoints.vue

@@ -22,6 +22,8 @@
 					:tariffCo2="tariffCo2"
 					:currency="currency"
 					:multiple-loadpoints="loadpoints.length > 1"
+					:grid-configured="gridConfigured"
+					:pv-configured="pvConfigured"
 					class="h-100"
 					:class="{ 'loadpoint-unselected': !selected(index) }"
 					@click="scrollTo(index)"
@@ -67,6 +69,8 @@ export default {
 		tariffGrid: Number,
 		tariffCo2: Number,
 		currency: String,
+		gridConfigured: Boolean,
+		pvConfigured: Boolean,
 	},
 	data() {
 		return { selectedIndex: 0, snapTimeout: null };

assets/js/components/Mode.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mode-group border d-inline-flex" role="group">
+	<div class="mode-group border d-inline-flex" role="group" data-testid="mode">
 		<button
 			v-for="m in modes"
 			:key="m"
@@ -8,7 +8,7 @@
 			:class="{ active: isActive(m) }"
 			@click="setTargetMode(m)"
 		>
-			{{ $t(`main.mode.${m}`) }}
+			{{ label(m) }}
 		</button>
 	</div>
 </template>
@@ -18,14 +18,31 @@ export default {
 	name: "Mode",
 	props: {
 		mode: String,
+		pvPossible: Boolean,
+		hasSmartCost: Boolean,
 	},
 	emits: ["updated"],
-	data() {
-		return {
-			modes: ["off", "pv", "minpv", "now"],
-		};
+
+	computed: {
+		modes: function () {
+			if (this.pvPossible) {
+				return ["off", "pv", "minpv", "now"];
+			}
+			if (this.hasSmartCost) {
+				return ["off", "pv", "now"];
+			}
+			return ["off", "now"];
+		},
 	},
 	methods: {
+		label: function (mode) {
+			// rename pv mode to smart for non-pv and dynamic tariffs scenarios
+			// TODO: rollout smart name for everyting later
+			if (mode === "pv" && !this.pvPossible && this.hasSmartCost) {
+				return this.$t("main.mode.smart");
+			}
+			return this.$t(`main.mode.${mode}`);
+		},
 		isActive: function (mode) {
 			return this.mode === mode;
 		},

assets/js/components/Site.vue

@@ -29,6 +29,8 @@
 				:tariffGrid="tariffGrid"
 				:tariffCo2="tariffCo2"
 				:currency="currency"
+				:gridConfigured="gridConfigured"
+				:pvConfigured="pvConfigured"
 			/>
 			<Footer v-bind="footer"></Footer>
 		</div>

assets/js/views/Config.vue

@@ -17,7 +17,6 @@
 					</p>
 					<p class="mb-1"><strong>Missing features</strong></p>
 					<ul>
-						<li>grid meter</li>
 						<li>aux meters</li>
 						<li>loadpoints and chargers</li>
 						<li>custom/plugin meters and vehicles</li>
@@ -41,16 +40,22 @@
 					<ul class="p-0 config-list">
 						<DeviceCard
 							:name="$t('config.grid.title')"
-							:editable="!!gridMeter?.id"
+							:editable="!gridMeter || !!gridMeter.id"
 							:error="deviceError('meter', gridMeter?.name)"
 							data-testid="grid"
-							@edit="editMeter(gridMeter.id, 'grid')"
+							@edit="gridMeter?.id ? editMeter(gridMeter.id, 'pv') : addMeter('grid')"
 						>
 							<template #icon>
 								<shopicon-regular-powersupply></shopicon-regular-powersupply>
 							</template>
 							<template #tags>
-								<DeviceTags :tags="deviceTags('meter', gridMeter?.name)" />
+								<DeviceTags
+									:tags="
+										gridMeter
+											? deviceTags('meter', gridMeter.name)
+											: { configured: { value: false } }
+									"
+								/>
 							</template>
 						</DeviceCard>
 						<DeviceCard
@@ -547,7 +552,7 @@ export default {
 		removeMeterFromSite(type, name) {
 			if (type === "grid") {
 				this.site.grid = "";
-			} else {
+			} else if (this.site[type]) {
 				this.site[type] = this.site[type].filter((i) => i !== name);
 			}
 			this.saveSite(type);