Download as
Browse Code »

Commit b88af97cb8e155c2212d86b77585721089d402e8

Authored by Gustavo
1 parent e358a771
Exists in master and in 2 other branches amadeus_univasf, refactoring

Reports template included

Showing 1 changed file with 436 additions and 0 deletions   Show diff stats
webconference/templates/webconference/relatorios.html 0 → 100644
  Diff comments   View file @b88af97
... ... @@ -0,0 +1,436 @@
  1 +{% extends "subjects/view.html" %}
  2 +
  3 +{% load static i18n pagination permissions_tags subject_counter %}
  4 +{% load django_bootstrap_breadcrumbs %}
  5 +
  6 +{% block javascript%}
  7 + {{ block.super }}
  8 + <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  9 + <script type="text/javascript">
  10 + var tabela_atual = true;
  11 +
  12 + var array_history = [];
  13 + {%for data_json in json_history.data %}
  14 + array_history.push(["{{data_json.0}}","{{data_json.1}}","{{view}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
  15 + {% endfor%}
  16 + var json_history = {"data":array_history};
  17 + var column_history = [{"string":'{% trans "User" %}'},{"string":'{% trans "Group" %}'},{"string":'{% trans "Action" %}'},{"date":'{% trans "Date of Action" %}'}];
  18 +
  19 + var search = [];
  20 + for (var i in json_history["data"]){
  21 + search.push([json_history["data"][i][0],json_history["data"][i][1],
  22 + json_history["data"][i][2],json_history["data"][i][3]]);
  23 + }
  24 +
  25 + var array_n_did = [];
  26 + var checkbox = {};
  27 + {%for data_json in json_n_did.data%}
  28 + var input = '<div class="checkbox">\
  29 + <label for="{{data_json.0}}_google_table">\
  30 + <input id="{{data_json.0}}_google_table" name="{{data_json.0}}_google_table" type="checkbox"><span class="checkbox-material"><span class="check"></span></span>\
  31 + </label>\
  32 + </div>'
  33 + checkbox["{{data_json.0}}_google_table"] = "{{data_json.4}}";
  34 + array_n_did.push([input,"{{data_json.1}}","{{data_json.2}}","{{data_json.3}}"]);
  35 + {% endfor%}
  36 + var json_n_did = {"data":array_n_did};
  37 + var column_n_did = [{"string":'<a href="javascript:void(0);" onclick="return openmodal();"> {% trans "Send message" %}</a>'},{"string":'{% trans "User" %}'},{"string":'{% trans "Group" %}'},{"string":"{% trans "Action don't realized" %}"}];
  38 + </script>
  39 +
  40 +
  41 + <script type="text/javascript">
  42 + google.charts.load('current', {'packages':['corechart',"table"]});
  43 + google.charts.setOnLoadCallback(drawChart);
  44 + google.charts.setOnLoadCallback(drawTable);
  45 +
  46 + function drawChart() {
  47 + var data = google.visualization.arrayToDataTable({{db_data|safe}});
  48 + var options = {
  49 + title: '{{title_chart}}',
  50 + // legend: {position: 'right', maxLines: 1},
  51 + bar: { groupWidth: '30%' },
  52 + chartArea:{width:"50%"},
  53 + titlePosition: 'out',
  54 + vAxis: {
  55 + title: '{{title_vAxis}}',
  56 + ticks: [0, .20, .40, .60, .80, 1],
  57 + viewWindow: {
  58 + min: 0,
  59 + max: 1
  60 + }
  61 + },
  62 + isStacked: "percent",
  63 + };
  64 +
  65 + function selectHandler() {
  66 + var selectedItem = chart.getSelection()[0];
  67 + if (selectedItem) {
  68 + var col = data.getColumnLabel(selectedItem.column);
  69 + if (col == "{{n_did_table}}"){
  70 + tabela_atual = false;
  71 + search = [];
  72 + for (var i in json_n_did["data"]){
  73 + search.push([json_n_did["data"][i][0],json_n_did["data"][i][1],
  74 + json_n_did["data"][i][2],json_n_did["data"][i][3]]);
  75 + }
  76 + searcher(col, tabela_atual,true);
  77 +
  78 + } else if (col == "{{did_table}}"){
  79 + tabela_atual = true;
  80 + search = [];
  81 + for (var i in json_history["data"]){
  82 + search.push([json_history["data"][i][0],json_history["data"][i][1],
  83 + json_history["data"][i][2],json_history["data"][i][3]]);
  84 + }
  85 + searcher(col, tabela_atual,true);
  86 + }
  87 + scroll("#title-table");
  88 + }
  89 + chart.setSelection([])
  90 + }
  91 +
  92 + var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  93 + google.visualization.events.addListener(chart, 'select', selectHandler);
  94 + chart.draw(data, options);
  95 +
  96 + }
  97 +
  98 + var sortAscending = {0:false,1:false,2:false,3:false};
  99 + function drawTable(columns = column_history,rows = pagination(json_history["data"],1),isdate = true,columndate = 3) {
  100 + var data_table = new google.visualization.DataTable();
  101 + for (var i in columns){
  102 + for (var item in columns[i]){
  103 + data_table.addColumn(item,columns[i][item]);
  104 + }
  105 + }
  106 +
  107 + data_table.addRows(rows);
  108 + var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
  109 + if (isdate) formate_date.format(data_table, columndate);
  110 +
  111 + // var methods = [];
  112 + // for (var m in data_table) {
  113 + // if (typeof data_table[m] == "function") {
  114 + // methods.push(m);
  115 + // }
  116 + // }
  117 + // console.log(methods.join(","));
  118 + var options = {
  119 + sort: "event",
  120 + allowHtml: true,
  121 + cssClassNames : {
  122 + tableRow: 'text-center',
  123 + tableCell: 'text-center',
  124 + headerCell: 'text-center'
  125 + },
  126 + showRowNumber: true,
  127 + width: '100%',
  128 + height: '100%',
  129 + }
  130 + function ordenar(properties){
  131 + var columnIndex = properties['column'];
  132 + if (columnIndex > 0) {
  133 + options["sortColumn"] = columnIndex;
  134 + options["sortAscending"] = sortAscending[columnIndex];
  135 + data_table.sort({column:columnIndex,desc:sortAscending[columnIndex]});
  136 + sortAscending = {0:false,1:false,2:false,3:false};
  137 + sortAscending[columnIndex] = !sortAscending[columnIndex];
  138 + // console.log(sortAscending);
  139 + table.draw(data_table, options);
  140 + }
  141 + }
  142 +
  143 + var table = new google.visualization.Table(document.getElementById('table_div'));
  144 + google.visualization.events.addListener(table, 'sort', function(e) {ordenar(e)});
  145 + table.draw(data_table, options);
  146 + }
  147 + </script>
  148 +{% endblock%}
  149 +
  150 +{% block breadcrumbs %}
  151 + {{ block.super }}
  152 + {% breadcrumb webconference.topic 'subjects:topic_view' webconference.topic.subject.slug webconference.topic.slug %}
  153 + {% trans 'Reports' as bread %}
  154 + {% breadcrumb bread webconference%}
  155 +{% endblock %}
  156 +
  157 +{% block content %}
  158 + <div id="message-top">
  159 + {% if messages %}
  160 + {% for message in messages %}
  161 + <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
  162 + <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  163 + <span aria-hidden="true">&times;</span>
  164 + </button>
  165 + <p>{{ message }}</p>
  166 + </div>
  167 + {% endfor %}
  168 + {% endif %}
  169 + </div>
  170 + <div class="panel panel-info topic-panel">
  171 + <div class="panel-heading">
  172 + <div class="row">
  173 + <div class="col-md-12 category-header">
  174 + <h4 class="panel-title" style="margin-top: 10px; margin-bottom: 8px">
  175 + <span>{{webconference}} / {% trans "Reports" %}</span>
  176 + </h4>
  177 + </div>
  178 + </div>
  179 + </div>
  180 + <div class="row">
  181 + <div class="col-md-12 text-center">
  182 + <h4 style="margin-top: 15px; margin-bottom: 10px" ><strong>{% trans "Report of the resource " %}{{webconference}}</strong></h4>
  183 + </div>
  184 + </div>
  185 + <div class="row">
  186 + <div class="col-md-12">
  187 +
  188 + <ul class="list-inline nav-justified">
  189 + <div id="general-parameters-div">
  190 + <div class="general-parameters-field">
  191 + <li class="text-right"><h4>{% trans "Select the period: " %}</h4></li>
  192 + </div>
  193 + <form id="period-form" action="" method="get">
  194 + <div class="general-parameters-field">
  195 + <li> <input class="form-control datetime-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y H:i'}} {% else %} {{init_date|date:'m/d/Y H:i P'}} {% endif %}"></li>
  196 + </div>
  197 + <div class="general-parameters-field">
  198 + <li><input id="inputdate" class="form-control datetime-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y H:i'}} {% else %} {{end_date|date:'m/d/Y H:i P'}} {% endif %}"></li>
  199 + </div>
  200 + <li><input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised"></li>
  201 + </form>
  202 + </div>
  203 + <ul>
  204 + </div>
  205 + </div>
  206 +
  207 + <div class="row">
  208 + <div class="col-md-10 col-md-offset-1">
  209 + <div id="chart_div" style="height: 500px; margin-top: -50px;"></div>
  210 + </div>
  211 + </div>
  212 +
  213 + <div class="row">
  214 + <div class="col-md-10 col-md-offset-1">
  215 + <div class="text-center">
  216 + <ul class="list-inline nav-justified">
  217 + <li>
  218 + <ul id="view-table" class="list-inline text-right">
  219 + <li><h3 id="title-table"></h3></li>
  220 + </ul>
  221 + </li>
  222 + <li>
  223 + <ul class="list-inline text-right">
  224 + <li><p>{% trans "Filter: " %}</p></li>
  225 + <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
  226 + </ul>
  227 + </li>
  228 + </ul>
  229 + </div>
  230 + <form id="google-chart-checkbox" action="" method="get">
  231 + <div id="table_div"></div>
  232 + </form>
  233 + <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
  234 + <ul class="pagination">
  235 +
  236 + </ul>
  237 + </div>
  238 + </div>
  239 + </div>
  240 + <div id="modal-message"></div>
  241 + <div class="row">
  242 + <br><br>
  243 + </div>
  244 + </div>
  245 +
  246 + <script type="text/javascript">
  247 +
  248 + $("#title-table").text(search.length + " {% trans 'record(s)' %}");
  249 + function putpagination(data = json_history["data"], load_histoty = true){
  250 + var len = Math.ceil(data.length / 20);
  251 + $(".pagination").empty();
  252 + $(".pagination").append('<li class="disabled"><span>«</span></li>');
  253 + $(".pagination").append('<li id="1" class="active">\
  254 + <a href="javascript:void(0);" onclick="return clickPagination(1, '+ load_histoty +');">1</a>\
  255 + </li>');
  256 + for (var i = 2; i <= len;i++){
  257 + $(".pagination").append('<li id="' + i + '">\
  258 + <a href="javascript:void(0);" onclick="return clickPagination(' + i +', ' + load_histoty + ');">' + i + '</a>\
  259 + </li>');
  260 + }
  261 + if (len > 1) $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(2, '+ load_histoty +');"><span>»</span></a></li>');
  262 + else $(".pagination").append('<li class="disabled"><span>»</span></li>');
  263 + };
  264 + putpagination();
  265 +
  266 + $('#period-form').submit(function(event) {
  267 + $('<input />').attr('type', 'hidden')
  268 + .attr('name', "language")
  269 + .attr('value', '{{ LANGUAGE_CODE }}')
  270 + .appendTo('#period-form');
  271 + });
  272 + function add(element,local, first = false){
  273 + if (first) $(local).prepend(element);
  274 + else $(local).append(element);
  275 + }
  276 + function text(element){
  277 + return $(element).text();
  278 + }
  279 + function length(element) {
  280 + return $(element).length;
  281 + }
  282 +
  283 + $("#search-input").on("keyup",function(){
  284 + search = [];
  285 + var text = $("#search-input").val();
  286 + searcher(text,tabela_atual);
  287 + });
  288 +
  289 + function searcher(text, load_histoty = false,apaga=false){
  290 + if(apaga){
  291 + $("#search-input").val("");
  292 + }
  293 + var data = [];
  294 + if (!load_histoty){
  295 + data = $.map(json_n_did["data"], function (obj) {
  296 + return $.extend(true, {}, obj);
  297 + });
  298 + } else {
  299 + data = $.map(json_history["data"], function (obj) {
  300 + return $.extend(true, {}, obj);
  301 + });
  302 + }
  303 + if (load_histoty){
  304 + for (var i in data){
  305 + data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
  306 + }
  307 + }
  308 + if (load_histoty){
  309 + for (var i in data){
  310 + if (data[i][0].toLowerCase().includes(text.toLowerCase())
  311 + || data[i][1].toLowerCase().includes(text.toLowerCase())
  312 + || data[i][2].toLowerCase().includes(text.toLowerCase())
  313 + || data[i][3].toLowerCase().includes(text.toLowerCase())){
  314 + search.push(json_history["data"][i]);
  315 + }
  316 + }
  317 + }
  318 + else {
  319 + for (var i in data){
  320 + if (data[i][1].toLowerCase().includes(text.toLowerCase())
  321 + || data[i][2].toLowerCase().includes(text.toLowerCase())
  322 + || data[i][3].toLowerCase().includes(text.toLowerCase())){
  323 + search.push(json_n_did["data"][i]);
  324 + }
  325 + }
  326 + }
  327 + console.log(search);
  328 + if (!load_histoty){
  329 + drawTable(column_n_did,pagination(search,1),false);
  330 + } else {
  331 + drawTable(column_history,pagination(search,1),true,3);
  332 + }
  333 + $("#title-table").text(search.length + " {% trans 'record(s)' %}");
  334 + putpagination(search,load_histoty);
  335 + }
  336 +
  337 + function pagination(data,pag){
  338 + var len = data.length;
  339 + var first = (pag * 20 - 20 < len) ? pag * 20 - 20:len;
  340 + var end = (pag * 20 < len) ? pag * 20:len;
  341 + var search = data.slice(first,end);
  342 + return search;
  343 + }
  344 +
  345 + function clickPagination(pag, load_histoty = false){
  346 + $(".pagination > li").last().remove();
  347 + $(".pagination > li").first().remove();
  348 +
  349 + if (!load_histoty){
  350 + drawTable(column_n_did,pagination(search,pag),false);
  351 + } else {
  352 + drawTable(column_history,pagination(search,pag),true,3);
  353 + }
  354 +
  355 + if (pag < Math.ceil(search.length / 20))
  356 + $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag + 1) + ', '+ load_histoty +');"><span>»</span></a></li>');
  357 + else $(".pagination").append('<li class="disabled"><span>»</span></li>');
  358 + if (pag > 1)
  359 + $(".pagination").prepend('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag - 1) + ', '+ load_histoty +');"><span>«</span></a></li>');
  360 + else $(".pagination").prepend('<li class="disabled"><span>«</span></li>');
  361 + $(".active").removeClass("active");
  362 + $("#" + pag).addClass("active");
  363 + }
  364 +
  365 + function openmodal(){
  366 + $( "#modal-message" ).empty();
  367 + $.get( "{% url 'webconferences:send_message' webconference.slug %}", function( data ) {
  368 + $( "#modal-message" ).append( data );
  369 + $("#send-message-modal").modal("show");
  370 + });
  371 + }
  372 +
  373 + function sendMessage(){
  374 + $("#send-message-modal").modal("hide");
  375 + var checked = $("#google-chart-checkbox").serializeArray();
  376 + var email = [];
  377 + for (var i in checked){
  378 + email.push(checkbox[checked[i]["name"]]);
  379 + }
  380 + $('<input />').attr('type', 'hidden')
  381 + .attr('name', "users[]")
  382 + .attr('value', email)
  383 + .appendTo('#text_chat_form');
  384 +
  385 + var formData = new FormData($('#text_chat_form').get(0));
  386 + $.ajax({
  387 + url: "{% url 'webconferences:send_message' webconference.slug %}",
  388 + type: "POST",
  389 + data: formData,
  390 + cache: false,
  391 + processData: false,
  392 + contentType: false,
  393 + success: function(data) {
  394 + if (data["message"]){
  395 + console.log("success");
  396 + $("body").removeClass("modal-open");
  397 + $( "#modal-message" ).empty();
  398 + $(".modal-backdrop.fade.in").remove();
  399 + $("#message-top").empty();
  400 + $("#message-top").append('\
  401 + <div class="alert alert-success alert-dismissible" role="alert">\
  402 + <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
  403 + <span aria-hidden="true">&times;</span>\
  404 + </button>\
  405 + <p>' + data["message"] + '</p>\
  406 + </div>\
  407 + ');
  408 + $("html, body").animate({ scrollTop: 0 }, "slow");
  409 + $('#google-chart-checkbox')[0].reset();
  410 + } else {
  411 + $( "#modal-message" ).empty();
  412 + $(".modal-backdrop.fade.in").remove();
  413 + $( "#modal-message" ).append( data );
  414 + $("#send-message-modal").modal("show");
  415 + $("html, body").animate({ scrollTop: 0 }, "slow");
  416 + }
  417 + },
  418 + error: function(data){
  419 + $("#message-top").empty();
  420 + $("#message-top").append('\
  421 + <div class="alert alert-danger alert-dismissible" role="alert">\
  422 + <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
  423 + <span aria-hidden="true">&times;</span>\
  424 + </button>\
  425 + <p>' + data.responseText + '</p>\
  426 + </div>\
  427 + ');
  428 + $("html, body").animate({ scrollTop: 0 }, "slow");
  429 + }
  430 + });
  431 + }
  432 + function scroll(to){
  433 + $("html, body").animate({ scrollTop: $(to).offset().top }, "slow");
  434 + }
  435 + </script>
  436 +{% endblock %}
... ...