Add: Add version check

whats2000 · Sep 4, 2024 · 1edf720 · 1edf720
1 parent 3b14e43
commit 1edf720
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 17 deletions.
diff --git a/Shared/SharedHeader.razor b/Shared/SharedHeader.razor
@@ -1,13 +1,24 @@
-@inject TranslateText TransText
+@using PearlCalculatorBlazor.Localizer
+@inject TranslateText TransText
 @inject NotificationService Notice
 
-@using PearlCalculatorBlazor.Localizer
-
 <PageHeader>
     <TitleTemplate>
         <Flex Align="center" Gap="10">
             <Image Preview="false" Height="40" src="Logo.png" alt="banner"/>
             <Title Level="1" Style="margin-bottom: 0; font-size: 20px;">Pearl Calculator Blazor</Title>
+            <Tooltip Title="Check for updates">
+                <div @onclick="@CheckForUpdate">
+                    @if (_currentVersion == "Loading...")
+                    {
+                        <Spin/>
+                    }
+                    else
+                    {
+                        <Text>@_currentVersion</Text>
+                    }
+                </div>
+            </Tooltip>
         </Flex>
     </TitleTemplate>
     <PageHeaderExtra>
@@ -18,9 +29,9 @@
                         <MenuItem @onclick="@(() => OnClickChangeLanguage("en"))" Key="en">@TranslateText.LanguageDict["en"]</MenuItem>
                         @foreach (var pair in TranslateText.LanguageDict)
                         {
-                        if (pair.Key == "en")
-                        continue;
-                        <MenuItem @onclick="@(() => OnClickChangeLanguage(pair.Key))" @key=pair.Key>@pair.Value</MenuItem>
+                            if (pair.Key == "en")
+                                continue;
+                            <MenuItem @onclick="@(() => OnClickChangeLanguage(pair.Key))" @key=pair.Key>@pair.Value</MenuItem>
                         }
                     </Menu>
                 </Overlay>
@@ -56,4 +67,26 @@
             </Button>
         </Flex>
     </PageHeaderExtra>
-</PageHeader>
+</PageHeader>
+
+@{
+    RenderFragment ModelFooterTemplate =
+        @<Template>
+            <Button OnClick="@HandleCancel" @key="@("back")">
+                Stay in this version
+            </Button>
+            <Button OnClick="@HandleOk"
+                    @key="@("Refresh and Update")"
+                    Type="@ButtonType.Primary">
+                Refresh and Update
+            </Button>
+        </Template>;
+}
+
+<Modal Title="New version available"
+       Visible="@_visible"
+       OnOk="@HandleOk"
+       OnCancel="@HandleCancel"
+       Footer="@ModelFooterTemplate">
+    <p>@_modalContent</p>
+</Modal>
diff --git a/Shared/SharedHeader.razor.cs b/Shared/SharedHeader.razor.cs
@@ -1,4 +1,5 @@
-using AntDesign;
+using System.Threading.Tasks;
+using AntDesign;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using PearlCalculatorBlazor.Localizer;
@@ -11,9 +12,13 @@ public enum Theme
     Dark
 }
 
-public partial class SharedHeader : ComponentBase
+public partial class SharedHeader
 {
     private Theme _currentTheme = Theme.Light;
+    private string _currentVersion = "Loading...";
+    private string _latestVersion;
+    private string _modalContent = "";
+    private bool _visible = false;
     [Inject] private IJSRuntime JsRuntime { get; set; }
 
     private RenderFragment LightThemeIcon => builder =>
@@ -83,6 +88,25 @@ protected Theme CurrentTheme
         }
     }
 
+    private void ShowVersionModal()
+    {
+        _modalContent = $"New version: {_latestVersion} found.";
+        _visible = true;
+        StateHasChanged();
+    }
+
+    private async Task HandleOk()
+    {
+        _visible = false;
+        await JsRuntime.InvokeVoidAsync("localStorage.setItem", "PearlCalculatorBlazor_version", _latestVersion);
+        await JsRuntime.InvokeVoidAsync("ClearCacheAndReload");
+    }
+
+    private void HandleCancel()
+    {
+        _visible = false;
+    }
+
     private RenderFragment GetThemeIcon()
     {
         return _currentTheme switch
@@ -108,7 +132,8 @@ private async void UpdateTheme()
             _ => null
         };
 
-        var url = fileName == null ? "" : $"/_content/AntDesign/css/{fileName}.css";
+        var baseUrl = await JsRuntime.InvokeAsync<string>("GetBaseUrl");
+        var url = fileName == null ? "" : $"{baseUrl}_content/AntDesign/css/{fileName}.css";
         await JsRuntime.InvokeVoidAsync("AddElementToBody", url);
         await JsRuntime.InvokeVoidAsync("localStorage.setItem", "PearlCalculatorBlazor_userTheme", theme);
     }
@@ -119,6 +144,20 @@ private async void OnClickChangeLanguage(string language)
         await JsRuntime.InvokeVoidAsync("localStorage.setItem", "PearlCalculatorBlazor_userLanguage", language);
     }
 
+    private async void CheckForUpdate()
+    {
+        _currentVersion = "Loading...";
+        _latestVersion = await JsRuntime.InvokeAsync<string>("FetchVersionFromServer");
+        _currentVersion = await JsRuntime.InvokeAsync<string>("localStorage.getItem", "PearlCalculatorBlazor_version");
+        if (_currentVersion == _latestVersion)
+        {
+            StateHasChanged();
+            return;
+        }
+
+        ShowVersionModal();
+    }
+
     protected override async void OnInitialized()
     {
         TranslateText.OnLanguageChange += RefreshPage;
@@ -128,13 +167,13 @@ protected override async void OnInitialized()
 
         if (!string.IsNullOrEmpty(storedLanguage))
             await TransText.LoadLanguageAsync(storedLanguage);
-        
-        var storedTheme = await JsRuntime.InvokeAsync<string>("localStorage.getItem", "PearlCalculatorBlazor_userTheme");
-
-        if (!string.IsNullOrEmpty(storedTheme))
-        {
-            CurrentTheme = storedTheme == "dark" ? Theme.Dark : Theme.Light;
-        }
+
+        var storedTheme =
+            await JsRuntime.InvokeAsync<string>("localStorage.getItem", "PearlCalculatorBlazor_userTheme");
+
+        if (!string.IsNullOrEmpty(storedTheme)) CurrentTheme = storedTheme == "dark" ? Theme.Dark : Theme.Light;
+
+        CheckForUpdate();
     }
 
     private void RefreshPage()

diff --git a/wwwroot/index.html b/wwwroot/index.html
@@ -57,6 +57,7 @@
 <script src="theme.js?v=20240904"></script>
 <script src="file-input-proxy.js?v=20240901"></script>
 <script src="tnt-weight-slider.js"></script>
+<script src="version.js?v=20240904"></script>
 <script>navigator.serviceWorker.register('service-worker.js');</script>
 <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
 <script src="_content/AntDesign.Charts/g2plot.min.js"></script>

diff --git a/wwwroot/theme.js b/wwwroot/theme.js
@@ -8,3 +8,7 @@
     }
     link.href = url;
 }
+
+function GetBaseUrl() {
+    return window.location.origin + window.location.pathname;
+}
diff --git a/wwwroot/version.js b/wwwroot/version.js
@@ -0,0 +1,23 @@
+async function FetchVersionFromServer() {
+    try {
+        // Append a timestamp to the URL to prevent caching
+        const timestamp = new Date().getTime();
+        const response = await fetch(`/version.json?t=${timestamp}`);
+        const data = await response.json();
+        return data.version;
+    } catch (error) {
+        console.error('Error fetching version:', error);
+        return null;
+    }
+}
+
+async function ClearCacheAndReload() {
+    if ('caches' in window) {
+        // Clear all the cache storage
+        const cacheNames = await caches.keys();
+        await Promise.all(cacheNames.map(cacheName => caches.delete(cacheName)));
+    }
+
+    // Reload the page
+    window.location.reload(true);
+}
diff --git a/wwwroot/version.json b/wwwroot/version.json
@@ -0,0 +1,3 @@
+{
+  "version": "2.71"
+}