Config UI: better explain optimizer (#29141)

assets/js/components/Config/OptimizerModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<GenericModal
 		id="optimizerModal"
-		:title="$t('config.optimizer.title')"
+		:title="`${$t('config.optimizer.title')} 🧪`"
 		config-modal-name="optimizer"
 		data-testid="optimizer-modal"
 	>
@@ -9,6 +9,7 @@
 			{{ $t("config.optimizer.description") }}
 			<a :href="docsLink" target="_blank">{{ $t("config.general.docsLink") }}</a>
 		</p>
+		<SponsorTokenRequired v-if="!isSponsor" feature class="mt-0" />
 		<ErrorMessage :error="error" />
 		<div class="form-check form-switch my-3">
 			<input
@@ -17,6 +18,7 @@
 				class="form-check-input"
 				type="checkbox"
 				role="switch"
+				:disabled="!isSponsor"
 				@change="change"
 			/>
 			<div class="form-check-label">
@@ -25,6 +27,9 @@
 				</label>
 			</div>
 		</div>
+		<p v-if="enabled && !hasEvopt" class="text-muted small mt-2">
+			{{ $t("config.optimizer.info") }}
+		</p>
 	</GenericModal>
 </template>
 
@@ -32,6 +37,7 @@
 import { defineComponent } from "vue";
 import GenericModal from "../Helper/GenericModal.vue";
 import ErrorMessage from "../Helper/ErrorMessage.vue";
+import SponsorTokenRequired from "./DeviceModal/SponsorTokenRequired.vue";
 import api from "@/api";
 import store from "@/store";
 import { docsPrefix } from "@/i18n";
@@ -39,7 +45,10 @@ import type { AxiosError } from "axios";
 
 export default defineComponent({
 	name: "OptimizerModal",
-	components: { GenericModal, ErrorMessage },
+	components: { GenericModal, ErrorMessage, SponsorTokenRequired },
+	props: {
+		isSponsor: Boolean,
+	},
 	data() {
 		return {
 			error: null as string | null,
@@ -49,6 +58,9 @@ export default defineComponent({
 		enabled(): boolean {
 			return !!store.state?.optimizer;
 		},
+		hasEvopt(): boolean {
+			return !!store.state?.evopt;
+		},
 		docsLink(): string {
 			return `${docsPrefix()}/docs/features/optimizer`;
 		},

assets/js/components/Config/TelemetryModal.vue

@@ -7,27 +7,21 @@
 		data-testid="telemetry-modal"
 	>
 		<p>{{ $t("config.telemetry.description") }}</p>
-		<TelemetrySettings :sponsorActive="sponsorActive" :telemetry="telemetry" />
+		<TelemetrySettings :sponsorActive="isSponsor" :telemetry="telemetry" />
 	</GenericModal>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent } from "vue";
 import GenericModal from "../Helper/GenericModal.vue";
 import TelemetrySettings from "../TelemetrySettings.vue";
-import type { Sponsor } from "../../types/evcc";
 
 export default defineComponent({
 	name: "TelemetryModal",
 	components: { GenericModal, TelemetrySettings },
 	props: {
-		sponsor: { type: Object as PropType<Sponsor> },
+		isSponsor: { type: Boolean },
 		telemetry: { type: Boolean },
 	},
-	computed: {
-		sponsorActive(): boolean {
-			return !!this.sponsor?.status?.name;
-		},
-	},
 });
 </script>

assets/js/views/Config.vue

@@ -427,8 +427,8 @@
 				<MessengerModal @changed="messengerChanged" />
 				<TariffsLegacyModal @changed="loadDirty" />
 				<TariffModal :currency="currency" @changed="tariffChanged" />
-				<TelemetryModal :sponsor="sponsor" :telemetry="telemetry" />
-				<OptimizerModal />
+				<TelemetryModal :is-sponsor="isSponsor" :telemetry="telemetry" />
+				<OptimizerModal :is-sponsor="isSponsor" />
 				<ExperimentalModal :experimental="experimental" />
 				<RemoteModal :remote="remote" :is-sponsor="isSponsor" />
 				<TitleModal @changed="loadDirty" />

i18n/de.json

@@ -602,8 +602,9 @@
       "urlHelp": "Kopiere diese URL in die Konfiguration deiner Wallbox. Details findest du im Handbuch des Herstellers. Die Wallbox sollte automatisch ihre eindeutige Kennung (Station-ID) an die URL anhängen. In seltenen Fällen musst du die Kennung manuell angeben. Beispiel: `{url}`"
     },
     "optimizer": {
-      "description": "Analysiert Solarprognose, Strompreise und deinen typischen Verbrauch, um Batterie- und Ladestrategie zu optimieren. Daten werden zur Berechnung an den evcc Optimierungsdienst übertragen.",
+      "description": "Analysiert Solarprognose, Strompreise und deinen typischen Verbrauch, um Batterie- und Ladestrategie zu optimieren. Daten werden zur Berechnung an den evcc Optimierungsdienst übertragen. Berechnet und visualisiert aktuell nur. Steuert noch keine Geräte.",
       "enable": "Optimizer aktivieren",
+      "info": "Es kann einige Minuten dauern, bis der Optimizer-Menüeintrag sichtbar wird. Bei neuen Installationen kann es bis zu 24 Stunden dauern, bis evcc genügend Daten gesammelt hat.",
       "title": "Optimizer"
     },
     "options": {

i18n/en.json

@@ -603,8 +603,9 @@
       "urlHelp": "Copy this URL into your charger's configuration. Check the manufacturer's manual for details. The charger is expected to automatically append its unique identifier (station ID) to the url. In rare cases, you may need to manually specify the identifier. Example: `{url}`"
     },
     "optimizer": {
-      "description": "Analyzes solar forecast, electricity prices, and your consumption patterns to optimize battery and charging strategy. Data is sent to the evcc optimization service for processing.",
+      "description": "Analyzes solar forecast, electricity prices, and your consumption patterns to optimize battery and charging strategy. Data is sent to the evcc optimization service for processing. Currently only calculates and visualizes. Does not control devices yet.",
       "enable": "Enable Optimizer",
+      "info": "It may take a few minutes for the optimizer menu entry to become visible. For new installations, it may take up to 24 hours until evcc has collected enough data.",
       "title": "Optimizer"
     },
     "options": {