Master data handling (colors)

Pages/CaritasServiceFundVeloKeyDataPage.razor

@@ -69,7 +69,6 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
-
                             <MatSelectValue FullWidth="true" Outlined="true" Label="@i18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)">
                                 <ItemTemplate>
                                     <div>
@@ -86,12 +85,13 @@
                             <MatStringField Class="w-100 form-check-label" Label="@i18n["Brand"]" Outlined="true" type="text"></MatStringField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
-                            <MatSelect Class="w-100" Outlined="true" Label="@i18n["Type"]" @bind-Value="value">
-                                <MatOptionString></MatOptionString>
-                                <MatOptionString Value="Mountain-Bike">Mountain-Bike</MatOptionString>
-                                <MatOptionString Value="City-Bike">City-Bike</MatOptionString>
-                                <MatOptionString Value="Child-Bike">Child-Bike</MatOptionString>
-                            </MatSelect>
+                            <MatSelectValue FullWidth="true" Outlined="true" Label="@i18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
+                                <ItemTemplate>
+                                    <div>
+                                        <span>@i18n["Bike." + @context?.Type]</span>
+                                    </div>
+                                </ItemTemplate>
+                            </MatSelectValue>
                         </div>
                     </div>
                 </div>
@@ -115,11 +115,12 @@
     [Parameter]
     public string FromRoute { get; set; }
 
-    string value;
     private ColorItem selectedColor;
+    private BicycleType selectedBcType;
 
     protected async override void OnInitialized() {
         await GetColors();
+        await GetBicycleTypes();
         PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
         base.OnInitialized();
     }
@@ -131,10 +132,21 @@
         });
     }
 
+    private async Task GetBicycleTypes() {
+        await InvokeAsync(async () => {
+            await MasterDataService.GetBicycleTypes();
+            StateHasChanged();
+        });
+    }
+
     private ColorItem[] Colors {
         get => MasterDataService.Colors;
     }
 
+    private BicycleType[] BicycleTypes {
+        get => MasterDataService.BicycleTypes;
+    }
+
     private void Next() {
         NavigationManager.NavigateTo("fundvelo/account/" + @FromRoute);
     }

Pages/IndexPage.razor

@@ -25,7 +25,7 @@
 @code {
 
     protected async override void OnInitialized() {
-        await MasterDataService.SynchronizeColors();
+        await MasterDataService.SynchronizeMasterdata();
         PageHistoryManager.Reset();
         base.OnInitialized();
     }

Program.cs

@@ -9,8 +9,6 @@ using System.Text;
 using System.Threading.Tasks;
 using MatBlazor;
 using CaritasPWA.Shared;
-using CaritasPWA.Shared.ResourceFiles;
-using Microsoft.Extensions.Localization;
 
 namespace CaritasPWA {
     public class Program {
@@ -20,10 +18,11 @@ namespace CaritasPWA {
 
             builder.Services.AddMatBlazor();
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-            builder.Services.AddScoped<UserDataProvider>();
-            builder.Services.AddScoped<MasterDataService>();
+            builder.Services.AddSingleton<ILFBicycleRest, LFBicycleRest>();
             builder.Services.AddSingleton<AppState>();
             builder.Services.AddSingleton<PageHistoryManager>();
+            builder.Services.AddScoped<UserDataProvider>();
+            builder.Services.AddScoped<MasterDataService>();
             builder.Services.AddLocalization();
 
             await builder.Build().RunAsync();

Properties/launchSettings.json

@@ -14,6 +14,8 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
+      "nativeDebugging": true,
+      "jsWebView2Debugging": false,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
     },
     "CaritasPWA": {

Shared/MasterDataService.cs

@@ -1,82 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using CaritasPWA.Shared.Models;
-using Microsoft.JSInterop;
-
-namespace CaritasPWA.Shared {
-    public class MasterDataService {
-
-        private const string KeyNameColors = "colors";
-        private const string KeyNameBcTypes = "bicycleTypes";
-
-        private readonly IJSRuntime _jsRuntime;
-        private bool _initializedColors;
-        private ColorItem[] _colors = new ColorItem[] { };
-
-        public ColorItem[] Colors {
-            get => _colors;
-            set => _colors = value;
-        }
-
-        public event EventHandler Changed;
-
-        public MasterDataService(IJSRuntime jsRuntime) {
-            _jsRuntime = jsRuntime;
-        }
-
-        public async Task SynchronizeColors() {
-            // TODO: Get the color from server via REST and save it when not empty
-            _colors = Defaults.ColorItems;
-            await SaveColorsToStorage();
-        }
-
-        public async Task<ColorItem[]> GetColors() {
-            // To search first in local storage, when nothing is found return the defaults.
-            //return Defaults.ColorItems;
-            return await GetColorsFromStorage();
-        }
-
-        private async ValueTask<ColorItem[]> GetColorsFromStorage() {
-
-            // Register the Storage event handler. This handler calls OnStorageUpdated when the storage changed.
-            // This way, you can reload the settings when another instance of the application (tab / window) save the settings
-            if (!_initializedColors) {
-                // Create a reference to the current object, so the JS function can call the public method "OnStorageUpdated"
-                var reference = DotNetObjectReference.Create(this);
-                await _jsRuntime.InvokeVoidAsync("BlazorRegisterStorageEvent", reference);
-                _initializedColors = true;
-            }
-
-            // Read the JSON string that contains the data from the local storage
-            ColorItem[] result;
-            var str = await _jsRuntime.InvokeAsync<string>("BlazorGetLocalStorage", KeyNameColors);
-            if (str != null) {
-                result = System.Text.Json.JsonSerializer.Deserialize<ColorItem[]>(str) ?? new ColorItem[] { };
-            } else {
-                result = new ColorItem[] { };
-            }
-            _colors= result;
-            return result;
-        }
-
-        private async Task SaveColorsToStorage() {
-            var json = System.Text.Json.JsonSerializer.Serialize(_colors);
-            await _jsRuntime.InvokeVoidAsync("BlazorSetLocalStorage", KeyNameColors, json);
-        }
-
-        // This method is called from BlazorRegisterStorageEvent when the storage changed
-        [JSInvokable]
-        public void OnStorageUpdated(string key) {
-            // Reset the settings. The next call to Get will reload the data
-            if (key == KeyNameColors) {
-                _colors = null;
-                Changed?.Invoke(this, EventArgs.Empty);
-            } else if (key == KeyNameBcTypes) {
-                //_bicycleType = null;
-                Changed?.Invoke(this, EventArgs.Empty);
-            }
-        }
-    }
-}

Shared/Models/BicycleType.cs

@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CaritasPWA.Shared.Models {
+    public class BicycleType {
+
+        public int Index { get; set; }
+        public string Type { get; set; }
+
+        public BicycleType() { }
+
+        public BicycleType(int index, string type) {
+            Index = index;
+            Type = type;
+        }
+    }
+}

Shared/Models/Defaults.cs

@@ -23,15 +23,17 @@ namespace CaritasPWA.Shared.Models {
             new ColorItem(7, "White", "255, 255, 255"),
         };
 
-        public enum BycicleType {
-            Men_Bycicle,
-            Women_Bycicle,
-            Child_Bycicle,
-            E_Bike,
-            Mountain_Bike,
-            City_Bike,
-            Tandem,
-            Trailer
-        }
+        public static BicycleType[] BycicleTypes = {
+            new BicycleType(1, "Men_Bycicle"),
+            new BicycleType(2, "Women_Bycicle"),
+            new BicycleType(3, "Child_Bycicle"),
+            new BicycleType(4, "E_Bike"),
+            new BicycleType(5, "Mountain_Bike"),
+            new BicycleType(6,"City_Bike"),
+            new BicycleType(7, "Tandem"),
+            new BicycleType(8, "Trailer")
+        };
     }
 }
+
+

Shared/NavMenu.razor

@@ -37,13 +37,13 @@
                                          Href="account"
                                          @onclick="@((e) => ButtonClicked(2))">
                                 <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
-                                <MatListItemText Style="padding-left:0.5em">@i18n["Account"]</MatListItemText>
+                                <MatListItemText Style="padding-left:0.5em">@i18n["account"]</MatListItemText>
                             </MatListItem>
                             <MatListItem Class="@((Index == 3) ? "bg-primary-color text-white" : "")"
                                          Href="info"
                                          @onclick="@((e) => ButtonClicked(3))">
                                 <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
-                                <MatListItemText Style="padding-left:0.5em">@i18n["Info"]</MatListItemText>
+                                <MatListItemText Style="padding-left:0.5em">@i18n["info"]</MatListItemText>
                             </MatListItem>
                             <MatListItem Class="@((Index == 4) ? "bg-primary-color text-white" : "")"
                                          href=""

Shared/ResourceFiles/Resources.Designer.cs

@@ -72,9 +72,9 @@ namespace CaritasPWA.Shared.ResourceFiles {
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Account ähnelt.
         /// </summary>
-        public static string Account {
+        public static string account {
             get {
-                return ResourceManager.GetString("Account", resourceCulture);
+                return ResourceManager.GetString("account", resourceCulture);
             }
         }
         
@@ -87,6 +87,78 @@ namespace CaritasPWA.Shared.ResourceFiles {
             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Children Bycicle ähnelt.
+        /// </summary>
+        public static string Bike_Child_Bycicle {
+            get {
+                return ResourceManager.GetString("Bike.Child_Bycicle", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die City-Bike ähnelt.
+        /// </summary>
+        public static string Bike_City_Bike {
+            get {
+                return ResourceManager.GetString("Bike.City_Bike", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die E-Bike ähnelt.
+        /// </summary>
+        public static string Bike_E_Bike {
+            get {
+                return ResourceManager.GetString("Bike.E_Bike", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Men&apos;s Bycicle ähnelt.
+        /// </summary>
+        public static string Bike_Men_Bycicle {
+            get {
+                return ResourceManager.GetString("Bike.Men_Bycicle", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Mountain-Bike ähnelt.
+        /// </summary>
+        public static string Bike_Mountain_Bike {
+            get {
+                return ResourceManager.GetString("Bike.Mountain_Bike", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Tandem ähnelt.
+        /// </summary>
+        public static string Bike_Tandem {
+            get {
+                return ResourceManager.GetString("Bike.Tandem", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Trailer ähnelt.
+        /// </summary>
+        public static string Bike_Trailer {
+            get {
+                return ResourceManager.GetString("Bike.Trailer", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Women&apos;s Bycicle ähnelt.
+        /// </summary>
+        public static string Bike_Women_Bycicle {
+            get {
+                return ResourceManager.GetString("Bike.Women_Bycicle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Brand ähnelt.
         /// </summary>
@@ -423,9 +495,9 @@ namespace CaritasPWA.Shared.ResourceFiles {
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Info ähnelt.
         /// </summary>
-        public static string Info {
+        public static string info {
             get {
-                return ResourceManager.GetString("Info", resourceCulture);
+                return ResourceManager.GetString("info", resourceCulture);
             }
         }
         

Shared/ResourceFiles/Resources.de.resx

@@ -120,12 +120,36 @@
   <data name="Abouttext" xml:space="preserve">
     <value>Hier komt ein Informationstext über die App.</value>
   </data>
-  <data name="Account" xml:space="preserve">
+  <data name="account" xml:space="preserve">
     <value>Konto</value>
   </data>
   <data name="Address" xml:space="preserve">
     <value>Adresse</value>
   </data>
+  <data name="Bike.Child_Bycicle" xml:space="preserve">
+    <value>Kindervelo</value>
+  </data>
+  <data name="Bike.City_Bike" xml:space="preserve">
+    <value>City-Bike</value>
+  </data>
+  <data name="Bike.E_Bike" xml:space="preserve">
+    <value>E-Bike</value>
+  </data>
+  <data name="Bike.Men_Bycicle" xml:space="preserve">
+    <value>Herrenvelo</value>
+  </data>
+  <data name="Bike.Mountain_Bike" xml:space="preserve">
+    <value>Mountain-Bike</value>
+  </data>
+  <data name="Bike.Tandem" xml:space="preserve">
+    <value>Tandem</value>
+  </data>
+  <data name="Bike.Trailer" xml:space="preserve">
+    <value>Anhänger</value>
+  </data>
+  <data name="Bike.Women_Bycicle" xml:space="preserve">
+    <value>Damenvelo</value>
+  </data>
   <data name="Brand" xml:space="preserve">
     <value>Marke</value>
   </data>
@@ -237,7 +261,7 @@
   <data name="fundvelo/lost_found" xml:space="preserve">
     <value>Fundvelo</value>
   </data>
-  <data name="Info" xml:space="preserve">
+  <data name="info" xml:space="preserve">
     <value>Info</value>
   </data>
   <data name="Lastname" xml:space="preserve">

Shared/ResourceFiles/Resources.fr.resx

@@ -120,12 +120,36 @@
   <data name="Abouttext" xml:space="preserve">
     <value>Ici on va voir une text informatif sur l'app.</value>
   </data>
-  <data name="Account" xml:space="preserve">
+  <data name="account" xml:space="preserve">
     <value>Compte</value>
   </data>
   <data name="Address" xml:space="preserve">
     <value>Adresse</value>
   </data>
+  <data name="Bike.Child_Bycicle" xml:space="preserve">
+    <value>Vélo pour enfants</value>
+  </data>
+  <data name="Bike.City_Bike" xml:space="preserve">
+    <value>City-Bike</value>
+  </data>
+  <data name="Bike.E_Bike" xml:space="preserve">
+    <value>E-Bike</value>
+  </data>
+  <data name="Bike.Men_Bycicle" xml:space="preserve">
+    <value>Vélo pour hommes</value>
+  </data>
+  <data name="Bike.Mountain_Bike" xml:space="preserve">
+    <value>Mountain-Bike</value>
+  </data>
+  <data name="Bike.Tandem" xml:space="preserve">
+    <value>Tandem</value>
+  </data>
+  <data name="Bike.Trailer" xml:space="preserve">
+    <value>Remorque</value>
+  </data>
+  <data name="Bike.Women_Bycicle" xml:space="preserve">
+    <value>Vélo pour dames</value>
+  </data>
   <data name="Brand" xml:space="preserve">
     <value>Marque</value>
   </data>
@@ -237,7 +261,7 @@
   <data name="fundvelo/lost_found" xml:space="preserve">
     <value>Velo</value>
   </data>
-  <data name="Info" xml:space="preserve">
+  <data name="info" xml:space="preserve">
     <value>Information</value>
   </data>
   <data name="Lastname" xml:space="preserve">

Shared/ResourceFiles/Resources.it.resx

@@ -120,12 +120,36 @@
   <data name="Abouttext" xml:space="preserve">
     <value>Qui appare un testo informativo sull'app.</value>
   </data>
-  <data name="Account" xml:space="preserve">
+  <data name="account" xml:space="preserve">
     <value>Profilo</value>
   </data>
   <data name="Address" xml:space="preserve">
     <value>Indirizzo</value>
   </data>
+  <data name="Bike.Child_Bycicle" xml:space="preserve">
+    <value>Bicicletta per bambino</value>
+  </data>
+  <data name="Bike.City_Bike" xml:space="preserve">
+    <value>City-Bike</value>
+  </data>
+  <data name="Bike.E_Bike" xml:space="preserve">
+    <value>E-Bike</value>
+  </data>
+  <data name="Bike.Men_Bycicle" xml:space="preserve">
+    <value>Bicicletta per uomo</value>
+  </data>
+  <data name="Bike.Mountain_Bike" xml:space="preserve">
+    <value>Mountain-Bike</value>
+  </data>
+  <data name="Bike.Tandem" xml:space="preserve">
+    <value>Tandem</value>
+  </data>
+  <data name="Bike.Trailer" xml:space="preserve">
+    <value>Rimorchio</value>
+  </data>
+  <data name="Bike.Women_Bycicle" xml:space="preserve">
+    <value>Bicicletta per donna</value>
+  </data>
   <data name="Brand" xml:space="preserve">
     <value>Marca</value>
   </data>
@@ -237,7 +261,7 @@
   <data name="fundvelo/lost_found" xml:space="preserve">
     <value>Bicicletta</value>
   </data>
-  <data name="Info" xml:space="preserve">
+  <data name="info" xml:space="preserve">
     <value>Informazione</value>
   </data>
   <data name="Lastname" xml:space="preserve">

Shared/ResourceFiles/Resources.resx

@@ -120,12 +120,36 @@
   <data name="Abouttext" xml:space="preserve">
     <value>Here you will read some information about the app.</value>
   </data>
-  <data name="Account" xml:space="preserve">
+  <data name="account" xml:space="preserve">
     <value>Account</value>
   </data>
   <data name="Address" xml:space="preserve">
     <value>Address</value>
   </data>
+  <data name="Bike.Child_Bycicle" xml:space="preserve">
+    <value>Children Bycicle</value>
+  </data>
+  <data name="Bike.City_Bike" xml:space="preserve">
+    <value>City-Bike</value>
+  </data>
+  <data name="Bike.E_Bike" xml:space="preserve">
+    <value>E-Bike</value>
+  </data>
+  <data name="Bike.Men_Bycicle" xml:space="preserve">
+    <value>Men's Bycicle</value>
+  </data>
+  <data name="Bike.Mountain_Bike" xml:space="preserve">
+    <value>Mountain-Bike</value>
+  </data>
+  <data name="Bike.Tandem" xml:space="preserve">
+    <value>Tandem</value>
+  </data>
+  <data name="Bike.Trailer" xml:space="preserve">
+    <value>Trailer</value>
+  </data>
+  <data name="Bike.Women_Bycicle" xml:space="preserve">
+    <value>Women's Bycicle</value>
+  </data>
   <data name="Brand" xml:space="preserve">
     <value>Brand</value>
   </data>
@@ -237,7 +261,7 @@
   <data name="fundvelo/lost_found" xml:space="preserve">
     <value>Bicycle</value>
   </data>
-  <data name="Info" xml:space="preserve">
+  <data name="info" xml:space="preserve">
     <value>Info</value>
   </data>
   <data name="Lastname" xml:space="preserve">

Shared/Services/ILFBicycleRest.cs

@@ -0,0 +1,14 @@
+using CaritasPWA.Shared.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CaritasPWA.Shared {
+    public interface ILFBicycleRest {
+
+        List<ColorItem> GetColors();
+
+        List<BicycleType> GetBicycleTypes();
+    }
+}

Shared/Services/LFBicycleRest.cs

@@ -0,0 +1,24 @@
+using CaritasPWA.Shared.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CaritasPWA.Shared {
+    
+    // REST interface responsible to submit lost or found reports and get the available masterdata.
+    public class LFBicycleRest : ILFBicycleRest {
+
+        public List<ColorItem> GetColors() {
+            //return Defaults.ColorItems.ToList();
+            return new List<ColorItem>();
+        }
+
+        public List<BicycleType> GetBicycleTypes() {
+            return Defaults.BycicleTypes.ToList();
+            //return new List<BicycleType>();
+        }
+
+
+    }
+}

Shared/Services/MasterDataService.cs

@@ -0,0 +1,139 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using CaritasPWA.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace CaritasPWA.Shared {
+    public class MasterDataService {
+
+        private ILFBicycleRest _lFBicycleRest;
+        private const string KeyNameColors = "colors";
+        private const string KeyNameBcTypes = "bicycleTypes";
+
+        private readonly IJSRuntime _jsRuntime;
+        private bool _initializedColors;
+        private bool _initializedBcTypes;
+        private ColorItem[] _colors = new ColorItem[] { };
+        private BicycleType[] _bicycleTypes = new BicycleType[] { };
+
+        public ColorItem[] Colors {
+            get => _colors;
+            set => _colors = value;
+        }
+
+        public BicycleType[] BicycleTypes {
+            get => _bicycleTypes;
+            set => _bicycleTypes = value;
+        }
+
+        public event EventHandler Changed;
+
+        public MasterDataService(IJSRuntime jsRuntime, ILFBicycleRest lFBicycleRest) {
+            _jsRuntime = jsRuntime;
+            _lFBicycleRest = lFBicycleRest;
+        }
+
+        public async Task SynchronizeMasterdata() {
+            await SynchronizeColors();
+            await SynchronizeBcTypes();
+        }
+
+        public async Task SynchronizeColors() {
+            Colors = _lFBicycleRest.GetColors().ToArray();
+            if (Colors != null && Colors.Length > 0) {
+                await SaveColorsToStorage();
+            };
+        }
+
+        public async Task SynchronizeBcTypes() {
+            BicycleTypes = _lFBicycleRest.GetBicycleTypes().ToArray();
+            if (BicycleTypes != null && BicycleTypes.Length > 0) {
+                await SaveBcTypesToStorage();
+            }
+        }
+
+        public async Task<ColorItem[]> GetColors() {
+            ColorItem[] colors = await GetColorsFromStorage();
+            Colors = (colors != null && colors.Length > 0) ? colors : Defaults.ColorItems;
+            return Colors;
+        }
+
+        public async Task<BicycleType[]> GetBicycleTypes() {
+            BicycleType[] bicycleTypes = await GetBicycleTypesFromStorage();
+            BicycleTypes = (bicycleTypes != null && bicycleTypes.Length > 0) ? bicycleTypes : Defaults.BycicleTypes;
+            return BicycleTypes;
+        }
+
+        private async ValueTask<ColorItem[]> GetColorsFromStorage() {
+
+            // Register the Storage event handler. This handler calls OnStorageUpdated when the storage changed.
+            // This way, you can reload the settings when another instance of the application (tab / window) save the settings
+            if (!_initializedColors) {
+                // Create a reference to the current object, so the JS function can call the public method "OnStorageUpdated"
+                var reference = DotNetObjectReference.Create(this);
+                await _jsRuntime.InvokeVoidAsync("BlazorRegisterStorageEvent", reference);
+                _initializedColors = true;
+            }
+
+            // Read the JSON string that contains the data from the local storage
+            ColorItem[] result;
+            var str = await _jsRuntime.InvokeAsync<string>("BlazorGetLocalStorage", KeyNameColors);
+            if (str != null) {
+                result = System.Text.Json.JsonSerializer.Deserialize<ColorItem[]>(str) ?? new ColorItem[] { };
+            } else {
+                result = new ColorItem[] { };
+            }
+            _colors= result;
+            return result;
+        }
+
+        private async ValueTask<BicycleType[]> GetBicycleTypesFromStorage() {
+
+            // Register the Storage event handler. This handler calls OnStorageUpdated when the storage changed.
+            // This way, you can reload the settings when another instance of the application (tab / window) save the settings
+            if (!_initializedBcTypes) {
+                // Create a reference to the current object, so the JS function can call the public method "OnStorageUpdated"
+                var reference = DotNetObjectReference.Create(this);
+                await _jsRuntime.InvokeVoidAsync("BlazorRegisterStorageEvent", reference);
+                _initializedBcTypes = true;
+            }
+
+            // Read the JSON string that contains the data from the local storage
+            BicycleType[] result;
+            var str = await _jsRuntime.InvokeAsync<string>("BlazorGetLocalStorage", KeyNameBcTypes);
+            if (str != null) {
+                result = System.Text.Json.JsonSerializer.Deserialize<BicycleType[]>(str) ?? new BicycleType[] { };
+            } else {
+                result = new BicycleType[] { };
+            }
+            _bicycleTypes = result;
+            return result;
+        }
+
+        private async Task SaveColorsToStorage() {
+            var json = System.Text.Json.JsonSerializer.Serialize(_colors);
+            await _jsRuntime.InvokeVoidAsync("BlazorSetLocalStorage", KeyNameColors, json);
+        }
+
+        private async Task SaveBcTypesToStorage() {
+            var json = System.Text.Json.JsonSerializer.Serialize(_bicycleTypes);
+            await _jsRuntime.InvokeVoidAsync("BlazorSetLocalStorage", KeyNameBcTypes, json);
+        }
+
+        // This method is called from BlazorRegisterStorageEvent when the storage changed
+        [JSInvokable]
+        public void OnStorageUpdated(string key) {
+            // Reset the settings. The next call to Get will reload the data
+            if (key == KeyNameColors) {
+                _colors = null;
+                Changed?.Invoke(this, EventArgs.Empty);
+            } else if (key == KeyNameBcTypes) {
+                _bicycleTypes = null;
+                Changed?.Invoke(this, EventArgs.Empty);
+            }
+        }
+    }
+}