public/lab8/task1/index.html - main - Coderdev/web-nodejs-labs

public/lab8/task1/index.html
1 строка6 KB
Coderdev
13 апр 2026, 21:35
13 апр 2026, 21:35d23c89a
<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lab8 Task1</title><style>body{margin:0;font-family:Arial,sans-serif;background:#0f172a;color:#e2e8f0}.wrapper{max-width:1100px;margin:0 auto;padding:24px}.panel,.card{background:#111c34;border:1px solid #25314d;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.panel{padding:24px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}label{display:block;margin-bottom:8px;font-weight:700}input[type=text],select{width:100%;min-height:44px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#fff;padding:0 12px}button,a.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;border:none;cursor:pointer}.secondary{background:#16a34a}.muted{color:#94a3b8}.status{min-height:24px;margin-top:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #25314d;padding:10px;text-align:left}.hidden{display:none}@media(max-width:900px){.grid,.row{grid-template-columns:1fr}}</style></head><body><div class="wrapper"><a class="btn" href="/lab8/" style="margin-bottom:16px;background:#334155">← Назад</a><div class="panel"><h1 style="margin-top:0">Task 1 · Форма и сохранение в файл</h1><p class="muted">Кнопка «Сохранить инициалы» вызывает /api/lab8/task1/makeInitials. Кнопка «Сохранить статус проекта» вызывает /api/lab8/task1/makeProjectStatus. Обе кнопки сохраняют запись в backend/data/task1.txt.</p></div><div class="grid" style="margin-top:18px"><div class="panel"><form id="task1Form"><div class="row"><div><label for="lastname">Фамилия</label><input type="text" id="lastname" name="lastname" required></div><div><label for="firstname">Имя</label><input type="text" id="firstname" name="firstname" required></div><div><label for="surname">Отчество</label><input type="text" id="surname" name="surname" required></div></div><div style="margin-top:14px"><label>Пол</label><label><input type="radio" name="gender" value="male" checked> Мужской</label><label><input type="radio" name="gender" value="female"> Женский</label></div><div style="margin-top:14px"><label for="faculty">Факультет</label><select id="faculty" name="faculty"><option value="ПИ">ПИ</option><option value="ИТ">ИТ</option><option value="ЭФ">ЭФ</option><option value="Агрономия">Агрономия</option></select></div><div style="margin-top:14px"><label><input type="checkbox" id="project" name="project"> Участие в проекте</label></div><div id="projectNameWrap" class="hidden" style="margin-top:14px"><label for="projectName">Наименование проекта</label><input type="text" id="projectName" name="projectName"></div><div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap"><button type="button" id="btnInitials">Сохранить инициалы</button><button type="button" id="btnStatus" class="secondary">Сохранить статус проекта</button></div><div class="status" id="status"></div><div style="margin-top:14px"><strong>Ответ API:</strong><pre id="result" style="white-space:pre-wrap"></pre></div></form></div><div class="panel"><h2 style="margin-top:0">Сохранённые записи</h2><div id="records"></div></div></div><script>const project=document.getElementById('project');const projectNameWrap=document.getElementById('projectNameWrap');const statusEl=document.getElementById('status');const resultEl=document.getElementById('result');const recordsEl=document.getElementById('records');project.addEventListener('change',()=>projectNameWrap.classList.toggle('hidden',!project.checked));function buildParams(){const form=document.getElementById('task1Form');const params=new URLSearchParams();params.set('lastname',form.lastname.value.trim());params.set('firstname',form.firstname.value.trim());params.set('surname',form.surname.value.trim());params.set('gender',form.gender.value);params.set('faculty',form.faculty.value);params.set('project',form.project.checked?'true':'false');params.set('projectName',form.projectName.value.trim());return params}async function send(mode){const url='/api/lab8/task1/'+(mode==='initials'?'makeInitials':'makeProjectStatus')+'?'+buildParams().toString();statusEl.textContent='Загрузка...';try{const res=await fetch(url);const data=await res.json();resultEl.textContent=JSON.stringify(data,null,2);if(!res.ok)throw new Error(data.message||data.error||'Ошибка');statusEl.textContent='Готово.';loadRecords()}catch(e){statusEl.textContent='Ошибка: '+e.message}}async function loadRecords(){const res=await fetch('/api/lab8/task1/records');const data=await res.json();if(!Array.isArray(data)||data.length===0){recordsEl.innerHTML='<div class="muted">Записей пока нет.</div>';return}recordsEl.innerHTML='<table class="table"><thead><tr><th>ID</th><th>ФИО</th><th>Пол</th><th>Факультет</th><th>Проект</th></tr></thead><tbody>'+data.map(item=>`<tr><td>${item.id}</td><td>${item.lastname} ${item.firstname} ${item.surname}</td><td>${item.gender}</td><td>${item.faculty}</td><td>${item.project?('Да: '+(item.projectName||'без названия')):'Нет'}</td></tr>`).join('')+'</tbody></table>'}document.getElementById('btnInitials').addEventListener('click',()=>send('initials'));document.getElementById('btnStatus').addEventListener('click',()=>send('status'));loadRecords();</script></body></html>