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

Remember and restore energy flow details opened state (#5902)

Browse source 
* show energyflow details on large screens

* remember last open/close state of details
This commit is contained in:
Michael Geers 2023-01-31 15:52:54 +01:00 • committed by GitHub
parent 8738eb42cf
commit 03e08fe6f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -128,6 +128,7 @@ import Visualization from "./Visualization.vue";
import EnergyflowEntry from "./EnergyflowEntry.vue";
import formatter from "../../mixins/formatter";
import AnimatedNumber from "../AnimatedNumber.vue";
import settings from "../../settings";
export default {
name: "Energyflow",
@ -189,6 +190,10 @@ export default {
},
mounted() {
window.addEventListener("resize", this.updateHeight);
// height must be calculated in case of initially open details
if (settings.energyflowDetails) {
setTimeout(this.toggleDetails, 50);
}
},
unmounted() {
window.removeEventListener("resize", this.updateHeight);
@ -200,6 +205,7 @@ export default {
toggleDetails: function () {
this.updateHeight();
this.detailsOpen = !this.detailsOpen;
settings.energyflowDetails = this.detailsOpen;
},
updateHeight: function () {
this.detailsCompleteHeight = this.$refs.detailsInner.offsetHeight;

13
assets/js/settings.js
View file

@ -3,6 +3,7 @@ import { reactive, watch } from "vue";
const SETTINGS_LOCALE = "settings_locale";
const SETTINGS_THEME = "settings_theme";
const SETTINGS_UNIT = "settings_unit";
const SETTINGS_ENERGYFLOW_DETAILS = "settings_energyflow_details";
function read(key) {
return window.localStorage[key];
@ -22,15 +23,27 @@ function save(key) {
};
}
function readBool(key) {
return read(key) === "true";
}
function saveBool(key) {
return (value) => {
save(key)(value ? "true" : "false");
};
}
const settings = reactive({
telemetry: null,
locale: read(SETTINGS_LOCALE),
theme: read(SETTINGS_THEME),
unit: read(SETTINGS_UNIT),
energyflowDetails: readBool(SETTINGS_ENERGYFLOW_DETAILS),
});
watch(() => settings.locale, save(SETTINGS_LOCALE));
watch(() => settings.theme, save(SETTINGS_THEME));
watch(() => settings.unit, save(SETTINGS_UNIT));
watch(() => settings.energyflowDetails, saveBool(SETTINGS_ENERGYFLOW_DETAILS));
export default settings;