From 617c06b3763a35d47b39ec2828a790d2181b2ba8 Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Mon, 28 Apr 2025 22:35:48 +0200
Subject: [PATCH] Chore: Typescript: Rewrite Footer (#20836)

---
 assets/js/components/Footer/Footer.stories.js | 58 -----------------
 assets/js/components/Footer/Footer.stories.ts | 59 ++++++++++++++++++
 assets/js/components/Footer/Footer.vue        |  7 ++-
 assets/js/components/Footer/Logo.vue          |  8 ++-
 .../Footer/OfflineIndicator.stories.js        | 32 ----------
 .../Footer/OfflineIndicator.stories.ts        | 33 ++++++++++
 .../js/components/Footer/OfflineIndicator.vue | 10 +--
 .../js/components/Footer/Version.stories.js   | 61 ------------------
 .../js/components/Footer/Version.stories.ts   | 62 +++++++++++++++++++
 assets/js/components/Footer/Version.vue       | 13 ++--
 assets/js/types/evcc.ts                       |  9 ++-
 11 files changed, 183 insertions(+), 169 deletions(-)
 delete mode 100644 assets/js/components/Footer/Footer.stories.js
 create mode 100644 assets/js/components/Footer/Footer.stories.ts
 delete mode 100644 assets/js/components/Footer/OfflineIndicator.stories.js
 create mode 100644 assets/js/components/Footer/OfflineIndicator.stories.ts
 delete mode 100644 assets/js/components/Footer/Version.stories.js
 create mode 100644 assets/js/components/Footer/Version.stories.ts

diff --git a/assets/js/components/Footer/Footer.stories.js b/assets/js/components/Footer/Footer.stories.js
deleted file mode 100644
index 874d2292d..000000000
--- a/assets/js/components/Footer/Footer.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import Footer from "./Footer.vue";
-
-export default {
-  title: "Footer/Footer",
-  component: Footer,
-  argTypes: {
-    version: { control: "object" },
-    savings: { control: "object" },
-  },
-};
-
-const Template = (args) => ({
-  components: { Footer },
-  setup() {
-    return { args };
-  },
-  template: '<Footer v-bind="args" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  version: {
-    installed: "0.401",
-    available: "0.401",
-  },
-  savings: {
-    statistics: {
-      "30d": { solarPercentage: 50 },
-    },
-  },
-};
-
-export const UpdateNightly = Template.bind({});
-UpdateNightly.args = {
-  version: {
-    installed: "0.400",
-    available: "0.400",
-    commit: "5ce7be4",
-  },
-  savings: {
-    statistics: {
-      "30d": { solarPercentage: 22 },
-    },
-  },
-};
-
-export const UpdateAvailable = Template.bind({});
-UpdateAvailable.args = {
-  version: {
-    installed: "0.400",
-    available: "0.500",
-  },
-  savings: {
-    statistics: {
-      "30d": { solarPercentage: 100 },
-    },
-  },
-};
diff --git a/assets/js/components/Footer/Footer.stories.ts b/assets/js/components/Footer/Footer.stories.ts
new file mode 100644
index 000000000..3a0a56111
--- /dev/null
+++ b/assets/js/components/Footer/Footer.stories.ts
@@ -0,0 +1,59 @@
+import Footer from "./Footer.vue";
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+	title: "Footer/Footer",
+	component: Footer,
+	argTypes: {
+		version: { control: "object" },
+		savings: { control: "object" },
+	},
+} as Meta<typeof Footer>;
+
+const Template: StoryFn<typeof Footer> = (args) => ({
+	components: { Footer },
+	setup() {
+		return { args };
+	},
+	template: '<Footer v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	version: {
+		installed: "0.401",
+		available: "0.401",
+	},
+	savings: {
+		statistics: {
+			"30d": { solarPercentage: 50 },
+		},
+	},
+};
+
+export const UpdateNightly = Template.bind({});
+UpdateNightly.args = {
+	version: {
+		installed: "0.400",
+		available: "0.400",
+		commit: "5ce7be4",
+	},
+	savings: {
+		statistics: {
+			"30d": { solarPercentage: 22 },
+		},
+	},
+};
+
+export const UpdateAvailable = Template.bind({});
+UpdateAvailable.args = {
+	version: {
+		installed: "0.400",
+		available: "0.500",
+	},
+	savings: {
+		statistics: {
+			"30d": { solarPercentage: 100 },
+		},
+	},
+};
diff --git a/assets/js/components/Footer/Footer.vue b/assets/js/components/Footer/Footer.vue
index 4fcaaf99f..af84b8924 100644
--- a/assets/js/components/Footer/Footer.vue
+++ b/assets/js/components/Footer/Footer.vue
@@ -9,18 +9,19 @@
 	</footer>
 </template>
 
-<script>
+<script lang="ts">
 import "@h2d2/shopicons/es/filled/testtube";
 
 import Version from "./Version.vue";
 import Savings from "../Savings/Savings.vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
 	name: "Footer",
 	components: { Version, Savings },
 	props: {
 		version: Object,
 		savings: Object,
 	},
-};
+});
 </script>
diff --git a/assets/js/components/Footer/Logo.vue b/assets/js/components/Footer/Logo.vue
index 30e96a2eb..39db8d856 100644
--- a/assets/js/components/Footer/Logo.vue
+++ b/assets/js/components/Footer/Logo.vue
@@ -22,10 +22,12 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Logo",
-};
+});
 </script>
 <style scoped>
 .letter {
diff --git a/assets/js/components/Footer/OfflineIndicator.stories.js b/assets/js/components/Footer/OfflineIndicator.stories.js
deleted file mode 100644
index f09c2945d..000000000
--- a/assets/js/components/Footer/OfflineIndicator.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import OfflineIndicator from "./OfflineIndicator.vue";
-
-export default {
-  title: "Footer/OfflineIndicator",
-  component: OfflineIndicator,
-  argTypes: {
-    offline: { control: "boolean" },
-    fatal: { control: "object" },
-  },
-};
-
-const Template = (args) => ({
-  components: { OfflineIndicator },
-  setup() {
-    return { args };
-  },
-  template: '<OfflineIndicator v-bind="args" />',
-});
-
-export const Offline = Template.bind({});
-Offline.args = {
-  offline: true,
-};
-
-export const Fatal = Template.bind({});
-Fatal.args = {
-  fatal: {
-    error: `cannot create charger 'wallbox_cphl': cannot create charger type 'template': cannot create
-charger type 'hardybarth-ecbl: Post http://192.168.2.219/api/v1/chargecontrols/1/mode: context deadline exceeded (Client.Timeout
-exceeded while awaiting headers)`,
-  },
-};
diff --git a/assets/js/components/Footer/OfflineIndicator.stories.ts b/assets/js/components/Footer/OfflineIndicator.stories.ts
new file mode 100644
index 000000000..0da58e910
--- /dev/null
+++ b/assets/js/components/Footer/OfflineIndicator.stories.ts
@@ -0,0 +1,33 @@
+import OfflineIndicator from "./OfflineIndicator.vue";
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+	title: "Footer/OfflineIndicator",
+	component: OfflineIndicator,
+	argTypes: {
+		offline: { control: "boolean" },
+		fatal: { control: "object" },
+	},
+} as Meta<typeof OfflineIndicator>;
+
+const Template: StoryFn<typeof OfflineIndicator> = (args) => ({
+	components: { OfflineIndicator },
+	setup() {
+		return { args };
+	},
+	template: '<OfflineIndicator v-bind="args" />',
+});
+
+export const Offline = Template.bind({});
+Offline.args = {
+	offline: true,
+};
+
+export const Fatal = Template.bind({});
+Fatal.args = {
+	fatal: {
+		error: `cannot create charger 'wallbox_cphl': cannot create charger type 'template': cannot create
+charger type 'hardybarth-ecbl: Post http://192.168.2.219/api/v1/chargecontrols/1/mode: context deadline exceeded (Client.Timeout
+exceeded while awaiting headers)`,
+	},
+};
diff --git a/assets/js/components/Footer/OfflineIndicator.vue b/assets/js/components/Footer/OfflineIndicator.vue
index 5cd91cb97..96cfc4cba 100644
--- a/assets/js/components/Footer/OfflineIndicator.vue
+++ b/assets/js/components/Footer/OfflineIndicator.vue
@@ -72,13 +72,15 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/car1";
 import CloudOffline from "../MaterialIcon/CloudOffline.vue";
 import Sync from "../MaterialIcon/Sync.vue";
 import restart, { performRestart, restartComplete } from "../../restart.js";
+import type { FatalError } from "assets/js/types/evcc.js";
 
-export default {
+export default defineComponent({
 	name: "OfflineIndicator",
 	components: {
 		CloudOffline,
@@ -86,7 +88,7 @@ export default {
 	},
 	props: {
 		offline: Boolean,
-		fatal: Object,
+		fatal: Object as PropType<FatalError>,
 	},
 	data() {
 		return { dismissed: false };
@@ -129,7 +131,7 @@ export default {
 			performRestart();
 		},
 	},
-};
+});
 </script>
 <style scoped>
 .restart {
diff --git a/assets/js/components/Footer/Version.stories.js b/assets/js/components/Footer/Version.stories.js
deleted file mode 100644
index 8b9a5d95f..000000000
--- a/assets/js/components/Footer/Version.stories.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import Version from "./Version.vue";
-
-const releaseNotes =
-  '<h1>0.141</h1><p>Bug fixes:</p><ul><li>Withdraw Kia and Hyundai apis (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="817450535" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/699" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/699/hovercard" href="https://github.com/evcc-io/evcc/pull/699">#699</a>)</li><li>Simplify Tesla integration and fix upstream changes (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="817525274" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/700" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/700/hovercard" href="https://github.com/evcc-io/evcc/pull/700">#700</a>)</li><li>SHM: Check connected status (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="811567860" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/673" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/673/hovercard" href="https://github.com/evcc-io/evcc/pull/673">#673</a>)</li></ul><p>Enhancements:</p><ul><li>Add Seat api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="812885392" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/681" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/681/hovercard" href="https://github.com/evcc-io/evcc/pull/681">#681</a>)</li><li>Add Skoda api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="812883796" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/680" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/680/hovercard" href="https://github.com/evcc-io/evcc/pull/680">#680</a>)</li><li>Add Peugeot/Opel/Citroen api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="815612446" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/692" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/692/hovercard" href="https://github.com/evcc-io/evcc/pull/692">#692</a>)</li><li>KEBA: Support mA current resolution adjustments (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="801358501" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/646" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/646/hovercard" href="https://github.com/evcc-io/evcc/pull/646">#646</a>)</li></ul>';
-
-export default {
-  title: "Footer/Version",
-  component: Version,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    installed: { control: "text" },
-    available: { control: "text" },
-    commit: { control: "text" },
-    releaseNotes: { control: "text" },
-    hasUpdater: { control: "boolean" },
-  },
-};
-
-const Template = (args) => ({
-  components: { Version },
-  setup() {
-    return { args };
-  },
-  template: '<Version v-bind="args" />',
-});
-
-export const Latest = Template.bind({});
-Latest.args = {
-  installed: "0.141",
-  available: "0.141",
-};
-
-export const Nightly = Template.bind({});
-Nightly.args = {
-  installed: "0.141",
-  available: "0.141",
-  commit: "5ce7be4",
-};
-
-export const UpdateAvailable = Template.bind({});
-UpdateAvailable.args = {
-  installed: "0.141",
-  available: "0.142",
-  releaseNotes,
-};
-
-export const AutoUpdater = Template.bind({});
-AutoUpdater.args = {
-  installed: "0.141",
-  available: "0.142",
-  releaseNotes,
-  hasUpdater: true,
-};
-
-export const NoReleaseNotes = Template.bind({});
-NoReleaseNotes.args = {
-  installed: "0.141",
-  available: "0.142",
-};
diff --git a/assets/js/components/Footer/Version.stories.ts b/assets/js/components/Footer/Version.stories.ts
new file mode 100644
index 000000000..a4d245c0d
--- /dev/null
+++ b/assets/js/components/Footer/Version.stories.ts
@@ -0,0 +1,62 @@
+import Version from "./Version.vue";
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+const releaseNotes =
+	'<h1>0.141</h1><p>Bug fixes:</p><ul><li>Withdraw Kia and Hyundai apis (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="817450535" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/699" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/699/hovercard" href="https://github.com/evcc-io/evcc/pull/699">#699</a>)</li><li>Simplify Tesla integration and fix upstream changes (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="817525274" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/700" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/700/hovercard" href="https://github.com/evcc-io/evcc/pull/700">#700</a>)</li><li>SHM: Check connected status (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="811567860" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/673" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/673/hovercard" href="https://github.com/evcc-io/evcc/pull/673">#673</a>)</li></ul><p>Enhancements:</p><ul><li>Add Seat api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="812885392" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/681" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/681/hovercard" href="https://github.com/evcc-io/evcc/pull/681">#681</a>)</li><li>Add Skoda api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="812883796" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/680" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/680/hovercard" href="https://github.com/evcc-io/evcc/pull/680">#680</a>)</li><li>Add Peugeot/Opel/Citroen api (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="815612446" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/692" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/692/hovercard" href="https://github.com/evcc-io/evcc/pull/692">#692</a>)</li><li>KEBA: Support mA current resolution adjustments (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="801358501" data-permission-text="Title is private" data-url="https://github.com/evcc-io/evcc/issues/646" data-hovercard-type="pull_request" data-hovercard-url="/evcc-io/evcc/pull/646/hovercard" href="https://github.com/evcc-io/evcc/pull/646">#646</a>)</li></ul>';
+
+export default {
+	title: "Footer/Version",
+	component: Version,
+	parameters: {
+		layout: "centered",
+	},
+	argTypes: {
+		installed: { control: "text" },
+		available: { control: "text" },
+		commit: { control: "text" },
+		releaseNotes: { control: "text" },
+		hasUpdater: { control: "boolean" },
+	},
+} as Meta<typeof Version>;
+
+const Template: StoryFn<typeof Version> = (args) => ({
+	components: { Version },
+	setup() {
+		return { args };
+	},
+	template: '<Version v-bind="args" />',
+});
+
+export const Latest = Template.bind({});
+Latest.args = {
+	installed: "0.141",
+	available: "0.141",
+};
+
+export const Nightly = Template.bind({});
+Nightly.args = {
+	installed: "0.141",
+	available: "0.141",
+	commit: "5ce7be4",
+};
+
+export const UpdateAvailable = Template.bind({});
+UpdateAvailable.args = {
+	installed: "0.141",
+	available: "0.142",
+	releaseNotes,
+};
+
+export const AutoUpdater = Template.bind({});
+AutoUpdater.args = {
+	installed: "0.141",
+	available: "0.142",
+	releaseNotes,
+	hasUpdater: true,
+};
+
+export const NoReleaseNotes = Template.bind({});
+NoReleaseNotes.args = {
+	installed: "0.141",
+	available: "0.142",
+};
diff --git a/assets/js/components/Footer/Version.vue b/assets/js/components/Footer/Version.vue
index 2319c1602..cb6d608c0 100644
--- a/assets/js/components/Footer/Version.vue
+++ b/assets/js/components/Footer/Version.vue
@@ -125,14 +125,15 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
 import api from "../../api.js";
 import Logo from "./Logo.vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
 	name: "Version",
 	components: { Logo },
 	props: {
@@ -173,17 +174,19 @@ export default {
 				this.updateStatus = `${this.$t("footer.version.modalUpdateStatusStart")} ${e}`;
 			}
 		},
-		releaseNotesUrl(version) {
+		releaseNotesUrl(version?: string) {
 			return version == "0.0.0"
 				? `https://github.com/evcc-io/evcc/releases`
 				: `https://github.com/evcc-io/evcc/releases/tag/${version}`;
 		},
 		openModal() {
-			const modal = Modal.getOrCreateInstance(document.getElementById("updateModal"));
+			const modal = Modal.getOrCreateInstance(
+				document.getElementById("updateModal") as HTMLElement
+			);
 			modal.show();
 		},
 	},
-};
+});
 </script>
 
 <style scoped>
diff --git a/assets/js/types/evcc.ts b/assets/js/types/evcc.ts
index 7b096abeb..816bd2cc9 100644
--- a/assets/js/types/evcc.ts
+++ b/assets/js/types/evcc.ts
@@ -7,15 +7,18 @@ declare global {
 	}
 }
 
+export interface FatalError {
+	error: any;
+	class?: any;
+}
+
 export interface State {
 	offline: boolean;
 	startup?: boolean;
 	loadpoints: [];
 	forecast?: Forecast;
 	currency?: CURRENCY;
-	fatal?: {
-		error: any;
-	};
+	fatal?: FatalError;
 }
 export interface LoadpointCompact {
 	icon: string;