Master data handling (colors)

Pages/AccountPage.razor

 @inject UserDataProvider UserDataProvider
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
+@using CaritasPWA.Shared.Models;
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start w-100">

Pages/CaritasServiceFundVeloKeyDataPage.razor

 @inject NavigationManager NavigationManager
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
+@inject MasterDataService MasterDataService
+@using CaritasPWA.Shared.Models;
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
                 <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="@colorItems" ValueSelector="@(i=>i)">
+
+                            <MatSelectValue FullWidth="true" Outlined="true" Label="@i18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)">
                                 <ItemTemplate>
                                     <div>
                                         <span class="btn-sm" style="background-color:rgb(@context.RGB);
                                                                     display:initial;
                                                                     border:1px solid black;
                                                                     box-shadow:0.2em 0.2em 0.3em 0.025em #3f4244" />
-                                        <span class="btn">@context?.Name</span>
+                                        <span class="btn">@i18n["Color." + @context?.Name]</span>
                                     </div>
                                 </ItemTemplate>
                             </MatSelectValue>
     string value;
     private ColorItem selectedColor;
 
-    protected override void OnInitialized() {
+    protected async override void OnInitialized() {
+        await GetColors();
         PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
         base.OnInitialized();
     }
 
+    private async Task GetColors() {
+        await InvokeAsync(async () => {
+            await MasterDataService.GetColors();
+            StateHasChanged();
+        });
+    }
+
+    private ColorItem[] Colors {
+        get => MasterDataService.Colors;
+    }
+
     private void Next() {
         NavigationManager.NavigateTo("fundvelo/account/" + @FromRoute);
     }
     }
 
 
-    private ColorItem[] colorItems = new[] {
-        new ColorItem(3, "Blue","0,0,255"),
-        new ColorItem(14, "Brown", "165,42,42"),
-        new ColorItem(4, "Yellow", "255, 255, 0"),
-    };
-
-    private class ColorItem {
-        public int Index { get; }
-        public string Name { get; }
-        public string RGB { get; }
-
-        public ColorItem(int index, string name, string rgb) {
-            Index = index;
-            Name = name;
-            RGB = rgb;
-        }
-    }
-
     private string getAddressLbl() {
         return i18n.GetString("Address") + " (" + getPlaceLbl() + ")";
     }
         return @FromRoute == "Found" ? i18n.GetString("PlaceOfDiscovery") : i18n.GetString("PlaceOfLoss");
     }
 
-
 }

Pages/IndexPage.razor

 @inject AppState AppState;
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
+@inject MasterDataService MasterDataService;
 
 
 <div class="row h-100 justify-content-center">
 
 @code {
 
-    protected override void OnInitialized() {
+    protected async override void OnInitialized() {
+        await MasterDataService.SynchronizeColors();
         PageHistoryManager.Reset();
         base.OnInitialized();
     }

Program.cs

 using System.Threading.Tasks;
 using MatBlazor;
 using CaritasPWA.Shared;
+using CaritasPWA.Shared.ResourceFiles;
+using Microsoft.Extensions.Localization;
 
 namespace CaritasPWA {
     public class Program {
             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<AppState>();
             builder.Services.AddSingleton<PageHistoryManager>();
             builder.Services.AddLocalization();

Shared/MasterDataService.cs

+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/ColorItem.cs

+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using CaritasPWA.Shared.ResourceFiles;
+
+
+namespace CaritasPWA.Shared.Models {
+    
+    public class ColorItem {
+
+        public int Index { get; set; }
+        public string Name { get; set; }
+        public string RGB { get; set; }
+
+        public ColorItem() { }
+
+        public ColorItem(int index, string name, string rgb) {
+            Index = index;
+            Name = name;
+            RGB = rgb;
+        }
+    }
+
+}

Shared/Models/Defaults.cs

+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CaritasPWA.Shared.Models {
+    public class Defaults {
+
+        public static ColorItem[] ColorItems = {
+            new ColorItem(3, "Blue","0,0,255"),
+            new ColorItem(14, "Brown", "165,42,42"),
+            new ColorItem(4, "Yellow", "255, 255, 0"),
+            new ColorItem(8, "Grey", "128, 128, 128"),
+            new ColorItem(2, "Green", "0, 128, 0"),
+            new ColorItem(9, "Indigo", "75, 0, 130"),
+            new ColorItem(11, "Purple", "128, 0, 128"),
+            new ColorItem(6, "Orange", "255, 165, 0"),
+            new ColorItem(13, "Pink", "255, 192, 203"),
+            new ColorItem(1, "Red", "255, 0, 0"),
+            new ColorItem(5, "Black", "0, 0, 0"),
+            new ColorItem(12, "Turquoise", "64, 224, 208"),
+            new ColorItem(10, "Violet", "238, 130, 238"),
+            new ColorItem(7, "White", "255, 255, 255"),
+        };
+
+        public enum BycicleType {
+            Men_Bycicle,
+            Women_Bycicle,
+            Child_Bycicle,
+            E_Bike,
+            Mountain_Bike,
+            City_Bike,
+            Tandem,
+            Trailer
+        }
+    }
+}

Shared/UserData.cs → Shared/Models/UserData.cs

 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 
-namespace CaritasPWA.Shared {
+namespace CaritasPWA.Shared.Models {
     // The class that stores the user settings
     public class UserData {
         private string firstname;

Shared/ResourceFiles/Resources.Designer.cs

             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Black ähnelt.
+        /// </summary>
+        public static string Color_Black {
+            get {
+                return ResourceManager.GetString("Color.Black", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Blue ähnelt.
+        /// </summary>
+        public static string Color_Blue {
+            get {
+                return ResourceManager.GetString("Color.Blue", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Brown ähnelt.
+        /// </summary>
+        public static string Color_Brown {
+            get {
+                return ResourceManager.GetString("Color.Brown", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Green ähnelt.
+        /// </summary>
+        public static string Color_Green {
+            get {
+                return ResourceManager.GetString("Color.Green", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Grey ähnelt.
+        /// </summary>
+        public static string Color_Grey {
+            get {
+                return ResourceManager.GetString("Color.Grey", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Indigo ähnelt.
+        /// </summary>
+        public static string Color_Indigo {
+            get {
+                return ResourceManager.GetString("Color.Indigo", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Orange ähnelt.
+        /// </summary>
+        public static string Color_Orange {
+            get {
+                return ResourceManager.GetString("Color.Orange", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Pink ähnelt.
+        /// </summary>
+        public static string Color_Pink {
+            get {
+                return ResourceManager.GetString("Color.Pink", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Purple ähnelt.
+        /// </summary>
+        public static string Color_Purple {
+            get {
+                return ResourceManager.GetString("Color.Purple", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Red ähnelt.
+        /// </summary>
+        public static string Color_Red {
+            get {
+                return ResourceManager.GetString("Color.Red", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Turquoise ähnelt.
+        /// </summary>
+        public static string Color_Turquoise {
+            get {
+                return ResourceManager.GetString("Color.Turquoise", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Violet ähnelt.
+        /// </summary>
+        public static string Color_Violet {
+            get {
+                return ResourceManager.GetString("Color.Violet", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die White ähnelt.
+        /// </summary>
+        public static string Color_White {
+            get {
+                return ResourceManager.GetString("Color.White", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Yellow ähnelt.
+        /// </summary>
+        public static string Color_Yellow {
+            get {
+                return ResourceManager.GetString("Color.Yellow", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Confirmation ähnelt.
         /// </summary>

Shared/ResourceFiles/Resources.de.resx

   <data name="Color" xml:space="preserve">
     <value>Farbe</value>
   </data>
+  <data name="Color.Black" xml:space="preserve">
+    <value>Schwarz</value>
+  </data>
+  <data name="Color.Blue" xml:space="preserve">
+    <value>Blau</value>
+  </data>
+  <data name="Color.Brown" xml:space="preserve">
+    <value>Braun</value>
+  </data>
+  <data name="Color.Green" xml:space="preserve">
+    <value>Grün</value>
+  </data>
+  <data name="Color.Grey" xml:space="preserve">
+    <value>Grau</value>
+  </data>
+  <data name="Color.Indigo" xml:space="preserve">
+    <value>Indigo</value>
+  </data>
+  <data name="Color.Orange" xml:space="preserve">
+    <value>Orange</value>
+  </data>
+  <data name="Color.Pink" xml:space="preserve">
+    <value>Rosa</value>
+  </data>
+  <data name="Color.Purple" xml:space="preserve">
+    <value>Purpur</value>
+  </data>
+  <data name="Color.Red" xml:space="preserve">
+    <value>Rot</value>
+  </data>
+  <data name="Color.Turquoise" xml:space="preserve">
+    <value>Türkis</value>
+  </data>
+  <data name="Color.Violet" xml:space="preserve">
+    <value>Violett</value>
+  </data>
+  <data name="Color.White" xml:space="preserve">
+    <value>Weiss</value>
+  </data>
+  <data name="Color.Yellow" xml:space="preserve">
+    <value>Gelb</value>
+  </data>
   <data name="Confirmation" xml:space="preserve">
     <value>Bestätigung</value>
   </data>

Shared/ResourceFiles/Resources.fr.resx

   <data name="Color" xml:space="preserve">
     <value>Couleur</value>
   </data>
+  <data name="Color.Black" xml:space="preserve">
+    <value>Noir</value>
+  </data>
+  <data name="Color.Blue" xml:space="preserve">
+    <value>Bleu</value>
+  </data>
+  <data name="Color.Brown" xml:space="preserve">
+    <value>Marron</value>
+  </data>
+  <data name="Color.Green" xml:space="preserve">
+    <value>Verde</value>
+  </data>
+  <data name="Color.Grey" xml:space="preserve">
+    <value>Gris</value>
+  </data>
+  <data name="Color.Indigo" xml:space="preserve">
+    <value>Indigo</value>
+  </data>
+  <data name="Color.Orange" xml:space="preserve">
+    <value>Orange</value>
+  </data>
+  <data name="Color.Pink" xml:space="preserve">
+    <value>Rose</value>
+  </data>
+  <data name="Color.Purple" xml:space="preserve">
+    <value>Pourpre</value>
+  </data>
+  <data name="Color.Red" xml:space="preserve">
+    <value>Rouge</value>
+  </data>
+  <data name="Color.Turquoise" xml:space="preserve">
+    <value>Turquoise</value>
+  </data>
+  <data name="Color.Violet" xml:space="preserve">
+    <value>Violet</value>
+  </data>
+  <data name="Color.White" xml:space="preserve">
+    <value>Blanc</value>
+  </data>
+  <data name="Color.Yellow" xml:space="preserve">
+    <value>Jaune</value>
+  </data>
   <data name="Confirmation" xml:space="preserve">
     <value>Confirmation</value>
   </data>

Shared/ResourceFiles/Resources.it.resx

   <data name="Color" xml:space="preserve">
     <value>Colore</value>
   </data>
+  <data name="Color.Black" xml:space="preserve">
+    <value>Nero</value>
+  </data>
+  <data name="Color.Blue" xml:space="preserve">
+    <value>Blu</value>
+  </data>
+  <data name="Color.Brown" xml:space="preserve">
+    <value>Marrone</value>
+  </data>
+  <data name="Color.Green" xml:space="preserve">
+    <value>Verde</value>
+  </data>
+  <data name="Color.Grey" xml:space="preserve">
+    <value>Grigio</value>
+  </data>
+  <data name="Color.Indigo" xml:space="preserve">
+    <value>Indigo</value>
+  </data>
+  <data name="Color.Orange" xml:space="preserve">
+    <value>Arancione</value>
+  </data>
+  <data name="Color.Pink" xml:space="preserve">
+    <value>Rosa</value>
+  </data>
+  <data name="Color.Purple" xml:space="preserve">
+    <value>Porpora</value>
+  </data>
+  <data name="Color.Red" xml:space="preserve">
+    <value>Rosso</value>
+  </data>
+  <data name="Color.Turquoise" xml:space="preserve">
+    <value>Turchese</value>
+  </data>
+  <data name="Color.Violet" xml:space="preserve">
+    <value>Viola</value>
+  </data>
+  <data name="Color.White" xml:space="preserve">
+    <value>White</value>
+  </data>
+  <data name="Color.Yellow" xml:space="preserve">
+    <value>Giallo</value>
+  </data>
   <data name="Confirmation" xml:space="preserve">
     <value>Conferma</value>
   </data>

Shared/ResourceFiles/Resources.resx

   <data name="Color" xml:space="preserve">
     <value>Color</value>
   </data>
+  <data name="Color.Black" xml:space="preserve">
+    <value>Black</value>
+  </data>
+  <data name="Color.Blue" xml:space="preserve">
+    <value>Blue</value>
+  </data>
+  <data name="Color.Brown" xml:space="preserve">
+    <value>Brown</value>
+  </data>
+  <data name="Color.Green" xml:space="preserve">
+    <value>Green</value>
+  </data>
+  <data name="Color.Grey" xml:space="preserve">
+    <value>Grey</value>
+  </data>
+  <data name="Color.Indigo" xml:space="preserve">
+    <value>Indigo</value>
+  </data>
+  <data name="Color.Orange" xml:space="preserve">
+    <value>Orange</value>
+  </data>
+  <data name="Color.Pink" xml:space="preserve">
+    <value>Pink</value>
+  </data>
+  <data name="Color.Purple" xml:space="preserve">
+    <value>Purple</value>
+  </data>
+  <data name="Color.Red" xml:space="preserve">
+    <value>Red</value>
+  </data>
+  <data name="Color.Turquoise" xml:space="preserve">
+    <value>Turquoise</value>
+  </data>
+  <data name="Color.Violet" xml:space="preserve">
+    <value>Violet</value>
+  </data>
+  <data name="Color.White" xml:space="preserve">
+    <value>White</value>
+  </data>
+  <data name="Color.Yellow" xml:space="preserve">
+    <value>Yellow</value>
+  </data>
   <data name="Confirmation" xml:space="preserve">
     <value>Confirmation</value>
   </data>

Shared/UserDataProvider.cs

 using System;
 using System.ComponentModel;
 using System.Threading.Tasks;
+using CaritasPWA.Shared.Models;
 
 namespace CaritasPWA.Shared {
     public sealed class UserDataProvider {