Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: higher precision battery icon (#13909)

Browse source
This commit is contained in:
Michael Geers 2024-05-15 21:59:25 +02:00 • committed by GitHub
parent a50b421906
commit d4c6ab7eb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/js/components/Energyflow/BatteryIcon.vue
View file

@ -1,13 +1,15 @@
<template>
<component :is="`shopicon-regular-${icon}`"></component>
<svg :style="svgStyle" viewBox="0 0 48 48">
<path d="M0-.004h48v48H0v-48z" fill="none" />
<path
d="M35 9.996h-3v-4a2 2 0 00-2-2H18a2 2 0 00-2 2v4h-3a2 2 0 00-2 2v30a2 2 0 002 2h22a2 2 0 002-2v-30a2 2 0 00-2-2zm-15-2h8v2h-8v-2zm13 32H15v-26h18v26z"
/>
<path :d="socRect" />
</svg>
</template>
<script>
import "@h2d2/shopicons/es/regular/batteryfull";
import "@h2d2/shopicons/es/regular/batterythreequarters";
import "@h2d2/shopicons/es/regular/batteryhalf";
import "@h2d2/shopicons/es/regular/batteryquarter";
import "@h2d2/shopicons/es/regular/batteryempty";
import icon from "../../mixins/icon";
export default {
name: "BatteryIcon",
@ -15,13 +17,11 @@ export default {
soc: { type: Number, default: 0 },
},
computed: {
icon: function () {
if (this.soc > 80) return "batteryfull";
if (this.soc > 60) return "batterythreequarters";
if (this.soc > 40) return "batteryhalf";
if (this.soc > 20) return "batteryquarter";
return "batteryempty";
socRect() {
const height = (this.soc / (100 / 22)).toFixed(2);
return `M30 38H18v-${height}h12v${height}z`;
},
},
mixins: [icon],
};
</script>