Skip to content

Koala tables #2759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benderl merged 5 commits into from
Sep 16, 2025
Merged

Koala tables #2759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d277ea
tab flex layout
benderl Sep 15, 2025
1bfe753
cleanup dark theme css
benderl Sep 15, 2025
d19eb9a
optimize table cell width
benderl Sep 15, 2025
17b9e86
linting
benderl Sep 15, 2025
4c89bfc
no wrap in power data
benderl Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@
'full-height': props.fullHeight,
}"
>
<q-card-section class="row items-center justify-between">
<q-card-section class="row no-wrap items-center justify-between">
<div class="text-h6 text-bold ellipsis" :title="cardTitle">
{{ cardTitle }}
</div>
<q-icon
class="cursor-pointer q-ml-auto"
<q-space />
<q-btn
v-if="showSettings"
name="settings"
size="sm"
icon="settings"
flat
round
dense
@click="dialog?.open()"
/>
</q-card-section>
Expand Down
50 changes: 42 additions & 8 deletions packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,34 @@
@row-click="onRowClick"
>
<!-- full view table body slots -->
<template #body-cell-name="slotProps">
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
<div class="ellipsis" :title="slotProps.row.name">
{{ slotProps.row.name }}
</div>
</q-td>
</template>
<template #body-cell-vehicle="slotProps">
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
<div class="ellipsis" :title="slotProps.row.vehicle">
{{ slotProps.row.vehicle }}
</div>
</q-td>
</template>
<template #body-cell-plugged="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<ChargePointStateIcon :charge-point-id="slotProps.row.id" />
</q-td>
</template>

<template #body-cell-chargeMode="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<ChargePointMode :charge-point-id="slotProps.row.id" />
</q-td>
</template>

<template #body-cell-timeCharging="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<ChargePointTimeCharging
:charge-point-id="slotProps.row.id"
:readonly="true"
Expand All @@ -47,7 +61,7 @@
</template>

<template #body-cell-powerColumn="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<ChargePointPowerData
:power="slotProps.row.power"
:phase-number="slotProps.row.phaseNumber"
Expand All @@ -56,18 +70,32 @@
/>
</q-td>
</template>
<template #body-cell-charged="slotProps">
<q-td auto-width :class="`text-${slotProps.col.align}`">
{{ slotProps.row.charged }}
</q-td>
</template>
<template #body-cell-soc="slotProps">
<q-td auto-width :class="`text-${slotProps.col.align}`">
{{ slotProps.row.soc }}
</q-td>
</template>
<!-- compact view table body slots -->
<!-- compact view charge point name and vehicle name displayed in one field -->
<template #body-cell-nameAndVehicle="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
{{ slotProps.row.name }}<br />
<span class="text-caption">{{ slotProps.row.vehicle }}</span>
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
<div class="ellipsis" :title="slotProps.row.name">
{{ slotProps.row.name }}
</div>
<div class="ellipsis text-caption" :title="slotProps.row.vehicle">
{{ slotProps.row.vehicle }}
</div>
</q-td>
</template>

<!-- compact view charge point charge mode, plug status and time charging displayed in one field -->
<template #body-cell-modePluggedTimeCharging="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<div class="items-center">
<ChargePointMode :charge-point-id="slotProps.row.id" />
<ChargePointStateIcon :charge-point-id="slotProps.row.id" />
Expand Down Expand Up @@ -228,3 +256,9 @@ const onRowClick = (row: ChargePointRow) => {
modalChargePointCardVisible.value = true;
};
</script>

<style scoped lang="scss">
.max-width-0 {
max-width: 0;
}
</style>
2 changes: 1 addition & 1 deletion packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
:class="[
'text-no-wrap items-center',
columnDisplayFormat ? 'column' : 'row inline',
columnDisplayFormat ? 'column' : 'row inline no-wrap',
]"
>
<span>{{ power }}</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
class="card-width"
:class="{ 'full-height': props.fullHeight }"
>
<q-card-section class="row">
<q-card-section class="row no-wrap">
<div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
{{ vehicle?.name }}
</div>
Expand Down
34 changes: 31 additions & 3 deletions packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,35 @@
@row-click="onRowClick"
>
<!-- "col" = column must match Quasar naming convention -->
<template #row-expand="slotProps">
<VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
</template>
<template #body-cell-name="slotProps">
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
<div class="ellipsis" :title="slotProps.row.name">
{{ slotProps.row.name }}
</div>
</q-td>
</template>
<template #body-cell-manufacturer="slotProps">
<q-td auto-width :class="`text-${slotProps.col.align}`">
{{ slotProps.row.manufacturer }}
</q-td>
</template>
<template #body-cell-model="slotProps">
<q-td auto-width :class="`text-${slotProps.col.align}`">
{{ slotProps.row.model }}
</q-td>
</template>
<template #body-cell-plugged="slotProps">
<q-td :class="`text-${slotProps.col.align}`">
<q-td auto-width :class="`text-${slotProps.col.align}`">
<ChargePointStateIcon :vehicle-id="slotProps.row.id" />
</q-td>
</template>
<template #row-expand="slotProps">
<VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
<template #body-cell-vehicleSocValue="slotProps">
<q-td auto-width :class="`text-${slotProps.col.align}`">
{{ slotProps.row.vehicleSocValue }}
</q-td>
</template>
</BaseTable>

Expand Down Expand Up @@ -119,3 +141,9 @@ const onRowClick = (row: VehicleRow) => {
modalChargeVehicleCardVisible.value = true;
};
</script>

<style scoped lang="scss">
.max-width-0 {
max-width: 0;
}
</style>
6 changes: 4 additions & 2 deletions packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,9 +178,11 @@ const chartLabels = computed(() => {
: Math.floor(Date.now() / 1000);
const dataRange = maxTimestamp - minTimestamp;
let range = 300; // 5 Minuten
if (dataRange <= 30 * 60) { // bis 15 Minuten
if (dataRange <= 30 * 60) {
// bis 30 Minuten
range = 60; // 1 Minute
} else if (dataRange <= 60 * 60) { // bis 30 Minuten
} else if (dataRange <= 60 * 60) {
// bis 60 Minuten
range = 120; // 2 Minuten
Comment on lines 180 to 186
Copy link
Contributor

@tpd-opitz tpd-opitz Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

einheitliche Syntax?

   const eine_minute = 60
   let range = (dataRange <= 30 * eine_minute)  
      ?  eine_minute
      : (dataRange <= 60 * eine_minute)
           ? 2 * eine_minute
           : 5 * eine_minute;

}

Expand Down
73 changes: 2 additions & 71 deletions packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ $battery: #ba7128;
}
// Table styling
.sticky-header-table {
/* height or max-height is important */
height: 310px;
flex-grow: 1;
max-width: 100%;

.q-table__top,
.q-table__bottom,
Expand Down Expand Up @@ -258,12 +258,8 @@ $dark-tab-icon: #d7d9e0;
.theme-text {
color: var(--q-white) !important;
}
.deselected {
color: var(--q-grey) !important;
}
// Header colors
.q-header {
background-color: var(--q-background-2);
color: var(--q-white);
}
// Drawer background
Expand All @@ -276,44 +272,27 @@ $dark-tab-icon: #d7d9e0;
color: var(--q-tab-icon) !important;
}
}
// Tab panel background
.q-tab-panels {
background-color: var(--q-background-2);
}
// Tab CSS
.q-tab {
background-color: var(--q-background-2);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid var(--q-secondary);
}
// Tab active background color
.q-tab--active {
background-color: color.scale($dark-secondary, $lightness: 10%);
}
// Carousel control arrows and buttons
.q-carousel__control {
.q-btn {
&:before {
box-shadow: none;
}
.q-icon {
color: var(--q-carousel-control);
&:before {
color: var(--q-carousel-control);
box-shadow: none;
}
}
}
}
// Slide container background
.q-carousel__slide {
background-color: var(--q-background-2);
color: var(--q-white);
}
// Slide background
.q-card {
background-color: var(--q-secondary);
color: var(--q-white);
}
// Input field text label color
Expand Down Expand Up @@ -351,65 +330,17 @@ $dark-tab-icon: #d7d9e0;

// Table styling - Dark Theme
.sticky-header-table {
/* height or max-height is important */
height: 310px;

.q-table__top,
.q-table__bottom,
thead tr:first-child th {
background-color: var(--q-primary);
color: var(--q-white);
font-size: 0.9rem;
}

thead tr th {
position: sticky;
z-index: 1;
}

thead tr:first-child th {
top: 0;
}

/* this is when the loading indicator appears */
&.q-table--loading thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}

/* prevent scrolling behind sticky top row on focus */
tbody {
/* height of all previous header rows */
scroll-margin-top: 48px;
background-color: var(--q-secondary);
color: var(--q-white);
}

tbody tr,
.q-table__middle,
.q-table__grid-content {
background-color: var(--q-secondary);
}

tbody tr:hover {
background-color: rgba(255, 255, 255, 0.07);
}

// Scrollbar styling for tables - Dark Theme
.q-table__middle.q-virtual-scroll {
// Firefox
scrollbar-width: thin;
scrollbar-color: var(--q-primary) var(--q-secondary);
}
}

.q-scrollarea {
border: 1px solid var(--q-secondary) !important;
}

//Scrollbar styling für .q-list - Dark Theme
.q-list {
scrollbar-width: thin;
scrollbar-color: var(--q-primary) var(--q-list);
}
}
17 changes: 13 additions & 4 deletions packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@
</q-tab> -->
</q-tabs>
<!-- Tab Panels -->
<q-tab-panels v-model="tab" class="col">
<q-tab-panels v-model="tab" class="col column">
<!-- Charge Points -->
<q-tab-panel name="charge-points">
<q-tab-panel name="charge-points" class="column">
<ChargePointInformation />
</q-tab-panel>
<!-- Vehicles -->
<q-tab-panel name="vehicles">
<q-tab-panel name="vehicles" class="column">
<VehicleInformation />
</q-tab-panel>
<!-- Batteries -->
<q-tab-panel v-if="batteryConfigured" name="batteries">
<q-tab-panel v-if="batteryConfigured" name="batteries" class="column">
<BatteryInformation />
</q-tab-panel>
<!-- Smart Home -->
Expand Down Expand Up @@ -68,10 +68,19 @@ const batteryConfigured = computed(() => {
<style scoped lang="scss">
.chart-section {
height: 40vh;
min-height: 350px;
}

.tab-section,
.tab-section :deep(.q-panel-parent .q-panel) {
flex-grow: 1;
display: flex;
flex-direction: column;
}

.tab-section .q-tab-panel {
max-width: 100vw;
flex-grow: 1;
}

@media screen and (max-width: $breakpoint-xs-max) {
Expand Down