From 4428052d78ce3089d49789ae12c90451f0b67816 Mon Sep 17 00:00:00 2001
From: Sergey Karmanov <ppoocpel8888@gmail.com>
Date: Fri, 13 Dec 2024 10:05:45 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B2=D0=B5=D1=80=D1=81=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=20=D0=B0=D0=BD=D0=BA=D0=B5=D1=82=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Layout/NavMenu.razor           |   4 +-
 src/Otchinslator/Components/Pages/Home.razor  |   5 +-
 .../Components/Pages/Questionnaire.razor      | 189 +++++++++++-------
 .../Properties/launchSettings.json            |   2 +-
 src/Otchinslator/wwwroot/img/exit.svg         |   4 +
 5 files changed, 123 insertions(+), 81 deletions(-)
 create mode 100644 src/Otchinslator/wwwroot/img/exit.svg

diff --git a/src/Otchinslator/Components/Layout/NavMenu.razor b/src/Otchinslator/Components/Layout/NavMenu.razor
index 6cabb01..a5a7214 100644
--- a/src/Otchinslator/Components/Layout/NavMenu.razor
+++ b/src/Otchinslator/Components/Layout/NavMenu.razor
@@ -34,9 +34,9 @@
     }
 }
 
-<footer class="card fixed bottom-0 w-96 h-20 bg-base-200 rounded-badge p-4 mb-3">
+<footer class="card fixed bottom-0 w-96 sm:w-[32rem] h-20 bg-base-200 rounded-badge p-4 mb-3">
     <div class="flex justify-center items-center">
-        <ul class="steps justify-center center">
+        <ul class="steps justify-center center w-full text-sm">
             <a href="/" class="step step-primary text-gray-500">Выбор</a>
             @foreach (int i in Enumerable.Range(1, 4))
             {
diff --git a/src/Otchinslator/Components/Pages/Home.razor b/src/Otchinslator/Components/Pages/Home.razor
index 3aa46a9..22103c8 100644
--- a/src/Otchinslator/Components/Pages/Home.razor
+++ b/src/Otchinslator/Components/Pages/Home.razor
@@ -65,10 +65,7 @@
                             <a href="MicrosoftIdentity/Account/SignOut" class="btn btn-lg btn-primary rounded-full text-2xl relative">
                                 @context.User.Identity?.Name!.Split("@")[0]
                                 <div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
-                                    <svg class="p-3" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M16.5 15V19.5H5.5V5.5H16.5V10M10 12.5H22.5" stroke="#121923" stroke-width="1.2"/>
-                                        <path d="M20 10L22.5 12.5L20 15" stroke="#121923" stroke-width="1.2"/>
-                                    </svg>
+                                    <img class="p-3" src="img/exit.svg" alt=""/>
                                 </div>
                             </a>
                         </Authorized>
diff --git a/src/Otchinslator/Components/Pages/Questionnaire.razor b/src/Otchinslator/Components/Pages/Questionnaire.razor
index 3211b39..b925860 100644
--- a/src/Otchinslator/Components/Pages/Questionnaire.razor
+++ b/src/Otchinslator/Components/Pages/Questionnaire.razor
@@ -4,7 +4,7 @@
 @layout OtchislenieLayout
 
 <style>
-    .button-cover, .knobs, .layer
+    .knobs, .layer
     {
         position: absolute;
         top: 0;
@@ -17,17 +17,13 @@
     {
         position: relative;
         top: 50%;
-        width: 74px;
-        height: 36px;
+        width: 5rem;
+        height: 2.6rem;
         margin: -20px auto 0 auto;
         overflow: hidden;
+        margin-top: 4px;
     }
-
-    .button-custom.r, .button-custom.r .layer
-    {
-        border-radius: 100px;
-    }
-
+    
     .checkbox-custom
     {
         position: relative;
@@ -45,22 +41,19 @@
         z-index: 2;
     }
 
-    /* button-custom 1 */
     #button-custom-1 .knobs:before
     {
-        content: 'D';
+        content: '';
         position: absolute;
         top: 4px;
         left: 4px;
-        width: 20px;
-        height: 10px;
+        width: 2.1rem;
+        height: 2.1rem;
         color: #fff;
-        font-size: 10px;
-        font-weight: bold;
         text-align: center;
-        line-height: 1;
-        padding: 14px 14px;
-        background-color: #03A9F4;
+        font-size: 22px;
+        padding: 1px 12px 12px 11px;
+        background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
         border-radius: 50%;
         transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
     }
@@ -74,6 +67,31 @@
 
 </style>
 
+<dialog id="exit_modal" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box">
+        <h3 class="text-lg font-bold">Сервис отчислений</h3>
+        <p class="py-4">Вы уверены что хотите выйти? Прогресс не сохранится</p>
+        <div class="modal-action">
+            <form method="dialog">
+                <button class="btn btn-error">На главную</button>
+                <button class="btn btn-primary">Закрыть</button>
+            </form>
+        </div>
+    </div>
+</dialog>
+
+<dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box">
+        <h3 class="text-lg font-bold">Сервис отчислений</h3>
+        <p class="py-4">Вам нужно заполнить эти данные для шапки заявления</p>
+        <div class="modal-action">
+            <form method="dialog">
+                <button class="btn">Закрыть</button>
+            </form>
+        </div>
+    </div>
+</dialog>
+
 <div class="relative">
     <div class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic"><br>Небольшая анкета</div>
     <div class="flex flex-col space-y-4 w-96">
@@ -81,66 +99,89 @@
             <h2 class="card-title text-center text-3xl justify-center my-4">Кто ты воин?</h2>
             <div class="join rounded-full justify-center">
                 <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Баклан"/>
-                <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Спец" checked="checked"/>
+                <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Спец"/>
                 <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Маг"/>
             </div>
-            <div class="flex flex-col space-y-4 mt-1">
-                <button class="btn h-16 btn-primary rounded-full text-2xl relative">
-                    Понизить курс
-                    <div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
-                        <svg class="p-2" fill="none" viewBox="0 0 24 24" id="down-trend-round" xmlns="http://www.w3.org/2000/svg">
-                            <path id="primary" d="M3,7l5.79,5.79a1,1,0,0,0,1.42,0l2.58-2.58a1,1,0,0,1,1.42,0L21,17" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5;"></path><polyline id="primary-2" data-name="primary" points="17 17 21 17 21 13" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5;"></polyline>
-                        </svg>
-                    </div>
-                    <i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i>
-                </button>
-                <button class="btn h-16 btn-primary p-0 rounded-full text-2xl relative">
-                    Уйти в академ
-                    <div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
-                        <img class="p-2" src="img/akadem.svg" alt=""/>
-                    </div>
-                    <i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i>
-                </button>
-                <div class="divider"></div>
-
+            <h2 class="text-center text-2xl justify-center my-4">Курс?</h2>
+            <div class="join rounded-full justify-center">
+                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="1"/>
+                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="2"/>
+                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="3"/>
+                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="4"/>
+                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="5"/>
+            </div>
+            <h2 class="text-center text-2xl justify-center my-4">Платник?</h2>
+            <div class="button-custom r" id="button-custom-1">
+                <input type="checkbox" class="checkbox-custom"/>
+                <div class="knobs"></div>
+                <div class="layer rounded-full" style="background-color: white;"></div>
+            </div>
+            <h2 class="text-center text-2xl justify-center my-4">Номер</h2>
+            <div class="relative rounded-full justify-center mx-auto">
+                <div class="absolute top-2 left-0 flex items-center pl-3">
+                    <span class="text-2xl">+7</span>
+                    <div class="h-6 border-l-2 border-slate-200 ml-2"></div>
+                </div>
+                <input
+                    type="tel"
+                    class="h-12 w-[14rem] bg-white rounded-full placeholder:text-slate-400 text-slate-700 text-2xl pr-3 pl-14 py-2 transition duration-300 focus:outline-none focus:bg-primary"
+                    placeholder="999 999 99 99"
+                    pattern="[0-9]*"
+                    inputmode="numeric"
+                    maxlength="12"
+                    id="phoneNumberInput"/>
             </div>
         </div>
     </div>
+
+    <div class="join w-full mt-4 flex  gap-2">
+        <button onclick="exit_modal.showModal()" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
+            <img class="absolute p-3" src="img/exit.svg" alt=""/>
+        </button>
+        <a href="otchislenie/statement" class="btn rounded-full btn-primary flex-grow w-30">Продолжим</a>
+        <button onclick="info_modal.showModal()" class="btn btn-primary rounded-full flex-grow-0 w-[3rem]">?</button>
+    </div>
 </div>
 
-@* <div class="relative"> *@
-@*     <div class="text-center font-bold text-4xl md:text-5xl w-max absolute -top-1/3 italic">Небольшая анкета</div> *@
-@* *@
-@*     <div class="relative"> *@
-@*         
-@*         <div class="mb-4"> *@
-@*             <h2 class="text-xl font-semibold mb-2">Курс?</h2> *@
-@*             <div class="join"> *@
-@*                 <input class="join-item btn" type="radio" name="kurs" aria-label="1" checked="checked"/> *@
-@*                 <input class="join-item btn" type="radio" name="kurs" aria-label="2"/> *@
-@*                 <input class="join-item btn" type="radio" name="kurs" aria-label="3"/> *@
-@*                 <input class="join-item btn" type="radio" name="kurs" aria-label="4"/> *@
-@*                 <input class="join-item btn" type="radio" name="kurs" aria-label="5"/> *@
-@*             </div> *@
-@*         </div> *@
-@*         <div class="mb-4"> *@
-@*             <h2 class="text-xl font-semibold mb-2">Платник?</h2> *@
-@*             <div class="button-custom r" id="button-custom-1"> *@
-@*                 <input type="checkbox" class="checkbox-custom"> *@
-@*                 <div class="knobs"></div> *@
-@*                 <div class="layer" style="background-color: white;"></div> *@
-@*             </div> *@
-@*             <div class="btn-group btn-group-horizontal"> *@
-@*                 <button class="btn btn-outline btn-primary">+</button> *@
-@*                 <button class="btn btn-outline">7</button> *@
-@*                 <button class="btn btn-outline">9</button> *@
-@*                 <button class="btn btn-outline">9</button> *@
-@*                 <button class="btn btn-outline">9</button> *@
-@*                 <button class="btn btn-outline">6</button> *@
-@*                 <button class="btn btn-outline">6</button> *@
-@*                 <button class="btn btn-outline">6</button> *@
-@*                 <button class="btn btn-outline">3</button> *@
-@*                 <button class="btn btn-outline">3</button> *@
-@*             </div> *@
-@*         </div> *@
-@*     </div></div> *@
\ No newline at end of file
+@* TODO: Баг, если вернуться обратно через Nav то скрипты не грузятся  *@
+<script defer>
+    document.getElementById('phoneNumberInput').addEventListener('input', function (e) {
+        e.target.value = e.target.value.replace(/\D/g, '').slice(0, 10); // Limit to 10 digits
+        let num = e.target.value;
+        if (num.length > 3 && num.length <= 6) {
+            e.target.value = num.substring(0,3) + ' ' + num.substring(3,6);
+        } else if (num.length > 6 && num.length <= 8) {
+            e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,8);
+        } else if (num.length > 8) {
+            e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,10);
+        }
+    });
+</script>
+
+<script>
+    const continueButton = document.querySelector('a[href="otchislenie/statement"]');
+    const options = document.querySelectorAll('input[name="options"]');
+    const kurs = document.querySelectorAll('input[name="kurs"]');
+    const phoneNumberInput = document.getElementById('phoneNumberInput');
+
+    function validateForm() {
+            const isOptionSelected = Array.from(options).some(option => option.checked);
+            const isKursSelected = Array.from(kurs).some(k => k.checked);
+            const isPhoneNumberValid = phoneNumberInput.value.length === 12;
+            
+            // log
+            console.log(isOptionSelected, isKursSelected, isPhoneNumberValid);
+
+            if (isOptionSelected && isKursSelected && isPhoneNumberValid) {
+                continueButton.classList.remove('btn-disabled');
+            } else {
+                continueButton.classList.add('btn-disabled');
+            }
+    }
+
+    options.forEach(option => option.addEventListener('change', validateForm));
+    kurs.forEach(k => k.addEventListener('change', validateForm));
+    phoneNumberInput.addEventListener('input', validateForm);
+
+    validateForm(); // Initial validation
+</script>
\ No newline at end of file
diff --git a/src/Otchinslator/Properties/launchSettings.json b/src/Otchinslator/Properties/launchSettings.json
index cd38476..feeb10d 100644
--- a/src/Otchinslator/Properties/launchSettings.json
+++ b/src/Otchinslator/Properties/launchSettings.json
@@ -25,7 +25,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "applicationUrl": "http://0.0.0.0:5211",
+        "applicationUrl": "http://localhost:5211",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }
diff --git a/src/Otchinslator/wwwroot/img/exit.svg b/src/Otchinslator/wwwroot/img/exit.svg
new file mode 100644
index 0000000..c0e4935
--- /dev/null
+++ b/src/Otchinslator/wwwroot/img/exit.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.5 15V19.5H5.5V5.5H16.5V10M10 12.5H22.5" stroke="#121923" stroke-width="1.2"/>
+    <path d="M20 10L22.5 12.5L20 15" stroke="#121923" stroke-width="1.2"/>
+</svg>
\ No newline at end of file