Improve UI for small capacity vehicles (#5174)
This commit is contained in:
parent
31965b0059
commit
037f46a10d
12 changed files with 65 additions and 52 deletions
|
|
@ -50,7 +50,7 @@
|
|||
<LabelAndValue
|
||||
:label="$t('main.loadpoint.power')"
|
||||
:value="chargePower"
|
||||
:valueFmt="fmtkWUnit"
|
||||
:valueFmt="fmtPower"
|
||||
class="mb-2"
|
||||
align="start"
|
||||
/>
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<LabelAndValue
|
||||
v-show="socBasedCharging"
|
||||
:label="$t('main.loadpoint.charged')"
|
||||
:value="fmtKWh(chargedEnergy)"
|
||||
:value="fmtEnergy(chargedEnergy)"
|
||||
align="center"
|
||||
/>
|
||||
<LabelAndValue
|
||||
|
|
@ -284,10 +284,14 @@ export default {
|
|||
removeVehicle() {
|
||||
api.delete(this.apiPath("vehicle"));
|
||||
},
|
||||
fmtkWUnit(value) {
|
||||
fmtPower(value) {
|
||||
const inKw = value == 0 || value >= 1000;
|
||||
return this.fmtKw(value, inKw);
|
||||
},
|
||||
fmtEnergy(value) {
|
||||
const inKw = value == 0 || value >= 1000;
|
||||
return this.fmtKWh(value, inKw);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@
|
|||
>
|
||||
<AnimatedNumber
|
||||
:to="targetEnergy"
|
||||
:format="formatKWh"
|
||||
:format="fmtEnergy"
|
||||
:no-animation="!targetEnergy"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div v-if="estimatedTargetSoC" class="extraValue ms-0 ms-sm-1 text-nowrap">
|
||||
<AnimatedNumber :to="estimatedTargetSoC" :format="formatSoC" />
|
||||
<AnimatedNumber :to="estimatedTargetSoC" :format="fmtSoC" />
|
||||
</div>
|
||||
</h3>
|
||||
</LabelAndValue>
|
||||
|
|
@ -52,22 +52,22 @@ export default {
|
|||
return this.vehicleCapacity || 100;
|
||||
},
|
||||
steps: function () {
|
||||
if (this.maxEnergy < 25) {
|
||||
return 1;
|
||||
}
|
||||
if (this.maxEnergy < 50) {
|
||||
return 2;
|
||||
}
|
||||
if (this.maxEnergy < 1) return 0.05;
|
||||
if (this.maxEnergy < 2) return 0.1;
|
||||
if (this.maxEnergy < 5) return 0.25;
|
||||
if (this.maxEnergy < 10) return 0.5;
|
||||
if (this.maxEnergy < 25) return 1;
|
||||
if (this.maxEnergy < 50) return 2;
|
||||
return 5;
|
||||
},
|
||||
options: function () {
|
||||
const result = [];
|
||||
for (let energy = 0; energy <= this.maxEnergy; energy += this.steps) {
|
||||
let text = this.formatKWh(energy);
|
||||
let text = this.fmtEnergy(energy);
|
||||
const disabled = energy < this.chargedEnergy / 1e3 && energy !== 0;
|
||||
const soc = this.estimatedSoC(energy);
|
||||
if (soc) {
|
||||
text += ` (${this.formatSoC(soc)})`;
|
||||
text += ` (${this.fmtSoC(soc)})`;
|
||||
}
|
||||
result.push({ energy, text, disabled });
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
change: function (e) {
|
||||
return this.$emit("target-energy-updated", parseInt(e.target.value, 10));
|
||||
return this.$emit("target-energy-updated", parseFloat(e.target.value));
|
||||
},
|
||||
estimatedSoC: function (kWh) {
|
||||
if (this.socPerKwh) {
|
||||
|
|
@ -87,13 +87,16 @@ export default {
|
|||
}
|
||||
return null;
|
||||
},
|
||||
formatKWh: function (value) {
|
||||
fmtEnergy: function (value) {
|
||||
if (value === 0) {
|
||||
return this.$t("main.targetEnergy.noLimit");
|
||||
}
|
||||
return `${Math.round(value)} kWh`;
|
||||
|
||||
const inKWh = this.steps >= 0.1;
|
||||
const digits = inKWh && this.steps < 1 ? 1 : 0;
|
||||
return this.fmtKWh(value * 1e3, inKWh, true, digits);
|
||||
},
|
||||
formatSoC: function (value) {
|
||||
fmtSoC: function (value) {
|
||||
return `+${Math.round(value)}%`;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
v-else
|
||||
class="flex-grow-1"
|
||||
:label="$t('main.loadpoint.charged')"
|
||||
:value="fmtKWh(chargedEnergy)"
|
||||
:value="fmtEnergy(chargedEnergy)"
|
||||
:extraValue="chargedSoC"
|
||||
align="start"
|
||||
/>
|
||||
|
|
@ -186,6 +186,10 @@ export default {
|
|||
removeVehicle() {
|
||||
this.$emit("remove-vehicle");
|
||||
},
|
||||
fmtEnergy(value) {
|
||||
const inKw = value == 0 || value >= 1000;
|
||||
return this.fmtKWh(value, inKw);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,10 @@ export default {
|
|||
val = Math.abs(val);
|
||||
return val >= this.fmtLimit ? this.round(val / 1e3, this.fmtDigits) : this.round(val, 0);
|
||||
},
|
||||
fmtKw: function (watt = 0, kw = true, withUnit = true) {
|
||||
const digits = kw ? 1 : 0;
|
||||
fmtKw: function (watt = 0, kw = true, withUnit = true, digits) {
|
||||
if (digits === undefined) {
|
||||
digits = kw ? 1 : 0;
|
||||
}
|
||||
const value = kw ? watt / 1000 : watt;
|
||||
let unit = "";
|
||||
if (withUnit) {
|
||||
|
|
@ -30,8 +32,8 @@ export default {
|
|||
maximumFractionDigits: digits,
|
||||
}).format(value)}${unit}`;
|
||||
},
|
||||
fmtKWh: function (val) {
|
||||
return this.fmtKw(val) + "h";
|
||||
fmtKWh: function (watt, kw, withUnit, digits) {
|
||||
return this.fmtKw(watt, kw, withUnit, digits) + "h";
|
||||
},
|
||||
fmtNumber: function (number, decimals) {
|
||||
return new Intl.NumberFormat(this.$i18n.locale, {
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ vehicles:
|
|||
type: template
|
||||
template: offline
|
||||
title: grüner Honda e
|
||||
capacity: 26
|
||||
capacity: 9
|
||||
|
||||
site:
|
||||
title: Zuhause
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ type LoadPoint struct {
|
|||
Enable, Disable ThresholdConfig
|
||||
ResetOnDisconnect bool `mapstructure:"resetOnDisconnect"`
|
||||
onDisconnect api.ActionConfig
|
||||
targetEnergy int // Target charge energy for dumb vehicles
|
||||
targetEnergy float64 // Target charge energy for dumb vehicles
|
||||
|
||||
MinCurrent float64 // PV mode: start current Min+PV mode: min current
|
||||
MaxCurrent float64 // Max allowed current. Physically ensured by the charger
|
||||
|
|
@ -1724,7 +1724,7 @@ func (lp *LoadPoint) Update(sitePower float64, cheap, batteryBuffered bool) {
|
|||
}
|
||||
|
||||
case lp.targetEnergyReached():
|
||||
lp.log.DEBUG.Printf("targetEnergy reached: %.0fkWh > %dkWh", lp.getChargedEnergy()/1e3, lp.targetEnergy)
|
||||
lp.log.DEBUG.Printf("targetEnergy reached: %.0fkWh > %0.1fkWh", lp.getChargedEnergy()/1e3, lp.targetEnergy)
|
||||
err = lp.disableUnlessClimater()
|
||||
|
||||
case lp.targetSocReached():
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@ type API interface {
|
|||
// SetMode sets the charge mode
|
||||
SetMode(api.ChargeMode)
|
||||
// GetTargetEnergy returns the charge target energy
|
||||
GetTargetEnergy() int
|
||||
GetTargetEnergy() float64
|
||||
// SetTargetEnergy sets the charge target energy
|
||||
SetTargetEnergy(int)
|
||||
SetTargetEnergy(float64)
|
||||
// GetTargetSoC returns the charge target soc
|
||||
GetTargetSoC() int
|
||||
// SetTargetSoC sets the charge target soc
|
||||
|
|
|
|||
|
|
@ -64,14 +64,14 @@ func (lp *LoadPoint) setChargedEnergy(energy float64) {
|
|||
}
|
||||
|
||||
// GetTargetEnergy returns loadpoint charge target energy
|
||||
func (lp *LoadPoint) GetTargetEnergy() int {
|
||||
func (lp *LoadPoint) GetTargetEnergy() float64 {
|
||||
lp.Lock()
|
||||
defer lp.Unlock()
|
||||
return lp.SoC.target
|
||||
return lp.targetEnergy
|
||||
}
|
||||
|
||||
// setTargetEnergy sets loadpoint charge target energy (no mutex)
|
||||
func (lp *LoadPoint) setTargetEnergy(energy int) {
|
||||
func (lp *LoadPoint) setTargetEnergy(energy float64) {
|
||||
lp.targetEnergy = energy
|
||||
// TODO soctimer
|
||||
// if lp.socTimer != nil {
|
||||
|
|
@ -81,7 +81,7 @@ func (lp *LoadPoint) setTargetEnergy(energy int) {
|
|||
}
|
||||
|
||||
// SetTargetEnergy sets loadpoint charge target energy
|
||||
func (lp *LoadPoint) SetTargetEnergy(energy int) {
|
||||
func (lp *LoadPoint) SetTargetEnergy(energy float64) {
|
||||
lp.Lock()
|
||||
defer lp.Unlock()
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
|
|
@ -20,8 +20,8 @@
|
|||
<meta name="theme-color" content="#020318" />
|
||||
|
||||
<title>evcc</title>
|
||||
<script type="module" crossorigin src="./assets/index.36048902.js"></script>
|
||||
<link rel="stylesheet" href="./assets/index.0150814f.css">
|
||||
<script type="module" crossorigin src="./assets/index.bea554dc.js"></script>
|
||||
<link rel="stylesheet" href="./assets/index.339d9da9.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -113,11 +113,11 @@ func (s *HTTPd) RegisterSiteHandlers(site site.API, cache *util.Cache) {
|
|||
|
||||
routes := map[string]route{
|
||||
"mode": {[]string{"POST", "OPTIONS"}, "/mode/{value:[a-z]+}", chargeModeHandler(lp)},
|
||||
"targetenergy": {[]string{"POST", "OPTIONS"}, "/targetenergy/{value:[0-9]+}", intHandler(pass(lp.SetTargetEnergy), lp.GetTargetEnergy)},
|
||||
"targetenergy": {[]string{"POST", "OPTIONS"}, "/targetenergy/{value:[0-9.]+}", floatHandler(pass(lp.SetTargetEnergy), lp.GetTargetEnergy)},
|
||||
"targetsoc": {[]string{"POST", "OPTIONS"}, "/targetsoc/{value:[0-9]+}", intHandler(pass(lp.SetTargetSoC), lp.GetTargetSoC)},
|
||||
"minsoc": {[]string{"POST", "OPTIONS"}, "/minsoc/{value:[0-9]+}", intHandler(pass(lp.SetMinSoC), lp.GetMinSoC)},
|
||||
"mincurrent": {[]string{"POST", "OPTIONS"}, "/mincurrent/{value:[0-9]+}", floatHandler(pass(lp.SetMinCurrent), lp.GetMinCurrent)},
|
||||
"maxcurrent": {[]string{"POST", "OPTIONS"}, "/maxcurrent/{value:[0-9]+}", floatHandler(pass(lp.SetMaxCurrent), lp.GetMaxCurrent)},
|
||||
"mincurrent": {[]string{"POST", "OPTIONS"}, "/mincurrent/{value:[0-9.]+}", floatHandler(pass(lp.SetMinCurrent), lp.GetMinCurrent)},
|
||||
"maxcurrent": {[]string{"POST", "OPTIONS"}, "/maxcurrent/{value:[0-9.]+}", floatHandler(pass(lp.SetMaxCurrent), lp.GetMaxCurrent)},
|
||||
"phases": {[]string{"POST", "OPTIONS"}, "/phases/{value:[0-9]+}", phasesHandler(lp)},
|
||||
"targetcharge": {[]string{"POST", "OPTIONS"}, "/targetcharge/{soc:[0-9]+}/{time:[0-9TZ:.-]+}", targetChargeHandler(lp)},
|
||||
"targetcharge2": {[]string{"DELETE", "OPTIONS"}, "/targetcharge", targetChargeRemoveHandler(lp)},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue