Skip to content

Commit c877550

Browse files
naltatisnaltatis
authored
Fix vehicle soc progress appearance (evcc-io#808)
1 parent 99fa403 commit c877550

File tree

9 files changed

+55
-48
lines changed

9 files changed

+55
-48
lines changed

‎assets/js/components/Loadpoint.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
</div>
107107

108108
<div class="col-12 col-md-4 d-none d-md-block mt-3" v-if="multi">
109-
<div class="mb-2">Modus</div>
109+
<div class="mb-2 pb-1">Modus</div>
110110
<Mode
111111
class="btn-group-sm"
112112
:mode="mode"
@@ -115,7 +115,7 @@
115115
></Mode>
116116
</div>
117117
<div class="col-12 col-md-4 d-none d-md-block mt-3" v-if="multi && hasTargetSoC">
118-
<div class="mb-2">Ladeziel</div>
118+
<div class="mb-2 pb-1">Ladeziel</div>
119119
<Soc
120120
class="btn-group-sm"
121121
:soc="targetSoC"

‎assets/js/components/Vehicle.stories.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Base.args = {
1919
connected: true,
2020
hasVehicle: true,
2121
socCharge: 42,
22+
targetSoC: 90,
2223
};
2324

2425
export const Connected = Template.bind({});
@@ -138,4 +139,5 @@ DisconnectedKnownSoc.args = {
138139
enabled: false,
139140
hasVehicle: true,
140141
socCharge: 17,
142+
targetSoC: 60,
141143
};

‎assets/js/components/Vehicle.vue‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
<template>
22
<div>
3-
<div class="mb-3">
3+
<div class="mb-2 pb-1">
44
{{ socTitle || "Fahrzeug" }}
55
</div>
6-
<div class="progress" style="height: 28px; font-size: 100%">
7-
<div
8-
class="progress-bar"
9-
role="progressbar"
10-
:class="{
11-
'progress-bar-striped': charging,
12-
'progress-bar-animated': charging,
13-
[progressColor]: true,
14-
}"
15-
:style="{ width: socChargeDisplayWidth + '%' }"
16-
>
17-
{{ socChargeDisplayValue }}
6+
<div class="soc-bar">
7+
<div class="progress small">
8+
<div
9+
class="progress-bar"
10+
role="progressbar"
11+
:class="{
12+
'progress-bar-striped': charging,
13+
'progress-bar-animated': charging,
14+
[progressColor]: true,
15+
}"
16+
:style="{ width: `${socChargeDisplayWidth}%` }"
17+
>
18+
{{ socChargeDisplayValue }}
19+
</div>
20+
<div
21+
v-if="remainingSoCWidth > 0"
22+
class="progress-bar"
23+
role="progressbar"
24+
:class="{
25+
'progress-bar-striped': charging,
26+
'progress-bar-animated': charging,
27+
[progressColor]: true,
28+
'bg-muted': true,
29+
}"
30+
:style="{ width: `${remainingSoCWidth}%` }"
31+
></div>
32+
<div
33+
v-if="socMarker"
34+
class="soc-marker"
35+
:class="{ [progressColor]: true }"
36+
:style="{ left: `${socMarker}%` }"
37+
></div>
1838
</div>
19-
<div
20-
v-if="remainingSoCWidth"
21-
class="progress-bar"
22-
role="progressbar"
23-
:class="{
24-
'progress-bar-striped': charging,
25-
'progress-bar-animated': charging,
26-
[progressColor]: true,
27-
'bg-muted': true,
28-
}"
29-
:style="{ width: remainingSoCWidth + '%' }"
30-
></div>
3139
</div>
3240
<small v-if="markerLabel()" class="subline my-2 text-secondary">
3341
<fa-icon
@@ -88,13 +96,10 @@ export default {
8896
return socCharge;
8997
},
9098
socMarker: function () {
91-
if (!this.connected || !this.hasVehicle) {
92-
return null;
93-
}
9499
if (this.minSoCActive) {
95100
return this.minSoC;
96101
}
97-
if (this.targetChargeEnabled) {
102+
if (this.targetSoC > this.socCharge) {
98103
return this.targetSoC;
99104
}
100105
return null;
@@ -118,13 +123,13 @@ export default {
118123
return this.targetTime && this.timerSet;
119124
},
120125
remainingSoCWidth: function () {
121-
if (!this.connected || this.socCharge === 100) {
126+
if (this.socCharge === 100) {
122127
return null;
123128
}
124129
if (this.minSoCActive) {
125130
return this.minSoC - this.socCharge;
126131
}
127-
if (this.targetChargeEnabled) {
132+
if (this.targetSoC > this.socCharge) {
128133
return this.targetSoC - this.socCharge;
129134
}
130135
return null;
@@ -158,22 +163,22 @@ export default {
158163
display: flex;
159164
align-items: center;
160165
}
166+
.soc-bar {
167+
position: relative;
168+
height: 31px;
169+
}
161170
.progress {
162-
overflow: visible;
171+
height: 100%;
172+
font-size: 0.875rem;
163173
}
164174
.progress-bar.bg-muted {
165-
position: relative;
166-
overflow: visible;
167175
color: var(--white);
168176
}
169-
.progress-bar.bg-muted::after {
177+
.soc-marker {
170178
position: absolute;
171-
right: 0;
172-
top: -5px;
173-
height: calc(100% + 10px);
179+
top: -2px;
180+
bottom: -2px;
174181
width: 2px;
175-
background: var(--dark);
176-
content: "";
177182
}
178183
.bg-disabled {
179184
background-color: var(--gray);

dist/css/index.82bccd36.css renamed to dist/css/index.3b453e73.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.52eaf30c.css" rel="preload" as="style"><link href="css/index.82bccd36.css" rel="preload" as="style"><link href="js/chunk-vendors.35669cb4.js" rel="preload" as="script"><link href="js/index.3222209e.js" rel="preload" as="script"><link href="css/chunk-vendors.52eaf30c.css" rel="stylesheet"><link href="css/index.82bccd36.css" rel="stylesheet"></head><body><script>window.evcc = {
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.52eaf30c.css" rel="preload" as="style"><link href="css/index.3b453e73.css" rel="preload" as="style"><link href="js/chunk-vendors.35669cb4.js" rel="preload" as="script"><link href="js/index.eb5cb609.js" rel="preload" as="script"><link href="css/chunk-vendors.52eaf30c.css" rel="stylesheet"><link href="css/index.3b453e73.css" rel="stylesheet"></head><body><script>window.evcc = {
22
version: "[[.Version]]",
33
configured: "[[.Configured]]",
4-
};</script><div id="app"></div><div id="toasts"></div><script src="js/chunk-vendors.35669cb4.js"></script><script src="js/index.3222209e.js"></script></body></html>
4+
};</script><div id="app"></div><div id="toasts"></div><script src="js/chunk-vendors.35669cb4.js"></script><script src="js/index.eb5cb609.js"></script></body></html>

‎dist/js/index.3222209e.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎dist/js/index.3222209e.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/js/index.eb5cb609.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/index.eb5cb609.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)