{% extends "course/base.html" %} {% block two_col_media %} <style type="text/css"> table { font-size: 15px; } td { height: 2.5em; } .user-name { padding-left: 1em !important; } #search-input { float: right; margin-bottom: 1em; } </style> {% endblock %} {% block js_media %} <script> $(document).ready(function(){ var $searchInput = $("#search-input"); var $usersTable = $("#users-table"); var tableBorderColor = $('#users-table td').css('border-bottom-color'); $searchInput.on("keyup", function() { var value = $(this).val().toLowerCase(); $("#users-table tbody tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); if(value) { $('#users-table').css('border-bottom', '1px solid ' + tableBorderColor); } else { $('#users-table').css('border-bottom', ''); } }); $('#sortSelect').select2({ minimumResultsForSearch: -1, width: "10em", }); $('#sortSelect').on('change', function() { var rows = $('#users-table tbody tr').get(); var sortBy = $(this).val(); rows.sort(function(a, b) { var keyA = $(a).find(sortBy === 'username' ? '.user-name' : '.total-score').text().trim(); var keyB = $(b).find(sortBy === 'username' ? '.user-name' : '.total-score').text().trim(); if(sortBy === 'total') { // Convert percentage string to number for comparison keyA = -parseFloat(keyA.replace('%', '')); keyB = -parseFloat(keyB.replace('%', '')); } else { keyA = keyA.toLowerCase(); keyB = keyB.toLowerCase(); } if(keyA < keyB) return -1; if(keyA > keyB) return 1; return 0; }); $.each(rows, function(index, row) { $('#users-table tbody').append(row); }); }); }); </script> {% endblock %} {% block middle_content %} <center><h2>{{content_title}}</h2></center> <div style="margin-top: 0.5em;"> {{_("Sort by")}}: <div style="margin-top: 0.5em;"> <select id="sortSelect"> <option value="username">{{_("Username")}}</option> <option value="total">{{_("Score")}}</option> </select> <input type="text" id="search-input" placeholder="{{_('Search')}}" autofocus> </div> </div> <div style="overflow-x: auto; margin-top: 1em; clear: both;"> <table class="table striped" id="users-table"> <thead> <tr> <th>{{_('Student')}}</th> <th>{{_('Total')}}</th> {% for lesson in lessons %} <th class="points" title="{{lesson.title}}"> <a href="{{url('course_grades_lesson', course.slug, lesson.id)}}"> L{{ loop.index0 + 1 }} <div class="point-denominator">{{lesson.points}}</div> </a> </th> {% endfor %} {% for course_contest in course_contests %} <th class="points" title="{{course_contest.contest.name}}"> <a href="{{url('contest_ranking', course_contest.contest.key)}}"> C{{ loop.index0 + 1 }} <div class="point-denominator">{{course_contest.points}}</div> </a> </th> {% endfor %} </tr> </thead> <tbody> {% for student in grade_total.keys() %} {% set grade_lessons_student = grade_lessons.get(student) %} {% set grade_contests_student = grade_contests.get(student) %} {% set grade_total_student = grade_total.get(student) %} <tr> <td class="user-name"> <div> {{link_user(student)}} </div> <div> {{student.first_name}} </div> </td> <td class="total-score" style="font-weight: bold"> {% if grade_total_student %} {{ grade_total_student['percentage'] | floatformat(0) }}% {% else %} 0 {% endif %} </td> {% for lesson in lessons %} {% set val = grade_lessons_student.get(lesson.id) %} <td class="partial-score"> <a href="{{url('course_lesson_detail', course.slug, lesson.id)}}?user={{student.username}}"> {% if val and val['total_points'] %} {{ (val['achieved_points'] / val['total_points'] * lesson.points) | floatformat(0) }} {% else %} 0 {% endif %} </a> </td> {% endfor %} {% for course_contest in course_contests %} {% set val = grade_contests_student.get(course_contest.id) %} <td class="partial-score"> <a href="{{url('contest_ranking', course_contest.contest.key)}}#!{{student.username}}"> {% if val and val['total_points'] %} {{ (val['achieved_points'] / val['total_points'] * course_contest.points) | floatformat(0) }} {% else %} 0 {% endif %} </a> </td> {% endfor %} </tr> {% endfor %} </tbody> </table> </div> {% endblock %}