230 lines
12 KiB
Plaintext
230 lines
12 KiB
Plaintext
@page "/PublicPrintingPage"
|
|
<style>
|
|
.mud-input-label {
|
|
background-color: #356859;
|
|
color: #eee !important;
|
|
}
|
|
|
|
.secondary-border > .mud-input-control-input-container > .mud-input.mud-input-outlined > input:focus ~ .mud-input-outlined-border {
|
|
border-color: rgba(253, 85, 35, 1);
|
|
color: white !important;
|
|
}
|
|
|
|
inpute {
|
|
color: white !important
|
|
}
|
|
</style>
|
|
<div class="w-screen h-screen bg-[#EEEEEE] p-0 flex flex-col-reverse md:flex-row overflow-hidden">
|
|
<div class="bg-[#356859] h-full basis-full md:basis-1/2 md:rounded-tr-none md:rounded-bl-xl md:rounded-tl-xl flex md:px-10 lg:px-20 py-8 px-4">
|
|
<MudStack class="text-white my-auto mx-auto">
|
|
<div class="hidden sm:flow-root">
|
|
<p class="text-lg text-center font-extrabold">دریافتـــ فایل شرح حال</p>
|
|
<p class="text-center text-md">اطلاعات هر بخش شرح حال را میتوانید به صورت پیش نویس وارد کنید و در شرح حال نویسی خود را سریع و کارامد کنید </p>
|
|
</div>
|
|
<p class="text-lg sm:mt-6 mb-3 font-extrabold">شماره تلفن شما</p>
|
|
|
|
<input class="bg-transparent text-[1.8rem] sm:py-3 font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
maxlength="11"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
<p class="text-lg mt-6 mb-3 font-extrabold">کد 6 رقمی شرح حال</p>
|
|
<MudFocusTrap>
|
|
<div class="flex flex-row-reverse justify-between gap-2 mb-6">
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,0)"
|
|
@ref="_otpAInput"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
@ref="_otpBInput"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,1)"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
@ref="_otpCInput"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,2)"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
maxlength="1"
|
|
@ref="_otpDInput"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,3)"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
@ref="_otpEInput"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,4)"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
|
|
<input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
|
|
type="text"
|
|
@ref="_otpFInput"
|
|
@oninput="async(e)=>await OTPTextChangedAsync(e,5)"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code" required>
|
|
</div>
|
|
</MudFocusTrap>
|
|
<BaseButtonUi Variant="Variant.Filled" Color="Color.Info" Icon="@Icons.Material.TwoTone.DocumentScanner" class="text-lg" Content="ثبت و تایید"></BaseButtonUi>
|
|
</MudStack>
|
|
|
|
</div>
|
|
<div class="h-full md:basis-1/2">
|
|
<div class="collapse h-0 sm:h-auto sm:visible">
|
|
<MudStack class="mx-auto px-8 lg:px-20 my-auto">
|
|
<div class="-mb-10">
|
|
<dotlottie-player src="https://lottie.host/e7dc67f6-baa3-44c1-b136-3b6e04685fb1/pb8uFg7FnQ.json"
|
|
background="transparent" speed="1" class="m-auto w-64 h-64 lg:w-80 lg:h-80" loop autoplay />
|
|
</div>
|
|
<p class="text-xl text-center font-extrabold">افزودن پیش نویس شرح حال جدید</p>
|
|
<p class="text-center text-md">اطلاعات هر بخش شرح حال را میتوانید به صورت پیش نویس وارد کنید و در شرح حال نویسی خود را سریع و کارامد کنید </p>
|
|
|
|
<div class="mt-3 overflow-y-hidden">
|
|
|
|
<MudTimeline TimelinePosition="TimelinePosition.Right">
|
|
<MudTimelineItem Color="Color.Info" Size="Size.Small">
|
|
<ItemOpposite>
|
|
<MudText Color="Color.Info" Typo="Typo.h5">1</MudText>
|
|
</ItemOpposite>
|
|
<ItemContent>
|
|
<MudText Color="Color.Info" Typo="Typo.h6" GutterBottom="true">وارد کردن شماره تلفن</MudText>
|
|
<MudText>شماره تلفن شخصی که شرح حال بیمار را در برنامه خود وارد کرده است را وارد کنید</MudText>
|
|
</ItemContent>
|
|
</MudTimelineItem>
|
|
<MudTimelineItem Color="Color.Success" Size="Size.Small">
|
|
<ItemOpposite>
|
|
<MudText Color="Color.Success" Typo="Typo.h5">2</MudText>
|
|
</ItemOpposite>
|
|
<ItemContent>
|
|
<MudText Color="Color.Success" Typo="Typo.h6" GutterBottom="true">وارد کردن کد شرح حال</MudText>
|
|
<MudText>کد شرح حال که در برنامه داکیومد ثبت شده است را وارد کنید</MudText>
|
|
</ItemContent>
|
|
</MudTimelineItem>
|
|
<MudTimelineItem Color="Color.Error" Size="Size.Small">
|
|
<ItemOpposite>
|
|
<MudText Color="Color.Error" Typo="Typo.h5">3</MudText>
|
|
</ItemOpposite>
|
|
<ItemContent>
|
|
<MudText Color="Color.Error" Typo="Typo.h6" GutterBottom="true">دریافت فایل شرح حال</MudText>
|
|
<MudText>دریافت فایل قابل چاپ شرح حال طبق بیمارستان و بخش بیمار ثبت شده</MudText>
|
|
</ItemContent>
|
|
</MudTimelineItem>
|
|
</MudTimeline>
|
|
</div>
|
|
</MudStack>
|
|
</div>
|
|
<div class="visible h-auto sm:h-0 sm:collapse px-5 mb-2 h-full">
|
|
<MudStack class="mt-14">
|
|
<div class="-mb-7 -mt-7">
|
|
<dotlottie-player src="https://lottie.host/e7dc67f6-baa3-44c1-b136-3b6e04685fb1/pb8uFg7FnQ.json"
|
|
background="transparent" speed="1" class="m-auto w-48 h-48" loop autoplay />
|
|
</div>
|
|
<p class="text-lg text-center font-extrabold">دریافتـــ فایل شرح حال</p>
|
|
<p class="text-center text-md">شماره تلفن فردی که شرح حال را ایجاد کرده است و کد شرح حال را وارد کنید تا فایل قابل چاپ شرح حال را دریافت کنید </p>
|
|
</MudStack>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
ElementReference? _otpAInput;
|
|
ElementReference? _otpBInput;
|
|
ElementReference? _otpCInput;
|
|
ElementReference? _otpDInput;
|
|
ElementReference? _otpEInput;
|
|
ElementReference? _otpFInput;
|
|
char[] _otpKey = new[] { '0', '0', '0', '0', '0', '0' };
|
|
|
|
public async Task OTPTextChangedAsync(ChangeEventArgs e, int step)
|
|
{
|
|
switch (step)
|
|
{
|
|
case 0:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[0] = (e.Value.ToString())[0];
|
|
await _otpBInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
case 1:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[1] = (e.Value.ToString())[0];
|
|
await _otpCInput!.Value.FocusAsync();
|
|
}
|
|
else
|
|
{
|
|
await _otpAInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
case 2:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[2] = (e.Value.ToString())[0];
|
|
await _otpDInput!.Value.FocusAsync();
|
|
}
|
|
else
|
|
{
|
|
await _otpBInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
case 3:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[3] = (e.Value.ToString())[0];
|
|
await _otpEInput!.Value.FocusAsync();
|
|
}
|
|
else
|
|
{
|
|
await _otpCInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
case 4:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[4] = (e.Value.ToString())[0];
|
|
await _otpFInput!.Value.FocusAsync();
|
|
}
|
|
else
|
|
{
|
|
await _otpDInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
case 5:
|
|
if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
|
|
{
|
|
_otpKey[5] = (e.Value.ToString())[0];
|
|
}
|
|
else
|
|
{
|
|
await _otpEInput!.Value.FocusAsync();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|