display_uv.html 11.4 KB
Newer Older
Florent Chehab's avatar
Florent Chehab committed
1 2 3 4 5
<style type="text/css">
    .tg {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
Florent Chehab's avatar
Florent Chehab committed
6
        text-align: left !important;
Florent Chehab's avatar
Florent Chehab committed
7 8
    }

Florent Chehab's avatar
Florent Chehab committed
9 10 11 12 13 14
    .rendered_html tr,
    .rendered_html th,
    .rendered_html td {
        text-align: left !important;
    }

Florent Chehab's avatar
Florent Chehab committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
    .tg td {
        font-size: 14px;
        padding: 10px 5px;
        border-style: solid;
        border-width: 1px;
        overflow: hidden;
        word-break: normal;
        border-color: black;
    }

    .tg th {
        font-size: 14px;
        font-weight: normal;
        padding: 10px 5px;
        border-style: solid;
        border-width: 1px;
        overflow: hidden;
        word-break: normal;
        border-color: black;
    }

    .tg .tg-gcw3 {
        border-color: #000000
    }

    .styled-select select {
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 1px;
        border-radius: 0;
        height: 34px;
    }
Florent Chehab's avatar
Florent Chehab committed
48 49 50 51

    .background-white {
        background-color: white;
    }
Florent Chehab's avatar
Florent Chehab committed
52
</style>
Florent Chehab's avatar
Florent Chehab committed
53

Florent Chehab's avatar
Florent Chehab committed
54 55 56
<script>
    var table_header = function (content) {
        return `
Florent Chehab's avatar
Florent Chehab committed
57
            <table id="table-details-uv" class="tg">
Florent Chehab's avatar
Florent Chehab committed
58
                <tr>
Florent Chehab's avatar
Florent Chehab committed
59 60 61
                    <th class="tg-gcw3" style="width:10%;"><strong>Semestre</strong></th>
                    <th class="tg-gcw3" style="width:50%;"><strong>Données</strong></th>
                    <th class="tg-gcw3"><strong>Commentaires</strong></th>
Florent Chehab's avatar
Florent Chehab committed
62 63 64 65 66 67 68 69 70
                </tr>
                ${content}
            </table>
                `;
    }

    var table_row = function (semester, resp) {
        return `    
            <tr>
Florent Chehab's avatar
Florent Chehab committed
71
                <td class="tg-gcw3" rowspan="2"><strong>${semester}</strong>${resp}</td>
Florent Chehab's avatar
Florent Chehab committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
                <td class="tg-gcw3" rowspan="2"><div id="details-${semester}"></div><div id="graph-${semester}"></div></td>
                <td class="tg-gcw3"><div id="com-resp-${semester}"></div></td>
            </tr>
            <tr>
                <td class="tg-gcw3"><div id="com-conseil-${semester}"></div></td>
            </tr>
            `;
    }

    var uv_intro = function (uv, name) {
        return `    
        <center>
            <h2> ${uv} : ${name} </h2>
        </center>
        `;
    }

    var uv_details = function (uv) {
        var ratio = function (what) {
            return (100 * what / (uv.nb_etu_registered - uv.nb_etu_abs)).toFixed(2);
        }
Florent Chehab's avatar
Florent Chehab committed
93
        return `<div class="alert alert-info background-white" ><center><i>
Florent Chehab's avatar
Florent Chehab committed
94
        ${uv.nb_etu_registered} inscrits, ${uv.nb_etu_abs} absent(s), ${uv.nb_etu_passed} étudiants reçus à l'uv (Réussite : ${ratio(uv.nb_etu_passed)}%) - ${uv.nb_evals} évaluations (${ratio(uv.nb_evals)}%) 
Florent Chehab's avatar
Florent Chehab committed
95
        </i></center></div>
Florent Chehab's avatar
Florent Chehab committed
96 97 98
        `;
    }

Florent Chehab's avatar
Florent Chehab committed
99
    var comment_html = function (date, comment, alert_type) {
Florent Chehab's avatar
Florent Chehab committed
100
        return `
Florent Chehab's avatar
Florent Chehab committed
101
            <div class="alert alert-${alert_type}">${date}</div>
Florent Chehab's avatar
Florent Chehab committed
102
            <div class="alert alert-info background-white">${comment}</div>
Florent Chehab's avatar
Florent Chehab committed
103 104 105 106 107 108
        `
    }
</script>


<div class="styled-select">
109 110 111 112 113
    Choix de l'UV :
    <select id='UV-select' onchange="update_display(this.value);">
    </select>
    <input id="UV-input-text" type="text">
    <input id="UV-input-btn" type="button" class="btn" disabled value="Visualiser" onclick="update_select($('#UV-input-text').val())">
Florent Chehab's avatar
Florent Chehab committed
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
</div>

<br>

<div id="UV-intro">
</div>

<div id="evol">
    <h3>
        Évolutions temporelles des évaluations d'UVs
    </h3>
    <div id='evol-graph'>

    </div>

    <h3>
        Et en détails
    </h3>
    <div id="data">

    </div>
</div>


<script> 
    var questions = [];
    for (var i = 1; i <= 10; i++) {
        questions.push("Q. " + i);
    }

    var update_display = function (uv) {
        // first update main graph
        var traces_summary = [];
        var questions_data = Array.from(Array(10), () => new Array(0));
        var x = [];
        for (semester in evals_data) {
            x.push(semester);
            if (uv in evals_data[semester]) {
                var stats = evals_data[semester][uv]["stats"];
                for (q in questions) {
                    var nb_evals = 0;
                    var val = 0;
                    for (ans in POSSIBLE_ANSWERS) {
                        nb_evals += stats[q][ans];
                        val += stats[q][ans] * POSSIBLE_ANSWERS_COEFFS[ans];
                    }
                    questions_data[q].push((val / nb_evals).toFixed(2));
                }
            } else {
                for (q in questions) {
                    questions_data[q].push(null);
                }
            }
        }
        for (q in questions) {
            traces_summary.push({
                x: x,
                y: questions_data[q],
                name: questions[q],
                type: 'scatter',
            })
        }
        var layout = {
            title: 'Évolutions temporelles des évaluations',
            yaxis: { range: SCALE_MARK, title: "Note obtenue pour chaque questions" }
        };
        Plotly.newPlot('evol-graph', traces_summary, layout);

        // Then generate table
        var all_semester = []
        for (semester in evals_data) {
            all_semester.push(semester);
        }
        all_semester.reverse();

        var html = '';
        var tmp = '';
        for (sem in all_semester) {
            var semester = all_semester[sem];
            var resp = '';
            if (uv in evals_data[semester]) {
                document.getElementById('UV-intro').innerHTML = uv_intro(uv, evals_data[semester][uv].name)
                resp = '<br><br>' + evals_data[semester][uv].teacher_name;
            }
            tmp += table_row(semester, resp);
        }
        html = table_header(tmp);
        document.getElementById('data').innerHTML = html;

        // Finally : fill table
        for (semester in evals_data) {
            if (uv in evals_data[semester]) {
                // details
                document.getElementById('details-' + semester).innerHTML = uv_details(evals_data[semester][uv]);

                // graph
                var traces_table = [];
                var stats = evals_data[semester][uv]["stats"];

                for (ans in POSSIBLE_ANSWERS) {
                    var responses = [];
                    for (q in questions) {
                        responses.push(stats[q][ans]);
                    }

                    traces_table.push({
                        x: questions,
                        y: responses,
                        name: POSSIBLE_ANSWERS[ans],
                        type: 'bar',
                        marker: {
                            color: POSSIBLE_ANSWERS_COL[ans]
                        }
                    })
                }

                var layout_table = {
                    title: "Évaluations de l'UV " + uv + " en " + semester,
                    barmode: 'stack', showlegend: false, yaxis: {
                        title: "Nombre d'évaluations"
                    }
                };

                Plotly.newPlot('graph-' + semester, traces_table, layout_table);

                if (uv in evals_data[semester]) {
                    var teacher_date = evals_data[semester][uv]['date_review_teacher'];
                    var conseil_date = evals_data[semester][uv]['date_review_conseil'];
                    var teacher_comment = evals_data[semester][uv]['teacher_comment'];
                    var conseil_comment = evals_data[semester][uv]['conseil_comment'];

Florent Chehab's avatar
Florent Chehab committed
245
                    var conseil_alert = 'warning', teacher_alert = 'warning';
Florent Chehab's avatar
Florent Chehab committed
246
                    if (teacher_date === null) {
Florent Chehab's avatar
Florent Chehab committed
247
                        teacher_alert = 'danger';
Florent Chehab's avatar
Florent Chehab committed
248
                        teacher_date = "<i>Les évaluations ne semblent par avoir été vues par le ou la responsable de l'UV ce semestre.</i>";
Florent Chehab's avatar
Florent Chehab committed
249 250
                        teacher_comment = '';
                    } else {
Florent Chehab's avatar
Florent Chehab committed
251
                        teacher_date = "Évaluations prises en compte par le ou la responsable de l'UV le " + teacher_date + '.';
Florent Chehab's avatar
Florent Chehab committed
252 253 254
                    }

                    if (conseil_date === null) {
Florent Chehab's avatar
Florent Chehab committed
255
                        conseil_alert = 'danger';
Florent Chehab's avatar
Florent Chehab committed
256 257 258
                        conseil_date = "<i>Les évaluations ne semblent par avoir été vues par le conseil de perfectionnement ce semestre.</i>";
                        conseil_comment = '';
                    } else {
Florent Chehab's avatar
Florent Chehab committed
259
                        conseil_date = "Évaluations prises en compte par le conseil de perfectionnement le " + teacher_date + '.';
Florent Chehab's avatar
Florent Chehab committed
260 261 262
                    }

                    if (teacher_comment > '') {
Florent Chehab's avatar
Florent Chehab committed
263
                        teacher_alert = 'success';
Florent Chehab's avatar
Florent Chehab committed
264 265
                    }
                    if (conseil_comment > '') {
Florent Chehab's avatar
Florent Chehab committed
266
                        conseil_alert = 'success';
Florent Chehab's avatar
Florent Chehab committed
267 268 269 270 271 272 273 274 275 276 277 278
                    }

                    if (teacher_comment === '' || teacher_comment === null) {
                        teacher_comment = "<i>Aucun rapport saisi par le ou la responsable de l'enseignement ce semestre.</i>";
                    }
                    if (conseil_comment === '' || conseil_comment === null) {
                        conseil_comment = "<i>Aucun rapport des conseils de perfectionnement enregistré.</i>";
                    }

                    teacher_comment = teacher_comment.replace(/¿/g, "'");
                    conseil_comment = conseil_comment.replace(/¿/g, "'");

Florent Chehab's avatar
Florent Chehab committed
279 280
                    document.getElementById('com-resp-' + semester).innerHTML = comment_html(teacher_date, teacher_comment, teacher_alert);
                    document.getElementById('com-conseil-' + semester).innerHTML = comment_html(conseil_date, conseil_comment, conseil_alert);
Florent Chehab's avatar
Florent Chehab committed
281 282 283 284
                }

            }
        }
Florent Chehab's avatar
Florent Chehab committed
285 286 287

        // update link
        document.getElementById('uv-details-name').innerHTML = uv;
Florent Chehab's avatar
Florent Chehab committed
288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306
    }

    var all_uvs = new Set();
    for (semester in evals_data) {
        for (uv in evals_data[semester]) {
            all_uvs.add(uv);
        }
    }
    all_uvs = Array.from(all_uvs).sort();
    var select_uv = document.getElementById('UV-select')

    for (ind in all_uvs) {
        var uv = all_uvs[ind];
        var opt = document.createElement('option');
        opt.value = uv;
        opt.innerHTML = uv;
        select_uv.appendChild(opt);
    }

Florent Chehab's avatar
Florent Chehab committed
307 308 309
    var interval = setInterval(function () {
        if (typeof Plotly == 'undefined') return;
        clearInterval(interval);
Florent Chehab's avatar
Florent Chehab committed
310

Florent Chehab's avatar
Florent Chehab committed
311 312 313
        document.getElementById('UV-select').value = all_uvs[0];
        update_display(all_uvs[0]);
    }, 200);
Florent Chehab's avatar
Florent Chehab committed
314

Florent Chehab's avatar
Florent Chehab committed
315
    // js for handling input uv name
316 317 318 319 320 321 322 323 324 325 326 327 328
    var is_uv = function(uv){
        for (ind in all_uvs) {
            if (all_uvs[ind] == uv) {
                return true;
            }
        }
        return false;
    } 
    
    var update_select = function (uv) {
        if (is_uv(uv)){
            $("#UV-select").val(uv).change();
        }
Florent Chehab's avatar
Florent Chehab committed
329 330
    }

Florent Chehab's avatar
Florent Chehab committed
331 332 333 334
    $('#UV-input-text').keyup(function (event) {
        var val = $('#UV-input-text').val().toUpperCase();
        if (event.keyCode === 13) {
            event.preventDefault();
Florent Chehab's avatar
Florent Chehab committed
335
            update_select(val);
Florent Chehab's avatar
Florent Chehab committed
336
        } else {
337
            var check_input = function (value) {
Florent Chehab's avatar
Florent Chehab committed
338 339 340 341 342 343 344
                var valid = false;
                for (ind in all_uvs) {
                    var uv = all_uvs[ind];
                    var re = new RegExp('^' + value);
                    if (uv.match(re)) {
                        return true;
                    }
Florent Chehab's avatar
Florent Chehab committed
345
                }
Florent Chehab's avatar
Florent Chehab committed
346
                return false;
Florent Chehab's avatar
Florent Chehab committed
347
            }
348
            while (!check_input(val)) {
Florent Chehab's avatar
Florent Chehab committed
349 350
                val = val.substring(0, val.length - 1);
            }
351
            $('#UV-input-btn').prop('disabled', !is_uv(val));
Florent Chehab's avatar
Florent Chehab committed
352 353 354 355
        }
        $('#UV-input-text').val(val);
    });

Florent Chehab's avatar
Florent Chehab committed
356
</script>