Skip to content

Commit

Permalink
Add target energy API & UI for vehicles without SoC
Browse files Browse the repository at this point in the history
  • Loading branch information
andig authored Oct 4, 2022
1 parent 0ca26ea commit 26f1495
Show file tree
Hide file tree
Showing 24 changed files with 664 additions and 192 deletions.
6 changes: 6 additions & 0 deletions api/api.go
Original file line number Diff line number Diff line change
Expand Up @@ -221,3 +221,9 @@ type AuthProvider interface {
LoginHandler() http.HandlerFunc
LogoutHandler() http.HandlerFunc
}

// FeatureDescriber optionally provides a list of supported non-api features
type FeatureDescriber interface {
Features() []Feature
Has(Feature) bool
}
17 changes: 17 additions & 0 deletions api/feature.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
package api

type Feature int

func (f *Feature) UnmarshalText(text []byte) error {
feat, err := FeatureString(string(text))
if err == nil {
*f = feat
}
return err
}

//go:generate enumer -type Feature
const (
_ Feature = iota
Offline
)
75 changes: 75 additions & 0 deletions api/feature_enumer.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 7 additions & 1 deletion assets/js/components/AnimatedNumber.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<number :to="to" :format="format" :duration="duration" />
<number :to="to" :format="format" :duration="animationDuration" />
</template>

<script>
Expand All @@ -10,10 +10,16 @@ export default {
props: {
to: { type: Number },
format: { type: Function },
noAnimation: { type: Boolean },
},
data() {
return { duration: 0 };
},
computed: {
animationDuration() {
return this.noAnimation ? 0 : this.duration;
},
},
watch: {
to: function () {
this.duration = DURATION;
Expand Down
20 changes: 20 additions & 0 deletions assets/js/components/Loadpoint.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,26 @@ Base.args = {
activePhases: 2,
};

export const WithoutSoc = Template.bind({});
WithoutSoc.args = {
id: 0,
pvConfigured: true,
chargePower: 2800,
chargedEnergy: 7123,
chargeDuration: 95 * 60,
vehiclePresent: false,
enabled: true,
connected: true,
mode: "pv",
charging: true,
vehicleSoC: 66,
targetSoC: 90,
chargeCurrent: 7,
minCurrent: 6,
maxCurrent: 16,
activePhases: 2,
};

export const Idle = Template.bind({});
Idle.args = {
id: 0,
Expand Down
12 changes: 11 additions & 1 deletion assets/js/components/Loadpoint.vue
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
/>
</div>
<LabelAndValue
v-show="socBasedCharging"
:label="$t('main.loadpoint.charged')"
:value="fmtKWh(chargedEnergy)"
align="center"
Expand All @@ -92,6 +93,7 @@
<Vehicle
v-bind="vehicle"
@target-soc-updated="setTargetSoC"
@target-energy-updated="setTargetEnergy"
@target-time-updated="setTargetTime"
@target-time-removed="removeTargetTime"
@change-vehicle="changeVehicle"
Expand Down Expand Up @@ -132,6 +134,7 @@ export default {
title: String,
mode: String,
targetSoC: Number,
targetEnergy: Number,
remoteDisabled: Boolean,
remoteDisabledSource: String,
chargeDuration: Number,
Expand All @@ -147,6 +150,8 @@ export default {
vehicleSoC: Number,
vehicleTitle: String,
vehicleTargetSoC: Number,
vehicleCapacity: Number,
vehicleFeatureOffline: Boolean,
vehicles: Array,
minSoC: Number,
targetTime: String,
Expand All @@ -170,7 +175,6 @@ export default {
maxCurrent: Number,
phasesActive: Number,
chargeCurrent: Number,
vehicleCapacity: Number,
connectedDuration: Number,
chargeCurrents: Array,
chargeConfigured: Boolean,
Expand Down Expand Up @@ -205,6 +209,9 @@ export default {
showChargingIndicator: function () {
return this.charging && this.chargePower > 0;
},
socBasedCharging: function () {
return !this.vehicleFeatureOffline && this.vehiclePresent;
},
},
watch: {
phaseRemaining() {
Expand Down Expand Up @@ -250,6 +257,9 @@ export default {
setTargetSoC: function (soc) {
api.post(this.apiPath("targetsoc") + "/" + soc);
},
setTargetEnergy: function (kWh) {
api.post(this.apiPath("targetenergy") + "/" + kWh);
},
setMaxCurrent: function (maxCurrent) {
api.post(this.apiPath("maxcurrent") + "/" + maxCurrent);
},
Expand Down
119 changes: 119 additions & 0 deletions assets/js/components/TargetEnergySelect.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<template>
<LabelAndValue class="flex-grow-1" :label="$t('main.targetEnergy.label')" align="end">
<h3 class="value m-0 d-block d-sm-flex align-items-baseline justify-content-end">
<label class="position-relative">
<select :value="targetEnergy" class="custom-select" @change="change">
<option
v-for="{ energy, text, disabled } in options"
:key="energy"
:value="energy"
:disabled="disabled"
>
{{ text }}
</option>
</select>
<span
class="text-decoration-underline"
:class="{ 'text-gray fw-normal': !targetEnergy }"
>
<AnimatedNumber
:to="targetEnergy"
:format="formatKWh"
:no-animation="!targetEnergy"
/>
</span>
</label>

<div v-if="estimatedTargetSoC" class="extraValue ms-0 ms-sm-1 text-nowrap">
<AnimatedNumber :to="estimatedTargetSoC" :format="formatSoC" />
</div>
</h3>
</LabelAndValue>
</template>

<script>
import LabelAndValue from "./LabelAndValue.vue";
import AnimatedNumber from "./AnimatedNumber.vue";
import formatter from "../mixins/formatter";
export default {
name: "TargetEnergySelect",
components: { LabelAndValue, AnimatedNumber },
mixins: [formatter],
props: {
targetEnergy: Number,
socPerKwh: Number,
chargedEnergy: Number,
vehicleCapacity: Number,
},
emits: ["target-energy-updated"],
computed: {
maxEnergy: function () {
return this.vehicleCapacity || 100;
},
steps: function () {
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);
const disabled = energy < this.chargedEnergy / 1e3 && energy !== 0;
const soc = this.estimatedSoC(energy);
if (soc) {
text += ` (${this.formatSoC(soc)})`;
}
result.push({ energy, text, disabled });
}
return result;
},
estimatedTargetSoC: function () {
return this.estimatedSoC(this.targetEnergy);
},
},
methods: {
change: function (e) {
return this.$emit("target-energy-updated", parseInt(e.target.value, 10));
},
estimatedSoC: function (kWh) {
if (this.socPerKwh) {
return Math.round(kWh * this.socPerKwh);
}
return null;
},
formatKWh: function (value) {
if (value === 0) {
return this.$t("main.targetEnergy.noLimit");
}
return `${Math.round(value)} kWh`;
},
formatSoC: function (value) {
return `+${Math.round(value)}%`;
},
},
};
</script>

<style scoped>
.value {
font-size: 18px;
}
.extraValue {
color: var(--evcc-gray);
font-size: 14px;
}
.custom-select {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0;
}
</style>
Loading

0 comments on commit 26f1495

Please sign in to comment.