serega404/Otchislator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил отображение кол-ва символов
All checks were successful
Build and deploy / Publish image (push) Successful in 3m6s
Details

Browse Source
This commit is contained in:
Sergey Karmanov
2025-01-05 09:04:29 +03:00
parent cd5c04ec3b
commit a6ece4dbee
3 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Otchinslator/Components/Pages/Statement.razor
View File

@@ -7,7 +7,7 @@
<PageTitle>Заявление | Отчислятор 3000</PageTitle>
<PageScript Src="./Components/Pages/Statement.razor.js" />
<PageScript Src="./Components/Pages/Statement.razor.js"/>
<dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
@@ -27,8 +27,10 @@
<p id="loadingAnim" class="py-4"><span class="loading w-[15rem] loading-ring sm:w-[20rem]"></span></p>
<div id="failBlock" class="hidden justify-center">
<div class="flex justify-center items-center">
<svg class="w-[15rem] h-[15rem]" fill="red" stroke="red" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
<svg class="w-[15rem] h-[15rem]" fill="red" stroke="red" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<p class="text-red-500">Ошибка при генерации</p>
@@ -43,11 +45,19 @@
</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">
<textarea class="textarea textarea-bordered w-full h-96 resize-none" placeholder="Введите причину отчисления..." name="statement">Прошу отчислить меня по собственному желанию в связи с </textarea>
<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="join w-full mt-4 flex gap-2">
<div class="flex flex-col space-y-4 w-96">
<textarea class="textarea textarea-bordered w-full h-96 resize-none" placeholder="Введите причину отчисления..."
name="statement">Прошу отчислить меня по собственному желанию в связи с </textarea>
</div>
<div class="flex justify-between mt-1 text-sm">
<p id="needMoreText" class="text-gray-500 hidden">Нужно ещё немного дописать</p>
<p id="symCounter" class="text-gray-500 ml-auto">x/max</p>
</div>
<div class="join w-full mt-3 flex gap-2">
<a href="/" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
<img class="absolute p-3" src="img/exit.svg" alt=""/>
</a>

27
src/Otchinslator/Components/Pages/Statement.razor.js
View File

@@ -1,6 +1,9 @@
export function onLoad() {
const statementField = document.querySelector('textarea[name="statement"]');
const generateButton = document.querySelector('button[id="gen"]');
const symCounter = document.querySelector('p[id="symCounter"]');
const needMoreText = document.querySelector('p[id="needMoreText"]');
const maxSym = 600;
const optionMapping = {
"Баклан": 1,
@@ -80,8 +83,30 @@ export function onLoad() {
statementField.value = statementField.value.replace(/\s{2,}/g, ' ');
localStorage.setItem('statement', statementField.value);
if (statementField.value.length <= 100)
needMoreText.classList.remove('hidden');
else
needMoreText.classList.add('hidden');
let percentage = Math.floor(statementField.value.length / maxSym * 100);
if (percentage > 99) {
symCounter.classList.add('text-red-500');
symCounter.classList.remove('text-gray-500');
symCounter.classList.remove('text-yellow-500');
} else if (percentage > 85) {
symCounter.classList.add('text-yellow-500');
symCounter.classList.remove('text-gray-500');
symCounter.classList.remove('text-red-500');
}
else {
symCounter.classList.add('text-gray-500');
symCounter.classList.remove('text-red-500');
symCounter.classList.remove('text-yellow-500');
}
symCounter.innerText = statementField.value.length + '/' + maxSym;
if (statementField.value.length > 100) {
if (statementField.value.length > 100 && statementField.value.length < maxSym) {
generateButton.classList.remove('btn-disabled');
} else
generateButton.classList.add('btn-disabled');