Sessions: ui refinement, mobile table, breadcrumb, filters (evcc-io#8793

)

assets/js/components/CustomSelect.vue

@@ -0,0 +1,48 @@
+<template>
+	<label class="position-relative d-block">
+		<select :value="selected" class="custom-select" @change="change">
+			<option
+				v-for="{ name, value, count } in options"
+				:key="value"
+				:value="value"
+				:disabled="count === 0"
+			>
+				{{ text(name, count) }}
+			</option>
+		</select>
+		<slot></slot>
+	</label>
+</template>
+
+<script>
+export default {
+	name: "CustomSelect",
+	props: {
+		options: { type: Array },
+		selected: { type: String },
+	},
+	emits: ["change"],
+	methods: {
+		text(name, count) {
+			if (count === undefined) {
+				return name;
+			}
+			return `${name} (${count})`;
+		},
+		change(event) {
+			this.$emit("change", event);
+		},
+	},
+};
+</script>
+<style scoped>
+.custom-select {
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	position: absolute;
+	opacity: 0;
+	-webkit-appearance: menulist-button;
+}
+</style>

assets/js/components/Savings.vue

@@ -175,9 +175,8 @@ export default {
 			return Math.round(this.selfConsumptionPercent) || 0;
 		},
 		effectivePriceFormatted() {
-			const [value, unit] = this.fmtPricePerKWh(this.effectivePrice, this.currency).split(
-				" "
-			);
+			const value = this.fmtPricePerKWh(this.effectivePrice, this.currency, false, false);
+			const unit = this.pricePerKWhUnit(this.currency);
 			return { value, unit };
 		},
 		startDate() {

assets/js/mixins/formatter.js

@@ -197,22 +197,31 @@ export default {
       const symbols = { EUR: "€", USD: "$" };
       return symbols[currency] || currency;
     },
-    fmtPricePerKWh: function (amout = 0, currency = "EUR", short = false) {
-      let unit = currency;
+    fmtPricePerKWh: function (amout = 0, currency = "EUR", short = false, withUnit = true) {
       let value = amout;
       let minimumFractionDigits = 1;
       let maximumFractionDigits = 3;
       if (["EUR", "USD"].includes(currency)) {
         value *= 100;
-        unit = "ct";
         minimumFractionDigits = 1;
         maximumFractionDigits = 1;
       }
-      return `${new Intl.NumberFormat(this.$i18n.locale, {
+      const price = new Intl.NumberFormat(this.$i18n.locale, {
         style: "decimal",
         minimumFractionDigits,
         maximumFractionDigits,
-      }).format(value)} ${unit}${short ? "" : "/kWh"}`;
+      }).format(value);
+      if (withUnit) {
+        return `${price} ${this.pricePerKWhUnit(currency, short)}`;
+      }
+      return price;
+    },
+    pricePerKWhUnit: function (currency = "EUR", short = false) {
+      let unit = currency;
+      if (["EUR", "USD"].includes(currency)) {
+        unit = "ct";
+      }
+      return `${unit}${short ? "" : "/kWh"}`;
     },
     fmtTimeAgo: function (elapsed) {
       const units = {

assets/js/mixins/formatter.test.js

@@ -26,3 +26,23 @@ describe("fmtKWh", () => {
     expect(fmt.fmtKWh(56789.123, false, true, 2)).eq("56.789,12 Wh");
   });
 });
+
+describe("fmtPricePerKWh", () => {
+  test("should format with units", () => {
+    expect(fmt.fmtPricePerKWh(0.2, "EUR")).eq("20,0 ct/kWh");
+    expect(fmt.fmtPricePerKWh(0.2, "EUR", true)).eq("20,0 ct");
+    expect(fmt.fmtPricePerKWh(0.234, "USD")).eq("23,4 ct/kWh");
+    expect(fmt.fmtPricePerKWh(1234, "SEK")).eq("1.234,0 SEK/kWh");
+    expect(fmt.fmtPricePerKWh(0.2, "EUR", false, false)).eq("20,0");
+  });
+});
+
+describe("pricePerKWhUnit", () => {
+  test("should return correct unit", () => {
+    expect(fmt.pricePerKWhUnit("EUR")).eq("ct/kWh");
+    expect(fmt.pricePerKWhUnit("EUR", true)).eq("ct");
+    expect(fmt.pricePerKWhUnit("USD")).eq("ct/kWh");
+    expect(fmt.pricePerKWhUnit("SEK")).eq("SEK/kWh");
+    expect(fmt.pricePerKWhUnit("SEK", true)).eq("SEK");
+  });
+});

assets/js/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app overflow-hidden">
+	<div class="app">
 		<metainfo>
 			<template #title="{ content }">{{ content ? `${content} | evcc` : `evcc` }}</template>
 		</metainfo>