Skip to content

Commit b7f0ead

Browse files
cshagenLKuemmel
cshagen
authored and
LKuemmel
committed
Colors theme: adapt to integrated charging plans (#2495)
* adapt to integrated charging plans * align time charging information to new temporary template * fix pricechart axis
1 parent 8858eb5 commit b7f0ead

13 files changed

Lines changed: 376 additions & 168 deletions

File tree

‎packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/CPChargeConfigPanel.vue‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@
5454
>
5555
<i class="fa-solid fa-coins" />
5656
</a>
57+
<a
58+
class="nav-link"
59+
data-bs-toggle="tab"
60+
:data-bs-target="'#timedSettings' + cpid"
61+
>
62+
<i class="fa-solid fa-clock" />
63+
</a>
5764
<!-- <a
5865
class="nav-link"
5966
data-bs-toggle="tab"
@@ -114,7 +121,7 @@
114121
>
115122
<CPConfigScheduled
116123
v-if="chargeTemplate != undefined"
117-
:charge-template-id="cp.chargeTemplate?.id ?? 0"
124+
:charge-point="cp"
118125
/>
119126
</div>
120127
<div
@@ -125,6 +132,14 @@
125132
>
126133
<CPConfigEco v-if="chargeTemplate != undefined" :chargepoint="cp" />
127134
</div>
135+
<div
136+
:id="'timedSettings' + cpid"
137+
class="tab-pane"
138+
role="tabpanel"
139+
aria-labelledby="scheduled-tab"
140+
>
141+
<CPConfigTimed v-if="chargeTemplate != undefined" :charge-point="cp" />
142+
</div>
128143

129144
<!-- <div
130145
:id="'carSettings' + cpid"
@@ -159,11 +174,9 @@ import ConfigItem from '../../shared/ConfigItem.vue'
159174
import CPConfigInstant from './CPConfigInstant.vue'
160175
import CPConfigPv from './CPConfigPv.vue'
161176
import CPConfigScheduled from './CPConfigScheduled.vue'
177+
import CPConfigTimed from './CPConfigTimed.vue'
162178
import CPConfigEco from './CPConfigEco.vue'
163-
//import CPConfigVehicle from './CPConfigVehicle.vue'
164179
import CPChargeConfig from './CPChargeConfig.vue'
165-
//import PriceChart from '@/components/priceChart/PriceChart.vue'
166-
// import { etData } from '@/components/priceChart/model'
167180
const props = defineProps<{
168181
chargepoint: ChargePoint
169182
}>()

‎packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/CPConfigScheduled.vue‎

Lines changed: 78 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
11
<template>
2-
<p class="heading ms-1 pt-2">Zielladen:</p>
3-
<table class="table table-borderless">
2+
<p class="heading ms-1 pt-2">Pläne für Zielladen:</p>
3+
<table v-if="plans.length > 0" class="table table-borderless">
44
<thead>
55
<tr>
6-
<th class="tableheader">Ziel</th>
7-
<th class="tableheader">Limit</th>
6+
<th class="tableheader left" />
7+
<th class="tableheader left">Plan</th>
88
<th class="tableheader">Zeit</th>
9-
<th class="tableheader">Wiederholung</th>
10-
<th class="tableheader" />
9+
<th class="tableheader">Ziel</th>
10+
<th class="tableheader">Wiederh.</th>
11+
12+
<th class="tableheader right" />
1113
</tr>
1214
</thead>
1315
<tbody>
14-
<tr v-for="(plan, i) in plans" :key="i" :style="cellStyle(i)">
15-
<td class="tablecell">{{ plan.limit.soc_scheduled }}%</td>
16-
<td class="tablecell">{{ plan.limit.soc_limit }}%</td>
17-
<td class="tablecell">
18-
{{ timeString(i) }}
19-
</td>
20-
<td class="tablecell">
21-
{{ freqNames[plan.frequency.selected] }}
22-
</td>
16+
<tr
17+
v-for="(plan, i) in plans"
18+
:key="i"
19+
:class="plan.active ? 'text-bold' : 'text-normal'"
20+
>
2321
<td class="tablecell left">
2422
<a
25-
:href="
26-
'../../settings/#/VehicleConfiguration/charge_template/' +
27-
props.chargeTemplateId
28-
"
23+
v-if="props.chargePoint.chargeTemplate?.id != undefined"
24+
@click="toggleSwitch(i)"
2925
>
3026
<span
3127
:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
@@ -36,32 +32,68 @@
3632
</span
3733
></a>
3834
</td>
35+
<td class="tablecell left">{{ plan.name }}</td>
36+
<td class="tablecell">
37+
{{ timeString(i) }}
38+
</td>
39+
<td class="tablecell">
40+
{{
41+
plan.limit.selected == 'soc'
42+
? plan.limit.soc_scheduled + '%'
43+
: formatWattH(plan.limit.amount, 0)
44+
}}
45+
</td>
46+
<td class="tablecell">
47+
{{ freqNames[plan.frequency.selected] }}
48+
</td>
49+
50+
<td class="tablecell right">
51+
<i
52+
class="me-1 fa-solid fa-sm fa-circle-info"
53+
@click="showPlanDetails = !showPlanDetails"
54+
/>
55+
</td>
3956
</tr>
4057
</tbody>
4158
</table>
59+
<p v-else class="ms-1">
60+
Pläne für das Zielladen können in den Einstellungen des Ladeprofils angelegt
61+
werden .
62+
</p>
63+
64+
<div v-if="showPlanDetails">
65+
<ScheduleDetails
66+
v-for="plan in plans"
67+
:key="plan.id"
68+
:plan="plan"
69+
@close="showPlanDetails = false"
70+
/>
71+
</div>
4272
</template>
4373

4474
<script setup lang="ts">
45-
import { computed } from 'vue'
46-
import { scheduledChargingPlans, type ChargeSchedule } from '../model'
75+
import { computed, ref } from 'vue'
76+
import { ChargePoint, type ChargeSchedule } from '../model'
77+
import { updateChargeTemplate } from '@/assets/js/sendMessages'
78+
import ScheduleDetails from './ScheduleDetails.vue'
79+
import { formatWattH } from '@/assets/js/helpers'
4780
81+
const showPlanDetails = ref(false)
4882
const freqNames: { [key: string]: string } = {
4983
daily: 'Täglich',
5084
once: 'Einmal',
51-
weekly: 'Wöchentlich',
85+
weekly: 'Woche',
5286
}
5387
const props = defineProps<{
54-
chargeTemplateId: number
88+
chargePoint: ChargePoint
5589
}>()
5690
5791
//computed
58-
const plans = computed(() => {
59-
let result: ChargeSchedule[] = []
60-
if (scheduledChargingPlans[props.chargeTemplateId]) {
61-
result = Object.values(scheduledChargingPlans[props.chargeTemplateId])
62-
}
63-
return result
64-
})
92+
const plans = computed(
93+
() =>
94+
props.chargePoint?.chargeTemplate?.chargemode.scheduled_charging.plans ??
95+
([] as ChargeSchedule[]),
96+
)
6597
//methods
6698
function timeString(key: number) {
6799
return plans.value[key].time
@@ -72,9 +104,11 @@ function switchStyle(key: number) {
72104
: 'var(--color-switchRed)'
73105
return { color: style }
74106
}
75-
function cellStyle(key: number) {
76-
const style = plans.value[key].active ? 'bold' : 'regular'
77-
return { 'font-weight': style }
107+
function toggleSwitch(i: number) {
108+
props.chargePoint.chargeTemplate!.chargemode.scheduled_charging.plans[
109+
i
110+
]!.active = !plans.value[i].active
111+
updateChargeTemplate(props.chargePoint.id)
78112
}
79113
</script>
80114

@@ -83,7 +117,7 @@ function cellStyle(key: number) {
83117
color: var(--color-fg);
84118
background-color: var(--color-bg);
85119
text-align: center;
86-
font-size: var(--font-medium);
120+
font-size: var(--font-settings);
87121
}
88122
89123
.tableheader {
@@ -101,4 +135,14 @@ function cellStyle(key: number) {
101135
.left {
102136
text-align: left;
103137
}
138+
.text-bold {
139+
font-weight: bold;
140+
}
141+
.text-normal {
142+
font-weight: normal;
143+
}
144+
.fa-circle-info {
145+
color: var(--color-charging);
146+
cursor: pointer;
147+
}
104148
</style>

‎packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/CPConfigTimed.vue‎

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
11
<template>
2+
<ConfigItem title="Zeitplan aktiv" icon="fa-clock" :fullwidth="true">
3+
<template #inline-item>
4+
<SwitchInput v-model="cp.timedCharging" />
5+
</template>
6+
</ConfigItem>
27
<p class="heading ms-1 pt-2">Zeitpläne:</p>
38
<table class="table table-borderless">
49
<thead>
510
<tr>
11+
<th class="tableheader left" />
612
<th class="tableheader">Von</th>
713
<th class="tableheader">Bis</th>
8-
<th class="tableheader">Ladestrom</th>
9-
<th class="tableheader">Wiederholung</th>
14+
<th class="tableheader">Strom</th>
15+
<th class="tableheader">Wiederh.</th>
1016
<th class="tableheader right" />
1117
</tr>
1218
</thead>
1319
<tbody>
14-
<tr v-for="(plan, i) in plans" :key="i" :style="cellStyle(i)">
20+
<tr
21+
v-for="(plan, i) in plans"
22+
:key="i"
23+
:class="plan.active ? 'text-bold' : 'text-normal'"
24+
>
25+
<td class="tablecell left">
26+
<span
27+
v-if="props.chargePoint.chargeTemplate?.id != undefined"
28+
@click="toggleSwitch(i)"
29+
>
30+
<span
31+
:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
32+
:style="switchStyle(i)"
33+
class="fa"
34+
type="button"
35+
>
36+
</span
37+
></span>
38+
</td>
1539
<td class="tablecell">
1640
{{ plan.time[0] }}
1741
</td>
@@ -22,56 +46,61 @@
2246
<td class="tablecell">
2347
{{ freqNames[plan.frequency.selected] }}
2448
</td>
25-
<td class="tablecell left">
26-
<a
27-
:href="
28-
'../../settings/#/VehicleConfiguration/charge_template/' +
29-
props.chargeTemplateId
30-
"
31-
>
32-
<span
33-
:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
34-
:style="switchStyle(i)"
35-
class="fa"
36-
type="button"
37-
>
38-
</span
39-
></a>
49+
<td class="tablecell right">
50+
<i
51+
class="me-1 fa-solid fa-sm fa-circle-info"
52+
@click="showPlanDetails = !showPlanDetails"
53+
/>
4054
</td>
4155
</tr>
4256
</tbody>
4357
</table>
58+
59+
<div v-if="showPlanDetails">
60+
<TimePlanDetails
61+
v-for="plan in plans"
62+
:key="plan.id"
63+
:plan="plan"
64+
@close="showPlanDetails = false"
65+
/>
66+
</div>
4467
</template>
4568

4669
<script setup lang="ts">
47-
import { computed } from 'vue'
48-
import { timeChargingPlans } from '../model'
70+
import { computed, ref } from 'vue'
71+
import { ChargePoint, type ChargeTimePlan } from '../model'
72+
import { updateChargeTemplate } from '@/assets/js/sendMessages'
73+
import TimePlanDetails from './TimePlanDetails.vue'
74+
import SwitchInput from '@/components/shared/SwitchInput.vue'
75+
import ConfigItem from '../../shared/ConfigItem.vue'
76+
const props = defineProps<{
77+
chargePoint: ChargePoint
78+
}>()
4979
80+
const showPlanDetails = ref(false)
81+
const cp = props.chargePoint
5082
const freqNames: { [key: string]: string } = {
5183
daily: 'Täglich',
5284
once: 'Einmal',
53-
weekly: 'Wöchentlich',
85+
weekly: 'Woche',
5486
}
55-
const props = defineProps<{
56-
chargeTemplateId: number
57-
}>()
58-
const plans = computed(() => {
59-
if (timeChargingPlans[props.chargeTemplateId]) {
60-
let result = Object.values(timeChargingPlans[props.chargeTemplateId])
61-
return result ?? []
62-
} else {
63-
return []
64-
}
65-
})
87+
88+
const plans = computed(
89+
() =>
90+
props.chargePoint?.chargeTemplate?.time_charging.plans ??
91+
([] as ChargeTimePlan[]),
92+
)
93+
6694
function switchStyle(key: number) {
6795
const style = plans.value[key].active
6896
? 'var(--color-switchGreen)'
6997
: 'var(--color-switchRed)'
7098
return { color: style }
7199
}
72-
function cellStyle(key: number) {
73-
const style = plans.value[key].active ? 'bold' : 'regular'
74-
return { 'font-weight': style }
100+
function toggleSwitch(i: number) {
101+
props.chargePoint.chargeTemplate!.time_charging.plans[i]!.active =
102+
!plans.value[i].active
103+
updateChargeTemplate(props.chargePoint.id)
75104
}
76105
</script>
77106

@@ -80,7 +109,7 @@ function cellStyle(key: number) {
80109
color: var(--color-fg);
81110
background-color: var(--color-bg);
82111
text-align: center;
83-
font-size: var(--font-medium);
112+
font-size: var(--font-settings);
84113
}
85114
.tableheader {
86115
color: var(--color-menu);
@@ -101,4 +130,14 @@ function cellStyle(key: number) {
101130
.right {
102131
text-align: right;
103132
}
133+
.text-bold {
134+
font-weight: bold;
135+
}
136+
.text-normal {
137+
font-weight: normal;
138+
}
139+
.fa-circle-info {
140+
color: var(--color-charging);
141+
cursor: pointer;
142+
}
104143
</style>

0 commit comments

Comments
 (0)