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

Session UI: small tweaks and fixes (#16867)

Browse source
This commit is contained in:
Michael Geers 2024-10-26 10:43:42 +02:00 • committed by GitHub
parent 7191ce9fe2
commit b5a1b15967
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 50 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/js/colors.js
View file

@ -43,8 +43,8 @@ function updateCssColors() {
colors.self = style.getPropertyValue("--evcc-self");
colors.grid = style.getPropertyValue("--evcc-grid");
colors.background = style.getPropertyValue("--evcc-background");
colors.pricePerKWh = style.getPropertyValue("--evcc-grid");
colors.co2PerKWh = style.getPropertyValue("--evcc-grid");
colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium");
colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium");
}
// update colors on theme change

1
assets/js/components/Config/PropertyField.vue
View file

@ -49,6 +49,7 @@
class="w-50"
v-model="value"
equal-width
transparent
:options="[
{ value: false, name: $t('config.options.boolean.no') },
{ value: true, name: $t('config.options.boolean.yes') },

2
assets/js/components/Config/UserInterfaceSettings.vue
View file

@ -5,6 +5,7 @@
id="settingsDesign"
v-model="theme"
class="w-100"
transparent
:options="
THEMES.map((value) => ({
value,
@ -31,6 +32,7 @@
id="settingsUnit"
v-model="unit"
class="w-75"
transparent
:options="
UNITS.map((value) => ({
value,

1
assets/js/components/Config/VehicleModal.vue
View file

@ -120,6 +120,7 @@
{ name: '2-phases', value: '2' },
{ name: '3-phases', value: undefined },
]"
transparent
equal-width
/>
</FormRow>

6
assets/js/components/SelectGroup.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="mode-group border d-inline-flex" :class="{ large }" role="group">
<div class="mode-group border d-inline-flex" :class="{ large, transparent }" role="group">
<button
v-for="(option, i) in options"
:id="i === 0 ? id : null"
@ -24,6 +24,7 @@ export default {
modelValue: [Number, String],
equalWidth: Boolean,
large: Boolean,
transparent: Boolean,
},
emits: ["update:modelValue"],
};
@ -34,6 +35,9 @@ export default {
border: 2px solid var(--evcc-default-text);
border-radius: 17px;
padding: 4px;
}
.mode-group:not(.transparent) {
background: var(--evcc-background);
}

35
assets/js/components/Sessions/CostHistoryChart.vue
View file

@ -256,27 +256,22 @@ export default {
return null;
}
return (
datasetLabel +
": " +
(this.costType === TYPES.PRICE
const valueFmt =
this.costType === TYPES.PRICE
? this.fmtPricePerKWh(value, this.currency, false)
: this.fmtCo2Medium(value))
);
: this.fmtCo2Medium(value);
return `${datasetLabel}: ${valueFmt}`;
}
return (
datasetLabel +
": " +
(this.costType === TYPES.PRICE
? this.fmtMoney(value || 0, this.currency, true, true)
: this.fmtGrams(value || 0))
);
return value
? `${datasetLabel}: ${
this.costType === TYPES.PRICE
? this.fmtMoney(value, this.currency, true, true)
: this.fmtGrams(value)
}`
: null;
},
labelColor: tooltipLabelColor(false),
labelTextColor: (item) => {
return !item.raw ? colors.muted : "#fff";
},
},
itemSort: function (a, b) {
return b.datasetIndex - a.datasetIndex;
@ -288,7 +283,13 @@ export default {
stacked: true,
border: { display: false },
grid: { display: false },
ticks: { color: colors.muted },
ticks: {
color: colors.muted,
callback: (value) =>
this.period === PERIODS.YEAR
? this.fmtMonth(new Date(this.year, value, 1), true)
: value,
},
},
y: {
stacked: true,

17
assets/js/components/Sessions/EnergyHistoryChart.vue
View file

@ -186,9 +186,9 @@ export default {
label: (tooltipItem) => {
const datasetLabel = tooltipItem.dataset.label || "";
const value = tooltipItem.raw || 0;
return (
datasetLabel + ": " + this.fmtWh(value * 1e3, POWER_UNIT.AUTO)
);
return value
? `${datasetLabel}: ${this.fmtWh(value * 1e3, POWER_UNIT.AUTO)}`
: null;
},
labelColor: tooltipLabelColor(false),
labelPointStyle: function () {
@ -196,9 +196,6 @@ export default {
pointStyle: "circle",
};
},
labelTextColor: (item) => {
return !item.raw ? colors.muted : "#fff";
},
},
itemSort: function (a, b) {
return b.datasetIndex - a.datasetIndex;
@ -210,7 +207,13 @@ export default {
stacked: true,
border: { display: false },
grid: { display: false },
ticks: { color: colors.muted },
ticks: {
color: colors.muted,
callback: (value) =>
this.period === PERIODS.YEAR
? this.fmtMonth(new Date(this.year, value, 1), true)
: value,
},
},
y: {
stacked: true,

5
assets/js/components/Sessions/SessionTable.vue
View file

@ -189,7 +189,10 @@ export default {
emits: ["show-session"],
computed: {
filteredSessions() {
return this.sessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
return this.sessions
.filter(this.filterByLoadpoint)
.filter(this.filterByVehicle)
.sort((a, b) => new Date(b.created) - new Date(a.created));
},
maxColumns() {
return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;

6
assets/js/mixins/formatter.js
View file

@ -236,6 +236,12 @@ export default {
month: "short",
}).format(date);
},
fmtDayOfMonth: function (date) {
return new Intl.DateTimeFormat(this.$i18n?.locale, {
weekday: "short",
day: "numeric",
}).format(date);
},
fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) {
const currencyDisplay = withSymbol ? "narrowSymbol" : "code";
const result = new Intl.NumberFormat(this.$i18n?.locale, {

1
assets/js/views/Sessions.vue
View file

@ -682,6 +682,7 @@ export default {
--vertical-shift: 0rem;
left: 0;
right: 0;
top: max(0rem, env(safe-area-inset-top)) !important;
margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
-webkit-backdrop-filter: blur(35px);
backdrop-filter: blur(35px);