'MILLI',
'MILLIWATT',
'Benoit',
+ 'catppuccin',
'chargingstations',
'ctrlr',
'csms',
'PUBLICKEYWITHSIGNEDMETERVALUE',
'sampleddatasignreadings',
'SAMPLEDDATASIGNREADINGS',
+ // UI component terms
+ 'focusables',
+ 'Focusables',
+ // Test credential fragments
+ 'secret',
],
},
},
},
},
{
- files: ['ui/web/src/components/Container.vue', 'ui/web/src/components/buttons/Button.vue'],
+ files: ['tests/**/*.test.ts', 'tests/**/*.test.mts', 'tests/**/*.test.cts'],
rules: {
- 'vue/multi-word-component-names': 'off',
+ '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
+ 'no-void': 'off',
},
},
{
- files: ['tests/**/*.test.ts', 'tests/**/*.test.mts', 'tests/**/*.test.cts'],
+ files: ['ui/web/tests/**/*.test.ts'],
rules: {
- '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
- 'no-void': 'off',
+ 'vue/order-in-components': 'off',
},
},
])
import { AuthenticationType, Protocol, ProtocolVersion } from '../types/UIProtocol.js'
+export const SKIN_IDS = ['classic', 'modern'] as const
+export const THEME_IDS = ['catppuccin-latte', 'sap-horizon', 'tokyo-night-storm'] as const
+
export const authenticationConfigSchema = z
.object({
enabled: z.boolean(),
})
export const configurationSchema = z.object({
+ skin: z.enum(SKIN_IDS).optional(),
+ theme: z.enum(THEME_IDS).optional(),
uiServer: z.union([uiServerConfigSchema, z.array(uiServerConfigSchema)]),
})
-import type { UIServerConfigurationSection } from '../config/schema.js'
+import type { SKIN_IDS, THEME_IDS, UIServerConfigurationSection } from '../config/schema.js'
export interface ConfigurationData {
- theme?: string
+ skin?: (typeof SKIN_IDS)[number]
+ theme?: (typeof THEME_IDS)[number]
uiServer: UIServerConfigurationSection | UIServerConfigurationSection[]
}
| Field | Type | Required | Description |
| ------------------------- | ----------------------- | -------- | ----------------------------------------- |
+| `skin` | `string` | No | Skin name (default: `classic`) |
| `theme` | `string` | No | Theme name (default: `tokyo-night-storm`) |
| `host` | `string` | Yes | Simulator UI server hostname |
| `port` | `number` | Yes | Simulator UI server port |
Default: `tokyo-night-storm`. To add a theme, create a CSS file defining the same semantic tokens.
+## Skins
+
+Set `skin` in `config.json` to select the default UI layout. Users can switch skins at runtime using the selector in the top bar.
+
+| Skin | Layout |
+| --------- | ------------------------------------------------- |
+| `classic` | Table-based rows with a sticky sidebar for forms. |
+| `modern` | Responsive card grid with modal dialogs. |
+
+Default: `classic`. To add a skin, create `src/skins/<name>/`, implement a root layout component, and register it in `src/skins/registry.ts`.
+
## Getting started
### Install dependencies
<!doctype html>
-<html lang="">
+<html lang="en" data-theme="tokyo-night-storm">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<template>
- <router-view />
- <Container
- v-show="$route.name !== ROUTE_NAMES.CHARGING_STATIONS && $route.name !== ROUTE_NAMES.NOT_FOUND"
- id="action-container"
- class="action-container"
+ <Transition
+ mode="out-in"
+ name="skin-fade"
>
- <router-view name="action" />
- </Container>
+ <component
+ :is="activeSkinLayout"
+ v-if="activeSkinLayout"
+ :key="activeSkinId"
+ />
+ <div
+ v-else
+ class="skin-fallback"
+ >
+ <p>Unable to load skin layout. Please reload the page.</p>
+ <button @click="reloadPage">
+ Reload
+ </button>
+ </div>
+ </Transition>
</template>
<script setup lang="ts">
-import Container from '@/components/Container.vue'
-import { ROUTE_NAMES } from '@/composables'
+import { computed, defineAsyncComponent, markRaw, watch } from 'vue'
+
+import SkinLoadError from '@/shared/components/SkinLoadError.vue'
+import SkinLoading from '@/shared/components/SkinLoading.vue'
+import { useSkin } from '@/shared/composables/useSkin.js'
+import { skins } from '@/skins/registry.js'
+
+const { activeSkinId } = useSkin()
+
+watch(activeSkinId, id => {
+ if (!skinLayoutMap.has(id)) {
+ console.warn(`[App] Skin '${id}' not found in layout map, falling back to default`)
+ }
+})
+
+const skinLayoutMap = new Map(
+ skins.map(s => [
+ s.id,
+ markRaw(
+ defineAsyncComponent({
+ delay: 200,
+ errorComponent: SkinLoadError,
+ loader: () => s.loadLayout(),
+ loadingComponent: SkinLoading,
+ timeout: 10000,
+ })
+ ),
+ ])
+)
+
+const activeSkinLayout = computed(
+ () => skinLayoutMap.get(activeSkinId.value) ?? skinLayoutMap.values().next().value
+)
+
+/** Reloads the page when skin layout fails to load. */
+function reloadPage (): void {
+ window.location.reload()
+}
</script>
<style scoped>
-#action-container {
- flex: none;
- min-width: max-content;
- height: fit-content;
+.skin-fade-enter-active,
+.skin-fade-leave-active {
+ transition: opacity 0.2s ease;
+}
+
+.skin-fade-enter-from,
+.skin-fade-leave-to {
+ opacity: 0;
+}
+
+.skin-fallback {
display: flex;
- position: sticky;
- top: 0;
flex-direction: column;
- justify-content: center;
align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ font-family:
+ system-ui,
+ -apple-system,
+ sans-serif;
text-align: center;
- margin-inline: var(--spacing-sm);
- padding: var(--spacing-md);
- border: solid 0.25px var(--color-border);
+ padding: 2rem;
+}
+
+.skin-fallback button {
+ margin-top: 1rem;
+ padding: 0.5rem 1.5rem;
+ font-size: 1rem;
+ cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .skin-fade-enter-active,
+ .skin-fade-leave-active {
+ transition: none;
+ }
}
</style>
{
+ "skin": "classic",
"theme": "tokyo-night-storm",
"uiServer": {
"host": "localhost",
--- /dev/null
+/* Shared element reset — consumed by all themes via CSS variable values */
+
+:root {
+ /* Spacing — shared defaults, overridable per-theme */
+ --spacing-xs: 0.125rem;
+ --spacing-sm: 0.25rem;
+ --spacing-md: 0.5rem;
+ --spacing-lg: 1rem;
+ --spacing-xl: 2rem;
+
+ /* Typography — shared defaults, overridable per-theme */
+ --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-xs: 0.75rem;
+}
+
+body {
+ color: var(--color-text);
+ background-color: var(--color-bg);
+}
+
+button,
+.button {
+ color: var(--color-text-on-button);
+ background-color: var(--color-bg-button);
+ border: 1px solid var(--color-border);
+ cursor: pointer;
+}
+
+button:hover,
+.button:hover {
+ background-color: var(--color-bg-button-hover);
+}
+
+input,
+select,
+textarea {
+ color: var(--color-text);
+ background-color: var(--color-bg-input);
+ border: 1px solid var(--color-border-row);
+}
+
+input::placeholder {
+ color: var(--color-text-muted);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+ outline: 1px solid var(--color-primary);
+}
+
+a {
+ color: var(--color-primary);
+}
+
+.config-error {
+ padding: 2rem;
+ color: var(--color-state-err, #ef5350);
+ font-family: monospace;
+}
+
+.theme-switching,
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+ transition: none !important;
+ animation: none !important;
+}
/* Catppuccin Latte */
-:root {
+:root[data-theme='catppuccin-latte'] {
/* Palette */
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--color-accent: var(--ctp-lavender);
--color-shadow-inset: rgba(0, 0, 0, 0.1);
- /* Spacing */
- --spacing-xs: 0.125rem;
- --spacing-sm: 0.25rem;
- --spacing-md: 0.5rem;
- --spacing-lg: 1rem;
+ /* Surface hierarchy */
+ --color-bg-raised: var(--ctp-surface0);
+ --color-bg-sunken: var(--ctp-mantle);
- /* Typography */
- --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
- --font-size-sm: 0.875rem;
-}
-
-body {
- color: var(--color-text);
- background-color: var(--color-bg);
-}
-
-button,
-.button {
- color: var(--color-text-on-button);
- background-color: var(--color-bg-button);
- border: 1px solid var(--color-border);
- cursor: pointer;
-}
-
-button:hover,
-.button:hover {
- background-color: var(--color-bg-button-hover);
-}
-
-input,
-select,
-textarea {
- color: var(--color-text);
- background-color: var(--color-bg-input);
- border: 1px solid var(--color-border-row);
-}
-
-input::placeholder {
- color: var(--color-text-muted);
-}
-
-input:focus,
-select:focus,
-textarea:focus {
- outline: 1px solid var(--color-primary);
-}
+ /* State colors (Material 700 for light mode readability) */
+ --color-state-ok: #2e7d32;
+ --color-state-warn: #ef6c00;
+ --color-state-err: #c62828;
+ --color-state-idle: var(--ctp-overlay1);
-a {
- color: var(--color-primary);
+ color-scheme: light;
}
/* SAP Horizon */
-:root {
+:root[data-theme='sap-horizon'] {
/* Palette */
--sap-bg: #f5f6f7;
--sap-bg-base: #fff;
--sap-button-border: #bcc3ca;
--sap-button-text: #0064d9;
--sap-button-emphasized-bg: #0070f2;
+ --sap-white: #fff;
/* Semantic */
--color-bg: var(--sap-bg);
--color-text: var(--sap-text);
--color-text-strong: var(--sap-text);
--color-text-muted: var(--sap-label);
- --color-text-on-button: #fff;
+ --color-text-on-button: var(--sap-white);
--color-primary: var(--sap-highlight);
--color-border: var(--sap-border);
--color-border-row: var(--sap-border);
--color-accent: var(--sap-brand);
--color-shadow-inset: rgba(34, 53, 72, 0.15);
- /* Spacing */
- --spacing-xs: 0.125rem;
- --spacing-sm: 0.25rem;
- --spacing-md: 0.5rem;
- --spacing-lg: 1rem;
+ /* Surface hierarchy */
+ --color-bg-raised: var(--sap-bg-shell);
+ --color-bg-sunken: var(--sap-hover);
- /* Typography */
- --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
- --font-size-sm: 0.875rem;
-}
-
-body {
- color: var(--color-text);
- background-color: var(--color-bg);
-}
-
-button,
-.button {
- color: var(--color-text-on-button);
- background-color: var(--color-bg-button);
- border: 1px solid var(--color-border);
- cursor: pointer;
-}
-
-button:hover,
-.button:hover {
- background-color: var(--color-bg-button-hover);
-}
-
-input,
-select,
-textarea {
- color: var(--color-text);
- background-color: var(--color-bg-input);
- border: 1px solid var(--color-border-row);
-}
-
-input::placeholder {
- color: var(--color-text-muted);
-}
-
-input:focus,
-select:focus,
-textarea:focus {
- outline: 1px solid var(--color-primary);
-}
+ /* State colors (SAP Horizon palette) */
+ --color-state-ok: #256f3a;
+ --color-state-warn: #e9730c;
+ --color-state-err: #bb0000;
+ --color-state-idle: var(--sap-label);
-a {
- color: var(--color-primary);
+ color-scheme: light;
}
/* Tokyo Night Storm */
-:root {
+:root[data-theme='tokyo-night-storm'] {
/* Palette */
--tn-bg-dark: #1f2335;
--tn-bg-base: #24283b;
--color-accent: var(--tn-accent);
--color-shadow-inset: rgba(0, 0, 0, 0.4);
- /* Spacing */
- --spacing-xs: 0.125rem;
- --spacing-sm: 0.25rem;
- --spacing-md: 0.5rem;
- --spacing-lg: 1rem;
+ /* Surface hierarchy */
+ --color-bg-raised: var(--tn-bg-hover);
+ --color-bg-sunken: var(--tn-bg-raised);
- /* Typography */
- --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
- --font-size-sm: 0.875rem;
-}
-
-body {
- color: var(--color-text);
- background-color: var(--color-bg);
-}
-
-button,
-.button {
- color: var(--color-text-on-button);
- background-color: var(--color-bg-button);
- border: 1px solid var(--color-border);
- cursor: pointer;
-}
-
-button:hover,
-.button:hover {
- background-color: var(--color-bg-button-hover);
-}
-
-input,
-select,
-textarea {
- color: var(--color-text);
- background-color: var(--color-bg-input);
- border: 1px solid var(--color-border-row);
-}
-
-input::placeholder {
- color: var(--color-text-muted);
-}
-
-input:focus,
-select:focus,
-textarea:focus {
- outline: 1px solid var(--color-primary);
-}
+ /* State colors */
+ --color-state-ok: #66bb6a;
+ --color-state-warn: #ffb300;
+ --color-state-err: #ef5350;
+ --color-state-idle: var(--tn-fg-muted);
-a {
- color: var(--color-primary);
+ color-scheme: dark;
}
+++ /dev/null
-<template>
- <h1 class="action-header">
- Add Charging Stations
- </h1>
- <p>Template:</p>
- <select
- :key="state.renderTemplates"
- v-model="state.template"
- >
- <option
- disabled
- value=""
- >
- Please select a template
- </option>
- <option
- v-for="template in $templates"
- v-show="Array.isArray($templates) && $templates.length > 0"
- :key="template"
- >
- {{ template }}
- </option>
- </select>
- <p>Number of stations:</p>
- <input
- id="number-of-stations"
- v-model="state.numberOfStations"
- class="number-of-stations"
- min="1"
- name="number-of-stations"
- placeholder="number of stations"
- type="number"
- >
- <p>Template options overrides:</p>
- <ul class="template-options">
- <li>
- Base name:
- <input
- id="base-name"
- v-model.trim="state.baseName"
- class="base-name"
- name="base-name"
- placeholder="<template value>"
- type="text"
- >
- Fixed name:
- <input
- v-model="state.fixedName"
- false-value="false"
- true-value="true"
- type="checkbox"
- >
- </li>
- <li>
- Supervision url:
- <input
- id="supervision-url"
- v-model.trim="state.supervisionUrl"
- class="input-url"
- name="supervision-url"
- placeholder="wss://"
- type="url"
- >
- </li>
- <li>
- Supervision credentials:
- <input
- id="supervision-user"
- v-model.trim="state.supervisionUser"
- autocomplete="off"
- class="supervision-user"
- name="supervision-user"
- placeholder="<username>"
- type="text"
- >
- <input
- id="supervision-password"
- v-model="state.supervisionPassword"
- autocomplete="off"
- class="supervision-password"
- name="supervision-password"
- placeholder="<password>"
- type="password"
- >
- </li>
- <li>
- Auto start:
- <input
- v-model="state.autoStart"
- false-value="false"
- true-value="true"
- type="checkbox"
- >
- </li>
- <li>
- Persistent configuration:
- <input
- v-model="state.persistentConfiguration"
- false-value="false"
- true-value="true"
- type="checkbox"
- >
- </li>
- <li>
- OCPP strict compliance:
- <input
- v-model="state.ocppStrictCompliance"
- false-value="false"
- true-value="true"
- type="checkbox"
- >
- </li>
- <li>
- Performance statistics:
- <input
- v-model="state.enableStatistics"
- false-value="false"
- true-value="true"
- type="checkbox"
- >
- </li>
- </ul>
- <br>
- <Button
- id="action-button"
- @click="addChargingStations()"
- >
- Add Charging Stations
- </Button>
-</template>
-
-<script setup lang="ts">
-import { convertToBoolean, randomUUID, type UUIDv4 } from 'ui-common'
-import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-import Button from '@/components/buttons/Button.vue'
-import {
- resetToggleButtonState,
- ROUTE_NAMES,
- useExecuteAction,
- useTemplates,
- useUIClient,
-} from '@/composables'
-
-const state = ref<{
- autoStart: boolean
- baseName: string
- enableStatistics: boolean
- fixedName: boolean
- numberOfStations: number
- ocppStrictCompliance: boolean
- persistentConfiguration: boolean
- renderTemplates: UUIDv4
- supervisionPassword: string
- supervisionUrl: string
- supervisionUser: string
- template: string
-}>({
- autoStart: false,
- baseName: '',
- enableStatistics: false,
- fixedName: false,
- numberOfStations: 1,
- ocppStrictCompliance: true,
- persistentConfiguration: true,
- renderTemplates: randomUUID(),
- supervisionPassword: '',
- supervisionUrl: '',
- supervisionUser: '',
- template: '',
-})
-
-const $uiClient = useUIClient()
-const $router = useRouter()
-const $templates = useTemplates()
-const executeAction = useExecuteAction()
-
-watch($templates, () => {
- state.value.renderTemplates = randomUUID()
-})
-
-const addChargingStations = (): void => {
- executeAction(
- $uiClient.addChargingStations(state.value.template, state.value.numberOfStations, {
- autoStart: convertToBoolean(state.value.autoStart),
- baseName: state.value.baseName.length > 0 ? state.value.baseName : undefined,
- enableStatistics: convertToBoolean(state.value.enableStatistics),
- fixedName:
- state.value.baseName.length > 0 ? convertToBoolean(state.value.fixedName) : undefined,
- ocppStrictCompliance: convertToBoolean(state.value.ocppStrictCompliance),
- persistentConfiguration: convertToBoolean(state.value.persistentConfiguration),
- supervisionPassword:
- state.value.supervisionPassword.length > 0 ? state.value.supervisionPassword : undefined,
- supervisionUrls:
- state.value.supervisionUrl.length > 0 ? state.value.supervisionUrl : undefined,
- supervisionUser:
- state.value.supervisionUser.length > 0 ? state.value.supervisionUser : undefined,
- }),
- 'Charging stations successfully added',
- 'Error at adding charging stations',
- {
- onFinally: () => {
- resetToggleButtonState('add-charging-stations', true)
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- },
- }
- )
-}
-</script>
-
-<style scoped>
-.number-of-stations {
- width: auto;
- max-width: 6rem;
- text-align: center;
-}
-
-.supervision-url,
-.base-name,
-.supervision-user,
-.supervision-password {
- width: 100%;
- max-width: 40rem;
- text-align: left;
-}
-
-.template-options {
- list-style: circle;
- text-align: left;
-}
-</style>
+++ /dev/null
-<template>
- <h1 class="action-header">
- Set Supervision Url
- </h1>
- <h2>{{ chargingStationId }}</h2>
- <p>Supervision url:</p>
- <input
- id="supervision-url"
- v-model.trim="state.supervisionUrl"
- class="input-url"
- name="supervision-url"
- placeholder="wss://"
- type="url"
- >
- <p>Supervision credentials:</p>
- <input
- id="supervision-user"
- v-model.trim="state.supervisionUser"
- autocomplete="off"
- class="supervision-user"
- name="supervision-user"
- placeholder="<username>"
- type="text"
- >
- <input
- id="supervision-password"
- v-model="state.supervisionPassword"
- autocomplete="off"
- class="supervision-password"
- name="supervision-password"
- placeholder="<password>"
- type="password"
- >
- <br>
- <Button
- id="action-button"
- @click="setSupervisionUrl()"
- >
- Set Supervision Url
- </Button>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toast-notification'
-
-import Button from '@/components/buttons/Button.vue'
-import { resetToggleButtonState, ROUTE_NAMES, useExecuteAction, useUIClient } from '@/composables'
-
-const props = defineProps<{
- chargingStationId: string
- hashId: string
-}>()
-
-const state = ref<{
- supervisionPassword: string
- supervisionUrl: string
- supervisionUser: string
-}>({
- supervisionPassword: '',
- supervisionUrl: '',
- supervisionUser: '',
-})
-
-const $uiClient = useUIClient()
-const $router = useRouter()
-const $toast = useToast()
-const executeAction = useExecuteAction()
-
-const setSupervisionUrl = (): void => {
- if (state.value.supervisionUrl.length === 0) {
- $toast.error('Supervision url is required')
- return
- }
- executeAction(
- $uiClient.setSupervisionUrl(
- props.hashId,
- state.value.supervisionUrl,
- state.value.supervisionUser.length > 0 ? state.value.supervisionUser : undefined,
- state.value.supervisionPassword.length > 0 ? state.value.supervisionPassword : undefined
- ),
- 'Supervision url successfully set',
- 'Error at setting supervision url',
- {
- onFinally: () => {
- resetToggleButtonState(`${props.hashId}-set-supervision-url`, true)
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- },
- }
- )
-}
-</script>
-
-<style scoped>
-.supervision-url,
-.supervision-user,
-.supervision-password {
- width: 100%;
- max-width: 40rem;
- text-align: left;
-}
-</style>
+++ /dev/null
-<template>
- <h1 class="action-header">
- Start Transaction
- </h1>
- <h2>{{ chargingStationId }}</h2>
- <h3 v-if="evseId != null">
- EVSE {{ evseId }} / Connector {{ connectorId }}
- </h3>
- <h3 v-else>
- Connector {{ connectorId }}
- </h3>
- <p>
- RFID tag:
- <input
- id="idtag"
- v-model.trim="state.idTag"
- class="idtag"
- name="idtag"
- placeholder="RFID tag"
- type="text"
- >
- </p>
- <p>
- Authorize RFID tag:
- <input
- v-model="state.authorizeIdTag"
- type="checkbox"
- >
- </p>
- <br>
- <Button
- id="action-button"
- @click="handleStartTransaction"
- >
- Start Transaction
- </Button>
-</template>
-
-<script setup lang="ts">
-import { convertToInt, type OCPPVersion } from 'ui-common'
-import { computed, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useToast } from 'vue-toast-notification'
-
-import Button from '@/components/buttons/Button.vue'
-import { resetToggleButtonState, ROUTE_NAMES, useUIClient } from '@/composables'
-
-const props = defineProps<{
- chargingStationId: string
- connectorId: string
- hashId: string
-}>()
-
-const $toast = useToast()
-const $router = useRouter()
-const $route = useRoute()
-
-const evseId = computed(() =>
- $route.query.evseId != null ? Number($route.query.evseId) : undefined
-)
-const ocppVersion = computed(() => $route.query.ocppVersion as OCPPVersion | undefined)
-
-const state = ref<{ authorizeIdTag: boolean; idTag: string }>({
- authorizeIdTag: false,
- idTag: '',
-})
-
-const $uiClient = useUIClient()
-
-const toggleButtonId = computed(
- () => `${props.hashId}-${evseId.value ?? 0}-${props.connectorId}-start-transaction`
-)
-
-const handleStartTransaction = async (): Promise<void> => {
- const idTag = state.value.idTag.length > 0 ? state.value.idTag : undefined
-
- if (state.value.authorizeIdTag) {
- if (idTag == null) {
- $toast.error('Please provide an RFID tag to authorize')
- return
- }
- try {
- await $uiClient.authorize(props.hashId, idTag)
- } catch (error) {
- $toast.error('Error at authorizing RFID tag')
- console.error('Error at authorizing RFID tag:', error)
- resetToggleButtonState(toggleButtonId.value, true)
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- return
- }
- }
-
- try {
- await $uiClient.startTransaction(props.hashId, {
- connectorId: convertToInt(props.connectorId),
- evseId: evseId.value,
- idTag,
- ocppVersion: ocppVersion.value,
- })
- $toast.success('Transaction successfully started')
- } catch (error) {
- $toast.error('Error at starting transaction')
- console.error('Error at starting transaction:', error)
- } finally {
- resetToggleButtonState(toggleButtonId.value, true)
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- }
-}
-</script>
-
-<style scoped>
-.idtag {
- text-align: center;
-}
-</style>
} as const
export const SHARED_TOGGLE_BUTTON_KEY_PREFIX = 'shared-toggle-button-'
+// Per-station keys (dynamic) — no `ecs-ui-` namespace unlike global skin/theme keys.
export const TOGGLE_BUTTON_KEY_PREFIX = 'toggle-button-'
-export const UI_SERVER_CONFIGURATION_INDEX_KEY = 'uiServerConfigurationIndex'
+export const UI_SERVER_CONFIGURATION_INDEX_KEY = 'ecs-ui-server-index'
+// Legacy key — used only for one-time migration read at boot.
+export const LEGACY_UI_SERVER_CONFIG_KEY = 'uiServerConfigurationIndex'
import { inject, ref as vueRef } from 'vue'
import { useToast } from 'vue-toast-notification'
-import { SHARED_TOGGLE_BUTTON_KEY_PREFIX, TOGGLE_BUTTON_KEY_PREFIX } from './Constants'
-import { UIClient } from './UIClient'
+import { SHARED_TOGGLE_BUTTON_KEY_PREFIX, TOGGLE_BUTTON_KEY_PREFIX } from './Constants.js'
+import { UIClient } from './UIClient.js'
export const configurationKey: InjectionKey<Ref<ConfigurationData>> = Symbol('configuration')
export const chargingStationsKey: InjectionKey<Ref<ChargingStationData[]>> =
export const uiClientKey: InjectionKey<UIClient> = Symbol('uiClient')
export const getFromLocalStorage = <T>(key: string, defaultValue: T): T => {
- const item = localStorage.getItem(key)
- return item != null ? (JSON.parse(item) as T) : defaultValue
+ try {
+ const item = localStorage.getItem(key)
+ return item != null ? (JSON.parse(item) as T) : defaultValue
+ } catch {
+ if (import.meta.env.DEV) {
+ console.debug(`[localStorage] Failed to read key '${key}', using default`)
+ }
+ return defaultValue
+ }
}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
export const setToLocalStorage = <T>(key: string, value: T): void => {
- localStorage.setItem(key, JSON.stringify(value))
+ try {
+ localStorage.setItem(key, JSON.stringify(value))
+ } catch {
+ // localStorage.setItem() can throw:
+ // - QuotaExceededError when the origin's storage quota is genuinely exceeded
+ // - SecurityError when storage is blocked by user settings or browser policies
+ // (e.g., "Block All Cookies" in Safari, third-party iframe in Chrome, file: URLs)
+ if (import.meta.env.DEV) {
+ console.debug(`[localStorage] Failed to write key '${key}'`)
+ }
+ }
}
export const deleteFromLocalStorage = (key: string): void => {
- localStorage.removeItem(key)
+ try {
+ localStorage.removeItem(key)
+ } catch {
+ if (import.meta.env.DEV) {
+ console.debug(`[localStorage] Failed to delete key '${key}'`)
+ }
+ }
}
export const getLocalStorage = (): Storage => {
- return localStorage
+ try {
+ return localStorage
+ } catch {
+ throw new Error('localStorage is not available')
+ }
}
/**
* @param pattern - Substring to match against localStorage keys
*/
export const deleteLocalStorageByKeyPattern = (pattern: string): void => {
- const keysToDelete = Object.keys(localStorage).filter(key => key.includes(pattern))
- for (const key of keysToDelete) {
- deleteFromLocalStorage(key)
+ try {
+ const keysToDelete = Object.keys(localStorage).filter(key => key.includes(pattern))
+ for (const key of keysToDelete) {
+ deleteFromLocalStorage(key)
+ }
+ } catch {
+ if (import.meta.env.DEV) {
+ console.debug(`[localStorage] Failed to delete keys matching '${pattern}'`)
+ }
}
}
export const useUIClient = (): UIClient => {
const injected = inject(uiClientKey, undefined)
if (injected != null) return injected
+ if (import.meta.env.DEV) {
+ console.debug('[useUIClient] Accessed outside provide scope — using singleton fallback')
+ }
return UIClient.getInstance()
}
throw new Error('templates not provided')
}
-export interface ExecuteActionCallbacks {
- onFinally?: () => void
- onSuccess?: () => void
-}
-
-export const useExecuteAction = (emit?: (event: 'need-refresh') => void) => {
- const $toast = useToast()
- return (
- action: Promise<unknown>,
- successMsg: string,
- errorMsg: string,
- callbacks?: ExecuteActionCallbacks
- ): void => {
- const { onFinally, onSuccess } = callbacks ?? {}
- action
- .then(() => {
- try {
- onSuccess?.()
- } catch (error: unknown) {
- console.error('Error in onSuccess callback:', error)
- }
- emit?.('need-refresh')
- return $toast.success(successMsg)
- })
- .finally(() => {
- try {
- onFinally?.()
- } catch (error: unknown) {
- console.error('Error in onFinally callback:', error)
- }
- })
- .catch((error: unknown) => {
- $toast.error(errorMsg)
- console.error(`${errorMsg}:`, error)
- })
- }
-}
-
export const useFetchData = (
clientFn: () => Promise<ResponsePayload>,
onSuccess: (response: ResponsePayload) => void,
export {
EMPTY_VALUE_PLACEHOLDER,
+ LEGACY_UI_SERVER_CONFIG_KEY,
ROUTE_NAMES,
SHARED_TOGGLE_BUTTON_KEY_PREFIX,
TOGGLE_BUTTON_KEY_PREFIX,
UI_SERVER_CONFIGURATION_INDEX_KEY,
-} from './Constants'
-export { UIClient } from './UIClient'
+} from './Constants.js'
+export { UIClient } from './UIClient.js'
export {
chargingStationsKey,
configurationKey,
uiClientKey,
useChargingStations,
useConfiguration,
- useExecuteAction,
useFetchData,
useTemplates,
useUIClient,
-} from './Utils'
+} from './Utils.js'
UIServerConfigurationSection,
} from 'ui-common'
-import { type App as AppType, type Component, createApp, ref } from 'vue'
+import { configurationSchema } from 'ui-common'
+import { type App as AppType, type Component, createApp, shallowRef } from 'vue'
import App from '@/App.vue'
import {
chargingStationsKey,
configurationKey,
getFromLocalStorage,
+ LEGACY_UI_SERVER_CONFIG_KEY,
setToLocalStorage,
templatesKey,
UI_SERVER_CONFIGURATION_INDEX_KEY,
UIClient,
uiClientKey,
-} from '@/composables'
+} from '@/composables/index.js'
import { router } from '@/router'
+import { SKIN_STORAGE_KEY, useSkin } from '@/shared/composables/useSkin.js'
+import { DEFAULT_THEME, THEME_STORAGE_KEY, useTheme } from '@/shared/composables/useTheme.js'
+import { DEFAULT_SKIN } from '@/skins/registry.js'
import 'vue-toast-notification/dist/theme-bootstrap.css'
import './assets/shared.css'
-
-const DEFAULT_THEME = 'tokyo-night-storm'
-
-const loadTheme = async (theme: string): Promise<void> => {
- try {
- await import(`./assets/themes/${theme}.css`)
- } catch {
- console.error(`Theme '${theme}' not found, falling back to '${DEFAULT_THEME}'`)
- await import(`./assets/themes/${DEFAULT_THEME}.css`)
- }
-}
+import './assets/themes/base.css'
+import './assets/themes/catppuccin-latte.css'
+import './assets/themes/sap-horizon.css'
+import './assets/themes/tokyo-night-storm.css'
const initializeApp = async (app: AppType, config: ConfigurationData): Promise<void> => {
- await loadTheme(config.theme ?? DEFAULT_THEME)
app.config.errorHandler = (error, instance, info) => {
console.error('Error:', error)
console.info('Vue instance:', instance)
console.info('Error info:', info)
// TODO: add code for UI notifications or other error handling logic
}
+
+ const { switchTheme } = useTheme()
+ const storedTheme = getFromLocalStorage<string>(THEME_STORAGE_KEY, config.theme ?? DEFAULT_THEME)
+ switchTheme(storedTheme)
+
+ const { switchSkin } = useSkin()
+ if (getFromLocalStorage<string>(SKIN_STORAGE_KEY, '') === '' && config.skin != null) {
+ setToLocalStorage<string>(SKIN_STORAGE_KEY, config.skin)
+ }
+ const initialSkin = getFromLocalStorage<string>(SKIN_STORAGE_KEY, config.skin ?? 'classic')
+ const switched = await switchSkin(initialSkin)
+ if (!switched && initialSkin !== DEFAULT_SKIN) {
+ console.warn(`[useSkin] Failed to load skin '${initialSkin}', falling back to default`)
+ await switchSkin(DEFAULT_SKIN)
+ }
+
if (!Array.isArray(config.uiServer)) {
config.uiServer = [config.uiServer]
}
- const configuration = ref(config)
- const templates = ref<string[]>([])
- const chargingStations = ref<ChargingStationData[]>([])
+ const configuration = shallowRef(config)
+ const templates = shallowRef<string[]>([])
+ const chargingStations = shallowRef<ChargingStationData[]>([])
+ try {
+ const legacyIndex = localStorage.getItem(LEGACY_UI_SERVER_CONFIG_KEY)
+ if (legacyIndex != null && localStorage.getItem(UI_SERVER_CONFIGURATION_INDEX_KEY) == null) {
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, legacyIndex)
+ localStorage.removeItem(LEGACY_UI_SERVER_CONFIG_KEY)
+ }
+ } catch {
+ // localStorage access can throw in restricted environments
+ }
if (
getFromLocalStorage<number | undefined>(UI_SERVER_CONFIGURATION_INDEX_KEY, undefined) == null ||
getFromLocalStorage(UI_SERVER_CONFIGURATION_INDEX_KEY, 0) >
response = await fetch('/config.json')
} catch (error: unknown) {
console.error('Error at fetching app configuration:', error)
+ const errorPre = document.createElement('pre')
+ errorPre.className = 'config-error'
+ errorPre.textContent = 'Failed to load configuration. Check that config.json is accessible.'
+ document.body.replaceChildren(errorPre)
return
}
if (!response.ok) {
}
let config: ConfigurationData
try {
- config = (await response.json()) as ConfigurationData
+ const rawConfig: unknown = await response.json()
+ const parseResult = configurationSchema.safeParse(rawConfig)
+ if (!parseResult.success) {
+ const msgs = parseResult.error.issues.map(i => `${i.path.join('.')}: ${i.message}`).join('\n')
+ const errorPre = document.createElement('pre')
+ errorPre.className = 'config-error'
+ errorPre.textContent = `Configuration error in config.json:\n${msgs}`
+ document.body.replaceChildren(errorPre)
+ return
+ }
+ config = parseResult.data
} catch (error: unknown) {
console.error('Error at deserializing JSON app configuration:', error)
return
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { createRouter, createWebHistory } from 'vue-router'
+import { type SKIN_IDS } from 'ui-common'
+import { h } from 'vue'
+import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router'
+import { useToast } from 'vue-toast-notification'
-import AddChargingStations from '@/components/actions/AddChargingStations.vue'
-import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
-import StartTransaction from '@/components/actions/StartTransaction.vue'
-import { ROUTE_NAMES } from '@/composables'
-import ChargingStationsView from '@/views/ChargingStationsView.vue'
-import NotFoundView from '@/views/NotFoundView.vue'
+import { ROUTE_NAMES } from '@/composables/index.js'
+import { useSkin } from '@/shared/composables/useSkin.js'
+import { DEFAULT_SKIN } from '@/skins/registry.js'
+
+declare module 'vue-router' {
+ interface RouteMeta {
+ skinOnly?: (typeof SKIN_IDS)[number]
+ }
+}
+
+/** Placeholder component for routes where the skin layout handles all rendering. */
+const PassthroughRoute = { render: () => null } as const
+
+/**
+ * Routes serve the classic skin's action panel (sidebar forms via named `action` view).
+ * The modern skin uses modal dialogs instead of router navigation.
+ * The home route (`/`) renders null because layout components handle content directly.
+ * Routes with `meta.skinOnly` are guarded and redirect to `/` for other skins.
+ *
+ * NOTE: Classic action routes directly import from `@/skins/classic/components/actions/`.
+ * This coupling is intentional — only the classic skin uses router-based navigation panels.
+ * If a third skin needs router-based panels, consider a dynamic route registration pattern.
+ */
+
+/**
+ * Restricts skin-specific routes, redirecting to home with a toast if the skin doesn't match.
+ * @param to - The target route location to evaluate
+ * @returns A redirect object to the home route, or undefined to allow navigation
+ */
+function skinGuard (to: RouteLocationNormalized) {
+ if (to.meta.skinOnly != null) {
+ const { activeSkinId } = useSkin()
+ if (to.meta.skinOnly !== activeSkinId.value) {
+ // Safe outside setup: useToast() is a stateless factory, no injection context required.
+ const $toast = useToast()
+ $toast.info('This page is not available in the current skin.')
+ return { name: ROUTE_NAMES.CHARGING_STATIONS }
+ }
+ }
+}
export const router = createRouter({
history: createWebHistory(),
routes: [
{
- components: {
- default: ChargingStationsView,
- },
+ component: PassthroughRoute,
name: ROUTE_NAMES.CHARGING_STATIONS,
path: '/',
},
{
+ beforeEnter: skinGuard,
components: {
- action: AddChargingStations,
- default: ChargingStationsView,
+ action: () => import('@/skins/classic/components/actions/AddChargingStations.vue'),
},
+ meta: { skinOnly: DEFAULT_SKIN },
name: ROUTE_NAMES.ADD_CHARGING_STATIONS,
path: '/add-charging-stations',
},
{
+ beforeEnter: skinGuard,
components: {
- action: SetSupervisionUrl,
- default: ChargingStationsView,
+ action: () => import('@/skins/classic/components/actions/SetSupervisionUrl.vue'),
},
+ meta: { skinOnly: DEFAULT_SKIN },
name: ROUTE_NAMES.SET_SUPERVISION_URL,
path: '/set-supervision-url/:hashId/:chargingStationId',
- props: { action: true, default: false },
+ props: { action: true },
},
{
+ beforeEnter: skinGuard,
components: {
- action: StartTransaction,
- default: ChargingStationsView,
+ action: () => import('@/skins/classic/components/actions/StartTransaction.vue'),
},
+ meta: { skinOnly: DEFAULT_SKIN },
name: ROUTE_NAMES.START_TRANSACTION,
path: '/start-transaction/:hashId/:chargingStationId/:connectorId',
- props: { action: true, default: false },
+ props: { action: true },
},
{
- components: {
- default: NotFoundView,
+ component: {
+ render: () =>
+ h(
+ 'p',
+ {
+ style:
+ 'padding: var(--spacing-md, 1rem); text-align: center; color: var(--color-text, inherit)',
+ },
+ '404 — Page not found'
+ ),
},
name: ROUTE_NAMES.NOT_FOUND,
path: '/:pathMatch(.*)*',
},
],
})
+
+router.beforeEach(to => {
+ if (to.name === ROUTE_NAMES.NOT_FOUND) {
+ return { name: ROUTE_NAMES.CHARGING_STATIONS }
+ }
+})
--- /dev/null
+<template>
+ <div class="skin-load-error">
+ <p>Failed to load skin layout.</p>
+ <button @click="$emit('retry')">
+ Retry
+ </button>
+ <button @click="resetToDefault">
+ Switch to {{ defaultSkinLabel }}
+ </button>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { setToLocalStorage } from '@/composables/Utils.js'
+import { SKIN_STORAGE_KEY } from '@/shared/composables/useSkin.js'
+import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+
+defineEmits<{ retry: [] }>()
+
+const defaultSkinLabel = skins.find(s => s.id === DEFAULT_SKIN)?.label ?? 'Default'
+
+/**
+ * Resets to default skin with reload loop protection.
+ * NOTE: Successful skin loads (e.g. in useSkin.switchSkin) should clear
+ * the 'skin-error-reload-count' sessionStorage key to reset the counter.
+ */
+function resetToDefault (): void {
+ const RELOAD_KEY = 'skin-error-reload-count'
+ let count = 0
+ try {
+ count = Number(sessionStorage.getItem(RELOAD_KEY) ?? '0')
+ } catch {
+ // sessionStorage unavailable (e.g. Safari private browsing)
+ }
+ if (count >= 2) {
+ // Stop infinite reload loop — show message instead
+ return
+ }
+ try {
+ sessionStorage.setItem(RELOAD_KEY, String(count + 1))
+ } catch {
+ // sessionStorage unavailable — proceed with reset anyway
+ }
+ setToLocalStorage<string>(SKIN_STORAGE_KEY, DEFAULT_SKIN)
+ window.location.reload()
+}
+</script>
+
+<style scoped>
+.skin-load-error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ min-height: 50vh;
+ padding: 2rem;
+ color: var(--color-text, #e0e0e0);
+ font-family: system-ui, sans-serif;
+}
+
+.skin-load-error button {
+ padding: 0.5rem 1.25rem;
+ border: 1px solid currentColor;
+ border-radius: 4px;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+ font-size: 0.875rem;
+}
+
+.skin-load-error button:hover {
+ background: rgba(255, 255, 255, 0.08);
+}
+</style>
--- /dev/null
+<template>
+ <div class="skin-loading">
+ <div class="skin-loading__spinner" />
+ <p>Loading…</p>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'SkinLoading' })
+</script>
+
+<style scoped>
+.skin-loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ min-height: 50vh;
+ padding: 2rem;
+ color: var(--color-text, #e0e0e0);
+ font-family: system-ui, sans-serif;
+}
+
+.skin-loading__spinner {
+ width: 24px;
+ height: 24px;
+ border: 3px solid currentColor;
+ border-top-color: transparent;
+ border-radius: 50%;
+ animation: skin-spin 700ms linear infinite;
+}
+
+@keyframes skin-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+</style>
--- /dev/null
+export { useAddStationsForm } from './useAddStationsForm.js'
+export { useAsyncAction } from './useAsyncAction.js'
+export { useConnectorActions } from './useConnectorActions.js'
+export { useLayoutData } from './useLayoutData.js'
+export { useSetUrlForm } from './useSetUrlForm.js'
+export { useSimulatorControl } from './useSimulatorControl.js'
+export { SKIN_STORAGE_KEY, useSkin } from './useSkin.js'
+export type { SkinName } from './useSkin.js'
+export { useStartTxForm } from './useStartTxForm.js'
+export { useStationActions } from './useStationActions.js'
+export { AVAILABLE_THEMES, DEFAULT_THEME, THEME_STORAGE_KEY, useTheme } from './useTheme.js'
+export type { ThemeName } from './useTheme.js'
--- /dev/null
+import { randomUUID, type UUIDv4 } from 'ui-common'
+import { type DeepReadonly, readonly, ref, type Ref, watch } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import { useTemplates, useUIClient } from '@/composables/Utils.js'
+
+export interface AddStationsFormState {
+ autoStart: boolean
+ baseName: string
+ enableStatistics: boolean
+ fixedName: boolean
+ numberOfStations: number
+ ocppStrictCompliance: boolean
+ persistentConfiguration: boolean
+ renderTemplates: UUIDv4
+ supervisionPassword: string
+ supervisionUrl: string
+ supervisionUser: string
+ template: string
+}
+
+/**
+ * Returns form state and submission logic for adding charging stations.
+ * @param options - Optional callbacks
+ * @param options.onFinally - Called after the action completes (success or failure), before form reset
+ * @returns Form state, templates, submit, and reset functions
+ */
+export function useAddStationsForm (options?: { onFinally?: () => void }): {
+ formState: Ref<AddStationsFormState>
+ pending: Readonly<Ref<boolean>>
+ resetForm: () => void
+ submitForm: () => Promise<boolean>
+ templates: DeepReadonly<Ref<string[]>>
+} {
+ const $uiClient = useUIClient()
+ const $templates = useTemplates()
+ const $toast = useToast()
+
+ const formState = ref<AddStationsFormState>(makeInitialState())
+ const pending = ref(false)
+
+ watch($templates, () => {
+ formState.value.renderTemplates = randomUUID()
+ })
+
+ /** Resets form state to initial defaults. */
+ function resetForm (): void {
+ formState.value = makeInitialState()
+ }
+
+ /**
+ * Submits the form to add charging stations via the UI client.
+ * @returns Whether the submission was successful
+ */
+ async function submitForm (): Promise<boolean> {
+ if (formState.value.template.length === 0) {
+ $toast.error('Please select a template')
+ return false
+ }
+ if (pending.value) return false
+ pending.value = true
+ try {
+ await $uiClient.addChargingStations(
+ formState.value.template,
+ formState.value.numberOfStations,
+ {
+ autoStart: formState.value.autoStart,
+ baseName: nonEmpty(formState.value.baseName),
+ enableStatistics: formState.value.enableStatistics,
+ fixedName: formState.value.baseName.length > 0 ? formState.value.fixedName : undefined,
+ ocppStrictCompliance: formState.value.ocppStrictCompliance,
+ persistentConfiguration: formState.value.persistentConfiguration,
+ supervisionPassword: nonEmpty(formState.value.supervisionPassword),
+ supervisionUrls: nonEmpty(formState.value.supervisionUrl),
+ supervisionUser: nonEmpty(formState.value.supervisionUser),
+ }
+ )
+ $toast.success('Charging stations successfully added')
+ return true
+ } catch (error: unknown) {
+ $toast.error('Error at adding charging stations')
+ console.error('Error at adding charging stations:', error)
+ return false
+ } finally {
+ pending.value = false
+ options?.onFinally?.()
+ resetForm()
+ }
+ }
+
+ return {
+ formState,
+ pending: readonly(pending),
+ resetForm,
+ submitForm,
+ templates: readonly($templates),
+ }
+}
+
+/**
+ * Returns a fresh copy of the default form state.
+ * Using a factory avoids sharing mutable state between initialization and reset.
+ * @returns A new {@link AddStationsFormState} with all fields set to their defaults.
+ */
+function makeInitialState (): AddStationsFormState {
+ return {
+ autoStart: false,
+ baseName: '',
+ enableStatistics: false,
+ fixedName: false,
+ numberOfStations: 1,
+ ocppStrictCompliance: true,
+ persistentConfiguration: true,
+ renderTemplates: randomUUID(),
+ supervisionPassword: '',
+ supervisionUrl: '',
+ supervisionUser: '',
+ template: '',
+ }
+}
+
+/**
+ * Returns `value` when it is non-empty, otherwise `undefined`.
+ * @param value - The string to test.
+ * @returns The original string, or `undefined` if it is empty.
+ */
+function nonEmpty (value: string): string | undefined {
+ return value.length > 0 ? value : undefined
+}
--- /dev/null
+/**
+ * @file useAsyncAction.ts
+ * @description Shared async action executor with pending-key guard and toast notifications.
+ */
+import { getCurrentScope, onScopeDispose, reactive, readonly } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+/**
+ * Creates a reactive pending-state map and a run() helper for async actions with toast notifications.
+ *
+ * Encapsulates the pending-key guard, toast feedback, and error logging pattern
+ * shared by modern skin components.
+ * @param initialPending - Object defining the pending keys (e.g. `{ connection: false, startStop: false }`)
+ * @param onRefresh - Called after each successful action (e.g. `() => emit('need-refresh')`)
+ * @returns `{ pending, run }` — reactive pending map and action executor
+ */
+export function useAsyncAction<T extends Record<string, boolean>> (
+ initialPending: T,
+ onRefresh?: () => void
+): {
+ pending: Readonly<T>
+ run: (
+ key: keyof T,
+ options: {
+ action: () => Promise<unknown>
+ errorMsg: string
+ onSuccess?: () => void
+ successMsg: string
+ }
+ ) => void
+ } {
+ const $toast = useToast()
+ /**
+ * Reactive pending-state map. Access properties directly (e.g. `pending.connection`)
+ * — do NOT destructure individual keys, as `reactive()` proxies lose reactivity on destructure.
+ */
+ const pending = reactive({ ...initialPending }) as T
+
+ let disposed = false
+ if (getCurrentScope() != null) {
+ onScopeDispose(() => {
+ disposed = true
+ })
+ }
+
+ /**
+ * Executes an async action with pending-key guard, toast feedback, and error logging.
+ * @param key - The pending key to guard and track
+ * @param options - Action configuration with action, messages, and optional success callback
+ * @param options.action - The async operation to execute
+ * @param options.errorMsg - Toast message and console prefix on failure
+ * @param options.onSuccess - Optional callback invoked after success (before onRefresh)
+ * @param options.successMsg - Toast message on success
+ */
+ function run (
+ key: keyof T,
+ options: {
+ action: () => Promise<unknown>
+ errorMsg: string
+ onSuccess?: () => void
+ successMsg: string
+ }
+ ): void {
+ const { action, errorMsg, onSuccess, successMsg } = options
+ if (pending[key]) return
+ pending[key] = true as T[keyof T]
+ // eslint-disable-next-line no-void
+ void (async () => {
+ try {
+ await action()
+ if (disposed) return
+ try {
+ onSuccess?.()
+ } catch (error: unknown) {
+ console.error('Error in onSuccess callback:', error)
+ }
+ $toast.success(successMsg)
+ try {
+ onRefresh?.()
+ } catch (error: unknown) {
+ console.error('Error in onRefresh callback:', error)
+ }
+ } catch (error: unknown) {
+ if (disposed) return
+ console.error(`${errorMsg}:`, error)
+ $toast.error(errorMsg)
+ } finally {
+ if (!disposed) {
+ pending[key] = false as T[keyof T]
+ }
+ }
+ })()
+ }
+
+ return { pending: readonly(pending) as Readonly<T>, run }
+}
--- /dev/null
+/**
+ * @file useConnectorActions.ts
+ * @description Headless composable for connector-level actions (stop transaction, lock/unlock, ATG toggle).
+ */
+import type { OCPPVersion } from 'ui-common'
+
+import { computed, type MaybeRefOrGetter, readonly, toValue } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import { useUIClient } from '@/composables/Utils.js'
+import { useAsyncAction } from '@/shared/composables/useAsyncAction.js'
+
+interface ConnectorActionsDeps {
+ connectorId: MaybeRefOrGetter<number>
+ hashId: MaybeRefOrGetter<string>
+ onRefresh?: () => void
+}
+
+/**
+ * Provides connector-level action handlers with pending state management.
+ * @param deps - Connector identity and optional refresh callback
+ * @returns Action functions and reactive pending state
+ */
+export function useConnectorActions (deps: ConnectorActionsDeps): {
+ lockConnector: () => void
+ pending: Readonly<{ atg: boolean; lock: boolean; stopTx: boolean }>
+ startATG: () => void
+ stopATG: () => void
+ stopTransaction: (
+ transactionId: null | number | string | undefined,
+ ocppVersion?: OCPPVersion
+ ) => void
+ unlockConnector: () => void
+} {
+ const $uiClient = useUIClient()
+ const $toast = useToast()
+ const { pending, run } = useAsyncAction(
+ { atg: false, lock: false, stopTx: false },
+ deps.onRefresh
+ )
+
+ const hashId = computed(() => toValue(deps.hashId))
+ const connectorId = computed(() => toValue(deps.connectorId))
+
+ const stopTransaction = (
+ transactionId: null | number | string | undefined,
+ ocppVersion?: OCPPVersion
+ ): void => {
+ if (transactionId == null) {
+ $toast.error('No transaction to stop')
+ return
+ }
+ run('stopTx', {
+ action: () =>
+ $uiClient.stopTransaction(hashId.value, {
+ ocppVersion,
+ transactionId,
+ }),
+ errorMsg: 'Error stopping transaction',
+ successMsg: 'Transaction stopped',
+ })
+ }
+
+ const lockConnector = (): void => {
+ run('lock', {
+ action: () => $uiClient.lockConnector(hashId.value, connectorId.value),
+ errorMsg: 'Error locking connector',
+ successMsg: 'Connector locked',
+ })
+ }
+
+ const unlockConnector = (): void => {
+ run('lock', {
+ action: () => $uiClient.unlockConnector(hashId.value, connectorId.value),
+ errorMsg: 'Error unlocking connector',
+ successMsg: 'Connector unlocked',
+ })
+ }
+
+ const startATG = (): void => {
+ run('atg', {
+ action: () => $uiClient.startAutomaticTransactionGenerator(hashId.value, connectorId.value),
+ errorMsg: 'Error starting ATG',
+ successMsg: 'ATG started',
+ })
+ }
+
+ const stopATG = (): void => {
+ run('atg', {
+ action: () => $uiClient.stopAutomaticTransactionGenerator(hashId.value, connectorId.value),
+ errorMsg: 'Error stopping ATG',
+ successMsg: 'ATG stopped',
+ })
+ }
+
+ return {
+ lockConnector,
+ pending: readonly(pending),
+ startATG,
+ stopATG,
+ stopTransaction,
+ unlockConnector,
+ }
+}
--- /dev/null
+import type { ChargingStationData, SimulatorState, UIServerConfigurationSection } from 'ui-common'
+
+import {
+ computed,
+ type ComputedRef,
+ onMounted,
+ onUnmounted,
+ readonly,
+ type Ref,
+ shallowRef,
+} from 'vue'
+
+import {
+ useChargingStations,
+ useConfiguration,
+ useFetchData,
+ useTemplates,
+ useUIClient,
+} from '@/composables/index.js'
+
+export interface LayoutData {
+ /** Fetches only the charging stations list. */
+ getChargingStations: () => void
+ /** Fetches simulator state, templates, and charging stations. */
+ getData: () => void
+ /** Fetches only the simulator state. */
+ getSimulatorState: () => void
+ /** Whether any data fetch is currently in progress. */
+ loading: ComputedRef<boolean>
+ /** Registers WS event listeners for open/error/close. */
+ registerWSEventListeners: () => void
+ /** Whether the simulator has been started. */
+ simulatorStarted: ComputedRef<boolean | undefined>
+ /** The current simulator state object. */
+ simulatorState: Readonly<Ref<SimulatorState | undefined>>
+ /** Mapped array of UI server configurations with their indices. */
+ uiServerConfigurations: ComputedRef<
+ { configuration: UIServerConfigurationSection; index: number }[]
+ >
+ /** Unregisters WS event listeners previously registered. */
+ unregisterWSEventListeners: () => void
+}
+
+/**
+ * Extracts the common data-fetching and WebSocket lifecycle logic shared by layout components.
+ *
+ * Registers `onMounted` / `onUnmounted` hooks internally so consumers do not need to.
+ * @returns Layout data state and control functions
+ */
+export function useLayoutData (): LayoutData {
+ const $uiClient = useUIClient()
+ const $configuration = useConfiguration()
+ const $templates = useTemplates()
+ const $chargingStations = useChargingStations()
+
+ const simulatorState = shallowRef<SimulatorState | undefined>(undefined)
+ const simulatorStarted = computed((): boolean | undefined => simulatorState.value?.started)
+
+ const clearTemplates = (): void => {
+ $templates.value = []
+ }
+
+ const clearChargingStations = (): void => {
+ $chargingStations.value = []
+ }
+
+ const { fetch: getSimulatorState, fetching: fetchingSimulatorState } = useFetchData(
+ () => $uiClient.simulatorState(),
+ response => {
+ simulatorState.value = response.state as unknown as SimulatorState
+ },
+ 'Error at fetching simulator state'
+ )
+
+ const { fetch: getTemplates, fetching: fetchingTemplates } = useFetchData(
+ () => $uiClient.listTemplates(),
+ response => {
+ $templates.value = response.templates as string[]
+ },
+ 'Error at fetching charging station templates',
+ clearTemplates
+ )
+
+ const { fetch: getChargingStations, fetching: fetchingChargingStations } = useFetchData(
+ () => $uiClient.listChargingStations(),
+ response => {
+ $chargingStations.value = response.chargingStations as ChargingStationData[]
+ },
+ 'Error at fetching charging stations',
+ clearChargingStations
+ )
+
+ const loading = computed(
+ () => fetchingSimulatorState.value || fetchingTemplates.value || fetchingChargingStations.value
+ )
+
+ const uiServerConfigurations = computed(() =>
+ ($configuration.value.uiServer as UIServerConfigurationSection[]).map(
+ (configuration, index) => ({ configuration, index })
+ )
+ )
+
+ const getData = (): void => {
+ getSimulatorState()
+ getTemplates()
+ getChargingStations()
+ }
+
+ const registerWSEventListeners = (): void => {
+ $uiClient.registerWSEventListener('open', getData)
+ $uiClient.registerWSEventListener('error', clearChargingStations)
+ $uiClient.registerWSEventListener('close', clearChargingStations)
+ }
+
+ const unregisterWSEventListeners = (): void => {
+ $uiClient.unregisterWSEventListener('open', getData)
+ $uiClient.unregisterWSEventListener('error', clearChargingStations)
+ $uiClient.unregisterWSEventListener('close', clearChargingStations)
+ }
+
+ let unsubscribeRefresh: (() => void) | undefined
+
+ onMounted(() => {
+ registerWSEventListeners()
+ unsubscribeRefresh = $uiClient.onRefresh(() => {
+ getChargingStations()
+ })
+ })
+
+ onUnmounted(() => {
+ unregisterWSEventListeners()
+ unsubscribeRefresh?.()
+ })
+
+ return {
+ getChargingStations,
+ getData,
+ getSimulatorState,
+ loading,
+ // Exposed for edge cases (e.g. hot-reload); normally called via onMounted/onUnmounted.
+ registerWSEventListeners,
+ simulatorStarted,
+ simulatorState: readonly(simulatorState) as Readonly<Ref<SimulatorState | undefined>>,
+ uiServerConfigurations,
+ unregisterWSEventListeners,
+ }
+}
--- /dev/null
+import { readonly, ref, type Ref } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import { useUIClient } from '@/composables/Utils.js'
+
+export interface SetUrlFormState {
+ supervisionPassword: string
+ supervisionUrl: string
+ supervisionUser: string
+}
+
+/**
+ * Returns form state and submission logic for setting the supervision URL.
+ * @param hashId - The charging station hash identifier
+ * @param chargingStationId - The charging station display identifier
+ * @returns Form state and submit/reset functions
+ */
+export function useSetUrlForm (
+ hashId: string,
+ chargingStationId: string
+): {
+ chargingStationId: string
+ formState: Ref<SetUrlFormState>
+ pending: Readonly<Ref<boolean>>
+ resetForm: () => void
+ submitForm: () => Promise<boolean>
+ } {
+ const $uiClient = useUIClient()
+ const $toast = useToast()
+
+ const formState = ref<SetUrlFormState>(makeInitialState())
+ const pending = ref(false)
+
+ /** Resets form state to initial defaults. */
+ function resetForm (): void {
+ formState.value = makeInitialState()
+ }
+
+ /**
+ * Validates and submits the supervision URL update.
+ * @returns Whether the submission was successful
+ */
+ async function submitForm (): Promise<boolean> {
+ if (pending.value) return false
+ if (formState.value.supervisionUrl.length === 0) {
+ $toast.error('Supervision url is required')
+ return false
+ }
+ pending.value = true
+ try {
+ await $uiClient.setSupervisionUrl(
+ hashId,
+ formState.value.supervisionUrl,
+ formState.value.supervisionUser,
+ formState.value.supervisionPassword
+ )
+ $toast.success('Supervision url successfully set')
+ return true
+ } catch (error: unknown) {
+ $toast.error('Error at setting supervision url')
+ console.error('Error at setting supervision url:', error)
+ return false
+ } finally {
+ pending.value = false
+ }
+ }
+
+ return {
+ chargingStationId,
+ formState,
+ pending: readonly(pending),
+ resetForm,
+ submitForm,
+ }
+}
+
+/**
+ * Returns a fresh copy of the default form state.
+ * Using a factory avoids sharing mutable state between initialization and reset.
+ * @returns A new {@link SetUrlFormState} with all fields set to their defaults.
+ */
+function makeInitialState (): SetUrlFormState {
+ return {
+ supervisionPassword: '',
+ supervisionUrl: '',
+ supervisionUser: '',
+ }
+}
--- /dev/null
+import type { UIServerConfigurationSection } from 'ui-common'
+import type { ComputedRef, Ref } from 'vue'
+
+import { computed, onScopeDispose, readonly, ref } from 'vue'
+
+import {
+ getFromLocalStorage,
+ setToLocalStorage,
+ UI_SERVER_CONFIGURATION_INDEX_KEY,
+ useChargingStations,
+ useConfiguration,
+ useUIClient,
+} from '@/composables/index.js'
+import { useAsyncAction } from '@/shared/composables/useAsyncAction.js'
+import { type LayoutData } from '@/shared/composables/useLayoutData.js'
+
+export interface SimulatorControlActions {
+ /** Switches the active UI server, with error rollback on connection failure. */
+ handleUIServerChange: (newIndex: number) => void
+ /** Whether a server switch operation is in progress. */
+ serverSwitchPending: Readonly<Ref<boolean>>
+ /** Whether a simulator start/stop operation is in progress. */
+ simulatorPending: ComputedRef<boolean>
+ /** Starts the simulator and refreshes state on completion. */
+ startSimulator: () => void
+ /** Stops the simulator and clears charging stations on success. */
+ stopSimulator: () => void
+}
+
+export interface SimulatorControlOptions {
+ /** Called after a successful server switch (e.g. to clear UI state). */
+ onServerSwitched?: () => void
+ /** Called after the simulator stops successfully (e.g. to reset toggle buttons). */
+ onSimulatorStopped?: () => void
+}
+
+/**
+ * Shared composable encapsulating simulator start/stop and UI server switching logic.
+ *
+ * Provides consistent error handling and rollback behavior across layout skins.
+ * @param layoutData - Layout data providing getSimulatorState, registerWSEventListeners, and unregisterWSEventListeners
+ * @param options - Optional callbacks for skin-specific side effects
+ * @returns Simulator control actions and pending state refs
+ */
+export function useSimulatorControl (
+ layoutData: Partial<Pick<LayoutData, 'unregisterWSEventListeners'>> &
+ Pick<LayoutData, 'getSimulatorState' | 'registerWSEventListeners'>,
+ options?: SimulatorControlOptions
+): SimulatorControlActions {
+ const $uiClient = useUIClient()
+ const $configuration = useConfiguration()
+ const $chargingStations = useChargingStations()
+
+ const { getSimulatorState, registerWSEventListeners } = layoutData
+ const unregisterWSEventListeners =
+ layoutData.unregisterWSEventListeners ??
+ ((): void => {
+ /* no-op */
+ })
+
+ const { pending: simulatorPendingState, run: runSimulatorAction } = useAsyncAction(
+ { simulator: false },
+ getSimulatorState
+ )
+ const serverSwitchPending = ref(false)
+ let activeTimeoutId: ReturnType<typeof setTimeout> | undefined
+ let pendingOpenHandler: (() => void) | undefined
+ let pendingErrorHandler: (() => void) | undefined
+
+ const startSimulator = (): void => {
+ runSimulatorAction('simulator', {
+ action: () => $uiClient.startSimulator(),
+ errorMsg: 'Error at starting simulator',
+ successMsg: 'Simulator successfully started',
+ })
+ }
+
+ const stopSimulator = (): void => {
+ runSimulatorAction('simulator', {
+ action: async () => {
+ await $uiClient.stopSimulator()
+ $chargingStations.value = []
+ options?.onSimulatorStopped?.()
+ },
+ errorMsg: 'Error at stopping simulator',
+ successMsg: 'Simulator successfully stopped',
+ })
+ }
+
+ const SERVER_SWITCH_TIMEOUT_MS = 15_000
+
+ const handleUIServerChange = (newIndex: number): void => {
+ const currentIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
+ if (newIndex === currentIndex || serverSwitchPending.value) return
+
+ const servers = $configuration.value.uiServer as UIServerConfigurationSection[]
+ if (newIndex < 0 || newIndex >= servers.length) return
+
+ serverSwitchPending.value = true
+
+ $uiClient.setConfiguration(servers[newIndex])
+ unregisterWSEventListeners()
+ registerWSEventListeners()
+
+ let settled = false
+
+ const openHandler = (): void => {
+ if (settled) return
+ settled = true
+ clearTimeout(activeTimeoutId)
+ $uiClient.unregisterWSEventListener('error', errorHandler)
+ pendingOpenHandler = undefined
+ pendingErrorHandler = undefined
+ setToLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, newIndex)
+ serverSwitchPending.value = false
+ options?.onServerSwitched?.()
+ }
+
+ const errorHandler = (): void => {
+ if (settled) return
+ settled = true
+ clearTimeout(activeTimeoutId)
+ $uiClient.unregisterWSEventListener('open', openHandler)
+ pendingOpenHandler = undefined
+ pendingErrorHandler = undefined
+ serverSwitchPending.value = false
+ const previousIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
+ const rollbackServers = $configuration.value.uiServer as UIServerConfigurationSection[]
+ if (previousIndex >= 0 && previousIndex < rollbackServers.length) {
+ $uiClient.setConfiguration(rollbackServers[previousIndex])
+ }
+ unregisterWSEventListeners()
+ registerWSEventListeners()
+ }
+
+ $uiClient.registerWSEventListener('open', openHandler, { once: true })
+ $uiClient.registerWSEventListener('error', errorHandler, { once: true })
+ pendingOpenHandler = openHandler
+ pendingErrorHandler = errorHandler
+
+ activeTimeoutId = setTimeout(() => {
+ if (!settled) {
+ errorHandler()
+ }
+ }, SERVER_SWITCH_TIMEOUT_MS)
+ }
+
+ onScopeDispose(() => {
+ if (activeTimeoutId != null) {
+ clearTimeout(activeTimeoutId)
+ activeTimeoutId = undefined
+ }
+ if (pendingOpenHandler != null) {
+ $uiClient.unregisterWSEventListener('open', pendingOpenHandler)
+ pendingOpenHandler = undefined
+ }
+ if (pendingErrorHandler != null) {
+ $uiClient.unregisterWSEventListener('error', pendingErrorHandler)
+ pendingErrorHandler = undefined
+ }
+ })
+
+ return {
+ handleUIServerChange,
+ serverSwitchPending: readonly(serverSwitchPending),
+ simulatorPending: computed(() => simulatorPendingState.simulator),
+ startSimulator,
+ stopSimulator,
+ }
+}
--- /dev/null
+import { type SKIN_IDS } from 'ui-common'
+import { readonly, ref, type Ref } from 'vue'
+
+import { getFromLocalStorage, setToLocalStorage } from '@/composables/Utils.js'
+import { validateTokenContract } from '@/shared/tokens/contract.js'
+// Intentional: registry.ts is pure metadata (ids, labels, loaders) — no behavioral coupling.
+import { DEFAULT_SKIN, type SkinDefinition, skins } from '@/skins/registry.js'
+
+export const SKIN_STORAGE_KEY = 'ecs-ui-skin'
+
+export type SkinName = (typeof SKIN_IDS)[number]
+
+/**
+ * Checks whether a string is a valid registered skin id.
+ * @param skinId - The skin identifier to validate
+ * @returns Whether the id is a registered skin identifier
+ */
+function isValidSkin (skinId: string): skinId is SkinName {
+ return skins.some(s => s.id === skinId)
+}
+
+/**
+ * Singleton state — shared across all useSkin() consumers (global skin config).
+ * Uses `isSwitching` (not `pending`) because this tracks a UI-visible CSS transition,
+ * not merely a pending network request.
+ */
+const activeSkinId: Ref<SkinName> = ref(
+ (() => {
+ const stored = getFromLocalStorage<string>(SKIN_STORAGE_KEY, DEFAULT_SKIN)
+ return isValidSkin(stored) ? stored : DEFAULT_SKIN
+ })()
+)
+// JS/testing hook — no CSS uses [data-skin]; skin isolation is via component class scoping.
+if (typeof document !== 'undefined') {
+ document.documentElement.setAttribute('data-skin', activeSkinId.value)
+}
+const loadedSkins = new Set<string>()
+let switchPromise: null | Promise<boolean> = null
+const lastError: Ref<null | string> = ref(null)
+
+/** Whether a skin switch is currently in progress (CSS transition-dependent). */
+const isSwitching: Ref<boolean> = ref(false)
+
+/**
+ * Returns the active skin id, available skins, and a function to switch skins at runtime.
+ * @returns Skin state and switcher
+ */
+export function useSkin (): {
+ activeSkinId: Readonly<Ref<SkinName>>
+ availableSkins: readonly SkinDefinition[]
+ isSwitching: Readonly<Ref<boolean>>
+ lastError: Readonly<Ref<null | string>>
+ switchSkin: (id: string) => Promise<boolean>
+} {
+ /**
+ * Switches the active skin and lazy-loads its CSS if needed.
+ * Uses Promise coalescing to prevent concurrent skin switches.
+ * @param skinId - The skin identifier to switch to
+ * @returns `true` if the skin was successfully switched, `false` otherwise
+ */
+ async function switchSkin (skinId: string): Promise<boolean> {
+ if (switchPromise != null) {
+ await switchPromise
+ if (activeSkinId.value === skinId) return true
+ }
+ switchPromise = performSkinSwitch(skinId).finally(() => {
+ switchPromise = null
+ })
+ return switchPromise
+ }
+
+ return {
+ activeSkinId: readonly(activeSkinId),
+ availableSkins: skins,
+ isSwitching: readonly(isSwitching),
+ lastError: readonly(lastError),
+ switchSkin,
+ }
+}
+
+/**
+ * Loads the CSS file for a skin if not already loaded.
+ * @param skinId - The skin identifier to load styles for
+ */
+async function loadSkinStyles (skinId: string): Promise<void> {
+ if (loadedSkins.has(skinId)) {
+ return
+ }
+ const skin = skins.find(s => s.id === skinId)
+ if (skin == null) {
+ return
+ }
+ await skin.loadStyles()
+ loadedSkins.add(skinId)
+ validateTokenContract('useSkin', skinId)
+}
+
+/**
+ * Performs the actual skin switch logic.
+ * @param skinId - The skin identifier to switch to
+ * @returns `true` if the skin was successfully switched, `false` otherwise
+ */
+async function performSkinSwitch (skinId: string): Promise<boolean> {
+ const skin = skins.find(s => s.id === skinId)
+ if (skin == null) {
+ return false
+ }
+ isSwitching.value = true
+ if (skinId === activeSkinId.value) {
+ try {
+ await loadSkinStyles(skinId)
+ try {
+ sessionStorage.removeItem('skin-error-reload-count')
+ } catch {
+ /* sessionStorage unavailable */
+ }
+ return true
+ } finally {
+ isSwitching.value = false
+ }
+ }
+ try {
+ await loadSkinStyles(skinId)
+ lastError.value = null
+ activeSkinId.value = skinId as SkinName
+ if (typeof document !== 'undefined') {
+ document.documentElement.setAttribute('data-skin', skinId)
+ document.body.style.overflow = ''
+ }
+ setToLocalStorage<string>(SKIN_STORAGE_KEY, skinId)
+ try {
+ sessionStorage.removeItem('skin-error-reload-count')
+ } catch {
+ /* sessionStorage unavailable */
+ }
+ return true
+ } catch (error) {
+ const message = error instanceof Error ? error.message : String(error)
+ console.warn(`[useSkin] Failed to load CSS for skin '${skinId}':`, message)
+ lastError.value = message
+ return false
+ } finally {
+ isSwitching.value = false
+ }
+}
--- /dev/null
+import { convertToInt, type OCPPVersion } from 'ui-common'
+import { readonly, ref, type Ref } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import { useUIClient } from '@/composables/Utils.js'
+
+export interface StartTxFormConfig {
+ connectorId: string
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+ options?: {
+ onCleanup?: () => void
+ onError?: (error: unknown, step?: 'authorize' | 'startTransaction') => void
+ }
+}
+
+export interface StartTxFormState {
+ authorizeIdTag: boolean
+ idTag: string
+}
+
+/**
+ * Returns form state and submission logic for starting a transaction.
+ * @param config - Configuration for the start transaction form
+ * @returns Form state and submit/reset functions
+ */
+export function useStartTxForm (config: StartTxFormConfig): {
+ formState: Ref<StartTxFormState>
+ pending: Readonly<Ref<boolean>>
+ resetForm: () => void
+ submitForm: () => Promise<boolean>
+} {
+ const { connectorId, evseId, hashId, ocppVersion, options } = config
+ const $uiClient = useUIClient()
+ const $toast = useToast()
+
+ const formState = ref<StartTxFormState>({
+ authorizeIdTag: true,
+ idTag: '',
+ })
+
+ const pending = ref(false)
+
+ /** Resets form state to initial defaults. */
+ function resetForm (): void {
+ formState.value = {
+ authorizeIdTag: true,
+ idTag: '',
+ }
+ }
+
+ /**
+ * Submits the start transaction request, optionally authorizing first.
+ * @returns `true` on success, `false` on error
+ */
+ async function submitForm (): Promise<boolean> {
+ if (pending.value) return false
+ pending.value = true
+ try {
+ const idTag = formState.value.idTag.length > 0 ? formState.value.idTag : undefined
+
+ if (formState.value.authorizeIdTag) {
+ if (idTag == null) {
+ $toast.error('Please provide an RFID tag to authorize')
+ return false
+ }
+ try {
+ await $uiClient.authorize(hashId, idTag)
+ } catch (error) {
+ $toast.error('Error at authorizing RFID tag')
+ console.error('Error at authorizing RFID tag:', error)
+ options?.onError?.(error, 'authorize')
+ options?.onCleanup?.()
+ return false
+ }
+ }
+
+ try {
+ await $uiClient.startTransaction(hashId, {
+ connectorId: convertToInt(connectorId),
+ evseId,
+ idTag,
+ ocppVersion,
+ })
+ $toast.success('Transaction successfully started')
+ return true
+ } catch (error) {
+ $toast.error('Error at starting transaction')
+ console.error('Error at starting transaction:', error)
+ options?.onError?.(error, 'startTransaction')
+ return false
+ } finally {
+ options?.onCleanup?.()
+ }
+ } finally {
+ pending.value = false
+ }
+ }
+
+ return {
+ formState,
+ pending: readonly(pending),
+ resetForm,
+ submitForm,
+ }
+}
--- /dev/null
+/**
+ * @file useStationActions.ts
+ * @description Headless composable for station-level actions (start/stop, connect/disconnect, delete).
+ */
+import { readonly } from 'vue'
+
+import { useUIClient } from '@/composables/Utils.js'
+import { useAsyncAction } from '@/shared/composables/useAsyncAction.js'
+
+/**
+ * Provides station-level action handlers with pending state management.
+ * @param options - Optional configuration
+ * @param options.onRefresh - Callback invoked after successful actions
+ * @returns Action functions and reactive pending state
+ */
+export function useStationActions (options?: { onRefresh?: () => void }): {
+ closeConnection: (hashId: string) => void
+ deleteStation: (hashId: string, onSuccess?: () => void) => void
+ openConnection: (hashId: string) => void
+ pending: Readonly<{ connection: boolean; delete: boolean; startStop: boolean }>
+ startStation: (hashId: string) => void
+ stopStation: (hashId: string) => void
+} {
+ const $uiClient = useUIClient()
+ const { pending, run } = useAsyncAction(
+ { connection: false, delete: false, startStop: false },
+ options?.onRefresh
+ )
+
+ const startStation = (hashId: string): void => {
+ run('startStop', {
+ action: () => $uiClient.startChargingStation(hashId),
+ errorMsg: 'Error starting charging station',
+ successMsg: 'Charging station started',
+ })
+ }
+
+ const stopStation = (hashId: string): void => {
+ run('startStop', {
+ action: () => $uiClient.stopChargingStation(hashId),
+ errorMsg: 'Error stopping charging station',
+ successMsg: 'Charging station stopped',
+ })
+ }
+
+ const openConnection = (hashId: string): void => {
+ run('connection', {
+ action: () => $uiClient.openConnection(hashId),
+ errorMsg: 'Error opening connection',
+ successMsg: 'Connection opened',
+ })
+ }
+
+ const closeConnection = (hashId: string): void => {
+ run('connection', {
+ action: () => $uiClient.closeConnection(hashId),
+ errorMsg: 'Error closing connection',
+ successMsg: 'Connection closed',
+ })
+ }
+
+ const deleteStation = (hashId: string, onSuccess?: () => void): void => {
+ run('delete', {
+ action: () => $uiClient.deleteChargingStation(hashId),
+ errorMsg: 'Error deleting charging station',
+ onSuccess,
+ successMsg: 'Charging station deleted',
+ })
+ }
+
+ return {
+ closeConnection,
+ deleteStation,
+ openConnection,
+ pending: readonly(pending),
+ startStation,
+ stopStation,
+ }
+}
--- /dev/null
+import { THEME_IDS } from 'ui-common'
+import { readonly, ref, type Ref } from 'vue'
+
+import { getFromLocalStorage, setToLocalStorage } from '@/composables/Utils.js'
+import { validateTokenContract } from '@/shared/tokens/contract.js'
+
+export const AVAILABLE_THEMES = THEME_IDS
+export const DEFAULT_THEME: ThemeName = 'tokyo-night-storm'
+export const THEME_STORAGE_KEY = 'ecs-ui-theme'
+
+export type ThemeName = (typeof THEME_IDS)[number]
+
+/**
+ * Checks whether a string is a valid theme name.
+ * @param name - The theme name to validate
+ * @returns Whether the name is a valid theme name
+ */
+function isValidTheme (name: string): name is ThemeName {
+ return (AVAILABLE_THEMES as readonly string[]).includes(name)
+}
+
+const activeThemeId: Ref<ThemeName> = ref(
+ (() => {
+ const stored = getFromLocalStorage<string>(THEME_STORAGE_KEY, DEFAULT_THEME)
+ return isValidTheme(stored) ? stored : DEFAULT_THEME
+ })()
+)
+
+const lastError: Ref<null | string> = ref(null)
+
+/**
+ * Applies a theme by setting the data-theme attribute on the document root.
+ * Disables CSS transitions during the swap to prevent color flash (VueUse pattern).
+ * The color-scheme is handled by CSS [data-theme] declarations.
+ * @param themeName - The theme name to apply
+ */
+function applyTheme (themeName: ThemeName): void {
+ if (typeof document === 'undefined') return
+ // Disable CSS transitions during theme swap to prevent color flash (VueUse pattern).
+ document.documentElement.classList.add('theme-switching')
+ document.documentElement.setAttribute('data-theme', themeName)
+ // Force reflow so browsers apply the transition-disable before restoring transitions.
+ // eslint-disable-next-line no-void
+ void document.documentElement.offsetHeight
+ document.documentElement.classList.remove('theme-switching')
+}
+
+applyTheme(activeThemeId.value)
+
+/**
+ * Returns the active theme, available themes, and a function to switch themes at runtime.
+ * @returns Theme state and switcher
+ */
+export function useTheme (): {
+ activeThemeId: Readonly<Ref<ThemeName>>
+ availableThemes: typeof AVAILABLE_THEMES
+ lastError: Readonly<Ref<null | string>>
+ switchTheme: (name: string) => void
+} {
+ /**
+ * Switches the active theme, updates the DOM, and persists the preference.
+ * @param name - The theme name to activate
+ */
+ function switchTheme (name: string): void {
+ if (!isValidTheme(name)) {
+ lastError.value = `Invalid theme: '${name}'`
+ return
+ }
+ lastError.value = null
+ applyTheme(name)
+ activeThemeId.value = name
+ setToLocalStorage<string>(THEME_STORAGE_KEY, name)
+ validateTokenContract('useTheme', name)
+ }
+
+ return {
+ activeThemeId: readonly(activeThemeId),
+ availableThemes: AVAILABLE_THEMES,
+ lastError: readonly(lastError),
+ switchTheme,
+ }
+}
--- /dev/null
+/**
+ * CSS token contract.
+ *
+ * Typography and spacing tokens are provided by `base.css` (shared across all themes).
+ * Color tokens (`color-*`) and `color-scheme` must be defined per theme file.
+ * When adding a new theme, ensure all `color-*` tokens below are defined in your theme CSS.
+ *
+ * Every theme file MUST define a value for each token (as `--{token-name}`).
+ */
+export const TOKEN_CONTRACT = [
+ 'color-accent',
+ 'color-bg',
+ 'color-bg-active',
+ 'color-bg-button',
+ 'color-bg-button-hover',
+ 'color-bg-caption',
+ 'color-bg-header',
+ 'color-bg-hover',
+ 'color-bg-input',
+ 'color-bg-raised',
+ 'color-bg-sunken',
+ 'color-bg-surface',
+ 'color-border',
+ 'color-border-row',
+ 'color-primary',
+ 'color-shadow-inset',
+ 'color-state-err',
+ 'color-state-idle',
+ 'color-state-ok',
+ 'color-state-warn',
+ 'color-text',
+ 'color-text-muted',
+ 'color-text-on-button',
+ 'color-text-strong',
+ 'font-family',
+ 'font-size-base',
+ 'font-size-sm',
+ 'font-size-xs',
+ 'spacing-lg',
+ 'spacing-md',
+ 'spacing-sm',
+ 'spacing-xl',
+ 'spacing-xs',
+] as const
+
+export type CssCustomProperty = `--${TokenName}`
+export type TokenName = (typeof TOKEN_CONTRACT)[number]
+
+/**
+ * Dev-mode runtime check that all required CSS custom properties are defined.
+ * Uses requestAnimationFrame to ensure styles are applied before checking.
+ * @param source - The composable/module name for the warning prefix (e.g. 'useSkin', 'useTheme')
+ * @param contextId - The skin/theme id that was just applied
+ */
+export function validateTokenContract (source: string, contextId: string): void {
+ if (!import.meta.env.DEV || typeof document === 'undefined') return
+ requestAnimationFrame(() => {
+ const style = getComputedStyle(document.documentElement)
+ for (const token of TOKEN_CONTRACT) {
+ const prop: CssCustomProperty = `--${token}`
+ if (!style.getPropertyValue(prop).trim()) {
+ console.warn(`[${source}] Missing CSS token '${prop}' after applying '${contextId}'`)
+ }
+ }
+ })
+}
--- /dev/null
+/** Common station identification fields used across skin components. */
+export interface StationIdentifier {
+ chargingStationId: string
+ hashId: string
+}
--- /dev/null
+/**
+ * Extracts the value from a `<select>` element's change event.
+ * @param event - The DOM change event from a `<select>` element
+ * @returns The selected option's value
+ */
+export function getSelectValue (event: Event): string {
+ return (event.target as HTMLSelectElement).value
+}
--- /dev/null
+import { EMPTY_VALUE_PLACEHOLDER } from '@/composables/Constants.js'
+
+export interface FormatSupervisionUrlOptions {
+ /** Insert zero-width-space after dots for word-break in table cells. */
+ wordBreak?: boolean
+}
+
+/**
+ * Formats a supervision URL for display. Strips the pathname when it is '/'.
+ * Returns `EMPTY_VALUE_PLACEHOLDER` for undefined/empty input.
+ * @param url - The raw supervision URL string
+ * @param options - Formatting options
+ * @returns A formatted display string
+ */
+export function formatSupervisionUrl (
+ url: string | undefined,
+ options?: FormatSupervisionUrlOptions
+): string {
+ const trimmed = url?.trim()
+ if (!trimmed) {
+ return EMPTY_VALUE_PLACEHOLDER
+ }
+
+ try {
+ const parsed = new URL(trimmed)
+ const host = options?.wordBreak === true ? parsed.host.split('.').join('.\u200b') : parsed.host
+ const pathname = parsed.pathname === '/' ? '' : parsed.pathname
+ return `${parsed.protocol}//${host}${pathname}`
+ } catch {
+ return trimmed
+ }
+}
--- /dev/null
+export { getSelectValue } from './dom.js'
+export { formatSupervisionUrl, type FormatSupervisionUrlOptions } from './formatSupervisionUrl.js'
+export type { StatusVariant } from './stationStatus.js'
+export {
+ getATGStatus,
+ getConnectorEntries,
+ getConnectorStatusVariant,
+ getWebSocketStateVariant,
+} from './stationStatus.js'
+export { stripStationId } from './stripStationId.js'
--- /dev/null
+/**
+ * @file stationStatus.ts
+ * @description Pure utility functions for OCPP connector/station status mapping.
+ * These are not Vue composables (no reactive state) — they are pure utility functions
+ * consumed exclusively by skin components via the shared layer.
+ */
+import type { ChargingStationData, ConnectorEntry, Status } from 'ui-common'
+
+/**
+ * Status variant type for UI display.
+ * Maps semantic OCPP states to visual indicator categories.
+ */
+export type StatusVariant = 'err' | 'idle' | 'ok' | 'warn'
+
+/**
+ * Gets the ATG status for a specific connector from the station's ATG statuses array.
+ * @param station - The charging station data
+ * @param connectorId - The connector identifier
+ * @returns The ATG status, or undefined if not found
+ */
+export function getATGStatus (
+ station: ChargingStationData,
+ connectorId: number
+): Status | undefined {
+ return station.automaticTransactionGenerator?.automaticTransactionGeneratorStatuses?.find(
+ entry => entry.connectorId === connectorId
+ )?.status
+}
+
+/**
+ * Extracts a flat array of connector entries from a charging station, filtering out placeholder
+ * connectors (connectorId === 0) and placeholder EVSEs (evseId === 0).
+ * @param station - The charging station data
+ * @returns Flat array of connector entries with optional evseId
+ */
+export function getConnectorEntries (station: ChargingStationData): ConnectorEntry[] {
+ if (Array.isArray(station.evses) && station.evses.length > 0) {
+ const entries: ConnectorEntry[] = []
+ for (const evse of station.evses) {
+ if (evse.evseId > 0) {
+ for (const c of evse.evseStatus.connectors) {
+ if (c.connectorId > 0) {
+ entries.push({
+ connectorId: c.connectorId,
+ connectorStatus: c.connectorStatus,
+ evseId: evse.evseId,
+ })
+ }
+ }
+ }
+ }
+ return entries
+ }
+ return (station.connectors ?? [])
+ .filter(c => c.connectorId > 0)
+ .map(c => ({
+ connectorId: c.connectorId,
+ connectorStatus: c.connectorStatus,
+ }))
+}
+
+/**
+ * Maps an OCPP connector status string to a display variant.
+ * @param status - The OCPP connector status value
+ * @returns The display variant for the status
+ */
+export function getConnectorStatusVariant (status?: string): StatusVariant {
+ // cspell:ignore suspendedev suspendedevse
+ switch (status?.toLowerCase()) {
+ case 'available':
+ return 'ok'
+ // Active use states: amber to distinguish from 'available' (green)
+ case 'charging':
+ case 'occupied':
+ return 'warn'
+ case 'faulted':
+ case 'unavailable':
+ return 'err'
+ case 'finishing':
+ case 'preparing':
+ case 'suspendedev':
+ case 'suspendedevse':
+ return 'warn'
+ default:
+ return 'idle'
+ }
+}
+
+/**
+ * Maps a WebSocket ready state to a display variant.
+ * @param wsState - The WebSocket readyState value
+ * @returns The display variant for the WebSocket state
+ */
+export function getWebSocketStateVariant (wsState?: number): StatusVariant {
+ switch (wsState) {
+ case 0: // WebSocket.CONNECTING
+ return 'warn'
+ case 1: // WebSocket.OPEN
+ return 'ok'
+ case 2: // WebSocket.CLOSING
+ return 'warn'
+ case 3: // WebSocket.CLOSED
+ return 'err'
+ default:
+ return 'idle'
+ }
+}
--- /dev/null
+/**
+ * Removes a trailing `/<stationId>` suffix from a supervision URL.
+ * @param url - The supervision URL potentially containing the station ID
+ * @param stationId - The station ID to strip
+ * @returns The URL without the trailing station ID suffix
+ */
+export function stripStationId (url: string, stationId: string): string {
+ if (stationId.length === 0) return url
+ const suffix = `/${stationId}`
+ return url.endsWith(suffix) ? url.slice(0, -suffix.length) : url
+}
export type {}
+declare module '*.css' {
+ const _default: unknown
+ export default _default
+}
+
declare module 'vue' {
export interface GlobalComponents {
RouterLink: (typeof import('vue-router'))['RouterLink']
--- /dev/null
+<template>
+ <div class="classic-layout">
+ <Container class="classic-stations-container">
+ <Container class="classic-buttons-container">
+ <Container
+ v-show="uiServerConfigurations.length > 1"
+ id="ui-server-container"
+ class="classic-server-container"
+ >
+ <select
+ id="ui-server-selector"
+ v-model="state.uiServerIndex"
+ class="classic-server-selector"
+ @change="handleUIServerChange"
+ >
+ <option
+ v-for="uiServerConfiguration in uiServerConfigurations"
+ :key="uiServerConfiguration.index"
+ :value="uiServerConfiguration.index"
+ >
+ {{
+ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
+ }}
+ </option>
+ </select>
+ </Container>
+ <StateButton
+ :active="simulatorStarted === true"
+ :off="() => stopSimulator()"
+ :off-label="stopSimulatorLabel"
+ :on="() => startSimulator()"
+ :on-label="startSimulatorLabel"
+ />
+ <ToggleButton
+ :id="'add-charging-stations'"
+ :key="state.renderAddChargingStations"
+ :off="
+ () => {
+ $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
+ }
+ "
+ :on="
+ () => {
+ $router.push({ name: ROUTE_NAMES.ADD_CHARGING_STATIONS })
+ }
+ "
+ :shared="true"
+ >
+ Add Charging Stations
+ </ToggleButton>
+ <select
+ :value="activeSkinId"
+ class="classic-server-selector"
+ @change="e => switchSkin(getSelectValue(e))"
+ >
+ <option
+ v-for="skin in skins"
+ :key="skin.id"
+ :value="skin.id"
+ >
+ {{ skin.label }}
+ </option>
+ </select>
+ <select
+ :value="activeThemeId"
+ class="classic-server-selector"
+ @change="e => switchTheme(getSelectValue(e) as ThemeName)"
+ >
+ <option
+ v-for="theme in availableThemes"
+ :key="theme"
+ :value="theme"
+ >
+ {{ theme }}
+ </option>
+ </select>
+ </Container>
+ <CSTable
+ v-if="$chargingStations.length > 0"
+ :charging-stations="$chargingStations"
+ @need-refresh="
+ () => {
+ state.renderAddChargingStations = randomUUID()
+ }
+ "
+ />
+ </Container>
+ <Container
+ v-show="
+ $route.name !== ROUTE_NAMES.CHARGING_STATIONS && $route.name !== ROUTE_NAMES.NOT_FOUND
+ "
+ id="action-container"
+ class="classic-action-container"
+ >
+ <router-view name="action" />
+ </Container>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { randomUUID, type UUIDv4 } from 'ui-common'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import {
+ deleteLocalStorageByKeyPattern,
+ getFromLocalStorage,
+ resetToggleButtonState,
+ ROUTE_NAMES,
+ TOGGLE_BUTTON_KEY_PREFIX,
+ UI_SERVER_CONFIGURATION_INDEX_KEY,
+ useChargingStations,
+} from '@/composables'
+import { useLayoutData } from '@/shared/composables/useLayoutData.js'
+import { useSimulatorControl } from '@/shared/composables/useSimulatorControl.js'
+import { useSkin } from '@/shared/composables/useSkin.js'
+import { type ThemeName, useTheme } from '@/shared/composables/useTheme.js'
+import { getSelectValue } from '@/shared/utils/dom.js'
+
+import StateButton from './components/buttons/StateButton.vue'
+import ToggleButton from './components/buttons/ToggleButton.vue'
+import CSTable from './components/charging-stations/CSTable.vue'
+import Container from './components/ClassicContainer.vue'
+
+const layoutData = useLayoutData()
+const { simulatorStarted, simulatorState, uiServerConfigurations } = layoutData
+
+const startSimulatorLabel = computed(
+ () =>
+ `Start Simulator${simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''}`
+)
+const stopSimulatorLabel = computed(
+ () =>
+ `Stop Simulator${simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''}`
+)
+
+const state = ref<{
+ renderAddChargingStations: UUIDv4
+ uiServerIndex: number
+}>({
+ renderAddChargingStations: randomUUID(),
+ uiServerIndex: getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0),
+})
+
+const refresh = (): void => {
+ state.value.renderAddChargingStations = randomUUID()
+}
+
+const clearToggleButtons = (): void => {
+ deleteLocalStorageByKeyPattern(TOGGLE_BUTTON_KEY_PREFIX)
+}
+
+const $chargingStations = useChargingStations()
+const $route = useRoute()
+const $router = useRouter()
+
+const { activeSkinId, availableSkins: skins, switchSkin } = useSkin()
+const { activeThemeId, availableThemes, switchTheme } = useTheme()
+
+const {
+ handleUIServerChange: switchServer,
+ startSimulator,
+ stopSimulator,
+} = useSimulatorControl(layoutData, {
+ onServerSwitched: () => {
+ clearToggleButtons()
+ refresh()
+ if ($route.name !== ROUTE_NAMES.CHARGING_STATIONS) {
+ $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
+ }
+ },
+ onSimulatorStopped: () => {
+ resetToggleButtonState('add-charging-stations', true)
+ },
+})
+
+const handleUIServerChange = (): void => {
+ switchServer(state.value.uiServerIndex)
+}
+
+watch(
+ () => $route.name,
+ name => {
+ if (name === ROUTE_NAMES.CHARGING_STATIONS) {
+ refresh()
+ }
+ }
+)
+</script>
+
+<style scoped>
+.classic-layout {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+}
+
+.classic-stations-container {
+ min-width: 0;
+ overflow: hidden;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+}
+
+.classic-server-container {
+ display: flex;
+ flex: 3 1 0;
+ min-width: 0;
+ justify-content: center;
+ border: 1px solid var(--color-border-row);
+}
+
+.classic-server-selector {
+ width: 100%;
+ background-color: var(--color-bg-input);
+ color: var(--color-text);
+ font-size: var(--font-size-sm);
+ text-align: center;
+}
+
+.classic-server-selector:hover {
+ background-color: var(--color-bg-hover);
+}
+
+.classic-server-selector:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: -2px;
+}
+
+.classic-buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: var(--spacing-xs);
+ position: sticky;
+ top: 0;
+}
+
+.classic-buttons-container > * {
+ flex: 1 1 0;
+}
+
+.classic-action-container {
+ flex: none;
+ min-width: max-content;
+ height: fit-content;
+ display: flex;
+ position: sticky;
+ top: 0;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ margin-inline: var(--spacing-sm);
+ padding: var(--spacing-md);
+ border: solid 0.25px var(--color-border);
+}
+</style>
--- /dev/null
+/* Classic skin structural tokens.
+ *
+ * The color palette is provided by the active theme file.
+ * Only structural/layout tokens specific to the classic table-based layout belong here.
+ */
--- /dev/null
+<template>
+ <h1 class="classic-action-header">
+ Add Charging Stations
+ </h1>
+ <p>Template:</p>
+ <select
+ :key="formState.renderTemplates"
+ v-model="formState.template"
+ >
+ <option
+ disabled
+ value=""
+ >
+ Please select a template
+ </option>
+ <option
+ v-for="template in templates"
+ :key="template"
+ >
+ {{ template }}
+ </option>
+ </select>
+ <p>Number of stations:</p>
+ <input
+ id="number-of-stations"
+ v-model="formState.numberOfStations"
+ class="classic-number-of-stations"
+ max="100"
+ min="1"
+ name="number-of-stations"
+ placeholder="number of stations"
+ type="number"
+ >
+ <p>Template options overrides:</p>
+ <ul class="classic-template-options">
+ <li>
+ Base name:
+ <input
+ id="base-name"
+ v-model.trim="formState.baseName"
+ class="classic-base-name"
+ name="base-name"
+ placeholder="<template value>"
+ type="text"
+ >
+ Fixed name:
+ <input
+ v-model="formState.fixedName"
+ type="checkbox"
+ >
+ </li>
+ <li>
+ Supervision url:
+ <input
+ id="supervision-url"
+ v-model.trim="formState.supervisionUrl"
+ class="input-url"
+ name="supervision-url"
+ placeholder="wss://"
+ type="url"
+ >
+ </li>
+ <li>
+ Supervision credentials:
+ <input
+ id="supervision-user"
+ v-model.trim="formState.supervisionUser"
+ autocomplete="off"
+ class="classic-supervision-user"
+ name="supervision-user"
+ placeholder="<username>"
+ type="text"
+ >
+ <input
+ id="supervision-password"
+ v-model="formState.supervisionPassword"
+ autocomplete="off"
+ class="classic-supervision-password"
+ name="supervision-password"
+ placeholder="<password>"
+ type="password"
+ >
+ </li>
+ <li>
+ Auto start:
+ <input
+ v-model="formState.autoStart"
+ type="checkbox"
+ >
+ </li>
+ <li>
+ Persistent configuration:
+ <input
+ v-model="formState.persistentConfiguration"
+ type="checkbox"
+ >
+ </li>
+ <li>
+ OCPP strict compliance:
+ <input
+ v-model="formState.ocppStrictCompliance"
+ type="checkbox"
+ >
+ </li>
+ <li>
+ Performance statistics:
+ <input
+ v-model="formState.enableStatistics"
+ type="checkbox"
+ >
+ </li>
+ </ul>
+ <br>
+ <Button
+ id="action-button"
+ :disabled="pending"
+ @click="addChargingStations()"
+ >
+ Add Charging Stations
+ </Button>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import { resetToggleButtonState, ROUTE_NAMES } from '@/composables'
+import { useAddStationsForm } from '@/shared/composables/useAddStationsForm.js'
+
+import Button from '../buttons/ClassicButton.vue'
+
+const $router = useRouter()
+
+const { formState, pending, submitForm, templates } = useAddStationsForm({
+ onFinally: () => {
+ resetToggleButtonState('add-charging-stations', true)
+ $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
+ },
+})
+
+const addChargingStations = async (): Promise<void> => {
+ await submitForm()
+}
+</script>
+
+<style scoped>
+.classic-number-of-stations {
+ width: auto;
+ max-width: 6rem;
+ text-align: center;
+}
+
+.classic-base-name,
+.classic-supervision-user,
+.classic-supervision-password {
+ width: 100%;
+ max-width: 40rem;
+ text-align: left;
+}
+
+.classic-template-options {
+ list-style: circle;
+ text-align: left;
+}
+</style>
--- /dev/null
+<template>
+ <h1 class="classic-action-header">
+ Set Supervision Url
+ </h1>
+ <h2>{{ chargingStationId }}</h2>
+ <p>Supervision url:</p>
+ <input
+ id="supervision-url"
+ v-model.trim="formState.supervisionUrl"
+ class="input-url"
+ name="supervision-url"
+ placeholder="wss://"
+ type="url"
+ >
+ <p>Supervision credentials:</p>
+ <input
+ id="supervision-user"
+ v-model.trim="formState.supervisionUser"
+ autocomplete="off"
+ class="classic-supervision-user"
+ name="supervision-user"
+ placeholder="<username>"
+ type="text"
+ >
+ <input
+ id="supervision-password"
+ v-model="formState.supervisionPassword"
+ autocomplete="off"
+ class="classic-supervision-password"
+ name="supervision-password"
+ placeholder="<password>"
+ type="password"
+ >
+ <br>
+ <Button
+ id="action-button"
+ :disabled="pending"
+ @click="setSupervisionUrl()"
+ >
+ Set Supervision Url
+ </Button>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import { resetToggleButtonState, ROUTE_NAMES } from '@/composables'
+import { useSetUrlForm } from '@/shared/composables/useSetUrlForm.js'
+
+import Button from '../buttons/ClassicButton.vue'
+
+const props = defineProps<{
+ chargingStationId: string
+ hashId: string
+}>()
+
+const { formState, pending, submitForm } = useSetUrlForm(props.hashId, props.chargingStationId)
+const $router = useRouter()
+
+const setSupervisionUrl = async (): Promise<void> => {
+ const success = await submitForm()
+ if (success) {
+ resetToggleButtonState(`${props.hashId}-set-supervision-url`, true)
+ $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
+ }
+}
+</script>
+
+<style scoped>
+.classic-supervision-user,
+.classic-supervision-password {
+ width: 100%;
+ max-width: 40rem;
+ text-align: left;
+}
+</style>
--- /dev/null
+<template>
+ <h1 class="classic-action-header">
+ Start Transaction
+ </h1>
+ <h2>{{ chargingStationId }}</h2>
+ <h3 v-if="evseId != null">
+ EVSE {{ evseId }} / Connector {{ connectorId }}
+ </h3>
+ <h3 v-else>
+ Connector {{ connectorId }}
+ </h3>
+ <p>
+ RFID tag:
+ <input
+ id="idtag"
+ v-model.trim="formState.idTag"
+ class="classic-idtag"
+ name="idtag"
+ placeholder="RFID tag"
+ type="text"
+ >
+ </p>
+ <p>
+ Authorize RFID tag:
+ <input
+ v-model="formState.authorizeIdTag"
+ type="checkbox"
+ >
+ </p>
+ <br>
+ <Button
+ id="action-button"
+ @click="handleStartTransaction"
+ >
+ Start Transaction
+ </Button>
+</template>
+
+<script setup lang="ts">
+import type { OCPPVersion } from 'ui-common'
+
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { resetToggleButtonState, ROUTE_NAMES } from '@/composables'
+import { useStartTxForm } from '@/shared/composables/useStartTxForm.js'
+
+import Button from '../buttons/ClassicButton.vue'
+
+const props = defineProps<{
+ chargingStationId: string
+ connectorId: string
+ hashId: string
+}>()
+
+const $router = useRouter()
+const $route = useRoute()
+
+const evseId = computed(() =>
+ $route.query.evseId != null ? Number($route.query.evseId) : undefined
+)
+const ocppVersion = computed(() => {
+ const raw = $route.query.ocppVersion
+ return typeof raw === 'string' ? (raw as OCPPVersion) : undefined
+})
+
+const toggleButtonId = computed(
+ () => `${props.hashId}-${String(evseId.value ?? 0)}-${props.connectorId}-start-transaction`
+)
+
+const { formState, submitForm } = useStartTxForm({
+ connectorId: props.connectorId,
+ evseId: evseId.value,
+ hashId: props.hashId,
+ ocppVersion: ocppVersion.value,
+ options: {
+ onCleanup: () => {
+ resetToggleButtonState(toggleButtonId.value, true)
+ },
+ },
+})
+
+const handleStartTransaction = async (): Promise<void> => {
+ await submitForm()
+ $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
+}
+</script>
+
+<style scoped>
+.classic-idtag {
+ text-align: center;
+}
+</style>
<template>
<button
- :class="['button', { 'button--active': active }]"
+ :class="['classic-button', { 'classic-button--active': active }]"
type="button"
>
<slot />
</script>
<style scoped>
-.button {
+.classic-button {
display: block;
width: 100%;
text-align: center;
font-size: var(--font-size-sm);
}
-.button:focus-visible {
+.classic-button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
-.button--active {
+.classic-button--active {
color: var(--color-text);
background-color: var(--color-bg-active);
border: 1px solid var(--color-accent);
</template>
<script setup lang="ts">
-import Button from '@/components/buttons/Button.vue'
+import Button from './ClassicButton.vue'
defineProps<{
active: boolean
<script setup lang="ts">
import { ref } from 'vue'
-import Button from '@/components/buttons/Button.vue'
import {
getFromLocalStorage,
+ getLocalStorage,
setToLocalStorage,
SHARED_TOGGLE_BUTTON_KEY_PREFIX,
TOGGLE_BUTTON_KEY_PREFIX,
} from '@/composables'
+import Button from './ClassicButton.vue'
+
const props = defineProps<{
id: string
off?: () => void
status?: boolean
}>()
-const $emit = defineEmits(['clicked'])
+const emit = defineEmits<{ clicked: [status: boolean] }>()
const id =
props.shared === true
const click = (): void => {
if (props.shared === true) {
- for (const key of Object.keys(localStorage)) {
- if (key !== id && key.startsWith(SHARED_TOGGLE_BUTTON_KEY_PREFIX)) {
+ try {
+ const keys = Object.keys(getLocalStorage()).filter(
+ key => key !== id && key.startsWith(SHARED_TOGGLE_BUTTON_KEY_PREFIX)
+ )
+ for (const key of keys) {
setToLocalStorage<boolean>(key, false)
}
+ } catch {
+ if (import.meta.env.DEV) {
+ console.debug('[ToggleButton] Failed to clear shared toggle buttons')
+ }
}
}
const current = getFromLocalStorage<boolean>(id, props.status ?? false)
} else {
props.off?.()
}
- $emit('clicked', newStatus)
+ emit('clicked', newStatus)
}
</script>
<script setup lang="ts">
import type { ConnectorStatus, OCPPVersion, Status } from 'ui-common'
-import { useToast } from 'vue-toast-notification'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
-import Button from '@/components/buttons/Button.vue'
-import StateButton from '@/components/buttons/StateButton.vue'
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
-import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES, useExecuteAction, useUIClient } from '@/composables'
+import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/composables'
+import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
+
+import Button from '../buttons/ClassicButton.vue'
+import StateButton from '../buttons/StateButton.vue'
+import ToggleButton from '../buttons/ToggleButton.vue'
const props = defineProps<{
atgStatus?: Status
ocppVersion?: OCPPVersion
}>()
-const $emit = defineEmits(['need-refresh'])
-
-const $uiClient = useUIClient()
+const emit = defineEmits<{ 'need-refresh': [] }>()
-const $toast = useToast()
+const $router = useRouter()
-const executeAction = useExecuteAction($emit)
+const {
+ lockConnector,
+ startATG: startAutomaticTransactionGenerator,
+ stopATG: stopAutomaticTransactionGenerator,
+ stopTransaction: doStopTransaction,
+ unlockConnector,
+} = useConnectorActions({
+ connectorId: computed(() => props.connectorId),
+ hashId: computed(() => props.hashId),
+ onRefresh: () => emit('need-refresh'),
+})
const stopTransaction = (): void => {
- if (props.connector.transactionId == null) {
- $toast.error('No transaction to stop')
- return
- }
- executeAction(
- $uiClient.stopTransaction(props.hashId, {
- ocppVersion: props.ocppVersion,
- transactionId: props.connector.transactionId,
- }),
- 'Transaction successfully stopped',
- 'Error at stopping transaction'
- )
-}
-const lockConnector = (): void => {
- executeAction(
- $uiClient.lockConnector(props.hashId, props.connectorId),
- 'Connector successfully locked',
- 'Error at locking connector'
- )
-}
-const unlockConnector = (): void => {
- executeAction(
- $uiClient.unlockConnector(props.hashId, props.connectorId),
- 'Connector successfully unlocked',
- 'Error at unlocking connector'
- )
-}
-const startAutomaticTransactionGenerator = (): void => {
- executeAction(
- $uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId),
- 'Automatic transaction generator successfully started',
- 'Error at starting automatic transaction generator'
- )
-}
-const stopAutomaticTransactionGenerator = (): void => {
- executeAction(
- $uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId),
- 'Automatic transaction generator successfully stopped',
- 'Error at stopping automatic transaction generator'
- )
+ doStopTransaction(props.connector.transactionId, props.ocppVersion)
}
</script>
{{ chargingStation.started === true ? 'Yes' : 'No' }}
</td>
<td>
- {{ getSupervisionUrl() }}
+ {{ supervisionUrl }}
</td>
<td>
{{ getWebSocketStateName(chargingStation.wsState) ?? EMPTY_VALUE_PLACEHOLDER }}
<td>
<StateButton
:active="chargingStation.started === true"
- :off="() => stopChargingStation()"
+ :off="() => stopChargingStation(hashId)"
off-label="Stop Charging Station"
- :on="() => startChargingStation()"
+ :on="() => startChargingStation(hashId)"
on-label="Start Charging Station"
/>
<StateButton
:active="isWebSocketOpen"
- :off="() => closeConnection()"
+ :off="() => closeConnection(hashId)"
off-label="Close Connection"
- :on="() => openConnection()"
+ :on="() => openConnection(hashId)"
on-label="Open Connection"
/>
<ToggleButton
</thead>
<tbody>
<CSConnector
- v-for="entry in getConnectorEntries()"
+ v-for="entry in connectorEntries"
:key="entry.evseId != null ? `${entry.evseId}-${entry.connectorId}` : entry.connectorId"
- :atg-status="getATGStatus(entry.connectorId)"
+ :atg-status="getATGStatusForConnector(entry.connectorId)"
:charging-station-id="chargingStation.stationInfo.chargingStationId"
:connector="entry.connectorStatus"
:connector-id="entry.connectorId"
} from 'ui-common'
import { computed } from 'vue'
-import Button from '@/components/buttons/Button.vue'
-import StateButton from '@/components/buttons/StateButton.vue'
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
-import CSConnector from '@/components/charging-stations/CSConnector.vue'
-import {
- deleteLocalStorageByKeyPattern,
- EMPTY_VALUE_PLACEHOLDER,
- ROUTE_NAMES,
- useExecuteAction,
- useUIClient,
-} from '@/composables'
+import { deleteLocalStorageByKeyPattern, EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/composables'
+import { useStationActions } from '@/shared/composables/useStationActions.js'
+import { formatSupervisionUrl } from '@/shared/utils/formatSupervisionUrl.js'
+import { getATGStatus, getConnectorEntries } from '@/shared/utils/stationStatus.js'
+
+import Button from '../buttons/ClassicButton.vue'
+import StateButton from '../buttons/StateButton.vue'
+import ToggleButton from '../buttons/ToggleButton.vue'
+import CSConnector from './CSConnector.vue'
const props = defineProps<{
chargingStation: ChargingStationData
}>()
-const $emit = defineEmits(['need-refresh'])
+const emit = defineEmits<{ 'need-refresh': [] }>()
const isWebSocketOpen = computed(() => props.chargingStation.wsState === WebSocketReadyState.OPEN)
-const getConnectorEntries = (): ConnectorEntry[] => {
- if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
- const entries: ConnectorEntry[] = []
- for (const evse of props.chargingStation.evses) {
- if (evse.evseId > 0) {
- for (const entry of evse.evseStatus.connectors) {
- if (entry.connectorId > 0) {
- entries.push({
- connectorId: entry.connectorId,
- connectorStatus: entry.connectorStatus,
- evseId: evse.evseId,
- })
- }
- }
- }
- }
- return entries
- }
- return (props.chargingStation.connectors ?? [])
- .filter(c => c.connectorId > 0)
- .map(entry => ({
- connectorId: entry.connectorId,
- connectorStatus: entry.connectorStatus,
- }))
-}
-const getATGStatus = (connectorId: number): Status | undefined => {
- return props.chargingStation.automaticTransactionGenerator?.automaticTransactionGeneratorStatuses?.find(
- entry => entry.connectorId === connectorId
- )?.status
-}
-const getSupervisionUrl = (): string => {
- const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
- return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
-}
+const connectorEntries = computed((): ConnectorEntry[] =>
+ getConnectorEntries(props.chargingStation)
+)
+const getATGStatusForConnector = (connectorId: number): Status | undefined =>
+ getATGStatus(props.chargingStation, connectorId)
+const supervisionUrl = computed((): string =>
+ formatSupervisionUrl(props.chargingStation.supervisionUrl, { wordBreak: true })
+)
-const $uiClient = useUIClient()
+const {
+ closeConnection,
+ deleteStation,
+ openConnection,
+ startStation: startChargingStation,
+ stopStation: stopChargingStation,
+} = useStationActions({ onRefresh: () => emit('need-refresh') })
-const executeAction = useExecuteAction($emit)
+const hashId = computed(() => props.chargingStation.stationInfo.hashId)
-const startChargingStation = (): void => {
- executeAction(
- $uiClient.startChargingStation(props.chargingStation.stationInfo.hashId),
- 'Charging station successfully started',
- 'Error at starting charging station'
- )
-}
-const stopChargingStation = (): void => {
- executeAction(
- $uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId),
- 'Charging station successfully stopped',
- 'Error at stopping charging station'
- )
-}
-const openConnection = (): void => {
- executeAction(
- $uiClient.openConnection(props.chargingStation.stationInfo.hashId),
- 'Connection successfully opened',
- 'Error at opening connection'
- )
-}
-const closeConnection = (): void => {
- executeAction(
- $uiClient.closeConnection(props.chargingStation.stationInfo.hashId),
- 'Connection successfully closed',
- 'Error at closing connection'
- )
-}
const deleteChargingStation = (): void => {
- executeAction(
- $uiClient.deleteChargingStation(props.chargingStation.stationInfo.hashId),
- 'Charging station successfully deleted',
- 'Error at deleting charging station',
- {
- onSuccess: () => {
- deleteLocalStorageByKeyPattern(props.chargingStation.stationInfo.hashId)
- },
- }
- )
+ deleteStation(hashId.value, () => {
+ deleteLocalStorageByKeyPattern(hashId.value)
+ })
}
</script>
<script setup lang="ts">
import type { ChargingStationData } from 'ui-common'
-import CSData from '@/components/charging-stations/CSData.vue'
+import CSData from './CSData.vue'
defineProps<{
chargingStations: ChargingStationData[]
}>()
-const $emit = defineEmits(['need-refresh'])
+defineEmits<{ 'need-refresh': [] }>()
</script>
<style scoped>
--- /dev/null
+<template>
+ <main class="modern-app">
+ <SimulatorBar
+ :refresh-pending="loading"
+ :selected-server-index="uiServerIndex"
+ :server-switch-pending="serverSwitchPending"
+ :simulator-pending="simulatorPending"
+ :simulator-state="simulatorState"
+ :ui-server-configurations="uiServerConfigurations"
+ @add="showAddDialog = true"
+ @refresh="getData"
+ @switch-server="handleUIServerChange"
+ @toggle-simulator="toggleSimulator"
+ />
+ <div
+ v-if="$chargingStations.length === 0"
+ class="modern-empty"
+ >
+ <div class="modern-empty__title">
+ No charging stations
+ </div>
+ <p>
+ Click <strong>Add Stations</strong> in the bar above to spin up your first one from a
+ template.
+ </p>
+ </div>
+ <section
+ v-else
+ class="modern-grid"
+ aria-label="Charging stations"
+ >
+ <StationCard
+ v-for="station in $chargingStations"
+ :key="station.stationInfo.hashId"
+ :charging-station="station"
+ @need-refresh="getChargingStations"
+ @open-authorize="openAuthorizeDialog"
+ @open-set-url="openSetUrlDialog"
+ @open-start-tx="openStartTxDialog"
+ />
+ </section>
+ <ConfirmDialog
+ v-if="confirmingStopSim"
+ title="Stop the simulator?"
+ message="All running charging stations and active transactions will stop."
+ confirm-label="Stop"
+ :pending="simulatorPending"
+ @cancel="confirmingStopSim = false"
+ @confirm="confirmStopSimulator"
+ />
+ <AddStationsDialog
+ v-if="showAddDialog"
+ @close="showAddDialog = false"
+ />
+ <SetSupervisionUrlDialog
+ v-if="showSetUrlDialog"
+ :hash-id="showSetUrlDialog.hashId"
+ :charging-station-id="showSetUrlDialog.chargingStationId"
+ @close="showSetUrlDialog = null"
+ />
+ <StartTransactionDialog
+ v-if="showStartTxDialog"
+ :hash-id="showStartTxDialog.hashId"
+ :charging-station-id="showStartTxDialog.chargingStationId"
+ :connector-id="showStartTxDialog.connectorId"
+ :evse-id="showStartTxDialog.evseId"
+ :ocpp-version="showStartTxDialog.ocppVersion"
+ @close="showStartTxDialog = null"
+ />
+ <AuthorizeDialog
+ v-if="showAuthorizeDialog"
+ :hash-id="showAuthorizeDialog.hashId"
+ :charging-station-id="showAuthorizeDialog.chargingStationId"
+ @close="showAuthorizeDialog = null"
+ />
+ </main>
+</template>
+
+<script setup lang="ts">
+// Dialog state via v-if (no URL coupling), enabling skin-independent modal interactions.
+import { type OCPPVersion } from 'ui-common'
+import { defineAsyncComponent, ref } from 'vue'
+
+import {
+ getFromLocalStorage,
+ UI_SERVER_CONFIGURATION_INDEX_KEY,
+ useChargingStations,
+} from '@/composables'
+import SkinLoadError from '@/shared/components/SkinLoadError.vue'
+import SkinLoading from '@/shared/components/SkinLoading.vue'
+import { useLayoutData } from '@/shared/composables/useLayoutData.js'
+import { useSimulatorControl } from '@/shared/composables/useSimulatorControl.js'
+
+import ConfirmDialog from './components/ConfirmDialog.vue'
+
+/**
+ * Creates a lazy-loaded dialog component with shared loading/error boundaries.
+ * @param loader - Dynamic import function for the dialog component
+ * @returns An async component definition with standardized loading and error states
+ */
+function defineAsyncDialog (loader: () => Promise<{ default: unknown }>) {
+ return defineAsyncComponent({
+ delay: 200,
+ errorComponent: SkinLoadError,
+ loader: loader as () => Promise<{ default: import('vue').Component }>,
+ loadingComponent: SkinLoading,
+ timeout: 10000,
+ })
+}
+
+const AddStationsDialog = defineAsyncDialog(
+ () => import('./components/dialogs/AddStationsDialog.vue')
+)
+const AuthorizeDialog = defineAsyncDialog(() => import('./components/dialogs/AuthorizeDialog.vue'))
+const SetSupervisionUrlDialog = defineAsyncDialog(
+ () => import('./components/dialogs/SetSupervisionUrlDialog.vue')
+)
+const StartTransactionDialog = defineAsyncDialog(
+ () => import('./components/dialogs/StartTransactionDialog.vue')
+)
+import SimulatorBar from './components/SimulatorBar.vue'
+import StationCard from './components/StationCard.vue'
+
+const $chargingStations = useChargingStations()
+
+const layoutData = useLayoutData()
+const { getChargingStations, getData, loading, simulatorState, uiServerConfigurations } = layoutData
+
+const uiServerIndex = ref(getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0))
+
+const {
+ handleUIServerChange: switchServer,
+ serverSwitchPending,
+ simulatorPending,
+ startSimulator,
+ stopSimulator,
+} = useSimulatorControl(layoutData)
+
+const handleUIServerChange = (nextIndex: number): void => {
+ uiServerIndex.value = nextIndex
+ switchServer(nextIndex)
+}
+
+const confirmingStopSim = ref(false)
+
+const showAddDialog = ref(false)
+const showSetUrlDialog = ref<null | {
+ chargingStationId: string
+ hashId: string
+}>(null)
+const showStartTxDialog = ref<null | {
+ chargingStationId: string
+ connectorId: string
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+}>(null)
+const showAuthorizeDialog = ref<null | {
+ chargingStationId: string
+ hashId: string
+}>(null)
+
+const confirmStopSimulator = (): void => {
+ stopSimulator()
+ confirmingStopSim.value = false
+}
+
+const toggleSimulator = (): void => {
+ if (simulatorState.value?.started === true) {
+ confirmingStopSim.value = true
+ } else {
+ startSimulator()
+ }
+}
+
+const openAuthorizeDialog = (data: typeof showAuthorizeDialog.value): void => {
+ showAuthorizeDialog.value = data
+}
+const openSetUrlDialog = (data: typeof showSetUrlDialog.value): void => {
+ showSetUrlDialog.value = data
+}
+const openStartTxDialog = (data: typeof showStartTxDialog.value): void => {
+ showStartTxDialog.value = data
+}
+</script>
--- /dev/null
+<template>
+ <button
+ type="button"
+ :class="['modern-btn', variantClass, { 'modern-btn--icon': icon }]"
+ :disabled="disabled || pending"
+ :title="title"
+ :aria-busy="pending || undefined"
+ >
+ <span
+ v-if="pending"
+ class="modern-btn__spinner"
+ aria-hidden="true"
+ />
+ <slot />
+ </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+ defineProps<{
+ disabled?: boolean
+ icon?: boolean
+ pending?: boolean
+ title?: string
+ variant?: 'chip' | 'danger' | 'default' | 'ghost' | 'primary'
+ }>(),
+ {
+ disabled: false,
+ icon: false,
+ pending: false,
+ title: undefined,
+ variant: 'default',
+ }
+)
+
+const variantClass = computed(() => {
+ switch (props.variant) {
+ case 'chip':
+ return 'modern-btn--chip'
+ case 'danger':
+ return 'modern-btn--danger'
+ case 'ghost':
+ return 'modern-btn--ghost'
+ case 'primary':
+ return 'modern-btn--primary'
+ default:
+ return ''
+ }
+})
+</script>
--- /dev/null
+<template>
+ <Modal
+ :title="title"
+ @close="$emit('cancel')"
+ >
+ <p class="modern-dialog__message">
+ {{ message }}
+ </p>
+ <template #footer>
+ <ActionButton
+ variant="ghost"
+ @click="$emit('cancel')"
+ >
+ {{ cancelLabel }}
+ </ActionButton>
+ <ActionButton
+ :variant="variant"
+ :pending="pending"
+ @click="$emit('confirm')"
+ >
+ {{ confirmLabel }}
+ </ActionButton>
+ </template>
+ </Modal>
+</template>
+
+<script setup lang="ts">
+import ActionButton from './ActionButton.vue'
+import Modal from './ModernModal.vue'
+
+withDefaults(
+ defineProps<{
+ cancelLabel?: string
+ confirmLabel?: string
+ message: string
+ pending?: boolean
+ title: string
+ variant?: 'danger' | 'primary'
+ }>(),
+ {
+ cancelLabel: 'Cancel',
+ confirmLabel: 'Confirm',
+ pending: false,
+ variant: 'danger',
+ }
+)
+
+defineEmits<{
+ cancel: []
+ confirm: []
+}>()
+</script>
--- /dev/null
+<template>
+ <div
+ :class="[
+ 'modern-connector',
+ { 'modern-connector--active': connector.transactionStarted === true },
+ ]"
+ >
+ <div class="modern-connector__gutter">
+ <span class="modern-connector__id">
+ {{ identifier }}
+ </span>
+ <button
+ type="button"
+ :class="['modern-connector__lock', { 'modern-connector__lock--on': effectiveLocked }]"
+ :disabled="pending.lock || connector.transactionStarted === true"
+ :title="lockTitle"
+ :aria-label="lockTitle"
+ :aria-pressed="effectiveLocked"
+ @click="toggleLock"
+ >
+ <svg
+ class="modern-connector__lock-icon"
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ x="3"
+ y="11"
+ width="18"
+ height="11"
+ rx="2"
+ />
+ <path
+ v-if="effectiveLocked"
+ d="M7 11V7a5 5 0 0 1 10 0v4"
+ />
+ <path
+ v-else
+ d="M7 11V7a5 5 0 0 1 9.9-1"
+ />
+ </svg>
+ </button>
+ </div>
+ <div class="modern-connector__content">
+ <div class="modern-connector__meta">
+ <StatePill :variant="statusVariant">
+ {{ connector.status ?? 'unknown' }}
+ </StatePill>
+ <StatePill
+ v-if="connector.locked === true"
+ variant="warn"
+ >
+ locked
+ </StatePill>
+ <StatePill
+ v-if="atgStatus?.start === true"
+ variant="ok"
+ >
+ ATG running
+ </StatePill>
+ </div>
+ <div
+ v-if="connector.transactionStarted === true"
+ class="modern-connector__tx"
+ >
+ <span
+ class="modern-connector__tx-dot"
+ aria-hidden="true"
+ />
+ <table class="modern-connector__tx-table">
+ <tbody>
+ <tr>
+ <th scope="row">
+ Tx
+ </th>
+ <td>#{{ connector.transactionId }}</td>
+ </tr>
+ <tr>
+ <th scope="row">
+ Energy
+ </th>
+ <td>{{ txEnergy }}</td>
+ </tr>
+ <tr v-if="connector.transactionIdTag != null">
+ <th scope="row">
+ Tag
+ </th>
+ <td>{{ connector.transactionIdTag }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="modern-connector__actions">
+ <button
+ v-if="connector.transactionStarted !== true"
+ type="button"
+ class="modern-icon-btn modern-icon-btn--primary modern-icon-btn--lg"
+ title="Start transaction"
+ aria-label="Start transaction"
+ @click="openStartTransaction"
+ >
+ <svg
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ fill="currentColor"
+ >
+ <path d="M8 5v14l11-7z" />
+ </svg>
+ </button>
+ <button
+ v-else
+ type="button"
+ class="modern-icon-btn modern-icon-btn--danger modern-icon-btn--lg"
+ :disabled="pending.stopTx"
+ title="Stop transaction"
+ aria-label="Stop transaction"
+ @click="stopTransaction"
+ >
+ <svg
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ fill="currentColor"
+ >
+ <rect
+ x="6"
+ y="6"
+ width="12"
+ height="12"
+ rx="1.5"
+ />
+ </svg>
+ </button>
+ <ActionButton
+ variant="chip"
+ :pending="pending.atg"
+ @click="toggleAtg"
+ >
+ {{ atgStatus?.start === true ? 'Stop ATG' : 'Start ATG' }}
+ </ActionButton>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import type { ConnectorStatus, OCPPVersion, Status } from 'ui-common'
+
+import { computed } from 'vue'
+
+import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
+import { getConnectorStatusVariant } from '@/shared/utils/stationStatus.js'
+
+import ActionButton from './ActionButton.vue'
+import StatePill from './StatePill.vue'
+
+const props = defineProps<{
+ atgStatus?: Status
+ chargingStationId: string
+ connector: ConnectorStatus
+ connectorId: number
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+}>()
+
+const emit = defineEmits<{
+ 'need-refresh': []
+ 'open-start-tx': [
+ data: {
+ chargingStationId: string
+ connectorId: string
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+ }
+ ]
+}>()
+
+const {
+ lockConnector,
+ pending,
+ startATG,
+ stopATG,
+ stopTransaction: doStopTransaction,
+ unlockConnector,
+} = useConnectorActions({
+ connectorId: computed(() => props.connectorId),
+ hashId: computed(() => props.hashId),
+ onRefresh: () => emit('need-refresh'),
+})
+
+const identifier = computed(() =>
+ props.evseId != null ? `${props.evseId}/${props.connectorId}` : String(props.connectorId)
+)
+
+const statusVariant = computed(() => getConnectorStatusVariant(props.connector.status))
+
+// Effectively locked when explicitly locked OR transaction active (physical lock engages).
+const effectiveLocked = computed(
+ () => props.connector.locked === true || props.connector.transactionStarted === true
+)
+
+const lockTitle = computed(() => {
+ if (props.connector.transactionStarted === true) return 'Locked during transaction'
+ return props.connector.locked === true ? 'Unlock connector' : 'Lock connector'
+})
+
+const txEnergy = computed(() => {
+ const wh = props.connector.transactionEnergyActiveImportRegisterValue
+ if (wh == null) return '—'
+ if (wh >= 1000) return `${(wh / 1000).toFixed(2)} kWh`
+ return `${Math.round(wh)} Wh`
+})
+
+const toggleLock = (): void => {
+ if (props.connector.locked === true) {
+ unlockConnector()
+ } else {
+ lockConnector()
+ }
+}
+
+const toggleAtg = (): void => {
+ if (props.atgStatus?.start === true) {
+ stopATG()
+ } else {
+ startATG()
+ }
+}
+
+const stopTransaction = (): void => {
+ doStopTransaction(props.connector.transactionId, props.ocppVersion)
+}
+
+const openStartTransaction = (): void => {
+ emit('open-start-tx', {
+ chargingStationId: props.chargingStationId,
+ connectorId: String(props.connectorId),
+ evseId: props.evseId,
+ hashId: props.hashId,
+ ocppVersion: props.ocppVersion,
+ })
+}
+</script>
--- /dev/null
+<template>
+ <Teleport to="body">
+ <div
+ class="modern-modal__backdrop"
+ role="presentation"
+ @mousedown="handleBackdropMouseDown"
+ @mouseup="handleBackdropMouseUp"
+ >
+ <div
+ ref="dialogEl"
+ :aria-labelledby="titleId"
+ class="modern-modal"
+ role="dialog"
+ aria-modal="true"
+ tabindex="-1"
+ @keydown.esc.stop="handleEsc"
+ @keydown.tab="handleTab"
+ >
+ <header class="modern-modal__head">
+ <h2
+ :id="titleId"
+ class="modern-modal__title"
+ >
+ {{ title }}
+ </h2>
+ <button
+ type="button"
+ class="modern-modal__close"
+ aria-label="Close dialog"
+ data-modal-close
+ @click="$emit('close')"
+ >
+ <svg
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ >
+ <path d="M18 6 6 18M6 6l12 12" />
+ </svg>
+ </button>
+ </header>
+ <div class="modern-modal__body">
+ <slot />
+ </div>
+ <footer
+ v-if="$slots.footer"
+ class="modern-modal__foot"
+ >
+ <slot name="footer" />
+ </footer>
+ </div>
+ </div>
+ </Teleport>
+</template>
+
+<script setup lang="ts">
+/* global HTMLElement, HTMLDivElement, KeyboardEvent, MouseEvent */
+import { nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
+
+const props = withDefaults(
+ defineProps<{
+ closeOnBackdrop?: boolean
+ title: string
+ }>(),
+ {
+ closeOnBackdrop: true,
+ }
+)
+
+const emit = defineEmits<{
+ close: []
+}>()
+
+const dialogEl = ref<HTMLDivElement | null>(null)
+const titleId = `modern-modal-${useId()}`
+let previouslyFocused: HTMLElement | null = null
+
+const focusableSelector =
+ 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const collectFocusables = (): HTMLElement[] => {
+ if (dialogEl.value == null) return []
+ return [...dialogEl.value.querySelectorAll<HTMLElement>(focusableSelector)]
+}
+
+const focusFirst = (): void => {
+ if (dialogEl.value == null) return
+ const focusables = collectFocusables()
+ // Prefer first non-close button so the user lands on a real input.
+ const target = focusables.find(el => !el.hasAttribute('data-modal-close')) ?? focusables[0]
+ if (target != null) {
+ target.focus()
+ } else {
+ dialogEl.value.focus()
+ }
+}
+
+const handleEsc = (): void => {
+ emit('close')
+}
+
+// Close only when both mousedown+mouseup occur on backdrop (prevents accidental close during text drag).
+let pressedOnBackdrop = false
+
+const handleBackdropMouseDown = (event: MouseEvent): void => {
+ pressedOnBackdrop = event.target === event.currentTarget
+}
+
+const handleBackdropMouseUp = (event: MouseEvent): void => {
+ const wasPressedOnBackdrop = pressedOnBackdrop
+ pressedOnBackdrop = false
+ if (!wasPressedOnBackdrop) return
+ if (event.target !== event.currentTarget) return
+ if (props.closeOnBackdrop) emit('close')
+}
+
+const handleTab = (event: KeyboardEvent): void => {
+ if (dialogEl.value == null) return
+ const focusables = collectFocusables()
+ if (focusables.length === 0) {
+ event.preventDefault()
+ dialogEl.value.focus()
+ return
+ }
+ const first = focusables[0]
+ const last = focusables[focusables.length - 1]
+ const active = document.activeElement as HTMLElement | null
+ if (event.shiftKey && active === first) {
+ event.preventDefault()
+ last.focus()
+ } else if (!event.shiftKey && active === last) {
+ event.preventDefault()
+ first.focus()
+ }
+}
+
+onMounted(() => {
+ document.body.style.overflow = 'hidden'
+ previouslyFocused = document.activeElement as HTMLElement | null
+ nextTick(focusFirst).catch((error: unknown) => {
+ console.error('Modal focus failed:', error)
+ })
+})
+
+onBeforeUnmount(() => {
+ document.body.style.overflow = ''
+ previouslyFocused?.focus?.()
+})
+</script>
+
+<style scoped>
+.modern-modal__backdrop {
+ position: fixed;
+ inset: 0;
+ background-color: var(--skin-backdrop-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--skin-space-4);
+ z-index: 100;
+ animation: modern-fade-in var(--skin-transition);
+}
+
+.modern-modal {
+ background-color: var(--skin-surface-raised);
+ color: var(--color-text);
+ font-family: var(--skin-font);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-lg);
+ box-shadow: var(--skin-shadow-modal);
+ width: 100%;
+ max-width: 560px;
+ max-height: 90vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ animation: modern-pop var(--skin-transition);
+}
+
+.modern-modal__head {
+ padding: var(--skin-space-4);
+ border-bottom: 1px solid var(--skin-border);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--skin-space-3);
+}
+
+.modern-modal__title {
+ margin: 0;
+ font-family: var(--skin-font);
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: var(--color-text-strong);
+ letter-spacing: -0.015em;
+}
+
+.modern-modal__close {
+ background: transparent;
+ border: none;
+ color: var(--color-text-muted);
+ line-height: 1;
+ cursor: pointer;
+ padding: var(--skin-space-1) var(--skin-space-2);
+ border-radius: var(--skin-radius-sm);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ background-color var(--skin-transition),
+ color var(--skin-transition);
+}
+
+.modern-modal__close svg {
+ width: 18px;
+ height: 18px;
+}
+
+.modern-modal__close:hover {
+ color: var(--color-text-strong);
+ background-color: var(--skin-primary-ghost);
+}
+
+.modern-modal__body {
+ padding: var(--skin-space-4);
+ overflow: auto;
+}
+
+.modern-modal__foot {
+ padding: var(--skin-space-3) var(--skin-space-4);
+ border-top: 1px solid var(--skin-border);
+ background-color: var(--skin-surface-sunken);
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--skin-space-2);
+}
+
+@keyframes modern-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes modern-pop {
+ from {
+ opacity: 0;
+ transform: scale(0.97) translateY(4px);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+</style>
--- /dev/null
+<template>
+ <div class="modern-bar">
+ <div class="modern-bar__brand">
+ <span
+ class="modern-bar__logo"
+ aria-hidden="true"
+ >EM</span>
+ <h1 class="modern-bar__title">
+ Charging Simulator
+ </h1>
+ </div>
+ <div class="modern-bar__group">
+ <StatePill :variant="simulatorVariant">
+ {{ simulatorLabel }}
+ </StatePill>
+ </div>
+ <span class="modern-bar__sep" />
+ <div
+ v-if="uiServerConfigurations.length > 1"
+ class="modern-bar__group"
+ >
+ <select
+ :value="selectedServerIndex"
+ class="modern-bar__select"
+ aria-label="UI server"
+ :disabled="serverSwitchPending"
+ @change="e => $emit('switch-server', getSelectIndex(e))"
+ >
+ <option
+ v-for="entry in uiServerConfigurations"
+ :key="entry.index"
+ :value="entry.index"
+ >
+ {{ entry.configuration.name ?? entry.configuration.host }}
+ </option>
+ </select>
+ </div>
+ <div class="modern-bar__group">
+ <ActionButton
+ variant="ghost"
+ :pending="refreshPending"
+ title="Refresh charging stations"
+ @click="$emit('refresh')"
+ >
+ Refresh
+ </ActionButton>
+ <ActionButton
+ variant="primary"
+ @click="$emit('add')"
+ >
+ + Add Stations
+ </ActionButton>
+ </div>
+ <div class="modern-bar__group">
+ <ActionButton
+ :variant="simulatorStarted ? 'danger' : 'primary'"
+ :pending="simulatorPending"
+ @click="$emit('toggle-simulator')"
+ >
+ {{ simulatorStarted ? 'Stop' : 'Start' }} Simulator
+ </ActionButton>
+ <select
+ :value="activeThemeId"
+ class="modern-bar__select"
+ aria-label="Theme"
+ @change="e => switchTheme(getSelectValue(e) as ThemeName)"
+ >
+ <option
+ v-for="theme in availableThemes"
+ :key="theme"
+ :value="theme"
+ >
+ {{ theme }}
+ </option>
+ </select>
+ <select
+ :value="activeSkinId"
+ class="modern-bar__select"
+ aria-label="Skin"
+ @change="e => switchSkin(getSelectValue(e))"
+ >
+ <option
+ v-for="skin in skinList"
+ :key="skin.id"
+ :value="skin.id"
+ >
+ {{ skin.label }}
+ </option>
+ </select>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import type { SimulatorState, UIServerConfigurationSection } from 'ui-common'
+
+import { computed } from 'vue'
+
+import { useSkin } from '@/shared/composables/useSkin.js'
+import { type ThemeName, useTheme } from '@/shared/composables/useTheme.js'
+import { getSelectValue } from '@/shared/utils/dom.js'
+
+import ActionButton from './ActionButton.vue'
+import StatePill from './StatePill.vue'
+
+/**
+ * Extracts the selectedIndex from a select element change event.
+ * @param e - The DOM change event
+ * @returns The selected option's index
+ */
+function getSelectIndex (e: Event): number {
+ // eslint-disable-next-line no-undef
+ return (e.target as HTMLSelectElement).selectedIndex
+}
+
+const props = defineProps<{
+ refreshPending?: boolean
+ selectedServerIndex: number
+ serverSwitchPending?: boolean
+ simulatorPending?: boolean
+ simulatorState?: SimulatorState
+ uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[]
+}>()
+
+defineEmits<{
+ add: []
+ refresh: []
+ 'switch-server': [index: number]
+ 'toggle-simulator': []
+}>()
+
+const { activeSkinId, availableSkins: skinList, switchSkin } = useSkin()
+const { activeThemeId, availableThemes, switchTheme } = useTheme()
+
+const simulatorStarted = computed(() => props.simulatorState?.started === true)
+
+const simulatorVariant = computed<'err' | 'idle' | 'ok'>(() => {
+ if (props.simulatorState == null) return 'idle'
+ return simulatorStarted.value ? 'ok' : 'err'
+})
+
+const simulatorLabel = computed(() => {
+ if (props.simulatorState == null) return 'Disconnected'
+ const version = props.simulatorState.version != null ? ` (${props.simulatorState.version})` : ''
+ return `${simulatorStarted.value ? 'Running' : 'Stopped'}${version}`
+})
+</script>
--- /dev/null
+<template>
+ <span :class="['modern-pill', `modern-pill--${variant}`]">
+ <slot />
+ </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+ variant: 'err' | 'idle' | 'ok' | 'warn'
+}>()
+</script>
--- /dev/null
+<template>
+ <article
+ class="modern-card"
+ :aria-label="`Charging station ${chargingStation.stationInfo.chargingStationId}`"
+ >
+ <header class="modern-card__head">
+ <div class="modern-card__head-row">
+ <h3 class="modern-card__title">
+ {{ chargingStation.stationInfo.chargingStationId }}
+ </h3>
+ <div class="modern-card__pills">
+ <StatePill :variant="startedVariant">
+ {{ chargingStation.started === true ? 'started' : 'stopped' }}
+ </StatePill>
+ <StatePill :variant="wsVariant">
+ ws {{ wsLabel }}
+ </StatePill>
+ </div>
+ </div>
+ <dl class="modern-card__subtitle">
+ <div
+ class="modern-card__template-badge"
+ :title="chargingStation.stationInfo.templateName"
+ >
+ <span class="modern-card__template-value">
+ {{ chargingStation.stationInfo.templateName }}
+ </span>
+ </div>
+ <div>
+ <dt>Vendor</dt>
+ <dd>{{ chargingStation.stationInfo.chargePointVendor }}</dd>
+ </div>
+ <div>
+ <dt>Model</dt>
+ <dd>{{ chargingStation.stationInfo.chargePointModel }}</dd>
+ </div>
+ <div>
+ <dt>OCPP</dt>
+ <dd>{{ chargingStation.stationInfo.ocppVersion ?? EMPTY }}</dd>
+ </div>
+ <div>
+ <dt>Firmware</dt>
+ <dd>{{ chargingStation.stationInfo.firmwareVersion ?? EMPTY }}</dd>
+ </div>
+ <div>
+ <dt>Registration</dt>
+ <dd>{{ chargingStation.bootNotificationResponse?.status ?? EMPTY }}</dd>
+ </div>
+ </dl>
+ </header>
+ <div class="modern-card__body">
+ <div
+ class="modern-card__url-row"
+ role="button"
+ tabindex="0"
+ aria-label="Edit supervision URL"
+ :title="chargingStation.supervisionUrl"
+ @click="emitOpenSetUrl"
+ @keydown.enter.prevent="emitOpenSetUrl"
+ @keydown.space.prevent="emitOpenSetUrl"
+ >
+ <span class="modern-card__url-badge">CSMS</span>
+ <p class="modern-card__url">
+ {{ supervisionUrl }}
+ </p>
+ <button
+ type="button"
+ class="modern-card__url-edit"
+ title="Edit supervision URL"
+ aria-label="Edit supervision URL"
+ @click.stop="emitOpenSetUrl"
+ >
+ <svg
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M12 20h9" />
+ <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+ </svg>
+ </button>
+ </div>
+ <p class="modern-card__section-label">
+ Connectors
+ </p>
+ <div
+ v-if="connectors.length === 0"
+ class="modern-card__empty-connectors"
+ >
+ No connectors
+ </div>
+ <div
+ v-else
+ class="modern-card__connectors"
+ >
+ <ConnectorRow
+ v-for="entry in connectors"
+ :key="
+ entry.evseId != null
+ ? `${entry.evseId}-${entry.connectorId}`
+ : String(entry.connectorId)
+ "
+ :atg-status="getATGStatusForConnector(entry.connectorId)"
+ :charging-station-id="chargingStation.stationInfo.chargingStationId"
+ :connector="entry.connectorStatus"
+ :connector-id="entry.connectorId"
+ :evse-id="entry.evseId"
+ :hash-id="chargingStation.stationInfo.hashId"
+ :ocpp-version="chargingStation.stationInfo.ocppVersion"
+ @need-refresh="$emit('need-refresh')"
+ @open-start-tx="data => $emit('open-start-tx', data)"
+ />
+ </div>
+ </div>
+ <footer class="modern-card__foot">
+ <div class="modern-card__foot-group">
+ <ActionButton
+ :variant="chargingStation.started === true ? 'default' : 'primary'"
+ :pending="pending.startStop"
+ @click="toggleStation"
+ >
+ {{ chargingStation.started === true ? 'Stop' : 'Start' }}
+ </ActionButton>
+ <ActionButton
+ :pending="pending.connection"
+ @click="toggleConnection"
+ >
+ {{ wsOpen ? 'Disconnect' : 'Connect' }}
+ </ActionButton>
+ <ActionButton
+ variant="ghost"
+ @click="emitOpenAuthorize"
+ >
+ Authorize
+ </ActionButton>
+ </div>
+ <ActionButton
+ variant="danger"
+ @click="confirmingDelete = true"
+ >
+ Delete
+ </ActionButton>
+ </footer>
+ <ConfirmDialog
+ v-if="confirmingDelete"
+ :title="`Delete ${chargingStation.stationInfo.chargingStationId}?`"
+ :message="`This permanently removes the station from the simulator. Active transactions will be lost.`"
+ confirm-label="Delete"
+ :pending="pending.delete"
+ @cancel="confirmingDelete = false"
+ @confirm="handleDeleteStation"
+ />
+ </article>
+</template>
+
+<script setup lang="ts">
+import {
+ type ChargingStationData,
+ type ConnectorEntry,
+ getWebSocketStateName,
+ type OCPPVersion,
+ type Status,
+ WebSocketReadyState,
+} from 'ui-common'
+import { computed, ref } from 'vue'
+
+import { deleteLocalStorageByKeyPattern, EMPTY_VALUE_PLACEHOLDER as EMPTY } from '@/composables'
+import { useStationActions } from '@/shared/composables/useStationActions.js'
+import { formatSupervisionUrl } from '@/shared/utils/formatSupervisionUrl.js'
+import {
+ getATGStatus,
+ getConnectorEntries,
+ getWebSocketStateVariant,
+} from '@/shared/utils/stationStatus.js'
+
+import ActionButton from './ActionButton.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import ConnectorRow from './ConnectorRow.vue'
+import StatePill from './StatePill.vue'
+
+const props = defineProps<{
+ chargingStation: ChargingStationData
+}>()
+
+const emit = defineEmits<{
+ 'need-refresh': []
+ 'open-authorize': [data: { chargingStationId: string; hashId: string }]
+ 'open-set-url': [data: { chargingStationId: string; hashId: string }]
+ 'open-start-tx': [
+ data: {
+ chargingStationId: string
+ connectorId: string
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+ }
+ ]
+}>()
+
+const confirmingDelete = ref(false)
+
+const { closeConnection, deleteStation, openConnection, pending, startStation, stopStation } =
+ useStationActions({ onRefresh: () => emit('need-refresh') })
+
+const wsOpen = computed(() => props.chargingStation.wsState === WebSocketReadyState.OPEN)
+
+const startedVariant = computed<'err' | 'ok'>(() =>
+ props.chargingStation.started === true ? 'ok' : 'err'
+)
+
+const wsVariant = computed(() => getWebSocketStateVariant(props.chargingStation.wsState))
+
+const wsLabel = computed(() => {
+ const name = getWebSocketStateName(props.chargingStation.wsState)
+ return name?.toLowerCase() ?? 'unknown'
+})
+
+const supervisionUrl = computed(() => formatSupervisionUrl(props.chargingStation.supervisionUrl))
+
+const connectors = computed<ConnectorEntry[]>(() => getConnectorEntries(props.chargingStation))
+
+const getATGStatusForConnector = (connectorId: number): Status | undefined =>
+ getATGStatus(props.chargingStation, connectorId)
+
+const toggleStation = (): void => {
+ const hashId = props.chargingStation.stationInfo.hashId
+ if (props.chargingStation.started === true) {
+ stopStation(hashId)
+ } else {
+ startStation(hashId)
+ }
+}
+
+const toggleConnection = (): void => {
+ const hashId = props.chargingStation.stationInfo.hashId
+ if (wsOpen.value) {
+ closeConnection(hashId)
+ } else {
+ openConnection(hashId)
+ }
+}
+
+const emitOpenSetUrl = (): void => {
+ emit('open-set-url', {
+ chargingStationId: props.chargingStation.stationInfo.chargingStationId,
+ hashId: props.chargingStation.stationInfo.hashId,
+ })
+}
+
+const emitOpenAuthorize = (): void => {
+ emit('open-authorize', {
+ chargingStationId: props.chargingStation.stationInfo.chargingStationId,
+ hashId: props.chargingStation.stationInfo.hashId,
+ })
+}
+
+const handleDeleteStation = (): void => {
+ const hashId = props.chargingStation.stationInfo.hashId
+ deleteStation(hashId, () => {
+ deleteLocalStorageByKeyPattern(hashId)
+ confirmingDelete.value = false
+ })
+}
+</script>
--- /dev/null
+<template>
+ <Modal
+ title="Add charging stations"
+ @close="close"
+ >
+ <form
+ class="modern-form"
+ @submit.prevent="submit"
+ >
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-add-template"
+ >Template</label>
+ <select
+ id="modern-add-template"
+ v-model="formState.template"
+ class="modern-form__select"
+ required
+ >
+ <option
+ disabled
+ value=""
+ >
+ — select a template —
+ </option>
+ <option
+ v-for="t in templates"
+ :key="t"
+ :value="t"
+ >
+ {{ t }}
+ </option>
+ </select>
+ </div>
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-add-count"
+ >Number of stations</label>
+ <input
+ id="modern-add-count"
+ v-model.number="formState.numberOfStations"
+ class="modern-form__input"
+ max="100"
+ min="1"
+ type="number"
+ required
+ >
+ </div>
+ <fieldset class="modern-form__row modern-form__fieldset">
+ <legend class="modern-form__label">
+ Naming
+ </legend>
+ <label
+ class="modern-form__label"
+ for="modern-add-basename"
+ >Base name</label>
+ <input
+ id="modern-add-basename"
+ v-model.trim="formState.baseName"
+ class="modern-form__input"
+ type="text"
+ placeholder="Base name (defaults to template name)"
+ >
+ <label class="modern-form__check">
+ <input
+ v-model="formState.fixedName"
+ type="checkbox"
+ >
+ Fixed name (base name is full station name)
+ </label>
+ </fieldset>
+ <fieldset class="modern-form__row modern-form__fieldset">
+ <legend class="modern-form__label">
+ Supervision
+ </legend>
+ <label
+ class="modern-form__label"
+ for="modern-add-url"
+ >URL</label>
+ <input
+ id="modern-add-url"
+ v-model.trim="formState.supervisionUrl"
+ class="modern-form__input"
+ type="url"
+ placeholder="wss://..."
+ >
+ <label
+ class="modern-form__label"
+ for="modern-add-user"
+ >Username</label>
+ <input
+ id="modern-add-user"
+ v-model.trim="formState.supervisionUser"
+ class="modern-form__input"
+ type="text"
+ placeholder="Username"
+ >
+ <label
+ class="modern-form__label"
+ for="modern-add-pass"
+ >Password</label>
+ <input
+ id="modern-add-pass"
+ v-model="formState.supervisionPassword"
+ class="modern-form__input"
+ type="password"
+ placeholder="Password"
+ >
+ <span class="modern-form__hint">
+ Leave blank to use the template's defaults. Any value entered overrides them.
+ </span>
+ </fieldset>
+ <div class="modern-form__row">
+ <label class="modern-form__check">
+ <input
+ v-model="formState.autoStart"
+ type="checkbox"
+ >
+ Auto-start the new stations
+ </label>
+ <label class="modern-form__check">
+ <input
+ v-model="formState.persistentConfiguration"
+ type="checkbox"
+ >
+ Persistent configuration
+ </label>
+ <label class="modern-form__check">
+ <input
+ v-model="formState.ocppStrictCompliance"
+ type="checkbox"
+ >
+ OCPP strict compliance
+ </label>
+ <label class="modern-form__check">
+ <input
+ v-model="formState.enableStatistics"
+ type="checkbox"
+ >
+ Performance statistics
+ </label>
+ </div>
+ </form>
+ <template #footer>
+ <ActionButton
+ variant="ghost"
+ @click="close"
+ >
+ Cancel
+ </ActionButton>
+ <ActionButton
+ variant="primary"
+ :pending="pending"
+ @click="submit"
+ >
+ Add
+ </ActionButton>
+ </template>
+ </Modal>
+</template>
+
+<script setup lang="ts">
+import { useAddStationsForm } from '@/shared/composables/useAddStationsForm.js'
+
+import ActionButton from '../ActionButton.vue'
+import Modal from '../ModernModal.vue'
+
+const emit = defineEmits<{ close: [] }>()
+
+const { formState, pending, submitForm, templates } = useAddStationsForm()
+
+const close = (): void => {
+ emit('close')
+}
+
+const submit = async (): Promise<void> => {
+ const success = await submitForm()
+ if (success) close()
+}
+</script>
--- /dev/null
+<template>
+ <Modal
+ :title="`Authorize — ${chargingStationId}`"
+ @close="close"
+ >
+ <form
+ class="modern-form"
+ @submit.prevent="submit"
+ >
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-auth-tag"
+ >RFID / ID Tag</label>
+ <input
+ id="modern-auth-tag"
+ v-model.trim="idTag"
+ class="modern-form__input"
+ type="text"
+ autocomplete="off"
+ placeholder="e.g. RFID-1234"
+ >
+ <span class="modern-form__hint">
+ Sends a standalone Authorize request for this tag. Does not start a transaction.
+ </span>
+ </div>
+ <div
+ v-if="lastFailure != null"
+ class="modern-form__error"
+ >
+ <div class="modern-form__error-summary">
+ <strong>Status</strong>
+ <span>{{ lastFailure.summary }}</span>
+ </div>
+ <details
+ v-if="lastFailure.payload != null"
+ class="modern-form__error-details"
+ >
+ <summary>Response JSON</summary>
+ <pre class="modern-form__error-json">{{ formattedPayload }}</pre>
+ </details>
+ </div>
+ </form>
+ <template #footer>
+ <ActionButton
+ variant="ghost"
+ @click="close"
+ >
+ Cancel
+ </ActionButton>
+ <ActionButton
+ variant="primary"
+ :pending="pending"
+ @click="submit"
+ >
+ Authorize
+ </ActionButton>
+ </template>
+ </Modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import { useUIClient } from '@/composables'
+
+import { type FailureInfo, getFailureInfo } from '../../utils/errors.js'
+import ActionButton from '../ActionButton.vue'
+import Modal from '../ModernModal.vue'
+
+const props = defineProps<{
+ chargingStationId: string
+ hashId: string
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const $uiClient = useUIClient()
+const $toast = useToast()
+
+const pending = ref(false)
+const lastFailure = ref<FailureInfo | null>(null)
+
+const idTag = ref('')
+
+const formattedPayload = computed(() =>
+ lastFailure.value?.payload != null ? JSON.stringify(lastFailure.value.payload, null, 2) : ''
+)
+
+const close = (): void => {
+ emit('close')
+}
+
+const submit = async (): Promise<void> => {
+ if (pending.value) return
+ if (idTag.value.length === 0) {
+ $toast.error('Provide an RFID tag')
+ return
+ }
+ pending.value = true
+ lastFailure.value = null
+ try {
+ await $uiClient.authorize(props.hashId, idTag.value)
+ $toast.success(`Authorized ${idTag.value}`)
+ close()
+ } catch (error) {
+ console.error('Error authorizing:', error)
+ const info = getFailureInfo(error)
+ lastFailure.value = info
+ $toast.error(`Authorize failed: ${info.summary}`)
+ } finally {
+ pending.value = false
+ }
+}
+</script>
--- /dev/null
+<template>
+ <Modal
+ :title="`Supervision URL — ${chargingStationId}`"
+ @close="close"
+ >
+ <form
+ class="modern-form"
+ @submit.prevent="submit"
+ >
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-sup-url"
+ >Supervision URL</label>
+ <input
+ id="modern-sup-url"
+ v-model.trim="formState.supervisionUrl"
+ class="modern-form__input"
+ type="url"
+ placeholder="wss://..."
+ required
+ >
+ </div>
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-sup-user"
+ >Username</label>
+ <input
+ id="modern-sup-user"
+ v-model.trim="formState.supervisionUser"
+ class="modern-form__input"
+ type="text"
+ placeholder="Username"
+ >
+ </div>
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-sup-pass"
+ >Password</label>
+ <input
+ id="modern-sup-pass"
+ v-model="formState.supervisionPassword"
+ class="modern-form__input"
+ type="password"
+ placeholder="Password"
+ >
+ <span class="modern-form__hint">
+ Credentials are sent verbatim; leaving username or password empty clears the stored value.
+ </span>
+ </div>
+ <label class="modern-form__check">
+ <input
+ v-model="reconnect"
+ type="checkbox"
+ >
+ Reconnect after saving
+ </label>
+ <span class="modern-form__hint">
+ New credentials only take effect on the next CSMS connection. Leave this checked to drop
+ & reopen the existing connection.
+ </span>
+ </form>
+ <template #footer>
+ <ActionButton
+ variant="ghost"
+ @click="close"
+ >
+ Cancel
+ </ActionButton>
+ <ActionButton
+ variant="primary"
+ :pending="pending"
+ @click="submit"
+ >
+ Save
+ </ActionButton>
+ </template>
+ </Modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { useChargingStations, useUIClient } from '@/composables'
+import { useSetUrlForm } from '@/shared/composables/useSetUrlForm.js'
+import { stripStationId } from '@/shared/utils/stripStationId.js'
+
+import ActionButton from '../ActionButton.vue'
+import Modal from '../ModernModal.vue'
+
+const props = defineProps<{
+ chargingStationId: string
+ hashId: string
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const { formState, pending, submitForm } = useSetUrlForm(props.hashId, props.chargingStationId)
+const $uiClient = useUIClient()
+const $chargingStations = useChargingStations()
+
+const reconnect = ref(true)
+
+const currentStation = computed(() =>
+ $chargingStations.value.find(station => station.stationInfo.hashId === props.hashId)
+)
+
+watch(
+ currentStation,
+ station => {
+ if (station != null) {
+ formState.value.supervisionUrl = stripStationId(
+ station.supervisionUrl ?? '',
+ station.stationInfo.chargingStationId ?? ''
+ )
+ formState.value.supervisionUser = station.stationInfo.supervisionUser ?? ''
+ formState.value.supervisionPassword = station.stationInfo.supervisionPassword ?? ''
+ }
+ },
+ { immediate: true }
+)
+
+const close = (): void => {
+ emit('close')
+}
+
+const submit = async (): Promise<void> => {
+ if (pending.value) return
+ try {
+ const success = await submitForm()
+ if (!success) return
+ if (reconnect.value && currentStation.value?.started === true) {
+ await $uiClient.closeConnection(props.hashId)
+ await $uiClient.openConnection(props.hashId)
+ }
+ close()
+ } catch {
+ // submitForm handles its own errors via toast
+ }
+}
+</script>
--- /dev/null
+<template>
+ <Modal
+ :title="`Start transaction — ${chargingStationId}`"
+ @close="close"
+ >
+ <form
+ class="modern-form"
+ @submit.prevent="submit"
+ >
+ <p class="modern-dialog__target-label">
+ {{ targetLabel }}
+ </p>
+ <div class="modern-form__row">
+ <label
+ class="modern-form__label"
+ for="modern-tx-idtag"
+ >RFID tag</label>
+ <input
+ id="modern-tx-idtag"
+ v-model.trim="formState.idTag"
+ class="modern-form__input"
+ type="text"
+ placeholder="optional"
+ >
+ </div>
+ <label class="modern-form__check">
+ <input
+ v-model="formState.authorizeIdTag"
+ type="checkbox"
+ >
+ Authorize the RFID tag first
+ </label>
+ <div
+ v-if="lastFailure != null"
+ class="modern-form__error"
+ >
+ <div class="modern-form__error-summary">
+ <strong>{{
+ errorStep === 'authorize'
+ ? 'Authorize failed'
+ : errorStep === 'startTransaction'
+ ? 'Start transaction failed'
+ : 'Status'
+ }}</strong>
+ <span>{{ lastFailure.summary }}</span>
+ </div>
+ <details
+ v-if="lastFailure.payload != null"
+ class="modern-form__error-details"
+ >
+ <summary>Response JSON</summary>
+ <pre class="modern-form__error-json">{{ formattedPayload }}</pre>
+ </details>
+ </div>
+ </form>
+ <template #footer>
+ <ActionButton
+ variant="ghost"
+ @click="close"
+ >
+ Cancel
+ </ActionButton>
+ <ActionButton
+ variant="primary"
+ :pending="pending"
+ @click="submit"
+ >
+ Start
+ </ActionButton>
+ </template>
+ </Modal>
+</template>
+
+<script setup lang="ts">
+import type { OCPPVersion } from 'ui-common'
+
+import { computed, ref, watch } from 'vue'
+
+import { useStartTxForm } from '@/shared/composables/useStartTxForm.js'
+
+import { type FailureInfo, getFailureInfo } from '../../utils/errors'
+import ActionButton from '../ActionButton.vue'
+import Modal from '../ModernModal.vue'
+
+const props = defineProps<{
+ chargingStationId: string
+ connectorId: string
+ evseId?: number
+ hashId: string
+ ocppVersion?: OCPPVersion
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const lastFailure = ref<FailureInfo | null>(null)
+const errorStep = ref<'authorize' | 'startTransaction' | null>(null)
+
+const { formState, pending, submitForm } = useStartTxForm({
+ connectorId: props.connectorId,
+ evseId: props.evseId,
+ hashId: props.hashId,
+ ocppVersion: props.ocppVersion,
+ options: {
+ onError: (error: unknown, step?: 'authorize' | 'startTransaction') => {
+ errorStep.value = step ?? null
+ lastFailure.value = getFailureInfo(error)
+ },
+ },
+})
+
+const targetLabel = computed(() =>
+ props.evseId != null
+ ? `EVSE ${String(props.evseId)} / Connector ${props.connectorId}`
+ : `Connector ${props.connectorId}`
+)
+
+const formattedPayload = computed(() =>
+ lastFailure.value?.payload != null ? JSON.stringify(lastFailure.value.payload, null, 2) : ''
+)
+
+watch(
+ formState,
+ () => {
+ lastFailure.value = null
+ errorStep.value = null
+ },
+ { deep: true }
+)
+
+const close = (): void => {
+ emit('close')
+}
+
+const submit = async (): Promise<void> => {
+ if (pending.value) return
+ lastFailure.value = null
+ const success = await submitForm()
+ if (success) emit('close')
+}
+</script>
--- /dev/null
+/* Modern skin styles.
+ *
+ * Flat, modern design with Material-inspired structural patterns.
+ * - Teal primary (Material 500/400) + Green / Amber / Red state colours
+ * - Onest across the UI; mono only for the supervision URL itself
+ * - Elevation tiers: base < card body < raised (header/modal) + sunken inserts
+ * - Hovers only touch colour / shadow, never layout
+ * - Theme switching handled by unified [data-theme] system
+ */
+
+/* Self-hosted Onest font (latin-ext) */
+@font-face {
+ font-family: 'Onest';
+ font-style: normal;
+ font-weight: 400 700;
+ font-display: swap;
+ src: url('@/assets/fonts/onest-latin-ext.woff2') format('woff2');
+ unicode-range:
+ U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+ U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+ U+A720-A7FF;
+}
+
+/* Self-hosted Onest font (latin) */
+@font-face {
+ font-family: 'Onest';
+ font-style: normal;
+ font-weight: 400 700;
+ font-display: swap;
+ src: url('@/assets/fonts/onest-latin.woff2') format('woff2');
+ unicode-range:
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+ U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+html[data-skin='modern'] {
+ /* ── Brand bridge — core colour from theme contract ────────────── */
+ --skin-primary-bright: color-mix(in srgb, var(--color-primary) 90%, #ffffff 10%);
+ --skin-primary-soft: color-mix(in srgb, var(--skin-primary-bright) 26%, transparent);
+ --skin-primary-ghost: color-mix(in srgb, var(--skin-primary-bright) 12%, transparent);
+
+ /* ── State bridge — from theme contract ────────────────────────── */
+ --skin-state-err-bg: color-mix(in srgb, var(--color-state-err) 14%, transparent);
+ --skin-state-idle-bg: color-mix(in srgb, var(--color-state-idle) 14%, transparent);
+
+ /* Spacing */
+ /* --skin-space-5 intentionally skipped: scale jumps from 1rem to 2rem for visual rhythm */
+ --skin-space-1: 0.25rem;
+ --skin-space-2: 0.5rem;
+ --skin-space-3: 0.75rem;
+ --skin-space-4: 1rem;
+ --skin-space-6: 2rem;
+ --skin-space-7: 3rem;
+
+ /* Radii */
+ --skin-radius-sm: 4px;
+ --skin-radius-md: 6px;
+ --skin-radius-lg: 10px;
+
+ /* Elevation shadows */
+ --skin-shadow-color: rgba(0, 0, 0, 0.08);
+ --skin-shadow-color-md: rgba(0, 0, 0, 0.12);
+ --skin-backdrop-color: rgba(0, 0, 0, 0.55);
+ /* Intentional: raw rgba opacity for broad browser support (color-mix requires Chrome 111+) */
+ --skin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
+ --skin-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.22);
+ --skin-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.28);
+ --skin-shadow-modal: 0 24px 48px -8px rgba(0, 0, 0, 0.45);
+
+ /* Typography */
+ --skin-font: 'Onest', ui-sans-serif, system-ui, sans-serif;
+ --skin-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+ /* ── Elevation tiers — built from theme surface token ─────────────
+ * Order of lightness (dark mode):
+ * base < card body < raised (header/modal)
+ * sunken < card body (sunken is inside-the-card)
+ *
+ * Each tier moves by ~6-10% so every level has a visible delta. */
+ --skin-base: color-mix(in srgb, var(--color-bg-surface) 100%, #000000 6%);
+ --skin-surface: color-mix(in srgb, var(--color-bg-surface) 86%, #ffffff 10%);
+ --skin-surface-raised: color-mix(in srgb, var(--color-bg-surface) 80%, #ffffff 14%);
+ --skin-surface-sunken: color-mix(in srgb, var(--color-bg-surface) 90%, #000000 4%);
+
+ /* Badge */
+ --skin-badge-bg: color-mix(in srgb, var(--skin-surface) 85%, #000000 8%);
+
+ /* Borders */
+ --skin-border: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
+ --skin-border-strong: color-mix(in srgb, var(--color-text-muted) 32%, transparent);
+
+ /* Transition */
+ --skin-transition: 140ms cubic-bezier(0.3, 0, 0.2, 1);
+}
+
+/* ── App shell — fill the viewport ─────────────────────────────────── */
+html[data-skin='modern'],
+html[data-skin='modern'] body {
+ height: 100%;
+ min-height: 100vh;
+}
+
+html[data-skin='modern'] #app {
+ display: block;
+ width: 100%;
+ min-height: 100vh;
+ height: auto;
+ font-family: var(--skin-font);
+ background-color: var(--skin-base);
+}
+
+.modern-app {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ gap: var(--skin-space-4);
+ padding: var(--skin-space-4) clamp(var(--skin-space-4), 3vw, var(--skin-space-6))
+ var(--skin-space-6);
+ font-family: var(--skin-font);
+ color: var(--color-text);
+ background-color: var(--skin-base);
+ box-sizing: border-box;
+}
+
+.modern-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
+ gap: var(--skin-space-4);
+ align-content: start;
+}
+
+.modern-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: var(--skin-space-3);
+ padding: var(--skin-space-7) var(--skin-space-4);
+ min-height: 40vh;
+ text-align: center;
+ color: var(--color-text-muted);
+ border: 1px dashed var(--skin-border);
+ border-radius: var(--skin-radius-lg);
+ background-color: var(--skin-surface);
+}
+
+.modern-empty__title {
+ color: var(--color-text-strong);
+ font-size: 1.25rem;
+ font-weight: 600;
+ letter-spacing: -0.015em;
+}
+
+/* ── Top bar ───────────────────────────────────────────────────────── */
+.modern-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--skin-space-3);
+ padding: var(--skin-space-3) var(--skin-space-4);
+ background-color: var(--skin-surface-raised);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-lg);
+ box-shadow: var(--skin-shadow-md);
+ position: sticky;
+ top: var(--skin-space-3);
+ z-index: 20;
+}
+
+.modern-bar__brand {
+ display: flex;
+ align-items: center;
+ gap: var(--skin-space-3);
+}
+
+.modern-bar__logo {
+ width: 28px;
+ height: 28px;
+ border-radius: var(--skin-radius-md);
+ background-color: var(--color-primary);
+ display: grid;
+ place-items: center;
+ color: var(--color-text-on-button);
+ font-weight: 700;
+ font-size: 0.85rem;
+ letter-spacing: -0.04em;
+}
+
+.modern-bar__title {
+ margin: 0;
+ font-family: var(--skin-font);
+ font-size: 1rem;
+ font-weight: 600;
+ letter-spacing: -0.015em;
+ color: var(--color-text-strong);
+}
+
+.modern-bar__sep {
+ flex: 1;
+}
+
+.modern-bar__group {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--skin-space-2);
+}
+
+.modern-bar__group + .modern-bar__group {
+ border-left: 1px solid var(--skin-border);
+ padding-left: var(--skin-space-3);
+ margin-left: var(--skin-space-1);
+}
+
+.modern-bar__select {
+ background-color: var(--skin-surface-sunken);
+ color: var(--color-text);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-md);
+ padding: var(--skin-space-1) var(--skin-space-2);
+ font-family: var(--skin-font);
+ font-size: 0.8125rem;
+ cursor: pointer;
+ min-height: 34px;
+ transition: border-color var(--skin-transition);
+}
+
+.modern-bar__select:hover {
+ border-color: var(--color-primary);
+}
+
+/* Icon buttons inside the bar (theme toggle) size-match the other
+ * 34px-tall buttons in the same row. Use transparent bg + muted icon
+ * so it doesn't read as heavier than the ghost-style bar buttons. */
+.modern-bar .modern-icon-btn {
+ width: 34px;
+ height: 34px;
+ background-color: transparent;
+ border-color: var(--skin-border);
+ color: var(--color-text-muted);
+}
+
+.modern-bar .modern-icon-btn:hover:not(:disabled) {
+ background-color: var(--skin-primary-ghost);
+ border-color: var(--color-primary);
+ color: var(--skin-primary-bright);
+}
+
+.modern-bar .modern-icon-btn svg {
+ width: 14px;
+ height: 14px;
+}
+
+/* ── Card ──────────────────────────────────────────────────────────── */
+.modern-card {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--skin-surface);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-lg);
+ overflow: hidden;
+ box-shadow: var(--skin-shadow-sm);
+ transition:
+ border-color var(--skin-transition),
+ box-shadow var(--skin-transition);
+}
+
+.modern-card:hover,
+.modern-card:focus-within {
+ border-color: var(--skin-border-strong);
+ box-shadow: var(--skin-shadow-lg);
+}
+
+/* Header is a container for two tonally-distinct zones:
+ * .modern-card__head-row — title + pills, on the raised teal-washed tier
+ * .modern-card__subtitle — spec grid, on a sunken tier below
+ * The tonal step is what carries the visual separation; the 1px border
+ * between them is secondary. */
+.modern-card__head {
+ padding: 0;
+ background: transparent;
+ border-bottom: 1px solid var(--skin-border);
+}
+
+.modern-card__head-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--skin-space-3);
+ padding: var(--skin-space-4);
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--skin-surface-raised) 88%, var(--color-primary) 12%) 0%,
+ var(--skin-surface-raised) 100%
+ );
+}
+
+.modern-card__title {
+ margin: 0;
+ font-family: var(--skin-font);
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--color-text-strong);
+ word-break: break-all;
+ letter-spacing: -0.02em;
+}
+
+.modern-card__pills {
+ display: flex;
+ gap: var(--skin-space-1);
+ flex-shrink: 0;
+}
+
+.modern-card__subtitle {
+ position: relative;
+ margin: 0;
+ padding: var(--skin-space-4) var(--skin-space-4) var(--skin-space-3);
+ background-color: var(--skin-surface-sunken);
+ border-top: 1px solid var(--skin-border);
+ display: grid;
+ /* Column widths tuned to typical values: middle carries the longest
+ * strings (Model, Registration), right carries very short ones
+ * (OCPP version like "1.6"), left is medium. */
+ grid-template-columns: 1fr 2fr 0.6fr;
+ gap: var(--skin-space-2) var(--skin-space-3);
+}
+
+.modern-card__subtitle > div {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+}
+
+.modern-card__subtitle dt {
+ font-size: 0.6875rem;
+ font-weight: 500;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ margin: 0;
+}
+
+.modern-card__subtitle dd {
+ margin: 0;
+ color: var(--color-text-strong);
+ font-size: 0.875rem;
+ font-weight: 500;
+ word-break: break-word;
+}
+
+/* Template floats as a small badge on the border between the title
+ * bar and the attribute grid (left-aligned), out of the grid flow.
+ * Selector matches `.modern-card__subtitle > div` specificity so it wins
+ * the `flex-direction: row` over the generic stacked layout. */
+.modern-card__subtitle > .modern-card__template-badge {
+ position: absolute;
+ top: 0;
+ left: var(--skin-space-3);
+ transform: translateY(-50%);
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 6px;
+ max-width: 90%;
+ padding: 2px 8px;
+ background-color: var(--skin-badge-bg);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-sm);
+ font-size: 0.625rem;
+ line-height: 1.4;
+ white-space: nowrap;
+ z-index: 1;
+ min-width: 0;
+}
+
+.modern-card__template-value {
+ color: var(--color-text-strong);
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: 0;
+}
+
+.modern-card__body {
+ padding: var(--skin-space-3) var(--skin-space-4) var(--skin-space-4);
+ display: flex;
+ flex-direction: column;
+ gap: var(--skin-space-3);
+ flex: 1;
+}
+
+/* Section label + the content right under it belong together, so pull
+ * them in tight. The body `gap` still separates distinct sections. */
+.modern-card__section-label + .modern-card__connectors,
+.modern-card__section-label + .modern-card__empty-connectors {
+ margin-top: calc(var(--skin-space-3) * -1 + var(--skin-space-1));
+}
+
+/* CSMS URL — single horizontal row, with a small "CSMS" badge that
+ * floats on the top border of the box (fieldset-legend style). */
+.modern-card__url-row {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: var(--skin-space-2);
+ padding: var(--skin-space-2) var(--skin-space-2) var(--skin-space-2) var(--skin-space-3);
+ background-color: var(--skin-surface-sunken);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-md);
+ cursor: pointer;
+ transition:
+ border-color var(--skin-transition),
+ background-color var(--skin-transition);
+}
+
+.modern-card__url-row:hover {
+ border-color: var(--skin-primary-soft);
+}
+
+/* Solid neutral badge sitting on the url-row's top border
+ * (fieldset-legend pattern). Uses the dedicated badge tone so it stays
+ * distinct from the surrounding surface tiers. */
+.modern-card__url-badge {
+ position: absolute;
+ top: 0;
+ left: var(--skin-space-2);
+ transform: translateY(-50%);
+ padding: 1px 8px;
+ background-color: var(--skin-badge-bg);
+ color: var(--color-text-strong);
+ border: 1px solid var(--skin-border);
+ font-size: 0.625rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ border-radius: var(--skin-radius-sm);
+ line-height: 1.4;
+ z-index: 1;
+}
+
+.modern-card__url {
+ flex: 1;
+ min-width: 0;
+ font-family: var(--skin-font-mono);
+ font-size: 0.8125rem;
+ color: var(--color-text-strong);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ word-break: normal;
+ margin: 0;
+ line-height: 1.35;
+}
+
+/* Pencil — minimal, since the whole row is clickable */
+.modern-card__url-edit {
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ border-radius: var(--skin-radius-sm);
+ color: var(--color-text-muted);
+ cursor: pointer;
+ transition: color var(--skin-transition);
+}
+
+.modern-card__url-edit:hover:not(:disabled) {
+ color: var(--skin-primary-bright);
+}
+
+.modern-card__url-edit:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 1px;
+}
+
+.modern-card__url-edit svg {
+ width: 13px;
+ height: 13px;
+}
+
+.modern-icon-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ background-color: var(--skin-primary-ghost);
+ border: 1px solid var(--skin-primary-soft);
+ border-radius: var(--skin-radius-md);
+ color: var(--skin-primary-bright);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition:
+ color var(--skin-transition),
+ background-color var(--skin-transition),
+ border-color var(--skin-transition);
+}
+
+.modern-icon-btn:hover:not(:disabled) {
+ color: var(--color-text-on-button);
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
+}
+
+.modern-icon-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.modern-icon-btn:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+.modern-icon-btn svg {
+ width: 14px;
+ height: 14px;
+}
+
+/* Icon-button modifier classes for primary/danger/large variants */
+.modern-icon-btn--lg {
+ width: 30px;
+ height: 30px;
+}
+
+.modern-icon-btn--lg svg {
+ width: 15px;
+ height: 15px;
+}
+
+.modern-icon-btn--primary {
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
+ color: var(--color-text-on-button);
+}
+
+.modern-icon-btn--primary:hover:not(:disabled) {
+ background-color: var(--skin-primary-bright);
+ border-color: var(--skin-primary-bright);
+ color: var(--color-text-on-button);
+}
+
+/* Desaturated red fill — mixes 22% neutral gray into the state-err
+ * so it doesn't glare in dark mode and doesn't look blood-dark in
+ * light mode. Works for both themes without a per-theme override. */
+.modern-icon-btn--danger {
+ background-color: color-mix(in srgb, var(--color-state-err) 78%, #888888 22%);
+ border-color: color-mix(in srgb, var(--color-state-err) 78%, #888888 22%);
+ color: var(--color-text-on-button);
+}
+
+.modern-icon-btn--danger:hover:not(:disabled) {
+ background-color: color-mix(in srgb, var(--color-state-err) 92%, #888888 8%);
+ border-color: color-mix(in srgb, var(--color-state-err) 92%, #888888 8%);
+ color: var(--color-text-on-button);
+ box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-state-err) 40%, transparent);
+}
+
+.modern-card__section-label {
+ font-size: 0.6875rem;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ margin: 0;
+}
+
+.modern-card__connectors {
+ display: flex;
+ flex-direction: column;
+ gap: var(--skin-space-2);
+}
+
+.modern-card__empty-connectors {
+ font-size: 0.8125rem;
+ color: var(--color-text-muted);
+ padding: var(--skin-space-3);
+ border: 1px dashed var(--skin-border);
+ border-radius: var(--skin-radius-md);
+ text-align: center;
+}
+
+.modern-card__foot {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--skin-space-2);
+ padding: var(--skin-space-3) var(--skin-space-4);
+ background-color: var(--skin-surface-sunken);
+ border-top: 1px solid var(--skin-border);
+}
+
+.modern-card__foot-group {
+ display: inline-flex;
+ gap: var(--skin-space-2);
+ align-items: center;
+}
+
+/* Push the danger action to the right. The red outline carries the
+ * "destructive, different category" signal by itself — no extra divider
+ * needed, which would disrupt the button's rounded shape. */
+.modern-card__foot > .modern-btn--danger {
+ margin-left: auto;
+}
+
+/* ── Connector row ─────────────────────────────────────────────────── */
+/* Layout: a slim full-height teal "gutter" holds the connector number
+ * on the left; the main column stacks status pills and action buttons. */
+.modern-connector {
+ display: flex;
+ align-items: stretch;
+ border-radius: var(--skin-radius-md);
+ background-color: var(--skin-surface-sunken);
+ border: 1px solid var(--skin-border);
+ overflow: hidden;
+ transition:
+ border-color var(--skin-transition),
+ background-color var(--skin-transition);
+}
+
+.modern-connector:hover {
+ border-color: var(--skin-border-strong);
+}
+
+/* Full-height gutter on the left: connector id + lock icon stacked.
+ * Subtle neutral tint (not brand teal), hairline right border. */
+.modern-connector__gutter {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--skin-space-1);
+ width: 32px;
+ min-width: 32px;
+ padding: var(--skin-space-2) 0 var(--skin-space-2);
+ background-color: color-mix(in srgb, var(--skin-surface) 85%, #000000 8%);
+ border-right: 1px solid var(--skin-border);
+}
+
+.modern-connector__id {
+ font-family: var(--skin-font);
+ font-size: 1.0625rem;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ color: var(--color-text-strong);
+ line-height: 1;
+}
+
+.modern-connector__lock {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ border-radius: var(--skin-radius-sm);
+ color: var(--color-text-muted);
+ cursor: pointer;
+ transition:
+ color var(--skin-transition),
+ background-color var(--skin-transition);
+}
+
+.modern-connector__lock:hover:not(:disabled) {
+ color: var(--skin-primary-bright);
+ background-color: var(--skin-primary-ghost);
+}
+
+.modern-connector__lock:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 1px;
+}
+
+.modern-connector__lock:disabled {
+ cursor: not-allowed;
+}
+
+/* Effective-locked colour cue: warn tint when the connector is locked
+ * (either explicitly via the API or implicitly during a transaction). */
+.modern-connector__lock--on {
+ color: var(--color-state-warn);
+}
+
+.modern-connector__lock svg {
+ width: 14px;
+ height: 14px;
+}
+
+/* ── Active transaction — stronger visual treatment ───────────────── */
+.modern-connector--active .modern-connector__gutter {
+ background-color: color-mix(in srgb, var(--color-state-warn) 16%, var(--skin-surface));
+ border-right-color: color-mix(in srgb, var(--color-state-warn) 40%, transparent);
+}
+
+.modern-connector--active {
+ border-color: color-mix(in srgb, var(--color-state-warn) 35%, var(--skin-border));
+}
+
+/* Active transaction — two-column table (label | value) with a
+ * pulsing dot in the top-left corner. Tight row heights so it fits
+ * inside the connector row without making it taller. */
+.modern-connector__tx {
+ position: relative;
+ flex: 1;
+ min-width: 0;
+ align-self: flex-start;
+ /* 18px = dot right offset (8px) + dot width (7px) + 3px breathing room */
+ padding: var(--skin-space-1) 18px var(--skin-space-1) var(--skin-space-2);
+ background-color: color-mix(in srgb, var(--color-state-warn) 12%, transparent);
+ border: 1px solid color-mix(in srgb, var(--color-state-warn) 30%, transparent);
+ border-radius: var(--skin-radius-sm);
+ color: var(--color-text-strong);
+}
+
+.modern-connector__tx-table {
+ border-collapse: collapse;
+ margin: 0;
+ font-size: 0.75rem;
+ line-height: 1.3;
+}
+
+.modern-connector__tx-table th {
+ font-weight: 500;
+ font-size: 0.625rem;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ text-align: left;
+ padding: 0 var(--skin-space-2) 0 0;
+ vertical-align: baseline;
+ white-space: nowrap;
+}
+
+.modern-connector__tx-table td {
+ font-weight: 600;
+ color: var(--color-text-strong);
+ padding: 0;
+ vertical-align: baseline;
+ word-break: break-word;
+}
+
+.modern-connector__tx-dot {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background-color: var(--color-state-warn);
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-state-warn) 60%, transparent);
+ animation: modern-tx-pulse 1.6s ease-out infinite;
+}
+
+@keyframes modern-tx-pulse {
+ 0% {
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-state-warn) 60%, transparent);
+ transform: scale(1);
+ }
+ 70% {
+ box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-state-warn) 0%, transparent);
+ transform: scale(1.05);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-state-warn) 0%, transparent);
+ transform: scale(1);
+ }
+}
+
+/* Content area — three zones side by side:
+ * meta pills (left) | active transaction strip (middle) | actions (right)
+ * Top-aligned so pills stack from the top; actions stay right via
+ * `margin-left: auto`. The middle zone only renders when a tx is active. */
+.modern-connector__content {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ gap: var(--skin-space-2);
+ padding: var(--skin-space-2);
+}
+
+.modern-connector__meta {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+}
+
+.modern-connector__actions {
+ margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: var(--skin-space-2);
+}
+
+/* ── State pill — readable chip on both themes ─────────────────────── */
+.modern-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 7px;
+ border-radius: var(--skin-radius-sm);
+ font-family: var(--skin-font);
+ font-size: 0.6875rem;
+ font-weight: 500;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+ white-space: nowrap;
+ line-height: 1;
+ border: 1px solid transparent;
+}
+
+/* Dark-mode defaults — lighten the text so it sits cleanly over the
+ * tinted background. In light mode the overrides below keep the
+ * darker state colour as text (Material 700 on white is readable). */
+.modern-pill--ok {
+ color: color-mix(in srgb, var(--color-state-ok) 55%, #ffffff 45%);
+ background-color: color-mix(in srgb, var(--color-state-ok) 26%, transparent);
+ border-color: color-mix(in srgb, var(--color-state-ok) 45%, transparent);
+}
+
+.modern-pill--warn {
+ color: color-mix(in srgb, var(--color-state-warn) 60%, #ffffff 40%);
+ background-color: color-mix(in srgb, var(--color-state-warn) 26%, transparent);
+ border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
+}
+
+.modern-pill--err {
+ color: color-mix(in srgb, var(--color-state-err) 55%, #ffffff 45%);
+ background-color: color-mix(in srgb, var(--color-state-err) 26%, transparent);
+ border-color: color-mix(in srgb, var(--color-state-err) 45%, transparent);
+}
+
+.modern-pill--idle {
+ color: var(--color-text-strong);
+ background-color: var(--skin-state-idle-bg);
+ border-color: var(--skin-border-strong);
+}
+
+/* ── Buttons — flat Material-style ─────────────────────────────────── */
+.modern-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--skin-space-2);
+ padding: 0 var(--skin-space-3);
+ font-family: var(--skin-font);
+ font-size: 0.8125rem;
+ font-weight: 500;
+ letter-spacing: 0.005em;
+ border-radius: var(--skin-radius-md);
+ border: 1px solid var(--skin-border);
+ background-color: transparent;
+ color: var(--color-text-strong);
+ cursor: pointer;
+ height: 34px;
+ white-space: nowrap;
+ transition:
+ background-color var(--skin-transition),
+ border-color var(--skin-transition),
+ color var(--skin-transition),
+ box-shadow var(--skin-transition);
+}
+
+.modern-btn:hover:not(:disabled) {
+ background-color: var(--skin-primary-ghost);
+ border-color: var(--skin-primary-soft);
+ color: var(--skin-primary-bright);
+}
+
+.modern-btn:active:not(:disabled) {
+ box-shadow: inset 0 1px 3px var(--skin-shadow-color-md);
+}
+
+.modern-btn:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+.modern-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.modern-btn--primary {
+ background-color: var(--color-primary);
+ color: var(--color-text-on-button);
+ border-color: var(--color-primary);
+}
+
+.modern-btn--primary:hover:not(:disabled) {
+ background-color: var(--skin-primary-bright);
+ border-color: var(--skin-primary-bright);
+ color: var(--color-text-on-button);
+ box-shadow: var(--skin-shadow-md);
+}
+
+.modern-btn--ghost {
+ background-color: transparent;
+ border-color: transparent;
+ color: var(--color-text-muted);
+}
+
+.modern-btn--ghost:hover:not(:disabled) {
+ background-color: var(--skin-primary-ghost);
+ color: var(--skin-primary-bright);
+}
+
+.modern-btn--danger {
+ color: var(--color-state-err);
+ border-color: color-mix(in srgb, var(--color-state-err) 35%, transparent);
+ background-color: transparent;
+}
+
+.modern-btn--danger:hover:not(:disabled) {
+ background-color: var(--skin-state-err-bg);
+ border-color: var(--color-state-err);
+ color: var(--color-state-err);
+}
+
+/* Chip — small secondary button for toggle-state actions. Normal
+ * button shape (square corners), just shorter than the default .modern-btn. */
+.modern-btn--chip {
+ height: 28px;
+ padding: 0 var(--skin-space-2);
+ font-size: 0.75rem;
+ font-weight: 500;
+}
+
+.modern-btn--icon {
+ padding: 0;
+ width: 34px;
+ min-width: 34px;
+}
+
+.modern-btn__spinner {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: 2px solid currentColor;
+ border-top-color: transparent;
+ animation: modern-spin 700ms linear infinite;
+ flex-shrink: 0;
+}
+
+@keyframes modern-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* ── Form ──────────────────────────────────────────────────────────── */
+.modern-form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--skin-space-3);
+}
+
+.modern-form__row {
+ display: flex;
+ flex-direction: column;
+ gap: var(--skin-space-1);
+}
+
+.modern-form__fieldset {
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+
+.modern-form__row--inline {
+ flex-direction: row;
+ align-items: center;
+ gap: var(--skin-space-2);
+}
+
+.modern-form__label {
+ font-size: 0.75rem;
+ color: var(--color-text-muted);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+}
+
+.modern-form__input,
+.modern-form__select {
+ width: 100%;
+ padding: var(--skin-space-2) var(--skin-space-3);
+ background-color: var(--skin-surface-sunken);
+ color: var(--color-text-strong);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-md);
+ font-family: var(--skin-font);
+ font-size: 0.875rem;
+ box-sizing: border-box;
+ transition:
+ border-color var(--skin-transition),
+ box-shadow var(--skin-transition);
+}
+
+.modern-form__input:focus,
+.modern-form__select:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px var(--skin-primary-ghost);
+}
+
+.modern-form__check {
+ display: inline-flex;
+ gap: var(--skin-space-2);
+ align-items: center;
+ font-size: 0.875rem;
+ cursor: pointer;
+ user-select: none;
+}
+
+.modern-form__hint {
+ font-size: 0.75rem;
+ color: var(--color-text-muted);
+}
+
+/* Inline error banner inside a form — shows a status summary plus an
+ * expandable JSON dump of the backend response. */
+.modern-form__error {
+ padding: var(--skin-space-3);
+ background-color: color-mix(in srgb, var(--color-state-err) 10%, transparent);
+ border: 1px solid color-mix(in srgb, var(--color-state-err) 35%, transparent);
+ border-radius: var(--skin-radius-md);
+ color: var(--color-text-strong);
+}
+
+.modern-form__error-summary {
+ display: flex;
+ align-items: baseline;
+ gap: var(--skin-space-2);
+ font-size: 0.875rem;
+ color: var(--color-state-err);
+ margin-bottom: var(--skin-space-2);
+}
+
+.modern-form__error-summary strong {
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-size: 0.6875rem;
+}
+
+.modern-form__error-details {
+ font-size: 0.75rem;
+}
+
+.modern-form__error-details > summary {
+ cursor: pointer;
+ color: var(--color-text-muted);
+ font-size: 0.75rem;
+ user-select: none;
+ list-style: none;
+ padding: 2px 0;
+}
+
+.modern-form__error-details > summary::-webkit-details-marker {
+ display: none;
+}
+
+.modern-form__error-details > summary::before {
+ content: '▸ ';
+ display: inline-block;
+ transition: transform var(--skin-transition);
+ color: var(--color-text-muted);
+}
+
+.modern-form__error-details[open] > summary::before {
+ transform: rotate(90deg);
+}
+
+.modern-form__error-json {
+ margin: var(--skin-space-2) 0 0;
+ padding: var(--skin-space-2) var(--skin-space-3);
+ background-color: var(--skin-surface-sunken);
+ border: 1px solid var(--skin-border);
+ border-radius: var(--skin-radius-sm);
+ font-family: var(--skin-font-mono);
+ font-size: 0.75rem;
+ line-height: 1.4;
+ white-space: pre-wrap;
+ overflow-x: auto;
+ color: var(--color-text);
+ max-height: 280px;
+ overflow-y: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .modern-connector__tx-dot,
+ .modern-btn__spinner,
+ .modern-modal,
+ .modern-modal__backdrop {
+ animation: none;
+ transition: none;
+ }
+}
+
+.modern-dialog__message {
+ margin: 0;
+ line-height: 1.5;
+}
+
+.modern-dialog__target-label {
+ margin: 0;
+ color: var(--color-text-muted);
+ font-size: 0.875rem;
+}
--- /dev/null
+// Extract protocol status from ServerFailureError commandResponse (e.g. "Invalid", "Blocked").
+
+import { extractErrorMessage, type ResponsePayload, ServerFailureError } from 'ui-common'
+
+export interface FailureInfo {
+ payload?: ResponsePayload
+ summary: string
+}
+
+const asRecord = (value: unknown): Record<string, unknown> | undefined =>
+ typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : undefined
+
+const stringField = (rec: Record<string, unknown> | undefined, key: string): string | undefined => {
+ const v = rec?.[key]
+ return typeof v === 'string' && v.length > 0 ? v : undefined
+}
+
+export const getFailureInfo = (error: unknown): FailureInfo => {
+ if (error instanceof ServerFailureError) {
+ const first = asRecord(error.payload.responsesFailed?.[0])
+ const cmdResponse = asRecord(first?.commandResponse)
+ const idTagInfo = asRecord(cmdResponse?.idTagInfo)
+
+ // Preferred: protocol status from commandResponse (e.g. "Invalid", "Blocked", "Expired").
+ const summary =
+ stringField(idTagInfo, 'status') ??
+ stringField(cmdResponse, 'status') ??
+ stringField(first, 'errorMessage') ??
+ extractErrorMessage(error)
+
+ return { payload: error.payload, summary }
+ }
+ return { summary: extractErrorMessage(error) }
+}
--- /dev/null
+/**
+ * Skin registry.
+ *
+ * Single source of truth for available skins.
+ * Each skin carries metadata and a lazy CSS loader for code splitting.
+ *
+ * Convention: All skin CSS MUST scope rules to `html[data-skin='<id>']` to prevent
+ * style bleeding when multiple skin stylesheets are loaded in the DOM simultaneously.
+ */
+
+import type { Component } from 'vue'
+
+import { type SKIN_IDS } from 'ui-common'
+
+export interface SkinDefinition {
+ /** Unique identifier used in localStorage and config.json. */
+ readonly id: (typeof SKIN_IDS)[number]
+ /** Display label shown in the UI switcher. */
+ readonly label: string
+ /** Lazy-loads the skin's root layout component. */
+ readonly loadLayout: () => Promise<{ default: Component }>
+ /** Lazy-loads the skin's structural CSS file. */
+ readonly loadStyles: () => Promise<unknown>
+}
+
+export const DEFAULT_SKIN: (typeof SKIN_IDS)[number] = 'classic'
+
+export const skins: readonly SkinDefinition[] = [
+ {
+ id: 'classic',
+ label: 'Classic',
+ loadLayout: () => import('@/skins/classic/ClassicLayout.vue'),
+ loadStyles: () => import('@/skins/classic/classic.css'),
+ },
+ {
+ id: 'modern',
+ label: 'Modern',
+ loadLayout: () => import('@/skins/modern/ModernLayout.vue'),
+ loadStyles: () => import('@/skins/modern/modern.css'),
+ },
+] as const
+++ /dev/null
-<template>
- <Container class="charging-stations-container">
- <Container class="buttons-container">
- <Container
- v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
- id="ui-server-container"
- class="ui-server-container"
- >
- <select
- id="ui-server-selector"
- v-model="state.uiServerIndex"
- class="ui-server-selector"
- @change="handleUIServerChange"
- >
- <option
- v-for="uiServerConfiguration in uiServerConfigurations"
- :key="uiServerConfiguration.index"
- :value="uiServerConfiguration.index"
- >
- {{
- uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
- }}
- </option>
- </select>
- </Container>
- <StateButton
- :active="simulatorStarted === true"
- :off="() => stopSimulator()"
- :off-label="simulatorLabel('Stop')"
- :on="() => startSimulator()"
- :on-label="simulatorLabel('Start')"
- />
- <ToggleButton
- :id="'add-charging-stations'"
- :key="state.renderAddChargingStations"
- :off="
- () => {
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- }
- "
- :on="
- () => {
- $router.push({ name: ROUTE_NAMES.ADD_CHARGING_STATIONS })
- }
- "
- :shared="true"
- >
- Add Charging Stations
- </ToggleButton>
- </Container>
- <CSTable
- v-show="Array.isArray($chargingStations) && $chargingStations.length > 0"
- :key="state.renderChargingStations"
- :charging-stations="$chargingStations"
- @need-refresh="
- () => {
- state.renderAddChargingStations = randomUUID()
- }
- "
- />
- </Container>
-</template>
-
-<script setup lang="ts">
-import {
- type ChargingStationData,
- randomUUID,
- type SimulatorState,
- type UIServerConfigurationSection,
- type UUIDv4,
-} from 'ui-common'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import StateButton from '@/components/buttons/StateButton.vue'
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
-import CSTable from '@/components/charging-stations/CSTable.vue'
-import Container from '@/components/Container.vue'
-import {
- deleteLocalStorageByKeyPattern,
- getFromLocalStorage,
- ROUTE_NAMES,
- setToLocalStorage,
- TOGGLE_BUTTON_KEY_PREFIX,
- UI_SERVER_CONFIGURATION_INDEX_KEY,
- useChargingStations,
- useConfiguration,
- useExecuteAction,
- useFetchData,
- useTemplates,
- useUIClient,
-} from '@/composables'
-
-const simulatorState = ref<SimulatorState | undefined>(undefined)
-
-const simulatorStarted = computed((): boolean | undefined => simulatorState.value?.started)
-
-const simulatorLabel = (action: string): string =>
- `${action} Simulator${
- simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''
- }`
-
-const state = ref<{
- renderAddChargingStations: UUIDv4
- renderChargingStations: UUIDv4
- uiServerIndex: number
-}>({
- renderAddChargingStations: randomUUID(),
- renderChargingStations: randomUUID(),
- uiServerIndex: getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0),
-})
-
-const refresh = (): void => {
- state.value.renderChargingStations = randomUUID()
- state.value.renderAddChargingStations = randomUUID()
-}
-
-const clearToggleButtons = (): void => {
- deleteLocalStorageByKeyPattern(TOGGLE_BUTTON_KEY_PREFIX)
-}
-
-const $configuration = useConfiguration()
-const $templates = useTemplates()
-const $chargingStations = useChargingStations()
-const $route = useRoute()
-const $router = useRouter()
-
-watch($chargingStations, () => {
- state.value.renderChargingStations = randomUUID()
-})
-
-watch($route, to => {
- if (to.name === ROUTE_NAMES.CHARGING_STATIONS) {
- refresh()
- }
-})
-
-const clearTemplates = (): void => {
- $templates.value = []
-}
-
-const clearChargingStations = (): void => {
- $chargingStations.value = []
-}
-
-const $uiClient = useUIClient()
-
-const executeAction = useExecuteAction()
-
-const { fetch: getSimulatorState } = useFetchData(
- () => $uiClient.simulatorState(),
- response => {
- simulatorState.value = response.state as unknown as SimulatorState
- },
- 'Error at fetching simulator state'
-)
-
-const { fetch: getTemplates } = useFetchData(
- () => $uiClient.listTemplates(),
- response => {
- $templates.value = response.templates as string[]
- },
- 'Error at fetching charging station templates',
- clearTemplates
-)
-
-const { fetch: getChargingStations } = useFetchData(
- () => $uiClient.listChargingStations(),
- response => {
- $chargingStations.value = response.chargingStations as ChargingStationData[]
- },
- 'Error at fetching charging stations',
- clearChargingStations
-)
-
-const getData = (): void => {
- getSimulatorState()
- getTemplates()
- getChargingStations()
-}
-
-const registerWSEventListeners = () => {
- $uiClient.registerWSEventListener('open', getData)
- $uiClient.registerWSEventListener('error', clearChargingStations)
- $uiClient.registerWSEventListener('close', clearChargingStations)
-}
-
-const unregisterWSEventListeners = () => {
- $uiClient.unregisterWSEventListener('open', getData)
- $uiClient.unregisterWSEventListener('error', clearChargingStations)
- $uiClient.unregisterWSEventListener('close', clearChargingStations)
-}
-
-const handleUIServerChange = (): void => {
- const currentIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
- if (currentIndex === state.value.uiServerIndex) return
-
- $uiClient.setConfiguration(
- ($configuration.value.uiServer as UIServerConfigurationSection[])[state.value.uiServerIndex]
- )
- registerWSEventListeners()
-
- $uiClient.registerWSEventListener(
- 'open',
- () => {
- setToLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, state.value.uiServerIndex)
- clearToggleButtons()
- refresh()
- if ($route.name !== ROUTE_NAMES.CHARGING_STATIONS) {
- $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS })
- }
- },
- { once: true }
- )
-
- $uiClient.registerWSEventListener(
- 'error',
- () => {
- state.value.uiServerIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
- $uiClient.setConfiguration(
- ($configuration.value.uiServer as UIServerConfigurationSection[])[state.value.uiServerIndex]
- )
- registerWSEventListeners()
- },
- { once: true }
- )
-}
-
-let unsubscribeRefresh: (() => void) | undefined
-
-onMounted(() => {
- registerWSEventListeners()
- unsubscribeRefresh = $uiClient.onRefresh(() => {
- getChargingStations()
- })
-})
-
-onUnmounted(() => {
- unregisterWSEventListeners()
- unsubscribeRefresh?.()
-})
-
-const uiServerConfigurations: {
- configuration: UIServerConfigurationSection
- index: number
-}[] = ($configuration.value.uiServer as UIServerConfigurationSection[]).map(
- (configuration: UIServerConfigurationSection, index: number) => ({
- configuration,
- index,
- })
-)
-
-const startSimulator = (): void => {
- executeAction(
- $uiClient.startSimulator(),
- 'Simulator successfully started',
- 'Error at starting simulator',
- { onFinally: getSimulatorState }
- )
-}
-const stopSimulator = (): void => {
- executeAction(
- $uiClient.stopSimulator(),
- 'Simulator successfully stopped',
- 'Error at stopping simulator',
- { onFinally: getSimulatorState, onSuccess: clearChargingStations }
- )
-}
-</script>
-
-<style scoped>
-.charging-stations-container {
- min-width: 0;
- overflow: hidden;
- height: fit-content;
- display: flex;
- flex-direction: column;
-}
-
-.ui-server-container {
- display: flex;
- flex: 3 1 0;
- min-width: 0;
- justify-content: center;
- border: 1px solid var(--color-border-row);
-}
-
-.ui-server-selector {
- width: 100%;
- background-color: var(--color-bg-input);
- color: var(--color-text);
- font-size: var(--font-size-sm);
- text-align: center;
-}
-
-.ui-server-selector:hover {
- background-color: var(--color-bg-hover);
-}
-
-.ui-server-selector:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: -2px;
-}
-
-.buttons-container {
- display: flex;
- flex-direction: row;
- gap: var(--spacing-xs);
- position: sticky;
- top: 0;
-}
-
-.buttons-container > * {
- flex: 1 1 0;
-}
-</style>
+++ /dev/null
-<template>
- <Container class="not-found">
- 404 - Not found
- </Container>
-</template>
-
-<script setup lang="ts">
-import Container from '@/components/Container.vue'
-</script>
-
-<style scoped>
-.not-found {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 2rem;
- font-weight: bold;
-}
-</style>
+++ /dev/null
-/**
- * @file Tests for AddChargingStations component
- * @description Unit tests for add stations form — template selection, submission, and navigation.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import AddChargingStations from '@/components/actions/AddChargingStations.vue'
-import { templatesKey, uiClientKey } from '@/composables'
-
-import { toastMock } from '../setup'
-import { ButtonStub, createMockUIClient, type MockUIClient } from './helpers'
-
-vi.mock('vue-router', async importOriginal => {
- const actual: Record<string, unknown> = await importOriginal()
- return {
- ...actual,
- useRouter: vi.fn(),
- }
-})
-
-import { useRouter } from 'vue-router'
-
-describe('AddChargingStations', () => {
- let mockClient: MockUIClient
- let mockRouter: { push: ReturnType<typeof vi.fn> }
-
- /** @returns Mounted component wrapper */
- function mountComponent () {
- mockClient = createMockUIClient()
- mockRouter = { push: vi.fn() }
- vi.mocked(useRouter).mockReturnValue(mockRouter as unknown as ReturnType<typeof useRouter>)
- return mount(AddChargingStations, {
- global: {
- provide: {
- [templatesKey as symbol]: ref(['template-A.json', 'template-B.json']),
- [uiClientKey as symbol]: mockClient,
- },
- stubs: {
- Button: ButtonStub,
- },
- },
- })
- }
-
- it('should render template select dropdown', () => {
- const wrapper = mountComponent()
- expect(wrapper.find('select').exists()).toBe(true)
- })
-
- it('should render template options from $templates', () => {
- const wrapper = mountComponent()
- const options = wrapper.findAll('option')
- expect(options.some(o => o.text().includes('template-A.json'))).toBe(true)
- expect(options.some(o => o.text().includes('template-B.json'))).toBe(true)
- })
-
- it('should render number of stations input', () => {
- const wrapper = mountComponent()
- expect(wrapper.find('#number-of-stations').exists()).toBe(true)
- })
-
- it('should render supervision URL input', () => {
- const wrapper = mountComponent()
- expect(wrapper.find('#supervision-url').exists()).toBe(true)
- })
-
- it('should call addChargingStations on button click', async () => {
- const wrapper = mountComponent()
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.addChargingStations).toHaveBeenCalled()
- })
-
- it('should navigate to charging-stations on success', async () => {
- const wrapper = mountComponent()
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockRouter.push).toHaveBeenCalledWith({ name: 'charging-stations' })
- })
-
- it('should show error toast on failure', async () => {
- const wrapper = mountComponent()
- mockClient.addChargingStations = vi.fn().mockRejectedValue(new Error('Network error'))
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalled()
- })
-
- it('should render option checkboxes', () => {
- const wrapper = mountComponent()
- const checkboxes = wrapper.findAll('input[type="checkbox"]')
- expect(checkboxes.length).toBe(5)
- })
-
- it('should pass supervision URL option when provided', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-url').setValue('wss://custom-server.com')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.addChargingStations).toHaveBeenCalledWith(
- expect.anything(),
- expect.anything(),
- expect.objectContaining({ supervisionUrls: 'wss://custom-server.com' })
- )
- })
-
- it('should not pass supervision URL option when empty', async () => {
- const wrapper = mountComponent()
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.addChargingStations).toHaveBeenCalledWith(
- expect.anything(),
- expect.anything(),
- expect.objectContaining({ supervisionUrls: undefined })
- )
- })
-
- it('should pass baseName and credentials when provided', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#base-name').setValue('DEV-STATION')
- await wrapper.find('#supervision-user').setValue('alice')
- await wrapper.find('#supervision-password').setValue('s3cret')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.addChargingStations).toHaveBeenCalledWith(
- expect.anything(),
- expect.anything(),
- expect.objectContaining({
- baseName: 'DEV-STATION',
- supervisionPassword: 's3cret',
- supervisionUser: 'alice',
- })
- )
- })
-
- it('should pass fixedName: true when baseName is set and fixedName checkbox is checked', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#base-name').setValue('DEV-STATION')
- const checkboxes = wrapper.findAll('input[type="checkbox"]')
- await checkboxes[0].setValue(true)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.addChargingStations).toHaveBeenCalledWith(
- expect.anything(),
- expect.anything(),
- expect.objectContaining({ baseName: 'DEV-STATION', fixedName: true })
- )
- })
-})
--- /dev/null
+/**
+ * @file Tests for App root component
+ * @description Smoke test verifying the App.vue skin switching shell mounts without errors.
+ */
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import App from '@/App.vue'
+
+vi.mock('@/skins/registry.js', () => ({
+ DEFAULT_SKIN: 'classic',
+ skins: [
+ {
+ id: 'classic',
+ label: 'Classic',
+ loadLayout: () =>
+ Promise.resolve({ default: { template: '<div class="classic-layout">Classic</div>' } }),
+ loadStyles: vi.fn().mockResolvedValue(undefined),
+ },
+ {
+ id: 'modern',
+ label: 'Modern',
+ loadLayout: () =>
+ Promise.resolve({ default: { template: '<div class="modern-layout">Modern</div>' } }),
+ loadStyles: vi.fn().mockResolvedValue(undefined),
+ },
+ ],
+}))
+
+describe('App', () => {
+ afterEach(() => {
+ document.documentElement.removeAttribute('data-skin')
+ })
+
+ it('should mount the skin switching shell without errors', () => {
+ const wrapper = mount(App)
+ expect(wrapper.vm).toBeDefined()
+ wrapper.unmount()
+ })
+})
+++ /dev/null
-/**
- * @file Tests for CSConnector component
- * @description Unit tests for connector row display, transaction actions, and ATG controls.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { OCPP16ChargePointStatus } from 'ui-common'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { UIClient } from '@/composables'
-
-import CSConnector from '@/components/charging-stations/CSConnector.vue'
-import { EMPTY_VALUE_PLACEHOLDER, useUIClient } from '@/composables'
-
-import { toastMock } from '../setup'
-import { createConnectorStatus, TEST_HASH_ID, TEST_STATION_ID } from './constants'
-import { ButtonStub, createMockUIClient, type MockUIClient, StateButtonStub } from './helpers'
-
-vi.mock('@/composables', async importOriginal => {
- const actual = await importOriginal()
- return { ...(actual as Record<string, unknown>), useUIClient: vi.fn() }
-})
-
-/**
- * Mounts CSConnector with mock UIClient and Button stub.
- * @param overrideProps - Props to override defaults
- * @returns Mounted component wrapper
- */
-function mountCSConnector (overrideProps: Record<string, unknown> = {}) {
- return mount(CSConnector, {
- global: {
- stubs: {
- Button: ButtonStub,
- StateButton: StateButtonStub,
- ToggleButton: true,
- },
- },
- props: {
- chargingStationId: TEST_STATION_ID,
- connector: createConnectorStatus(),
- connectorId: 1,
- hashId: TEST_HASH_ID,
- ...overrideProps,
- },
- })
-}
-
-describe('CSConnector', () => {
- let mockClient: MockUIClient
-
- beforeEach(() => {
- mockClient = createMockUIClient()
- vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as UIClient)
- })
-
- describe('connector display', () => {
- it('should display connector ID without EVSE prefix', () => {
- const wrapper = mountCSConnector()
- const cells = wrapper.findAll('td')
- expect(cells[0].text()).toBe('1')
- })
-
- it('should display connector ID with EVSE prefix when evseId provided', () => {
- const wrapper = mountCSConnector({ evseId: 2 })
- const cells = wrapper.findAll('td')
- expect(cells[0].text()).toBe('2/1')
- })
-
- it('should display connector status', () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ status: OCPP16ChargePointStatus.CHARGING }),
- })
- const cells = wrapper.findAll('td')
- expect(cells[1].text()).toBe('Charging')
- })
-
- it('should display Ø when connector status is undefined', () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ status: undefined }),
- })
- const cells = wrapper.findAll('td')
- expect(cells[1].text()).toBe(EMPTY_VALUE_PLACEHOLDER)
- })
-
- it('should display No when transaction not started', () => {
- const wrapper = mountCSConnector()
- const cells = wrapper.findAll('td')
- expect(cells[3].text()).toBe('No')
- })
-
- it('should display Yes with transaction ID when transaction started', () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ transactionId: 12345, transactionStarted: true }),
- })
- const cells = wrapper.findAll('td')
- expect(cells[3].text()).toBe('Yes (12345)')
- })
-
- it('should display ATG started as Yes when active', () => {
- const wrapper = mountCSConnector({ atgStatus: { start: true } })
- const cells = wrapper.findAll('td')
- expect(cells[4].text()).toBe('Yes')
- })
-
- it('should display ATG started as No when not active', () => {
- const wrapper = mountCSConnector({ atgStatus: { start: false } })
- const cells = wrapper.findAll('td')
- expect(cells[4].text()).toBe('No')
- })
-
- it('should display ATG started as No when atgStatus undefined', () => {
- const wrapper = mountCSConnector()
- const cells = wrapper.findAll('td')
- expect(cells[4].text()).toBe('No')
- })
- })
-
- describe('transaction actions', () => {
- it('should call stopTransaction with correct params', async () => {
- const connectorStatus = createConnectorStatus({
- transactionId: 12345,
- transactionStarted: true,
- })
- const wrapper = mountCSConnector({ connector: connectorStatus })
- const buttons = wrapper.findAll('button')
- const stopBtn = buttons.find(b => b.text() === 'Stop Transaction')
- await stopBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.stopTransaction).toHaveBeenCalledWith(TEST_HASH_ID, {
- ocppVersion: undefined,
- transactionId: 12345,
- })
- })
-
- it('should show error toast when no transaction to stop', async () => {
- const connectorStatus = createConnectorStatus({
- transactionId: undefined,
- transactionStarted: true,
- })
- const wrapper = mountCSConnector({ connector: connectorStatus })
- const buttons = wrapper.findAll('button')
- const stopBtn = buttons.find(b => b.text() === 'Stop Transaction')
- await stopBtn?.trigger('click')
- expect(toastMock.error).toHaveBeenCalledWith('No transaction to stop')
- })
-
- it('should show success toast after stopping transaction', async () => {
- const connectorStatus = createConnectorStatus({ transactionId: 99, transactionStarted: true })
- const wrapper = mountCSConnector({ connector: connectorStatus })
- const buttons = wrapper.findAll('button')
- const stopBtn = buttons.find(b => b.text() === 'Stop Transaction')
- await stopBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.success).toHaveBeenCalledWith('Transaction successfully stopped')
- })
- })
-
- describe('ATG actions', () => {
- it('should call startAutomaticTransactionGenerator', async () => {
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const startAtgBtn = buttons.find(b => b.text() === 'Start ATG')
- await startAtgBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.startAutomaticTransactionGenerator).toHaveBeenCalledWith(TEST_HASH_ID, 1)
- })
-
- it('should call stopAutomaticTransactionGenerator', async () => {
- const wrapper = mountCSConnector({ atgStatus: { start: true } })
- const buttons = wrapper.findAll('button')
- const stopAtgBtn = buttons.find(b => b.text() === 'Stop ATG')
- await stopAtgBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.stopAutomaticTransactionGenerator).toHaveBeenCalledWith(TEST_HASH_ID, 1)
- })
-
- it('should show error toast on ATG start failure', async () => {
- mockClient.startAutomaticTransactionGenerator.mockRejectedValueOnce(new Error('fail'))
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const startAtgBtn = buttons.find(b => b.text() === 'Start ATG')
- await startAtgBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith(
- 'Error at starting automatic transaction generator'
- )
- })
-
- it('should show success toast when ATG started', async () => {
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const btn = buttons.find(b => b.text().includes('Start ATG'))
- await btn?.trigger('click')
- await flushPromises()
- expect(toastMock.success).toHaveBeenCalledWith(
- 'Automatic transaction generator successfully started'
- )
- })
-
- it('should show error toast when ATG stop fails', async () => {
- mockClient.stopAutomaticTransactionGenerator.mockRejectedValueOnce(new Error('fail'))
- const wrapper = mountCSConnector({ atgStatus: { start: true } })
- const buttons = wrapper.findAll('button')
- const btn = buttons.find(b => b.text().includes('Stop ATG'))
- await btn?.trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith(
- 'Error at stopping automatic transaction generator'
- )
- })
- })
-
- describe('lock/unlock actions', () => {
- it('should display Locked column as No when not locked', () => {
- const wrapper = mountCSConnector()
- const cells = wrapper.findAll('td')
- expect(cells[2].text()).toBe('No')
- })
-
- it('should display Locked column as Yes when locked', () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ locked: true }),
- })
- const cells = wrapper.findAll('td')
- expect(cells[2].text()).toBe('Yes')
- })
-
- it('should show Lock button when connector is not locked', () => {
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const lockBtn = buttons.find(b => b.text() === 'Lock')
- expect(lockBtn).toBeDefined()
- expect(buttons.find(b => b.text() === 'Unlock')).toBeUndefined()
- })
-
- it('should show Unlock button when connector is locked', () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ locked: true }),
- })
- const buttons = wrapper.findAll('button')
- const unlockBtn = buttons.find(b => b.text() === 'Unlock')
- expect(unlockBtn).toBeDefined()
- expect(buttons.find(b => b.text() === 'Lock')).toBeUndefined()
- })
-
- it('should call lockConnector with correct params', async () => {
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const lockBtn = buttons.find(b => b.text() === 'Lock')
- await lockBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.lockConnector).toHaveBeenCalledWith(TEST_HASH_ID, 1)
- })
-
- it('should call unlockConnector with correct params', async () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ locked: true }),
- })
- const buttons = wrapper.findAll('button')
- const unlockBtn = buttons.find(b => b.text() === 'Unlock')
- await unlockBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.unlockConnector).toHaveBeenCalledWith(TEST_HASH_ID, 1)
- })
-
- it('should show success toast after locking connector', async () => {
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const lockBtn = buttons.find(b => b.text() === 'Lock')
- await lockBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.success).toHaveBeenCalledWith('Connector successfully locked')
- })
-
- it('should show error toast on lock failure', async () => {
- mockClient.lockConnector.mockRejectedValueOnce(new Error('fail'))
- const wrapper = mountCSConnector()
- const buttons = wrapper.findAll('button')
- const lockBtn = buttons.find(b => b.text() === 'Lock')
- await lockBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at locking connector')
- })
-
- it('should show success toast after unlocking connector', async () => {
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ locked: true }),
- })
- const buttons = wrapper.findAll('button')
- const unlockBtn = buttons.find(b => b.text() === 'Unlock')
- await unlockBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.success).toHaveBeenCalledWith('Connector successfully unlocked')
- })
-
- it('should show error toast on unlock failure', async () => {
- mockClient.unlockConnector.mockRejectedValueOnce(new Error('fail'))
- const wrapper = mountCSConnector({
- connector: createConnectorStatus({ locked: true }),
- })
- const buttons = wrapper.findAll('button')
- const unlockBtn = buttons.find(b => b.text() === 'Unlock')
- await unlockBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at unlocking connector')
- })
- })
-})
+++ /dev/null
-import type { ChargingStationData } from 'ui-common'
-
-/**
- * @file Tests for CSData component
- * @description Unit tests for charging station row display, actions, and connector entry generation.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { OCPPVersion } from 'ui-common'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { UIClient } from '@/composables'
-
-import CSConnector from '@/components/charging-stations/CSConnector.vue'
-import CSData from '@/components/charging-stations/CSData.vue'
-import { EMPTY_VALUE_PLACEHOLDER, useUIClient } from '@/composables'
-
-import { toastMock } from '../setup'
-import {
- createChargingStationData,
- createConnectorStatus,
- createEvseEntry,
- createStationInfo,
-} from './constants'
-import { ButtonStub, createMockUIClient, type MockUIClient, StateButtonStub } from './helpers'
-
-vi.mock('@/composables', async importOriginal => {
- const actual = await importOriginal()
- return { ...(actual as Record<string, unknown>), useUIClient: vi.fn() }
-})
-
-/**
- * Mounts CSData with mock UIClient and stubbed child components.
- * @param chargingStation - Charging station data
- * @returns Mounted component wrapper
- */
-function mountCSData (chargingStation: ChargingStationData = createChargingStationData()) {
- return mount(CSData, {
- global: {
- stubs: {
- Button: ButtonStub,
- CSConnector: true,
- StateButton: StateButtonStub,
- ToggleButton: true,
- },
- },
- props: { chargingStation },
- })
-}
-
-describe('CSData', () => {
- let mockClient: MockUIClient
-
- beforeEach(() => {
- mockClient = createMockUIClient()
- vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as UIClient)
- })
-
- describe('station info display', () => {
- it('should display charging station ID', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('CS-TEST-001')
- })
-
- it('should display started status as Yes when started', () => {
- const wrapper = mountCSData(createChargingStationData({ started: true }))
- const cells = wrapper.findAll('td')
- expect(cells[1].text()).toBe('Yes')
- })
-
- it('should display started status as No when not started', () => {
- const wrapper = mountCSData(createChargingStationData({ started: false }))
- const cells = wrapper.findAll('td')
- expect(cells[1].text()).toBe('No')
- })
-
- it('should display template name', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('template-test.json')
- })
-
- it('should display vendor and model', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('TestVendor')
- expect(wrapper.text()).toContain('TestModel')
- })
-
- it('should display firmware version', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('1.0.0')
- })
-
- it('should display Ø when firmware version is missing', () => {
- const station = createChargingStationData({
- stationInfo: createStationInfo({ firmwareVersion: undefined }),
- })
- const wrapper = mountCSData(station)
- const cells = wrapper.findAll('td')
- expect(cells[9].text()).toBe(EMPTY_VALUE_PLACEHOLDER)
- })
-
- it('should display WebSocket state as Open when OPEN', () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.OPEN }))
- const cells = wrapper.findAll('td')
- expect(cells[3].text()).toBe('Open')
- })
-
- it('should display WebSocket state as Closed when CLOSED', () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.CLOSED }))
- const cells = wrapper.findAll('td')
- expect(cells[3].text()).toBe('Closed')
- })
-
- it('should display WebSocket state as Ø for undefined state', () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: undefined }))
- const cells = wrapper.findAll('td')
- expect(cells[3].text()).toBe(EMPTY_VALUE_PLACEHOLDER)
- })
-
- it('should display registration status', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('Accepted')
- })
-
- it('should display Ø when no boot notification response', () => {
- const station = createChargingStationData({ bootNotificationResponse: undefined })
- const wrapper = mountCSData(station)
- const cells = wrapper.findAll('td')
- expect(cells[4].text()).toBe(EMPTY_VALUE_PLACEHOLDER)
- })
-
- it('should display WebSocket state as Connecting when CONNECTING', () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.CONNECTING }))
- expect(wrapper.text()).toContain('Connecting')
- })
-
- it('should display WebSocket state as Closing when CLOSING', () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.CLOSING }))
- expect(wrapper.text()).toContain('Closing')
- })
- })
-
- describe('supervision URL display', () => {
- it('should format supervision URL without path', () => {
- const wrapper = mountCSData()
- expect(wrapper.text()).toContain('ws://')
- expect(wrapper.text()).toContain('supervisor')
- })
-
- it('should insert zero-width space after dots in host', () => {
- const station = createChargingStationData({
- supervisionUrl: 'ws://my.host.example.com:9000/path',
- })
- const wrapper = mountCSData(station)
- const cells = wrapper.findAll('td')
- const supervisionText = cells[2].text()
- expect(supervisionText).toContain('\u200b')
- })
- })
-
- describe('station actions', () => {
- it('should call startChargingStation on button click', async () => {
- const wrapper = mountCSData(createChargingStationData({ started: false }))
- const buttons = wrapper.findAll('button')
- const startBtn = buttons.find(b => b.text() === 'Start Charging Station')
- await startBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.startChargingStation).toHaveBeenCalledWith('test-hash-id-abc123')
- })
-
- it('should call stopChargingStation on button click', async () => {
- const wrapper = mountCSData(createChargingStationData({ started: true }))
- const buttons = wrapper.findAll('button')
- const stopBtn = buttons.find(b => b.text() === 'Stop Charging Station')
- await stopBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.stopChargingStation).toHaveBeenCalledWith('test-hash-id-abc123')
- })
-
- it('should call openConnection on button click', async () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.CLOSED }))
- const buttons = wrapper.findAll('button')
- const openBtn = buttons.find(b => b.text() === 'Open Connection')
- await openBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.openConnection).toHaveBeenCalledWith('test-hash-id-abc123')
- })
-
- it('should call closeConnection on button click', async () => {
- const wrapper = mountCSData(createChargingStationData({ wsState: WebSocket.OPEN }))
- const buttons = wrapper.findAll('button')
- const closeBtn = buttons.find(b => b.text() === 'Close Connection')
- await closeBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.closeConnection).toHaveBeenCalledWith('test-hash-id-abc123')
- })
-
- it('should call deleteChargingStation on button click', async () => {
- const wrapper = mountCSData()
- const buttons = wrapper.findAll('button')
- const deleteBtn = buttons.find(b => b.text() === 'Delete Charging Station')
- await deleteBtn?.trigger('click')
- await flushPromises()
- expect(mockClient.deleteChargingStation).toHaveBeenCalledWith('test-hash-id-abc123')
- })
-
- it('should show success toast after starting charging station', async () => {
- const wrapper = mountCSData(createChargingStationData({ started: false }))
- const buttons = wrapper.findAll('button')
- const startBtn = buttons.find(b => b.text() === 'Start Charging Station')
- await startBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.success).toHaveBeenCalledWith('Charging station successfully started')
- })
-
- it('should show error toast on start failure', async () => {
- mockClient.startChargingStation.mockRejectedValueOnce(new Error('fail'))
- const wrapper = mountCSData(createChargingStationData({ started: false }))
- const buttons = wrapper.findAll('button')
- const startBtn = buttons.find(b => b.text() === 'Start Charging Station')
- await startBtn?.trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at starting charging station')
- })
-
- it('should clean localStorage entries for deleted station', async () => {
- const stationData = createChargingStationData()
- const hashId = stationData.stationInfo.hashId
- localStorage.setItem(`toggle-button-${hashId}-test`, 'true')
- localStorage.setItem(`shared-toggle-button-${hashId}-other`, 'false')
- localStorage.setItem('unrelated-key', 'keep')
- const wrapper = mountCSData(stationData)
- const buttons = wrapper.findAll('button')
- const deleteBtn = buttons.find(b => b.text().includes('Delete'))
- await deleteBtn?.trigger('click')
- await flushPromises()
- expect(localStorage.getItem(`toggle-button-${hashId}-test`)).toBeNull()
- expect(localStorage.getItem(`shared-toggle-button-${hashId}-other`)).toBeNull()
- expect(localStorage.getItem('unrelated-key')).toBe('keep')
- })
- })
-
- describe('connector entries', () => {
- it('should generate entries from connectors array for OCPP 1.6', () => {
- const station = createChargingStationData({
- connectors: [
- { connectorId: 0, connectorStatus: createConnectorStatus() },
- { connectorId: 1, connectorStatus: createConnectorStatus() },
- { connectorId: 2, connectorStatus: createConnectorStatus() },
- ],
- })
- const wrapper = mountCSData(station)
- expect(wrapper.findAllComponents(CSConnector)).toHaveLength(2)
- })
-
- it('should filter out connector 0', () => {
- const station = createChargingStationData({
- connectors: [{ connectorId: 0, connectorStatus: createConnectorStatus() }],
- })
- const wrapper = mountCSData(station)
- expect(wrapper.findAllComponents(CSConnector)).toHaveLength(0)
- })
-
- it('should generate entries from EVSEs array for OCPP 2.0.x', () => {
- const station = createChargingStationData({
- connectors: [],
- evses: [
- createEvseEntry({
- evseId: 0,
- evseStatus: {
- availability: 'Operative' as never,
- connectors: [{ connectorId: 0, connectorStatus: createConnectorStatus() }],
- },
- }),
- createEvseEntry({
- evseId: 1,
- evseStatus: {
- availability: 'Operative' as never,
- connectors: [{ connectorId: 1, connectorStatus: createConnectorStatus() }],
- },
- }),
- createEvseEntry({
- evseId: 2,
- evseStatus: {
- availability: 'Operative' as never,
- connectors: [{ connectorId: 1, connectorStatus: createConnectorStatus() }],
- },
- }),
- ],
- stationInfo: createStationInfo({ ocppVersion: OCPPVersion.VERSION_201 }),
- })
- const wrapper = mountCSData(station)
- expect(wrapper.findAllComponents(CSConnector)).toHaveLength(2)
- })
-
- it('should filter out EVSE 0', () => {
- const station = createChargingStationData({
- connectors: [],
- evses: [
- createEvseEntry({
- evseId: 0,
- evseStatus: {
- availability: 'Operative' as never,
- connectors: [{ connectorId: 0, connectorStatus: createConnectorStatus() }],
- },
- }),
- ],
- stationInfo: createStationInfo({ ocppVersion: OCPPVersion.VERSION_201 }),
- })
- const wrapper = mountCSData(station)
- expect(wrapper.findAllComponents(CSConnector)).toHaveLength(0)
- })
- })
-})
+++ /dev/null
-import type { ChargingStationData } from 'ui-common'
-
-/**
- * @file Tests for CSTable component
- * @description Unit tests for charging station table column headers and row rendering.
- */
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import CSTable from '@/components/charging-stations/CSTable.vue'
-
-import { createChargingStationData, createStationInfo } from './constants'
-
-/**
- * Mounts CSTable with CSData stubbed out.
- * @param chargingStations - Array of charging stations
- * @returns Mounted component wrapper
- */
-function mountCSTable (chargingStations: ChargingStationData[] = []) {
- return mount(CSTable, {
- global: { stubs: { CSData: true } },
- props: { chargingStations },
- })
-}
-
-describe('CSTable', () => {
- describe('column headers', () => {
- it('should render all column headers', () => {
- const wrapper = mountCSTable()
- const text = wrapper.text()
- expect(text).toContain('Name')
- expect(text).toContain('Started')
- expect(text).toContain('Supervision Url')
- expect(text).toContain('WebSocket State')
- expect(text).toContain('Registration Status')
- expect(text).toContain('OCPP Version')
- expect(text).toContain('Template')
- expect(text).toContain('Vendor')
- expect(text).toContain('Model')
- expect(text).toContain('Firmware')
- expect(text).toContain('Actions')
- expect(text).toContain('Connector(s)')
- })
-
- it('should render table caption', () => {
- const wrapper = mountCSTable()
- expect(wrapper.text()).toContain('Charging Stations')
- })
- })
-
- describe('row rendering', () => {
- it('should render a CSData row for each charging station', () => {
- const stations = [
- createChargingStationData(),
- createChargingStationData({
- stationInfo: createStationInfo({ chargingStationId: 'CS-002', hashId: 'hash-2' }),
- }),
- ]
- const wrapper = mountCSTable(stations)
- expect(wrapper.findAllComponents({ name: 'CSData' })).toHaveLength(2)
- })
-
- it('should handle empty charging stations array', () => {
- const wrapper = mountCSTable([])
- expect(wrapper.findAllComponents({ name: 'CSData' })).toHaveLength(0)
- })
-
- it('should propagate need-refresh event from CSData', async () => {
- const stations = [createChargingStationData()]
- const CSDataStub = {
- emits: ['need-refresh'],
- template: '<tr></tr>',
- }
- const wrapper = mount(CSTable, {
- global: { stubs: { CSData: CSDataStub } },
- props: { chargingStations: stations },
- })
- const csDataComponent = wrapper.findComponent(CSDataStub)
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
- await csDataComponent.vm.$emit('need-refresh')
- expect(wrapper.emitted('need-refresh')).toHaveLength(1)
- })
- })
-})
+++ /dev/null
-/**
- * @file Tests for ChargingStationsView component
- * @description Unit tests for the main view: WS event listeners, data fetching,
- * simulator state display, CSTable visibility, UI server selector, and error handling.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { ResponseStatus } from 'ui-common'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import type { UIClient } from '@/composables'
-
-import {
- chargingStationsKey,
- configurationKey,
- templatesKey,
- uiClientKey,
- useUIClient,
-} from '@/composables'
-import ChargingStationsView from '@/views/ChargingStationsView.vue'
-
-import { toastMock } from '../setup'
-import { createChargingStationData, createUIServerConfig } from './constants'
-import { createMockUIClient, type MockUIClient, StateButtonStub, ToggleButtonStub } from './helpers'
-
-vi.mock('@/composables', async importOriginal => {
- const actual = await importOriginal()
- return { ...(actual as Record<string, unknown>), useUIClient: vi.fn() }
-})
-
-vi.mock('vue-router', async importOriginal => {
- const actual: Record<string, unknown> = await importOriginal()
- return {
- ...actual,
- useRoute: vi.fn().mockReturnValue({ name: 'charging-stations' }),
- useRouter: vi.fn().mockReturnValue({ push: vi.fn() }),
- }
-})
-
-// ── Configuration fixtures ────────────────────────────────────────────────────
-
-const singleServerConfiguration = {
- uiServer: [createUIServerConfig()],
-}
-
-const multiServerConfiguration = {
- uiServer: [
- createUIServerConfig({ name: 'Server 1' }),
- createUIServerConfig({ host: 'server2', name: 'Server 2' }),
- ],
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-let mockClient: MockUIClient
-
-/**
- * Extracts the registered WS event handler for a given event type.
- * @param eventType - WS event name (open, error, close)
- * @returns The registered handler function or undefined
- */
-function getWSHandler (eventType: string): ((...args: unknown[]) => void) | undefined {
- const call = vi
- .mocked(mockClient.registerWSEventListener)
- .mock.calls.find(([event]) => event === eventType)
- return call?.[1] as ((...args: unknown[]) => void) | undefined
-}
-
-/**
- * Mounts ChargingStationsView with mock UIClient and global properties.
- * Uses transparent Container stub so v-show directives work correctly.
- * @param options - Mount configuration overrides
- * @param options.chargingStations - Initial charging stations data
- * @param options.configuration - UI server configuration (single or multi)
- * @param options.templates - Template names
- * @returns Mounted component wrapper
- */
-function mountView (
- options: {
- chargingStations?: ReturnType<typeof createChargingStationData>[]
- configuration?: typeof multiServerConfiguration | typeof singleServerConfiguration
- templates?: string[]
- } = {}
-) {
- const {
- chargingStations = [],
- configuration = singleServerConfiguration,
- templates = [],
- } = options
-
- return mount(ChargingStationsView, {
- global: {
- provide: {
- [chargingStationsKey as symbol]: ref(chargingStations),
- [configurationKey as symbol]: ref(configuration),
- [templatesKey as symbol]: ref(templates),
- [uiClientKey as symbol]: mockClient,
- },
- stubs: {
- Container: { name: 'Container', template: '<div><slot /></div>' },
- CSTable: true,
- StateButton: StateButtonStub,
- ToggleButton: ToggleButtonStub,
- },
- },
- })
-}
-
-/**
- * Triggers the 'open' WS event handler to simulate a connection open (calls getData).
- */
-async function triggerWSOpen (): Promise<void> {
- const openHandler = getWSHandler('open')
- openHandler?.()
- await flushPromises()
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────────
-
-describe('ChargingStationsView', () => {
- beforeEach(() => {
- mockClient = createMockUIClient()
- vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as UIClient)
- })
-
- afterEach(() => {
- vi.restoreAllMocks()
- })
-
- describe('WebSocket event listeners', () => {
- it('should register open, error, close listeners on mount', () => {
- mountView()
- expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
- expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('error', expect.any(Function))
- expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('close', expect.any(Function))
- })
-
- it('should register exactly 3 listeners', () => {
- mountView()
- expect(mockClient.registerWSEventListener).toHaveBeenCalledTimes(3)
- })
-
- it('should unregister open, error, close listeners on unmount', () => {
- const wrapper = mountView()
- wrapper.unmount()
- expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith(
- 'open',
- expect.any(Function)
- )
- expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith(
- 'error',
- expect.any(Function)
- )
- expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith(
- 'close',
- expect.any(Function)
- )
- })
-
- it('should unregister exactly 3 listeners on unmount', () => {
- const wrapper = mountView()
- wrapper.unmount()
- expect(mockClient.unregisterWSEventListener).toHaveBeenCalledTimes(3)
- })
- })
-
- describe('getData on WS open', () => {
- it('should call simulatorState when WS opens', async () => {
- mountView()
- await triggerWSOpen()
- expect(mockClient.simulatorState).toHaveBeenCalled()
- })
-
- it('should call listTemplates when WS opens', async () => {
- mountView()
- await triggerWSOpen()
- expect(mockClient.listTemplates).toHaveBeenCalled()
- })
-
- it('should call listChargingStations when WS opens', async () => {
- mountView()
- await triggerWSOpen()
- expect(mockClient.listChargingStations).toHaveBeenCalled()
- })
- })
-
- describe('simulator state display', () => {
- it('should show "Start Simulator" when simulator not started', async () => {
- mockClient.simulatorState = vi.fn().mockResolvedValue({
- state: { started: false, templateStatistics: {} },
- status: ResponseStatus.SUCCESS,
- })
- const wrapper = mountView()
- await triggerWSOpen()
- expect(wrapper.text()).toContain('Start Simulator')
- })
-
- it('should show "Stop Simulator" with version when started', async () => {
- mockClient.simulatorState = vi.fn().mockResolvedValue({
- state: { started: true, templateStatistics: {}, version: '1.5.0' },
- status: ResponseStatus.SUCCESS,
- })
- const wrapper = mountView()
- await triggerWSOpen()
- expect(wrapper.text()).toContain('Stop Simulator')
- expect(wrapper.text()).toContain('1.5.0')
- })
-
- it('should show "Start Simulator" without version initially', () => {
- const wrapper = mountView()
- expect(wrapper.text()).toContain('Start Simulator')
- expect(wrapper.text()).not.toContain('(')
- })
- })
-
- describe('CSTable visibility', () => {
- it('should hide CSTable when no charging stations', () => {
- const wrapper = mountView({ chargingStations: [] })
- const csTable = wrapper.findComponent({ name: 'CSTable' })
- expect(csTable.exists()).toBe(true)
- expect((csTable.element as HTMLElement).style.display).toBe('none')
- })
-
- it('should show CSTable when charging stations exist', () => {
- const wrapper = mountView({
- chargingStations: [createChargingStationData()],
- })
- const csTable = wrapper.findComponent({ name: 'CSTable' })
- expect(csTable.exists()).toBe(true)
- expect((csTable.element as HTMLElement).style.display).not.toBe('none')
- })
- })
-
- describe('UI server selector', () => {
- it('should hide server selector for single server configuration', () => {
- const wrapper = mountView({ configuration: singleServerConfiguration })
- const selectorContainer = wrapper.find('#ui-server-container')
- expect(selectorContainer.exists()).toBe(true)
- expect((selectorContainer.element as HTMLElement).style.display).toBe('none')
- })
-
- it('should show server selector for multiple server configuration', () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const selectorContainer = wrapper.find('#ui-server-container')
- expect(selectorContainer.exists()).toBe(true)
- expect((selectorContainer.element as HTMLElement).style.display).not.toBe('none')
- })
-
- it('should render an option for each server', () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const options = wrapper.findAll('#ui-server-selector option')
- expect(options).toHaveLength(2)
- })
-
- it('should display server name in options', () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const options = wrapper.findAll('#ui-server-selector option')
- expect(options[0].text()).toContain('Server 1')
- expect(options[1].text()).toContain('Server 2')
- })
-
- it('should fall back to host when server name is missing', () => {
- const config = {
- uiServer: [
- createUIServerConfig({ host: 'host-a' }),
- createUIServerConfig({ host: 'host-b' }),
- ],
- }
- const wrapper = mountView({ configuration: config })
- const options = wrapper.findAll('#ui-server-selector option')
- expect(options[0].text()).toContain('host-a')
- expect(options[1].text()).toContain('host-b')
- })
- })
-
- describe('start/stop simulator', () => {
- it('should show success toast when simulator starts', async () => {
- mockClient.startSimulator = vi.fn().mockResolvedValue({
- status: ResponseStatus.SUCCESS,
- })
- const wrapper = mountView()
- const stateButton = wrapper.findComponent({ name: 'StateButton' })
- const onProp = stateButton.props('on') as (() => void) | undefined
- onProp?.()
- await flushPromises()
- expect(mockClient.startSimulator).toHaveBeenCalled()
- expect(toastMock.success).toHaveBeenCalledWith('Simulator successfully started')
- })
-
- it('should show error toast when simulator start fails', async () => {
- mockClient.startSimulator = vi.fn().mockRejectedValue(new Error('start failed'))
- const wrapper = mountView()
- const stateButton = wrapper.findComponent({ name: 'StateButton' })
- const onProp = stateButton.props('on') as (() => void) | undefined
- onProp?.()
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at starting simulator')
- })
-
- it('should show success toast when simulator stops', async () => {
- mockClient.stopSimulator = vi.fn().mockResolvedValue({
- status: ResponseStatus.SUCCESS,
- })
- const wrapper = mountView()
- const stateButton = wrapper.findComponent({ name: 'StateButton' })
- const offProp = stateButton.props('off') as (() => void) | undefined
- offProp?.()
- await flushPromises()
- expect(mockClient.stopSimulator).toHaveBeenCalled()
- expect(toastMock.success).toHaveBeenCalledWith('Simulator successfully stopped')
- })
-
- it('should show error toast when simulator stop fails', async () => {
- mockClient.stopSimulator = vi.fn().mockRejectedValue(new Error('stop failed'))
- const wrapper = mountView()
- const stateButton = wrapper.findComponent({ name: 'StateButton' })
- const offProp = stateButton.props('off') as (() => void) | undefined
- offProp?.()
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at stopping simulator')
- })
- })
-
- describe('error handling', () => {
- it('should show error toast when listChargingStations fails', async () => {
- mockClient.listChargingStations = vi.fn().mockRejectedValue(new Error('Network error'))
- mountView()
- await triggerWSOpen()
- expect(toastMock.error).toHaveBeenCalledWith('Error at fetching charging stations')
- })
-
- it('should show error toast when listTemplates fails', async () => {
- mockClient.listTemplates = vi.fn().mockRejectedValue(new Error('Template error'))
- mountView()
- await triggerWSOpen()
- expect(toastMock.error).toHaveBeenCalledWith('Error at fetching charging station templates')
- })
-
- it('should show error toast when simulatorState fails', async () => {
- mockClient.simulatorState = vi.fn().mockRejectedValue(new Error('State error'))
- mountView()
- await triggerWSOpen()
- expect(toastMock.error).toHaveBeenCalledWith('Error at fetching simulator state')
- })
- })
-
- describe('server switching', () => {
- it('should call setConfiguration when server index changes', async () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const selector = wrapper.find('#ui-server-selector')
- await selector.setValue(1)
- expect(mockClient.setConfiguration).toHaveBeenCalled()
- })
-
- it('should register new WS event listeners after server switch', async () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- // Reset call count from initial mount registration
- vi.mocked(mockClient.registerWSEventListener).mockClear()
- const selector = wrapper.find('#ui-server-selector')
- await selector.setValue(1)
- // registerWSEventListeners called again
- expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
- })
-
- it('should save server index to localStorage on successful switch', async () => {
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const selector = wrapper.find('#ui-server-selector')
- await selector.setValue(1)
- // Simulate the WS open for the new connection (once-listener from server switching)
- const onceOpenCalls = vi
- .mocked(mockClient.registerWSEventListener)
- .mock.calls.filter(
- ([event, , options]) =>
- event === 'open' &&
- (options as undefined | { once?: boolean }) != null &&
- (options as { once?: boolean }).once === true
- )
- const onceOpenHandler = onceOpenCalls[onceOpenCalls.length - 1]?.[1] as
- | (() => void)
- | undefined
- onceOpenHandler?.()
- await flushPromises()
- expect(localStorage.getItem('uiServerConfigurationIndex')).toBe('1')
- })
-
- it('should revert server index on connection error', async () => {
- localStorage.setItem('uiServerConfigurationIndex', '0')
- const wrapper = mountView({ configuration: multiServerConfiguration })
- const selector = wrapper.find('#ui-server-selector')
- await selector.setValue(1)
- // Find the once-error listener
- const onceErrorCalls = vi
- .mocked(mockClient.registerWSEventListener)
- .mock.calls.filter(
- ([event, , options]) =>
- event === 'error' &&
- (options as undefined | { once?: boolean }) != null &&
- (options as { once?: boolean }).once === true
- )
- const onceErrorHandler = onceErrorCalls[onceErrorCalls.length - 1]?.[1] as
- | (() => void)
- | undefined
- onceErrorHandler?.()
- await flushPromises()
- // Should revert to index 0
- expect(mockClient.setConfiguration).toHaveBeenCalledTimes(2)
- })
- })
-})
+++ /dev/null
-/**
- * @file Tests for SetSupervisionUrl component
- * @description Unit tests for supervision URL form — display, submission, and navigation.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
-import { uiClientKey } from '@/composables'
-
-import { toastMock } from '../setup'
-import { TEST_HASH_ID, TEST_STATION_ID } from './constants'
-import { ButtonStub, createMockUIClient, type MockUIClient } from './helpers'
-
-vi.mock('vue-router', async importOriginal => {
- const actual: Record<string, unknown> = await importOriginal()
- return {
- ...actual,
- useRouter: vi.fn(),
- }
-})
-
-import { useRouter } from 'vue-router'
-
-describe('SetSupervisionUrl', () => {
- let mockClient: MockUIClient
- let mockRouter: { push: ReturnType<typeof vi.fn> }
-
- /**
- * @param props - Props to override defaults
- * @returns Mounted component wrapper
- */
- function mountComponent (props = {}) {
- mockClient = createMockUIClient()
- mockRouter = { push: vi.fn() }
- vi.mocked(useRouter).mockReturnValue(mockRouter as unknown as ReturnType<typeof useRouter>)
- return mount(SetSupervisionUrl, {
- global: {
- provide: {
- [uiClientKey as symbol]: mockClient,
- },
- stubs: {
- Button: ButtonStub,
- },
- },
- props: {
- chargingStationId: TEST_STATION_ID,
- hashId: TEST_HASH_ID,
- ...props,
- },
- })
- }
-
- it('should display the charging station ID', () => {
- const wrapper = mountComponent()
- expect(wrapper.text()).toContain(TEST_STATION_ID)
- })
-
- it('should render supervision URL and credential inputs', () => {
- const wrapper = mountComponent()
- expect(wrapper.find('#supervision-url').exists()).toBe(true)
- expect(wrapper.find('#supervision-user').exists()).toBe(true)
- expect(wrapper.find('#supervision-password').exists()).toBe(true)
- })
-
- it('should preserve existing credentials when only url is set', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-url').setValue('wss://new-server.com:9000')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.setSupervisionUrl).toHaveBeenCalledWith(
- TEST_HASH_ID,
- 'wss://new-server.com:9000',
- undefined,
- undefined
- )
- })
-
- it('should call setSupervisionUrl with credentials when all fields are set', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-url').setValue('wss://new-server.com:9000')
- await wrapper.find('#supervision-user').setValue('alice')
- await wrapper.find('#supervision-password').setValue('s3cret')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.setSupervisionUrl).toHaveBeenCalledWith(
- TEST_HASH_ID,
- 'wss://new-server.com:9000',
- 'alice',
- 's3cret'
- )
- })
-
- it('should preserve password when only user is typed', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-url').setValue('wss://new-server.com:9000')
- await wrapper.find('#supervision-user').setValue('alice')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.setSupervisionUrl).toHaveBeenCalledWith(
- TEST_HASH_ID,
- 'wss://new-server.com:9000',
- 'alice',
- undefined
- )
- })
-
- it('should not call setSupervisionUrl when url is empty', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-user').setValue('alice')
- await wrapper.find('#supervision-password').setValue('s3cret')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.setSupervisionUrl).not.toHaveBeenCalled()
- expect(toastMock.error).toHaveBeenCalled()
- })
-
- it('should navigate to charging-stations after submission', async () => {
- const wrapper = mountComponent()
- await wrapper.find('#supervision-url').setValue('wss://new-server.com:9000')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockRouter.push).toHaveBeenCalledWith({ name: 'charging-stations' })
- })
-
- it('should show error toast on failure', async () => {
- const wrapper = mountComponent()
- mockClient.setSupervisionUrl = vi.fn().mockRejectedValue(new Error('Network error'))
- await wrapper.find('#supervision-url').setValue('wss://new-server.com:9000')
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalled()
- })
-})
+++ /dev/null
-/**
- * @file Tests for simple presentational components
- * @description Unit tests for Button, Container, NotFoundView, and App.
- */
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { defineComponent } from 'vue'
-import { createMemoryHistory, createRouter } from 'vue-router'
-
-import App from '@/App.vue'
-import Button from '@/components/buttons/Button.vue'
-import Container from '@/components/Container.vue'
-import NotFoundView from '@/views/NotFoundView.vue'
-
-const DummyComponent = defineComponent({ template: '<div />' })
-
-describe('Button', () => {
- it('should render slot content', () => {
- const wrapper = mount(Button, { slots: { default: 'Click me' } })
- expect(wrapper.text()).toContain('Click me')
- })
-
- it('should render a button element', () => {
- const wrapper = mount(Button)
- expect(wrapper.find('button').exists()).toBe(true)
- })
-})
-
-describe('Container', () => {
- it('should render slot content', () => {
- const wrapper = mount(Container, { slots: { default: 'Content' } })
- expect(wrapper.text()).toContain('Content')
- })
-
- it('should apply container class', () => {
- const wrapper = mount(Container)
- expect(wrapper.classes()).toContain('container')
- })
-})
-
-describe('NotFoundView', () => {
- it('should render 404 message', () => {
- const wrapper = mount(NotFoundView)
- expect(wrapper.text()).toContain('404')
- expect(wrapper.text()).toContain('Not found')
- })
-})
-
-describe('App', () => {
- it('should render Container component', async () => {
- const router = createRouter({
- history: createMemoryHistory(),
- routes: [{ component: DummyComponent, name: 'charging-stations', path: '/' }],
- })
- await router.push('/')
- await router.isReady()
- const wrapper = mount(App, {
- global: { plugins: [router] },
- })
- expect(wrapper.findComponent(Container).exists()).toBe(true)
- })
-
- it('should hide action container on charging-stations route', async () => {
- const router = createRouter({
- history: createMemoryHistory(),
- routes: [{ component: DummyComponent, name: 'charging-stations', path: '/' }],
- })
- await router.push('/')
- await router.isReady()
- const wrapper = mount(App, {
- global: { plugins: [router] },
- })
- const actionContainer = wrapper.find('#action-container')
- // v-show hides via inline style display:none
- const element = actionContainer.element as HTMLElement
- expect(element.style.display).toBe('none')
- })
-})
+++ /dev/null
-/**
- * @file Tests for StartTransaction component
- * @description Unit tests for start transaction form — OCPP version branching, authorization flow, and navigation.
- */
-import { flushPromises, mount } from '@vue/test-utils'
-import { OCPPVersion } from 'ui-common'
-import { describe, expect, it, vi } from 'vitest'
-
-import type { UIClient } from '@/composables'
-
-import StartTransaction from '@/components/actions/StartTransaction.vue'
-import { useUIClient } from '@/composables'
-
-import { toastMock } from '../setup'
-import { TEST_HASH_ID, TEST_ID_TAG, TEST_STATION_ID } from './constants'
-import { ButtonStub, createMockUIClient, type MockUIClient } from './helpers'
-
-vi.mock('@/composables', async importOriginal => {
- const actual: Record<string, unknown> = await importOriginal()
- return { ...actual, useUIClient: vi.fn() }
-})
-
-vi.mock('vue-router', async importOriginal => {
- const actual: Record<string, unknown> = await importOriginal()
- return {
- ...actual,
- useRoute: vi.fn(),
- useRouter: vi.fn(),
- }
-})
-
-import { useRoute, useRouter } from 'vue-router'
-
-describe('StartTransaction', () => {
- let mockClient: MockUIClient
- let mockRouter: { push: ReturnType<typeof vi.fn> }
-
- /**
- * Mounts StartTransaction with mock UIClient, router, and route query.
- * @param routeQuery - Route query parameters
- * @returns Mounted component wrapper
- */
- function mountComponent (routeQuery: Record<string, string> = {}) {
- mockClient = createMockUIClient()
- mockRouter = { push: vi.fn() }
- vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as UIClient)
- vi.mocked(useRouter).mockReturnValue(mockRouter as unknown as ReturnType<typeof useRouter>)
- vi.mocked(useRoute).mockReturnValue({
- name: 'start-transaction',
- params: {
- chargingStationId: TEST_STATION_ID,
- connectorId: '1',
- hashId: TEST_HASH_ID,
- },
- query: routeQuery,
- } as unknown as ReturnType<typeof useRoute>)
- return mount(StartTransaction, {
- global: {
- stubs: {
- Button: ButtonStub,
- },
- },
- props: {
- chargingStationId: TEST_STATION_ID,
- connectorId: '1',
- hashId: TEST_HASH_ID,
- },
- })
- }
-
- describe('display', () => {
- it('should display charging station ID', () => {
- const wrapper = mountComponent()
- expect(wrapper.text()).toContain(TEST_STATION_ID)
- })
-
- it('should display connector ID without EVSE when no evseId', () => {
- const wrapper = mountComponent()
- expect(wrapper.text()).toContain('Connector 1')
- expect(wrapper.text()).not.toContain('EVSE')
- })
-
- it('should display EVSE and connector when evseId in query', () => {
- const wrapper = mountComponent({
- evseId: '2',
- ocppVersion: OCPPVersion.VERSION_20,
- })
- expect(wrapper.text()).toContain('EVSE 2')
- })
-
- it('should show authorize checkbox for OCPP 1.6', () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_16 })
- expect(wrapper.find('[type="checkbox"]').exists()).toBe(true)
- })
-
- it('should show authorize checkbox for OCPP 2.0.x', () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_20 })
- expect(wrapper.find('[type="checkbox"]').exists()).toBe(true)
- })
- })
-
- describe('OCPP 1.6 transaction flow', () => {
- it('should call startTransaction for OCPP 1.6', async () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_16 })
- await wrapper.find('#idtag').setValue(TEST_ID_TAG)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.startTransaction).toHaveBeenCalledWith(TEST_HASH_ID, {
- connectorId: 1,
- evseId: undefined,
- idTag: TEST_ID_TAG,
- ocppVersion: OCPPVersion.VERSION_16,
- })
- })
-
- it('should call authorize before startTransaction when authorize checked', async () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_16 })
- await wrapper.find('#idtag').setValue(TEST_ID_TAG)
- await wrapper.find('[type="checkbox"]').setValue(true)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.authorize).toHaveBeenCalledWith(TEST_HASH_ID, TEST_ID_TAG)
- expect(mockClient.startTransaction).toHaveBeenCalled()
- })
-
- it('should show error toast when authorize checked but no idTag provided', async () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_16 })
- await wrapper.find('[type="checkbox"]').setValue(true)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Please provide an RFID tag to authorize')
- expect(mockClient.startTransaction).not.toHaveBeenCalled()
- })
-
- it('should show error toast and navigate when authorize call fails', async () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_16 })
- mockClient.authorize = vi.fn().mockRejectedValue(new Error('Auth failed'))
- await wrapper.find('#idtag').setValue(TEST_ID_TAG)
- await wrapper.find('[type="checkbox"]').setValue(true)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalledWith('Error at authorizing RFID tag')
- expect(mockRouter.push).toHaveBeenCalledWith({ name: 'charging-stations' })
- expect(mockClient.startTransaction).not.toHaveBeenCalled()
- })
- })
-
- describe('OCPP 2.0.x transaction flow', () => {
- it('should call startTransaction for OCPP 2.0.x', async () => {
- const wrapper = mountComponent({ ocppVersion: OCPPVersion.VERSION_20 })
- await wrapper.find('#idtag').setValue(TEST_ID_TAG)
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.startTransaction).toHaveBeenCalledWith(TEST_HASH_ID, {
- connectorId: 1,
- evseId: undefined,
- idTag: TEST_ID_TAG,
- ocppVersion: OCPPVersion.VERSION_20,
- })
- })
-
- it('should pass evseId when available', async () => {
- const wrapper = mountComponent({
- evseId: '2',
- ocppVersion: OCPPVersion.VERSION_20,
- })
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockClient.startTransaction).toHaveBeenCalledWith(
- TEST_HASH_ID,
- expect.objectContaining({ evseId: 2 })
- )
- })
- })
-
- describe('navigation', () => {
- it('should navigate back after transaction', async () => {
- const wrapper = mountComponent()
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(mockRouter.push).toHaveBeenCalledWith({ name: 'charging-stations' })
- })
-
- it('should show error toast on failure', async () => {
- const wrapper = mountComponent()
- mockClient.startTransaction = vi.fn().mockRejectedValue(new Error('Failed'))
- await wrapper.find('button').trigger('click')
- await flushPromises()
- expect(toastMock.error).toHaveBeenCalled()
- })
- })
-})
+++ /dev/null
-/**
- * @file Tests for StateButton component
- * @description Unit tests for label switching, active state CSS class, and on/off callback dispatch.
- */
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import StateButton from '@/components/buttons/StateButton.vue'
-
-import { ButtonActiveStub } from './helpers'
-
-/**
- * Mount factory — stubs Button with active class support
- * @param props - Component props
- * @param props.active - Whether the button is in active state
- * @param props.off - Callback when toggled off
- * @param props.offLabel - Label displayed when active
- * @param props.on - Callback when toggled on
- * @param props.onLabel - Label displayed when inactive
- * @returns Mounted wrapper
- */
-function mountStateButton (props: {
- active: boolean
- off?: () => void
- offLabel: string
- on?: () => void
- onLabel: string
-}) {
- return mount(StateButton, {
- global: {
- stubs: {
- Button: ButtonActiveStub,
- },
- },
- props,
- })
-}
-
-describe('StateButton', () => {
- it('should display onLabel when inactive', () => {
- const wrapper = mountStateButton({
- active: false,
- offLabel: 'Stop',
- onLabel: 'Start',
- })
- expect(wrapper.text()).toBe('Start')
- })
-
- it('should display offLabel when active', () => {
- const wrapper = mountStateButton({
- active: true,
- offLabel: 'Stop',
- onLabel: 'Start',
- })
- expect(wrapper.text()).toBe('Stop')
- })
-
- it('should call on callback when clicked while inactive', async () => {
- const onFn = vi.fn()
- const wrapper = mountStateButton({
- active: false,
- offLabel: 'Stop',
- on: onFn,
- onLabel: 'Start',
- })
- await wrapper.find('button').trigger('click')
- expect(onFn).toHaveBeenCalledOnce()
- })
-
- it('should call off callback when clicked while active', async () => {
- const offFn = vi.fn()
- const wrapper = mountStateButton({
- active: true,
- off: offFn,
- offLabel: 'Stop',
- onLabel: 'Start',
- })
- await wrapper.find('button').trigger('click')
- expect(offFn).toHaveBeenCalledOnce()
- })
-
- it('should apply button--active class when active', () => {
- const wrapper = mountStateButton({
- active: true,
- offLabel: 'Stop',
- onLabel: 'Start',
- })
- expect(wrapper.find('button').classes()).toContain('button--active')
- })
-
- it('should not apply button--active class when inactive', () => {
- const wrapper = mountStateButton({
- active: false,
- offLabel: 'Stop',
- onLabel: 'Start',
- })
- expect(wrapper.find('button').classes()).not.toContain('button--active')
- })
-})
+++ /dev/null
-/**
- * @file Tests for ToggleButton component
- * @description Unit tests for toggle state, localStorage persistence, shared toggle behavior, and callbacks.
- */
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
-
-import { ButtonActiveStub } from './helpers'
-
-/**
- * Mount factory — stubs Button child component with slot passthrough
- * @param props - Component props
- * @param props.id - Unique identifier for the toggle
- * @param props.off - Callback when toggled off
- * @param props.on - Callback when toggled on
- * @param props.shared - Whether this is a shared toggle
- * @param props.status - Initial toggle status
- * @returns Mounted wrapper
- */
-function mountToggleButton (
- props: {
- id: string
- off?: () => void
- on?: () => void
- shared?: boolean
- status?: boolean
- } = { id: 'test-toggle' }
-) {
- return mount(ToggleButton, {
- global: {
- stubs: {
- Button: ButtonActiveStub,
- },
- },
- props,
- slots: { default: 'Toggle' },
- })
-}
-
-describe('ToggleButton', () => {
- describe('rendering', () => {
- it('should render slot content', () => {
- const wrapper = mountToggleButton({ id: 'render-test' })
- expect(wrapper.text()).toContain('Toggle')
- })
-
- it('should not apply on class when status is false', () => {
- const wrapper = mountToggleButton({ id: 'off-test', status: false })
- const button = wrapper.find('button')
- expect(button.classes()).not.toContain('button--active')
- })
-
- it('should apply on class when status is true', () => {
- const wrapper = mountToggleButton({ id: 'on-test', status: true })
- const button = wrapper.find('button')
- expect(button.classes()).toContain('button--active')
- })
- })
-
- describe('toggle behavior', () => {
- it('should toggle from inactive to active on click', async () => {
- const wrapper = mountToggleButton({ id: 'toggle-inactive-to-active', status: false })
- const button = wrapper.find('button')
-
- expect(button.classes()).not.toContain('button--active')
- await button.trigger('click')
- expect(button.classes()).toContain('button--active')
- })
-
- it('should toggle from active to inactive on click', async () => {
- const wrapper = mountToggleButton({ id: 'toggle-active-to-inactive', status: true })
- const button = wrapper.find('button')
-
- expect(button.classes()).toContain('button--active')
- await button.trigger('click')
- expect(button.classes()).not.toContain('button--active')
- })
-
- it('should call on callback when toggled to active', async () => {
- const onCallback = vi.fn()
- const wrapper = mountToggleButton({
- id: 'on-callback-test',
- off: vi.fn(),
- on: onCallback,
- status: false,
- })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(onCallback).toHaveBeenCalledOnce()
- })
-
- it('should call off callback when toggled to inactive', async () => {
- const offCallback = vi.fn()
- const wrapper = mountToggleButton({
- id: 'off-callback-test',
- off: offCallback,
- on: vi.fn(),
- status: true,
- })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(offCallback).toHaveBeenCalledOnce()
- })
-
- it('should emit clicked event with new boolean state', async () => {
- const wrapper = mountToggleButton({ id: 'emit-test', status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(wrapper.emitted('clicked')?.[0]).toEqual([true])
- })
-
- it('should emit clicked event with false when toggling off', async () => {
- const wrapper = mountToggleButton({ id: 'emit-false-test', status: true })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(wrapper.emitted('clicked')?.[0]).toEqual([false])
- })
- })
-
- describe('localStorage persistence', () => {
- it('should save toggle state to localStorage on click', async () => {
- const wrapper = mountToggleButton({ id: 'persist-test', status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(localStorage.getItem('toggle-button-persist-test')).toBe('true')
- })
-
- it('should restore toggle state from localStorage on mount', () => {
- localStorage.setItem('toggle-button-restore-test', 'true')
- const wrapper = mountToggleButton({ id: 'restore-test', status: false })
- const button = wrapper.find('button')
-
- expect(button.classes()).toContain('button--active')
- })
-
- it('should use correct localStorage key for non-shared toggle', async () => {
- const wrapper = mountToggleButton({ id: 'key-test', shared: false, status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(localStorage.getItem('toggle-button-key-test')).toBe('true')
- expect(localStorage.getItem('shared-toggle-button-key-test')).toBeNull()
- })
-
- it('should use correct localStorage key for shared toggle', async () => {
- const wrapper = mountToggleButton({ id: 'shared-key-test', shared: true, status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(localStorage.getItem('shared-toggle-button-shared-key-test')).toBe('true')
- expect(localStorage.getItem('toggle-button-shared-key-test')).toBeNull()
- })
- })
-
- describe('shared toggle behavior', () => {
- it('should reset other shared toggles when activated', async () => {
- localStorage.setItem('shared-toggle-button-other', 'true')
-
- const wrapper = mountToggleButton({ id: 'mine', shared: true, status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
-
- expect(localStorage.getItem('shared-toggle-button-other')).toBe('false')
- })
-
- it('should not reset non-shared toggles when shared toggle is activated', async () => {
- localStorage.setItem('toggle-button-other', 'true')
-
- const wrapper = mountToggleButton({ id: 'shared-mine', shared: true, status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
-
- expect(localStorage.getItem('toggle-button-other')).toBe('true')
- })
-
- it('should reset multiple other shared toggles when activated', async () => {
- localStorage.setItem('shared-toggle-button-first', 'true')
- localStorage.setItem('shared-toggle-button-second', 'true')
-
- const wrapper = mountToggleButton({ id: 'third', shared: true, status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
-
- expect(localStorage.getItem('shared-toggle-button-first')).toBe('false')
- expect(localStorage.getItem('shared-toggle-button-second')).toBe('false')
- })
- })
-
- describe('edge cases', () => {
- it('should handle missing on callback gracefully', async () => {
- const wrapper = mountToggleButton({ id: 'no-on-callback', off: vi.fn(), status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(wrapper.emitted('clicked')?.[0]).toEqual([true])
- })
-
- it('should handle missing off callback gracefully', async () => {
- const wrapper = mountToggleButton({ id: 'no-off-callback', on: vi.fn(), status: true })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(wrapper.emitted('clicked')?.[0]).toEqual([false])
- })
-
- it('should use default status false when not provided', () => {
- const wrapper = mountToggleButton({ id: 'default-status' })
- const button = wrapper.find('button')
-
- expect(button.classes()).not.toContain('button--active')
- })
-
- it('should handle multiple consecutive clicks', async () => {
- const wrapper = mountToggleButton({ id: 'multi-click', status: false })
- const button = wrapper.find('button')
-
- await button.trigger('click')
- expect(button.classes()).toContain('button--active')
-
- await button.trigger('click')
- expect(button.classes()).not.toContain('button--active')
-
- await button.trigger('click')
- expect(button.classes()).toContain('button--active')
- })
- })
-})
it('should send SET_SUPERVISION_URL with credentials when provided', async () => {
const url = 'ws://new-supervision:9001'
- await client.setSupervisionUrl(TEST_HASH_ID, url, 'alice', 's3cret')
+ await client.setSupervisionUrl(TEST_HASH_ID, url, 'alice', 'secret')
expect(sendRequestSpy).toHaveBeenCalledWith(ProcedureName.SET_SUPERVISION_URL, {
hashIds: [TEST_HASH_ID],
- supervisionPassword: 's3cret',
+ supervisionPassword: 'secret',
supervisionUser: 'alice',
url,
})
/**
* @file Tests for Utils composable
- * @description Unit tests for localStorage, toggle state, useExecuteAction, and useFetchData utilities.
+ * @description Unit tests for localStorage, toggle state, and useFetchData utilities.
*/
import { flushPromises } from '@vue/test-utils'
import { ResponseStatus } from 'ui-common'
getLocalStorage,
resetToggleButtonState,
setToLocalStorage,
- useExecuteAction,
+ useChargingStations,
+ useConfiguration,
useFetchData,
+ useTemplates,
} from '@/composables'
import { toastMock } from '../setup'
})
})
- describe('useExecuteAction', () => {
- afterEach(() => {
- vi.restoreAllMocks()
- })
-
- it('should call emit and toast.success on action success', async () => {
- const emit = vi.fn()
- const executeAction = useExecuteAction(emit)
-
- executeAction(Promise.resolve(), 'Success message', 'Error message')
- await flushPromises()
-
- expect(emit).toHaveBeenCalledWith('need-refresh')
- expect(toastMock.success).toHaveBeenCalledWith('Success message')
- })
-
- it('should call toast.error and console.error on action failure', async () => {
- const consoleSpy = vi.spyOn(console, 'error')
- const emit = vi.fn()
- const executeAction = useExecuteAction(emit)
-
- executeAction(Promise.reject(new Error('fail')), 'Success', 'Error at action')
- await flushPromises()
-
- expect(emit).not.toHaveBeenCalled()
- expect(toastMock.error).toHaveBeenCalledWith('Error at action')
- expect(consoleSpy).toHaveBeenCalledWith('Error at action:', expect.any(Error))
- })
- })
-
describe('useFetchData', () => {
afterEach(() => {
vi.restoreAllMocks()
expect(toastMock.error).toHaveBeenCalledWith('Fetch error')
expect(consoleSpy).toHaveBeenCalled()
})
+
+ it('should log error when onError callback throws', async () => {
+ const consoleSpy = vi.spyOn(console, 'error')
+ const throwingOnError = vi.fn().mockImplementation(() => {
+ throw new Error('callback error')
+ })
+ const { fetch } = useFetchData(
+ () => Promise.reject(new Error('fail')),
+ vi.fn(),
+ 'Fetch error',
+ throwingOnError
+ )
+
+ fetch()
+ await flushPromises()
+
+ expect(consoleSpy).toHaveBeenCalledWith('Error in onError callback:', expect.any(Error))
+ })
+ })
+
+ describe('inject utilities outside provide scope', () => {
+ it('useConfiguration should throw when not provided', () => {
+ expect(() => useConfiguration()).toThrow('configuration not provided')
+ })
+
+ it('useChargingStations should throw when not provided', () => {
+ expect(() => useChargingStations()).toThrow('chargingStations not provided')
+ })
+
+ it('useTemplates should throw when not provided', () => {
+ expect(() => useTemplates()).toThrow('templates not provided')
+ })
})
})
* @file Shared test utilities for Vue.js web UI unit tests
* @description MockWebSocket, withSetup composable helper, mock factories.
*/
-import { flushPromises } from '@vue/test-utils'
import { ResponseStatus } from 'ui-common'
import { vi } from 'vitest'
import { type App, createApp } from 'vue'
-export { flushPromises as flushAllPromises }
-
// ── MockUIClient ──────────────────────────────────────────────────────────────
export interface MockUIClient {
--- /dev/null
+/**
+ * @file Tests for router configuration
+ * @description Tests for the skin-aware router guard (skinOnly meta).
+ */
+import { describe, expect, it, vi } from 'vitest'
+
+import { ROUTE_NAMES } from '@/composables'
+import { router } from '@/router/index.js'
+
+vi.mock('@/shared/composables/useSkin.js', async importOriginal => {
+ const { readonly, ref } = await import('vue')
+ const activeSkinId = ref('modern')
+ return {
+ ...(await importOriginal<Record<string, unknown>>()),
+ SKIN_STORAGE_KEY: 'ecs-ui-skin',
+ useSkin: () => ({
+ activeSkinId: readonly(activeSkinId),
+ isSwitching: readonly(ref(false)),
+ lastError: readonly(ref(null)),
+ skins: [],
+ switchSkin: vi.fn(),
+ }),
+ }
+})
+
+describe('router', () => {
+ it('should redirect classic-only routes when active skin is not classic', async () => {
+ await router.push('/add-charging-stations')
+ expect(router.currentRoute.value.name).toBe(ROUTE_NAMES.CHARGING_STATIONS)
+ })
+
+ it('should allow non-guarded routes regardless of skin', async () => {
+ await router.push('/')
+ expect(router.currentRoute.value.name).toBe(ROUTE_NAMES.CHARGING_STATIONS)
+ })
+})
--- /dev/null
+/**
+ * @file Tests for SkinLoadError and SkinLoading shared components
+ * @description Verifies that the skin loading/error boundary components render correctly
+ */
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import SkinLoadError from '@/shared/components/SkinLoadError.vue'
+import SkinLoading from '@/shared/components/SkinLoading.vue'
+
+describe('SkinComponents', () => {
+ describe('SkinLoadError', () => {
+ it('should render an error message', () => {
+ const wrapper = mount(SkinLoadError)
+ expect(wrapper.text()).toContain('Failed to load skin layout.')
+ })
+
+ it('should emit retry event when the retry button is clicked', async () => {
+ const wrapper = mount(SkinLoadError)
+ await wrapper.find('button').trigger('click')
+ expect(wrapper.emitted('retry')).toHaveLength(1)
+ })
+ })
+
+ describe('SkinLoading', () => {
+ it('should render a spinner element', () => {
+ const wrapper = mount(SkinLoading)
+ expect(wrapper.find('.skin-loading__spinner').exists()).toBe(true)
+ })
+
+ it('should render loading text', () => {
+ const wrapper = mount(SkinLoading)
+ expect(wrapper.text()).toContain('Loading')
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for stationStatus utilities
+ * @description Tests for the useStationStatus shared composable status mapping functions.
+ */
+import type { ChargingStationData } from 'ui-common'
+
+import { describe, expect, it } from 'vitest'
+
+import {
+ getATGStatus,
+ getConnectorEntries,
+ getConnectorStatusVariant,
+ getWebSocketStateVariant,
+} from '@/shared/utils/stationStatus.js'
+
+describe('stationStatus', () => {
+ describe('getConnectorStatusVariant', () => {
+ it('should return ok for Available', () => {
+ const result = getConnectorStatusVariant('Available')
+ expect(result).toBe('ok')
+ })
+
+ it('should return warn for Charging', () => {
+ const result = getConnectorStatusVariant('Charging')
+ expect(result).toBe('warn')
+ })
+
+ it('should return warn for Occupied', () => {
+ const result = getConnectorStatusVariant('Occupied')
+ expect(result).toBe('warn')
+ })
+
+ it('should return warn for Preparing', () => {
+ const result = getConnectorStatusVariant('Preparing')
+ expect(result).toBe('warn')
+ })
+
+ it('should return warn for SuspendedEV', () => {
+ const result = getConnectorStatusVariant('SuspendedEV')
+ expect(result).toBe('warn')
+ })
+
+ it('should return warn for SuspendedEVSE', () => {
+ const result = getConnectorStatusVariant('SuspendedEVSE')
+ expect(result).toBe('warn')
+ })
+
+ it('should return warn for Finishing', () => {
+ const result = getConnectorStatusVariant('Finishing')
+ expect(result).toBe('warn')
+ })
+
+ it('should return err for Faulted', () => {
+ const result = getConnectorStatusVariant('Faulted')
+ expect(result).toBe('err')
+ })
+
+ it('should return err for Unavailable', () => {
+ const result = getConnectorStatusVariant('Unavailable')
+ expect(result).toBe('err')
+ })
+
+ it('should return idle for undefined', () => {
+ const result = getConnectorStatusVariant(undefined)
+ expect(result).toBe('idle')
+ })
+
+ it('should return idle for unknown status', () => {
+ const result = getConnectorStatusVariant('Unknown')
+ expect(result).toBe('idle')
+ })
+
+ it('should handle case-insensitive status values', () => {
+ expect(getConnectorStatusVariant('available')).toBe('ok')
+ expect(getConnectorStatusVariant('CHARGING')).toBe('warn')
+ expect(getConnectorStatusVariant('faulted')).toBe('err')
+ expect(getConnectorStatusVariant('preparing')).toBe('warn')
+ })
+ })
+
+ describe('getWebSocketStateVariant', () => {
+ it('should return warn for CONNECTING (0)', () => {
+ expect(getWebSocketStateVariant(0)).toBe('warn')
+ })
+
+ it('should return ok for OPEN (1)', () => {
+ expect(getWebSocketStateVariant(1)).toBe('ok')
+ })
+
+ it('should return warn for CLOSING (2)', () => {
+ expect(getWebSocketStateVariant(2)).toBe('warn')
+ })
+
+ it('should return err for CLOSED (3)', () => {
+ expect(getWebSocketStateVariant(3)).toBe('err')
+ })
+
+ it('should return idle for undefined', () => {
+ expect(getWebSocketStateVariant(undefined)).toBe('idle')
+ })
+ })
+
+ describe('getATGStatus', () => {
+ it('should return status for matching connectorId', () => {
+ const station = {
+ automaticTransactionGenerator: {
+ automaticTransactionGeneratorStatuses: [
+ { connectorId: 1, status: 'started' },
+ { connectorId: 2, status: 'stopped' },
+ ],
+ },
+ } as unknown as ChargingStationData
+ expect(getATGStatus(station, 1)).toBe('started')
+ })
+
+ it('should return undefined when connectorId not found', () => {
+ const station = {
+ automaticTransactionGenerator: {
+ automaticTransactionGeneratorStatuses: [{ connectorId: 1, status: 'started' }],
+ },
+ } as unknown as ChargingStationData
+ expect(getATGStatus(station, 99)).toBeUndefined()
+ })
+
+ it('should return undefined when automaticTransactionGenerator is absent', () => {
+ const station = {} as unknown as ChargingStationData
+ expect(getATGStatus(station, 1)).toBeUndefined()
+ })
+ })
+
+ describe('getConnectorEntries', () => {
+ it('should return connector entries from connectors array', () => {
+ const station = {
+ connectors: [
+ { connectorId: 0, connectorStatus: 'Available' },
+ { connectorId: 1, connectorStatus: 'Charging' },
+ { connectorId: 2, connectorStatus: 'Available' },
+ ],
+ } as unknown as ChargingStationData
+ const entries = getConnectorEntries(station)
+ expect(entries).toHaveLength(2)
+ expect(entries[0].connectorId).toBe(1)
+ expect(entries[1].connectorId).toBe(2)
+ })
+
+ it('should return connector entries from evses, skipping evseId 0 and connectorId 0', () => {
+ const station = {
+ evses: [
+ {
+ evseId: 0,
+ evseStatus: { connectors: [{ connectorId: 1, connectorStatus: 'Available' }] },
+ },
+ {
+ evseId: 1,
+ evseStatus: {
+ connectors: [
+ { connectorId: 0, connectorStatus: 'Available' },
+ { connectorId: 1, connectorStatus: 'Charging' },
+ ],
+ },
+ },
+ ],
+ } as unknown as ChargingStationData
+ const entries = getConnectorEntries(station)
+ expect(entries).toHaveLength(1)
+ expect(entries[0].connectorId).toBe(1)
+ expect(entries[0].evseId).toBe(1)
+ })
+
+ it('should fall back to connectors when evses is empty', () => {
+ const station = {
+ connectors: [{ connectorId: 1, connectorStatus: 'Available' }],
+ evses: [],
+ } as unknown as ChargingStationData
+ const entries = getConnectorEntries(station)
+ expect(entries).toHaveLength(1)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useAddStationsForm composable
+ * @description Tests for the useAddStationsForm shared composable.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { toastMock } from '../../../setup.js'
+
+const mockAddChargingStations = vi.fn().mockResolvedValue({ status: 'success' })
+const mockTemplates = ref(['template1.json', 'template2.json'])
+
+vi.mock('@/composables/Utils.js', () => ({
+ resetToggleButtonState: vi.fn(),
+ useTemplates: () => mockTemplates,
+ useUIClient: () => ({
+ addChargingStations: mockAddChargingStations,
+ }),
+}))
+
+let uuidCounter = 0
+
+vi.mock('ui-common', () => ({
+ convertToBoolean: (v: unknown) => Boolean(v),
+ randomUUID: () => `uuid-${String(++uuidCounter)}`,
+}))
+
+import { useAddStationsForm } from '@/shared/composables/useAddStationsForm.js'
+
+describe('useAddStationsForm', () => {
+ afterEach(() => {
+ vi.clearAllMocks()
+ mockTemplates.value = ['template1.json', 'template2.json']
+ uuidCounter = 0
+ })
+
+ it('should initialize with default state', () => {
+ const { formState } = useAddStationsForm()
+ expect(formState.value.template).toBe('')
+ expect(formState.value.numberOfStations).toBe(1)
+ expect(formState.value.autoStart).toBe(false)
+ expect(formState.value.ocppStrictCompliance).toBe(true)
+ expect(formState.value.persistentConfiguration).toBe(true)
+ expect(formState.value.baseName).toBe('')
+ expect(formState.value.enableStatistics).toBe(false)
+ expect(formState.value.fixedName).toBe(false)
+ expect(formState.value.supervisionUrl).toBe('')
+ expect(formState.value.supervisionUser).toBe('')
+ expect(formState.value.supervisionPassword).toBe('')
+ })
+
+ it('should reflect injected templates reactively', () => {
+ const { templates } = useAddStationsForm()
+ expect(templates.value).toEqual(['template1.json', 'template2.json'])
+ })
+
+ it('should reset form to default state', () => {
+ const { formState, resetForm } = useAddStationsForm()
+ formState.value.template = 'test.json'
+ formState.value.numberOfStations = 5
+ formState.value.autoStart = true
+ resetForm()
+ expect(formState.value.template).toBe('')
+ expect(formState.value.numberOfStations).toBe(1)
+ expect(formState.value.autoStart).toBe(false)
+ })
+
+ it('should call addChargingStations on submit', async () => {
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'station-template.json'
+ formState.value.numberOfStations = 3
+ await submitForm()
+ expect(mockAddChargingStations).toHaveBeenCalledWith('station-template.json', 3, {
+ autoStart: false,
+ baseName: undefined,
+ enableStatistics: false,
+ fixedName: undefined,
+ ocppStrictCompliance: true,
+ persistentConfiguration: true,
+ supervisionPassword: undefined,
+ supervisionUrls: undefined,
+ supervisionUser: undefined,
+ })
+ expect(toastMock.success).toHaveBeenCalledWith('Charging stations successfully added')
+ })
+
+ it('should pass optional fields when set on submit', async () => {
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'tpl.json'
+ formState.value.numberOfStations = 1
+ formState.value.baseName = 'CS-'
+ formState.value.fixedName = true
+ formState.value.supervisionUrl = 'ws://localhost:8080'
+ formState.value.supervisionUser = 'admin'
+ formState.value.supervisionPassword = 'secret'
+ await submitForm()
+ expect(mockAddChargingStations).toHaveBeenCalledWith('tpl.json', 1, {
+ autoStart: false,
+ baseName: 'CS-',
+ enableStatistics: false,
+ fixedName: true,
+ ocppStrictCompliance: true,
+ persistentConfiguration: true,
+ supervisionPassword: 'secret',
+ supervisionUrls: 'ws://localhost:8080',
+ supervisionUser: 'admin',
+ })
+ })
+
+ it('should reset form after submit', async () => {
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'station.json'
+ formState.value.numberOfStations = 5
+ await submitForm()
+ expect(formState.value.template).toBe('')
+ expect(formState.value.numberOfStations).toBe(1)
+ })
+
+ it('should invoke user-provided onFinally callback on submit', async () => {
+ const onFinally = vi.fn()
+ const { formState, submitForm } = useAddStationsForm({ onFinally })
+ formState.value.template = 'tpl.json'
+ formState.value.numberOfStations = 2
+ await submitForm()
+ expect(onFinally).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call addChargingStations with numberOfStations = 0', async () => {
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'boundary.json'
+ formState.value.numberOfStations = 0
+ await submitForm()
+ expect(mockAddChargingStations).toHaveBeenCalledWith('boundary.json', 0, expect.any(Object))
+ })
+
+ it('should update renderTemplates reactively when templates ref changes', async () => {
+ const { formState } = useAddStationsForm()
+ const initial = formState.value.renderTemplates
+ mockTemplates.value = ['alpha.json', 'beta.json', 'gamma.json']
+ await nextTick()
+ const updated = formState.value.renderTemplates
+ expect(updated).not.toBe(initial)
+ mockTemplates.value = ['delta.json']
+ await nextTick()
+ expect(formState.value.renderTemplates).not.toBe(updated)
+ })
+
+ it('should show error toast on failure', async () => {
+ mockAddChargingStations.mockRejectedValueOnce(new Error('network error'))
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'tpl.json'
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(toastMock.error).toHaveBeenCalledWith('Error at adding charging stations')
+ })
+
+ it('should expose pending state', () => {
+ const { pending } = useAddStationsForm()
+ expect(pending.value).toBe(false)
+ })
+
+ it('should show toast error and return false when template is empty', async () => {
+ const { submitForm } = useAddStationsForm()
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(toastMock.error).toHaveBeenCalledWith('Please select a template')
+ })
+
+ it('should return false and not call addChargingStations when pending', async () => {
+ const { formState, submitForm } = useAddStationsForm()
+ formState.value.template = 'tpl.json'
+ let resolveFirst!: (value: { status: string }) => void
+ mockAddChargingStations.mockImplementationOnce(
+ () =>
+ new Promise<{ status: string }>(resolve => {
+ resolveFirst = resolve
+ })
+ )
+ const firstCall = submitForm()
+ const secondResult = await submitForm()
+ expect(secondResult).toBe(false)
+ expect(mockAddChargingStations).toHaveBeenCalledTimes(1)
+ resolveFirst({ status: 'success' })
+ await firstCall
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useAsyncAction composable
+ * @description Verifies loading state, error toasts, and success callbacks for async action wrapper.
+ */
+import { flushPromises } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { useAsyncAction } from '@/shared/composables/useAsyncAction.js'
+
+import { toastMock } from '../../../setup.js'
+import { withSetup } from '../../helpers.js'
+
+describe('useAsyncAction', () => {
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should initialize pending keys to false', () => {
+ const [{ pending }] = withSetup(() => useAsyncAction({ a: false, b: false }))
+ expect(pending.a).toBe(false)
+ expect(pending.b).toBe(false)
+ })
+
+ it('should set pending[key] to true while action is in progress', async () => {
+ let resolveAction!: (value: unknown) => void
+ const action = () =>
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ const [{ pending, run }] = withSetup(() => useAsyncAction({ a: false }))
+ run('a', { action, errorMsg: 'err', successMsg: 'ok' })
+ expect(pending.a).toBe(true)
+ resolveAction(undefined)
+ await flushPromises()
+ expect(pending.a).toBe(false)
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }))
+ run('a', { action: () => Promise.resolve(), errorMsg: 'Error!', successMsg: 'Success!' })
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Success!')
+ })
+
+ it('should call onRefresh after success', async () => {
+ const onRefresh = vi.fn()
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }, onRefresh))
+ run('a', { action: () => Promise.resolve(), errorMsg: 'err', successMsg: 'ok' })
+ await flushPromises()
+ expect(onRefresh).toHaveBeenCalledOnce()
+ })
+
+ it('should call onSuccess callback before onRefresh', async () => {
+ const calls: string[] = []
+ const onRefresh = vi.fn(() => calls.push('refresh'))
+ const onSuccess = vi.fn(() => calls.push('success'))
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }, onRefresh))
+ run('a', { action: () => Promise.resolve(), errorMsg: 'err', onSuccess, successMsg: 'ok' })
+ await flushPromises()
+ expect(calls).toEqual(['success', 'refresh'])
+ })
+
+ it('should show error toast on failure', async () => {
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }))
+ run('a', {
+ action: () => Promise.reject(new Error('fail')),
+ errorMsg: 'Error!',
+ successMsg: 'ok',
+ })
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error!')
+ })
+
+ it('should not start a new action when pending[key] is already true', async () => {
+ let resolveAction!: (value: unknown) => void
+ const action = () =>
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ const [{ pending, run }] = withSetup(() => useAsyncAction({ a: false }))
+ run('a', { action, errorMsg: 'err', successMsg: 'first' })
+ expect(pending.a).toBe(true)
+ run('a', { action: () => Promise.resolve(), errorMsg: 'err', successMsg: 'second' })
+ resolveAction(undefined)
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledTimes(1)
+ expect(toastMock.success).toHaveBeenCalledWith('first')
+ })
+
+ it('should not call onRefresh on failure', async () => {
+ const onRefresh = vi.fn()
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }, onRefresh))
+ run('a', { action: () => Promise.reject(new Error('fail')), errorMsg: 'err', successMsg: 'ok' })
+ await flushPromises()
+ expect(onRefresh).not.toHaveBeenCalled()
+ })
+
+ it('should still call onRefresh when onSuccess callback throws', async () => {
+ const refreshMock = vi.fn()
+ const [{ run }] = withSetup(() => useAsyncAction({ a: false }, refreshMock))
+ run('a', {
+ action: () => Promise.resolve(),
+ errorMsg: 'err',
+ onSuccess: () => {
+ throw new Error('onSuccess exploded')
+ },
+ successMsg: 'ok',
+ })
+ await flushPromises()
+ expect(refreshMock).toHaveBeenCalled()
+ })
+
+ it('should not crash when onRefresh callback throws', async () => {
+ const [{ pending, run }] = withSetup(() =>
+ useAsyncAction({ a: false }, () => {
+ throw new Error('refresh exploded')
+ })
+ )
+ run('a', { action: () => Promise.resolve(), errorMsg: 'err', successMsg: 'ok' })
+ await flushPromises()
+ expect(pending.a).toBe(false)
+ })
+
+ it('should not fire callbacks or reset pending after scope disposal', async () => {
+ let resolveAction!: (value: unknown) => void
+ const action = () =>
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ const onRefresh = vi.fn()
+ const [{ pending, run }, app] = withSetup(() => useAsyncAction({ a: false }, onRefresh))
+ run('a', { action, errorMsg: 'err', successMsg: 'ok' })
+ expect(pending.a).toBe(true)
+ app.unmount()
+ resolveAction(undefined)
+ await flushPromises()
+ expect(toastMock.success).not.toHaveBeenCalled()
+ expect(onRefresh).not.toHaveBeenCalled()
+ expect(pending.a).toBe(true)
+ })
+
+ it('should not show error toast after scope disposal on failure', async () => {
+ let rejectAction!: (reason: unknown) => void
+ const action = () =>
+ new Promise((_resolve, reject) => {
+ rejectAction = reject
+ })
+ const [{ run }, app] = withSetup(() => useAsyncAction({ a: false }))
+ run('a', { action, errorMsg: 'Error!', successMsg: 'ok' })
+ app.unmount()
+ rejectAction(new Error('fail'))
+ await flushPromises()
+ expect(toastMock.error).not.toHaveBeenCalled()
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useConnectorActions composable
+ * @description Verifies connector-level actions (stop transaction, lock/unlock, ATG start/stop),
+ * pending state guards, toast notifications, and onRefresh callback invocation.
+ */
+import { flushPromises } from '@vue/test-utils'
+import { OCPPVersion } from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { toastMock } from '../../../setup.js'
+import { createMockUIClient, type MockUIClient, withSetup } from '../../helpers.js'
+
+let mockClient: MockUIClient
+
+vi.mock('@/composables/Utils.js', () => ({
+ useUIClient: () => mockClient,
+}))
+
+import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
+
+describe('useConnectorActions', () => {
+ const hashId = 'test-hash-id'
+ const connectorId = 1
+
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('stopTransaction', () => {
+ it('should show error toast when transactionId is null', () => {
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction(null)
+ expect(toastMock.error).toHaveBeenCalledWith('No transaction to stop')
+ expect(mockClient.stopTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should show error toast when transactionId is undefined', () => {
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction(undefined)
+ expect(toastMock.error).toHaveBeenCalledWith('No transaction to stop')
+ expect(mockClient.stopTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should call uiClient.stopTransaction with correct params', async () => {
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction(42)
+ await flushPromises()
+ expect(mockClient.stopTransaction).toHaveBeenCalledWith(hashId, {
+ ocppVersion: undefined,
+ transactionId: 42,
+ })
+ })
+
+ it('should pass ocppVersion to stopTransaction', async () => {
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction('tx-uuid-123', OCPPVersion.VERSION_201)
+ await flushPromises()
+ expect(mockClient.stopTransaction).toHaveBeenCalledWith(hashId, {
+ ocppVersion: OCPPVersion.VERSION_201,
+ transactionId: 'tx-uuid-123',
+ })
+ })
+
+ it('should show success toast on successful stop', async () => {
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction(1)
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Transaction stopped')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockClient.stopTransaction.mockRejectedValueOnce(new Error('fail'))
+ const [{ stopTransaction }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopTransaction(1)
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error stopping transaction')
+ })
+
+ it('should set pending.stopTx while action is in progress', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockClient.stopTransaction.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ pending, stopTransaction }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId })
+ )
+ stopTransaction(1)
+ expect(pending.stopTx).toBe(true)
+ resolveAction({ status: 'success' })
+ await flushPromises()
+ expect(pending.stopTx).toBe(false)
+ })
+ })
+
+ describe('lockConnector', () => {
+ it('should call uiClient.lockConnector with hashId and connectorId', async () => {
+ const [{ lockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ lockConnector()
+ await flushPromises()
+ expect(mockClient.lockConnector).toHaveBeenCalledWith(hashId, connectorId)
+ })
+
+ it('should show success toast on successful lock', async () => {
+ const [{ lockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ lockConnector()
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Connector locked')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockClient.lockConnector.mockRejectedValueOnce(new Error('fail'))
+ const [{ lockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ lockConnector()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error locking connector')
+ })
+
+ it('should set pending.lock while action is in progress', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockClient.lockConnector.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ lockConnector, pending }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId })
+ )
+ lockConnector()
+ expect(pending.lock).toBe(true)
+ resolveAction({ status: 'success' })
+ await flushPromises()
+ expect(pending.lock).toBe(false)
+ })
+ })
+
+ describe('unlockConnector', () => {
+ it('should call uiClient.unlockConnector with hashId and connectorId', async () => {
+ const [{ unlockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ unlockConnector()
+ await flushPromises()
+ expect(mockClient.unlockConnector).toHaveBeenCalledWith(hashId, connectorId)
+ })
+
+ it('should show success toast on successful unlock', async () => {
+ const [{ unlockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ unlockConnector()
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Connector unlocked')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockClient.unlockConnector.mockRejectedValueOnce(new Error('fail'))
+ const [{ unlockConnector }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ unlockConnector()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error unlocking connector')
+ })
+
+ it('should share pending.lock key with lockConnector', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockClient.lockConnector.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ lockConnector, pending, unlockConnector }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId })
+ )
+ lockConnector()
+ expect(pending.lock).toBe(true)
+ // Second call on same key should be blocked
+ unlockConnector()
+ expect(mockClient.unlockConnector).not.toHaveBeenCalled()
+ resolveAction({ status: 'success' })
+ await flushPromises()
+ expect(pending.lock).toBe(false)
+ })
+ })
+
+ describe('startATG', () => {
+ it('should call uiClient.startAutomaticTransactionGenerator with hashId and connectorId', async () => {
+ const [{ startATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ startATG()
+ await flushPromises()
+ expect(mockClient.startAutomaticTransactionGenerator).toHaveBeenCalledWith(
+ hashId,
+ connectorId
+ )
+ })
+
+ it('should show success toast on successful start', async () => {
+ const [{ startATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ startATG()
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('ATG started')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockClient.startAutomaticTransactionGenerator.mockRejectedValueOnce(new Error('fail'))
+ const [{ startATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ startATG()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error starting ATG')
+ })
+
+ it('should set pending.atg while action is in progress', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockClient.startAutomaticTransactionGenerator.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ pending, startATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ startATG()
+ expect(pending.atg).toBe(true)
+ resolveAction({ status: 'success' })
+ await flushPromises()
+ expect(pending.atg).toBe(false)
+ })
+ })
+
+ describe('stopATG', () => {
+ it('should call uiClient.stopAutomaticTransactionGenerator with hashId and connectorId', async () => {
+ const [{ stopATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopATG()
+ await flushPromises()
+ expect(mockClient.stopAutomaticTransactionGenerator).toHaveBeenCalledWith(hashId, connectorId)
+ })
+
+ it('should show success toast on successful stop', async () => {
+ const [{ stopATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopATG()
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('ATG stopped')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockClient.stopAutomaticTransactionGenerator.mockRejectedValueOnce(new Error('fail'))
+ const [{ stopATG }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ stopATG()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error stopping ATG')
+ })
+
+ it('should share pending.atg key with startATG', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockClient.startAutomaticTransactionGenerator.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ pending, startATG, stopATG }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId })
+ )
+ startATG()
+ expect(pending.atg).toBe(true)
+ // Second call on same key should be blocked
+ stopATG()
+ expect(mockClient.stopAutomaticTransactionGenerator).not.toHaveBeenCalled()
+ resolveAction({ status: 'success' })
+ await flushPromises()
+ expect(pending.atg).toBe(false)
+ })
+ })
+
+ describe('onRefresh', () => {
+ it('should call onRefresh callback after successful action', async () => {
+ const onRefresh = vi.fn()
+ const [{ lockConnector }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId, onRefresh })
+ )
+ lockConnector()
+ await flushPromises()
+ expect(onRefresh).toHaveBeenCalledOnce()
+ })
+
+ it('should not call onRefresh on failure', async () => {
+ const onRefresh = vi.fn()
+ mockClient.lockConnector.mockRejectedValueOnce(new Error('fail'))
+ const [{ lockConnector }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId, onRefresh })
+ )
+ lockConnector()
+ await flushPromises()
+ expect(onRefresh).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('pending state initialization', () => {
+ it('should initialize all pending keys to false', () => {
+ const [{ pending }] = withSetup(() => useConnectorActions({ connectorId, hashId }))
+ expect(pending.atg).toBe(false)
+ expect(pending.lock).toBe(false)
+ expect(pending.stopTx).toBe(false)
+ })
+ })
+
+ describe('Ref-based deps', () => {
+ it('should resolve Ref<string> hashId', async () => {
+ const { ref } = await import('vue')
+ const hashIdRef = ref('ref-hash-id')
+ const [{ lockConnector }] = withSetup(() =>
+ useConnectorActions({ connectorId, hashId: hashIdRef })
+ )
+ lockConnector()
+ await flushPromises()
+ expect(mockClient.lockConnector).toHaveBeenCalledWith('ref-hash-id', connectorId)
+ })
+
+ it('should resolve Ref<number> connectorId', async () => {
+ const { ref } = await import('vue')
+ const connectorIdRef = ref(3)
+ const [{ lockConnector }] = withSetup(() =>
+ useConnectorActions({ connectorId: connectorIdRef, hashId })
+ )
+ lockConnector()
+ await flushPromises()
+ expect(mockClient.lockConnector).toHaveBeenCalledWith(hashId, 3)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useLayoutData composable
+ * @description Tests for the useLayoutData shared composable.
+ */
+import type { ConfigurationData } from 'ui-common'
+
+import { flushPromises } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { type Ref, ref } from 'vue'
+
+import { useChargingStations, useConfiguration, useTemplates, useUIClient } from '@/composables'
+
+vi.mock('@/composables', async importOriginal => {
+ const actual = await importOriginal()
+ return {
+ ...(actual as Record<string, unknown>),
+ useChargingStations: vi.fn(),
+ useConfiguration: vi.fn(),
+ useTemplates: vi.fn(),
+ useUIClient: vi.fn(),
+ }
+})
+
+import { useLayoutData } from '@/shared/composables/useLayoutData.js'
+
+import { createMockUIClient, type MockUIClient, withSetup } from '../../helpers'
+
+let mockClient: MockUIClient
+let chargingStations: Ref<unknown[]>
+let templates: Ref<string[]>
+let configuration: Ref<ConfigurationData>
+
+/**
+ * Finds the WS event listener handler registered for the given event type.
+ * @param eventType - The WebSocket event name ('open', 'error', 'close')
+ * @returns The registered handler function, or undefined if not found
+ */
+function getWSHandler (eventType: string): ((...args: unknown[]) => void) | undefined {
+ const call = vi
+ .mocked(mockClient.registerWSEventListener)
+ .mock.calls.find(([event]) => event === eventType)
+ return call?.[1] as ((...args: unknown[]) => void) | undefined
+}
+
+/**
+ * Mounts the useLayoutData composable in a component context.
+ * @returns Tuple of [composable result, app instance]
+ */
+function mountComposable () {
+ return withSetup(() => useLayoutData())
+}
+
+describe('useLayoutData', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ chargingStations = ref([])
+ templates = ref([])
+ configuration = ref({
+ uiServer: [{ host: 'localhost', port: 8080, protocol: 'ui', version: '0.0.1' }],
+ } as unknown as ConfigurationData)
+ vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as ReturnType<typeof useUIClient>)
+ vi.mocked(useChargingStations).mockReturnValue(
+ chargingStations as ReturnType<typeof useChargingStations>
+ )
+ vi.mocked(useTemplates).mockReturnValue(templates)
+ vi.mocked(useConfiguration).mockReturnValue(configuration)
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should call simulatorState, listTemplates, and listChargingStations on getData', () => {
+ const [result] = mountComposable()
+ mockClient.simulatorState.mockClear()
+ mockClient.listTemplates.mockClear()
+ mockClient.listChargingStations.mockClear()
+ result.getData()
+ expect(mockClient.simulatorState).toHaveBeenCalledTimes(1)
+ expect(mockClient.listTemplates).toHaveBeenCalledTimes(1)
+ expect(mockClient.listChargingStations).toHaveBeenCalledTimes(1)
+ })
+
+ it('should register open, error, and close WS event listeners on mount', () => {
+ mountComposable()
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('error', expect.any(Function))
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('close', expect.any(Function))
+ })
+
+ it('should unregister open, error, and close WS event listeners on unmount', () => {
+ const [, app] = mountComposable()
+ app.unmount()
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith('error', expect.any(Function))
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith('close', expect.any(Function))
+ })
+
+ it('should populate simulatorState when WS open fires and getData succeeds', async () => {
+ const statePayload = { started: true, templateStatistics: {} }
+ mockClient.simulatorState.mockResolvedValue({
+ state: statePayload,
+ status: 'success',
+ })
+ const [result] = mountComposable()
+ const openHandler = getWSHandler('open')
+ openHandler?.()
+ await flushPromises()
+ expect(result.simulatorState.value).toEqual(statePayload)
+ })
+
+ it('should clear charging stations on WS error', () => {
+ chargingStations.value = [{ id: 'fake' }]
+ mountComposable()
+ const errorHandler = getWSHandler('error')
+ errorHandler?.()
+ expect(chargingStations.value).toHaveLength(0)
+ })
+
+ it('should clear charging stations on WS close', () => {
+ chargingStations.value = [{ id: 'fake' }]
+ mountComposable()
+ const closeHandler = getWSHandler('close')
+ closeHandler?.()
+ expect(chargingStations.value).toHaveLength(0)
+ })
+
+ it('should expose loading as true when any fetch is in progress', () => {
+ mockClient.simulatorState.mockReturnValue(new Promise(() => undefined))
+ const [result] = mountComposable()
+ result.getSimulatorState()
+ expect(result.loading.value).toBe(true)
+ })
+
+ it('should expose loading as false when all fetches complete', async () => {
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(false)
+ })
+
+ it('should expose loading as true when listTemplates fetch is in progress', async () => {
+ mockClient.simulatorState.mockResolvedValue({ state: { started: false }, status: 'success' })
+ mockClient.listChargingStations.mockResolvedValue({ chargingStations: [], status: 'success' })
+ mockClient.listTemplates.mockReturnValue(new Promise(() => undefined))
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(true)
+ })
+
+ it('should expose loading as true when listChargingStations fetch is in progress', async () => {
+ mockClient.simulatorState.mockResolvedValue({ state: { started: false }, status: 'success' })
+ mockClient.listTemplates.mockResolvedValue({ status: 'success', templates: [] })
+ mockClient.listChargingStations.mockReturnValue(new Promise(() => undefined))
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(true)
+ })
+
+ it('should unsubscribe from refresh events on unmount', () => {
+ const unsubscribe = vi.fn()
+ mockClient.onRefresh.mockReturnValue(unsubscribe)
+ const [, app] = mountComposable()
+ expect(mockClient.onRefresh).toHaveBeenCalledWith(expect.any(Function))
+ app.unmount()
+ expect(unsubscribe).toHaveBeenCalledTimes(1)
+ })
+
+ describe('error handling', () => {
+ it('should set loading to false when getSimulatorState rejects', async () => {
+ mockClient.simulatorState.mockRejectedValueOnce(new Error('network'))
+ mockClient.listTemplates.mockResolvedValue({ status: 'success', templates: [] })
+ mockClient.listChargingStations.mockResolvedValue({ chargingStations: [], status: 'success' })
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(false)
+ })
+
+ it('should set loading to false when listTemplates rejects', async () => {
+ mockClient.simulatorState.mockResolvedValue({ state: { started: false }, status: 'success' })
+ mockClient.listTemplates.mockRejectedValueOnce(new Error('network'))
+ mockClient.listChargingStations.mockResolvedValue({ chargingStations: [], status: 'success' })
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(false)
+ })
+
+ it('should set loading to false when listChargingStations rejects', async () => {
+ mockClient.simulatorState.mockResolvedValue({ state: { started: false }, status: 'success' })
+ mockClient.listTemplates.mockResolvedValue({ status: 'success', templates: [] })
+ mockClient.listChargingStations.mockRejectedValueOnce(new Error('network'))
+ const [result] = mountComposable()
+ result.getData()
+ await flushPromises()
+ expect(result.loading.value).toBe(false)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useSetUrlForm composable
+ * @description Tests for the useSetUrlForm shared composable.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { toastMock } from '../../../setup.js'
+
+const mockSetSupervisionUrl = vi.fn().mockResolvedValue({ status: 'success' })
+
+vi.mock('@/composables/Utils.js', () => ({
+ useUIClient: () => ({
+ setSupervisionUrl: mockSetSupervisionUrl,
+ }),
+}))
+
+import { useSetUrlForm } from '@/shared/composables/useSetUrlForm.js'
+
+describe('useSetUrlForm', () => {
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should initialize with empty form state', () => {
+ const { formState } = useSetUrlForm('hash1', 'CS-001')
+ expect(formState.value.supervisionUrl).toBe('')
+ expect(formState.value.supervisionUser).toBe('')
+ expect(formState.value.supervisionPassword).toBe('')
+ })
+
+ it('should return chargingStationId from arguments', () => {
+ const { chargingStationId } = useSetUrlForm('hash1', 'CS-001')
+ expect(chargingStationId).toBe('CS-001')
+ })
+
+ it('should reset form to empty state', () => {
+ const { formState, resetForm } = useSetUrlForm('hash1', 'CS-001')
+ formState.value.supervisionUrl = 'ws://example.com'
+ formState.value.supervisionUser = 'user'
+ formState.value.supervisionPassword = 'pass'
+ resetForm()
+ expect(formState.value.supervisionUrl).toBe('')
+ expect(formState.value.supervisionUser).toBe('')
+ expect(formState.value.supervisionPassword).toBe('')
+ })
+
+ it('should show error when supervisionUrl is empty on submit', async () => {
+ const { submitForm } = useSetUrlForm('hash1', 'CS-001')
+ await submitForm()
+ expect(toastMock.error).toHaveBeenCalledWith('Supervision url is required')
+ expect(mockSetSupervisionUrl).not.toHaveBeenCalled()
+ })
+
+ it('should call setSupervisionUrl when url is set', async () => {
+ const { formState, submitForm } = useSetUrlForm('hash1', 'CS-001')
+ formState.value.supervisionUrl = 'ws://server:8080'
+ await submitForm()
+ expect(mockSetSupervisionUrl).toHaveBeenCalledWith('hash1', 'ws://server:8080', '', '')
+ expect(toastMock.success).toHaveBeenCalledWith('Supervision url successfully set')
+ })
+
+ it('should pass optional user and password when set on submit', async () => {
+ const { formState, submitForm } = useSetUrlForm('hash1', 'CS-001')
+ formState.value.supervisionUrl = 'ws://server:8080'
+ formState.value.supervisionUser = 'admin'
+ formState.value.supervisionPassword = 'secret'
+ await submitForm()
+ expect(mockSetSupervisionUrl).toHaveBeenCalledWith(
+ 'hash1',
+ 'ws://server:8080',
+ 'admin',
+ 'secret'
+ )
+ })
+
+ it('should not show toast error when url is valid', async () => {
+ const { formState, submitForm } = useSetUrlForm('hash1', 'CS-001')
+ formState.value.supervisionUrl = 'ws://valid-server:9090'
+ await submitForm()
+ expect(toastMock.error).not.toHaveBeenCalled()
+ expect(mockSetSupervisionUrl).toHaveBeenCalledWith('hash1', 'ws://valid-server:9090', '', '')
+ })
+
+ it('should return false and show error toast when setSupervisionUrl rejects', async () => {
+ mockSetSupervisionUrl.mockRejectedValueOnce(new Error('Network error'))
+ const { formState, submitForm } = useSetUrlForm('hash1', 'CS-001')
+ formState.value.supervisionUrl = 'wss://example.com'
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(toastMock.error).toHaveBeenCalledWith('Error at setting supervision url')
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useSimulatorControl
+ * @description Simulator start/stop and server switch orchestration.
+ */
+import type { ConfigurationData } from 'ui-common'
+
+import { flushPromises } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { type Ref, ref } from 'vue'
+
+import type { LayoutData } from '@/shared/composables/useLayoutData.js'
+
+import {
+ UI_SERVER_CONFIGURATION_INDEX_KEY,
+ useChargingStations,
+ useConfiguration,
+ useUIClient,
+} from '@/composables'
+
+import { toastMock } from '../../../setup.js'
+import { createUIServerConfig } from '../../constants'
+import { createMockUIClient, type MockUIClient, withSetup } from '../../helpers.js'
+
+vi.mock('@/composables', async importOriginal => {
+ const actual = await importOriginal()
+ return {
+ ...(actual as Record<string, unknown>),
+ useChargingStations: vi.fn(),
+ useConfiguration: vi.fn(),
+ useUIClient: vi.fn(),
+ }
+})
+
+import { useSimulatorControl } from '@/shared/composables/useSimulatorControl.js'
+
+let mockClient: MockUIClient
+let chargingStations: Ref<unknown[]>
+let configuration: Ref<ConfigurationData>
+
+const mockGetSimulatorState = vi.fn()
+const mockRegisterWSEventListeners = vi.fn()
+const mockLayoutData: Pick<LayoutData, 'getSimulatorState' | 'registerWSEventListeners'> = {
+ getSimulatorState: mockGetSimulatorState,
+ registerWSEventListeners: mockRegisterWSEventListeners,
+}
+
+/**
+ * Mounts the useSimulatorControl composable in a component context.
+ * @param options - Optional callbacks for SimulatorControlOptions
+ * @returns Tuple of [composable result, app instance]
+ */
+function mountComposable (options?: Parameters<typeof useSimulatorControl>[1]) {
+ return withSetup(() => useSimulatorControl(mockLayoutData, options))
+}
+
+describe('useSimulatorControl', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ chargingStations = ref([])
+ configuration = ref({
+ uiServer: [createUIServerConfig({ port: 8080 }), createUIServerConfig({ port: 9090 })],
+ } as unknown as ConfigurationData)
+ vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as ReturnType<typeof useUIClient>)
+ vi.mocked(useChargingStations).mockReturnValue(
+ chargingStations as ReturnType<typeof useChargingStations>
+ )
+ vi.mocked(useConfiguration).mockReturnValue(configuration)
+ mockGetSimulatorState.mockClear()
+ mockRegisterWSEventListeners.mockClear()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should start the simulator and refresh state on success', async () => {
+ // Arrange
+ mockClient.startSimulator.mockResolvedValue({ status: 'success' })
+ const [result] = mountComposable()
+
+ // Act
+ result.startSimulator()
+ await flushPromises()
+
+ // Assert
+ expect(mockClient.startSimulator).toHaveBeenCalledTimes(1)
+ expect(mockGetSimulatorState).toHaveBeenCalled()
+ })
+
+ it('should stop the simulator and clear charging stations on success', async () => {
+ // Arrange
+ mockClient.stopSimulator.mockResolvedValue({ status: 'success' })
+ chargingStations.value = [{ id: 'cs-1' }, { id: 'cs-2' }]
+ const [result] = mountComposable()
+
+ // Act
+ result.stopSimulator()
+ await flushPromises()
+
+ // Assert
+ expect(mockClient.stopSimulator).toHaveBeenCalledTimes(1)
+ expect(chargingStations.value).toHaveLength(0)
+ expect(mockGetSimulatorState).toHaveBeenCalled()
+ })
+
+ it('should show error toast when start simulator fails', async () => {
+ mockClient.startSimulator.mockRejectedValue(new Error('connection refused'))
+ const [result] = mountComposable()
+ result.startSimulator()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error at starting simulator')
+ })
+
+ it('should show error toast when stopSimulator fails', async () => {
+ mockClient.stopSimulator.mockRejectedValueOnce(new Error('stop failed'))
+ const [result] = mountComposable()
+ result.stopSimulator()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error at stopping simulator')
+ })
+
+ it('should handle server switch with new index', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+
+ // Act
+ result.handleUIServerChange(1)
+
+ // Assert
+ expect(mockClient.setConfiguration).toHaveBeenCalledWith(createUIServerConfig({ port: 9090 }))
+ expect(mockRegisterWSEventListeners).toHaveBeenCalled()
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function), {
+ once: true,
+ })
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('error', expect.any(Function), {
+ once: true,
+ })
+ })
+
+ it('should expose simulatorPending as reactive ref', () => {
+ const [result] = mountComposable()
+ expect(result.simulatorPending.value).toBe(false)
+ })
+
+ it('should expose serverSwitchPending as reactive ref', () => {
+ const [result] = mountComposable()
+ expect(result.serverSwitchPending.value).toBe(false)
+ })
+
+ it('should not start simulator when already pending', () => {
+ mockClient.startSimulator.mockReturnValue(new Promise(() => undefined))
+ const [result] = mountComposable()
+ result.startSimulator()
+ result.startSimulator()
+ expect(mockClient.startSimulator).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not stop simulator when already pending', () => {
+ mockClient.stopSimulator.mockReturnValue(new Promise(() => undefined))
+ const [result] = mountComposable()
+ result.stopSimulator()
+ result.stopSimulator()
+ expect(mockClient.stopSimulator).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not switch server when index is the same as current', () => {
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(1))
+ const [result] = mountComposable()
+ result.handleUIServerChange(1)
+ expect(mockClient.setConfiguration).not.toHaveBeenCalled()
+ })
+
+ it('should not switch server when newIndex is out of bounds (negative)', () => {
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+ result.handleUIServerChange(-1)
+ expect(mockClient.setConfiguration).not.toHaveBeenCalled()
+ expect(result.serverSwitchPending.value).toBe(false)
+ })
+
+ it('should not switch server when newIndex is out of bounds (too large)', () => {
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+ result.handleUIServerChange(5)
+ expect(mockClient.setConfiguration).not.toHaveBeenCalled()
+ expect(result.serverSwitchPending.value).toBe(false)
+ })
+
+ it('should call onSimulatorStopped callback on successful stop', async () => {
+ // Arrange
+ mockClient.stopSimulator.mockResolvedValue({ status: 'success' })
+ const onSimulatorStopped = vi.fn()
+ const [result] = mountComposable({ onSimulatorStopped })
+
+ // Act
+ result.stopSimulator()
+ await flushPromises()
+
+ // Assert
+ expect(onSimulatorStopped).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call onServerSwitched callback when server open event fires', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const onServerSwitched = vi.fn()
+ const [result] = mountComposable({ onServerSwitched })
+
+ // Act
+ result.handleUIServerChange(1)
+
+ const openCall = vi
+ .mocked(mockClient.registerWSEventListener)
+ .mock.calls.find(([event]) => event === 'open')
+ const openHandler = openCall?.[1] as () => void
+ openHandler()
+
+ // Assert
+ expect(onServerSwitched).toHaveBeenCalledTimes(1)
+ expect(result.serverSwitchPending.value).toBe(false)
+ })
+
+ it('should rollback configuration on server switch error', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+
+ // Act
+ result.handleUIServerChange(1)
+
+ const errorCall = vi
+ .mocked(mockClient.registerWSEventListener)
+ .mock.calls.find(([event]) => event === 'error')
+ const errorHandler = errorCall?.[1] as () => void
+ errorHandler()
+
+ // Assert
+ expect(result.serverSwitchPending.value).toBe(false)
+ expect(mockClient.setConfiguration).toHaveBeenCalledTimes(2)
+ expect(mockClient.setConfiguration).toHaveBeenLastCalledWith(
+ createUIServerConfig({ port: 8080 })
+ )
+ })
+
+ it('should clean up pending WS handlers on scope dispose mid-switch', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result, app] = mountComposable()
+
+ // Act
+ result.handleUIServerChange(1)
+
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function), {
+ once: true,
+ })
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('error', expect.any(Function), {
+ once: true,
+ })
+
+ app.unmount()
+
+ // Assert
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalledWith('error', expect.any(Function))
+ })
+
+ it('should ignore error handler when open already settled the switch', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+ result.handleUIServerChange(1)
+
+ const calls = vi.mocked(mockClient.registerWSEventListener).mock.calls
+ const openHandler = calls.find(([event]) => event === 'open')?.[1] as () => void
+ const errorHandler = calls.find(([event]) => event === 'error')?.[1] as () => void
+
+ // Act
+ openHandler()
+ expect(result.serverSwitchPending.value).toBe(false)
+
+ errorHandler()
+
+ // Assert
+ expect(mockClient.setConfiguration).toHaveBeenCalledTimes(1)
+ })
+
+ it('should ignore open handler when error already settled the switch', () => {
+ // Arrange
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, JSON.stringify(0))
+ const [result] = mountComposable()
+ result.handleUIServerChange(1)
+
+ const calls = vi.mocked(mockClient.registerWSEventListener).mock.calls
+ const openHandler = calls.find(([event]) => event === 'open')?.[1] as () => void
+ const errorHandler = calls.find(([event]) => event === 'error')?.[1] as () => void
+
+ // Act
+ errorHandler()
+ expect(result.serverSwitchPending.value).toBe(false)
+
+ openHandler()
+
+ // Assert
+ expect(mockClient.setConfiguration).toHaveBeenCalledTimes(2)
+ })
+
+ describe('server switch timeout', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should rollback via timeout when neither open nor error fires', () => {
+ // Arrange
+ const [result] = mountComposable()
+
+ // Act
+ result.handleUIServerChange(1)
+ expect(result.serverSwitchPending.value).toBe(true)
+
+ vi.advanceTimersByTime(15_000)
+
+ // Assert
+ expect(result.serverSwitchPending.value).toBe(false)
+ expect(mockClient.setConfiguration).toHaveBeenCalledTimes(2)
+ expect(mockClient.setConfiguration).toHaveBeenLastCalledWith(
+ createUIServerConfig({ port: 8080 })
+ )
+ })
+
+ it('should not rollback via timeout when open fires before timeout', () => {
+ // Arrange
+ const [result] = mountComposable()
+
+ // Act
+ result.handleUIServerChange(1)
+
+ const openCall = vi
+ .mocked(mockClient.registerWSEventListener)
+ .mock.calls.find(([event]) => event === 'open')
+ const openHandler = openCall?.[1] as () => void
+ openHandler()
+
+ expect(result.serverSwitchPending.value).toBe(false)
+
+ vi.advanceTimersByTime(15_000)
+
+ // Assert
+ expect(result.serverSwitchPending.value).toBe(false)
+ expect(mockClient.setConfiguration).toHaveBeenCalledTimes(1)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useSkin composable
+ * @description Tests for the useSkin shared composable.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSkin } from '@/shared/composables/useSkin.js'
+import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+
+vi.mock('@/skins/registry.js', () => ({
+ DEFAULT_SKIN: 'classic',
+ skins: [
+ {
+ description: 'Table-based layout with a sticky sidebar action panel.',
+ id: 'classic',
+ label: 'Classic',
+ loadStyles: vi.fn().mockResolvedValue(undefined),
+ },
+ {
+ description: 'Responsive card grid with modal dialogs.',
+ id: 'modern',
+ label: 'Modern',
+ loadStyles: vi.fn().mockResolvedValue(undefined),
+ },
+ ],
+}))
+
+describe('useSkin', () => {
+ beforeEach(async () => {
+ // Reset module-level singleton state to default
+ const { activeSkinId, switchSkin } = useSkin()
+ if (activeSkinId.value !== 'classic') {
+ await switchSkin('classic')
+ }
+ localStorage.clear()
+ })
+
+ afterEach(() => {
+ document.documentElement.removeAttribute('data-skin')
+ document.documentElement.removeAttribute('data-theme')
+ })
+
+ it('should return activeSkinId defaulting to DEFAULT_SKIN', () => {
+ const { activeSkinId } = useSkin()
+ expect(activeSkinId.value).toBe(DEFAULT_SKIN)
+ })
+
+ it('should return availableSkins array with 2 entries', () => {
+ const { availableSkins: skinsList } = useSkin()
+ expect(skinsList.length).toBe(2)
+ expect(skinsList.map(s => s.id)).toEqual(['classic', 'modern'])
+ })
+
+ it('should return switchSkin function', () => {
+ const { switchSkin } = useSkin()
+ expect(typeof switchSkin).toBe('function')
+ })
+
+ it('should not update activeSkinId when loadStyles rejects', async () => {
+ const modernSkin = skins.find(s => s.id === 'modern')
+ expect(modernSkin).toBeDefined()
+ if (modernSkin == null) return
+ vi.mocked(modernSkin.loadStyles).mockRejectedValueOnce(new Error('CSS not found'))
+ const { activeSkinId, switchSkin } = useSkin()
+ const result = await switchSkin('modern')
+ expect(result).toBe(false)
+ expect(activeSkinId.value).toBe('classic')
+ expect(localStorage.getItem('ecs-ui-skin')).toBeNull()
+ })
+
+ it('should populate lastError on skin load failure', async () => {
+ const modernSkin = skins.find(s => s.id === 'modern')
+ expect(modernSkin).toBeDefined()
+ if (modernSkin == null) return
+ vi.mocked(modernSkin.loadStyles).mockRejectedValueOnce(new Error('Network error'))
+ const { lastError, switchSkin } = useSkin()
+ await switchSkin('modern')
+ expect(lastError.value).toBe('Network error')
+ })
+
+ it('should set isSwitching to true during async load', async () => {
+ const modernSkin = skins.find(s => s.id === 'modern')
+ expect(modernSkin).toBeDefined()
+ if (modernSkin == null) return
+ vi.mocked(modernSkin.loadStyles).mockClear()
+ let rejectLoad!: (err: Error) => void
+ vi.mocked(modernSkin.loadStyles).mockImplementationOnce(
+ () =>
+ new Promise<void>((_resolve, reject) => {
+ rejectLoad = reject
+ })
+ )
+ const { isSwitching, switchSkin } = useSkin()
+ const promise = switchSkin('modern')
+ expect(isSwitching.value).toBe(true)
+ rejectLoad(new Error('test cleanup'))
+ await promise
+ expect(isSwitching.value).toBe(false)
+ })
+
+ it('should guard against concurrent switchSkin calls', async () => {
+ const { activeSkinId, switchSkin } = useSkin()
+ const modernSkin = skins.find(s => s.id === 'modern')
+ expect(modernSkin).toBeDefined()
+ if (modernSkin == null) return
+ vi.mocked(modernSkin.loadStyles).mockClear()
+ let resolveLoad!: () => void
+ vi.mocked(modernSkin.loadStyles).mockImplementationOnce(
+ () =>
+ new Promise<void>(resolve => {
+ resolveLoad = resolve
+ })
+ )
+ const first = switchSkin('modern')
+ const second = switchSkin('modern')
+ expect(activeSkinId.value).toBe('classic')
+ resolveLoad()
+ await first
+ await second
+ expect(activeSkinId.value).toBe('modern')
+ expect(modernSkin.loadStyles).toHaveBeenCalledTimes(1)
+ })
+
+ it('should skip loadStyles when the skin is already active', async () => {
+ const classicSkin = skins.find(s => s.id === 'classic')
+ expect(classicSkin).toBeDefined()
+ if (classicSkin == null) return
+ vi.mocked(classicSkin.loadStyles).mockClear()
+ const { activeSkinId, switchSkin } = useSkin()
+ await switchSkin('classic')
+ expect(classicSkin.loadStyles).not.toHaveBeenCalled()
+ expect(activeSkinId.value).toBe('classic')
+ })
+
+ it('should update activeSkinId on successful skin switch', async () => {
+ const { activeSkinId, switchSkin } = useSkin()
+ await switchSkin('modern')
+ expect(activeSkinId.value).toBe('modern')
+ })
+
+ it('should persist the active skin to localStorage', async () => {
+ const { switchSkin } = useSkin()
+ await switchSkin('modern')
+ expect(localStorage.getItem('ecs-ui-skin')).toBe('"modern"')
+ })
+
+ it('should ignore invalid skin id', async () => {
+ const { activeSkinId, switchSkin } = useSkin()
+ const before = activeSkinId.value
+ await switchSkin('nonexistent')
+ expect(activeSkinId.value).toBe(before)
+ expect(localStorage.getItem('ecs-ui-skin')).toBeNull()
+ })
+
+ it('should return true without reload when switching to already-active skin', async () => {
+ const { activeSkinId, switchSkin } = useSkin()
+ const before = activeSkinId.value
+ const result = await switchSkin(before)
+ expect(result).toBe(true)
+ expect(activeSkinId.value).toBe(before)
+ expect(localStorage.getItem('ecs-ui-skin')).toBeNull()
+ })
+
+ it('should return the singleton activeSkinId regardless of later localStorage writes', () => {
+ localStorage.setItem('ecs-ui-skin', '"modern"')
+ const { activeSkinId } = useSkin()
+ expect(activeSkinId.value).toBe('classic')
+ })
+
+ it('should set data-skin attribute on document element after switch', async () => {
+ const { switchSkin } = useSkin()
+ await switchSkin('modern')
+ expect(document.documentElement.getAttribute('data-skin')).toBe('modern')
+ })
+
+ it('should handle corrupted localStorage value gracefully', () => {
+ // Manually set a non-JSON value
+ localStorage.setItem('ecs-ui-skin', 'not-valid-json{')
+ // Re-call useSkin — the singleton already initialized, so this tests
+ // the getFromLocalStorage fallback path
+ const { activeSkinId } = useSkin()
+ expect(activeSkinId.value).toBe('classic')
+ })
+
+ it('should remove skin-error-reload-count from sessionStorage on successful switch', async () => {
+ sessionStorage.setItem('skin-error-reload-count', '2')
+ const { switchSkin } = useSkin()
+ await switchSkin('modern')
+ expect(sessionStorage.getItem('skin-error-reload-count')).toBeNull()
+ })
+
+ it('should remove skin-error-reload-count from sessionStorage when switching to already-active skin', async () => {
+ sessionStorage.setItem('skin-error-reload-count', '1')
+ const { activeSkinId, switchSkin } = useSkin()
+ await switchSkin(activeSkinId.value)
+ expect(sessionStorage.getItem('skin-error-reload-count')).toBeNull()
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useStartTxForm composable
+ * @description Tests for the useStartTxForm shared composable.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { toastMock } from '../../../setup.js'
+
+const mockAuthorize = vi.fn().mockResolvedValue({ status: 'success' })
+const mockStartTransaction = vi.fn().mockResolvedValue({ status: 'success' })
+
+vi.mock('@/composables/Utils.js', () => ({
+ useUIClient: () => ({
+ authorize: mockAuthorize,
+ startTransaction: mockStartTransaction,
+ }),
+}))
+
+vi.mock('ui-common', () => ({
+ convertToInt: (v: string) => Number.parseInt(v, 10),
+ OCPPVersion: { VERSION_16: '1.6', VERSION_20: '2.0', VERSION_201: '2.0.1' },
+}))
+
+import { OCPPVersion } from 'ui-common'
+
+import { useStartTxForm } from '@/shared/composables/useStartTxForm.js'
+
+describe('useStartTxForm', () => {
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should initialize with default state', () => {
+ const { formState } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ expect(formState.value.idTag).toBe('')
+ expect(formState.value.authorizeIdTag).toBe(true)
+ })
+
+ it('should reset form to defaults', () => {
+ const { formState, resetForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.idTag = 'TAG001'
+ formState.value.authorizeIdTag = false
+ resetForm()
+ expect(formState.value.idTag).toBe('')
+ expect(formState.value.authorizeIdTag).toBe(true)
+ })
+
+ it('should call startTransaction with correct params on submit', async () => {
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '2',
+ evseId: 1,
+ hashId: 'hash1',
+ ocppVersion: OCPPVersion.VERSION_16,
+ })
+ formState.value.idTag = 'TAG001'
+ await submitForm()
+ expect(mockStartTransaction).toHaveBeenCalledWith('hash1', {
+ connectorId: 2,
+ evseId: 1,
+ idTag: 'TAG001',
+ ocppVersion: OCPPVersion.VERSION_16,
+ })
+ expect(toastMock.success).toHaveBeenCalledWith('Transaction successfully started')
+ })
+
+ it('should pass undefined idTag when empty on submit', async () => {
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.authorizeIdTag = false
+ await submitForm()
+ expect(mockStartTransaction).toHaveBeenCalledWith('hash1', {
+ connectorId: 1,
+ evseId: undefined,
+ idTag: undefined,
+ ocppVersion: undefined,
+ })
+ })
+
+ it('should authorize first when authorizeIdTag is true', async () => {
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.authorizeIdTag = true
+ formState.value.idTag = 'TAG001'
+ await submitForm()
+ expect(mockAuthorize).toHaveBeenCalledWith('hash1', 'TAG001')
+ expect(mockStartTransaction).toHaveBeenCalled()
+ })
+
+ it('should show error when authorizeIdTag is true but idTag is empty', async () => {
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.authorizeIdTag = true
+ formState.value.idTag = ''
+ await submitForm()
+ expect(toastMock.error).toHaveBeenCalledWith('Please provide an RFID tag to authorize')
+ expect(mockStartTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should handle authorize failure', async () => {
+ mockAuthorize.mockRejectedValueOnce(new Error('auth failed'))
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.authorizeIdTag = true
+ formState.value.idTag = 'TAG001'
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(toastMock.error).toHaveBeenCalledWith('Error at authorizing RFID tag')
+ expect(mockStartTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should handle startTransaction failure', async () => {
+ mockStartTransaction.mockRejectedValueOnce(new Error('tx failed'))
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.idTag = 'TAG001'
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(toastMock.error).toHaveBeenCalledWith('Error at starting transaction')
+ })
+
+ it('should call onCleanup on authorize failure', async () => {
+ mockAuthorize.mockRejectedValueOnce(new Error('auth failed'))
+ const onCleanup = vi.fn()
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '1',
+ hashId: 'hash1',
+ options: { onCleanup },
+ })
+ formState.value.authorizeIdTag = true
+ formState.value.idTag = 'TAG001'
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(onCleanup).toHaveBeenCalledOnce()
+ })
+
+ it('should call onCleanup in finally block on successful transaction', async () => {
+ const onCleanup = vi.fn()
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '1',
+ hashId: 'hash1',
+ options: { onCleanup },
+ })
+ formState.value.authorizeIdTag = false
+ await submitForm()
+ expect(onCleanup).toHaveBeenCalledOnce()
+ })
+
+ it('should call onCleanup in finally block on transaction failure', async () => {
+ mockStartTransaction.mockRejectedValueOnce(new Error('tx failed'))
+ const onCleanup = vi.fn()
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '1',
+ hashId: 'hash1',
+ options: { onCleanup },
+ })
+ formState.value.authorizeIdTag = false
+ const result = await submitForm()
+ expect(result).toBe(false)
+ expect(onCleanup).toHaveBeenCalledOnce()
+ })
+
+ it('should work without onCleanup option', async () => {
+ const { formState, submitForm } = useStartTxForm({ connectorId: '1', hashId: 'hash1' })
+ formState.value.authorizeIdTag = false
+ const result = await submitForm()
+ expect(result).toBe(true)
+ })
+
+ it('should call onError with step "authorize" on authorize failure', async () => {
+ mockAuthorize.mockRejectedValueOnce(new Error('auth failed'))
+ const onError = vi.fn()
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '1',
+ hashId: 'hash1',
+ options: { onError },
+ })
+ formState.value.authorizeIdTag = true
+ formState.value.idTag = 'TAG001'
+ await submitForm()
+ expect(onError).toHaveBeenCalledWith(expect.any(Error), 'authorize')
+ })
+
+ it('should call onError with step "startTransaction" on startTransaction failure', async () => {
+ mockStartTransaction.mockRejectedValueOnce(new Error('tx failed'))
+ const onError = vi.fn()
+ const { formState, submitForm } = useStartTxForm({
+ connectorId: '1',
+ hashId: 'hash1',
+ options: { onError },
+ })
+ formState.value.authorizeIdTag = false
+ formState.value.idTag = 'TAG001'
+ await submitForm()
+ expect(onError).toHaveBeenCalledWith(expect.any(Error), 'startTransaction')
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useStationActions composable
+ * @description Verifies station-level actions (start/stop, connect/disconnect, delete) with pending
+ * state management, success/error toasts, and callback invocation.
+ */
+import { flushPromises } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { toastMock } from '../../../setup.js'
+import { createMockUIClient, type MockUIClient, withSetup } from '../../helpers.js'
+
+let mockUIClient: MockUIClient
+
+vi.mock('@/composables/Utils.js', () => ({
+ useUIClient: () => mockUIClient,
+}))
+
+import { useStationActions } from '@/shared/composables/useStationActions.js'
+
+describe('useStationActions', () => {
+ beforeEach(() => {
+ mockUIClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('startStation', () => {
+ it('should call startChargingStation with hashId', async () => {
+ const [{ startStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ await flushPromises()
+ expect(mockUIClient.startChargingStation).toHaveBeenCalledWith('hash-1')
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ startStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Charging station started')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockUIClient.startChargingStation.mockRejectedValueOnce(new Error('fail'))
+ const [{ startStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error starting charging station')
+ })
+
+ it('should call onRefresh after success', async () => {
+ const onRefresh = vi.fn()
+ const [{ startStation }] = withSetup(() => useStationActions({ onRefresh }))
+ startStation('hash-1')
+ await flushPromises()
+ expect(onRefresh).toHaveBeenCalledOnce()
+ })
+ })
+
+ describe('stopStation', () => {
+ it('should call stopChargingStation with hashId', async () => {
+ const [{ stopStation }] = withSetup(() => useStationActions())
+ stopStation('hash-2')
+ await flushPromises()
+ expect(mockUIClient.stopChargingStation).toHaveBeenCalledWith('hash-2')
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ stopStation }] = withSetup(() => useStationActions())
+ stopStation('hash-2')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Charging station stopped')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockUIClient.stopChargingStation.mockRejectedValueOnce(new Error('fail'))
+ const [{ stopStation }] = withSetup(() => useStationActions())
+ stopStation('hash-2')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error stopping charging station')
+ })
+ })
+
+ describe('openConnection', () => {
+ it('should call openConnection with hashId', async () => {
+ const [{ openConnection }] = withSetup(() => useStationActions())
+ openConnection('hash-3')
+ await flushPromises()
+ expect(mockUIClient.openConnection).toHaveBeenCalledWith('hash-3')
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ openConnection }] = withSetup(() => useStationActions())
+ openConnection('hash-3')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Connection opened')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockUIClient.openConnection.mockRejectedValueOnce(new Error('fail'))
+ const [{ openConnection }] = withSetup(() => useStationActions())
+ openConnection('hash-3')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error opening connection')
+ })
+ })
+
+ describe('closeConnection', () => {
+ it('should call closeConnection with hashId', async () => {
+ const [{ closeConnection }] = withSetup(() => useStationActions())
+ closeConnection('hash-4')
+ await flushPromises()
+ expect(mockUIClient.closeConnection).toHaveBeenCalledWith('hash-4')
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ closeConnection }] = withSetup(() => useStationActions())
+ closeConnection('hash-4')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Connection closed')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockUIClient.closeConnection.mockRejectedValueOnce(new Error('fail'))
+ const [{ closeConnection }] = withSetup(() => useStationActions())
+ closeConnection('hash-4')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error closing connection')
+ })
+ })
+
+ describe('deleteStation', () => {
+ it('should call deleteChargingStation with hashId', async () => {
+ const [{ deleteStation }] = withSetup(() => useStationActions())
+ deleteStation('hash-5')
+ await flushPromises()
+ expect(mockUIClient.deleteChargingStation).toHaveBeenCalledWith('hash-5')
+ })
+
+ it('should show success toast on success', async () => {
+ const [{ deleteStation }] = withSetup(() => useStationActions())
+ deleteStation('hash-5')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Charging station deleted')
+ })
+
+ it('should show error toast on failure', async () => {
+ mockUIClient.deleteChargingStation.mockRejectedValueOnce(new Error('fail'))
+ const [{ deleteStation }] = withSetup(() => useStationActions())
+ deleteStation('hash-5')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error deleting charging station')
+ })
+
+ it('should call onSuccess callback on success', async () => {
+ const onSuccess = vi.fn()
+ const [{ deleteStation }] = withSetup(() => useStationActions())
+ deleteStation('hash-5', onSuccess)
+ await flushPromises()
+ expect(onSuccess).toHaveBeenCalledOnce()
+ })
+
+ it('should call onSuccess before onRefresh', async () => {
+ const calls: string[] = []
+ const onRefresh = vi.fn(() => calls.push('refresh'))
+ const onSuccess = vi.fn(() => calls.push('success'))
+ const [{ deleteStation }] = withSetup(() => useStationActions({ onRefresh }))
+ deleteStation('hash-5', onSuccess)
+ await flushPromises()
+ expect(calls).toEqual(['success', 'refresh'])
+ })
+ })
+
+ describe('pending state', () => {
+ it('should initialize all pending keys to false', () => {
+ const [{ pending }] = withSetup(() => useStationActions())
+ expect(pending.startStop).toBe(false)
+ expect(pending.connection).toBe(false)
+ expect(pending.delete).toBe(false)
+ })
+
+ it('should set pending.startStop to true while action is in progress', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockUIClient.startChargingStation.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ pending, startStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ expect(pending.startStop).toBe(true)
+ resolveAction(undefined)
+ await flushPromises()
+ expect(pending.startStop).toBe(false)
+ })
+
+ it('should prevent concurrent startStop actions', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockUIClient.startChargingStation.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ startStation, stopStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ stopStation('hash-2')
+ resolveAction(undefined)
+ await flushPromises()
+ expect(mockUIClient.startChargingStation).toHaveBeenCalledOnce()
+ expect(mockUIClient.stopChargingStation).not.toHaveBeenCalled()
+ expect(toastMock.success).toHaveBeenCalledTimes(1)
+ expect(toastMock.success).toHaveBeenCalledWith('Charging station started')
+ })
+
+ it('should prevent concurrent connection actions', async () => {
+ let resolveAction!: (value: unknown) => void
+ mockUIClient.openConnection.mockReturnValueOnce(
+ new Promise(resolve => {
+ resolveAction = resolve
+ })
+ )
+ const [{ closeConnection, openConnection }] = withSetup(() => useStationActions())
+ openConnection('hash-1')
+ closeConnection('hash-2')
+ resolveAction(undefined)
+ await flushPromises()
+ expect(mockUIClient.openConnection).toHaveBeenCalledOnce()
+ expect(mockUIClient.closeConnection).not.toHaveBeenCalled()
+ })
+
+ it('should allow parallel actions on different keys', async () => {
+ const [{ deleteStation, startStation }] = withSetup(() => useStationActions())
+ startStation('hash-1')
+ deleteStation('hash-2')
+ await flushPromises()
+ expect(mockUIClient.startChargingStation).toHaveBeenCalledWith('hash-1')
+ expect(mockUIClient.deleteChargingStation).toHaveBeenCalledWith('hash-2')
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for useTheme composable
+ * @description Tests for the useTheme shared composable.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { useTheme } from '@/shared/composables/useTheme.js'
+
+describe('useTheme', () => {
+ beforeEach(() => {
+ localStorage.clear()
+ document.documentElement.removeAttribute('data-theme')
+ document.documentElement.style.colorScheme = ''
+ const { switchTheme } = useTheme()
+ switchTheme('tokyo-night-storm')
+ })
+
+ it('should return activeThemeId ref', () => {
+ const { activeThemeId } = useTheme()
+ expect(activeThemeId.value).toBe('tokyo-night-storm')
+ })
+
+ it('should return availableThemes with 3 entries', () => {
+ const { availableThemes } = useTheme()
+ expect(availableThemes.length).toBe(3)
+ expect(availableThemes).toContain('tokyo-night-storm')
+ expect(availableThemes).toContain('catppuccin-latte')
+ expect(availableThemes).toContain('sap-horizon')
+ })
+
+ it('should return switchTheme function', () => {
+ const { switchTheme } = useTheme()
+ expect(typeof switchTheme).toBe('function')
+ expect(switchTheme.length).toBe(1)
+ })
+
+ it('should update document data-theme attribute', () => {
+ const { switchTheme } = useTheme()
+ switchTheme('catppuccin-latte')
+ expect(document.documentElement.getAttribute('data-theme')).toBe('catppuccin-latte')
+ })
+
+ it('should persist the active theme to localStorage', () => {
+ const { switchTheme } = useTheme()
+ switchTheme('sap-horizon')
+ expect(localStorage.getItem('ecs-ui-theme')).toBe('"sap-horizon"')
+ })
+
+ it('should update activeThemeId ref', () => {
+ const { activeThemeId, switchTheme } = useTheme()
+ switchTheme('catppuccin-latte')
+ expect(activeThemeId.value).toBe('catppuccin-latte')
+ })
+
+ it('should not set colorScheme inline style (CSS handles it)', () => {
+ const { switchTheme } = useTheme()
+ switchTheme('tokyo-night-storm')
+ expect(document.documentElement.style.colorScheme).toBe('')
+ switchTheme('catppuccin-latte')
+ expect(document.documentElement.style.colorScheme).toBe('')
+ switchTheme('sap-horizon')
+ expect(document.documentElement.style.colorScheme).toBe('')
+ })
+
+ it('should ignore invalid theme name', () => {
+ const { activeThemeId, switchTheme } = useTheme()
+ const before = activeThemeId.value
+ const switchThemeUntyped = switchTheme as (name: string) => void
+ switchThemeUntyped('nonexistent')
+ expect(activeThemeId.value).toBe(before)
+ })
+
+ it('should fall back to default for invalid localStorage theme value', () => {
+ localStorage.setItem('ecs-ui-theme', '"invalid-theme-name"')
+ const { activeThemeId, availableThemes } = useTheme()
+ expect(availableThemes).toContain(activeThemeId.value)
+ })
+
+ describe('SSR environment', () => {
+ const originalDocument = globalThis.document
+
+ afterEach(() => {
+ globalThis.document = originalDocument
+ })
+
+ it('should not throw when document is undefined', () => {
+ // @ts-expect-error simulating SSR environment
+ globalThis.document = undefined
+ const { switchTheme } = useTheme()
+ expect(() => {
+ switchTheme('catppuccin-latte')
+ }).not.toThrow()
+ globalThis.document = originalDocument
+ const { activeThemeId } = useTheme()
+ expect(activeThemeId.value).toBe('catppuccin-latte')
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for TOKEN_CONTRACT theme compliance
+ * @description Ensures every theme CSS file defines all CSS custom properties declared in TOKEN_CONTRACT.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { TOKEN_CONTRACT } from '@/shared/tokens/contract.js'
+
+const themesDir = resolve(__dirname, '../../../../src/assets/themes')
+const themeFiles = ['tokyo-night-storm.css', 'catppuccin-latte.css', 'sap-horizon.css']
+const baseCss = readFileSync(resolve(themesDir, 'base.css'), 'utf-8')
+
+describe('TOKEN_CONTRACT', () => {
+ it.each(themeFiles)('should define all contract tokens in %s', themeFile => {
+ const css = readFileSync(resolve(themesDir, themeFile), 'utf-8') + '\n' + baseCss
+ for (const token of TOKEN_CONTRACT) {
+ const prop = `--${token}`
+ const propRegex = new RegExp(`^\\s*${prop.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*:`, 'm')
+ expect(css, `Missing ${prop} in ${themeFile} or base.css`).toMatch(propRegex)
+ }
+ })
+})
--- /dev/null
+/**
+ * @file Tests for classic action components
+ * @description Unit tests for classic skin action components: AddChargingStations, SetSupervisionUrl, StartTransaction.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref, shallowRef } from 'vue'
+
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/composables'
+import AddChargingStations from '@/skins/classic/components/actions/AddChargingStations.vue'
+import SetSupervisionUrl from '@/skins/classic/components/actions/SetSupervisionUrl.vue'
+import StartTransaction from '@/skins/classic/components/actions/StartTransaction.vue'
+
+import { toastMock } from '../../../setup.js'
+import { createUIServerConfig, TEST_HASH_ID, TEST_STATION_ID } from '../../constants.js'
+import { ButtonStub, createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+const mockPush = vi.fn()
+const mockRoute = ref<{
+ name: string
+ params: Record<string, string>
+ query: Record<string, string>
+}>({
+ name: 'start-transaction',
+ params: { chargingStationId: TEST_STATION_ID, connectorId: '1', hashId: TEST_HASH_ID },
+ query: { evseId: '1', ocppVersion: '1.6' },
+})
+
+vi.mock('vue-router', () => ({
+ useRoute: () => mockRoute.value,
+ useRouter: () => ({
+ push: mockPush,
+ }),
+}))
+
+let mockClient: MockUIClient
+
+/** @returns Provide object for component mounting */
+function createProvide () {
+ return {
+ [chargingStationsKey as symbol]: shallowRef([]),
+ [configurationKey as symbol]: shallowRef({ uiServer: [createUIServerConfig()] }),
+ [templatesKey as symbol]: shallowRef(['template-a.json', 'template-b.json']),
+ [uiClientKey as symbol]: mockClient,
+ }
+}
+
+describe('Actions', () => {
+ describe('AddChargingStations', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ mockPush.mockClear()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ vi.restoreAllMocks()
+ })
+
+ /** @returns Mounted AddChargingStations wrapper */
+ function mountAdd () {
+ return mount(AddChargingStations, {
+ global: {
+ provide: createProvide(),
+ stubs: {
+ Button: ButtonStub,
+ },
+ },
+ })
+ }
+
+ it('should render the heading', () => {
+ const wrapper = mountAdd()
+ expect(wrapper.find('h1').text()).toBe('Add Charging Stations')
+ })
+
+ it('should render template select with options', () => {
+ const wrapper = mountAdd()
+ const options = wrapper.findAll('option')
+ expect(options.length).toBeGreaterThanOrEqual(3)
+ expect(options[1].text()).toBe('template-a.json')
+ expect(options[2].text()).toBe('template-b.json')
+ })
+
+ it('should render number of stations input', () => {
+ const wrapper = mountAdd()
+ const input = wrapper.find('input[name="number-of-stations"]')
+ expect(input.exists()).toBe(true)
+ })
+
+ it('should render template options fields', () => {
+ const wrapper = mountAdd()
+ expect(wrapper.find('input[name="base-name"]').exists()).toBe(true)
+ expect(wrapper.find('input[name="supervision-url"]').exists()).toBe(true)
+ expect(wrapper.find('input[name="supervision-user"]').exists()).toBe(true)
+ expect(wrapper.find('input[name="supervision-password"]').exists()).toBe(true)
+ })
+
+ it('should call addChargingStations on submit', async () => {
+ const wrapper = mountAdd()
+ const select = wrapper.find('select')
+ await select.setValue('template-a.json')
+ const numInput = wrapper.find('input[name="number-of-stations"]')
+ await numInput.setValue(2)
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.addChargingStations).toHaveBeenCalledWith(
+ 'template-a.json',
+ 2,
+ expect.objectContaining({
+ autoStart: false,
+ ocppStrictCompliance: true,
+ persistentConfiguration: true,
+ })
+ )
+ })
+
+ it('should navigate to charging-stations after submit', async () => {
+ const wrapper = mountAdd()
+ const select = wrapper.find('select')
+ await select.setValue('template-a.json')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+ })
+
+ it('should toast success on successful add', async () => {
+ const wrapper = mountAdd()
+ const select = wrapper.find('select')
+ await select.setValue('template-b.json')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Charging stations successfully added')
+ })
+
+ it('should toast error on failed add', async () => {
+ mockClient.addChargingStations = vi.fn().mockRejectedValue(new Error('fail'))
+ const wrapper = mountAdd()
+ const select = wrapper.find('select')
+ await select.setValue('template-a.json')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error at adding charging stations')
+ })
+ })
+
+ describe('SetSupervisionUrl', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ mockPush.mockClear()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ vi.restoreAllMocks()
+ })
+
+ /** @returns Mounted SetSupervisionUrl wrapper */
+ function mountSetUrl () {
+ return mount(SetSupervisionUrl, {
+ global: {
+ provide: createProvide(),
+ stubs: {
+ Button: ButtonStub,
+ },
+ },
+ props: {
+ chargingStationId: TEST_STATION_ID,
+ hashId: TEST_HASH_ID,
+ },
+ })
+ }
+
+ it('should render the heading and station id', () => {
+ const wrapper = mountSetUrl()
+ expect(wrapper.find('h1').text()).toBe('Set Supervision Url')
+ expect(wrapper.find('h2').text()).toBe(TEST_STATION_ID)
+ })
+
+ it('should render supervision url input', () => {
+ const wrapper = mountSetUrl()
+ expect(wrapper.find('input[name="supervision-url"]').exists()).toBe(true)
+ })
+
+ it('should render credential inputs', () => {
+ const wrapper = mountSetUrl()
+ expect(wrapper.find('input[name="supervision-user"]').exists()).toBe(true)
+ expect(wrapper.find('input[name="supervision-password"]').exists()).toBe(true)
+ })
+
+ it('should toast error when url is empty on submit', async () => {
+ const wrapper = mountSetUrl()
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Supervision url is required')
+ expect(mockClient.setSupervisionUrl).not.toHaveBeenCalled()
+ })
+
+ it('should call setSupervisionUrl with form values', async () => {
+ const wrapper = mountSetUrl()
+ const urlInput = wrapper.find('input[name="supervision-url"]')
+ await urlInput.setValue('wss://new-server.com:9000')
+ const userInput = wrapper.find('input[name="supervision-user"]')
+ await userInput.setValue('admin')
+ const passInput = wrapper.find('input[name="supervision-password"]')
+ await passInput.setValue('secret')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.setSupervisionUrl).toHaveBeenCalledWith(
+ TEST_HASH_ID,
+ 'wss://new-server.com:9000',
+ 'admin',
+ 'secret'
+ )
+ })
+
+ it('should navigate to charging-stations after successful submit', async () => {
+ const wrapper = mountSetUrl()
+ const urlInput = wrapper.find('input[name="supervision-url"]')
+ await urlInput.setValue('wss://host.com:8080')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+ })
+
+ it('should not navigate when url is empty', async () => {
+ const wrapper = mountSetUrl()
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockPush).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('StartTransaction', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ mockPush.mockClear()
+ mockRoute.value = {
+ name: 'start-transaction',
+ params: { chargingStationId: TEST_STATION_ID, connectorId: '1', hashId: TEST_HASH_ID },
+ query: { evseId: '1', ocppVersion: '1.6' },
+ }
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ vi.restoreAllMocks()
+ })
+
+ /** @returns Mounted StartTransaction wrapper */
+ function mountStartTx () {
+ return mount(StartTransaction, {
+ global: {
+ provide: createProvide(),
+ stubs: {
+ Button: ButtonStub,
+ },
+ },
+ props: {
+ chargingStationId: TEST_STATION_ID,
+ connectorId: '1',
+ hashId: TEST_HASH_ID,
+ },
+ })
+ }
+
+ it('should render the heading and station info', () => {
+ const wrapper = mountStartTx()
+ expect(wrapper.find('h1').text()).toBe('Start Transaction')
+ expect(wrapper.find('h2').text()).toBe(TEST_STATION_ID)
+ })
+
+ it('should render EVSE/Connector info when evseId is present', () => {
+ const wrapper = mountStartTx()
+ expect(wrapper.find('h3').text()).toContain('EVSE 1')
+ expect(wrapper.find('h3').text()).toContain('Connector 1')
+ })
+
+ it('should render only connector info when evseId is absent', () => {
+ mockRoute.value = {
+ name: 'start-transaction',
+ params: { chargingStationId: TEST_STATION_ID, connectorId: '2', hashId: TEST_HASH_ID },
+ query: {},
+ }
+ const wrapper = mount(StartTransaction, {
+ global: {
+ provide: createProvide(),
+ stubs: { Button: ButtonStub },
+ },
+ props: {
+ chargingStationId: TEST_STATION_ID,
+ connectorId: '2',
+ hashId: TEST_HASH_ID,
+ },
+ })
+ expect(wrapper.find('h3').text()).toBe('Connector 2')
+ })
+
+ it('should render RFID tag input', () => {
+ const wrapper = mountStartTx()
+ expect(wrapper.find('input[name="idtag"]').exists()).toBe(true)
+ })
+
+ it('should render authorize checkbox', () => {
+ const wrapper = mountStartTx()
+ const checkbox = wrapper.find('input[type="checkbox"]')
+ expect(checkbox.exists()).toBe(true)
+ })
+
+ it('should toast error when authorizeIdTag is true and idTag is empty', async () => {
+ const wrapper = mountStartTx()
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Please provide an RFID tag to authorize')
+ expect(mockClient.startTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should call authorize then startTransaction on valid submit', async () => {
+ const wrapper = mountStartTx()
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('RFID-001')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.authorize).toHaveBeenCalledWith(TEST_HASH_ID, 'RFID-001')
+ expect(mockClient.startTransaction).toHaveBeenCalledWith(
+ TEST_HASH_ID,
+ expect.objectContaining({
+ connectorId: 1,
+ evseId: 1,
+ idTag: 'RFID-001',
+ ocppVersion: '1.6',
+ })
+ )
+ })
+
+ it('should toast success on successful transaction start', async () => {
+ const wrapper = mountStartTx()
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('TAG-X')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.success).toHaveBeenCalledWith('Transaction successfully started')
+ })
+
+ it('should navigate to charging-stations after submit', async () => {
+ const wrapper = mountStartTx()
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('TAG-Y')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+ })
+
+ it('should skip authorize when checkbox is unchecked', async () => {
+ const wrapper = mountStartTx()
+ const checkbox = wrapper.find('input[type="checkbox"]')
+ await checkbox.setValue(false)
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('TAG-Z')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.authorize).not.toHaveBeenCalled()
+ expect(mockClient.startTransaction).toHaveBeenCalled()
+ })
+
+ it('should toast error when authorize fails', async () => {
+ mockClient.authorize = vi.fn().mockRejectedValue(new Error('auth fail'))
+ const wrapper = mountStartTx()
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('BAD-TAG')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error at authorizing RFID tag')
+ expect(mockClient.startTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should toast error when startTransaction fails', async () => {
+ mockClient.startTransaction = vi.fn().mockRejectedValue(new Error('tx fail'))
+ const wrapper = mountStartTx()
+ const checkbox = wrapper.find('input[type="checkbox"]')
+ await checkbox.setValue(false)
+ const idTagInput = wrapper.find('input[name="idtag"]')
+ await idTagInput.setValue('TAG-ERR')
+ const submitBtn = wrapper.findComponent(ButtonStub)
+ await submitBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith('Error at starting transaction')
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for classic CSConnector component
+ * @description Unit tests for classic skin CSConnector component — connector row rendering and actions.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { type ConnectorStatus, OCPP16ChargePointStatus, OCPPVersion } from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { uiClientKey } from '@/composables'
+import CSConnector from '@/skins/classic/components/charging-stations/CSConnector.vue'
+
+import { toastMock } from '../../../setup.js'
+import { createConnectorStatus, TEST_HASH_ID, TEST_STATION_ID } from '../../constants.js'
+import {
+ ButtonStub,
+ createMockUIClient,
+ type MockUIClient,
+ StateButtonStub,
+ ToggleButtonStub,
+} from '../../helpers.js'
+
+interface StubProps {
+ off?: () => void
+ on?: () => void
+}
+
+const mockPush = vi.fn()
+
+vi.mock('vue-router', () => ({
+ useRoute: () => ({ name: 'charging-stations', params: {}, query: {} }),
+ useRouter: () => ({
+ push: mockPush,
+ }),
+}))
+
+let mockClient: MockUIClient
+
+interface MountOptions {
+ atgStatus?: { start: boolean }
+ connectorId?: number
+ connectorOverrides?: Partial<ConnectorStatus>
+ evseId?: number
+ ocppVersion?: OCPPVersion
+}
+
+/**
+ * @param options - Mount configuration options
+ * @returns Mounted CSConnector wrapper
+ */
+function mountConnector (options: MountOptions = {}) {
+ const {
+ atgStatus,
+ connectorId = 1,
+ connectorOverrides = {},
+ evseId,
+ ocppVersion = OCPPVersion.VERSION_16,
+ } = options
+
+ return mount(CSConnector, {
+ global: {
+ mocks: {
+ $router: { push: mockPush },
+ },
+ provide: {
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ Button: ButtonStub,
+ StateButton: StateButtonStub,
+ ToggleButton: ToggleButtonStub,
+ },
+ },
+ props: {
+ atgStatus,
+ chargingStationId: TEST_STATION_ID,
+ connector: createConnectorStatus(connectorOverrides),
+ connectorId,
+ evseId,
+ hashId: TEST_HASH_ID,
+ ocppVersion,
+ },
+ })
+}
+
+describe('CSConnector', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('should render connector id without evse', () => {
+ const wrapper = mountConnector({ connectorId: 2 })
+ const cells = wrapper.findAll('td')
+ expect(cells[0].text()).toBe('2')
+ })
+
+ it('should render evseId/connectorId when evseId is set', () => {
+ const wrapper = mountConnector({ connectorId: 3, evseId: 1 })
+ const cells = wrapper.findAll('td')
+ expect(cells[0].text()).toBe('1/3')
+ })
+
+ it('should render connector status', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { status: OCPP16ChargePointStatus.CHARGING },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[1].text()).toBe('Charging')
+ })
+
+ it('should render placeholder when status is undefined', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { status: undefined },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[1].text()).toBe('Ø')
+ })
+
+ it('should render "Yes" when locked', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { locked: true },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[2].text()).toBe('Yes')
+ })
+
+ it('should render "No" when not locked', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { locked: false },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[2].text()).toBe('No')
+ })
+
+ it('should render transaction info when transaction is started', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionId: 42, transactionStarted: true },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[3].text()).toBe('Yes (42)')
+ })
+
+ it('should render "No" when no transaction', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionStarted: false },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[3].text()).toBe('No')
+ })
+
+ it('should render ATG started "Yes" when atgStatus.start is true', () => {
+ const wrapper = mountConnector({ atgStatus: { start: true } })
+ const cells = wrapper.findAll('td')
+ expect(cells[4].text()).toBe('Yes')
+ })
+
+ it('should render ATG started "No" when atgStatus is undefined', () => {
+ const wrapper = mountConnector({ atgStatus: undefined })
+ const cells = wrapper.findAll('td')
+ expect(cells[4].text()).toBe('No')
+ })
+ })
+
+ describe('actions', () => {
+ it('should call lockConnector', async () => {
+ const wrapper = mountConnector({ connectorId: 2 })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const lockProps = stateButtons[0].props() as unknown as StubProps
+ lockProps.on?.()
+ await flushPromises()
+ expect(mockClient.lockConnector).toHaveBeenCalled()
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+
+ it('should call unlockConnector', async () => {
+ const wrapper = mountConnector({
+ connectorId: 1,
+ connectorOverrides: { locked: true },
+ })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const unlockProps = stateButtons[0].props() as unknown as StubProps
+ unlockProps.off?.()
+ await flushPromises()
+ expect(mockClient.unlockConnector).toHaveBeenCalled()
+ })
+
+ it('should show Start Transaction toggle when no transaction', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionStarted: false },
+ })
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ expect(toggleButtons.length).toBeGreaterThanOrEqual(1)
+ })
+
+ it('should show Stop Transaction button when transaction started', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionId: 10, transactionStarted: true },
+ })
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ expect(toggleButtons).toHaveLength(0)
+ const buttons = wrapper.findAllComponents(ButtonStub)
+ expect(buttons.length).toBeGreaterThanOrEqual(1)
+ })
+
+ it('should call stopTransaction with transactionId', async () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionId: 55, transactionStarted: true },
+ })
+ const buttons = wrapper.findAllComponents(ButtonStub)
+ await buttons[0].trigger('click')
+ await flushPromises()
+ expect(mockClient.stopTransaction).toHaveBeenCalled()
+ })
+
+ it('should toast error when stopTransaction has no transactionId', async () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionId: undefined, transactionStarted: true },
+ })
+ const buttons = wrapper.findAllComponents(ButtonStub)
+ await buttons[0].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.stopTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should call startAutomaticTransactionGenerator', async () => {
+ const wrapper = mountConnector({ connectorId: 3 })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const atgStartProps = stateButtons[1].props() as unknown as StubProps
+ atgStartProps.on?.()
+ await flushPromises()
+ expect(mockClient.startAutomaticTransactionGenerator).toHaveBeenCalled()
+ })
+
+ it('should call stopAutomaticTransactionGenerator', async () => {
+ const wrapper = mountConnector({ atgStatus: { start: true }, connectorId: 3 })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const atgStopProps = stateButtons[1].props() as unknown as StubProps
+ atgStopProps.off?.()
+ await flushPromises()
+ expect(mockClient.stopAutomaticTransactionGenerator).toHaveBeenCalled()
+ })
+
+ it('should toast error when lockConnector fails', async () => {
+ mockClient.lockConnector = vi.fn().mockRejectedValue(new Error('fail'))
+ const wrapper = mountConnector()
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const failProps = stateButtons[0].props() as unknown as StubProps
+ failProps.on?.()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+ })
+
+ describe('start transaction navigation', () => {
+ it('should push to start-transaction route on toggle on', () => {
+ const wrapper = mountConnector({
+ connectorId: 2,
+ connectorOverrides: { transactionStarted: false },
+ evseId: 1,
+ ocppVersion: OCPPVersion.VERSION_16,
+ })
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ const navOnProps = toggleButtons[0].props() as unknown as StubProps
+ navOnProps.on?.()
+ expect(mockPush).toHaveBeenCalledOnce()
+ const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, unknown> }
+ expect(callArg.name).toBe('start-transaction')
+ expect(callArg.params.hashId).toBe(TEST_HASH_ID)
+ expect(callArg.params.chargingStationId).toBe(TEST_STATION_ID)
+ expect(callArg.params.connectorId).toBe(2)
+ })
+
+ it('should push to charging-stations route on toggle off', () => {
+ const wrapper = mountConnector({
+ connectorOverrides: { transactionStarted: false },
+ })
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ const navOffProps = toggleButtons[0].props() as unknown as StubProps
+ navOffProps.off?.()
+ expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for classic CSData component
+ * @description Unit tests for classic skin CSData component — station row rendering and actions.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { type ChargingStationData, OCPP16AvailabilityType, OCPPVersion } from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { uiClientKey } from '@/composables'
+import CSData from '@/skins/classic/components/charging-stations/CSData.vue'
+
+import { toastMock } from '../../../setup.js'
+import {
+ createChargingStationData,
+ createConnectorStatus,
+ TEST_HASH_ID,
+ TEST_STATION_ID,
+} from '../../constants.js'
+import {
+ ButtonStub,
+ createMockUIClient,
+ type MockUIClient,
+ StateButtonStub,
+ ToggleButtonStub,
+} from '../../helpers.js'
+
+interface StubProps {
+ off?: () => void
+ on?: () => void
+}
+
+const mockPush = vi.fn()
+
+vi.mock('vue-router', () => ({
+ useRoute: () => ({ name: 'charging-stations', params: {}, query: {} }),
+ useRouter: () => ({
+ push: mockPush,
+ }),
+}))
+
+let mockClient: MockUIClient
+
+/**
+ * @param overrides - Partial ChargingStationData overrides
+ * @returns Mounted CSData wrapper
+ */
+function mountCSData (overrides: Partial<ChargingStationData> = {}) {
+ return mount(CSData, {
+ global: {
+ mocks: {
+ $router: { push: mockPush },
+ },
+ provide: {
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ Button: ButtonStub,
+ CSConnector: {
+ props: [
+ 'connector',
+ 'connectorId',
+ 'evseId',
+ 'hashId',
+ 'chargingStationId',
+ 'atgStatus',
+ 'ocppVersion',
+ ],
+ template: '<tr class="cs-connector-stub"><td>{{ connectorId }}</td></tr>',
+ },
+ StateButton: StateButtonStub,
+ ToggleButton: ToggleButtonStub,
+ },
+ },
+ props: {
+ chargingStation: createChargingStationData(overrides),
+ },
+ })
+}
+
+describe('CSData', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('should render the charging station id', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain(TEST_STATION_ID)
+ })
+
+ it('should render "Yes" when started is true', () => {
+ const wrapper = mountCSData({ started: true })
+ const cells = wrapper.findAll('td')
+ expect(cells[1].text()).toBe('Yes')
+ })
+
+ it('should render "No" when started is false', () => {
+ const wrapper = mountCSData({ started: false })
+ const cells = wrapper.findAll('td')
+ expect(cells[1].text()).toBe('No')
+ })
+
+ it('should render the supervision url formatted', () => {
+ const wrapper = mountCSData({ supervisionUrl: 'ws://supervisor.example.com:9000' })
+ expect(wrapper.text()).toContain('ws://supervisor.\u200bexample.\u200bcom:9000')
+ })
+
+ it('should render placeholder for empty supervision url', () => {
+ const wrapper = mountCSData({ supervisionUrl: '' })
+ const cells = wrapper.findAll('td')
+ expect(cells[2].text()).toBe('Ø')
+ })
+
+ it('should render raw string for invalid supervision url', () => {
+ const wrapper = mountCSData({ supervisionUrl: 'not-a-url' })
+ expect(wrapper.text()).toContain('not-a-url')
+ })
+
+ it('should render OCPP version', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('1.6')
+ })
+
+ it('should render template name', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('template-test.json')
+ })
+
+ it('should render vendor', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('TestVendor')
+ })
+
+ it('should render model', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('TestModel')
+ })
+
+ it('should render firmware version', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('1.0.0')
+ })
+
+ it('should render placeholder when firmware is undefined', () => {
+ const wrapper = mountCSData({
+ stationInfo: {
+ baseName: 'CS-TEST',
+ chargePointModel: 'M',
+ chargePointVendor: 'V',
+ chargingStationId: TEST_STATION_ID,
+ firmwareVersion: undefined,
+ hashId: TEST_HASH_ID,
+ ocppVersion: OCPPVersion.VERSION_16,
+ templateIndex: 0,
+ templateName: 'tpl.json',
+ },
+ })
+ const cells = wrapper.findAll('td')
+ expect(cells[9].text()).toBe('Ø')
+ })
+
+ it('should render WebSocket state name', () => {
+ const wrapper = mountCSData({ wsState: WebSocket.OPEN })
+ expect(wrapper.text()).toContain('Open')
+ })
+
+ it('should render registration status', () => {
+ const wrapper = mountCSData()
+ expect(wrapper.text()).toContain('Accepted')
+ })
+ })
+
+ describe('connectors from flat array', () => {
+ it('should render connectors filtering out id 0', () => {
+ const wrapper = mountCSData({
+ connectors: [
+ { connectorId: 0, connectorStatus: createConnectorStatus() },
+ { connectorId: 1, connectorStatus: createConnectorStatus() },
+ { connectorId: 2, connectorStatus: createConnectorStatus() },
+ ],
+ })
+ expect(wrapper.findAll('.cs-connector-stub')).toHaveLength(2)
+ })
+ })
+
+ describe('connectors from evses', () => {
+ it('should flatten evses and render connectors', () => {
+ const wrapper = mountCSData({
+ connectors: undefined,
+ evses: [
+ {
+ evseId: 0,
+ evseStatus: {
+ availability: OCPP16AvailabilityType.OPERATIVE,
+ connectors: [{ connectorId: 0, connectorStatus: createConnectorStatus() }],
+ },
+ },
+ {
+ evseId: 1,
+ evseStatus: {
+ availability: OCPP16AvailabilityType.OPERATIVE,
+ connectors: [
+ { connectorId: 0, connectorStatus: createConnectorStatus() },
+ { connectorId: 1, connectorStatus: createConnectorStatus() },
+ { connectorId: 2, connectorStatus: createConnectorStatus() },
+ ],
+ },
+ },
+ ],
+ })
+ expect(wrapper.findAll('.cs-connector-stub')).toHaveLength(2)
+ })
+ })
+
+ describe('actions', () => {
+ it('should call startChargingStation and emit need-refresh on success', async () => {
+ const wrapper = mountCSData({ started: false })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const startProps = stateButtons[0].props() as unknown as StubProps
+ startProps.on?.()
+ await flushPromises()
+ expect(mockClient.startChargingStation).toHaveBeenCalled()
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+
+ it('should call stopChargingStation', async () => {
+ const wrapper = mountCSData({ started: true })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const stopProps = stateButtons[0].props() as unknown as StubProps
+ stopProps.off?.()
+ await flushPromises()
+ expect(mockClient.stopChargingStation).toHaveBeenCalled()
+ })
+
+ it('should call openConnection', async () => {
+ const wrapper = mountCSData({ wsState: WebSocket.CLOSED })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const openProps = stateButtons[1].props() as unknown as StubProps
+ openProps.on?.()
+ await flushPromises()
+ expect(mockClient.openConnection).toHaveBeenCalled()
+ })
+
+ it('should call closeConnection', async () => {
+ const wrapper = mountCSData({ wsState: WebSocket.OPEN })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const closeProps = stateButtons[1].props() as unknown as StubProps
+ closeProps.off?.()
+ await flushPromises()
+ expect(mockClient.closeConnection).toHaveBeenCalled()
+ })
+
+ it('should call deleteChargingStation and clear localStorage', async () => {
+ localStorage.setItem(`${TEST_HASH_ID}-some-key`, 'value')
+ const wrapper = mountCSData()
+ const buttons = wrapper.findAllComponents(ButtonStub)
+ const deleteBtn = buttons[buttons.length - 1]
+ await deleteBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.deleteChargingStation).toHaveBeenCalled()
+ expect(localStorage.getItem(`${TEST_HASH_ID}-some-key`)).toBeNull()
+ })
+
+ it('should toast error when startChargingStation fails', async () => {
+ mockClient.startChargingStation = vi.fn().mockRejectedValue(new Error('fail'))
+ const wrapper = mountCSData({ started: false })
+ const stateButtons = wrapper.findAllComponents(StateButtonStub)
+ const failProps = stateButtons[0].props() as unknown as StubProps
+ failProps.on?.()
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+
+ it('should toast error when deleteChargingStation fails', async () => {
+ mockClient.deleteChargingStation = vi.fn().mockRejectedValue(new Error('fail'))
+ const wrapper = mountCSData()
+ const buttons = wrapper.findAllComponents(ButtonStub)
+ const deleteBtn = buttons[buttons.length - 1]
+ await deleteBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+ })
+
+ describe('toggle button navigation', () => {
+ it('should render set-supervision-url toggle button', () => {
+ const wrapper = mountCSData()
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ expect(toggleButtons.length).toBeGreaterThanOrEqual(1)
+ expect(toggleButtons[0].props('shared')).toBe(true)
+ })
+
+ it('should trigger router push to set-supervision-url on toggle on', () => {
+ const wrapper = mountCSData()
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ const toggleProps = toggleButtons[0].props() as unknown as StubProps
+ toggleProps.on?.()
+ expect(mockPush).toHaveBeenCalledOnce()
+ const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, string> }
+ expect(callArg.name).toBe('set-supervision-url')
+ expect(callArg.params.hashId).toBe(TEST_HASH_ID)
+ expect(callArg.params.chargingStationId).toBe(TEST_STATION_ID)
+ })
+
+ it('should trigger router push to charging-stations on toggle off', () => {
+ const wrapper = mountCSData()
+ const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+ const toggleProps = toggleButtons[0].props() as unknown as StubProps
+ toggleProps.off?.()
+ expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for CSTable
+ * @description Verifies table rendering and delegation to CSData rows.
+ */
+import { shallowMount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { uiClientKey } from '@/composables'
+import CSTable from '@/skins/classic/components/charging-stations/CSTable.vue'
+
+import { createChargingStationData } from '../../constants.js'
+import { createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+const mockPush = vi.fn()
+
+vi.mock('vue-router', () => ({
+ useRoute: () => ({ name: 'charging-stations', params: {}, query: {} }),
+ useRouter: () => ({
+ push: mockPush,
+ }),
+}))
+
+let mockClient: MockUIClient
+
+describe('CSTable', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should render one CSData component per station', () => {
+ const stations = [
+ createChargingStationData(),
+ createChargingStationData({
+ stationInfo: {
+ baseName: 'CS-2',
+ chargePointModel: 'M2',
+ chargePointVendor: 'V2',
+ chargingStationId: 'CS-002',
+ hashId: 'hash-2',
+ templateIndex: 1,
+ templateName: 'tpl2.json',
+ },
+ }),
+ ]
+ const wrapper = shallowMount(CSTable, {
+ global: {
+ mocks: { $router: { push: mockPush } },
+ provide: { [uiClientKey as symbol]: mockClient },
+ },
+ props: { chargingStations: stations },
+ })
+ const csDataComponents = wrapper.findAllComponents({ name: 'CSData' })
+ expect(csDataComponents).toHaveLength(2)
+ })
+
+ it('should render no rows when stations array is empty', () => {
+ const wrapper = shallowMount(CSTable, {
+ global: {
+ mocks: { $router: { push: mockPush } },
+ provide: { [uiClientKey as symbol]: mockClient },
+ },
+ props: { chargingStations: [] },
+ })
+ const csDataComponents = wrapper.findAllComponents({ name: 'CSData' })
+ expect(csDataComponents).toHaveLength(0)
+ })
+
+ it('should propagate need-refresh event from CSData', () => {
+ const wrapper = shallowMount(CSTable, {
+ global: {
+ mocks: { $router: { push: mockPush } },
+ provide: { [uiClientKey as symbol]: mockClient },
+ },
+ props: { chargingStations: [createChargingStationData()] },
+ })
+ const csData = wrapper.findComponent({ name: 'CSData' })
+ ;(csData.vm as unknown as { $emit: (event: string) => void }).$emit('need-refresh')
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+})
--- /dev/null
+/**
+ * @file Tests for classic ToggleButton and CSTable components
+ * @description Unit tests for classic skin ToggleButton and CSTable components.
+ */
+import type { ChargingStationData } from 'ui-common'
+
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, shallowRef } from 'vue'
+
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/composables'
+import ToggleButton from '@/skins/classic/components/buttons/ToggleButton.vue'
+import CSTable from '@/skins/classic/components/charging-stations/CSTable.vue'
+
+import { createChargingStationData, createUIServerConfig } from '../../constants.js'
+import { ButtonActiveStub, createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+const CSDataStub = defineComponent({
+ emits: ['need-refresh'],
+ props: { chargingStation: { required: true, type: Object } },
+ template: '<tr class="cs-data-stub"><td>stub</td></tr>',
+})
+
+vi.mock('vue-router', () => ({
+ useRoute: () => ({ name: 'charging-stations', params: {}, query: {} }),
+ useRouter: () => ({
+ push: vi.fn(),
+ }),
+}))
+
+let mockClient: MockUIClient
+
+describe('ToggleButton and CSTable', () => {
+ describe('ToggleButton', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ /**
+ * @param props - ToggleButton props
+ * @param props.id - Button identifier
+ * @param props.off - Off callback
+ * @param props.on - On callback
+ * @param props.shared - Whether button is shared
+ * @param props.status - Initial status
+ * @returns Mounted ToggleButton wrapper
+ */
+ function mountToggle (props: {
+ id: string
+ off?: () => void
+ on?: () => void
+ shared?: boolean
+ status?: boolean
+ }) {
+ return mount(ToggleButton, {
+ global: {
+ provide: {
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ Button: ButtonActiveStub,
+ },
+ },
+ props,
+ slots: { default: 'Toggle' },
+ })
+ }
+
+ it('should render slot content', () => {
+ const wrapper = mountToggle({ id: 'test-btn' })
+ expect(wrapper.text()).toBe('Toggle')
+ })
+
+ it('should initialize status from localStorage when available', () => {
+ localStorage.setItem('toggle-button-my-btn', JSON.stringify(true))
+ const wrapper = mountToggle({ id: 'my-btn', status: false })
+ expect(wrapper.find('.button--active').exists()).toBe(true)
+ })
+
+ it('should initialize status from props when localStorage is empty', () => {
+ const wrapper = mountToggle({ id: 'fresh-btn', status: false })
+ expect(wrapper.find('.button--active').exists()).toBe(false)
+ })
+
+ it('should toggle status on click and persist to localStorage', async () => {
+ const wrapper = mountToggle({ id: 'click-btn', status: false })
+ await wrapper.find('button').trigger('click')
+ const stored = localStorage.getItem('toggle-button-click-btn')
+ expect(stored != null ? JSON.parse(stored) : null).toBe(true)
+ expect(wrapper.find('.button--active').exists()).toBe(true)
+ })
+
+ it('should call on callback when toggled to true', async () => {
+ const onFn = vi.fn()
+ const wrapper = mountToggle({ id: 'on-btn', on: onFn, status: false })
+ await wrapper.find('button').trigger('click')
+ expect(onFn).toHaveBeenCalledOnce()
+ })
+
+ it('should call off callback when toggled to false', async () => {
+ localStorage.setItem('toggle-button-off-btn', JSON.stringify(true))
+ const offFn = vi.fn()
+ const wrapper = mountToggle({ id: 'off-btn', off: offFn, status: true })
+ await wrapper.find('button').trigger('click')
+ expect(offFn).toHaveBeenCalledOnce()
+ })
+
+ it('should emit clicked event with new status', async () => {
+ const wrapper = mountToggle({ id: 'emit-btn', status: false })
+ await wrapper.find('button').trigger('click')
+ expect(wrapper.emitted('clicked')).toEqual([[true]])
+ })
+
+ it('should use shared prefix when shared prop is true', async () => {
+ const wrapper = mountToggle({ id: 'shared-btn', shared: true, status: false })
+ await wrapper.find('button').trigger('click')
+ const stored = localStorage.getItem('shared-toggle-button-shared-btn')
+ expect(stored != null ? JSON.parse(stored) : null).toBe(true)
+ })
+
+ it('should clear other shared buttons when shared is true', async () => {
+ localStorage.setItem('shared-toggle-button-other', JSON.stringify(true))
+ const wrapper = mountToggle({ id: 'new-shared', shared: true, status: false })
+ await wrapper.find('button').trigger('click')
+ const stored = localStorage.getItem('shared-toggle-button-other')
+ expect(stored != null ? JSON.parse(stored) : null).toBe(false)
+ })
+
+ it('should not clear non-shared buttons when shared is true', async () => {
+ localStorage.setItem('toggle-button-regular', JSON.stringify(true))
+ const wrapper = mountToggle({ id: 'shared-x', shared: true, status: false })
+ await wrapper.find('button').trigger('click')
+ const stored = localStorage.getItem('toggle-button-regular')
+ expect(stored != null ? JSON.parse(stored) : null).toBe(true)
+ })
+ })
+
+ describe('CSTable', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ /**
+ * @param chargingStations - Station data array
+ * @returns Mounted CSTable wrapper
+ */
+ function mountTable (chargingStations: ChargingStationData[] = []) {
+ return mount(CSTable, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: shallowRef(chargingStations),
+ [configurationKey as symbol]: shallowRef({ uiServer: [createUIServerConfig()] }),
+ [templatesKey as symbol]: shallowRef([]),
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ CSData: CSDataStub,
+ },
+ },
+ props: { chargingStations },
+ })
+ }
+
+ it('should render the table with caption', () => {
+ const wrapper = mountTable()
+ expect(wrapper.find('.data-table__caption').text()).toBe('Charging Stations')
+ })
+
+ it('should render table headers', () => {
+ const wrapper = mountTable()
+ const headers = wrapper.findAll('th')
+ expect(headers.length).toBe(12)
+ expect(headers[0].text()).toBe('Name')
+ expect(headers[11].text()).toBe('Connector(s)')
+ })
+
+ it('should render one CSData per charging station', () => {
+ const stations = [
+ createChargingStationData(),
+ createChargingStationData({
+ stationInfo: {
+ baseName: 'CS-2',
+ chargePointModel: 'Model2',
+ chargePointVendor: 'Vendor2',
+ chargingStationId: 'CS-2',
+ hashId: 'hash-2',
+ ocppVersion: undefined as never,
+ templateIndex: 1,
+ templateName: 'template-2.json',
+ },
+ }),
+ ]
+ const wrapper = mountTable(stations)
+ expect(wrapper.findAll('.cs-data-stub')).toHaveLength(2)
+ })
+
+ it('should render no rows when empty', () => {
+ const wrapper = mountTable([])
+ expect(wrapper.findAll('.cs-data-stub')).toHaveLength(0)
+ })
+
+ it('should emit need-refresh when CSData emits need-refresh', async () => {
+ const stations = [createChargingStationData()]
+ const wrapper = mountTable(stations)
+ const csDataStub = wrapper.findComponent(CSDataStub)
+ csDataStub.vm.$emit('need-refresh')
+ await flushPromises()
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for ClassicLayout component
+ * @description Smoke tests for the classic skin layout component.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/composables'
+import ClassicLayout from '@/skins/classic/ClassicLayout.vue'
+
+import { createUIServerConfig } from '../../constants'
+import { createMockUIClient, type MockUIClient } from '../../helpers'
+
+vi.mock('vue-router', () => ({
+ useRoute: () => ref({ name: 'charging-stations', params: {} }),
+ useRouter: () => ({
+ push: vi.fn(),
+ }),
+}))
+
+let mockClient: MockUIClient
+
+const singleServer = { uiServer: [createUIServerConfig({ name: 'A' })] }
+
+/**
+ * @returns Mounted wrapper for ClassicLayout with default stubs
+ */
+function mountLayout () {
+ return mount(ClassicLayout, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: ref([]),
+ [configurationKey as symbol]: ref(singleServer),
+ [templatesKey as symbol]: ref([]),
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ CSTable: true,
+ RouterView: true,
+ },
+ },
+ })
+}
+
+describe('ClassicLayout', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ vi.restoreAllMocks()
+ })
+
+ it('should render without crashing', async () => {
+ const wrapper = mountLayout()
+ await flushPromises()
+ expect(wrapper.exists()).toBe(true)
+ })
+
+ it('should render the skin selector', async () => {
+ const wrapper = mountLayout()
+ await flushPromises()
+ const selects = wrapper.findAll('select')
+ expect(selects.length).toBeGreaterThanOrEqual(1)
+ })
+
+ it('should contain the classic layout root element', async () => {
+ const wrapper = mountLayout()
+ await flushPromises()
+ expect(wrapper.find('.classic-layout').exists()).toBe(true)
+ })
+
+ it('should trigger switchSkin when skin select changes', async () => {
+ const wrapper = mountLayout()
+ await flushPromises()
+ const selects = wrapper.findAll('select')
+ const skinSelect = selects.find(s => {
+ const options = s.findAll('option')
+ return options.some(o => ['classic', 'modern'].includes(o.element.value))
+ })
+ if (skinSelect != null) {
+ await skinSelect.setValue('modern')
+ await skinSelect.trigger('change')
+ expect(document.documentElement.getAttribute('data-skin')).toBeDefined()
+ }
+ expect(skinSelect).toBeDefined()
+ })
+
+ it('should trigger switchTheme when theme select changes', async () => {
+ const wrapper = mountLayout()
+ await flushPromises()
+ const selects = wrapper.findAll('select')
+ const themeSelect = selects.find(s => {
+ const options = s.findAll('option')
+ return options.some(
+ o => o.element.value.includes('night') || o.element.value.includes('catppuccin')
+ )
+ })
+ if (themeSelect != null) {
+ await themeSelect.setValue('catppuccin-latte')
+ await themeSelect.trigger('change')
+ expect(document.documentElement.getAttribute('data-theme')).toBeDefined()
+ }
+ expect(themeSelect).toBeDefined()
+ })
+})
--- /dev/null
+/**
+ * @file Tests for ConnectorRow component
+ * @description Status/lock/ATG pills, primary/stop actions, event emission.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import {
+ OCPP16AvailabilityType,
+ OCPP16ChargePointStatus,
+ OCPPVersion,
+ type Status,
+} from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { uiClientKey } from '@/composables'
+import ConnectorRow from '@/skins/modern/components/ConnectorRow.vue'
+
+import { toastMock } from '../../../setup.js'
+import { TEST_HASH_ID, TEST_STATION_ID } from '../../constants'
+import { createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+let mockClient: MockUIClient
+let wrapper: ReturnType<typeof mountRow> | undefined
+
+/**
+ * Mounts a ConnectorRow with sensible defaults; pass partial overrides.
+ * @param props partial props
+ * @returns mounted wrapper
+ */
+function mountRow (
+ props: Partial<{
+ atgStatus: Status | undefined
+ connector: Record<string, unknown>
+ connectorId: number
+ evseId: number | undefined
+ ocppVersion: OCPPVersion | undefined
+ }> = {}
+) {
+ const connector = {
+ availability: OCPP16AvailabilityType.OPERATIVE,
+ status: OCPP16ChargePointStatus.AVAILABLE,
+ ...props.connector,
+ }
+ return mount(ConnectorRow, {
+ global: {
+ provide: { [uiClientKey as symbol]: mockClient },
+ },
+ props: {
+ atgStatus: props.atgStatus,
+ chargingStationId: TEST_STATION_ID,
+ connector,
+ connectorId: props.connectorId ?? 1,
+ evseId: props.evseId,
+ hashId: TEST_HASH_ID,
+ ocppVersion: props.ocppVersion,
+ },
+ })
+}
+
+describe('ConnectorRow', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ wrapper?.unmount()
+ vi.clearAllMocks()
+ })
+
+ describe('identifier display', () => {
+ it('should show the bare connector id when no evseId', () => {
+ wrapper = mountRow()
+ expect(wrapper.find('.modern-connector__id').text()).toBe('1')
+ })
+
+ it('should show evseId/connectorId format when evseId is set', () => {
+ wrapper = mountRow({ connectorId: 3, evseId: 2 })
+ expect(wrapper.find('.modern-connector__id').text()).toBe('2/3')
+ })
+ })
+
+ describe('status pill variants', () => {
+ it.each<[string, string]>([
+ ['Available', 'modern-pill--ok'],
+ ['Charging', 'modern-pill--warn'],
+ ['Occupied', 'modern-pill--warn'],
+ ['Preparing', 'modern-pill--warn'],
+ ['Faulted', 'modern-pill--err'],
+ ['Unavailable', 'modern-pill--err'],
+ ['Reserved', 'modern-pill--idle'],
+ ])('should map status "%s" to class %s', (status, cls) => {
+ wrapper = mountRow({ connector: { status } })
+ const pills = wrapper.findAll('.modern-pill')
+ expect(pills[0].classes()).toContain(cls)
+ })
+
+ it('should render "unknown" label when status is undefined', () => {
+ wrapper = mountRow({ connector: { status: undefined } })
+ expect(wrapper.text()).toContain('unknown')
+ })
+ })
+
+ describe('lock button', () => {
+ it('should show closed padlock when effectively locked (locked=true)', () => {
+ wrapper = mountRow({ connector: { locked: true } })
+ expect(wrapper.find('.modern-connector__lock--on').exists()).toBe(true)
+ })
+
+ it('should show closed padlock when transaction started (even without explicit lock)', () => {
+ wrapper = mountRow({ connector: { transactionStarted: true } })
+ expect(wrapper.find('.modern-connector__lock--on').exists()).toBe(true)
+ })
+
+ it('should be disabled during transaction', () => {
+ wrapper = mountRow({ connector: { transactionStarted: true } })
+ const btn = wrapper.find('.modern-connector__lock').element as HTMLButtonElement
+ expect(btn.disabled).toBe(true)
+ })
+
+ it('should call lockConnector when unlocked', async () => {
+ wrapper = mountRow()
+ await wrapper.find('.modern-connector__lock').trigger('click')
+ await flushPromises()
+ expect(mockClient.lockConnector).toHaveBeenCalled()
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+
+ it('should call unlockConnector when locked', async () => {
+ wrapper = mountRow({ connector: { locked: true } })
+ await wrapper.find('.modern-connector__lock').trigger('click')
+ await flushPromises()
+ expect(mockClient.unlockConnector).toHaveBeenCalled()
+ })
+
+ it('should toast error when lock call fails', async () => {
+ wrapper = mountRow()
+ mockClient.lockConnector = vi.fn().mockRejectedValue(new Error('fail'))
+ await wrapper.find('.modern-connector__lock').trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+ })
+
+ describe('ATG chip', () => {
+ it('should label "Start ATG" when not running', () => {
+ wrapper = mountRow({ atgStatus: undefined })
+ expect(wrapper.text()).toContain('Start ATG')
+ })
+
+ it('should label "Stop ATG" when running', () => {
+ wrapper = mountRow({ atgStatus: { start: true } as Status })
+ expect(wrapper.text()).toContain('Stop ATG')
+ })
+
+ it('should call startAutomaticTransactionGenerator when starting', async () => {
+ wrapper = mountRow()
+ const chip = wrapper.find('.modern-btn--chip')
+ await chip.trigger('click')
+ await flushPromises()
+ expect(mockClient.startAutomaticTransactionGenerator).toHaveBeenCalled()
+ })
+
+ it('should call stopAutomaticTransactionGenerator when stopping', async () => {
+ wrapper = mountRow({ atgStatus: { start: true } as Status })
+ const chip = wrapper.find('.modern-btn--chip')
+ await chip.trigger('click')
+ await flushPromises()
+ expect(mockClient.stopAutomaticTransactionGenerator).toHaveBeenCalled()
+ })
+ })
+
+ describe('transaction controls', () => {
+ it('should show play icon when no transaction and emits open-start-tx on click', async () => {
+ wrapper = mountRow({ connectorId: 2, evseId: 3, ocppVersion: OCPPVersion.VERSION_16 })
+ const startBtn = wrapper.find('.modern-icon-btn--primary')
+ expect(startBtn.exists()).toBe(true)
+ await startBtn.trigger('click')
+ expect(wrapper.emitted('open-start-tx')).toEqual([
+ [
+ {
+ chargingStationId: TEST_STATION_ID,
+ connectorId: '2',
+ evseId: 3,
+ hashId: TEST_HASH_ID,
+ ocppVersion: OCPPVersion.VERSION_16,
+ },
+ ],
+ ])
+ })
+
+ it('should omit evseId/ocppVersion from emitted data when not set', async () => {
+ wrapper = mountRow()
+ await wrapper.find('.modern-icon-btn--primary').trigger('click')
+ const emitted = wrapper.emitted('open-start-tx')?.[0]?.[0] as Record<string, unknown>
+ expect(emitted.evseId).toBeUndefined()
+ expect(emitted.ocppVersion).toBeUndefined()
+ })
+
+ it('should show stop icon when transaction running and stops it', async () => {
+ wrapper = mountRow({
+ connector: {
+ status: OCPP16ChargePointStatus.CHARGING,
+ transactionId: 99,
+ transactionStarted: true,
+ },
+ ocppVersion: OCPPVersion.VERSION_16,
+ })
+ const stopBtn = wrapper.find('.modern-icon-btn--danger')
+ expect(stopBtn.exists()).toBe(true)
+ await stopBtn.trigger('click')
+ await flushPromises()
+ expect(mockClient.stopTransaction).toHaveBeenCalled()
+ })
+
+ it('should toast error when stop is clicked without a transactionId', async () => {
+ wrapper = mountRow({
+ connector: { status: OCPP16ChargePointStatus.CHARGING, transactionStarted: true },
+ })
+ const stopBtn = wrapper.find('.modern-icon-btn--danger')
+ await stopBtn.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.stopTransaction).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('transaction details rendering', () => {
+ it('should render energy in kWh when ≥ 1000 Wh', () => {
+ wrapper = mountRow({
+ connector: {
+ status: OCPP16ChargePointStatus.CHARGING,
+ transactionEnergyActiveImportRegisterValue: 1500,
+ transactionId: 7,
+ transactionStarted: true,
+ },
+ })
+ expect(wrapper.text()).toContain('1.50 kWh')
+ })
+
+ it('should render energy in Wh when < 1000', () => {
+ wrapper = mountRow({
+ connector: {
+ status: OCPP16ChargePointStatus.CHARGING,
+ transactionEnergyActiveImportRegisterValue: 120,
+ transactionId: 7,
+ transactionStarted: true,
+ },
+ })
+ expect(wrapper.text()).toContain('120 Wh')
+ })
+
+ it('should render "—" when energy value is missing', () => {
+ wrapper = mountRow({
+ connector: {
+ status: OCPP16ChargePointStatus.CHARGING,
+ transactionId: 7,
+ transactionStarted: true,
+ },
+ })
+ expect(wrapper.find('.modern-connector__tx-table').text()).toContain('—')
+ })
+
+ it('should render Tag row when transactionIdTag is set', () => {
+ wrapper = mountRow({
+ connector: {
+ status: OCPP16ChargePointStatus.CHARGING,
+ transactionId: 7,
+ transactionIdTag: 'RFID-TAG-001',
+ transactionStarted: true,
+ },
+ })
+ expect(wrapper.text()).toContain('RFID-TAG-001')
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for modern dialogs (Add / SetSupervisionUrl / StartTransaction / Authorize)
+ * @description Form interaction, payload shaping, error display.
+ * Modal is mocked to skip the Teleport so wrapper.find() reaches dialog inputs.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { ResponseStatus, ServerFailureError } from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, ref } from 'vue'
+
+import { chargingStationsKey, templatesKey, uiClientKey } from '@/composables'
+
+// Mock Modal to render slots inline (no Teleport), so `wrapper.find()` works.
+vi.mock('@/skins/modern/components/ModernModal.vue', () => ({
+ default: defineComponent({
+ emits: ['close'],
+ name: 'ModalStub',
+ props: {
+ closeOnBackdrop: { default: true, type: Boolean },
+ title: { required: true, type: String },
+ },
+ template:
+ '<div class="stub-modal"><h2>{{ title }}</h2><div class="stub-modal__body"><slot /></div><div class="stub-modal__foot"><slot name="footer" /></div></div>',
+ }),
+}))
+
+import AddStationsDialog from '@/skins/modern/components/dialogs/AddStationsDialog.vue'
+import AuthorizeDialog from '@/skins/modern/components/dialogs/AuthorizeDialog.vue'
+import SetSupervisionUrlDialog from '@/skins/modern/components/dialogs/SetSupervisionUrlDialog.vue'
+import StartTransactionDialog from '@/skins/modern/components/dialogs/StartTransactionDialog.vue'
+
+import { toastMock } from '../../../setup.js'
+import { createChargingStationData, TEST_HASH_ID, TEST_STATION_ID } from '../../constants'
+import { createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+let mockClient: MockUIClient
+
+describe('Dialogs', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('AddStationsDialog', () => {
+ /**
+ * @param templates - Template names to provide to the dialog
+ * @returns Mounted wrapper for AddStationsDialog
+ */
+ function mountDialog (templates = ['template-A.json', 'template-B.json']) {
+ return mount(AddStationsDialog, {
+ global: {
+ provide: {
+ [templatesKey as symbol]: ref(templates),
+ [uiClientKey as symbol]: mockClient,
+ },
+ },
+ })
+ }
+
+ it('should render template options', () => {
+ const wrapper = mountDialog()
+ expect(wrapper.text()).toContain('template-A.json')
+ expect(wrapper.text()).toContain('template-B.json')
+ })
+
+ it('should submit payload on success and emit close', async () => {
+ const wrapper = mountDialog()
+ await wrapper.find('#modern-add-template').setValue('template-A.json')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.addChargingStations).toHaveBeenCalledWith(
+ 'template-A.json',
+ 1,
+ expect.objectContaining({
+ autoStart: false,
+ baseName: undefined,
+ fixedName: undefined,
+ supervisionPassword: undefined,
+ supervisionUrls: undefined,
+ supervisionUser: undefined,
+ })
+ )
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+
+ it('should send fixedName=true when baseName set and checkbox checked', async () => {
+ const wrapper = mountDialog()
+ await wrapper.find('#modern-add-template').setValue('template-A.json')
+ const textInputs = wrapper.findAll('input[type="text"]')
+ await textInputs[0].setValue('MY-BASE')
+ const checkboxes = wrapper.findAll('input[type="checkbox"]')
+ await checkboxes[0].setValue(true)
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.addChargingStations).toHaveBeenCalledWith(
+ 'template-A.json',
+ 1,
+ expect.objectContaining({ baseName: 'MY-BASE', fixedName: true })
+ )
+ })
+
+ it('should pass supervision url and credentials when filled', async () => {
+ const wrapper = mountDialog()
+ await wrapper.find('#modern-add-template').setValue('template-A.json')
+ await wrapper.find('input[type="url"]').setValue('wss://example.com/ocpp')
+ const textInputs = wrapper.findAll('input[type="text"]')
+ await textInputs[1].setValue('alice')
+ await wrapper.find('input[type="password"]').setValue('secret')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.addChargingStations).toHaveBeenCalledWith(
+ 'template-A.json',
+ 1,
+ expect.objectContaining({
+ supervisionPassword: 'secret',
+ supervisionUrls: 'wss://example.com/ocpp',
+ supervisionUser: 'alice',
+ })
+ )
+ })
+
+ it('should cancel and emit close', async () => {
+ const wrapper = mountDialog()
+ await wrapper.findAll('.stub-modal__foot button')[0].trigger('click')
+ await flushPromises()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+ })
+
+ describe('SetSupervisionUrlDialog', () => {
+ /**
+ * @param stations - Charging station data to provide to the dialog
+ * @returns Mounted wrapper for SetSupervisionUrlDialog
+ */
+ function mountDialog (stations = [createChargingStationData()]) {
+ return mount(SetSupervisionUrlDialog, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: ref(stations),
+ [uiClientKey as symbol]: mockClient,
+ },
+ },
+ props: { chargingStationId: TEST_STATION_ID, hashId: TEST_HASH_ID },
+ })
+ }
+
+ it('should prefill URL stripped of trailing /chargingStationId', () => {
+ const wrapper = mountDialog([
+ createChargingStationData({
+ supervisionUrl: `wss://host:9000/${TEST_STATION_ID}`,
+ }),
+ ])
+ const input = wrapper.find<HTMLInputElement>('#modern-sup-url').element
+ expect(input.value).toBe('wss://host:9000')
+ })
+
+ it('should prefill username and password from stationInfo', () => {
+ const wrapper = mountDialog([
+ createChargingStationData({
+ stationInfo: {
+ baseName: 'CS',
+ chargePointModel: 'm',
+ chargePointVendor: 'v',
+ chargingStationId: TEST_STATION_ID,
+ hashId: TEST_HASH_ID,
+ supervisionPassword: 'pw',
+ supervisionUser: 'u',
+ templateIndex: 0,
+ templateName: 't',
+ },
+ supervisionUrl: `wss://host/${TEST_STATION_ID}`,
+ }),
+ ])
+ const user = wrapper.find<HTMLInputElement>('#modern-sup-user').element
+ const pass = wrapper.find<HTMLInputElement>('#modern-sup-pass').element
+ expect(user.value).toBe('u')
+ expect(pass.value).toBe('pw')
+ })
+
+ it('should fall back to empty strings when station not found', () => {
+ const wrapper = mountDialog([])
+ const input = wrapper.find<HTMLInputElement>('#modern-sup-url').element
+ expect(input.value).toBe('')
+ })
+
+ it('should reject submission when URL is empty', async () => {
+ const wrapper = mountDialog([])
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.setSupervisionUrl).not.toHaveBeenCalled()
+ })
+
+ it('should send credentials and reconnects when station is started', async () => {
+ const wrapper = mountDialog([
+ createChargingStationData({
+ started: true,
+ supervisionUrl: `wss://host/${TEST_STATION_ID}`,
+ }),
+ ])
+ await wrapper.find('#modern-sup-url').setValue('wss://new.example.com')
+ await wrapper.find('#modern-sup-user').setValue('alice')
+ await wrapper.find('#modern-sup-pass').setValue('pw')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.setSupervisionUrl).toHaveBeenCalledWith(
+ TEST_HASH_ID,
+ 'wss://new.example.com',
+ 'alice',
+ 'pw'
+ )
+ expect(mockClient.closeConnection).toHaveBeenCalledWith(TEST_HASH_ID)
+ expect(mockClient.openConnection).toHaveBeenCalledWith(TEST_HASH_ID)
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+
+ it('should not reconnect when station is stopped', async () => {
+ const wrapper = mountDialog([
+ createChargingStationData({
+ started: false,
+ supervisionUrl: `wss://host/${TEST_STATION_ID}`,
+ }),
+ ])
+ await wrapper.find('#modern-sup-url').setValue('wss://new.example.com')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.setSupervisionUrl).toHaveBeenCalled()
+ expect(mockClient.closeConnection).not.toHaveBeenCalled()
+ expect(mockClient.openConnection).not.toHaveBeenCalled()
+ })
+
+ it('should skip reconnect when checkbox is unchecked', async () => {
+ const wrapper = mountDialog([
+ createChargingStationData({
+ started: true,
+ supervisionUrl: `wss://host/${TEST_STATION_ID}`,
+ }),
+ ])
+ await wrapper.find('#modern-sup-url').setValue('wss://new.example.com')
+ const reconnectBox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
+ await reconnectBox.setValue(false)
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.closeConnection).not.toHaveBeenCalled()
+ expect(mockClient.openConnection).not.toHaveBeenCalled()
+ })
+
+ it('should emit close when cancel button is clicked', async () => {
+ const wrapper = mountDialog([])
+ await wrapper.findAll('.stub-modal__foot button')[0].trigger('click')
+ await flushPromises()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+ })
+
+ describe('StartTransactionDialog', () => {
+ /**
+ * @param extraProps - Additional props to merge into the dialog's props
+ * @returns Mounted wrapper for StartTransactionDialog
+ */
+ function mountDialog (extraProps: Record<string, unknown> = {}) {
+ return mount(StartTransactionDialog, {
+ global: { provide: { [uiClientKey as symbol]: mockClient } },
+ props: {
+ chargingStationId: TEST_STATION_ID,
+ connectorId: '1',
+ hashId: TEST_HASH_ID,
+ ...extraProps,
+ },
+ })
+ }
+
+ it('should reject authorize-first when no idTag provided', async () => {
+ const wrapper = mountDialog()
+ const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
+ await checkbox.setValue(true)
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.authorize).not.toHaveBeenCalled()
+ expect(mockClient.startTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should authorize then start transaction when authorize-first checked', async () => {
+ const wrapper = mountDialog()
+ await wrapper.find('#modern-tx-idtag').setValue('RFID-01')
+ const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
+ await checkbox.setValue(true)
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.authorize).toHaveBeenCalledWith(TEST_HASH_ID, 'RFID-01')
+ expect(mockClient.startTransaction).toHaveBeenCalledWith(
+ TEST_HASH_ID,
+ expect.objectContaining({ connectorId: 1, idTag: 'RFID-01' })
+ )
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+
+ it('should skip authorize when checkbox is unchecked', async () => {
+ const wrapper = mountDialog()
+ const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
+ await checkbox.setValue(false)
+ await wrapper.find('#modern-tx-idtag').setValue('RFID-01')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.authorize).not.toHaveBeenCalled()
+ expect(mockClient.startTransaction).toHaveBeenCalled()
+ })
+
+ it('should include evseId and ocppVersion from props', async () => {
+ const wrapper = mountDialog({ evseId: 2, ocppVersion: '1.6' })
+ await wrapper.find('#modern-tx-idtag').setValue('RFID-01')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.startTransaction).toHaveBeenCalledWith(
+ TEST_HASH_ID,
+ expect.objectContaining({ evseId: 2, ocppVersion: '1.6' })
+ )
+ expect(wrapper.text()).toContain('EVSE 2')
+ })
+
+ it('should show Connector-only target label when no evseId', () => {
+ const wrapper = mountDialog()
+ expect(wrapper.text()).toContain('Connector 1')
+ expect(wrapper.text()).not.toContain('EVSE')
+ })
+
+ it('should toast error when authorize fails', async () => {
+ const wrapper = mountDialog()
+ mockClient.authorize = vi.fn().mockRejectedValue(new Error('auth failed'))
+ await wrapper.find('#modern-tx-idtag').setValue('BAD-TAG')
+ const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
+ await checkbox.setValue(true)
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.startTransaction).not.toHaveBeenCalled()
+ })
+
+ it('should toast error when startTransaction fails', async () => {
+ const wrapper = mountDialog()
+ mockClient.startTransaction = vi.fn().mockRejectedValue(new Error('tx failed'))
+ await wrapper.find('#modern-tx-idtag').setValue('RFID')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+
+ it('should not close dialog when startTransaction rejects', async () => {
+ const wrapper = mountDialog()
+ mockClient.startTransaction = vi.fn().mockRejectedValue(
+ new ServerFailureError({
+ hashIdsFailed: [],
+ responsesFailed: [
+ {
+ commandResponse: { idTagInfo: { status: 'Invalid' } },
+ hashId: TEST_HASH_ID,
+ status: ResponseStatus.FAILURE,
+ },
+ ],
+ status: ResponseStatus.FAILURE,
+ } as never)
+ )
+ await wrapper.find('#modern-tx-idtag').setValue('BAD-TAG')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(wrapper.emitted('close')).toBeUndefined()
+ })
+
+ it('should emit close when cancel button is clicked', async () => {
+ const wrapper = mountDialog()
+ await wrapper.findAll('.stub-modal__foot button')[0].trigger('click')
+ await flushPromises()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+ })
+
+ describe('AuthorizeDialog', () => {
+ /**
+ * @returns Mounted wrapper for AuthorizeDialog
+ */
+ function mountDialog () {
+ return mount(AuthorizeDialog, {
+ global: { provide: { [uiClientKey as symbol]: mockClient } },
+ props: { chargingStationId: TEST_STATION_ID, hashId: TEST_HASH_ID },
+ })
+ }
+
+ it('should reject when idTag is empty', async () => {
+ const wrapper = mountDialog()
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ expect(mockClient.authorize).not.toHaveBeenCalled()
+ })
+
+ it('should call authorize and emit close on success', async () => {
+ const wrapper = mountDialog()
+ await wrapper.find('#modern-auth-tag').setValue('GOOD')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(mockClient.authorize).toHaveBeenCalledWith(TEST_HASH_ID, 'GOOD')
+ expect(toastMock.success).toHaveBeenCalled()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+
+ it('should surface ServerFailureError status and payload JSON panel', async () => {
+ const wrapper = mountDialog()
+ mockClient.authorize = vi.fn().mockRejectedValue(
+ new ServerFailureError({
+ hashIdsFailed: [],
+ responsesFailed: [
+ {
+ commandResponse: { idTagInfo: { status: 'Blocked' } },
+ hashId: TEST_HASH_ID,
+ status: ResponseStatus.FAILURE,
+ },
+ ],
+ status: ResponseStatus.FAILURE,
+ } as never)
+ )
+ await wrapper.find('#modern-auth-tag').setValue('BAD')
+ await wrapper.findAll('.stub-modal__foot button')[1].trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalledWith(
+ expect.stringContaining('Authorize failed: Blocked')
+ )
+ expect(wrapper.text()).toContain('Blocked')
+ expect(wrapper.find('.modern-form__error-details').exists()).toBe(true)
+ })
+
+ it('should emit close when cancel is clicked', async () => {
+ const wrapper = mountDialog()
+ await wrapper.findAll('.stub-modal__foot button')[0].trigger('click')
+ await flushPromises()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for modern error-extraction helper
+ * @description Unit tests for getFailureInfo which unwraps ServerFailureError payloads.
+ * Payloads are cast via `as never` because we're testing defensive handling of
+ * malformed shapes the strongly-typed signature forbids.
+ */
+import { type ResponsePayload, ResponseStatus, ServerFailureError } from 'ui-common'
+import { describe, expect, it } from 'vitest'
+
+import { getFailureInfo } from '@/skins/modern/utils/errors'
+
+/**
+ * Builds a ResponsePayload-shaped object with custom responsesFailed entries.
+ * Cast via `as never` so we can exercise malformed shapes for defensive paths.
+ * @param responsesFailed the entries to put in the payload
+ * @returns a ResponsePayload-cast object
+ */
+const payloadWith = (responsesFailed: unknown[]): ResponsePayload =>
+ ({
+ hashIdsFailed: [],
+ responsesFailed,
+ status: ResponseStatus.FAILURE,
+ }) as never
+
+describe('getFailureInfo', () => {
+ it('should return extractErrorMessage for non-ServerFailureError', () => {
+ const info = getFailureInfo(new Error('boom'))
+ expect(info.payload).toBeUndefined()
+ expect(info.summary).toBe('boom')
+ })
+
+ it('should return a summary for unknown non-Error values', () => {
+ const info = getFailureInfo('weird')
+ expect(info.payload).toBeUndefined()
+ expect(typeof info.summary).toBe('string')
+ })
+
+ it('should prefer idTagInfo.status when present', () => {
+ const payload = payloadWith([{ commandResponse: { idTagInfo: { status: 'Invalid' } } }])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.summary).toBe('Invalid')
+ expect(info.payload).toEqual(payload)
+ })
+
+ it('should fall back to commandResponse.status when idTagInfo absent', () => {
+ const payload = payloadWith([{ commandResponse: { status: 'Rejected' } }])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.summary).toBe('Rejected')
+ })
+
+ it('should fall back to errorMessage when status fields absent', () => {
+ const payload = payloadWith([{ commandResponse: {}, errorMessage: 'network down' }])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.summary).toBe('network down')
+ })
+
+ it('should fall back to extractErrorMessage when payload has no useful string fields', () => {
+ const payload = payloadWith([{ commandResponse: {} }])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(typeof info.summary).toBe('string')
+ expect(info.summary.length).toBeGreaterThan(0)
+ })
+
+ it('should handle responsesFailed being empty', () => {
+ const payload = payloadWith([])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.payload).toEqual(payload)
+ expect(typeof info.summary).toBe('string')
+ })
+
+ it('should ignore empty-string status fields and falls through', () => {
+ const payload = payloadWith([
+ { commandResponse: { idTagInfo: { status: '' }, status: '' }, errorMessage: 'fallback' },
+ ])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.summary).toBe('fallback')
+ })
+
+ it('should ignore non-string status fields', () => {
+ const payload = payloadWith([
+ { commandResponse: { idTagInfo: { status: 42 }, status: null }, errorMessage: 'fb' },
+ ])
+ const err = new ServerFailureError(payload)
+ const info = getFailureInfo(err)
+ expect(info.summary).toBe('fb')
+ expect(info.payload).toEqual(payload)
+ })
+})
--- /dev/null
+/**
+ * @file Tests for ModernLayout component
+ * @description Main layout: WS listeners, data fetching, simulator start/stop,
+ * UI server switching, empty-state rendering.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import {
+ chargingStationsKey,
+ configurationKey,
+ templatesKey,
+ UI_SERVER_CONFIGURATION_INDEX_KEY,
+ uiClientKey,
+ useUIClient,
+} from '@/composables'
+import ModernLayout from '@/skins/modern/ModernLayout.vue'
+
+import { toastMock } from '../../../setup.js'
+import { createChargingStationData, createUIServerConfig } from '../../constants'
+import { createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+vi.mock('@/composables', async importOriginal => {
+ const actual = await importOriginal()
+ return { ...(actual as Record<string, unknown>), useUIClient: vi.fn() }
+})
+
+let mockClient: MockUIClient
+
+const singleServer = { uiServer: [createUIServerConfig({ name: 'A' })] }
+const multiServer = {
+ uiServer: [createUIServerConfig({ name: 'A' }), createUIServerConfig({ host: 'b', name: 'B' })],
+}
+
+/**
+ * @param eventType - WebSocket event name to look up
+ * @returns The registered handler for the given event, or undefined if not registered
+ */
+function getWSHandler (eventType: string): ((...args: unknown[]) => void) | undefined {
+ const call = vi
+ .mocked(mockClient.registerWSEventListener)
+ .mock.calls.find(([event]) => event === eventType)
+ return call?.[1] as ((...args: unknown[]) => void) | undefined
+}
+
+/**
+ * @param options - Mount options for the view
+ * @param options.chargingStations - Charging station data to provide
+ * @param options.configuration - UI server configuration to provide
+ * @param options.templates - Template names to provide
+ * @returns Mounted wrapper for ModernLayout
+ */
+function mountView (
+ options: {
+ chargingStations?: ReturnType<typeof createChargingStationData>[]
+ configuration?: typeof multiServer | typeof singleServer
+ templates?: string[]
+ } = {}
+) {
+ const { chargingStations = [], configuration = singleServer, templates = [] } = options
+ return mount(ModernLayout, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: ref(chargingStations),
+ [configurationKey as symbol]: ref(configuration),
+ [templatesKey as symbol]: ref(templates),
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ AddStationsDialog: true,
+ AuthorizeDialog: true,
+ ConfirmDialog: {
+ emits: ['cancel', 'confirm'],
+ props: ['title', 'message', 'confirmLabel', 'pending'],
+ template:
+ '<div class="stub-confirm-dialog"><button class="stub-confirm" @click="$emit(\'confirm\')">ok</button><button class="stub-cancel" @click="$emit(\'cancel\')">x</button></div>',
+ },
+ SetSupervisionUrlDialog: true,
+ SimulatorBar: {
+ emits: ['add', 'refresh', 'switch-server', 'toggle-simulator'],
+ props: [
+ 'refreshPending',
+ 'selectedServerIndex',
+ 'simulatorPending',
+ 'simulatorState',
+ 'uiServerConfigurations',
+ ],
+ template: `<div class="stub-sim-bar">
+ <button class="stub-refresh" @click="$emit('refresh')">r</button>
+ <button class="stub-add" @click="$emit('add')">+</button>
+ <button class="stub-toggle" @click="$emit('toggle-simulator')">t</button>
+ <button class="stub-switch" @click="$emit('switch-server', 1)">s</button>
+ </div>`,
+ },
+ StartTransactionDialog: true,
+ StationCard: {
+ emits: ['need-refresh', 'open-authorize', 'open-set-url', 'open-start-tx'],
+ props: ['chargingStation'],
+ template:
+ '<article class="stub-station-card"><button class="stub-need-refresh" @click="$emit(\'need-refresh\')">r</button></article>',
+ },
+ },
+ },
+ })
+}
+
+describe('ModernLayout', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ vi.mocked(useUIClient).mockReturnValue(mockClient as unknown as ReturnType<typeof useUIClient>)
+ localStorage.clear()
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ it('should render the empty state when no stations', async () => {
+ const wrapper = mountView()
+ await flushPromises()
+ expect(wrapper.text()).toContain('No charging stations')
+ })
+
+ it('should render a StationCard per charging station', async () => {
+ const wrapper = mountView({
+ chargingStations: [
+ createChargingStationData({
+ stationInfo: {
+ baseName: 'CS-1',
+ chargePointModel: 'm',
+ chargePointVendor: 'v',
+ chargingStationId: 'CS-1',
+ hashId: 'h1',
+ templateIndex: 0,
+ templateName: 't',
+ },
+ }),
+ createChargingStationData({
+ stationInfo: {
+ baseName: 'CS-2',
+ chargePointModel: 'm',
+ chargePointVendor: 'v',
+ chargingStationId: 'CS-2',
+ hashId: 'h2',
+ templateIndex: 0,
+ templateName: 't',
+ },
+ }),
+ ],
+ })
+ await flushPromises()
+ expect(wrapper.findAll('.stub-station-card')).toHaveLength(2)
+ })
+
+ it('should register WS event listeners on mount and unregisters on unmount', async () => {
+ const wrapper = mountView()
+ await flushPromises()
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('open', expect.any(Function))
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('error', expect.any(Function))
+ expect(mockClient.registerWSEventListener).toHaveBeenCalledWith('close', expect.any(Function))
+ wrapper.unmount()
+ expect(mockClient.unregisterWSEventListener).toHaveBeenCalled()
+ })
+
+ it('should fetch data when the WS open handler fires', async () => {
+ mountView()
+ await flushPromises()
+ mockClient.listChargingStations.mockClear()
+ mockClient.simulatorState.mockClear()
+ mockClient.listTemplates.mockClear()
+ const openHandler = getWSHandler('open')
+ openHandler?.()
+ await flushPromises()
+ expect(mockClient.listChargingStations).toHaveBeenCalled()
+ expect(mockClient.simulatorState).toHaveBeenCalled()
+ expect(mockClient.listTemplates).toHaveBeenCalled()
+ })
+
+ it('should open the confirm dialog when toggling a running simulator', async () => {
+ mockClient.simulatorState = vi.fn().mockResolvedValue({
+ state: { started: true, templateStatistics: {} },
+ status: 'success',
+ })
+ const wrapper = mountView()
+ await flushPromises()
+ await wrapper.find('.stub-refresh').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-toggle').trigger('click')
+ await flushPromises()
+ expect(wrapper.find('.stub-confirm-dialog').exists()).toBe(true)
+ })
+
+ it('should stop the simulator when confirm dialog fires confirm', async () => {
+ mockClient.simulatorState = vi.fn().mockResolvedValue({
+ state: { started: true, templateStatistics: {} },
+ status: 'success',
+ })
+ const wrapper = mountView()
+ await flushPromises()
+ await wrapper.find('.stub-refresh').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-toggle').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-confirm').trigger('click')
+ await flushPromises()
+ expect(mockClient.stopSimulator).toHaveBeenCalled()
+ expect(toastMock.success).toHaveBeenCalled()
+ })
+
+ it('should cancel the confirm dialog', async () => {
+ mockClient.simulatorState = vi.fn().mockResolvedValue({
+ state: { started: true, templateStatistics: {} },
+ status: 'success',
+ })
+ const wrapper = mountView()
+ await flushPromises()
+ await wrapper.find('.stub-refresh').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-toggle').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-cancel').trigger('click')
+ await flushPromises()
+ expect(wrapper.find('.stub-confirm-dialog').exists()).toBe(false)
+ expect(mockClient.stopSimulator).not.toHaveBeenCalled()
+ })
+
+ it('should start the simulator when toggled while stopped', async () => {
+ mockClient.simulatorState = vi.fn().mockResolvedValue({
+ state: { started: false, templateStatistics: {} },
+ status: 'success',
+ })
+ const wrapper = mountView()
+ await flushPromises()
+ await wrapper.find('.stub-refresh').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-toggle').trigger('click')
+ await flushPromises()
+ expect(mockClient.startSimulator).toHaveBeenCalled()
+ })
+
+ it('should toast an error when startSimulator fails', async () => {
+ mockClient.simulatorState = vi.fn().mockResolvedValue({
+ state: { started: false, templateStatistics: {} },
+ status: 'success',
+ })
+ mockClient.startSimulator = vi.fn().mockRejectedValue(new Error('x'))
+ const wrapper = mountView()
+ await flushPromises()
+ await wrapper.find('.stub-refresh').trigger('click')
+ await flushPromises()
+ await wrapper.find('.stub-toggle').trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+
+ it('should switch UI server on switch-server event', async () => {
+ const wrapper = mountView({ configuration: multiServer })
+ await flushPromises()
+ await wrapper.find('.stub-switch').trigger('click')
+ expect(mockClient.setConfiguration).toHaveBeenCalledWith(multiServer.uiServer[1])
+ })
+
+ it('should skip switch when the same server is selected (index persisted from localStorage)', async () => {
+ localStorage.setItem(UI_SERVER_CONFIGURATION_INDEX_KEY, '1')
+ const wrapper = mountView({ configuration: multiServer })
+ await flushPromises()
+ mockClient.setConfiguration.mockClear()
+ await wrapper.find('.stub-switch').trigger('click')
+ await flushPromises()
+ expect(mockClient.setConfiguration).not.toHaveBeenCalled()
+ })
+
+ it('should persist uiServerIndex to localStorage via the WS open listener (once)', async () => {
+ const wrapper = mountView({ configuration: multiServer })
+ await flushPromises()
+ await wrapper.find('.stub-switch').trigger('click')
+ await flushPromises()
+ const mockCalls = vi.mocked(mockClient.registerWSEventListener).mock.calls
+ const oneShotOpen = mockCalls.find(call => {
+ const event = call[0] as string
+ const opts = call[2] as undefined | { once?: boolean }
+ return event === 'open' && opts?.once === true
+ })
+ expect(oneShotOpen).toBeDefined()
+ const handler = (oneShotOpen as unknown as unknown[])[1] as () => void
+ handler()
+ expect(localStorage.getItem(UI_SERVER_CONFIGURATION_INDEX_KEY)).toBe('1')
+ })
+
+ it('should clear the station list when a WS error handler fires', async () => {
+ const stations = ref([createChargingStationData()])
+ const wrapper = mount(ModernLayout, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: stations,
+ [configurationKey as symbol]: ref(singleServer),
+ [templatesKey as symbol]: ref([]),
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ AddStationsDialog: true,
+ AuthorizeDialog: true,
+ ConfirmDialog: true,
+ SetSupervisionUrlDialog: true,
+ SimulatorBar: true,
+ StartTransactionDialog: true,
+ StationCard: true,
+ },
+ },
+ })
+ await flushPromises()
+ const errorHandler = getWSHandler('error')
+ errorHandler?.()
+ expect(stations.value).toHaveLength(0)
+ wrapper.unmount()
+ })
+
+ it('should open authorize dialog when station card emits open-authorize', async () => {
+ const station = createChargingStationData({
+ stationInfo: {
+ baseName: 'CS-1',
+ chargePointModel: 'm',
+ chargePointVendor: 'v',
+ chargingStationId: 'CS-1',
+ hashId: 'h1',
+ templateIndex: 0,
+ templateName: 't',
+ },
+ })
+ const wrapper = mount(ModernLayout, {
+ global: {
+ provide: {
+ [chargingStationsKey as symbol]: ref([station]),
+ [configurationKey as symbol]: ref(singleServer),
+ [templatesKey as symbol]: ref([]),
+ [uiClientKey as symbol]: mockClient,
+ },
+ stubs: {
+ AddStationsDialog: true,
+ AuthorizeDialog: true,
+ ConfirmDialog: true,
+ SetSupervisionUrlDialog: true,
+ SimulatorBar: true,
+ StartTransactionDialog: true,
+ StationCard: {
+ emits: ['need-refresh', 'open-authorize', 'open-set-url', 'open-start-tx'],
+ props: ['chargingStation'],
+ template: `<article class="stub-station-card">
+ <button class="stub-authorize" @click="$emit('open-authorize', { chargingStationId: 'CS-1', hashId: 'h1' })">auth</button>
+ <button class="stub-set-url" @click="$emit('open-set-url', { chargingStationId: 'CS-1', hashId: 'h1' })">url</button>
+ <button class="stub-start-tx" @click="$emit('open-start-tx', { chargingStationId: 'CS-1', connectorId: '1', hashId: 'h1' })">tx</button>
+ </article>`,
+ },
+ },
+ },
+ })
+ await flushPromises()
+ await wrapper.find('.stub-authorize').trigger('click')
+ await wrapper.find('.stub-set-url').trigger('click')
+ await wrapper.find('.stub-start-tx').trigger('click')
+ await flushPromises()
+ // Verify dialog components exist (stubbed to true = rendered when dialog state is set)
+ expect(wrapper.findComponent({ name: 'AuthorizeDialog' }).exists()).toBe(true)
+ wrapper.unmount()
+ })
+})
--- /dev/null
+/**
+ * @file Tests for modern presentational primitives
+ * @description Unit tests for ActionButton, StatePill, Modal, and ConfirmDialog components.
+ */
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+import ActionButton from '@/skins/modern/components/ActionButton.vue'
+import ConfirmDialog from '@/skins/modern/components/ConfirmDialog.vue'
+import Modal from '@/skins/modern/components/ModernModal.vue'
+import StatePill from '@/skins/modern/components/StatePill.vue'
+
+/**
+ * Returns a required button as HTMLButtonElement — throws on no match.
+ * @param selector CSS selector
+ * @returns matched button
+ */
+function queryButton (selector: string): HTMLButtonElement {
+ const el = document.body.querySelector<HTMLButtonElement>(selector)
+ if (el == null) throw new Error(`Selector not found: ${selector}`)
+ return el
+}
+
+/**
+ * Returns a required element as HTMLElement — throws on no match.
+ * @param selector CSS selector
+ * @returns matched element
+ */
+function queryElement (selector: string): HTMLElement {
+ const el = document.body.querySelector<HTMLElement>(selector)
+ if (el == null) throw new Error(`Selector not found: ${selector}`)
+ return el
+}
+
+describe('SimpleComponents', () => {
+ describe('ActionButton', () => {
+ it('should render slot content', () => {
+ const wrapper = mount(ActionButton, { slots: { default: 'Go' } })
+ expect(wrapper.text()).toContain('Go')
+ })
+
+ it('should emit click when clicked', async () => {
+ const wrapper = mount(ActionButton)
+ await wrapper.trigger('click')
+ expect(wrapper.emitted('click')).toHaveLength(1)
+ })
+
+ it('should apply primary variant class', () => {
+ const wrapper = mount(ActionButton, { props: { variant: 'primary' } })
+ expect(wrapper.classes()).toContain('modern-btn--primary')
+ })
+
+ it('should apply danger variant class', () => {
+ const wrapper = mount(ActionButton, { props: { variant: 'danger' } })
+ expect(wrapper.classes()).toContain('modern-btn--danger')
+ })
+
+ it('should apply ghost variant class', () => {
+ const wrapper = mount(ActionButton, { props: { variant: 'ghost' } })
+ expect(wrapper.classes()).toContain('modern-btn--ghost')
+ })
+
+ it('should apply chip variant class', () => {
+ const wrapper = mount(ActionButton, { props: { variant: 'chip' } })
+ expect(wrapper.classes()).toContain('modern-btn--chip')
+ })
+
+ it('should apply icon modifier class when icon prop is true', () => {
+ const wrapper = mount(ActionButton, { props: { icon: true } })
+ expect(wrapper.classes()).toContain('modern-btn--icon')
+ })
+
+ it('should disable button when pending', () => {
+ const wrapper = mount(ActionButton, { props: { pending: true } })
+ const el = wrapper.element as HTMLButtonElement
+ expect(el.disabled).toBe(true)
+ expect(el.getAttribute('aria-busy')).toBe('true')
+ expect(wrapper.find('.modern-btn__spinner').exists()).toBe(true)
+ })
+
+ it('should disable button when disabled prop is true', () => {
+ const wrapper = mount(ActionButton, { props: { disabled: true } })
+ const el = wrapper.element as HTMLButtonElement
+ expect(el.disabled).toBe(true)
+ })
+
+ it('should apply the title attribute when provided', () => {
+ const wrapper = mount(ActionButton, { props: { title: 'tip' } })
+ expect(wrapper.attributes('title')).toBe('tip')
+ })
+ })
+
+ describe('StatePill', () => {
+ it.each([['ok'], ['warn'], ['err'], ['idle']] as const)(
+ 'should apply modern-pill--%s variant class',
+ variant => {
+ const wrapper = mount(StatePill, { props: { variant }, slots: { default: variant } })
+ expect(wrapper.classes()).toContain(`modern-pill--${variant}`)
+ expect(wrapper.text()).toBe(variant)
+ }
+ )
+ })
+
+ describe('Modal', () => {
+ afterEach(() => {
+ document.body.innerHTML = ''
+ })
+
+ /**
+ * @param props modal props
+ * @param props.closeOnBackdrop whether clicking the backdrop closes the modal
+ * @param props.title modal title text
+ * @returns mounted wrapper
+ */
+ function mountModal (props: { closeOnBackdrop?: boolean; title?: string } = {}) {
+ return mount(Modal, {
+ attachTo: document.body,
+ props: { title: 'Hello', ...props },
+ slots: {
+ default: '<input data-testid="first" /><button data-testid="second">x</button>',
+ footer: '<span>F</span>',
+ },
+ })
+ }
+
+ it('should render the title and slot content in body', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ expect(document.body.textContent).toContain('Hello')
+ expect(document.body.querySelector('[data-testid="first"]')).not.toBeNull()
+ expect(document.body.querySelector('[data-testid="second"]')).not.toBeNull()
+ wrapper.unmount()
+ })
+
+ it('should render the footer slot when provided', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ expect(document.body.querySelector('.modern-modal__foot')).not.toBeNull()
+ wrapper.unmount()
+ })
+
+ it('should emit close when the close button is clicked', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ queryButton('.modern-modal__close').click()
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should emit close when Escape is pressed', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ const dialog = queryElement('.modern-modal')
+ dialog.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should emit close when backdrop is clicked (mousedown + mouseup on backdrop)', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ const backdrop = queryElement('.modern-modal__backdrop')
+ const down = new MouseEvent('mousedown', { bubbles: true })
+ Object.defineProperty(down, 'target', { value: backdrop })
+ backdrop.dispatchEvent(down)
+ const up = new MouseEvent('mouseup', { bubbles: true })
+ Object.defineProperty(up, 'target', { value: backdrop })
+ backdrop.dispatchEvent(up)
+ expect(wrapper.emitted('close')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should not emit close when mouseup target differs from backdrop (drag from input)', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ const backdrop = queryElement('.modern-modal__backdrop')
+ const input = queryElement('[data-testid="first"]')
+ // Mousedown on input (inside the modal), mouseup on backdrop — should NOT close.
+ const down = new MouseEvent('mousedown', { bubbles: true })
+ Object.defineProperty(down, 'target', { value: input })
+ backdrop.dispatchEvent(down)
+ const up = new MouseEvent('mouseup', { bubbles: true })
+ Object.defineProperty(up, 'target', { value: backdrop })
+ backdrop.dispatchEvent(up)
+ expect(wrapper.emitted('close')).toBeUndefined()
+ wrapper.unmount()
+ })
+
+ it('should not emit close on backdrop click when closeOnBackdrop is false', async () => {
+ const wrapper = mountModal({ closeOnBackdrop: false })
+ await nextTick()
+ const backdrop = queryElement('.modern-modal__backdrop')
+ const down = new MouseEvent('mousedown', { bubbles: true })
+ Object.defineProperty(down, 'target', { value: backdrop })
+ backdrop.dispatchEvent(down)
+ const up = new MouseEvent('mouseup', { bubbles: true })
+ Object.defineProperty(up, 'target', { value: backdrop })
+ backdrop.dispatchEvent(up)
+ expect(wrapper.emitted('close')).toBeUndefined()
+ wrapper.unmount()
+ })
+
+ it('should trap Tab from last focusable back to first (close button)', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ const dialog = queryElement('.modern-modal')
+ const closeBtn = queryButton('.modern-modal__close')
+ const button = queryButton('[data-testid="second"]')
+ button.focus()
+ const event = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Tab' })
+ dialog.dispatchEvent(event)
+ expect(document.activeElement).toBe(closeBtn)
+ wrapper.unmount()
+ })
+
+ it('should trap Shift+Tab from first focusable back to last', async () => {
+ const wrapper = mountModal()
+ await nextTick()
+ const dialog = queryElement('.modern-modal')
+ const closeBtn = queryButton('.modern-modal__close')
+ const button = queryButton('[data-testid="second"]')
+ closeBtn.focus()
+ const event = new KeyboardEvent('keydown', {
+ bubbles: true,
+ cancelable: true,
+ key: 'Tab',
+ shiftKey: true,
+ })
+ dialog.dispatchEvent(event)
+ expect(document.activeElement).toBe(button)
+ wrapper.unmount()
+ })
+
+ it('should handle Tab with a single focusable by keeping focus', async () => {
+ const wrapper = mount(Modal, {
+ attachTo: document.body,
+ props: { title: 'Empty' },
+ slots: { default: '<span>no focusables here</span>' },
+ })
+ await nextTick()
+ const dialog = queryElement('.modern-modal')
+ const closeBtn = queryButton('.modern-modal__close')
+ closeBtn.focus()
+ dialog.dispatchEvent(
+ new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Tab' })
+ )
+ expect(document.activeElement).toBe(closeBtn)
+ wrapper.unmount()
+ })
+ })
+
+ describe('ConfirmDialog', () => {
+ afterEach(() => {
+ document.body.innerHTML = ''
+ })
+
+ it('should render title and message', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: { message: 'Are you sure?', title: 'Delete?' },
+ })
+ await nextTick()
+ expect(document.body.textContent).toContain('Delete?')
+ expect(document.body.textContent).toContain('Are you sure?')
+ wrapper.unmount()
+ })
+
+ it('should use default cancel/confirm labels', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: { message: 'msg', title: 't' },
+ })
+ await nextTick()
+ expect(document.body.textContent).toContain('Cancel')
+ expect(document.body.textContent).toContain('Confirm')
+ wrapper.unmount()
+ })
+
+ it('should respect custom labels', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: {
+ cancelLabel: 'No',
+ confirmLabel: 'Yes',
+ message: 'msg',
+ title: 't',
+ },
+ })
+ await nextTick()
+ expect(document.body.textContent).toContain('No')
+ expect(document.body.textContent).toContain('Yes')
+ wrapper.unmount()
+ })
+
+ it('should emit cancel when the cancel button is clicked', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: { message: 'msg', title: 't' },
+ })
+ await nextTick()
+ const buttons = document.body.querySelectorAll<HTMLButtonElement>(
+ '.modern-modal__foot button'
+ )
+ buttons[0].click()
+ expect(wrapper.emitted('cancel')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should emit confirm when the confirm button is clicked', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: { message: 'msg', title: 't' },
+ })
+ await nextTick()
+ const buttons = document.body.querySelectorAll<HTMLButtonElement>(
+ '.modern-modal__foot button'
+ )
+ buttons[1].click()
+ expect(wrapper.emitted('confirm')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should emit cancel when the modal emits close', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: { message: 'msg', title: 't' },
+ })
+ await nextTick()
+ queryButton('.modern-modal__close').click()
+ expect(wrapper.emitted('cancel')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should pass pending and variant props to the confirm button', async () => {
+ const wrapper = mount(ConfirmDialog, {
+ attachTo: document.body,
+ props: {
+ confirmLabel: 'Go',
+ message: 'msg',
+ pending: true,
+ title: 't',
+ variant: 'primary',
+ },
+ })
+ await nextTick()
+ const buttons = document.body.querySelectorAll<HTMLButtonElement>(
+ '.modern-modal__foot button'
+ )
+ expect(buttons[1].disabled).toBe(true)
+ expect(buttons[1].classList.contains('modern-btn--primary')).toBe(true)
+ wrapper.unmount()
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for modern SimulatorBar
+ * @description Server switcher, simulator state display, action buttons.
+ */
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import SimulatorBar from '@/skins/modern/components/SimulatorBar.vue'
+
+import { createUIServerConfig } from '../../constants'
+
+const baseServer = createUIServerConfig({ name: 'Alpha' })
+const altServer = createUIServerConfig({ host: 'beta', name: 'Beta' })
+
+/**
+ * @param props overrides for SimulatorBar props
+ * @returns mounted wrapper
+ */
+function mountBar (props: Record<string, unknown> = {}) {
+ return mount(SimulatorBar, {
+ global: { stubs: { RouterLink: true } },
+ props: {
+ selectedServerIndex: 0,
+ uiServerConfigurations: [{ configuration: baseServer, index: 0 }],
+ ...props,
+ },
+ })
+}
+
+describe('SimulatorBar', () => {
+ it('should show Disconnected pill when simulatorState is undefined', () => {
+ const wrapper = mountBar()
+ expect(wrapper.text()).toContain('Disconnected')
+ })
+
+ it('should show Running label with version when started', () => {
+ const wrapper = mountBar({
+ simulatorState: { started: true, templateStatistics: {}, version: '2.0.0' },
+ })
+ expect(wrapper.text()).toMatch(/Running.*2\.0\.0/)
+ })
+
+ it('should show Stopped label when simulator state reports not started', () => {
+ const wrapper = mountBar({ simulatorState: { started: false, templateStatistics: {} } })
+ expect(wrapper.text()).toContain('Stopped')
+ })
+
+ it('should hide the server select when only one server configured', () => {
+ const wrapper = mountBar()
+ expect(wrapper.find('.modern-bar__select[aria-label="UI server"]').exists()).toBe(false)
+ })
+
+ it('should show the server select when multiple servers configured', () => {
+ const wrapper = mountBar({
+ uiServerConfigurations: [
+ { configuration: baseServer, index: 0 },
+ { configuration: altServer, index: 1 },
+ ],
+ })
+ expect(wrapper.find('.modern-bar__select[aria-label="UI server"]').exists()).toBe(true)
+ expect(wrapper.text()).toContain('Alpha')
+ expect(wrapper.text()).toContain('Beta')
+ })
+
+ it('should emit switch-server when server selection changes', async () => {
+ const wrapper = mountBar({
+ uiServerConfigurations: [
+ { configuration: baseServer, index: 0 },
+ { configuration: altServer, index: 1 },
+ ],
+ })
+ const select = wrapper.find('.modern-bar__select[aria-label="UI server"]')
+ await select.setValue(1)
+ expect(wrapper.emitted('switch-server')).toEqual([[1]])
+ })
+
+ it('should emit refresh when refresh button is clicked', async () => {
+ const wrapper = mountBar()
+ const [refreshBtn] = wrapper.findAll('.modern-btn')
+ await refreshBtn.trigger('click')
+ expect(wrapper.emitted('refresh')).toHaveLength(1)
+ })
+
+ it('should emit add when add-stations button is clicked', async () => {
+ const wrapper = mountBar()
+ const buttons = wrapper.findAll('.modern-btn')
+ const addBtn = buttons.find(btn => btn.text().includes('Add Stations'))
+ await addBtn?.trigger('click')
+ expect(wrapper.emitted('add')).toHaveLength(1)
+ })
+
+ it('should emit toggle-simulator when start/stop button is clicked', async () => {
+ const wrapper = mountBar({ simulatorState: { started: false, templateStatistics: {} } })
+ const buttons = wrapper.findAll('.modern-btn')
+ const toggleBtn = buttons.find(btn => btn.text().includes('Start Simulator'))
+ await toggleBtn?.trigger('click')
+ expect(wrapper.emitted('toggle-simulator')).toHaveLength(1)
+ })
+
+ it('should label the toggle button Stop when simulator is running', () => {
+ const wrapper = mountBar({ simulatorState: { started: true, templateStatistics: {} } })
+ expect(wrapper.text()).toContain('Stop Simulator')
+ })
+
+ it('should update internal select value when selectedServerIndex prop changes', async () => {
+ const wrapper = mountBar({
+ uiServerConfigurations: [
+ { configuration: baseServer, index: 0 },
+ { configuration: altServer, index: 1 },
+ ],
+ })
+ await wrapper.setProps({ selectedServerIndex: 1 })
+ const select = wrapper.find('.modern-bar__select[aria-label="UI server"]')
+ .element as HTMLSelectElement
+ expect(Number(select.value)).toBe(1)
+ })
+
+ it('should use host as option label when name is missing', () => {
+ const wrapper = mountBar({
+ uiServerConfigurations: [
+ { configuration: createUIServerConfig({ host: 'nohost' }), index: 0 },
+ { configuration: altServer, index: 1 },
+ ],
+ })
+ expect(wrapper.text()).toContain('nohost')
+ })
+
+ it('should call switchTheme when theme select changes', async () => {
+ const wrapper = mountBar()
+ const themeSelect = wrapper.find('.modern-bar__select[aria-label="Theme"]')
+ expect(themeSelect.exists()).toBe(true)
+ await themeSelect.trigger('change')
+ })
+
+ it('should call switchSkin when skin select changes', async () => {
+ const wrapper = mountBar()
+ const skinSelect = wrapper.find('.modern-bar__select[aria-label="Skin"]')
+ expect(skinSelect.exists()).toBe(true)
+ await skinSelect.trigger('change')
+ })
+
+ it('should emit switch-server with selectedIndex when server select changes via trigger', async () => {
+ const wrapper = mountBar({
+ uiServerConfigurations: [
+ { configuration: baseServer, index: 0 },
+ { configuration: altServer, index: 1 },
+ ],
+ })
+ const select = wrapper.find('.modern-bar__select[aria-label="UI server"]')
+ await select.trigger('change')
+ expect(wrapper.emitted('switch-server')).toBeDefined()
+ })
+})
--- /dev/null
+/**
+ * @file Tests for StationCard component
+ * @description Header pills, connector enumeration, start/connect/delete, supervision/authorize events.
+ */
+import { flushPromises, mount } from '@vue/test-utils'
+import { type ChargingStationData, OCPP16AvailabilityType } from 'ui-common'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { uiClientKey } from '@/composables'
+import StationCard from '@/skins/modern/components/StationCard.vue'
+
+import { toastMock } from '../../../setup.js'
+import {
+ createChargingStationData,
+ createConnectorStatus,
+ TEST_HASH_ID,
+ TEST_STATION_ID,
+} from '../../constants'
+import { createMockUIClient, type MockUIClient } from '../../helpers.js'
+
+let mockClient: MockUIClient
+let wrapper: ReturnType<typeof mountCard> | undefined
+
+/**
+ * Mounts StationCard with default or overridden station data.
+ * @param overrides partial ChargingStationData
+ * @returns mounted wrapper
+ */
+function mountCard (overrides: Partial<ChargingStationData> = {}) {
+ return mount(StationCard, {
+ attachTo: document.body,
+ global: { provide: { [uiClientKey as symbol]: mockClient } },
+ props: {
+ chargingStation: createChargingStationData(overrides),
+ },
+ })
+}
+
+describe('StationCard', () => {
+ beforeEach(() => {
+ mockClient = createMockUIClient()
+ })
+
+ afterEach(() => {
+ wrapper?.unmount()
+ document.body.innerHTML = ''
+ vi.clearAllMocks()
+ })
+
+ describe('header', () => {
+ it('should render the chargingStationId as title', () => {
+ wrapper = mountCard()
+ expect(wrapper.find('.modern-card__title').text()).toBe(TEST_STATION_ID)
+ })
+
+ it('should show "started" pill variant ok when started', () => {
+ wrapper = mountCard({ started: true })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[0].classes()).toContain('modern-pill--ok')
+ expect(pills[0].text()).toBe('started')
+ })
+
+ it('should show "stopped" pill variant err when stopped', () => {
+ wrapper = mountCard({ started: false })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[0].classes()).toContain('modern-pill--err')
+ expect(pills[0].text()).toBe('stopped')
+ })
+
+ it('should map wsState OPEN to modern-pill--ok', () => {
+ wrapper = mountCard({ wsState: WebSocket.OPEN })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[1].classes()).toContain('modern-pill--ok')
+ })
+
+ it('should map wsState CLOSED to modern-pill--err', () => {
+ wrapper = mountCard({ wsState: WebSocket.CLOSED })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[1].classes()).toContain('modern-pill--err')
+ })
+
+ it('should map wsState CLOSING to modern-pill--warn', () => {
+ wrapper = mountCard({ wsState: WebSocket.CLOSING })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[1].classes()).toContain('modern-pill--warn')
+ })
+
+ it('should map wsState CONNECTING to modern-pill--warn', () => {
+ wrapper = mountCard({ wsState: WebSocket.CONNECTING })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[1].classes()).toContain('modern-pill--warn')
+ })
+
+ it('should map unknown wsState (undefined) to modern-pill--idle', () => {
+ wrapper = mountCard({ wsState: undefined })
+ const pills = wrapper.findAll('.modern-card__pills .modern-pill')
+ expect(pills[1].classes()).toContain('modern-pill--idle')
+ })
+ })
+
+ describe('supervisionUrl display', () => {
+ it('should render protocol://host without trailing "/"', () => {
+ wrapper = mountCard({ supervisionUrl: 'wss://example.com:9000/' })
+ expect(wrapper.find('.modern-card__url').text()).toBe('wss://example.com:9000')
+ })
+
+ it('should keep path segments other than "/"', () => {
+ wrapper = mountCard({ supervisionUrl: 'wss://example.com/ocpp16' })
+ expect(wrapper.find('.modern-card__url').text()).toBe('wss://example.com/ocpp16')
+ })
+
+ it('should fall back to the raw URL string on invalid URL', () => {
+ wrapper = mountCard({ supervisionUrl: 'not-a-url' })
+ expect(wrapper.find('.modern-card__url').text()).toBe('not-a-url')
+ })
+
+ it('should emit open-set-url on URL row click', async () => {
+ wrapper = mountCard()
+ await wrapper.find('.modern-card__url-edit').trigger('click')
+ expect(wrapper.emitted('open-set-url')).toEqual([
+ [{ chargingStationId: TEST_STATION_ID, hashId: TEST_HASH_ID }],
+ ])
+ })
+
+ it('should emit open-set-url on keyboard activation of URL edit button', async () => {
+ wrapper = mountCard()
+ // Native <button> elements fire click on Enter/Space in real browsers;
+ // test-utils does not simulate this, so we trigger click directly
+ await wrapper.find('.modern-card__url-edit').trigger('click')
+ expect(wrapper.emitted('open-set-url')).toHaveLength(1)
+ })
+ })
+
+ describe('connectors', () => {
+ it('should render connectors from flat array', () => {
+ wrapper = mountCard({
+ connectors: [
+ { connectorId: 1, connectorStatus: createConnectorStatus() },
+ { connectorId: 2, connectorStatus: createConnectorStatus() },
+ ],
+ })
+ expect(wrapper.findAll('.modern-connector')).toHaveLength(2)
+ })
+
+ it('should filter out connectorId=0 (server-wide placeholder)', () => {
+ wrapper = mountCard({
+ connectors: [
+ { connectorId: 0, connectorStatus: createConnectorStatus() },
+ { connectorId: 1, connectorStatus: createConnectorStatus() },
+ ],
+ })
+ expect(wrapper.findAll('.modern-connector')).toHaveLength(1)
+ })
+
+ it('should flatten evses array when present', () => {
+ wrapper = mountCard({
+ connectors: undefined,
+ evses: [
+ {
+ evseId: 1,
+ evseStatus: {
+ availability: OCPP16AvailabilityType.OPERATIVE,
+ connectors: [
+ { connectorId: 0, connectorStatus: createConnectorStatus() },
+ { connectorId: 1, connectorStatus: createConnectorStatus() },
+ { connectorId: 2, connectorStatus: createConnectorStatus() },
+ ],
+ },
+ },
+ // evseId 0 is skipped
+ {
+ evseId: 0,
+ evseStatus: {
+ availability: OCPP16AvailabilityType.OPERATIVE,
+ connectors: [{ connectorId: 1, connectorStatus: createConnectorStatus() }],
+ },
+ },
+ ],
+ })
+ expect(wrapper.findAll('.modern-connector')).toHaveLength(2)
+ })
+
+ it('should show empty-connectors message when no connectors', () => {
+ wrapper = mountCard({ connectors: [] })
+ expect(wrapper.text()).toContain('No connectors')
+ })
+ })
+
+ describe('footer actions', () => {
+ it('should label Start when stopped, calls startChargingStation', async () => {
+ wrapper = mountCard({ started: false })
+ const buttons = wrapper.findAll('.modern-card__foot-group .modern-btn')
+ const startBtn = buttons.find(b => b.text() === 'Start')
+ await startBtn?.trigger('click')
+ await flushPromises()
+ expect(mockClient.startChargingStation).toHaveBeenCalled()
+ expect(wrapper.emitted('need-refresh')).toHaveLength(1)
+ })
+
+ it('should label Stop when started, calls stopChargingStation', async () => {
+ wrapper = mountCard({ started: true })
+ const buttons = wrapper.findAll('.modern-card__foot-group .modern-btn')
+ const stopBtn = buttons.find(b => b.text() === 'Stop')
+ await stopBtn?.trigger('click')
+ await flushPromises()
+ expect(mockClient.stopChargingStation).toHaveBeenCalled()
+ })
+
+ it('should label Connect when WS closed, opens connection', async () => {
+ wrapper = mountCard({ wsState: WebSocket.CLOSED })
+ const buttons = wrapper.findAll('.modern-card__foot-group .modern-btn')
+ const btn = buttons.find(b => b.text() === 'Connect')
+ await btn?.trigger('click')
+ await flushPromises()
+ expect(mockClient.openConnection).toHaveBeenCalled()
+ })
+
+ it('should label Disconnect when WS open, closes connection', async () => {
+ wrapper = mountCard({ wsState: WebSocket.OPEN })
+ const buttons = wrapper.findAll('.modern-card__foot-group .modern-btn')
+ const btn = buttons.find(b => b.text() === 'Disconnect')
+ await btn?.trigger('click')
+ await flushPromises()
+ expect(mockClient.closeConnection).toHaveBeenCalled()
+ })
+
+ it('should emit open-authorize from footer', async () => {
+ wrapper = mountCard()
+ const buttons = wrapper.findAll('.modern-card__foot-group .modern-btn')
+ const btn = buttons.find(b => b.text() === 'Authorize')
+ await btn?.trigger('click')
+ expect(wrapper.emitted('open-authorize')).toEqual([
+ [{ chargingStationId: TEST_STATION_ID, hashId: TEST_HASH_ID }],
+ ])
+ })
+
+ it('should open delete confirm dialog and cancel without an API call', async () => {
+ wrapper = mountCard()
+ const delBtn = wrapper.find('.modern-card__foot .modern-btn--danger')
+ await delBtn.trigger('click')
+ await flushPromises()
+ expect(document.body.textContent).toContain('Delete')
+ const cancelBtn = document.body.querySelectorAll<HTMLButtonElement>(
+ '.modern-modal__foot button'
+ )[0]
+ cancelBtn.click()
+ await flushPromises()
+ expect(mockClient.deleteChargingStation).not.toHaveBeenCalled()
+ })
+
+ it('should delete the station when delete confirm dialog is confirmed', async () => {
+ wrapper = mountCard()
+ const delBtn = wrapper.find('.modern-card__foot .modern-btn--danger')
+ await delBtn.trigger('click')
+ await flushPromises()
+ const confirmBtn = document.body.querySelectorAll<HTMLButtonElement>(
+ '.modern-modal__foot button'
+ )[1]
+ confirmBtn.click()
+ await flushPromises()
+ expect(mockClient.deleteChargingStation).toHaveBeenCalled()
+ })
+
+ it('should toast error when startChargingStation fails', async () => {
+ mockClient.startChargingStation = vi.fn().mockRejectedValue(new Error('x'))
+ wrapper = mountCard({ started: false })
+ const btn = wrapper
+ .findAll('.modern-card__foot-group .modern-btn')
+ .find(b => b.text() === 'Start')
+ await btn?.trigger('click')
+ await flushPromises()
+ expect(toastMock.error).toHaveBeenCalled()
+ })
+ })
+})
--- /dev/null
+/**
+ * @file Tests for skin registry
+ * @description Tests for the skin registry exports and structure.
+ */
+import { describe, expect, it } from 'vitest'
+
+import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+
+describe('registry', () => {
+ it('should export DEFAULT_SKIN as classic', () => {
+ expect(DEFAULT_SKIN).toBe('classic')
+ })
+
+ it('should export skins array with exactly 2 entries', () => {
+ expect(skins.length).toBe(2)
+ })
+
+ it('should include classic skin', () => {
+ const classic = skins.find(s => s.id === 'classic')
+ expect(classic).toBeDefined()
+ expect(classic?.label).toBe('Classic')
+ expect(typeof classic?.loadStyles).toBe('function')
+ })
+
+ it('should include modern skin', () => {
+ const modern = skins.find(s => s.id === 'modern')
+ expect(modern).toBeDefined()
+ expect(modern?.label).toBe('Modern')
+ expect(typeof modern?.loadStyles).toBe('function')
+ })
+
+ it('should have required fields for all skins', () => {
+ for (const skin of skins) {
+ expect(typeof skin.id).toBe('string')
+ expect(typeof skin.label).toBe('string')
+ expect(typeof skin.loadStyles).toBe('function')
+ }
+ })
+
+ it('should have unique skin ids', () => {
+ const ids = skins.map(s => s.id)
+ expect(new Set(ids).size).toBe(ids.length)
+ })
+
+ it('should return a promise from loadStyles for each skin', async () => {
+ for (const skin of skins) {
+ await expect(skin.loadStyles()).resolves.toBeDefined()
+ }
+ })
+
+ it('should resolve loadLayout to a valid component module', async () => {
+ for (const skin of skins) {
+ const mod = await skin.loadLayout()
+ expect(mod).toBeDefined()
+ expect(mod.default).toBeDefined()
+ expect(typeof mod.default === 'object' || typeof mod.default === 'function').toBe(true)
+ }
+ })
+})
'src/**/index.ts',
'src/shims-vue.d.ts',
'src/assets/**',
- 'src/router/index.ts',
],
include: ['src/**/*.{ts,vue}'],
provider: 'v8',
reporter: ['text', 'lcov'],
thresholds: {
- branches: 89,
+ branches: 87,
functions: 83,
lines: 91,
- statements: 91,
+ statements: 90,
},
},
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/*'],
execArgv: nodeMajor >= 25 ? ['--no-webstorage'] : [],
+ pool: 'forks',
restoreMocks: true,
root: fileURLToPath(new URL('./', import.meta.url)),
setupFiles: ['./tests/setup.ts'],
repositories / e-mobility-charging-stations-simulator.git / commitdiff
