remember toggle state

dj-nitehawk · Jul 9, 2024 · cb05162 · cb05162
1 parent c3fdb68
commit cb05162
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/src/Client/AppState/AppState.cs b/src/Client/AppState/AppState.cs
@@ -0,0 +1,7 @@
+namespace InverterMon.Client.AppState;
+
+public class ClientSettings
+{
+    public bool ShowEndDateAndTime { get; set; }
+    public bool ShowCapacityKwh { get; set; } = true;
+}
diff --git a/src/Client/AppState/AppStateExtensions.cs b/src/Client/AppState/AppStateExtensions.cs
@@ -5,7 +5,7 @@ namespace InverterMon.Client.AppState;
 
 public static class StateExtensions
 {
-    public static async Task<T?> LoadAsync<T>(this IJSRuntime jsRuntime) where T : class
+    public static async Task<T?> LoadStateAsync<T>(this IJSRuntime jsRuntime) where T : class
     {
         var data = await jsRuntime.InvokeAsync<string>("localStorage.getItem", typeof(T).FullName);
 
@@ -15,7 +15,7 @@ public static class StateExtensions
         return null;
     }
 
-    public static ValueTask SaveAsync<T>(this IJSRuntime jsRuntime, T state) where T : class
+    public static ValueTask SaveStateAsync<T>(this IJSRuntime jsRuntime, T state) where T : class
     {
         return jsRuntime.InvokeVoidAsync("localStorage.setItem", typeof(T).FullName, JsonSerializer.Serialize(state));
     }

diff --git a/src/Client/Pages/BMS.razor b/src/Client/Pages/BMS.razor
@@ -1,7 +1,9 @@
 @page "/bms"
+@using InverterMon.Client.AppState
 @using InverterMon.Shared.Models
 @using System.Text.Json
 @implements IDisposable
+@inject IJSRuntime Js
 
 <PageTitle>JK BMS Status</PageTitle>
 
@@ -24,7 +26,7 @@
                         <div class="fs-1 my-1 mx-5 border-top">
                             @status.CapacityPct%
                         </div>
-                        <div class="fs-5 pack-capacity m-0 border-top" style="cursor: pointer;" @onclick="_ => ShowCapacityKwh = !ShowCapacityKwh">
+                        <div class="fs-5 pack-capacity m-0 border-top" style="cursor: pointer;" @onclick="ToggleCapacityKwh">
                             @(GetPackCapacity())
                         </div>
                     </div>
@@ -41,7 +43,7 @@
                                 <div class="fw-bold fs-6 text-secondary">
                                     @($"{status.CRate:0.00} C") / @($"{status.AvgPowerWatts:0} W")
                                 </div>
-                                <div class="fw-normal fs-6 m-0 p-0" style="cursor: pointer;" @onclick="_ => ShowEndDateAndTime = !ShowEndDateAndTime">
+                                <div class="fw-normal fs-6 m-0 p-0" style="cursor: pointer;" @onclick="ToggleEndDateAndTime">
                                     @(GetTimeLeft())
                                 </div>
                             }
@@ -127,13 +129,25 @@
     private static event Action<BMSStatus?>? onStatusUpdated;
     private static event Action? onStatusRetrievalError;
     private static BMSStatus? status;
-    private static bool ShowEndDateAndTime;
-    private static bool ShowCapacityKwh;
+    private static ClientSettings state = new();
 
     protected override void OnInitialized()
     {
         onStatusUpdated += UpdateState;
-        onStatusRetrievalError += NullifyStatus;
+        onStatusRetrievalError += NullifyStatus;        
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var st = await Js.LoadStateAsync<ClientSettings>();
+        if(st is null)
+        {
+            await Js.SaveStateAsync(state);
+        }
+        else
+        {
+            state = st;
+        }
     }
 
     private void NullifyStatus()
@@ -150,7 +164,7 @@
 
     private string GetTimeLeft()
     {
-        if (ShowEndDateAndTime)
+        if (state.ShowEndDateAndTime)
         {
             return status!.GetTimeString();
         }
@@ -159,7 +173,7 @@
 
     private string GetPackCapacity()
     {
-        if (ShowCapacityKwh)
+        if (state.ShowCapacityKwh)
         {
             var avlCap = Math.Round((status!.AvailableCapacity * status.PackNominalVoltage) / 1000, 1);
             var packCap = Math.Round((status!.PackCapacity * status.PackNominalVoltage) / 1000, 1);
@@ -168,6 +182,18 @@
         return $"{Math.Round(status!.AvailableCapacity, 1)} Ah / {status!.PackCapacity} Ah";
     }
 
+    private async Task ToggleCapacityKwh()
+    {
+        state.ShowCapacityKwh = !state.ShowCapacityKwh;
+        await Js.SaveStateAsync(state);
+    }
+
+    private async Task ToggleEndDateAndTime()
+    {
+        state.ShowEndDateAndTime = !state.ShowEndDateAndTime;
+        await Js.SaveStateAsync(state);
+    }
+
     public void Dispose()
     {
         onStatusUpdated -= UpdateState;

diff --git a/src/Client/wwwroot/css/app.css b/src/Client/wwwroot/css/app.css
@@ -74,7 +74,7 @@ a, .btn-link {
     }
 
     .pack-capacity {
-        font-size: 1.2em !important;
+        font-size: 1.1em !important;
     }
 }
 

diff --git a/src/Client/wwwroot/index.html b/src/Client/wwwroot/index.html
@@ -27,12 +27,6 @@
         </div>
     </div>
 
-    <!--<div id="blazor-error-ui">
-        An error has occurred...
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>-->
-
     <script src="_framework/blazor.webassembly.js"></script>
     <script>
         let lastVisibleTime = Date.now();
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,7 +74,7 @@ a, .btn-link { @@
         }
         .pack-capacity {
-            font-size: 1.2em !important;
+            font-size: 1.1em !important;
         }
     }
@@ Expand Down @@