From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Fri, 3 Apr 2026 12:42:46 +0000 (+0200)
Subject: feat(webui): remove reload button (auto-refresh via WebSocket)
X-Git-Tag: ocpp-server@v4.3.0~22
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=4700340f91b9192307224cd4e4ae4501c70ca7c1;p=e-mobility-charging-stations-simulator.git

feat(webui): remove reload button (auto-refresh via WebSocket)

The WS server pushes refresh notifications on state changes,
making the manual reload button redundant. Remove ReloadButton
component, its styles, tests, and stub. Simplify need-refresh
handler to only reset add-stations toggle (data refresh and
CSTable re-render handled by server notification + watcher).
Remove dead --spacing-xl CSS variable from all themes.
---

diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css
index 44b06b80..988150d7 100644
--- a/ui/web/src/assets/themes/catppuccin-latte.css
+++ b/ui/web/src/assets/themes/catppuccin-latte.css
@@ -38,7 +38,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css
index 4365d68a..0d672871 100644
--- a/ui/web/src/assets/themes/sap-horizon.css
+++ b/ui/web/src/assets/themes/sap-horizon.css
@@ -43,7 +43,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
diff --git a/ui/web/src/assets/themes/tokyo-night-storm.css b/ui/web/src/assets/themes/tokyo-night-storm.css
index 0b223b54..8e04d285 100644
--- a/ui/web/src/assets/themes/tokyo-night-storm.css
+++ b/ui/web/src/assets/themes/tokyo-night-storm.css
@@ -39,7 +39,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue
deleted file mode 100644
index 7126ffbf..00000000
--- a/ui/web/src/components/buttons/ReloadButton.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <Button>
-    <span :class="{ spin: loading }"> &#8635; </span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/buttons/Button.vue'
-
-defineProps<{
-  loading: boolean
-}>()
-</script>
-
-<style scoped>
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spin {
-  animation: spin 2s linear infinite;
-}
-</style>
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index a50a6793..7fa38a28 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -90,23 +90,12 @@
       >
         Add Charging Stations
       </ToggleButton>
-      <ReloadButton
-        class="reload-button"
-        :loading="state.gettingChargingStations"
-        @click="getChargingStations()"
-      />
     </Container>
     <CSTable
       v-show="Array.isArray($chargingStations) && $chargingStations.length > 0"
       :key="state.renderChargingStations"
       :charging-stations="$chargingStations"
-      @need-refresh="
-        () => {
-          getChargingStations()
-          state.renderAddChargingStations = randomUUID()
-          state.renderChargingStations = randomUUID()
-        }
-      "
+      @need-refresh="() => { state.renderAddChargingStations = randomUUID() }"
     />
   </Container>
 </template>
@@ -123,7 +112,6 @@ import type {
   UUIDv4,
 } from '@/types'
 
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import StateButton from '@/components/buttons/StateButton.vue'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
@@ -375,12 +363,4 @@ const stopSimulator = (): void => {
 .buttons-container > * {
   flex: 1 1 0;
 }
-
-.reload-button {
-  font-size: 1.5rem;
-}
-
-.reload-button:active {
-  background-color: var(--color-primary);
-}
 </style>
diff --git a/ui/web/tests/unit/ChargingStationsView.test.ts b/ui/web/tests/unit/ChargingStationsView.test.ts
index 10c573b3..c0595efa 100644
--- a/ui/web/tests/unit/ChargingStationsView.test.ts
+++ b/ui/web/tests/unit/ChargingStationsView.test.ts
@@ -96,12 +96,6 @@ function mountView (
       stubs: {
         Container: { name: 'Container', template: '<div><slot /></div>' },
         CSTable: true,
-        ReloadButton: {
-          emits: ['click'],
-          name: 'ReloadButton',
-          props: ['loading'],
-          template: '<button @click="$emit(\'click\')" />',
-        },
         StateButton: StateButtonStub,
         ToggleButton: ToggleButtonStub,
       },
@@ -216,16 +210,6 @@ describe('ChargingStationsView', () => {
     })
   })
 
-  describe('reload button', () => {
-    it('should call listChargingStations when reload button clicked', async () => {
-      const wrapper = mountView()
-      const reloadButton = wrapper.findComponent({ name: 'ReloadButton' })
-      await reloadButton.trigger('click')
-      await flushPromises()
-      expect(mockClient.listChargingStations).toHaveBeenCalled()
-    })
-  })
-
   describe('CSTable visibility', () => {
     it('should hide CSTable when no charging stations', () => {
       const wrapper = mountView({ chargingStations: [] })
diff --git a/ui/web/tests/unit/SimpleComponents.test.ts b/ui/web/tests/unit/SimpleComponents.test.ts
index aa0f4d15..e598dcdf 100644
--- a/ui/web/tests/unit/SimpleComponents.test.ts
+++ b/ui/web/tests/unit/SimpleComponents.test.ts
@@ -1,6 +1,6 @@
 /**
  * @file Tests for simple presentational components
- * @description Unit tests for Button, Container, ReloadButton, NotFoundView, and App.
+ * @description Unit tests for Button, Container, NotFoundView, and App.
  */
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
@@ -9,7 +9,6 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 
 import App from '@/App.vue'
 import Button from '@/components/buttons/Button.vue'
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Container from '@/components/Container.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 
@@ -39,23 +38,6 @@ describe('Container', () => {
   })
 })
 
-describe('ReloadButton', () => {
-  it('should render reload icon', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: false } })
-    expect(wrapper.find('span').exists()).toBe(true)
-  })
-
-  it('should apply spin class when loading is true', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: true } })
-    expect(wrapper.find('span').classes()).toContain('spin')
-  })
-
-  it('should not apply spin class when loading is false', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: false } })
-    expect(wrapper.find('span').classes()).not.toContain('spin')
-  })
-})
-
 describe('NotFoundView', () => {
   it('should render 404 message', () => {
     const wrapper = mount(NotFoundView)