fers web

2026-03-01 21:40:09 +05:00
parent d37c255994
commit a1dd1a3279
10 changed files with 186 additions and 119 deletions
--- a/web/app.js
+++ b/web/app.js
@@ -0,0 +1,80 @@
+const API_BASE = `${location.protocol}//${location.hostname}:8000`;
+
+const app = document.getElementById('app');
+
+function render(html){ app.innerHTML = html }
+
+function showAgreement(){
+  render(`<h2>Соглашение</h2><p>Нажмите продолжить, чтобы зарегистрироваться и пройти тест.</p><button id=agree>Продолжить</button>`);
+  document.getElementById('agree').onclick = ()=> showRegister();
+}
+
+function showRegister(){
+  render(`<h2>Регистрация</h2>
+    <form id=reg>
+      <label>Имя: <input name=firstname required></label><br>
+      <label>Фамилия: <input name=lastname required></label><br>
+      <button type=submit>Создать пользователя</button>
+    </form>
+    <div id=result></div>`);
+  document.getElementById('reg').onsubmit = async (e)=>{
+    e.preventDefault();
+    const fd = new FormData(e.target);
+    const first = (fd.get('firstname') || '').trim();
+    const last = (fd.get('lastname') || '').trim();
+    const data = {first_name: first, last_name: last};
+    const res = await fetch(`${API_BASE}/users/`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
+    if(!res.ok){ document.getElementById('result').innerText = 'Ошибка создания'; return }
+    const user = await res.json();
+    localStorage.setItem('user_id', user.id);
+    showPollList();
+  }
+}
+
+async function showPollList(){
+  const res = await fetch(`${API_BASE}/polls`);
+  const polls = res.ok ? await res.json() : [];
+  render(`<h2>Доступные тесты</h2><ul id=polls>${polls.map(p=>`<li><a href=#poll-${p.id}>${p.title||p.name||p.id}</a></li>`).join('')}</ul><div id=actions><button id=refresh>Обновить</button></div>`);
+  document.getElementById('refresh').onclick = showPollList;
+  document.querySelectorAll('#polls a').forEach(a=>a.onclick = (ev)=>{ ev.preventDefault(); const id = a.getAttribute('href').slice(6); showPoll(id); });
+}
+
+async function showPoll(id){
+  const res = await fetch(`${API_BASE}/polls/${id}`);
+  if(!res.ok){ render('<p>Не удалось загрузить тест</p>'); return }
+  const poll = await res.json();
+  // simple rendering: list questions and choices (if present)
+  const html = [`<h2>${poll.title||poll.name||'Тест'}</h2>`];
+  poll.questions = poll.questions || [];
+  html.push(`<form id=resp>`);
+  poll.questions.forEach(q=>{
+    html.push(`<div><strong>${q.text||q.prompt||q.id}</strong>`);
+    const choices = q.choices || [];
+    if(choices.length){
+      choices.forEach(c=> html.push(`<div><label><input type=radio name="q_${q.id}" value="${c.id}" required> ${c.text||c.label||c.id}</label></div>`));
+    } else {
+      html.push(`<div><input name="q_${q.id}" placeholder="Ваш ответ"></div>`);
+    }
+    html.push('</div>');
+  });
+  html.push('<button type=submit>Отправить ответы</button></form>');
+  html.push('<div id=msg></div>');
+  render(html.join(''));
+  document.getElementById('resp').onsubmit = async (e)=>{
+    e.preventDefault();
+    const form = new FormData(e.target);
+    const answers = [];
+    for(const [k,v] of form.entries()){
+      if(!k.startsWith('q_')) continue;
+      const qid = k.slice(2);
+      answers.push({question_id: qid, choice_id: v});
+    }
+    const payload = {user_id: localStorage.getItem('user_id'), answers};
+    const r = await fetch(`${API_BASE}/polls/${id}/responses`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
+    if(!r.ok){ document.getElementById('msg').innerText = 'Ошибка отправки'; return }
+    document.getElementById('msg').innerText = 'Ответы отправлены';
+  }
+}
+
+// start
+showAgreement();
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>API-Client UI</title>
+  <style>body{font-family:Arial,Helvetica,sans-serif;max-width:720px;margin:24px auto;padding:0 12px}button{margin-top:8px}</style>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="app.js"></script>
+</body>
+</html>