From 03e08fe6f3fd8db5d2ee55da2253e39d2dcc83a3 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 31 Jan 2023 15:52:54 +0100
Subject: [PATCH] Remember and restore energy flow details opened state (#5902)

* show energyflow details on large screens

* remember last open/close state of details
---
 assets/js/components/Energyflow/Energyflow.vue |  6 ++++++
 assets/js/settings.js                          | 13 +++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index a7fc58ede..7a2636591 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -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;
diff --git a/assets/js/settings.js b/assets/js/settings.js
index db655b16f..195676bf7 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -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;