Caritas
/
CaritasPWA
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Input Cursor movement with arrow and enter keys

master
Flo Smilari 4 years ago
parent
dc4dabbacf
commit
6a748080e5
7 changed files with 136 additions and 72 deletions
Unified View Show Diff Stats
  1. 17
    11
      Pages/AccountPage.razor
  2. 19
    9
      Pages/Fundvelo/CaritasServiceFundVeloAlternatePickupContactPage.razor
  3. 22
    11
      Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor
  4. 20
    12
      Pages/Fundvelo/CaritasServiceFundVeloMissingKeyDataPage.razor
  5. 11
    0
      Shared/Services/Fundvelo/Validator.cs
  6. 1
    16
      Shared/Services/InputCursorHandler.cs
  7. 46
    13
      wwwroot/index.html

+ 17
- 11
Pages/AccountPage.razor View File

@inject PageHistoryManager PageHistoryManager @inject PageHistoryManager PageHistoryManager
@inject ReportDataProvider ReportDataProvider @inject ReportDataProvider ReportDataProvider
@inject Toaster Toaster @inject Toaster Toaster
@inject InputCursorHandler InputCursorHandler;
@inject InputCursorHandler InputCursorHandler
<div class="row px-3 h-100"> <div class="row px-3 h-100">
<div class="row no-gutters align-items-start w-100"> <div class="row no-gutters align-items-start w-100">
<div class="row no-gutters align-items-center w-100" style="padding-top:2em"> <div class="row no-gutters align-items-center w-100" style="padding-top:2em">
<div class="col-12"> <div class="col-12">
<MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="@Account.Salutation" Style="margin-bottom: 0.5rem" Required="true">
<MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="@Account.Salutation" Style="margin-bottom: 0.5rem" Required="true"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<MatOptionString Value="M">@I18n["Male"]</MatOptionString> <MatOptionString Value="M">@I18n["Male"]</MatOptionString>
<MatOptionString Value="F">@I18n["Female"]</MatOptionString> <MatOptionString Value="F">@I18n["Female"]</MatOptionString>
</MatSelect> </MatSelect>
<div class="row no-gutters w-100"> <div class="row no-gutters w-100">
<div class="col-6" style="padding-right:0.5em"> <div class="col-6" style="padding-right:0.5em">
<MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="@Account.Firstname" Required="true" <MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="@Account.Firstname" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
<div class="col-6" style="padding-left:0.5em"> <div class="col-6" style="padding-left:0.5em">
<MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="@Account.Lastname" Required="true" <MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="@Account.Lastname" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="@Account.Address" <MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="@Account.Address"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-4" style="padding-right:0.5em"> <div class="col-4" style="padding-right:0.5em">
<MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="@Account.Zip" <MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="@Account.Zip"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
<div class="col-8" style="padding-left:0.5em"> <div class="col-8" style="padding-left:0.5em">
<MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="@Account.City" <MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="@Account.City"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="@Account.Phone" Required="true" <MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="@Account.Phone" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="@Account.Email" <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="@Account.Email"
OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
</div> </div>
} }
private async Task SaveUserData() { private async Task SaveUserData() {
Validator.ValidateAccount(Account);
await UserDataProvider.Save(Account); await UserDataProvider.Save(Account);
} }
private async void SaveUserDataAndClose() { private async void SaveUserDataAndClose() {
await SaveUserData();
NavigationManager.NavigateTo("caritas_services");
try {
await SaveUserData();
NavigationManager.NavigateTo("caritas_services");
} catch (ArgumentException) {
Toaster.ShowWarning(I18n.GetString("Warning.MandatoryFields.Title"), I18n.GetString("Warning.MandatoryFields.Msg"));
}
} }
private async Task<UserData> GetUserData() { private async Task<UserData> GetUserData() {

+ 19
- 9
Pages/Fundvelo/CaritasServiceFundVeloAlternatePickupContactPage.razor View File

@inject PageHistoryManager PageHistoryManager @inject PageHistoryManager PageHistoryManager
@inject ReportDataProvider ReportDataProvider @inject ReportDataProvider ReportDataProvider
@inject Toaster Toaster @inject Toaster Toaster
@inject InputCursorHandler InputCursorHandler;
<div class="row px-3 h-100"> <div class="row px-3 h-100">
<div class="row no-gutters align-items-start w-100"> <div class="row no-gutters align-items-start w-100">
<div class="row no-gutters w-100"> <div class="row no-gutters w-100">
<div class="col-12"> <div class="col-12">
<MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="pucSalutation" Required="true" Style="margin-bottom: 0.5rem">
<MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="pucSalutation" Required="true" Style="margin-bottom: 0.5rem"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<MatOptionString Value="M">@I18n["Male"]</MatOptionString> <MatOptionString Value="M">@I18n["Male"]</MatOptionString>
<MatOptionString Value="F">@I18n["Female"]</MatOptionString> <MatOptionString Value="F">@I18n["Female"]</MatOptionString>
</MatSelect> </MatSelect>
</div> </div>
<div class="row no-gutters w-100"> <div class="row no-gutters w-100">
<div class="col-6" style="padding-right:0.5em"> <div class="col-6" style="padding-right:0.5em">
<MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="pucFirstname" Required="true"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="pucFirstname" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
<div class="col-6" style="padding-left:0.5em"> <div class="col-6" style="padding-left:0.5em">
<MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="pucLastname" Required="true"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="pucLastname" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="pucAddress" Required="true"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="pucAddress" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-4" style="padding-right:0.5em"> <div class="col-4" style="padding-right:0.5em">
<MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="pucZip" Required="true"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="pucZip" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
<div class="col-8" style="padding-left:0.5em"> <div class="col-8" style="padding-left:0.5em">
<MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="pucCity" Required="true"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="pucCity" Required="true"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="pucMobile"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="pucMobile"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="pucPhone"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="pucPhone"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
<div class="row no-gutters align-items-center w-100"> <div class="row no-gutters align-items-center w-100">
<div class="col-12"> <div class="col-12">
<MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="pucEmail"></MatStringField>
<MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="pucEmail"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
</div> </div>

+ 22
- 11
Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor View File

@inject IJSRuntime JS @inject IJSRuntime JS
@inject ReportDataProvider ReportDataProvider @inject ReportDataProvider ReportDataProvider
@inject OnlineStatusProvider OnlineStatusProvider @inject OnlineStatusProvider OnlineStatusProvider
@inject InputCursorHandler InputCursorHandler;
<div class="row px-3 h-100"> <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="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-4-desktop"> <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-4-desktop">
<div class="mat-layout-grid-inner"> <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"> <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"></MatStringField>
<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>
<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"> <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"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["PlaceOfDiscovery"]" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"
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-12-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">
<MatTextField Class="w-100 form-check-label italic" Label="@I18n["Latitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Latitude"></MatTextField>
<MatTextField Class="w-100 form-check-label italic" Label="@I18n["Latitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Latitude"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
</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"> <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"></MatTextField>
<MatTextField Class="w-100 form-check-label italic" Label="@I18n["Longitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Longitude"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
</div> </div>
</div> </div>
</div> </div>
<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-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-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"> <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)">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span class="btn-sm" style="background-color:@context.Code; <span class="btn-sm" style="background-color:@context.Code;
</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-4-desktop">
<div class="outlined"> <div class="outlined">
<MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Required="true" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)">
<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">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span>@context?.Bezeichnung</span> <span>@context?.Bezeichnung</span>
</div> </div>
</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-4-desktop">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span>@context?.Bezeichnung</span> <span>@context?.Bezeichnung</span>
</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-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"> <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"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</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-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"> <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"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</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-4-desktop">
<div> <div>
<MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"></MatCheckbox>
<MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
</div> </div>
</div> </div>
</div> </div>
MouseEvent mouseEvent = new MouseEvent(); MouseEvent mouseEvent = new MouseEvent();
LatLng coordinates; LatLng coordinates;
LatLng devicePosition = await InitializeDeviceMapPosition(); LatLng devicePosition = await InitializeDeviceMapPosition();
if (report != null && ((report.GeographicInfo.Latitude != 0 && report.GeographicInfo.Longitude != 0) ||
if (report != null && ((report.GeographicInfo.Latitude != 0 && report.GeographicInfo.Longitude != 0) ||
(ReportDataProvider.ReportRepositoryItem != null && ReportDataProvider.ReportRepositoryItem.ID != 0))) { (ReportDataProvider.ReportRepositoryItem != null && ReportDataProvider.ReportRepositoryItem.ID != 0))) {
bicycleGeoPosition.DisplayCity = await GetFormattedAddressZipAndTown(ReportDataProvider); bicycleGeoPosition.DisplayCity = await GetFormattedAddressZipAndTown(ReportDataProvider);
coordinates = new LatLng(report.GeographicInfo.Latitude, report.GeographicInfo.Longitude); coordinates = new LatLng(report.GeographicInfo.Latitude, report.GeographicInfo.Longitude);

+ 20
- 12
Pages/Fundvelo/CaritasServiceFundVeloMissingKeyDataPage.razor View File

@inject Toaster Toaster @inject Toaster Toaster
@inject IJSRuntime JS @inject IJSRuntime JS
@inject ReportDataProvider ReportDataProvider @inject ReportDataProvider ReportDataProvider
@inject InputCursorHandler InputCursorHandler;
<div class="row px-3 h-100"> <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="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-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-4-desktop">
<div class="mat-layout-grid-inner"> <div class="mat-layout-grid-inner">
<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-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span class="btn-sm" style="background-color:@context.Code; <span class="btn-sm" style="background-color:@context.Code;
</div> </div>
<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-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
<div class="outlined"> <div class="outlined">
<MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)" Required="true">
<MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)" Required="true"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span>@context?.Bezeichnung</span> <span>@context?.Bezeichnung</span>
</div> </div>
</div> </div>
<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-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
<MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span>@context?.Bezeichnung</span> <span>@context?.Bezeichnung</span>
</MatSelectValue> </MatSelectValue>
</div> </div>
<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-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-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"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync">></MatStringField>
</div> </div>
</div> </div>
</div> </div>
<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-4-desktop"> <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-4-desktop">
<div class="mat-layout-grid-inner"> <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"> <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">
<MatNumericUpDownField Class="w-100" Label="@I18n["Age"]" Outlined="true" @bind-Value="@age"></MatNumericUpDownField>
<MatNumericUpDownField Class="w-100" Label="@I18n["Age"]" Outlined="true" @bind-Value="@age"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatNumericUpDownField>
</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"> <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" Label="@I18n["Price"]" Format="0.00" Outlined="true" @bind-Value="@price"></MatTextField>
<MatTextField Class="w-100 form-check-label" Label="@I18n["Price"]" Format="0.00" Outlined="true" @bind-Value="@price"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
</div> </div>
<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-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
<MatSelectValue FullWidth="true" Outlined="true" Label="@I18n["SearchService"]" @bind-Value="selectedSearchService" Items="@SearchServices" ValueSelector="@(i=>i)">
<MatSelectValue FullWidth="true" Outlined="true" Label="@I18n["SearchService"]" @bind-Value="selectedSearchService" Items="@SearchServices" ValueSelector="@(i=>i)"
@onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
<ItemTemplate> <ItemTemplate>
<div> <div>
<span>@context?.Bezeichnung</span> <span>@context?.Bezeichnung</span>
</MatSelectValue> </MatSelectValue>
</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"> <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["SearchServiceNbr"]" Outlined="true" type="text" @bind-Value="searchServiceNbr"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["SearchServiceNbr"]" Outlined="true" type="text" @bind-Value="searchServiceNbr"
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-12-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"></MatStringField>
<MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"
OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
</div> </div>
</div> </div>
</div> </div>
frameNumber = report.RahmenNummer; frameNumber = report.RahmenNummer;
age = report.Alter; age = report.Alter;
price = report.Preis; price = report.Preis;
selectedSearchService = Array.Find(SearchServices, searchService => searchService.Id == report.SuchDienstId);
selectedSearchService = Array.Find(SearchServices, searchService => searchService.Id == report.SuchDienstId);
searchServiceNbr = report.SuchDienstNr; searchServiceNbr = report.SuchDienstNr;
remark = report.Bemerkung; remark = report.Bemerkung;
} }

+ 11
- 0
Shared/Services/Fundvelo/Validator.cs View File

throw new ArgumentException("ValidationException"); throw new ArgumentException("ValidationException");
} }
} }
public static void ValidateAccount(UserData account) {
int notValid = 0;
notValid += String.IsNullOrEmpty(account.Salutation) ? 1 : 0;
notValid += String.IsNullOrEmpty(account.Firstname) ? 1 : 0;
notValid += String.IsNullOrEmpty(account.Lastname) ? 1 : 0;
notValid += String.IsNullOrEmpty(account.Phone) ? 1 : 0;
if (notValid > 0) {
throw new ArgumentException("ValidationException");
}
}
} }
} }

+ 1
- 16
Shared/Services/InputCursorHandler.cs View File

this.jsRuntime = _jsRuntime; this.jsRuntime = _jsRuntime;
} }
public async Task OnKeyPressHandlerAsync(KeyboardEventArgs e) {
Console.WriteLine("Key pressed: " + e.Key);
public async Task OnKeyDownHandlerAsync(KeyboardEventArgs e) {
var reference = DotNetObjectReference.Create(this); var reference = DotNetObjectReference.Create(this);
if (e.Key.Equals("Enter") || e.Key.Equals("ArrowRight")) { if (e.Key.Equals("Enter") || e.Key.Equals("ArrowRight")) {
await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference, e.Key); await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference, e.Key);
//await MoveInputCursor(true);
} else if (e.Key.Equals("ArrowLeft")) { } else if (e.Key.Equals("ArrowLeft")) {
await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference); await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference);
//await MoveInputCursor(false);
} }
} }
//public async Task MoveInputCursor(bool forward) {
// var reference = DotNetObjectReference.Create(this);
// if (forward) {
// await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference);
// } else {
// await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference);
// }
//}
} }
} }

+ 46
- 13
wwwroot/index.html View File

document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock"); document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
} }
function MoveCursorToNextInput(dotNetObjRef, key) { function MoveCursorToNextInput(dotNetObjRef, key) {
if (key == "Enter" || key == "ArrowRight") { if (key == "Enter" || key == "ArrowRight") {
var activeInput = document.activeElement;
var inputs = document.getElementsByTagName("input");
var activeElement = document.activeElement;
var inputs = getKeyboardFocusableElements();
var arr = Array.prototype.slice.call(inputs) var arr = Array.prototype.slice.call(inputs)
var index = arr.indexOf(activeInput);
if (index + 1 < arr.length && (key == "Enter" || activeInput.selectionStart == activeInput.value.length)) {
arr[index + 1].focus();
setTimeout(function () { arr[index + 1].select(); }, 50);
var index = arr.indexOf(activeElement);
if (index + 1 < arr.length && CanNavigateForward(activeElement, key)) {
activeElement.dispatchEvent(new Event('focusout'));
setTimeout(function () { arr[index + 1].focus(); }, 50);
if (arr[index + 1].localName.includes('input') || arr[index + 1].localName.includes('textarea')) {
setTimeout(function () { arr[index + 1].select(); }, 50);
}
} }
} }
} }
function MoveCursorToPreviousInput(dotNetObjRef) { function MoveCursorToPreviousInput(dotNetObjRef) {
var activeInput = document.activeElement;
var inputs = document.getElementsByTagName("input");
var activeElement = document.activeElement;
var inputs = getKeyboardFocusableElements();
var arr = Array.prototype.slice.call(inputs) var arr = Array.prototype.slice.call(inputs)
var index = arr.indexOf(activeInput);
if (index - 1 >= 0 && activeInput.selectionStart == 0) {
arr[index - 1].focus();
setTimeout(function () { arr[index - 1].select(); }, 50);
var index = arr.indexOf(activeElement);
if (index - 1 >= 0 && CanNavigateBack(activeElement)) {
activeElement.dispatchEvent(new Event('focusout'));
setTimeout(function () { arr[index + 1].focus(); }, 50);
if (arr[index - 1].localName.includes('input') || arr[index - 1].localName.includes('textarea')) {
setTimeout(function () { arr[index - 1].select(); }, 50);
}
}
}
function DispatchKeyboardEvent(dotNetObjRef, key) {
window.dispatchEvent(new KeyboardEvent('keydown', { 'key': key }));
}
function getKeyboardFocusableElements(element = document) {
return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
.filter(el => el.localName !='li' && !el.getAttribute("aria-hidden"))
}
function CanNavigateForward(element, key) {
if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
if (key == "Enter") {
return false;
}
return true;
} else {
return key == "Enter" || element.selectionStart == element.value.length
|| (element.selectionStart == 0 && element.selectionEnd == element.value.length);
} }
} }
function CanNavigateBack(element) {
if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
return true;
} else {
return element.selectionStart == null ||element.selectionStart == 0;
}
}
</script> </script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"

Write Preview
Loading…
Cancel
Save