chore: refactor components file structure (#19627)

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

assets/js/api.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { openLoginModal } from "./auth";
+import { openLoginModal } from "./components/Auth/auth.js";
 
 const { protocol, hostname, port, pathname } = window.location;
 

assets/js/components/Auth/LoginModal.vue

@@ -58,11 +58,11 @@
 </template>
 
 <script>
-import GenericModal from "./GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Modal from "bootstrap/js/dist/modal";
-import api from "../api";
-import { updateAuthStatus, getAndClearNextUrl, getAndClearNextModal, isLoggedIn } from "../auth";
-import { docsPrefix } from "../i18n";
+import api from "../../api.js";
+import { updateAuthStatus, getAndClearNextUrl, getAndClearNextModal, isLoggedIn } from "./auth.js";
+import { docsPrefix } from "../../i18n.js";
 
 export default {
 	name: "LoginModal",

assets/js/components/Auth/PasswordModal.vue

@@ -86,10 +86,10 @@
 </template>
 
 <script>
-import GenericModal from "./GenericModal.vue";
-import FormRow from "./FormRow.vue";
-import api from "../api";
-import { updateAuthStatus, isConfigured } from "../auth";
+import GenericModal from "../Helper/GenericModal.vue";
+import FormRow from "../Helper/FormRow.vue";
+import api from "../../api.js";
+import { updateAuthStatus, isConfigured } from "./auth.js";
 
 export default {
 	name: "PasswordModal",

assets/js/components/Auth/auth.js

@@ -1,8 +1,8 @@
 import { reactive, watch } from "vue";
-import api from "./api";
-import store from "./store";
+import api from "../../api.js";
+import store from "../../store.js";
 import Modal from "bootstrap/js/dist/modal";
-import { isSystemError } from "./utils/fatal";
+import { isSystemError } from "../../utils/fatal.js";
 
 const auth = reactive({
   configured: true,

assets/js/components/Battery/BatterySettingsModal.vue

@@ -254,13 +254,13 @@
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/home";
-import SmartCostLimit from "./SmartCostLimit.vue";
-import CustomSelect from "./CustomSelect.vue";
-import GenericModal from "./GenericModal.vue";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import smartCostAvailable from "../utils/smartCostAvailable";
+import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import GenericModal from "../Helper/GenericModal.vue";
+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";
 
 export default {
 	name: "BatterySettingsModal",

assets/js/components/ChargingPlans/Arrival.vue

@@ -60,8 +60,8 @@
 </template>
 
 <script>
-import { distanceUnit } from "../units";
-import formatter from "../mixins/formatter";
+import { distanceUnit } from "../../units.js";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "ChargingPlanArrival",

assets/js/components/ChargingPlans/ChargingPlan.vue

@@ -104,20 +104,24 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import LabelAndValue from "./LabelAndValue.vue";
-import ChargingPlansSettings from "./ChargingPlansSettings.vue";
-import ChargingPlanArrival from "./ChargingPlanArrival.vue";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import PlansSettings from "./PlansSettings.vue";
+import Arrival from "./Arrival.vue";
 
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import { optionStep, fmtEnergy } from "../utils/energyOptions";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import api from "../../api.js";
+import { optionStep, fmtEnergy } from "../../utils/energyOptions.js";
 
 const ONE_MINUTE = 60 * 1000;
 
 export default {
 	name: "ChargingPlan",
-	components: { LabelAndValue, ChargingPlansSettings, ChargingPlanArrival },
+	components: {
+		LabelAndValue,
+		ChargingPlansSettings: PlansSettings,
+		ChargingPlanArrival: Arrival,
+	},
 	mixins: [formatter, collector],
 	props: {
 		currency: String,
@@ -196,10 +200,10 @@ export default {
 			return this.activeTab === "arrival";
 		},
 		chargingPlansSettingsProps: function () {
-			return this.collectProps(ChargingPlansSettings);
+			return this.collectProps(PlansSettings);
 		},
 		chargingPlanArrival: function () {
-			return this.collectProps(ChargingPlanArrival);
+			return this.collectProps(Arrival);
 		},
 		targetSocLabel: function () {
 			if (this.socBasedPlanning) {

assets/js/components/ChargingPlans/PlanRepeatingSettings.vue

@@ -137,10 +137,10 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/trash";
-import { distanceUnit } from "../units";
-import MultiSelect from "./MultiSelect.vue";
-import formatter from "../mixins/formatter";
-import deepEqual from "../utils/deepEqual";
+import { distanceUnit } from "../../units.js";
+import MultiSelect from "../Helper/MultiSelect.vue";
+import formatter from "../../mixins/formatter.js";
+import deepEqual from "../../utils/deepEqual.js";
 export default {
 	name: "ChargingPlanRepeatingSettings",
 	components: {

assets/js/components/ChargingPlans/PlanStaticSettings.vue

@@ -148,10 +148,10 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/checkmark";
-import { distanceUnit } from "../units";
+import { distanceUnit } from "../../units.js";
 
-import formatter from "../mixins/formatter";
-import { energyOptions } from "../utils/energyOptions";
+import formatter from "../../mixins/formatter.js";
+import { energyOptions } from "../../utils/energyOptions.js";
 
 const LAST_TARGET_TIME_KEY = "last_target_time";
 const LAST_SOC_GOAL_KEY = "last_soc_goal";

assets/js/components/ChargingPlans/PlansRepeatingSettings.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import ChargingPlanRepeatingSettings from "./ChargingPlanRepeatingSettings.vue";
-import deepEqual from "../utils/deepEqual";
-import formatter from "../mixins/formatter";
+import PlanRepeatingSettings from "./PlanRepeatingSettings.vue";
+import deepEqual from "../../utils/deepEqual.js";
+import formatter from "../../mixins/formatter.js";
 
 const DEFAULT_WEEKDAYS = [1, 2, 3, 4, 5]; // weekdays
 const DEFAULT_TARGET_TIME = "07:00";
@@ -40,7 +40,7 @@ const DEFAULT_TARGET_SOC = 80;
 export default {
 	name: "ChargingPlansRepeatingSettings",
 	components: {
-		ChargingPlanRepeatingSettings,
+		ChargingPlanRepeatingSettings: PlanRepeatingSettings,
 	},
 	mixins: [formatter],
 	props: {

assets/js/components/ChargingPlans/PlansSettings.vue

@@ -63,25 +63,25 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/plus";
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
-import ChargingPlanStaticSettings from "./ChargingPlanStaticSettings.vue";
-import ChargingPlansRepeatingSettings from "./ChargingPlansRepeatingSettings.vue";
-import ChargingPlanWarnings from "./ChargingPlanWarnings.vue";
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import CustomSelect from "./CustomSelect.vue";
-import deepEqual from "../utils/deepEqual";
+import Preview from "./Preview.vue";
+import PlanStaticSettings from "./PlanStaticSettings.vue";
+import RepeatingSettings from "./PlansRepeatingSettings.vue";
+import Warnings from "./Warnings.vue";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import api from "../../api.js";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import deepEqual from "../../utils/deepEqual.js";
 
 const TARIFF_CACHE_TIME = 300000; // 5 minutes
 
 export default {
 	name: "ChargingPlansSettings",
 	components: {
-		ChargingPlanPreview,
-		ChargingPlanStaticSettings,
-		ChargingPlansRepeatingSettings,
-		ChargingPlanWarnings,
+		ChargingPlanPreview: Preview,
+		ChargingPlanStaticSettings: PlanStaticSettings,
+		ChargingPlansRepeatingSettings: RepeatingSettings,
+		ChargingPlanWarnings: Warnings,
 		CustomSelect,
 	},
 	mixins: [formatter, collector],
@@ -128,7 +128,7 @@ export default {
 			return this.previewPlanOptions[this.selectedPreviewId - 1]?.name;
 		},
 		chargingPlanWarningsProps: function () {
-			return this.collectProps(ChargingPlanWarnings);
+			return this.collectProps(Warnings);
 		},
 		chargingPlanPreviewProps: function () {
 			const { rates } = this.tariff;

assets/js/components/ChargingPlans/Preview.story.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
+import Preview from "./Preview.vue";
 
 const now = new Date();
 
@@ -82,19 +82,19 @@ const dynamic = {
 <template>
 	<Story title="ChargingPlanPreview">
 		<Variant title="co2">
-			<ChargingPlanPreview v-bind="co2" />
+			<Preview v-bind="co2" />
 		</Variant>
 		<Variant title="fixed">
-			<ChargingPlanPreview v-bind="fixed" />
+			<Preview v-bind="fixed" />
 		</Variant>
 		<Variant title="zoned">
-			<ChargingPlanPreview v-bind="zoned" />
+			<Preview v-bind="zoned" />
 		</Variant>
 		<Variant title="unknown">
-			<ChargingPlanPreview v-bind="unknown" />
+			<Preview v-bind="unknown" />
 		</Variant>
 		<Variant title="dynamic">
-			<ChargingPlanPreview v-bind="dynamic" />
+			<Preview v-bind="dynamic" />
 		</Variant>
 	</Story>
 </template>

assets/js/components/ChargingPlans/Preview.test.js

@@ -1,6 +1,6 @@
 import { mount, config } from "@vue/test-utils";
 import { beforeAll, describe, expect, test } from "vitest";
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
+import Preview from "./Preview.vue";
 
 config.global.mocks["$i18n"] = { locale: "de-DE" };
 config.global.mocks["$t"] = (a) => a;
@@ -22,7 +22,7 @@ describe("basics", () => {
     },
   ];
 
-  const wrapper = mount(ChargingPlanPreview, {
+  const wrapper = mount(Preview, {
     props: {
       plan: PLAN,
       targetTime: DATE_TARGET,
@@ -106,7 +106,7 @@ describe("zoned tariffs", () => {
 
   let result = null;
 
-  const wrapper = mount(ChargingPlanPreview, {
+  const wrapper = mount(Preview, {
     props: {
       plan: PLAN,
       targetTime: DATE_TARGET,

assets/js/components/ChargingPlans/Preview.vue

@@ -35,9 +35,9 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
-import TariffChart from "./TariffChart.vue";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
+import TariffChart from "../Tariff/TariffChart.vue";
 
 export default {
 	name: "ChargingPlanPreview",

assets/js/components/ChargingPlans/Warnings.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "ChargingPlanWarnings",

assets/js/components/Config/ChargerModal.vue

@@ -152,7 +152,7 @@ import TestResult from "./TestResult.vue";
 import api from "../../api";
 import test from "./mixins/test";
 import Modbus from "./Modbus.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import SponsorTokenRequired from "./SponsorTokenRequired.vue";
 const initialValues = { type: "template" };

assets/js/components/Config/ControlModal.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import GenericModal from "./../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import FormRow from "./FormRow.vue";
 import store from "../../store";
 import api from "../../api";

assets/js/components/Config/JsonModal.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import api from "../../api";
 import { docsPrefix } from "../../i18n";
 import store from "../../store";

assets/js/components/Config/LoadpointModal.vue

@@ -547,9 +547,9 @@
 <script>
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import api from "../../api";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import deepClone from "../../utils/deepClone";
 import deepEqual from "../../utils/deepEqual";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";

assets/js/components/Config/MeterModal.vue

@@ -165,7 +165,7 @@ import api from "../../api";
 import test from "./mixins/test";
 import NewDeviceButton from "./NewDeviceButton.vue";
 import Modbus from "./Modbus.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import PropertyField from "./PropertyField.vue";
 const initialValues = { type: "template", deviceTitle: "", deviceIcon: "" };

assets/js/components/Config/PropertyField.vue

@@ -92,7 +92,7 @@
 <script>
 import "@h2d2/shopicons/es/regular/minus";
 import VehicleIcon from "../VehicleIcon";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import formatter from "../../mixins/formatter";
 
 const NS_PER_SECOND = 1000000000;

assets/js/components/Config/SponsorModal.vue

@@ -64,8 +64,8 @@
 <script>
 import JsonModal from "./JsonModal.vue";
 import FormRow from "./FormRow.vue";
-import Sponsor, { VICTRON_DEVICE } from "../Sponsor.vue";
-import SponsorTokenExpires from "../SponsorTokenExpires.vue";
+import Sponsor, { VICTRON_DEVICE } from "../Savings/Sponsor.vue";
+import SponsorTokenExpires from "../Savings/SponsorTokenExpires.vue";
 import store from "../../store";
 import { docsPrefix } from "../../i18n";
 import { cleanYaml } from "../../utils/cleanYaml";

assets/js/components/Config/VehicleModal.vue

@@ -235,10 +235,10 @@
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
 import TestResult from "./TestResult.vue";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import PropertyEntry from "./PropertyEntry.vue";
 import PropertyCollapsible from "./PropertyCollapsible.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import api from "../../api";
 import test from "./mixins/test";

assets/js/components/Config/YamlModal.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import api from "../../api";
 import { docsPrefix } from "../../i18n";
 import YamlEditor from "./YamlEditor.vue";

assets/js/components/Energyflow/Energyflow.vue

@@ -230,9 +230,9 @@
 import "@h2d2/shopicons/es/filled/square";
 import Modal from "bootstrap/js/dist/modal";
 import Visualization from "./Visualization.vue";
-import EnergyflowEntry from "./EnergyflowEntry.vue";
+import Entry from "./Entry.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import settings from "../../settings";
 import { CO2_TYPE } from "../../units";
 import collector from "../../mixins/collector";
@@ -241,7 +241,7 @@ export default {
 	name: "Energyflow",
 	components: {
 		Visualization,
-		EnergyflowEntry,
+		EnergyflowEntry: Entry,
 		AnimatedNumber,
 	},
 	mixins: [formatter, collector],

assets/js/components/Energyflow/Entry.vue

@@ -46,7 +46,7 @@ import "@h2d2/shopicons/es/regular/home";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import BatteryIcon from "./BatteryIcon.vue";
 import formatter from "../../mixins/formatter";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
 import ForecastIcon from "../MaterialIcon/Forecast.vue";
 

assets/js/components/Energyflow/Visualization.vue

@@ -110,7 +110,7 @@
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
 import QuestionIcon from "../MaterialIcon/Question.vue";
 import "@h2d2/shopicons/es/regular/sun";

assets/js/components/Footer/Footer.vue

@@ -13,7 +13,7 @@
 import "@h2d2/shopicons/es/filled/testtube";
 
 import Version from "./Version.vue";
-import Savings from "./Savings.vue";
+import Savings from "../Savings/Savings.vue";
 
 export default {
 	name: "Footer",

assets/js/components/Footer/OfflineIndicator.vue

@@ -74,9 +74,9 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/car1";
-import CloudOffline from "./MaterialIcon/CloudOffline.vue";
-import Sync from "./MaterialIcon/Sync.vue";
-import restart, { performRestart, restartComplete } from "../restart";
+import CloudOffline from "../MaterialIcon/CloudOffline.vue";
+import Sync from "../MaterialIcon/Sync.vue";
+import restart, { performRestart, restartComplete } from "../../restart.js";
 
 export default {
 	name: "OfflineIndicator",

assets/js/components/Footer/Version.vue

@@ -129,7 +129,7 @@
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
-import api from "../api";
+import api from "../../api.js";
 import Logo from "./Logo.vue";
 
 export default {

assets/js/components/Forecast/ActiveSlot.vue

@@ -11,8 +11,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import type { PropType } from "vue";
-import { type PriceSlot, type TimeseriesEntry } from "../utils/forecast";
-import formatter from "../mixins/formatter";
+import { type PriceSlot, type TimeseriesEntry } from "../../utils/forecast.ts";
+import formatter from "../../mixins/formatter";
 
 export default defineComponent({
 	name: "ForecastActiveSlot",

assets/js/components/Forecast/Chart.vue

@@ -28,16 +28,16 @@ import {
 } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
-import { registerChartComponents, commonOptions } from "./Sessions/chartConfig";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import colors, { lighterColor } from "../colors";
+import { registerChartComponents, commonOptions } from "../Sessions/chartConfig";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors, { lighterColor } from "../../colors";
 import {
 	highestSlotIndexByDay,
 	ForecastType,
 	type PriceSlot,
 	type SolarDetails,
 	type TimeseriesEntry,
-} from "../utils/forecast";
+} from "../../utils/forecast.ts";
 
 registerChartComponents([
 	BarController,

assets/js/components/Forecast/Details.vue

@@ -64,9 +64,9 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import { ForecastType, type PriceSlot, type SolarDetails } from "../utils/forecast";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import AnimatedNumber from "./AnimatedNumber.vue";
+import { ForecastType, type PriceSlot, type SolarDetails } from "../../utils/forecast.ts";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 const LOCALES_WITHOUT_DAY_AFTER_TOMORROW = ["en", "tr"];
 
 export interface Energy {

assets/js/components/Forecast/ForecastModal.vue

@@ -53,28 +53,28 @@ import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/sun";
 import { defineComponent } from "vue";
 import type { PropType } from "vue";
-import GenericModal from "./GenericModal.vue";
-import ForecastChart from "./ForecastChart.vue";
-import ForecastTypeSelect from "./ForecastTypeSelect.vue";
-import ForecastDetails from "./ForecastDetails.vue";
-import ForecastActiveSlot from "./ForecastActiveSlot.vue";
+import GenericModal from "../Helper/GenericModal.vue";
+import Chart from "./Chart.vue";
+import TypeSelect from "./TypeSelect.vue";
+import Details from "./Details.vue";
+import ActiveSlot from "./ActiveSlot.vue";
 import {
 	type PriceSlot,
 	type TimeseriesEntry,
 	type Forecast,
 	ForecastType,
 	adjustedSolar,
-} from "../utils/forecast";
-import formatter from "../mixins/formatter";
-import settings from "../settings";
+} from "../../utils/forecast.ts";
+import formatter from "../../mixins/formatter";
+import settings from "../../settings";
 export default defineComponent({
 	name: "ForecastModal",
 	components: {
 		GenericModal,
-		ForecastChart,
-		ForecastTypeSelect,
-		ForecastDetails,
-		ForecastActiveSlot,
+		ForecastChart: Chart,
+		ForecastTypeSelect: TypeSelect,
+		ForecastDetails: Details,
+		ForecastActiveSlot: ActiveSlot,
 	},
 	mixins: [formatter],
 	props: {

assets/js/components/Forecast/TypeSelect.vue

@@ -18,10 +18,10 @@
 import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/sun";
 import { defineComponent } from "vue";
-import IconSelectItem from "./IconSelectItem.vue";
-import IconSelectGroup from "./IconSelectGroup.vue";
-import DynamicPriceIcon from "./MaterialIcon/DynamicPrice.vue";
-import { ForecastType } from "../utils/forecast";
+import IconSelectItem from "../Helper/IconSelectItem.vue";
+import IconSelectGroup from "../Helper/IconSelectGroup.vue";
+import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
+import { ForecastType } from "../../utils/forecast.ts";
 
 export default defineComponent({
 	name: "ForecastTypeSelect",

assets/js/components/GlobalSettings/GlobalSettingsModal.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import UserInterfaceSettings from "./Config/UserInterfaceSettings.vue";
+import UserInterfaceSettings from "./UserInterfaceSettings.vue";
 
 export default {
 	name: "GlobalSettingsModal",

assets/js/components/GlobalSettings/UserInterfaceSettings.vue

@@ -78,18 +78,18 @@
 
 <script>
 import TelemetrySettings from "../TelemetrySettings.vue";
-import FormRow from "../FormRow.vue";
-import SelectGroup from "../SelectGroup.vue";
+import FormRow from "../Helper/FormRow.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import {
 	getLocalePreference,
 	setLocalePreference,
 	LOCALES,
 	removeLocalePreference,
-} from "../../i18n";
-import { getThemePreference, setThemePreference, THEMES } from "../../theme";
-import { getUnits, setUnits, UNITS } from "../../units";
-import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags";
-import { isApp } from "../../utils/native";
+} from "../../i18n.js";
+import { getThemePreference, setThemePreference, THEMES } from "../../theme.js";
+import { getUnits, setUnits, UNITS } from "../../units.js";
+import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags.js";
+import { isApp } from "../../utils/native.js";
 
 export default {
 	name: "UserInterfaceSettings",

assets/js/components/HelpModal.vue

@@ -138,9 +138,9 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import { docsPrefix } from "../i18n";
-import { performRestart } from "../restart";
-import { isLoggedIn, openLoginModal } from "../auth";
+import { docsPrefix } from "../i18n.js";
+import { performRestart } from "../restart.js";
+import { isLoggedIn, openLoginModal } from "./Auth/auth.js";
 
 export default {
 	name: "HelpModal",

assets/js/components/Helper/MultiSelect.vue

@@ -50,7 +50,7 @@
 
 <script>
 import Dropdown from "bootstrap/js/dist/dropdown";
-import deepEqual from "../utils/deepEqual";
+import deepEqual from "../../utils/deepEqual.js";
 export default {
 	name: "MultiSelect",
 	props: {

assets/js/components/Loadpoints/Loadpoint.vue

@@ -93,18 +93,18 @@
 <script>
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/adjust";
-import api from "../api";
+import api from "../../api.js";
 import Mode from "./Mode.vue";
-import Vehicle from "./Vehicle.vue";
+import Vehicle from "../Vehicles/Vehicle.vue";
 import Phases from "./Phases.vue";
-import LabelAndValue from "./LabelAndValue.vue";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import collector from "../mixins/collector";
-import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
-import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
-import VehicleIcon from "./VehicleIcon";
-import LoadpointSessionInfo from "./LoadpointSessionInfo.vue";
-import smartCostAvailable from "../utils/smartCostAvailable";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import SettingsButton from "./SettingsButton.vue";
+import SettingsModal from "./SettingsModal.vue";
+import VehicleIcon from "../VehicleIcon/index.js";
+import SessionInfo from "./SessionInfo.vue";
+import smartCostAvailable from "../../utils/smartCostAvailable.js";
 import Modal from "bootstrap/js/dist/modal";
 
 export default {
@@ -114,9 +114,9 @@ export default {
 		Vehicle,
 		Phases,
 		LabelAndValue,
-		LoadpointSettingsButton,
-		LoadpointSettingsModal,
-		LoadpointSessionInfo,
+		LoadpointSettingsButton: SettingsButton,
+		LoadpointSettingsModal: SettingsModal,
+		LoadpointSessionInfo: SessionInfo,
 		VehicleIcon,
 	},
 	mixins: [formatter, collector],
@@ -237,10 +237,10 @@ export default {
 			return this.collectProps(Mode);
 		},
 		sessionInfoProps: function () {
-			return this.collectProps(LoadpointSessionInfo);
+			return this.collectProps(SessionInfo);
 		},
 		settingsModal: function () {
-			return this.collectProps(LoadpointSettingsModal);
+			return this.collectProps(SettingsModal);
 		},
 		vehicleProps: function () {
 			return this.collectProps(Vehicle);

assets/js/components/Loadpoints/SessionInfo.vue

@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import formatter from "../mixins/formatter";
-import CustomSelect from "./CustomSelect.vue";
-import { getSessionInfo, setSessionInfo } from "../sessionInfo";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import formatter from "../../mixins/formatter.js";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import { getSessionInfo, setSessionInfo } from "./sessionInfo.js";
 
 export default {
 	name: "LoadpointSessionInfo",

assets/js/components/Loadpoints/SettingsBatteryBoost.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	mixins: [formatter],

assets/js/components/Loadpoints/SettingsModal.vue

@@ -156,11 +156,11 @@
 </template>
 
 <script>
-import collector from "../mixins/collector";
-import formatter from "../mixins/formatter";
-import SmartCostLimit from "./SmartCostLimit.vue";
-import smartCostAvailable from "../utils/smartCostAvailable";
-import LoadpointSettingsBatteryBoost from "./LoadpointSettingsBatteryBoost.vue";
+import collector from "../../mixins/collector.js";
+import formatter from "../../mixins/formatter.js";
+import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
+import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import SettingsBatteryBoost from "./SettingsBatteryBoost.vue";
 
 const V = 230;
 
@@ -179,7 +179,7 @@ const insertSorted = (arr, num) => {
 
 export default {
 	name: "LoadpointSettingsModal",
-	components: { SmartCostLimit, LoadpointSettingsBatteryBoost },
+	components: { SmartCostLimit, LoadpointSettingsBatteryBoost: SettingsBatteryBoost },
 	mixins: [formatter, collector],
 	props: {
 		id: [String, Number],
@@ -226,7 +226,7 @@ export default {
 			return [PHASES_3, PHASES_1];
 		},
 		batteryBoostProps() {
-			return this.collectProps(LoadpointSettingsBatteryBoost);
+			return this.collectProps(SettingsBatteryBoost);
 		},
 		maxPower() {
 			if (this.chargerPhases1p3p) {

assets/js/components/Loadpoints/sessionInfo.js

@@ -1,4 +1,4 @@
-import settings from "./settings";
+import settings from "../../settings.js";
 
 export function getSessionInfo(index, fallback) {
   return settings.sessionInfo[index - 1] || fallback;

assets/js/components/Savings/LiveCommunity.vue

@@ -36,16 +36,16 @@
 </template>
 
 <script>
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 
-import formatter from "../mixins/formatter";
-import communityApi from "../communityApi";
+import formatter from "../../mixins/formatter.js";
+import communityApi from "./communityApi.js";
 
 const UPDATE_INTERVAL_SECONDS = 10;
 
 export default {
 	name: "LiveCommunity",
-	components: { SavingsTile },
+	components: { SavingsTile: Tile },
 	mixins: [formatter],
 	props: {},
 	data() {

assets/js/components/Savings/Savings.vue

@@ -203,20 +203,20 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import Sponsor from "./Sponsor.vue";
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 import LiveCommunity from "./LiveCommunity.vue";
-import TelemetrySettings from "./TelemetrySettings.vue";
-import CustomSelect from "./CustomSelect.vue";
-import co2Reference from "../co2Reference";
-import settings from "../settings";
-import api from "../api";
-import { docsPrefix } from "../i18n";
+import TelemetrySettings from "../TelemetrySettings.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import co2Reference from "./co2Reference.js";
+import settings from "../../settings.js";
+import api from "../../api.js";
+import { docsPrefix } from "../../i18n.js";
 
 export default {
 	name: "Savings",
-	components: { Sponsor, SavingsTile, LiveCommunity, TelemetrySettings, CustomSelect },
+	components: { Sponsor, SavingsTile: Tile, LiveCommunity, TelemetrySettings, CustomSelect },
 	mixins: [formatter],
 	props: {
 		statistics: { type: Object, default: () => ({}) },

assets/js/components/Savings/Sponsor.vue

@@ -66,7 +66,7 @@ import confetti from "canvas-confetti";
 import "@h2d2/shopicons/es/regular/heart";
 import "@h2d2/shopicons/es/regular/stars";
 import "@h2d2/shopicons/es/regular/clock";
-import { docsPrefix } from "../i18n";
+import { docsPrefix } from "../../i18n.js";
 
 export const TRIAL = "trial";
 export const VICTRON_DEVICE = "victron";

assets/js/components/Savings/SponsorTokenExpires.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import { TRIAL } from "./Sponsor.vue";
 
 export default {

assets/js/components/Savings/Tile.story.vue

@@ -1,10 +1,10 @@
 <script setup>
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 </script>
 
 <template>
 	<Story>
-		<SavingsTile
+		<Tile
 			icon="coinjar"
 			title="Ersparnis"
 			value="14,2"

assets/js/components/Savings/Tile.vue

@@ -38,8 +38,8 @@ import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/receivepayment";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/eco1";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import formatter from "../mixins/formatter";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "SavingsTile",

assets/js/components/Sessions/DateNavigator.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import CustomSelect from "../CustomSelect.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import DateNavigatorButton from "./DateNavigatorButton.vue";
 import formatter from "../../mixins/formatter";
 

assets/js/components/Sessions/PeriodSelector.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 
 export default {
 	name: "PeriodSelector",

assets/js/components/Sessions/SessionDetailsModal.vue

@@ -198,14 +198,14 @@
 import "@h2d2/shopicons/es/regular/checkmark";
 import Modal from "bootstrap/js/dist/modal";
 import formatter from "../../mixins/formatter";
-import VehicleOptions from "../VehicleOptions.vue";
-import CustomSelect from "../CustomSelect.vue";
+import Options from "../Vehicles/Options.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import { distanceUnit, distanceValue } from "../../units";
 import api from "../../api";
 
 export default {
 	name: "SessionDetailsModal",
-	components: { VehicleOptions, CustomSelect },
+	components: { VehicleOptions: Options, CustomSelect },
 	mixins: [formatter],
 	props: {
 		session: Object,

assets/js/components/Sessions/SessionTable.vue

@@ -157,7 +157,7 @@
 </template>
 
 <script>
-import CustomSelect from "../CustomSelect.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import breakpoint from "../../mixins/breakpoint";
 import settings from "../../settings";

assets/js/components/Site/Site.vue

@@ -64,13 +64,13 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/arrowup";
-import TopNavigation from "./TopNavigation.vue";
-import Notifications from "./Notifications.vue";
-import Energyflow from "./Energyflow/Energyflow.vue";
-import Loadpoints from "./Loadpoints.vue";
-import Footer from "./Footer.vue";
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
+import Navigation from "../Top/Navigation.vue";
+import Notifications from "../Top/Notifications.vue";
+import Energyflow from "../Energyflow/Energyflow.vue";
+import Loadpoints from "../Loadpoints/Loadpoints.vue";
+import Footer from "../Footer/Footer.vue";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
 import WelcomeIcons from "./WelcomeIcons.vue";
 
 export default {
@@ -80,7 +80,7 @@ export default {
 		Energyflow,
 		Footer,
 		Notifications,
-		TopNavigation,
+		TopNavigation: Navigation,
 		WelcomeIcons,
 	},
 	mixins: [formatter, collector],
@@ -164,7 +164,7 @@ export default {
 		},
 		topNavigation: function () {
 			const vehicleLogins = this.auth ? this.auth.vehicles : {};
-			return { vehicleLogins, ...this.collectProps(TopNavigation) };
+			return { vehicleLogins, ...this.collectProps(Navigation) };
 		},
 		showParkingLot: function () {
 			// work in progess

assets/js/components/Site/WelcomeIcons.vue

@@ -26,9 +26,9 @@ import "@h2d2/shopicons/es/regular/powersupply";
 import "@h2d2/shopicons/es/regular/receivepayment";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/clock";
-import BatteryBoost from "./MaterialIcon/BatteryBoost.vue";
-import SunUp from "./MaterialIcon/SunUp.vue";
-import DynamicPrice from "./MaterialIcon/DynamicPrice.vue";
+import BatteryBoost from "../MaterialIcon/BatteryBoost.vue";
+import SunUp from "../MaterialIcon/SunUp.vue";
+import DynamicPrice from "../MaterialIcon/DynamicPrice.vue";
 import { markRaw } from "vue";
 
 export default {

assets/js/components/Tariff/SmartCostLimit.vue

@@ -83,10 +83,10 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import TariffChart from "./TariffChart.vue";
-import { CO2_TYPE } from "../units";
-import api from "../api";
+import { CO2_TYPE } from "../../units.js";
+import api from "../../api.js";
 
 export default {
 	name: "SmartCostLimit",

assets/js/components/Tariff/TariffChart.vue

@@ -54,9 +54,9 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/arrowright";
-import PlanEndIcon from "./MaterialIcon/PlanEnd.vue";
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
+import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
 
 const BAR_WIDTH = 20;
 

assets/js/components/Top/Header.vue

@@ -24,14 +24,14 @@
 <script>
 import "@h2d2/shopicons/es/regular/home";
 import "@h2d2/shopicons/es/regular/settings";
-import TopNavigation from "./TopNavigation.vue";
-import collector from "../mixins/collector";
-import store from "../store";
+import Navigation from "./Navigation.vue";
+import collector from "../../mixins/collector.js";
+import store from "../../store.js";
 
 export default {
 	name: "TopHeader",
 	components: {
-		TopNavigation,
+		TopNavigation: Navigation,
 	},
 	mixins: [collector],
 	props: {
@@ -41,7 +41,7 @@ export default {
 	computed: {
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
-			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
+			return { vehicleLogins, ...this.collectProps(Navigation, store.state) };
 		},
 	},
 };

assets/js/components/Top/Navigation.story.vue

@@ -1,14 +1,14 @@
 <script setup>
-import TopNavigation from "./TopNavigation.vue";
+import Navigation from "./Navigation.vue";
 </script>
 
 <template>
 	<Story title="Top Navigation">
 		<Variant title="standard">
-			<TopNavigation />
+			<Navigation />
 		</Variant>
 		<Variant title="vehicle logins">
-			<TopNavigation
+			<Navigation
 				:vehicleLogins="{
 					['Mercedes EQS']: {
 						authenticated: true,
@@ -22,7 +22,7 @@ import TopNavigation from "./TopNavigation.vue";
 			/>
 		</Variant>
 		<Variant title="pending vehicle logins">
-			<TopNavigation
+			<Navigation
 				:vehicleLogins="{
 					['Mercedes EQS']: {
 						authenticated: true,
@@ -36,7 +36,7 @@ import TopNavigation from "./TopNavigation.vue";
 			/>
 		</Variant>
 		<Variant title="token expires">
-			<TopNavigation :sponsor="{ expiresSoon: true }" />
+			<Navigation :sponsor="{ expiresSoon: true }" />
 		</Variant>
 	</Story>
 </template>

assets/js/components/Top/Navigation.vue

@@ -130,11 +130,11 @@ import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
 import "@h2d2/shopicons/es/regular/menu";
 import "@h2d2/shopicons/es/regular/newtab";
-import collector from "../mixins/collector";
-import { logout, isLoggedIn, openLoginModal } from "../auth";
-import baseAPI from "../baseapi";
-import { isApp, sendToApp } from "../utils/native";
-import { isUserConfigError } from "../utils/fatal";
+import collector from "../../mixins/collector.js";
+import { logout, isLoggedIn, openLoginModal } from "../Auth/auth.js";
+import baseAPI from "./baseapi.js";
+import { isApp, sendToApp } from "../../utils/native.js";
+import { isUserConfigError } from "../../utils/fatal.js";
 
 export default {
 	name: "TopNavigation",

assets/js/components/Top/Notifications.vue

@@ -88,7 +88,7 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/exclamationtriangle";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "Notifications",

assets/js/components/Vehicles/LimitEnergySelect.vue

@@ -34,10 +34,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import formatter from "../mixins/formatter";
-import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "../utils/energyOptions";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import formatter from "../../mixins/formatter.js";
+import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "../../utils/energyOptions.js";
 
 export default {
 	name: "LimitEnergySelect",

assets/js/components/Vehicles/LimitSocSelect.vue

@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import { distanceUnit } from "../units";
-import formatter from "../mixins/formatter";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import { distanceUnit } from "../../units.js";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "LimitSocSelect",

assets/js/components/Vehicles/Soc.vue

@@ -72,7 +72,7 @@
 <script>
 import Tooltip from "bootstrap/js/dist/tooltip";
 import "@h2d2/shopicons/es/regular/clock";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "VehicleSoc",

assets/js/components/Vehicles/Status.story.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VehicleStatus from "./VehicleStatus.vue";
+import Status from "./Status.vue";
 
 function getFutureTime(hours, minutes) {
 	const now = new Date();
@@ -16,54 +16,44 @@ const planProjectedEnd = getFutureTime(5, 43);
 <template>
 	<Story title="VehicleStatus" :layout="{ type: 'grid', iframe: false, width: 320 }">
 		<Variant title="status: disconnected">
-			<VehicleStatus />
+			<Status />
 		</Variant>
 		<Variant title="status: connected">
-			<VehicleStatus connected />
+			<Status connected />
 		</Variant>
 		<Variant title="status: enabled">
-			<VehicleStatus connected enabled />
+			<Status connected enabled />
 		</Variant>
 		<Variant title="status: charging">
-			<VehicleStatus connected charging />
+			<Status connected charging />
 		</Variant>
 		<Variant title="solar: pv enable">
-			<VehicleStatus connected pvAction="enable" :pvRemainingInterpolated="90" />
+			<Status connected pvAction="enable" :pvRemainingInterpolated="90" />
 		</Variant>
 		<Variant title="solar: charging">
-			<VehicleStatus connected enabled charging :sessionSolarPercentage="94" />
+			<Status connected enabled charging :sessionSolarPercentage="94" />
 		</Variant>
 		<Variant title="solar: pv disable">
-			<VehicleStatus connected charging pvAction="disable" :pvRemainingInterpolated="90" />
+			<Status connected charging pvAction="disable" :pvRemainingInterpolated="90" />
 		</Variant>
 		<Variant title="solar: pv reduce phases">
-			<VehicleStatus
-				connected
-				charging
-				phaseAction="scale1p"
-				:phaseRemainingInterpolated="181"
-			/>
+			<Status connected charging phaseAction="scale1p" :phaseRemainingInterpolated="181" />
 		</Variant>
 		<Variant title="solar: pv increase phases">
-			<VehicleStatus
-				connected
-				charging
-				phaseAction="scale3p"
-				:phaseRemainingInterpolated="44"
-			/>
+			<Status connected charging phaseAction="scale3p" :phaseRemainingInterpolated="44" />
 		</Variant>
 		<Variant title="min soc">
-			<VehicleStatus connected charging :minSoc="20" :vehicleSoc="10" />
+			<Status connected charging :minSoc="20" :vehicleSoc="10" />
 		</Variant>
 		<Variant title="plan: start soon">
-			<VehicleStatus
+			<Status
 				connected
 				:effectivePlanTime="effectivePlanTime"
 				:planProjectedStart="planProjectedStart"
 			/>
 		</Variant>
 		<Variant title="plan: start soon, charging">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				:effectivePlanTime="effectivePlanTime"
@@ -71,7 +61,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="plan: active">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				planActive
@@ -81,7 +71,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="plan: active, not reachable">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				planActive
@@ -93,16 +83,16 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="vehicle: climating">
-			<VehicleStatus connected enabled vehicleClimaterActive />
+			<Status connected enabled vehicleClimaterActive />
 		</Variant>
 		<Variant title="vehicle: limit">
-			<VehicleStatus connected enabled :vehicleSoc="33" :vehicleLimitSoc="70" />
+			<Status connected enabled :vehicleSoc="33" :vehicleLimitSoc="70" />
 		</Variant>
 		<Variant title="vehicle: limit reached">
-			<VehicleStatus connected enabled :vehicleSoc="70" :vehicleLimitSoc="70" />
+			<Status connected enabled :vehicleSoc="70" :vehicleLimitSoc="70" />
 		</Variant>
 		<Variant title="vehicle: limit unreachable">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:vehicleSoc="40"
@@ -111,7 +101,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy set">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -121,7 +111,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy next start">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:smartCostLimit="500"
@@ -130,7 +120,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy active">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -141,7 +131,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy set">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -152,7 +142,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap but not connected">
-			<VehicleStatus
+			<Status
 				currency="EUR"
 				:tariffGrid="0.091"
 				:smartCostLimit="0.12"
@@ -160,7 +150,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy next start">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -171,7 +161,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy active">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -183,7 +173,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: minsoc, cheap">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -195,7 +185,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: pv disable, plan">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				pvAction="disable"
@@ -205,7 +195,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: vehicle limit, plan">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				:sessionSolarPercentage="94"
@@ -216,7 +206,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: maximal">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:sessionSolarPercentage="94"
@@ -232,7 +222,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="welcome charge">
-			<VehicleStatus connected charging vehicleWelcomeActive />
+			<Status connected charging vehicleWelcomeActive />
 		</Variant>
 	</Story>
 </template>

assets/js/components/Vehicles/Status.test.js

@@ -1,6 +1,6 @@
 import { mount, config } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
-import VehicleStatus from "./VehicleStatus.vue";
+import Status from "./Status.vue";
 
 const serializeData = (data) => (data ? `:${JSON.stringify(data)}` : "");
 config.global.mocks["$t"] = (key, data) => `${key}${serializeData(data)}`;
@@ -21,7 +21,7 @@ const allEntries = {
 const expectEntries = (props, entries) => {
   const expectedEntries = { ...allEntries, ...entries };
 
-  const wrapper = mount(VehicleStatus, { props });
+  const wrapper = mount(Status, { props });
 
   Object.entries(expectedEntries).forEach(([key, value]) => {
     const selector = `[data-testid=vehicle-status-${key}]`;

assets/js/components/Vehicles/Status.vue

@@ -182,25 +182,25 @@ import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import "@h2d2/shopicons/es/regular/clock";
-import DynamicPriceIcon from "./MaterialIcon/DynamicPrice.vue";
-import { DEFAULT_LOCALE } from "../i18n";
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
-import ClimaterIcon from "./MaterialIcon/Climater.vue";
-import PlanEndIcon from "./MaterialIcon/PlanEnd.vue";
-import PlanStartIcon from "./MaterialIcon/PlanStart.vue";
-import ReconnectIcon from "./MaterialIcon/Reconnect.vue";
-import RfidWaitIcon from "./MaterialIcon/RfidWait.vue";
-import SunDownIcon from "./MaterialIcon/SunDown.vue";
-import SunUpIcon from "./MaterialIcon/SunUp.vue";
-import TempLimitIcon from "./MaterialIcon/TempLimit.vue";
+import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
+import { DEFAULT_LOCALE } from "../../i18n.js";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
+import ClimaterIcon from "../MaterialIcon/Climater.vue";
+import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
+import PlanStartIcon from "../MaterialIcon/PlanStart.vue";
+import ReconnectIcon from "../MaterialIcon/Reconnect.vue";
+import RfidWaitIcon from "../MaterialIcon/RfidWait.vue";
+import SunDownIcon from "../MaterialIcon/SunDown.vue";
+import SunUpIcon from "../MaterialIcon/SunUp.vue";
+import TempLimitIcon from "../MaterialIcon/TempLimit.vue";
 import Tooltip from "bootstrap/js/dist/tooltip";
-import VehicleLimitIcon from "./MaterialIcon/VehicleLimit.vue";
-import VehicleLimitReachedIcon from "./MaterialIcon/VehicleLimitReached.vue";
-import VehicleLimitWarningIcon from "./MaterialIcon/VehicleLimitWarning.vue";
-import VehicleMinSocIcon from "./MaterialIcon/VehicleMinSoc.vue";
-import WelcomeIcon from "./MaterialIcon/Welcome.vue";
-import BatteryBoostIcon from "./MaterialIcon/BatteryBoost.vue";
+import VehicleLimitIcon from "../MaterialIcon/VehicleLimit.vue";
+import VehicleLimitReachedIcon from "../MaterialIcon/VehicleLimitReached.vue";
+import VehicleLimitWarningIcon from "../MaterialIcon/VehicleLimitWarning.vue";
+import VehicleMinSocIcon from "../MaterialIcon/VehicleMinSoc.vue";
+import WelcomeIcon from "../MaterialIcon/Welcome.vue";
+import BatteryBoostIcon from "../MaterialIcon/BatteryBoost.vue";
 const REASON_AUTH = "waitingforauthorization";
 const REASON_DISCONNECT = "disconnectrequired";
 

assets/js/components/Vehicles/Title.vue

@@ -55,15 +55,15 @@
 import "@h2d2/shopicons/es/regular/cablecharge";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import Modal from "bootstrap/js/dist/modal";
-import VehicleIcon from "./VehicleIcon";
-import VehicleOptions from "./VehicleOptions.vue";
-import CloudOffline from "./MaterialIcon/CloudOffline.vue";
-import Sync from "./MaterialIcon/Sync.vue";
-import collector from "../mixins/collector";
+import VehicleIcon from "../VehicleIcon/index.js";
+import Options from "./Options.vue";
+import CloudOffline from "../MaterialIcon/CloudOffline.vue";
+import Sync from "../MaterialIcon/Sync.vue";
+import collector from "../../mixins/collector.js";
 
 export default {
 	name: "VehicleTitle",
-	components: { VehicleOptions, VehicleIcon, Sync, CloudOffline },
+	components: { VehicleOptions: Options, VehicleIcon, Sync, CloudOffline },
 	mixins: [collector],
 	props: {
 		connected: Boolean,
@@ -108,7 +108,7 @@ export default {
 			return this.vehicleKnown || this.vehicles.length;
 		},
 		vehicleOptionsProps: function () {
-			return this.collectProps(VehicleOptions);
+			return this.collectProps(Options);
 		},
 	},
 	watch: {