From b937e131f9506371aae8b0aee06c47a46b6c8b63 Mon Sep 17 00:00:00 2001 From: Maschga <88616799+Maschga@users.noreply.github.com> Date: Fri, 21 Mar 2025 15:00:50 +0100 Subject: [PATCH] Configure Typescript (#19774) Co-authored-by: Michael Geers --- .gitignore | 2 +- .vscode/extensions.json | 1 + assets/js/app.js | 12 +- assets/js/colors.js | 75 - assets/js/colors.ts | 89 + assets/js/components/Auth/PasswordModal.vue | 20 +- .../Battery/BatterySettingsModal.vue | 6 +- .../js/components/ChargingPlans/Arrival.vue | 14 +- .../components/ChargingPlans/ChargingPlan.vue | 52 +- .../ChargingPlans/PlanRepeatingSettings.vue | 20 +- .../ChargingPlans/PlanStaticSettings.vue | 32 +- .../ChargingPlans/PlansRepeatingSettings.vue | 10 +- .../ChargingPlans/PlansSettings.vue | 54 +- .../js/components/ChargingPlans/Warnings.vue | 16 +- .../js/components/Energyflow/Energyflow.vue | 44 +- assets/js/components/Energyflow/Entry.vue | 16 +- .../components/Energyflow/Visualization.vue | 30 +- .../js/components/Footer/OfflineIndicator.vue | 2 +- assets/js/components/Footer/Version.vue | 10 +- assets/js/components/Forecast/ActiveSlot.vue | 16 +- assets/js/components/Forecast/Chart.vue | 57 +- assets/js/components/Forecast/Details.vue | 20 +- .../js/components/Forecast/ForecastModal.vue | 9 +- assets/js/components/Forecast/TypeSelect.vue | 6 +- .../GlobalSettings/UserInterfaceSettings.vue | 2 +- assets/js/components/Helper/GenericModal.vue | 2 +- assets/js/components/Loadpoints/Loadpoint.vue | 58 +- .../js/components/Loadpoints/Loadpoints.vue | 2 +- assets/js/components/Loadpoints/Mode.vue | 8 +- .../js/components/Loadpoints/SessionInfo.vue | 6 +- assets/js/components/Loadpoints/session.ts | 12 + .../js/components/Loadpoints/sessionInfo.js | 12 - assets/js/components/MultiIcon/MultiIcon.vue | 2 +- assets/js/components/Savings/Savings.vue | 2 +- assets/js/components/Savings/Sponsor.vue | 2 +- .../components/Sessions/CostHistoryChart.vue | 4 +- .../Sessions/EnergyHistoryChart.vue | 6 +- .../Sessions/SessionDetailsModal.vue | 12 +- assets/js/components/Site/Site.vue | 22 +- .../js/components/Tariff/SmartCostLimit.vue | 4 +- assets/js/components/Top/Header.vue | 2 +- assets/js/components/Top/Navigation.vue | 4 +- assets/js/components/Top/Notifications.vue | 10 +- .../js/components/VehicleIcon/VehicleIcon.vue | 8 +- .../components/Vehicles/LimitEnergySelect.vue | 10 +- .../js/components/Vehicles/LimitSocSelect.vue | 16 +- assets/js/components/Vehicles/Soc.vue | 44 +- assets/js/components/Vehicles/Status.vue | 2 +- assets/js/components/Vehicles/Title.vue | 8 +- assets/js/components/Vehicles/Vehicle.vue | 42 +- assets/js/mixins/collector.js | 2 +- assets/js/mixins/formatter.js | 418 ---- assets/js/mixins/formatter.ts | 394 ++++ assets/js/mixins/icon.js | 2 +- assets/js/store.js | 57 - assets/js/store.ts | 66 + assets/js/types/evcc.ts | 17 + assets/js/types/vue.d.ts | 10 + assets/js/utils/deepClone.js | 3 - assets/js/utils/deepClone.ts | 3 + assets/js/utils/forecast.ts | 23 +- assets/js/views/App.vue | 22 +- assets/js/views/Energy.vue | 26 +- assets/js/views/Main.vue | 2 +- assets/js/views/Sessions.vue | 4 +- package-lock.json | 1896 ++++++----------- package.json | 4 +- tsconfig.json | 41 +- 68 files changed, 1709 insertions(+), 2196 deletions(-) delete mode 100644 assets/js/colors.js create mode 100644 assets/js/colors.ts create mode 100644 assets/js/components/Loadpoints/session.ts delete mode 100644 assets/js/components/Loadpoints/sessionInfo.js delete mode 100644 assets/js/mixins/formatter.js create mode 100644 assets/js/mixins/formatter.ts delete mode 100644 assets/js/store.js create mode 100644 assets/js/store.ts create mode 100644 assets/js/types/evcc.ts create mode 100644 assets/js/types/vue.d.ts delete mode 100644 assets/js/utils/deepClone.js create mode 100644 assets/js/utils/deepClone.ts diff --git a/.gitignore b/.gitignore index f63292a08..0f043ebac 100644 --- a/.gitignore +++ b/.gitignore @@ -43,5 +43,5 @@ asset-stats.html /playwright/.cache/ .gitpod.yml /evcc.db - +/tsconfig.tsbuildinfo *storybook.log diff --git a/.vscode/extensions.json b/.vscode/extensions.json index dc9cabb64..7e9078b78 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,5 +4,6 @@ "vitest.explorer", "golang.go", "esbenp.prettier-vscode", + "yoavbls.pretty-ts-errors", ] } diff --git a/assets/js/app.js b/assets/js/app.js index abbb32f1d..164052c78 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -22,12 +22,12 @@ const app = createApp({ return { notifications: [], offline: false }; }, watch: { - offline: function (value) { + offline(value) { console.log(`we are ${value ? "offline" : "online"}`); }, }, methods: { - raise: function (msg) { + raise(msg) { if (this.offline) return; if (!msg.level) msg.level = "error"; const now = new Date(); @@ -46,19 +46,19 @@ const app = createApp({ ]; } }, - clear: function () { + clear() { this.notifications = []; }, - setOnline: function () { + setOnline() { this.offline = false; sendToApp({ type: "online" }); }, - setOffline: function () { + setOffline() { this.offline = true; sendToApp({ type: "offline" }); }, }, - render: function () { + render() { return h(App, { notifications: this.notifications, offline: this.offline }); }, }); diff --git a/assets/js/colors.js b/assets/js/colors.js deleted file mode 100644 index 25f2be076..000000000 --- a/assets/js/colors.js +++ /dev/null @@ -1,75 +0,0 @@ -import { reactive } from "vue"; - -// alternatives -// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"]; -// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"]; -// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"]; -// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF", -// const COLORS = [ "#0077B6FF", "#00B4D8FF", "#90E0EFFF", "#40A578FF", "#9DDE8BFF", "#F8961EFF", "#F9C74FFF", "#E6FF94FF"]; - -const colors = reactive({ - text: null, - muted: null, - border: null, - self: null, - grid: null, - co2PerKWh: null, - pricePerKWh: null, - price: null, - co2: null, - background: null, - light: null, - selfPalette: ["#0FDE41FF", "#FFBD2FFF", "#FD6158FF", "#03C1EFFF", "#0F662DFF", "#FF922EFF"], - palette: [ - "#03C1EFFF", - "#FD6158FF", - "#31AB4AFF", - "#41517AFF", - "#FF922EFF", - "#0F662DFF", - "#0470D4FF", - "#FFBD2FFF", - "#77C93EFF", - "#4E1D10FF", - "#0AAFBFFF", - "#813504FF", - ], -}); - -export const dimColor = (color) => { - return color.toLowerCase().replace(/ff$/, "20"); -}; - -export const lighterColor = (color) => { - return color.toLowerCase().replace(/ff$/, "aa"); -}; - -export const fullColor = (color) => { - return color.toLowerCase().replace(/20$/, "ff"); -}; - -function updateCssColors() { - const style = window.getComputedStyle(document.documentElement); - colors.text = style.getPropertyValue("--evcc-default-text"); - colors.muted = style.getPropertyValue("--bs-gray-medium"); - colors.border = style.getPropertyValue("--bs-border-color-translucent"); - colors.self = style.getPropertyValue("--evcc-self"); - colors.grid = style.getPropertyValue("--evcc-grid"); - colors.price = style.getPropertyValue("--evcc-price"); - colors.co2 = style.getPropertyValue("--evcc-co2"); - colors.background = style.getPropertyValue("--evcc-background"); - colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium"); - colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium"); - colors.light = style.getPropertyValue("--bs-gray-light"); -} - -// update colors on theme change -const darkModeMatcher = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)"); -if (darkModeMatcher && darkModeMatcher.addEventListener) { - darkModeMatcher.addEventListener("change", updateCssColors); -} -// initialize colors -updateCssColors(); -window.requestAnimationFrame(updateCssColors); - -export default colors; diff --git a/assets/js/colors.ts b/assets/js/colors.ts new file mode 100644 index 000000000..649598ae9 --- /dev/null +++ b/assets/js/colors.ts @@ -0,0 +1,89 @@ +import { reactive } from "vue"; + +// alternatives +// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"]; +// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"]; +// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"]; +// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF", +// const COLORS = [ "#0077B6FF", "#00B4D8FF", "#90E0EFFF", "#40A578FF", "#9DDE8BFF", "#F8961EFF", "#F9C74FFF", "#E6FF94FF"]; + +const colors: { + text: string | null; + muted: string | null; + border: string | null; + self: string | null; + grid: string | null; + co2PerKWh: string | null; + pricePerKWh: string | null; + price: string | null; + co2: string | null; + background: string | null; + light: string | null; + selfPalette: string[]; + palette: string[]; +} = reactive({ + text: null, + muted: null, + border: null, + self: null, + grid: null, + co2PerKWh: null, + pricePerKWh: null, + price: null, + co2: null, + background: null, + light: null, + selfPalette: ["#0FDE41FF", "#FFBD2FFF", "#FD6158FF", "#03C1EFFF", "#0F662DFF", "#FF922EFF"], + palette: [ + "#03C1EFFF", + "#FD6158FF", + "#31AB4AFF", + "#41517AFF", + "#FF922EFF", + "#0F662DFF", + "#0470D4FF", + "#FFBD2FFF", + "#77C93EFF", + "#4E1D10FF", + "#0AAFBFFF", + "#813504FF", + ], +}); + +export const dimColor = (color: string | null) => { + return color?.toLowerCase().replace(/ff$/, "20"); +}; + +export const lighterColor = (color: string | null) => { + return color?.toLowerCase().replace(/ff$/, "aa"); +}; + +export const fullColor = (color: string | null) => { + return color?.toLowerCase().replace(/20$/, "ff"); +}; + +function updateCssColors() { + const style = window.getComputedStyle(document.documentElement); + colors.text = style.getPropertyValue("--evcc-default-text"); + colors.muted = style.getPropertyValue("--bs-gray-medium"); + colors.border = style.getPropertyValue("--bs-border-color-translucent"); + colors.self = style.getPropertyValue("--evcc-self"); + colors.grid = style.getPropertyValue("--evcc-grid"); + colors.price = style.getPropertyValue("--evcc-price"); + colors.co2 = style.getPropertyValue("--evcc-co2"); + colors.background = style.getPropertyValue("--evcc-background"); + colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium"); + colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium"); + colors.light = style.getPropertyValue("--bs-gray-light"); +} + +// update colors on theme change +const darkModeMatcher = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)"); +if (darkModeMatcher && darkModeMatcher.addEventListener) { + darkModeMatcher.addEventListener("change", updateCssColors); +} +// initialize colors +updateCssColors(); +window.requestAnimationFrame(updateCssColors); + +export default colors; diff --git a/assets/js/components/Auth/PasswordModal.vue b/assets/js/components/Auth/PasswordModal.vue index 2badc9c2f..d4b8c3fde 100644 --- a/assets/js/components/Auth/PasswordModal.vue +++ b/assets/js/components/Auth/PasswordModal.vue @@ -85,7 +85,7 @@ -