From 6bdc4b91771c189c99f3a4051a9e003f4cd4642d Mon Sep 17 00:00:00 2001 From: BrettS Date: Fri, 2 May 2025 18:29:17 +0200 Subject: [PATCH 1/6] Refactor BaseTable as reuseable component --- .../koala/source/src/components/BaseTable.vue | 91 +++++++++++-------- 1 file changed, 54 insertions(+), 37 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue index 91d56c5baf..8d4391321c 100644 --- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue +++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue @@ -2,10 +2,10 @@
- - + + From 12763fc947bf8023d8984fe9ac45d5546747b895 Mon Sep 17 00:00:00 2001 From: BrettS Date: Fri, 2 May 2025 18:33:11 +0200 Subject: [PATCH 2/6] Add Vehicle table view - refactor chargepoint table view --- packages/modules/web_themes/koala/config.py | 13 +- .../src/components/ChargePointInformation.vue | 323 +++++++----------- .../source/src/components/VehicleCard.vue | 1 + .../src/components/VehicleInformation.vue | 166 ++++++++- .../components/models/base-table-models.ts | 4 - .../models/charge-point-information-models.ts | 12 - .../source/src/stores/mqtt-store-model.ts | 6 +- 7 files changed, 303 insertions(+), 222 deletions(-) delete mode 100644 packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts delete mode 100644 packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts diff --git a/packages/modules/web_themes/koala/config.py b/packages/modules/web_themes/koala/config.py index 49d26a47f7..2dc0ef6c6a 100644 --- a/packages/modules/web_themes/koala/config.py +++ b/packages/modules/web_themes/koala/config.py @@ -7,12 +7,15 @@ class KoalaWebThemeConfiguration: def __init__(self, history_chart_range: int = 3600, - card_view_breakpoint: int = 4, - table_search_input_field: bool = False) -> None: + chargePoint_card_view_breakpoint: int = 4, + vehicle_card_view_breakpoint: int = 4, + chargePoint_table_search_input_field: bool = False, + vehicle_table_search_input_field: bool = False) -> None: self.history_chart_range = history_chart_range - self.card_view_breakpoint = card_view_breakpoint - self.table_search_input_field = table_search_input_field - + self.chargePoint_card_view_breakpoint = chargePoint_card_view_breakpoint + self.vehicle_card_view_breakpoint = vehicle_card_view_breakpoint + self.chargePoint_table_search_input_field = chargePoint_table_search_input_field + self.vehicle_table_search_input_field = vehicle_table_search_input_field @auto_str class KoalaWebTheme: diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue index 73a0bef361..e955bc570a 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue @@ -1,232 +1,167 @@ - - + + diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue index 95fc693676..faa3ac80f0 100644 --- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue @@ -71,6 +71,7 @@
Ladestand: {{ vehicleSocValue }}%
+ diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue index 10ec40f6f7..1118ba5090 100644 --- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue +++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue @@ -1,21 +1,177 @@ + + diff --git a/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts b/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts deleted file mode 100644 index cdb984c8d5..0000000000 --- a/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface BaseRow { - id: string | number; - [key: string]: unknown; -} diff --git a/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts b/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts deleted file mode 100644 index 2677220552..0000000000 --- a/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { BaseRow } from './base-table-models'; - -export interface ChargePointRow extends BaseRow { - id: number; - name: string | undefined; - vehicle: string; - plugged: string; - mode: string | undefined; - soc: string; - power: string | number | object | undefined; - charged: string | number | object | undefined; -} diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts index dad34d5b95..906c80e817 100644 --- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts +++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts @@ -1,7 +1,9 @@ export interface ThemeConfiguration { history_chart_range: number; - card_view_breakpoint: number; - table_search_input_field: boolean; + chargePoint_card_view_breakpoint: number; + vehicle_card_view_breakpoint: number; + chargePoint_table_search_input_field: boolean; + vehicle_table_search_input_field: boolean; } export interface ConnectionOptions { From 93f9703e4171c4b8a4bfd42c121b18b779c09bfa Mon Sep 17 00:00:00 2001 From: BrettS Date: Mon, 5 May 2025 17:57:28 +0200 Subject: [PATCH 3/6] Zeitladen - Indikator auf der Karte bzw. in der Tabelle --- .../source/src/components/ChargePointCard.vue | 7 +++++++ .../src/components/ChargePointInformation.vue | 15 +++++++++++++++ .../src/components/ChargePointTimeCharging.vue | 16 ++++++++++++++-- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue index 521674767d..0ac9fa33cd 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue @@ -8,6 +8,12 @@ + @@ -91,6 +97,7 @@ import ChargePointFaultMessage from './ChargePointFaultMessage.vue'; import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue'; import ChargePointSettings from './ChargePointSettings.vue'; import ChargePointManualSocDialog from './ChargePointManualSocDialog.vue'; +import ChargePointTimeCharging from './ChargePointTimeCharging.vue'; import { useQuasar } from 'quasar'; const mqttStore = useMqttStore(); diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue index e955bc570a..40128124b8 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue @@ -24,6 +24,16 @@ + @@ -65,6 +75,7 @@ import BaseCarousel from 'src/components/BaseCarousel.vue'; import BaseTable from 'src/components/BaseTable.vue'; import ChargePointCard from 'src/components/ChargePointCard.vue'; import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue'; +import ChargePointTimeCharging from './ChargePointTimeCharging.vue'; const mqttStore = useMqttStore(); const { chargeModes } = useChargeModes(); @@ -98,12 +109,14 @@ const tableRowData = computed(() => { chargePointSoc !== undefined ? `${Math.round(chargePointSoc)}%` : '0%'; const power = mqttStore.chargePointPower(id, 'textValue'); const charged = mqttStore.chargePointEnergyChargedPlugged(id, 'textValue'); + const timeCharging = mqttStore.chargePointConnectedVehicleTimeCharging(id); return { id, name, vehicle, plugged, chargeMode, + timeCharging, soc, power, charged, @@ -117,6 +130,7 @@ const columnConfig = { 'vehicle', 'plugged', 'chargeMode', + 'timeCharging', 'soc', 'power', 'charged', @@ -126,6 +140,7 @@ const columnConfig = { vehicle: 'Fahrzeug', plugged: 'Status', chargeMode: 'Lademodus', + timeCharging: 'Zeitladen', soc: 'Ladestand', power: 'Leistung', charged: 'Geladen', diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue index 33a7caf909..269b359350 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue @@ -3,8 +3,12 @@ v-if="props.readonly" :name="timeChargingEnabled ? icon.on : icon.off" :color="timeChargingEnabled ? 'primary' : ''" - size="sm" - /> + :size="props.iconSize ? props.iconSize : 'sm'" + > + {{ + timeChargingEnabled ? 'Zeitladen aktiviert' : 'Zeitladen deaktiviert' + }} + Date: Tue, 6 May 2025 18:50:31 +0200 Subject: [PATCH 4/6] Fix resizing issue exiting full srceen mode (HistoryChart) --- .../source/src/components/ChartCarousel.vue | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue index 2613a0bd9d..3a38d1ebea 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue @@ -12,8 +12,8 @@ class="full-width full-height bg-transparent carousel-height" > @@ -42,7 +42,7 @@