https://ta-tum.com/js/modules/student/pdi/StudentPdiRanking.js

1/**
2 * Module Student Pdi Ranking
3 * @description Módulo para mostrar los resultados de la última actividad real time
4 * @author Alejandro Micheloud
5 */
6
7function StudentPdiRanking(_pdi) {
8    var callback = null;
9    var mModal = null;
10    var classroom = null;
11    var results = null;
12    var pdi = _pdi;
13
14    function init() {
15        $("#modal-container .d-modal-pdi-ranking").remove();
16        $("#modal-container").append(getHtmlModal());
17        mModal = new Modal(getModal());
18
19        getModal().find(".d-cromo-close").click(function () {
20            soundClick.play();
21            mModal.hide();
22        });
23    }
24
25    function render() {
26        var amount_r = results.length;
27        var students_with_result = [];
28        var hashStudentWithResult = {};
29        for (var i = 0; i < classroom.students.length; i++) {
30            classroom.students[i].result = {points: 0, elapsed: 0};
31            for (var j = 0; j < amount_r; j++) {
32                if (classroom.students[i].person_guid === results[j].person_guid) {
33                    classroom.students[i].result = results[j].data;
34                    students_with_result.push(classroom.students[i]);
35                    hashStudentWithResult[classroom.students[i].person_guid] = classroom.students[i].person_guid;
36                }
37            }
38        }
39        students_with_result.sort(
40                function (a, b) {
41                    if (a.result.points < b.result.points) {
42                        return 1;
43                    } else {
44                        if (a.result.points === b.result.points) {
45                            if (a.result.elapsed < b.result.elapsed) {
46                                return -1;
47                            } else {
48                                return 1;
49                            }
50                        } else {
51                            return -1;
52                        }
53                    }
54                }
55        );
56
57        var html = "";
58        for (var i = 0; i < students_with_result.length; i++) {
59            html += getHtmlStudent((i + 1), students_with_result[i]);
60        }
61
62        for (var i = 0; i < classroom.students.length; i++) {
63            var student = classroom.students[i];
64            if(!hashStudentWithResult.hasOwnProperty(student.person_guid))
65                html += getHtmlStudent(0, student);
66        }
67
68        getModal().find(".d-students").html(html);
69        getModal().find(".d-students .d-student .d-circle-bar").each(function (index) {
70            var percent = parseFloat($(this).attr("percent"));
71            var bar = new ProgressBar.Circle($(this).find(".bar")[0], {
72                strokeWidth: 15,
73                color: '#403e3e',
74                trailColor: '#000',
75                trailWidth: 19,
76                easing: 'easeInOut',
77                duration: 1400,
78                svgStyle: null,
79                text: {
80                    value: '',
81                    alignToBottom: true
82                },
83                from: {color: '#b33cf2'},
84                to: {color: '#b33cf2'},
85                // Set default step function for all animate calls
86                step: function (state, bar) {
87                    bar.path.setAttribute('stroke', state.color);
88                    var value = Math.round(bar.value() * 100);
89                    if (value === 0) {
90                        bar.setText('');
91                    } else {
92                        bar.setText(value + "%");
93                    }
94
95                    bar.text.style.color = state.color;
96                }
97            }
98            );
99            if (percent > 1)
100                percent = 1;
101            if (percent < 0)
102                percent = 0;
103            bar.animate(percent);  // Number from 0.0 to 1.0
104        });
105    }
106
107    // helpers
108    function getModal() {
109        return $("#modal-container .d-modal-pdi-ranking");
110    }
111    function getHtmlModal() {
112        return  '  <div class="modal d-modal-pdi-ranking">' +
113                '  <div class="modal-content wrap-dialog-popup">' +
114                '       <div class="d-header">' +
115                '           <div class="d-title standard-text-shadow-2">' + lang.pdi_rank_title + '</div>' +
116                '       </div>' +
117                '       <div class="modal-body">' +
118                '           <div class="d-students"></div>' +
119                '       </div>' +
120                '       <div class="modal-footer">' +
121                '       </div>' +
122                '  </div>' +
123                '  </div>';
124    }
125    function getHtmlStudent(position, student) {
126        var percent = 0;
127        try {
128            console.log("pdi total: " + pdi.getGame().totalPoints + " sTotal: " + student.result.points);
129            percent = student.result.points / pdi.getGame().totalPoints;
130        } catch (e) {
131            console.log(e);
132            percent = 0;
133        }
134        return '<div class="d-student">' +
135                '   <div class="d-position">' + ( position > 0 ? position : "-" )+ '</div>' +
136                '   <div class="d-avatar">' + getHtmlStudentAvatar(student, "x-small") + '</div>' +
137                '   <div class="d-name">' + getStudentName(student) + '</div>' +
138                '   <div class="d-time">' + ( position > 0 ? msToTime(student.result.elapsed) : lang.pdi_not_complete ) + ' </div>' +
139                (
140                position > 0 ?
141                    '   <div class="d-circle-bar" percent="' + percent + '"><div class="bar"></div></div>' 
142                    :
143                    ''
144                )
145                +
146                '</div>';
147    }
148
149    this.show = function (_classroom, _results, _callback) {
150        classroom = _classroom;

151        results = _results;
152        callback = _callback;
153        console.log("Results!");
154        console.log(results);
155        render();
156        mModal.show();
157    };
158    this.hide = function () {
159        mModal.hide();
160        if (isFunction(callback)) {
161            callback(null);
162        }
163    };
164
165    init();
166}