Progress

<a href="/" class="btn nav-btn gray">🏠 Menu główne</a>


<h2>Postęp w kategoriach</h2>

<table border="1" cellpadding="5">
  <thead>
    <tr>
      <th>Kategoria</th>
      <th>Poziom</th>
      <th>Liczba zdań</th>
      <th>Próbowane</th>
      <th>Opanowane</th>
      <!-- <th>Wszystkie próby</th>
      <th>Poprawne próby</th> -->
      <th>Skuteczność tłumaczeń</th>
      <th>Do przećwiczenia</th>
      <th>Do opanowania</th>
      <th>Opanowanie kategorii</th>
    </tr>
  </thead>
  <tbody id="progressTable">
    <tr><td colspan="8">Ładowanie danych...</td></tr>
  </tbody>
</table>

<script>
  async function fetchProgress() {
    try {
      let response = await fetch("/api/learning/progress/", { method: "GET" });
      let data = await response.json();

      let tbody = document.getElementById("progressTable");
      tbody.innerHTML = "";  // wyczyść placeholder

      if (data.progress && data.progress.length > 0) {
        data.progress.forEach(p => {
          let row = `
            <tr>
              <td>${p.category}</td>
              <td>${p.level}</td>
              <td>${p.total_sentences}</td>
              <td>${p.attempted}</td>
              <td>${p.mastered}</td>
              <td>${p.accuracy}%</td>
              <td>${p.sentences_to_practise}</td>
              <td>${p.sentences_to_master}</td>
              <td>${p.category_lvl_percentage}%</td>
            </tr>
          `;
          tbody.innerHTML += row;
        });
      } else {
        tbody.innerHTML = "<tr><td colspan='8'>Brak danych</td></tr>";
      }
    } catch (error) {
      console.error("Błąd podczas pobierania postępu:", error);
    }
  }

  fetchProgress();
</script>

<!-- 
<td>${p.total_attempts}</td>
<td>${p.correct_attempts}</td>
-->