Config UI: add tariffs

api/globalconfig/types.go

@@ -20,11 +20,20 @@ import (
 
 // ConfigStatus for publishing config, status and source to UI and external systems
 type ConfigStatus struct {
-	Config   any  `json:"config,omitempty"`
-	Status   any  `json:"status,omitempty"`
-	FromYaml bool `json:"fromYaml,omitempty"`
+	Config     any        `json:"config,omitempty"`
+	Status     any        `json:"status,omitempty"`
+	FromYaml   bool       `json:"fromYaml,omitempty"`
+	YamlSource YamlSource `json:"yamlSource,omitempty"`
 }
 
+type YamlSource string
+
+const (
+	YamlSourceFs   YamlSource = "fs"
+	YamlSourceDb   YamlSource = "db"
+	YamlSourceNone YamlSource = ""
+)
+
 type All struct {
 	Network      Network
 	Ocpp         ocpp.Config
@@ -160,6 +169,14 @@ type Tariffs struct {
 	Solar    []config.Typed
 }
 
+type TariffRefs struct {
+	Grid    string   `json:"grid"`
+	FeedIn  string   `json:"feedIn"`
+	Co2     string   `json:"co2"`
+	Planner string   `json:"planner"`
+	Solar   []string `json:"solar"`
+}
+
 type Network struct {
 	Schema_     string `json:"schema,omitempty" mapstructure:"schema"` // TODO deprecated
 	ExternalUrl string `json:"externalUrl"`

assets/css/app.css

@@ -71,6 +71,9 @@
 
 	--bs-warning: var(--evcc-orange);
 	--bs-warning-rgb: var(--evcc-orange-rgb);
+	--bs-warning-bg-subtle: color-mix(in srgb, var(--evcc-orange) 10%, transparent);
+	--bs-warning-border-subtle: color-mix(in srgb, var(--evcc-orange) 30%, transparent);
+	--bs-warning-text-emphasis: var(--evcc-orange);
 	--bs-danger-50: #dc354580;
 
 	--bs-danger: var(--evcc-red);

assets/js/components/ChargingPlans/PlanRepeatingSettings.vue

@@ -184,7 +184,7 @@ export default defineComponent({
 			return this.dataChanged && this.selectedActive;
 		},
 		weekdaysLabel(): string {
-			return this.getShortenedWeekdaysLabel(this.selectedWeekdays);
+			return this.fmtWeekdaysRange(this.selectedWeekdays);
 		},
 		socOptions(): SelectOption<number>[] {
 			// a list of entries from 5 to 100 with a step of 5

assets/js/components/Config/CurrencyModal.vue

@@ -0,0 +1,120 @@
+<template>
+	<GenericModal
+		id="currencyModal"
+		ref="modal"
+		:title="$t('config.currency.title')"
+		data-testid="currency-modal"
+		@open="open"
+	>
+		<p>{{ $t("config.currency.description") }}</p>
+		<p v-if="error" class="text-danger">{{ error }}</p>
+		<form ref="form" class="container mx-0 px-0" @submit.prevent="save">
+			<FormRow id="currency" :label="$t('config.currency.label')" :example="exampleText">
+				<select id="currency" v-model="selectedCurrency" class="form-select" required>
+					<option
+						v-for="currency in currencies"
+						:key="currency.code"
+						:value="currency.code"
+					>
+						{{ currency.code }} - {{ currency.name }}
+					</option>
+				</select>
+			</FormRow>
+
+			<div class="mt-4 d-flex justify-content-between gap-2 flex-column flex-sm-row">
+				<button
+					type="button"
+					class="btn btn-link text-muted btn-cancel"
+					data-bs-dismiss="modal"
+				>
+					{{ $t("config.general.cancel") }}
+				</button>
+
+				<button
+					type="submit"
+					class="btn btn-primary order-1 order-sm-2 flex-grow-1 flex-sm-grow-0 px-4"
+					:disabled="saving || !changed"
+				>
+					<span
+						v-if="saving"
+						class="spinner-border spinner-border-sm"
+						role="status"
+						aria-hidden="true"
+					></span>
+					{{ $t("config.general.save") }}
+				</button>
+			</div>
+		</form>
+	</GenericModal>
+</template>
+
+<script>
+import GenericModal from "../Helper/GenericModal.vue";
+import FormRow from "./FormRow.vue";
+import store from "@/store";
+import api from "@/api";
+import { CURRENCY } from "@/types/evcc";
+import formatter from "@/mixins/formatter";
+
+export default {
+	name: "CurrencyModal",
+	components: { FormRow, GenericModal },
+	mixins: [formatter],
+	emits: ["changed"],
+	data() {
+		return {
+			saving: false,
+			error: "",
+			selectedCurrency: "EUR",
+			initialCurrency: "EUR",
+		};
+	},
+	computed: {
+		currencies() {
+			return Object.values(CURRENCY).map((code) => ({
+				code,
+				name: this.fmtCurrencyName(code),
+			}));
+		},
+		changed() {
+			return this.selectedCurrency !== this.initialCurrency;
+		},
+		exampleText() {
+			const price = this.fmtPricePerKWh(0.122, this.selectedCurrency);
+			const amount = this.fmtMoney(20.2, this.selectedCurrency, true, true);
+			return this.$t("config.currency.example", { price, amount });
+		},
+	},
+	methods: {
+		reset() {
+			const currency = store?.state?.currency || "EUR";
+			this.saving = false;
+			this.error = "";
+			this.selectedCurrency = currency;
+			this.initialCurrency = currency;
+		},
+		async open() {
+			this.reset();
+		},
+		async save() {
+			this.saving = true;
+			this.error = "";
+			try {
+				await api.put("/config/currency", JSON.stringify(this.selectedCurrency));
+				this.$emit("changed");
+				this.$refs.modal.close();
+			} catch (e) {
+				this.error = e.message;
+			}
+			this.saving = false;
+		},
+	},
+};
+</script>
+<style scoped>
+.container {
+	margin-left: calc(var(--bs-gutter-x) * -0.5);
+	margin-right: calc(var(--bs-gutter-x) * -0.5);
+	padding-right: 0;
+}
+</style>

assets/js/components/Config/DeviceCard.vue

@@ -31,6 +31,12 @@
 				:disabled="!editable || noEditButton"
 				@click="edit"
 			>
+				<span
+					v-if="badge"
+					class="position-absolute top-0 start-100 translate-middle p-2 rounded-circle bg-warning"
+				>
+					<span class="visually-hidden">new</span>
+				</span>
 				<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
 			</button>
 		</div>
@@ -56,6 +62,7 @@ export default {
 		unconfigured: Boolean,
 		warning: Boolean,
 		noEditButton: Boolean,
+		badge: Boolean,
 	},
 	emits: ["edit"],
 	data() {
@@ -65,14 +72,17 @@ export default {
 	},
 	computed: {
 		tooltipTitle() {
-			if (!this.name) {
-				return "";
+			let result = "";
+			if (this.name) {
+				result += `${this.$t("config.main.name")}: <span class='font-monospace'>${this.name}</span>`;
 			}
-			let title = `${this.$t("config.main.name")}: <span class='font-monospace'>${this.name}</span>`;
 			if (!this.editable) {
-				title += `<div class="mt-1">${this.$t("config.general.fromYamlHint")}</div>`;
+				result += `<div class="mt-1">${this.$t("config.general.fromYamlHint")}</div>`;
+			}
+			if (!result) {
+				return "";
 			}
-			return `<div class="text-start">${title}</div>`;
+			return `<div class="text-start">${result}</div>`;
 		},
 	},
 	watch: {

assets/js/components/Config/DeviceModal/Actions.vue

@@ -4,6 +4,7 @@
 			v-if="testState"
 			v-bind="testState"
 			:sponsor-token-required="sponsorTokenRequired"
+			:currency="currency"
 			@test="$emit('test')"
 		/>
 
@@ -51,6 +52,7 @@ import { defineComponent } from "vue";
 import type { PropType } from "vue";
 import TestResult from "../TestResult.vue";
 import { type TestState } from "../utils/test";
+import type { CURRENCY } from "@/types/evcc";
 
 export default defineComponent({
 	name: "DeviceModalActions",
@@ -67,6 +69,7 @@ export default defineComponent({
 		isSucceeded: Boolean as PropType<boolean>,
 		isNew: Boolean as PropType<boolean>,
 		sponsorTokenRequired: Boolean as PropType<boolean>,
+		currency: String as PropType<CURRENCY>,
 	},
 	emits: ["save", "remove", "test"],
 	computed: {

assets/js/components/Config/DeviceModal/DeviceModalBase.vue

@@ -55,6 +55,7 @@
 							v-bind="param"
 							v-model="values[param.Name]"
 							:service-values="serviceValues[param.Name]"
+							:currency="currency"
 						/>
 
 						<div v-if="auth.code">
@@ -126,6 +127,7 @@
 								v-bind="param"
 								v-model="values[param.Name]"
 								:service-values="serviceValues[param.Name]"
+								:currency="currency"
 							/>
 
 							<PropertyCollapsible>
@@ -137,6 +139,7 @@
 										v-bind="param"
 										v-model="values[param.Name]"
 										:service-values="serviceValues[param.Name]"
+										:currency="currency"
 									/>
 								</template>
 								<template v-if="$slots['collapsible-more']" #more>
@@ -155,6 +158,7 @@
 					:is-succeeded="succeeded"
 					:is-new="isNew"
 					:sponsor-token-required="sponsorTokenRequired"
+					:currency="currency"
 					@save="handleSave"
 					@remove="handleRemove"
 					@test="testManually"
@@ -182,6 +186,7 @@ import { initialAuthState, prepareAuthLogin } from "../utils/authProvider";
 import sleep from "@/utils/sleep";
 import { ConfigType } from "@/types/evcc";
 import type { DeviceType, Timeout } from "@/types/evcc";
+import { CURRENCY } from "@/types/evcc";
 import {
 	handleError,
 	type DeviceValues,
@@ -228,6 +233,7 @@ export default defineComponent({
 		showMainContent: { type: Boolean, default: true },
 		// Optional: usage parameter for loadProducts (e.g., meter type: "pv", "battery", "aux", "ext")
 		usage: String,
+		currency: { type: String as PropType<CURRENCY>, default: CURRENCY.EUR },
 		// Optional: custom product name computation
 		getProductName: Function as PropType<
 			(values: DeviceValues, templateName: string | null) => string
@@ -495,7 +501,6 @@ export default defineComponent({
 		},
 		values: {
 			handler() {
-				this.test = initialTestState();
 				this.updateServiceValues();
 			},
 			deep: true,
@@ -666,7 +671,6 @@ export default defineComponent({
 			return this.device.test(this.id, this.apiData);
 		},
 		async update(force = false) {
-			console.log("update called", { force, isUnknown: this.test.isUnknown, id: this.id });
 			if (this.test.isUnknown && !force) {
 				const success = await performTest(
 					this.test,
@@ -680,7 +684,6 @@ export default defineComponent({
 			}
 			this.saving = true;
 			try {
-				console.log("calling device.update", this.apiData);
 				await this.device.update(this.id!, this.apiData, force);
 				console.log("update succeeded, closing modal");
 				this.saving = false;