Reports template included

Gustavo
1 parent e358a771
Showing 1 changed file with 436 additions and 0 deletions Show diff stats
webconference/templates/webconference/relatorios.html
@@ -0,0 +1,436 @@
+{% extends "subjects/view.html" %}
+
+{% load static i18n pagination permissions_tags subject_counter %}
+{% load django_bootstrap_breadcrumbs %}
+
+{% block javascript%}
+    {{ block.super }}
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script type="text/javascript">
+    var tabela_atual = true;
+
+    var array_history = [];
+    {%for data_json in json_history.data %}
+        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 %}]);
+    {% endfor%}
+    var json_history = {"data":array_history};
+    var column_history = [{"string":'{% trans "User" %}'},{"string":'{% trans "Group" %}'},{"string":'{% trans "Action" %}'},{"date":'{% trans "Date of Action" %}'}];
+
+    var search = [];
+    for (var i in json_history["data"]){
+        search.push([json_history["data"][i][0],json_history["data"][i][1],
+                    json_history["data"][i][2],json_history["data"][i][3]]);
+    }
+
+    var array_n_did = [];
+    var checkbox = {};
+    {%for data_json in json_n_did.data%}
+        var input = '<div class="checkbox">\
+             <label for="{{data_json.0}}_google_table">\
+                <input id="{{data_json.0}}_google_table" name="{{data_json.0}}_google_table" type="checkbox"><span class="checkbox-material"><span class="check"></span></span>\
+            </label>\
+        </div>'
+        checkbox["{{data_json.0}}_google_table"] = "{{data_json.4}}";
+        array_n_did.push([input,"{{data_json.1}}","{{data_json.2}}","{{data_json.3}}"]);
+    {% endfor%}
+    var json_n_did = {"data":array_n_did};
+    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" %}"}];
+    </script>
+
+
+    <script type="text/javascript">
+      google.charts.load('current', {'packages':['corechart',"table"]});
+      google.charts.setOnLoadCallback(drawChart);
+      google.charts.setOnLoadCallback(drawTable);
+
+      function drawChart() {
+        var data = google.visualization.arrayToDataTable({{db_data|safe}});
+        var options = {
+          title: '{{title_chart}}',
+        //   legend: {position: 'right', maxLines: 1},
+          bar: { groupWidth: '30%' },
+          chartArea:{width:"50%"},
+          titlePosition: 'out',
+          vAxis: {
+              title: '{{title_vAxis}}',
+              ticks: [0, .20, .40, .60, .80, 1],
+              viewWindow: {
+                  min: 0,
+                  max: 1
+              }
+          },
+          isStacked: "percent",
+        };
+
+        function selectHandler() {
+           var selectedItem = chart.getSelection()[0];
+           if (selectedItem) {
+               var col = data.getColumnLabel(selectedItem.column);
+               if (col == "{{n_did_table}}"){
+                   tabela_atual = false;
+                   search = [];
+                   for (var i in json_n_did["data"]){
+                       search.push([json_n_did["data"][i][0],json_n_did["data"][i][1],
+                                    json_n_did["data"][i][2],json_n_did["data"][i][3]]);
+                   }
+                   searcher(col, tabela_atual,true);
+
+               } else if (col == "{{did_table}}"){
+                   tabela_atual = true;
+                   search = [];
+                   for (var i in json_history["data"]){
+                       search.push([json_history["data"][i][0],json_history["data"][i][1],
+                                   json_history["data"][i][2],json_history["data"][i][3]]);
+                   }
+                   searcher(col, tabela_atual,true);
+               }
+               scroll("#title-table");
+           }
+          chart.setSelection([])
+         }
+
+        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
+        google.visualization.events.addListener(chart, 'select', selectHandler);
+        chart.draw(data, options);
+
+      }
+
+      var sortAscending = {0:false,1:false,2:false,3:false};
+      function drawTable(columns = column_history,rows = pagination(json_history["data"],1),isdate = true,columndate = 3) {
+          var data_table = new google.visualization.DataTable();
+          for (var i in columns){
+              for (var item in columns[i]){
+                 data_table.addColumn(item,columns[i][item]);
+              }
+          }
+
+          data_table.addRows(rows);
+          var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
+          if (isdate) formate_date.format(data_table, columndate);
+
+        //   var methods = [];
+        //       for (var m in data_table) {
+        //           if (typeof data_table[m] == "function") {
+        //               methods.push(m);
+        //           }
+        //       }
+        //   console.log(methods.join(","));
+            var options = {
+                sort: "event",
+                allowHtml: true,
+                cssClassNames : {
+                    tableRow: 'text-center',
+                    tableCell: 'text-center',
+                    headerCell: 'text-center'
+                },
+                showRowNumber: true,
+                width: '100%',
+                height: '100%',
+            }
+            function ordenar(properties){
+                var columnIndex = properties['column'];
+                if (columnIndex > 0) {
+                    options["sortColumn"] = columnIndex;
+                    options["sortAscending"] = sortAscending[columnIndex];
+                    data_table.sort({column:columnIndex,desc:sortAscending[columnIndex]});
+                    sortAscending = {0:false,1:false,2:false,3:false};
+                    sortAscending[columnIndex] = !sortAscending[columnIndex];
+                    // console.log(sortAscending);
+                    table.draw(data_table, options);
+                }
+            }
+
+          var table = new google.visualization.Table(document.getElementById('table_div'));
+          google.visualization.events.addListener(table, 'sort', function(e) {ordenar(e)});
+          table.draw(data_table, options);
+      }
+    </script>
+{% endblock%}
+
+{% block breadcrumbs %}
+    {{ block.super }}
+    {% breadcrumb webconference.topic 'subjects:topic_view' webconference.topic.subject.slug webconference.topic.slug %}
+    {% trans 'Reports' as bread %}
+	{% breadcrumb bread webconference%}
+{% endblock %}
+
+{% block content %}
+    <div id="message-top">
+        {% if messages %}
+            {% for message in messages %}
+                <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <p>{{ message }}</p>
+                </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+    <div class="panel panel-info topic-panel">
+        <div class="panel-heading">
+            <div class="row">
+                <div class="col-md-12 category-header">
+                    <h4 class="panel-title" style="margin-top: 10px; margin-bottom: 8px">
+                        <span>{{webconference}} / {% trans "Reports" %}</span>
+                    </h4>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 text-center">
+                <h4 style="margin-top: 15px; margin-bottom: 10px" ><strong>{% trans "Report of the resource " %}{{webconference}}</strong></h4>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+
+            <ul class="list-inline nav-justified">
+                <div id="general-parameters-div">
+                    <div class="general-parameters-field">
+                        <li class="text-right"><h4>{% trans "Select the period: " %}</h4></li>
+                    </div>
+                    <form id="period-form" action="" method="get">
+                        <div class="general-parameters-field">
+                            <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>
+                        </div>
+                        <div class="general-parameters-field">
+                            <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>
+                        </div>
+                        <li><input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised"></li>
+                    </form>
+                </div>
+            <ul>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-10 col-md-offset-1">
+                <div id="chart_div" style="height: 500px; margin-top: -50px;"></div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-10 col-md-offset-1">
+                <div class="text-center">
+                    <ul class="list-inline nav-justified">
+                        <li>
+                            <ul id="view-table" class="list-inline text-right">
+                                <li><h3 id="title-table"></h3></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <ul class="list-inline text-right">
+                                <li><p>{% trans "Filter: " %}</p></li>
+                                <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+                <form id="google-chart-checkbox" action="" method="get">
+                    <div id="table_div"></div>
+                </form>
+                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
+        		  	<ul class="pagination">
+
+        		  	</ul>
+        		</div>
+            </div>
+        </div>
+        <div id="modal-message"></div>
+        <div class="row">
+            <br><br>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+
+        $("#title-table").text(search.length + " {% trans 'record(s)' %}");
+        function putpagination(data = json_history["data"], load_histoty = true){
+            var len = Math.ceil(data.length / 20);
+            $(".pagination").empty();
+            $(".pagination").append('<li class="disabled"><span>«</span></li>');
+            $(".pagination").append('<li id="1" class="active">\
+                                        <a href="javascript:void(0);" onclick="return clickPagination(1, '+ load_histoty +');">1</a>\
+                                    </li>');
+            for (var i = 2; i <= len;i++){
+                $(".pagination").append('<li id="' + i + '">\
+                                            <a href="javascript:void(0);" onclick="return clickPagination(' + i +', ' + load_histoty + ');">' + i + '</a>\
+                                        </li>');
+            }
+            if (len > 1) $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(2, '+ load_histoty +');"><span>»</span></a></li>');
+            else $(".pagination").append('<li class="disabled"><span>»</span></li>');
+        };
+        putpagination();
+
+        $('#period-form').submit(function(event) {
+            $('<input />').attr('type', 'hidden')
+              .attr('name', "language")
+              .attr('value', '{{ LANGUAGE_CODE }}')
+              .appendTo('#period-form');
+        });
+        function add(element,local, first = false){
+            if (first) $(local).prepend(element);
+            else $(local).append(element);
+        }
+        function text(element){
+            return $(element).text();
+        }
+        function length(element) {
+            return $(element).length;
+        }
+
+        $("#search-input").on("keyup",function(){
+            search = [];
+            var text = $("#search-input").val();
+            searcher(text,tabela_atual);
+        });
+
+        function searcher(text, load_histoty = false,apaga=false){
+            if(apaga){
+                $("#search-input").val("");
+            }
+            var data = [];
+            if (!load_histoty){
+                data = $.map(json_n_did["data"], function (obj) {
+                          return $.extend(true, {}, obj);
+                      });
+            } else {
+                data = $.map(json_history["data"], function (obj) {
+                      return $.extend(true, {}, obj);
+                  });
+            }
+            if (load_histoty){
+                for (var i in data){
+                    data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
+                }
+            }
+            if (load_histoty){
+                for (var i in data){
+                    if (data[i][0].toLowerCase().includes(text.toLowerCase())
+                        || data[i][1].toLowerCase().includes(text.toLowerCase())
+                        || data[i][2].toLowerCase().includes(text.toLowerCase())
+                        || data[i][3].toLowerCase().includes(text.toLowerCase())){
+                            search.push(json_history["data"][i]);
+                        }
+                }
+            }
+            else {
+                for (var i in data){
+                    if (data[i][1].toLowerCase().includes(text.toLowerCase())
+                        || data[i][2].toLowerCase().includes(text.toLowerCase())
+                        || data[i][3].toLowerCase().includes(text.toLowerCase())){
+                                search.push(json_n_did["data"][i]);
+                        }
+                }
+            }
+            console.log(search);
+            if (!load_histoty){
+                drawTable(column_n_did,pagination(search,1),false);
+            } else {
+                drawTable(column_history,pagination(search,1),true,3);
+            }
+            $("#title-table").text(search.length + " {% trans 'record(s)' %}");
+            putpagination(search,load_histoty);
+        }
+
+        function pagination(data,pag){
+            var len = data.length;
+            var first = (pag * 20 - 20 < len) ? pag * 20 - 20:len;
+            var end = (pag * 20 < len) ? pag * 20:len;
+            var search = data.slice(first,end);
+            return search;
+        }
+
+        function clickPagination(pag, load_histoty = false){
+            $(".pagination > li").last().remove();
+            $(".pagination > li").first().remove();
+
+            if (!load_histoty){
+                drawTable(column_n_did,pagination(search,pag),false);
+            } else {
+                drawTable(column_history,pagination(search,pag),true,3);
+            }
+
+            if (pag < Math.ceil(search.length / 20))
+                $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag + 1) + ', '+ load_histoty +');"><span>»</span></a></li>');
+            else $(".pagination").append('<li class="disabled"><span>»</span></li>');
+            if (pag > 1)
+                $(".pagination").prepend('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag - 1) + ', '+ load_histoty +');"><span>«</span></a></li>');
+            else $(".pagination").prepend('<li class="disabled"><span>«</span></li>');
+            $(".active").removeClass("active");
+            $("#" + pag).addClass("active");
+        }
+
+        function openmodal(){
+            $( "#modal-message" ).empty();
+           $.get( "{% url 'webconferences:send_message' webconference.slug %}", function( data ) {
+                $( "#modal-message" ).append( data );
+                $("#send-message-modal").modal("show");
+            });
+        }
+
+        function sendMessage(){
+            $("#send-message-modal").modal("hide");
+            var checked = $("#google-chart-checkbox").serializeArray();
+            var email = [];
+            for (var i in checked){
+                email.push(checkbox[checked[i]["name"]]);
+            }
+            $('<input />').attr('type', 'hidden')
+            .attr('name', "users[]")
+            .attr('value', email)
+            .appendTo('#text_chat_form');
+
+            var formData = new FormData($('#text_chat_form').get(0));
+            $.ajax({
+                url: "{% url 'webconferences:send_message' webconference.slug %}",
+                type: "POST",
+                data: formData,
+                cache: false,
+                processData: false,
+                contentType: false,
+                success: function(data) {
+                    if (data["message"]){
+                        console.log("success");
+                        $("body").removeClass("modal-open");
+                        $( "#modal-message" ).empty();
+                        $(".modal-backdrop.fade.in").remove();
+                        $("#message-top").empty();
+                        $("#message-top").append('\
+                            <div class="alert alert-success alert-dismissible" role="alert">\
+                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
+                                    <span aria-hidden="true">&times;</span>\
+                                </button>\
+                                <p>' + data["message"] + '</p>\
+                            </div>\
+                        ');
+                         $("html, body").animate({ scrollTop: 0 }, "slow");
+                         $('#google-chart-checkbox')[0].reset();
+                    } else {
+                        $( "#modal-message" ).empty();
+                        $(".modal-backdrop.fade.in").remove();
+                        $( "#modal-message" ).append( data );
+                        $("#send-message-modal").modal("show");
+                        $("html, body").animate({ scrollTop: 0 }, "slow");
+                    }
+                },
+                error: function(data){
+                    $("#message-top").empty();
+                    $("#message-top").append('\
+                        <div class="alert alert-danger alert-dismissible" role="alert">\
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
+                                <span aria-hidden="true">&times;</span>\
+                            </button>\
+                            <p>' + data.responseText + '</p>\
+                        </div>\
+                    ');
+                    $("html, body").animate({ scrollTop: 0 }, "slow");
+                }
+            });
+        }
+        function scroll(to){
+            $("html, body").animate({ scrollTop: $(to).offset().top }, "slow");
+        }
+    </script>
+{% endblock %}
@@ -0,0 +1,436 @@		@@ -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">×</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">×</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">×</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 %}