Zips & Cities from server

Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor

                     <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-12-desktop">
                             <MatStringField Class="w-100 form-check-label" Label="@getAddressLbl()" Outlined="true" Required="true" Type="text" @bind-Value="@bicycleGeoPosition.Address"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></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-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@I18n["PlaceOfDiscovery"]" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                            OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
+
+                        @if (OnlineStatusProvider.Online) {
+                            <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-12-desktop">
+                                <MatStringField Class="w-100 form-check-label" Label="@getZipCityLbl()" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"
+                                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                            </div>
+                        } else {
+                            <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">
+                                <div class="outlined">
+                                    <MatAutocompleteList TItem="ZipCity" FullWidth="true" Label="@getZipCityLbl()" Required="true" Items="@ZipCities" OnTextChanged="setZipCityValue" @bind-Value="SelectedZipCity" CustomStringSelector="@(i => i?.Zip_City)"
+                                                         ShowClearButton="true" NumberOfElementsInPopup="6" @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
+                                        <ItemTemplate>
+                                            <div>
+                                                <span>@context?.Zip_City</span>
+                                            </div>
+                                        </ItemTemplate>
+                                    </MatAutocompleteList>
+                                </div>
+                            </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-12-desktop">
                             <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Latitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Latitude"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
+                                          OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
                         </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-12-desktop">
                             <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Longitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Longitude"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
+                                          OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
                         </div>
                     </div>
                 </div>
                     <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 Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)"
-                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
+                                            @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span class="btn-sm" style="background-color:@context.Code;
                         <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">
                             <div class="outlined">
                                 <MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Required="true" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)"
-                                 ShowClearButton="true" NumberOfElementsInPopup="6" @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
+                                                     ShowClearButton="true" NumberOfElementsInPopup="6" @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                     <ItemTemplate>
                                         <div>
                                             <span>@context?.Bezeichnung</span>
                         </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">
                             <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)"
-                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
+                                            @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span>@context?.Bezeichnung</span>
                         <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">
                             <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-12-desktop">
                                 <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
-                                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                             </div>
                         </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">
                             <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-12-desktop">
                                 <MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"
-                                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                             </div>
                         </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">
                             <div>
                                 <MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"
-                                 @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
+                                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
                             </div>
                         </div>
                     </div>
         brandStringValue = value;
         selectedBrand = null;
     }
+
+    private string zipCityStringValue;
+    private ZipCity selectedZipCity;
+    private ZipCity SelectedZipCity {
+        get { return selectedZipCity; }
+        set { selectedZipCity = (value != null) ? value : new ZipCity(zipCityStringValue); }
+    }
+    private void setZipCityValue(string value) {
+        zipCityStringValue = value;
+        selectedZipCity = null;
+    }
+
     private string frameNumber;
     private string remark;
     private bool abholadresseIsNotContact;
         await GetColors();
         await GetBicycleTypes();
         await GetBrands();
+        await GetZipCities();
         refreshGUIFromDto();
         OnlineStatusProvider.AddOnlineStatusChangeCallBack(OnOnlineStatusChanged);
         StateHasChanged();
         await MasterDataService.GetBrands();
     }
 
+    private async Task GetZipCities() {
+        await MasterDataService.GetZipCities();
+    }
+
     private ColorItem[] Colors {
         get => MasterDataService.Colors;
     }
         get => MasterDataService.Brands;
     }
 
+    private ZipCity[] ZipCities {
+        get => MasterDataService.ZipCities;
+    }
+
+
     private void Next() {
         updateDtoFromGUI();
         PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
 
 
     private string getAddressLbl() {
-        return I18n.GetString("Address") + " (" + I18n.GetString("PlaceOfDiscovery") + ")";
+        return I18n.GetString("Street") + " (" + I18n.GetString("PlaceOfDiscovery") + ")";
+    }
+
+    private string getZipCityLbl() {
+        return String.Format("{0} {1} ({2})", I18n.GetString("Zip"), I18n.GetString("City"), I18n.GetString("PlaceOfDiscovery"));
     }
 
     private async Task OnGatheringPicture(InputFileChangeEventArgs e) {
         bicycleGeoPosition.City = report.GeographicInfo.Town;
         bicycleGeoPosition.Latitude = report.GeographicInfo.Latitude;
         bicycleGeoPosition.Longitude = report.GeographicInfo.Longitude;
-        bicycleGeoPosition.DisplayCity = await GetFormattedAddressZipAndTown(ReportDataProvider);
+        if (OnlineStatusProvider.Online) {
+            bicycleGeoPosition.DisplayCity = await GetFormattedAddressZipAndTown(ReportDataProvider);
+        } else {
+            setZipCityValue(report.GeographicInfo.Postcode + " " + report.GeographicInfo.Town);
+            SelectedZipCity = new ZipCity(zipCityStringValue);
+        }
         imgUrl = report.FotoString;
         selectedColor = Array.Find(Colors, color => color.Id == report.FarbeId);
         selectedBrand = String.IsNullOrEmpty(report.NeueMarke) ? Array.Find(Brands, brand => brand.Id == report.MarkeId) : new Brand(-999, report.NeueMarke);
     private void updateDtoFromGUI() {
         FoundReport report = ReportDataProvider.GetFoundReport();
         report.GeographicInfo.Address = bicycleGeoPosition.Address;
-        report.GeographicInfo.Postcode = bicycleGeoPosition.Zip;
-        report.GeographicInfo.Town = bicycleGeoPosition.City;
+        if (OnlineStatusProvider.Online) {
+            report.GeographicInfo.Postcode = bicycleGeoPosition.Zip;
+            report.GeographicInfo.Town = bicycleGeoPosition.City;
+        } else {
+            report.GeographicInfo.Postcode = SelectedZipCity.Zip;
+            report.GeographicInfo.Town = SelectedZipCity.City;
+        }
         report.GeographicInfo.Latitude = bicycleGeoPosition.Latitude;
         report.GeographicInfo.Longitude = bicycleGeoPosition.Longitude;
         report.FotoString = imgUrl;

Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor.cs

                 !String.IsNullOrEmpty(this.bicycleGeoPosition.Zip) &&
                 !String.IsNullOrEmpty(this.bicycleGeoPosition.City)) {
                 LatLng geoPosition = await NominatimService.GetCoordinatesForAddress(bicycleGeoPosition.Address + ", " + bicycleGeoPosition.Zip + " " + bicycleGeoPosition.City);
-                this.bicycleGeoPosition.Latitude = geoPosition.Lat;
-                this.bicycleGeoPosition.Longitude = geoPosition.Lng;
-                await this.mapRef.SetZoom(16);
-                await this.mapRef.SetView(geoPosition);
-                MouseEvent mouseEvent = new MouseEvent();
-                mouseEvent.LatLng = geoPosition;
-                await AddBicycleMarkerOnClickPosition(mouseEvent);
+                if (geoPosition != null) {
+                    this.bicycleGeoPosition.Latitude = geoPosition.Lat;
+                    this.bicycleGeoPosition.Longitude = geoPosition.Lng;
+                    await this.mapRef.SetZoom(16);
+                    await this.mapRef.SetView(geoPosition);
+                    MouseEvent mouseEvent = new MouseEvent();
+                    mouseEvent.LatLng = geoPosition;
+                    await AddBicycleMarkerOnClickPosition(mouseEvent);
+                }
             }
         }
 
         private static string GetFormattedAddressZipAndTown(NominatimReverseAddress addressDto) {
-            string country_code = addressDto.address.country_code;
             string zip = SplitAndGetFirstPostcode(addressDto.address.postcode);
             string town = addressDto.address.city ?? addressDto.address.town ?? addressDto.address.village;
-
-            return (!String.IsNullOrEmpty(country_code) ? country_code.ToUpper() + "-" + zip + " " + town : zip + " " + town).TrimEnd();
+            return (zip + " " + town).TrimEnd();
         }
 
         private static string SplitAndGetFirstPostcode(string postcode) {

Properties/launchSettings.json

       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
-      "nativeDebugging": false,
+      "nativeDebugging": true,
       "applicationUrl": "https://localhost:5001;http://localhost:5000",
       "jsWebView2Debugging": false,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Shared/Models/Fundvelo/Report.cs

         public string Anrede { get; set; }                  // required
         public string Vorname { get; set; }                 // required
         public string Nachname { get; set; }                // required
-        public string Mobile { get; set; }
+        public string Mobil { get; set; }
         public string Telefon { get; set; }
-        public string Email { get; set; }
+        public string Mail { get; set; }
         public int? TypId { get; set; }                      // required
         public int? MarkeId { get; set; }                    // required
         public int? FarbeId { get; set; }                    // required

Shared/ResourceFiles/Resources.de.resx

   <data name="Specifications" xml:space="preserve">
     <value>Angaben</value>
   </data>
+  <data name="Street" xml:space="preserve">
+    <value>Strasse</value>
+  </data>
   <data name="Success.DeleteReport.Msg" xml:space="preserve">
     <value>Die Meldung mit der ID {0:d} wurde erfolgreich gelöscht!</value>
   </data>

Shared/ResourceFiles/Resources.fr.resx

   <data name="Specifications" xml:space="preserve">
     <value>Description détaillée</value>
   </data>
+  <data name="Street" xml:space="preserve">
+    <value>Rue</value>
+  </data>
   <data name="Success.DeleteReport.Msg" xml:space="preserve">
     <value>Le rapport avec l'ID {0:d} a été supprimé avec succès!</value>
   </data>

Shared/ResourceFiles/Resources.it.resx

   <data name="Specifications" xml:space="preserve">
     <value>Descrizione dettagliata</value>
   </data>
+  <data name="Street" xml:space="preserve">
+    <value>Via</value>
+  </data>
   <data name="Success.DeleteReport.Msg" xml:space="preserve">
     <value>Il rapporto con l'ID {0:d} è stato cancellato con successo!</value>
   </data>

Shared/ResourceFiles/Resources.resx

   <data name="Specifications" xml:space="preserve">
     <value>Specifications</value>
   </data>
+  <data name="Street" xml:space="preserve">
+    <value>Street</value>
+  </data>
   <data name="Success.DeleteReport.Msg" xml:space="preserve">
     <value>The Report with ID {0:d} was successfully deleted!</value>
   </data>

Shared/Services/Fundvelo/BicycleRestService.cs

 
                     if (httpResult.StatusCode == System.Net.HttpStatusCode.OK) {
                         string[] zipCitiesStr = JsonConvert.DeserializeObject<string[]>(await httpResult.Content.ReadAsStringAsync());
-                        List<ZipCity> zipCities = new ();
+                        List<ZipCity> zipCities = new();
                         for (int i = 0; i < zipCitiesStr.Length; i++) {
                             zipCities.Add(new ZipCity(zipCitiesStr[i]));
                         }

Shared/Services/Fundvelo/MasterDataService.cs

         private bool initializedBcTypes;
         private bool initializedBrands;
         private bool initializedSearchServices;
+        private bool initializedZipCities;
         private ColorItem[] colors;
         private BicycleType[] bicycleTypes;
         private Brand[] brands;
             get => this.brands;
         }
 
+        public ZipCity[] ZipCities {
+            get => this.zipCities;
+        }
+
         public SearchService[] SearchServices {
             get => this.searchServices;
         }
             return SearchServices;
         }
 
+        public async Task<ZipCity[]> GetZipCities() {
+            ZipCity[] _zipCities = await GetZipCitiesFromStorage();
+            if (_zipCities != null && _zipCities.Length > 0) {
+                this.zipCities = _zipCities;
+            }
+            this.zipCities = SortZipCities(new List<ZipCity>(this.zipCities)).ToArray();
+            return ZipCities;
+        }
+
         // This method is called from BlazorRegisterStorageEvent when the storage changed
         [JSInvokable]
         public void OnStorageUpdated(string key) {
             return result;
         }
 
+        private async ValueTask<ZipCity[]> GetZipCitiesFromStorage() {
+
+            // 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 (!this.initializedZipCities) {
+                // 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);
+                this.initializedZipCities = true;
+            }
+
+            // Read the JSON string that contains the data from the local storage
+            ZipCity[] result;
+            var str = await jsRuntime.InvokeAsync<string>("BlazorGetLocalStorage", KeyNameZipCities);
+            if (String.IsNullOrEmpty(str)) {
+                result = Array.Empty<ZipCity>();
+            } else {
+                result = JsonConvert.DeserializeObject<ZipCity[]>(str) ?? Array.Empty<ZipCity>();
+            }
+            return result;
+        }
 
         private async Task SaveColorsToStorage(ColorItem[] colors) {
             var json = JsonConvert.SerializeObject(colors);
             searchServices.Sort(delegate (SearchService ss1, SearchService ss2) { return ss1.Id == 0 ? -1 : ss2.Id == 0 ? 1 : ss1.Bezeichnung.CompareTo(ss2.Bezeichnung); });
             return searchServices;
         }
+
+        private static List<ZipCity> SortZipCities(List<ZipCity> zipCities) {
+            int v = int.Parse("22");
+            zipCities.Sort(delegate (ZipCity zc1, ZipCity zc2) { return int.Parse(zc1.Zip).CompareTo(int.Parse(zc2.Zip)); });
+            return zipCities;
+        }
     }
 }

Shared/Services/PermissionsProvider.cs

 using Microsoft.JSInterop;
-using System;
-using System.Collections.Generic;
 using System.Threading.Tasks;
 
 namespace cwebplusApp.Shared.Services {
         }
 
         private async Task<bool> GeoLocationAllowed() {
-            string result = ""; 
+            string result = "";
             var dotNetObjRef = DotNetObjectReference.Create(this);
             result = await JSRuntime.InvokeAsync<string>("IsGeoLocationAllowed", dotNetObjRef);
             this.IsGeoLocationAllowed = result.Equals("granted") || result.Equals("prompt");

Shared/Services/UserDataProvider.cs

             userData.Firstname = report.Vorname;
             userData.Lastname = report.Nachname;
             userData.Phone = report.Telefon;
-            userData.Mobile = report.Mobile;
-            userData.Email = report.Email;
+            userData.Mobile = report.Mobil;
+            userData.Email = report.Mail;
         }
 
         public static void MapReport(Report report, UserData userData) {
             report.Vorname = userData.Firstname;
             report.Nachname = userData.Lastname;
             report.Telefon = userData.Phone;
-            report.Mobile = userData.Mobile;
-            report.Email = userData.Email;
+            report.Mobil = userData.Mobile;
+            report.Mail = userData.Email;
         }
 
         public static void MapReport(Report report, char Salutation, string Firstname, string Lastname, string Phone) {
             report.PersonOrt = userData.City;
             report.PersonPLZ = userData.Zip;
             report.PersonStrasse = userData.Address;
-            report.Mobile = userData.Phone;
+            report.Mobil = userData.Phone;
             report.Mail = userData.Email;
         }
 

wwwroot/css/app.css

     }
 
 div.outlined .mdc-text-field.mdc-text-field--fullwidth .mdc-floating-label.mdc-floating-label--float-above {
-    transform: translateY(-172%) translateX(-8%) scale(0.75);
+    transform: translateY(-172%) translateX(-2%) scale(0.75);
     background-color: white;
     z-index: 2;
     min-width: 60px;
     text-align: center;
+    padding: 0px 8px;
 }
 
 .mat-autocomplete-list-popup {