{{extend 'admin/instructors.html'}}
{{ block tabcontent }}

{{import urllib.parse}}
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/svg.jquery.js"></script>
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/pygal-tooltips.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'dashboard.css')}}"/>
<script src="{{=URL('static', 'dashboard-charts.js')}}"></script>
<script src="../static/js/sorttable.js"></script>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{{=URL('static', 'js/jquery.tabletoCSV.js')}}"></script>


<div id="dashboard">
    <h1>{{=course.course_name}}</h1>
    <h2>Gradebook</h2>
    <div>
        <label for="studentsearch">Filter by Student</label>
        <input type="text" id="studentsearch" onkeyup="searchStudent()" placeholder="Name of student..">
        <label for="assignmentsearch">Filter by Assignment</label>
        <input type="text" id="assignmentsearch" onkeyup="searchAssignment()" placeholder="Name of assignment..">
    </div>
    <button id="export" data-export="export">Download Gradebook</button>
    <div id="grades" class="col-md-12" style="width:80em; overflow-x:auto; white-space:nowrap;">

        <table id="gradebook" class="sortable">
 

Jquery plugin uses the caption of a table to name the downloaded file

            <caption style="display:none;">{{=course.course_name}}_Gradebook</caption>

            <thead style="cursor: pointer;">
                <tr id = "head">
                    <td id="leaveAlone0" class="roguecol">FName</td>
                    <td id="leaveAlone1" class="roguecol">LName</td>
                    <td id="leaveAlone2" class="roguecol">UName</td>
                    <td id="leaveAlone3" class="roguecol">E-mail</td>
                    <td id="leaveAlone4" class="roguecol">Practice</td>
                    {{for assignment in assignments:}}
                        <td class="headrow">{{=assignment['name']}}</td>
                    {{pass}}
                </tr>
            </thead>

            <tbody>
                <tr style="background-color: lightgray" id="classaverage">
                    <td class="roguecol">Class Average</td>
                    <td class="roguecol"> </td>
                    <td class="roguecol"> </td>
                    <td class="roguecol"> </td>
                    <td class="roguecol">{{=practice_average}}</td>
                    {{for average in range(len(averagerow)):}}
 

This if statement is to determine if a percent sign is needed in the average row.

                        {{if averagerow[average] == 'n/a':}}
                            <td class="{{=assignments[average]['name']}}">{{=averagerow[average]}}</td>
                        {{else:}}
                            <td class="{{=assignments[average]['name']}}">{{=averagerow[average]}}%</td>
                        {{pass}}
                    {{pass}}
                </tr>

                {{for row in range(len(gradetable)):}}
                    <tr class="search">
                        {{for item in range(len(gradetable[row])):}}
                            {{if item > 4 and gradetable[row][item] != 'n/a':}}
                                <td class="{{=assignments[item-5]['name']}}"><a href="questiongrades?sid={{=gradetable[row][2]}}&assignment_id={{=assignments[item-5]['id']}}" style="color:blue;">{{=gradetable[row][item]}}%</a></td>
                            {{elif item <= 4:}}
                                <td class="roguecol">{{= urllib.parse.unquote(gradetable[row][item])}}</td>
                            {{else:}}
                                <td class="{{=assignments[item-5]['name']}}"></td>
                            {{pass}}
                        {{pass}}
                    </tr>
                {{pass}}
            </tbody>

        </table>
    </div>
</div>
<div class="row"></div>
<div>
    <h2>Timed Exam Analysis</h2>
    <p>Note: The following reports will ONLY work for competency based timed exams</p>
    <ul>
    {{for assign in assignments:}}
        {{if assign.is_timed:}}
            <li><a href="/runestone/exams/one_exam_competency?assignment={{=assign.name}}">{{=assign.name}}</a></li>
        {{ pass }}
    {{pass}}
    </ul>
</div>

<script>
    $(function(){
        $("#export").click(function(){
            $("#gradebook").tableToCSV();
        });
    });


    function searchStudent() {
        var input, filter, table, tr, firstName, lastName, i;
        input = document.getElementById("studentsearch");
        filter = input.value.toUpperCase();
        table = document.getElementById("gradebook");
        tr = table.querySelectorAll('.search');
        for (i = 0; i < tr.length; i++) {
            firstName = tr[i].getElementsByTagName("td")[0].innerHTML;
            lastName = tr[i].getElementsByTagName("td")[1].innerHTML;

            if ((firstName && firstName.toUpperCase().indexOf(filter) > -1)
                || (lastName && lastName.toUpperCase().indexOf(filter) > -1)) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }

    function searchAssignment() {
        var input, filter, tds, tablehead, i, j, rogue;
        input = document.getElementById("assignmentsearch");
        filter = input.value.toUpperCase();
        tablehead = document.getElementById("head");
        tablehead = tablehead.getElementsByTagName("td");

        $("td").hide()
        $(".roguecol").show()
        for (i = 0; i < tablehead.length; i++) {
            if (tablehead[i].id != "leaveAlone") {
                console.log(tablehead[i].innerHTML)

                // Because sorting adds a span to the innerHTML of the head td's
                rogue = tablehead[i].innerHTML.split('<span id="sorttable_sort');
                console.log(rogue[0])
                tds = document.getElementsByClassName(rogue[0]);
                if (tablehead[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tablehead[i].style.display = "";
                    for (j = 0; j < tds.length; j ++) {
                        tds[j].style.display = "";
                    }

                }
            }
        }
    }


</script>

{{end}}