rankings.html 3.07 KB
{% autoescape %}

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Miguel Barão">
  <link rel="icon" href="/static/favicon.ico">

  {% include include-libs.html %}

  <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
  <script defer src="{{static_url('js/maintopics.js')}}"></script>

  <title>{{appname}}</title>
</head>
<!-- ===================================================================== -->
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-secondary fixed-top shadow">
  <div class="container-fluid">
    <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="/courses">Cursos</a></li>
        <li class="nav-item"><a class="nav-link" href="/course/{{course_id}}">Tópicos</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Classificação</a></li>
      </ul>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-person-circle"></i>&nbsp;
            <span id="name">{{ escape(name) }}</span>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="/logout">Sair</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- ===================================================================== -->
<div class="container">
  <h1 class="display-6">{{ course_title }}</h1>

<table class="table table-sm table-hover">
  <thead>
    <tr>
      <th scope="col" class="text-center">Posição</th>
      <th scope="col">Nome</th>
      <th scope="col">Progresso</th>
    </tr>
  </thead>
  <tbody>
    {% for i,r in enumerate(rankings) %}
    <tr class="{{ 'table-secondary' if r[0] == uid else '' }}">
      <td class="text-center"> <!-- rank -->
        <strong>
          {{ '<h3><i class="bi bi-trophy-fill text-warning"></i></h3>' if i==0 else i+1 }}
        </strong>
      </td>
      <td> <!-- first and last name -->
        {{ ' '.join(r[1].split()[n] for n in (0,-1)) }}
      </td>
      <td> <!-- progress -->
        <div class="progress" style="height: 24px;">
          <div class="progress-bar" role="progressbar" style="width: {{ 100*r[2] }}%;" aria-valuenow="{{round(100*r[2])}}%" aria-valuemin="0" aria-valuemax="100">{{round(100*r[2])}}%</div>
        </div>
      </td>
    </tr>
    {% end %}
  </tbody>
</table>
</body>
</html>