chore: typescript: Rewrite Battery (#20471)

Co-authored-by: Michael Geers <michael@geers.tv>

assets/js/components/Battery/BatterySettingsModal.vue

@@ -242,7 +242,7 @@
 			</div>
 		</div>
 		<SmartCostLimit
-			v-if="modalVisible"
+			v-if="isModalVisible"
 			v-show="gridTabActive"
 			v-bind="smartCostLimitProps"
 			:possible="gridChargePossible"
@@ -250,7 +250,7 @@
 	</GenericModal>
 </template>
 
-<script>
+<script lang="ts">
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/home";
@@ -261,18 +261,20 @@ import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
 import collector from "../../mixins/collector.js";
 import api from "../../api.js";
 import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import { defineComponent, type PropType } from "vue";
+import type { Battery, SelectOption } from "assets/js/types/evcc.js";
 
-export default {
+export default defineComponent({
 	name: "BatterySettingsModal",
 	components: { SmartCostLimit, CustomSelect, GenericModal },
 	mixins: [formatter, collector],
 	props: {
-		bufferSoc: Number,
-		prioritySoc: Number,
-		batterySoc: Number,
-		bufferStartSoc: Number,
+		bufferSoc: { type: Number, default: 100 },
+		prioritySoc: { type: Number, default: 0 },
+		batterySoc: { type: Number, default: 0 },
+		bufferStartSoc: { type: Number, default: 0 },
 		batteryDischargeControl: Boolean,
-		battery: { type: Array, default: () => [] },
+		battery: { type: Array as PropType<Battery[]>, default: () => [] },
 		batteryGridChargeLimit: { type: Number, default: null },
 		smartCostType: String,
 		tariffGrid: Number,
@@ -342,7 +344,7 @@ export default {
 			});
 			return options;
 		},
-		bufferStartOption() {
+		bufferStartOption(): SelectOption<number> | undefined {
 			return this.bufferStartOptions.find((option) => this.bufferStartSoc >= option.value);
 		},
 		selectedBufferStartName() {
@@ -435,11 +437,11 @@ export default {
 		modalInvisible() {
 			this.isModalVisible = false;
 		},
-		changeBufferStart($event) {
-			this.setBufferStartSoc(parseInt($event.target.value, 10));
+		changeBufferStart($event: Event) {
+			this.setBufferStartSoc(parseInt(($event.target as HTMLInputElement).value, 10));
 		},
-		changePrioritySoc($event) {
-			const soc = parseInt($event.target.value, 10);
+		changePrioritySoc($event: Event) {
+			const soc = parseInt(($event.target as HTMLInputElement).value, 10);
 			if (soc > (this.bufferSoc || 100)) {
 				this.saveBufferSoc(soc);
 				if (soc > this.bufferStartSoc && this.bufferStartSoc > 0) {
@@ -455,18 +457,18 @@ export default {
 			const nextIndex = index === 0 ? options.length - 1 : index - 1;
 			this.setBufferStartSoc(options[nextIndex]);
 		},
-		async setBufferStartSoc(soc) {
+		async setBufferStartSoc(soc: number) {
 			this.selectedBufferStartSoc = soc;
 			await this.saveBufferStartSoc(this.selectedBufferStartSoc);
 		},
-		async changeBufferSoc($event) {
-			const soc = parseInt($event.target.value, 10);
+		async changeBufferSoc($event: Event) {
+			const soc = parseInt(($event.target as HTMLInputElement).value, 10);
 			if (soc > this.bufferStartSoc && this.bufferStartSoc > 0) {
 				await this.setBufferStartSoc(soc);
 			}
 			await this.saveBufferSoc(soc);
 		},
-		async savePrioritySoc(soc) {
+		async savePrioritySoc(soc: number) {
 			this.selectedPrioritySoc = soc;
 			try {
 				await api.post(`prioritysoc/${encodeURIComponent(soc)}`);
@@ -474,7 +476,7 @@ export default {
 				console.error(err);
 			}
 		},
-		async saveBufferSoc(soc) {
+		async saveBufferSoc(soc: number) {
 			this.selectedBufferSoc = soc;
 			try {
 				await api.post(`buffersoc/${encodeURIComponent(soc)}`);
@@ -482,36 +484,38 @@ export default {
 				console.error(err);
 			}
 		},
-		async saveBufferStartSoc(soc) {
+		async saveBufferStartSoc(soc: number) {
 			try {
 				await api.post(`bufferstartsoc/${encodeURIComponent(soc)}`);
 			} catch (err) {
 				console.error(err);
 			}
 		},
-		iconStyle(height) {
+		iconStyle(height: number) {
 			let scale = 1;
 			if (height <= 10) scale = 0.75;
 			if (height <= 5) scale = 0;
 			return { transform: `scale(${scale})` };
 		},
-		fmtSoc(soc) {
+		fmtSoc(soc: number) {
 			return this.fmtPercentage(soc);
 		},
-		async changeDischargeControl(e) {
+		async changeDischargeControl(e: Event) {
 			try {
-				await api.post(`batterydischargecontrol/${e.target.checked ? "true" : "false"}`);
+				await api.post(
+					`batterydischargecontrol/${(e.target as HTMLInputElement).checked ? "true" : "false"}`
+				);
 			} catch (err) {
 				console.error(err);
 			}
 		},
-		getBufferStartName(value) {
+		getBufferStartName(value: number) {
 			const key = value === 0 ? "never" : value === 100 ? "full" : "above";
 			const soc = this.fmtSoc(value);
 			return this.$t(`batterySettings.bufferStart.${key}`, { soc });
 		},
 	},
-};
+});
 </script>
 
 <style scoped>

assets/js/types/evcc.ts

@@ -22,6 +22,13 @@ export enum CURRENCY {
 	USD = "USD",
 	DKK = "DKK",
 }
+export interface Battery {
+	power: number;
+	soc: number;
+	controllable: boolean;
+	capacity: number; // 0 when not specified
+	title?: string;
+}
 
 export interface Vehicle {
 	name: string;