Add translator web ui
This commit is contained in:
19
PoyoLang.Translator.Web/Components/Pages/Counter.razor
Normal file
19
PoyoLang.Translator.Web/Components/Pages/Counter.razor
Normal file
@@ -0,0 +1,19 @@
|
||||
@page "/counter"
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
|
||||
|
||||
<MudText Typo="Typo.body1" Class="mb-4">Current count: @currentCount</MudText>
|
||||
|
||||
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
|
||||
}
|
||||
38
PoyoLang.Translator.Web/Components/Pages/Error.razor
Normal file
38
PoyoLang.Translator.Web/Components/Pages/Error.razor
Normal file
@@ -0,0 +1,38 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p>
|
||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
|
||||
@code{
|
||||
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
|
||||
}
|
||||
145
PoyoLang.Translator.Web/Components/Pages/Home.razor
Normal file
145
PoyoLang.Translator.Web/Components/Pages/Home.razor
Normal file
@@ -0,0 +1,145 @@
|
||||
@page "/"
|
||||
@using PoyoLang.Translator
|
||||
@inject PoyoLangTranslator Translator
|
||||
@inject IJSRuntime JsRuntime
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<MudText Typo="Typo.h3" GutterBottom="true" Class="mt-5">PoyoLang Translator</MudText>
|
||||
<MudText Class="mb-5">Using this website you can freely translate from and to the Poyo language.
|
||||
This language only use variations of the word "poyo" (320 of them!) to write sentences using the latin alphabet.
|
||||
If you want more information about how this language works and how it is possible to translate to and from it,
|
||||
check out the <MudLink href="https://git.ilysix.fr/Eveldee/PoyoLang" Target="_blank">source code</MudLink> of this whole project.</MudText>
|
||||
|
||||
<MudToggleGroup T="string" @bind-Value="_sourceLanguage" @bind-Value:after="SourceLanguageUpdated"
|
||||
SelectionMode="SelectionMode.SingleSelection" Color="Color.Primary" CheckMark="true" FixedContent="true"
|
||||
Class="mb-1" Style="max-width: 30em;">
|
||||
<MudToggleItem Value="EnglishSourceLanguage" Text="English" />
|
||||
<MudToggleItem Value="PoyoSourceLanguage" Text="Poyo" />
|
||||
</MudToggleGroup>
|
||||
|
||||
@* Wide screen display *@
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
|
||||
<MudStack Row="true" StretchItems="StretchItems.StartAndEnd" Class=".d-none .d-md-flex">
|
||||
<MudStack>
|
||||
<MudTextField @bind-Value="_sourceText" @bind-Value:after="UpdateTranslatedText" DebounceInterval="500"
|
||||
Variant="Variant.Outlined" Label="Source text" Lines="15" />
|
||||
</MudStack>
|
||||
|
||||
<MudStack Spacing="1" Row="false">
|
||||
<MudTooltip Text="Swap languages">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" Color="Color.Primary" OnClick="SwapArrowClicked"/>
|
||||
</MudTooltip>
|
||||
|
||||
<MudTooltip Text="Copy translation result">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Primary" OnClick="CopyResultClicked"/>
|
||||
</MudTooltip>
|
||||
|
||||
<MudTooltip Text="Clear source text">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Error" OnClick="ClearButtonClicked"/>
|
||||
</MudTooltip>
|
||||
</MudStack>
|
||||
|
||||
<MudStack>
|
||||
<MudTextField @bind-Value="_translatedText" ReadOnly="true"
|
||||
Variant="Variant.Outlined" Label="Translation result" Lines="15" />
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudHidden>
|
||||
|
||||
@* Mobile display *@
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
||||
<MudStack Row="false" StretchItems="StretchItems.StartAndEnd">
|
||||
<MudStack>
|
||||
<MudTextField @bind-Value="_sourceText" @bind-Value:after="UpdateTranslatedText" DebounceInterval="500"
|
||||
Variant="Variant.Outlined" Label="Source text" Lines="15" />
|
||||
</MudStack>
|
||||
|
||||
<MudStack Spacing="1" Row="true">
|
||||
<MudTooltip Text="Swap languages">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" Color="Color.Primary" OnClick="SwapArrowClicked"/>
|
||||
</MudTooltip>
|
||||
|
||||
<MudTooltip Text="Copy translation result">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Primary" OnClick="CopyResultClicked"/>
|
||||
</MudTooltip>
|
||||
|
||||
<MudTooltip Text="Clear source text">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Error" OnClick="ClearButtonClicked"/>
|
||||
</MudTooltip>
|
||||
</MudStack>
|
||||
|
||||
<MudStack>
|
||||
<MudTextField @bind-Value="_translatedText" ReadOnly="true"
|
||||
Variant="Variant.Outlined" Label="Translation result" Lines="15" />
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudHidden>
|
||||
|
||||
@code {
|
||||
|
||||
private const string EnglishSourceLanguage = "English";
|
||||
private const string PoyoSourceLanguage = "PoyoLang";
|
||||
|
||||
private string _sourceText = "";
|
||||
private string _translatedText = "";
|
||||
private string _sourceLanguage = EnglishSourceLanguage;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.BottomCenter;
|
||||
}
|
||||
|
||||
private void SourceLanguageUpdated()
|
||||
{
|
||||
UpdateTranslatedText();
|
||||
}
|
||||
|
||||
private void SwapArrowClicked()
|
||||
{
|
||||
_sourceLanguage = _sourceLanguage switch
|
||||
{
|
||||
PoyoSourceLanguage => EnglishSourceLanguage,
|
||||
_ => PoyoSourceLanguage
|
||||
};
|
||||
|
||||
SwapLanguages();
|
||||
}
|
||||
|
||||
private void SwapLanguages()
|
||||
{
|
||||
_sourceText = _translatedText;
|
||||
|
||||
UpdateTranslatedText();
|
||||
}
|
||||
|
||||
private void UpdateTranslatedText()
|
||||
{
|
||||
string result;
|
||||
|
||||
if (_sourceLanguage is PoyoSourceLanguage)
|
||||
{
|
||||
result = Translator.TranslateFromPoyo(_sourceText);
|
||||
}
|
||||
else
|
||||
{
|
||||
result = Translator.TranslateToPoyo(_sourceText);
|
||||
}
|
||||
|
||||
_translatedText = result;
|
||||
}
|
||||
|
||||
private async Task CopyResultClicked()
|
||||
{
|
||||
await JsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", _translatedText);
|
||||
|
||||
Snackbar.Add("Translation result copied to clipboard!", Severity.Info);
|
||||
}
|
||||
|
||||
private void ClearButtonClicked()
|
||||
{
|
||||
_sourceText = string.Empty;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user