Colocando campo de pesquisa e definir periodo para gerar o relatório e realizar …

…os filtros sem acessar o banco de dados

Colocando campo de pesquisa e definir periodo para gerar o relatório e realizar …
…os filtros sem acessar o banco de dados
Jailson Dias
1 parent 35a9a0b8
Showing 2 changed files with 234 additions and 101 deletions Show diff stats
webpage/templates/webpages/relatorios.html
webpage/views.py
@@ -7,13 +7,41 @@
     {{ block.super }}
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
+    var array_history = [];
+    {%for data_json in json_history.data%}
+        array_history.push(["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
+        // var teste = ["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}];
+        // console.log(teste[3] instanceof Date);
+    {% endfor%}
+    var json_history = {"data":array_history};
+    var column_history = [{"string":"User"},{"string":"Group"},{"string":"Action"},{"date":"Date of Action"}];
+    // console.log(json_history);
+
+    var array_did = [];
+    {%for data_json in json_did.data%}
+        array_did.push(["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
+    {% endfor%}
+    var json_did = {"data":array_did};
+    var column_did = [{"string":"User"},{"string":"Group"},{"string":"Number of Views"},{"date":"Date of Last View"}];
+    // console.log(json_did);
+
+    var array_n_did = [];
+    {%for data_json in json_n_did.data%}
+        array_n_did.push(["{{data_json.0}}","{{data_json.1}}"]);
+    {% endfor%}
+    var json_n_did = {"data":array_n_did};
+    var column_n_did = [{"string":"User"},{"string":"Group"}];
+    // console.log(json_n_did);
+    </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}}',
           vAxis: {
@@ -31,43 +59,58 @@
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var col = data.getColumnLabel(selectedItem.column);
-               window.location.href = '{% url "webpages:get_chart" webpage.slug %}?col='+col + ''
+               var element = '<li id="link-history">\
+                                    <a id="call-history" href="javascript:void(0)" onclick="return backhistory();"> <i class="fa fa-arrow-left ta-fw">  </i> {{history_table}}</a>\
+                               </li>';
+               if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
+                   if (length("#link-history") <= 0){
+                       add(element,"#view-table",true);
+                   }
+                   altertitle("{{n_did_table}}");
+                   drawTable(column_n_did,json_n_did["data"],false);
+                //    console.log("n_did_table");
+
+               } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
+                   if (length("#link-history") <= 0){
+                       add(element,"#view-table",true);
+                   }
+                   altertitle("{{did_table}}");
+                   drawTable(column_did,json_did["data"],true,3);
+                //    console.log("did_table");
+               }
            }
+          chart.setSelection([])
          }
         var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
         google.visualization.events.addListener(chart, 'select', selectHandler);
         chart.draw(data, options);
-      }
-        function drawTable() {
-          var data = new google.visualization.DataTable();
-          {%for a in column%}
-                data.addColumn('{{a.1}}', '{{a.0}}');
-          {% endfor%}
-          data.addRows(getData());
-          function getData(){
-              var array = [];
-              {%for a in history%}
-                  {% if title_table == n_did_table %}
-                    array.push(['{{a.0}}','{{a.1}}']);
-                  {% else %}
-                    array.push(['{{a.0}}','{{a.1}}','{{a.2}}',{% if a.3 is not None %}new Date('{{a.3.isoformat}}'){% else%}null{% endif %}]);
-                    // console.log(new Date('{{a.3.isoformat}}'));
-                  {% endif %}
-              {% endfor%}
-              return array;
+      }
+      function drawTable(columns = column_history,rows = json_history["data"],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 not title_table == n_did_table %}
-            formate_date.format(data, 3);
-            console.log(data);
-          {% endif %}
+          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 table = new google.visualization.Table(document.getElementById('table_div'));
-          table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
-        }
+          table.draw(data_table, {showRowNumber: true, width: '100%', height: '100%'});
+      }
     </script>
 {% endblock%}
@@ -90,40 +133,133 @@
     {% endif %}
     <div class="row">
         <div class="col-md-10">
-            <div id="chart_div" style="height: 500px"></div>
+            <div class="text-center">
+                <h2>{% trans "Report of the resource webpage" %}</h2>
+            </div>
+            <h3>{% trans "Select the period" %}</h3>
+            <div id="general-parameters-div">
+                <form id="period-form" action="" method="get">
+                    <div class="general-parameters-field">
+                           <label class="form-field-report"> {% trans "Initial Date" %} </label>
+                           <input class="form-control date-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y'}} {% else %} {{init_date|date:'m/d/Y'}} {% endif %}">
+                   </div>
+
+                   <div class="general-parameters-field">
+                           <label class="form-field-report"> {% trans "Final Date" %} </label>
+                           <input id="inputdate" class="form-control date-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y'}} {% else %} {{end_date|date:'m/d/Y'}} {% endif %}">
+                   </div>
+                    <input type="submit" value="{% trans 'Search' %}" class="btn btn-success btn-raised">
+               </form>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-10">
+            <div id="chart_div" style="height: 500px;"></div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-10">
             <div class="text-center">
-
-            <ul class="list-inline">
-                <li>
-                    {% if out_history %}
-                        <a href="{% url 'webpages:get_chart' webpage.slug %}"> <i class="fa fa-arrow-left ta-fw">  </i> {% trans "History" %}</a>
-                    {% endif %}
-                </li>
-                <li><h3>{{title_table}}</h3></li>
-            </ul>
-            <div class="row">
-                <div class="col-md-7">
-                    <ul id="report-info">
-                		{# <li> {{data.values|length}} {% trans "register(s)" %} </li>#}
-                		<li>
-                			<a href=""><i class="fa fa-download" aria-hidden="true"></i> {% trans "Interactions Data (.csv)" %}</a>
-                		</li>
-                        <li><a href=""><i class="fa fa-download" aria-hidden="true"></i> {% trans "Interactions Data (.xls)" %}</a></li>
-                	</ul>
-                </div>
-                <div class="col-md-3">
-                </div>
-            </div>
+                <ul class="list-inline nav-justified">
+                    <li>
+                        <ul id="view-table" class="list-inline text-right">
+                            <li><h3 id="title-table">{{history_table}}</h3></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <ul class="list-inline text-right">
+                            <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
+                            <li><button id="search-button" class="btn btn-success btn-raised" type="button" name="button">{% trans "Search" %}</button></li>
+                        </ul>
+                    </li>
+                </ul>
             </div>
+
             <div id="table_div"></div>
         </div>
     </div>
     <div class="row">
         <br><br>
     </div>
+    <script type="text/javascript">
+        $('#period-form').submit(function(event) {
+            $("#inputdate").datepicker();
+            $('<input />').attr('type', 'hidden')
+              .attr('name', "language")
+              .attr('value', '{{ LANGUAGE_CODE }}')
+              .appendTo('#period-form');
+        });
+        function altertitle(value) {
+            $("#title-table").text(value);
+        }
+        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;
+        }
+        function backhistory(){
+            drawTable(column_history,json_history["data"],true,3);
+            $("#title-table").text("{{history_table}}");
+            $("#link-history").remove();
+        }
+        $("#search-button").click(function(){
+            var text = $("#search-input").val();
+            var data = [];
+            if ($("#title-table").text() == "{{n_did_table}}"){
+                data = $.map(json_n_did["data"], function (obj) {
+                          return $.extend(true, {}, obj);
+                      });
+            } else if ($("#title-table").text() == "{{did_table}}") {
+                data = $.map(json_did["data"], function (obj) {
+                          return $.extend(true, {}, obj);
+                      });
+            } else {
+                data = $.map(json_history["data"], function (obj) {
+                      return $.extend(true, {}, obj);
+                  });
+            }
+            if ($("#title-table").text() != "{{n_did_table}}"){
+                for (var i in data){
+                    data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
+                }
+            }
+            var search = []
+            if ($("#title-table").text() != "{{n_did_table}}"){
+                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())){
+                            if ($("#title-table").text() == "{{did_table}}"){
+                                search.push(json_did["data"][i]);
+                            } else {
+                                search.push(json_history["data"][i]);
+                            }
+                        }
+                }
+            }
+            else {
+                for (var i in data){
+                    if (data[i][0].toLowerCase().includes(text.toLowerCase())
+                        || data[i][1].toLowerCase().includes(text.toLowerCase())){
+                                search.push(json_n_did["data"][i]);
+                        }
+                }
+            }
+            if (($("#title-table").text() == "{{did_table}}")){
+                drawTable(column_did,search,true,3);
+            } else if (($("#title-table").text() == "{{n_did_table}}")){
+                drawTable(column_n_did,search,false);
+            } else {
+                drawTable(column_history,search,true,3);
+            }
+        });
+    </script>
 {% endblock %}
@@ -9,6 +9,7 @@ from django.http import JsonResponse
 from amadeus.permissions import has_subject_permissions, has_resource_permissions
 import time
+import datetime
 from log.models import Log
 from log.mixins import LogMixin
@@ -461,41 +462,55 @@ class StatisticsView(LoginRequiredMixin, LogMixin, generic.DetailView):
         slug = self.kwargs.get('slug')
         webpage = get_object_or_404(Webpage, slug = slug)
-        parameter = self.request.GET.get('col','')
+        date_format = "%d/%m/%Y" if self.request.GET.get('language','') == 'pt-br' else "%m/%d/%Y"
+        if self.request.GET.get('language','') == "":
+            start_date = datetime.date.today() - datetime.timedelta(30)
+            end_date = datetime.date.today()
+        else :
+            start_date = datetime.datetime.strptime(self.request.GET.get('init_date',''),date_format)
+            end_date = datetime.datetime.strptime(self.request.GET.get('end_date',''),date_format)
+        context["init_date"] = start_date
+        context["end_date"] = end_date
         alunos = webpage.students.all()
-        vis_ou = Log.objects.filter(context__contains={'webpage_id':webpage.id},resource="webpage",action="view",user_email__in=(aluno.email for aluno in alunos))
+
+        vis_ou = Log.objects.filter(context__contains={'webpage_id':webpage.id},resource="webpage",action="view",user_email__in=(aluno.email for aluno in alunos), datetime__range=(start_date,end_date))
         did,n_did,history = str(_("Users who viewed")),str(_("Users who did not viewed")),str(_("History"))
         re = []
-        data = []
-        column = []
-        column.append([str(_("User")),"string"])
-        column.append([str(_("Group")),"string"])
-
-        if parameter == did:
-            from django.db.models import Count, Max
-            views_user = vis_ou.values("user_email").annotate(views=Count("user_email"))
-            date_last = vis_ou.values("user_email").annotate(last=Max("datetime"))
-            column.append([str(_("Number of views")),"string"])
-            column.append([str(_("Date of last view")),"date"])
-            for i in range(0,len(views_user)):
-                data.append([str(alunos.get(email=views_user[i].get("user_email"))),
-                    ", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=views_user[i].get("user_email"))]),
-                    views_user[i].get("views"),date_last.get(user_email=views_user[i].get("user_email")).get("last")])
-        elif parameter == n_did:
-            not_view = alunos.exclude(email__in=[log.user_email for log in vis_ou.distinct("user_email")])
-            for alun in not_view:
-                data.append([str(alun),", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=alun.email)])])
-
-        else:
-            column.append([str(_("Action")),"string"])
-            column.append([str(_("Date of action")),"date"])
-            for log_al in vis_ou.order_by("datetime"):
-                data.append([str(alunos.get(email=log_al.user_email)),
-                    ", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=log_al.user_email)]),
-                    log_al.action,log_al.datetime])
-
-
+        data_did, data_n_did,data_history = [],[],[]
+        json_did, json_n_did, json_history = {},{},{}
+        # column = []
+        # column.append([str(_("User")),"string"])
+        # column.append([str(_("Group")),"string"])
+
+        from django.db.models import Count, Max
+        views_user = vis_ou.values("user_email").annotate(views=Count("user_email"))
+        date_last = vis_ou.values("user_email").annotate(last=Max("datetime"))
+        # column.append([str(_("Number of views")),"string"])
+        # column.append([str(_("Date of last view")),"date"])
+        for i in range(0,len(views_user)):
+            data_did.append([str(alunos.get(email=views_user[i].get("user_email"))),
+                ", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=views_user[i].get("user_email"))]),
+                views_user[i].get("views"),date_last.get(user_email=views_user[i].get("user_email")).get("last")])
+        json_did["data"] = data_did
+
+        # column.append([str(_("Action")),"string"])
+        # column.append([str(_("Date of action")),"date"])
+        for log_al in vis_ou.order_by("datetime"):
+            data_history.append([str(alunos.get(email=log_al.user_email)),
+            ", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=log_al.user_email)]),
+            log_al.action,log_al.datetime])
+            json_history["data"] = data_history
+
+        not_view = alunos.exclude(email__in=[log.user_email for log in vis_ou.distinct("user_email")])
+        for alun in not_view:
+            data_n_did.append([str(alun),", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=alun.email)])])
+        json_n_did["data"] = data_n_did
+
+
+        context["json_did"] = json_did
+        context["json_n_did"] = json_n_did
+        context["json_history"] = json_history
         c_visualizou = vis_ou.distinct("user_email").count()
         re.append([str(_('Webpage')),did,n_did])
         re.append([str(_('View')),c_visualizou, alunos.count() - c_visualizou])
@@ -504,26 +519,8 @@ class StatisticsView(LoginRequiredMixin, LogMixin, generic.DetailView):
         context['db_data'] = re
         context['title_chart'] = _('Students viewing the web conference')
         context['title_vAxis'] = _('Quantity')
-        # data = []
-        # if not parameter == n_did:
-        #     for a in vis_ou.distinct("user_email"):
-        #         data.append([str(alunos.get(email=a.user_email)),a.user_email,a.action,a.datetime])
-        #
-        # if not parameter == did:
-        #     alunos = alunos.exclude(email__in=(log.user_email for log in vis_ou.distinct("user_email")))
-        #     for a in alunos:
-        #         data.append([str(a),a.email,None,None])
-        print (column, "column\n\n")
-        context["column"] = column
-        print (data, "data\n\n")
-        context["history"] = data
-        context["title_table"] = history
+
         context["n_did_table"] = n_did
-        context["out_history"] = False
-        if parameter == did:
-            context["title_table"] = did
-            context["out_history"] = True
-        elif parameter == n_did:
-            context["title_table"] = n_did
-            context["out_history"] = True
+        context["did_table"] = did
+        context["history_table"] = history
         return context
	@@ -7,13 +7,41 @@		@@ -7,13 +7,41 @@
7	{{ block.super }}	7	{{ block.super }}
8	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>	8	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9	<script type="text/javascript">	9	<script type="text/javascript">
		10	+ var array_history = [];
		11	+ {%for data_json in json_history.data%}
		12	+ array_history.push(["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
		13	+ // var teste = ["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}];
		14	+ // console.log(teste[3] instanceof Date);
		15	+ {% endfor%}
		16	+ var json_history = {"data":array_history};
		17	+ var column_history = [{"string":"User"},{"string":"Group"},{"string":"Action"},{"date":"Date of Action"}];
		18	+ // console.log(json_history);
		19	+
		20	+ var array_did = [];
		21	+ {%for data_json in json_did.data%}
		22	+ array_did.push(["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
		23	+ {% endfor%}
		24	+ var json_did = {"data":array_did};
		25	+ var column_did = [{"string":"User"},{"string":"Group"},{"string":"Number of Views"},{"date":"Date of Last View"}];
		26	+ // console.log(json_did);
		27	+
		28	+ var array_n_did = [];
		29	+ {%for data_json in json_n_did.data%}
		30	+ array_n_did.push(["{{data_json.0}}","{{data_json.1}}"]);
		31	+ {% endfor%}
		32	+ var json_n_did = {"data":array_n_did};
		33	+ var column_n_did = [{"string":"User"},{"string":"Group"}];
		34	+ // console.log(json_n_did);
		35	+ </script>
		36	+
		37	+
		38	+ <script type="text/javascript">
10	google.charts.load('current', {'packages':['corechart',"table"]});	39	google.charts.load('current', {'packages':['corechart',"table"]});
11	google.charts.setOnLoadCallback(drawChart);	40	google.charts.setOnLoadCallback(drawChart);
12	google.charts.setOnLoadCallback(drawTable);	41	google.charts.setOnLoadCallback(drawTable);
13		42
14	function drawChart() {	43	function drawChart() {
15	var data = google.visualization.arrayToDataTable({{db_data\|safe}});	44	var data = google.visualization.arrayToDataTable({{db_data\|safe}});
16	-
17	var options = {	45	var options = {
18	title: '{{title_chart}}',	46	title: '{{title_chart}}',
19	vAxis: {	47	vAxis: {
	@@ -31,43 +59,58 @@		@@ -31,43 +59,58 @@
31	var selectedItem = chart.getSelection()[0];	59	var selectedItem = chart.getSelection()[0];
32	if (selectedItem) {	60	if (selectedItem) {
33	var col = data.getColumnLabel(selectedItem.column);	61	var col = data.getColumnLabel(selectedItem.column);
34	- window.location.href = '{% url "webpages:get_chart" webpage.slug %}?col='+col + ''	62	+ var element = '<li id="link-history">\
		63	+ <a id="call-history" href="javascript:void(0)" onclick="return backhistory();"> <i class="fa fa-arrow-left ta-fw"> </i> {{history_table}}</a>\
		64	+ </li>';
		65	+ if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
		66	+ if (length("#link-history") <= 0){
		67	+ add(element,"#view-table",true);
		68	+ }
		69	+ altertitle("{{n_did_table}}");
		70	+ drawTable(column_n_did,json_n_did["data"],false);
		71	+ // console.log("n_did_table");
		72	+
		73	+ } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
		74	+ if (length("#link-history") <= 0){
		75	+ add(element,"#view-table",true);
		76	+ }
		77	+ altertitle("{{did_table}}");
		78	+ drawTable(column_did,json_did["data"],true,3);
		79	+ // console.log("did_table");
		80	+ }
35	}	81	}
		82	+ chart.setSelection([])
36	}	83	}
37		84
38	var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));	85	var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
39	google.visualization.events.addListener(chart, 'select', selectHandler);	86	google.visualization.events.addListener(chart, 'select', selectHandler);
40	chart.draw(data, options);	87	chart.draw(data, options);
41	- }
42		88
43	- function drawTable() {
44	- var data = new google.visualization.DataTable();
45	- {%for a in column%}
46	- data.addColumn('{{a.1}}', '{{a.0}}');
47	- {% endfor%}
48	- data.addRows(getData());
49	- function getData(){
50	- var array = [];
51	- {%for a in history%}
52	- {% if title_table == n_did_table %}
53	- array.push(['{{a.0}}','{{a.1}}']);
54	- {% else %}
55	- array.push(['{{a.0}}','{{a.1}}','{{a.2}}',{% if a.3 is not None %}new Date('{{a.3.isoformat}}'){% else%}null{% endif %}]);
56	- // console.log(new Date('{{a.3.isoformat}}'));
57	- {% endif %}
58	- {% endfor%}
59	- return array;	89	+ }
		90	+ function drawTable(columns = column_history,rows = json_history["data"],isdate = true,columndate = 3) {
		91	+ var data_table = new google.visualization.DataTable();
		92	+ for (var i in columns){
		93	+ for (var item in columns[i]){
		94	+ data_table.addColumn(item,columns[i][item]);
		95	+ }
60	}	96	}
		97	+
		98	+ data_table.addRows(rows);
61	var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});	99	var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
62	- {% if not title_table == n_did_table %}
63	- formate_date.format(data, 3);
64	- console.log(data);
65	- {% endif %}	100	+ if (isdate) formate_date.format(data_table, columndate);
		101	+
		102	+ // var methods = [];
		103	+ // for (var m in data_table) {
		104	+ // if (typeof data_table[m] == "function") {
		105	+ // methods.push(m);
		106	+ // }
		107	+ // }
		108	+ // console.log(methods.join(","));
66		109
67	var table = new google.visualization.Table(document.getElementById('table_div'));	110	var table = new google.visualization.Table(document.getElementById('table_div'));
68		111
69	- table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
70	- }	112	+ table.draw(data_table, {showRowNumber: true, width: '100%', height: '100%'});
		113	+ }
71	</script>	114	</script>
72	{% endblock%}	115	{% endblock%}
73		116
	@@ -90,40 +133,133 @@		@@ -90,40 +133,133 @@
90	{% endif %}	133	{% endif %}
91	<div class="row">	134	<div class="row">
92	<div class="col-md-10">	135	<div class="col-md-10">
93	- <div id="chart_div" style="height: 500px"></div>	136	+ <div class="text-center">
		137	+ <h2>{% trans "Report of the resource webpage" %}</h2>
		138	+ </div>
		139	+ <h3>{% trans "Select the period" %}</h3>
		140	+ <div id="general-parameters-div">
		141	+ <form id="period-form" action="" method="get">
		142	+ <div class="general-parameters-field">
		143	+ <label class="form-field-report"> {% trans "Initial Date" %} </label>
		144	+ <input class="form-control date-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date\|date:'d/m/Y'}} {% else %} {{init_date\|date:'m/d/Y'}} {% endif %}">
		145	+ </div>
		146	+
		147	+ <div class="general-parameters-field">
		148	+ <label class="form-field-report"> {% trans "Final Date" %} </label>
		149	+ <input id="inputdate" class="form-control date-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date\|date:'d/m/Y'}} {% else %} {{end_date\|date:'m/d/Y'}} {% endif %}">
		150	+ </div>
		151	+ <input type="submit" value="{% trans 'Search' %}" class="btn btn-success btn-raised">
		152	+ </form>
		153	+ </div>
		154	+ </div>
		155	+ </div>
		156	+ <div class="row">
		157	+ <div class="col-md-10">
		158	+ <div id="chart_div" style="height: 500px;"></div>
94	</div>	159	</div>
95	</div>	160	</div>
96		161
97	<div class="row">	162	<div class="row">
98	<div class="col-md-10">	163	<div class="col-md-10">
99	<div class="text-center">	164	<div class="text-center">
100	-
101	- <ul class="list-inline">
102	- <li>
103	- {% if out_history %}
104	- <a href="{% url 'webpages:get_chart' webpage.slug %}"> <i class="fa fa-arrow-left ta-fw"> </i> {% trans "History" %}</a>
105	- {% endif %}
106	- </li>
107	- <li><h3>{{title_table}}</h3></li>
108	- </ul>
109	- <div class="row">
110	- <div class="col-md-7">
111	- <ul id="report-info">
112	- {# <li> {{data.values\|length}} {% trans "register(s)" %} </li>#}
113	- <li>
114	- <a href=""><i class="fa fa-download" aria-hidden="true"></i> {% trans "Interactions Data (.csv)" %}</a>
115	- </li>
116	- <li><a href=""><i class="fa fa-download" aria-hidden="true"></i> {% trans "Interactions Data (.xls)" %}</a></li>
117	- </ul>
118	- </div>
119	- <div class="col-md-3">
120	- </div>
121	- </div>	165	+ <ul class="list-inline nav-justified">
		166	+ <li>
		167	+ <ul id="view-table" class="list-inline text-right">
		168	+ <li><h3 id="title-table">{{history_table}}</h3></li>
		169	+ </ul>
		170	+ </li>
		171	+ <li>
		172	+ <ul class="list-inline text-right">
		173	+ <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
		174	+ <li><button id="search-button" class="btn btn-success btn-raised" type="button" name="button">{% trans "Search" %}</button></li>
		175	+ </ul>
		176	+ </li>
		177	+ </ul>
122	</div>	178	</div>
		179	+
123	<div id="table_div"></div>	180	<div id="table_div"></div>
124	</div>	181	</div>
125	</div>	182	</div>
126	<div class="row">	183	<div class="row">
127	<br><br>	184	<br><br>
128	</div>	185	</div>
		186	+ <script type="text/javascript">
		187	+ $('#period-form').submit(function(event) {
		188	+ $("#inputdate").datepicker();
		189	+ $('<input />').attr('type', 'hidden')
		190	+ .attr('name', "language")
		191	+ .attr('value', '{{ LANGUAGE_CODE }}')
		192	+ .appendTo('#period-form');
		193	+ });
		194	+ function altertitle(value) {
		195	+ $("#title-table").text(value);
		196	+ }
		197	+ function add(element,local, first = false){
		198	+ if (first) $(local).prepend(element);
		199	+ else $(local).append(element);
		200	+ }
		201	+ function text(element){
		202	+ return $(element).text();
		203	+ }
		204	+ function length(element) {
		205	+ return $(element).length;
		206	+ }
		207	+ function backhistory(){
		208	+ drawTable(column_history,json_history["data"],true,3);
		209	+ $("#title-table").text("{{history_table}}");
		210	+ $("#link-history").remove();
		211	+ }
		212	+ $("#search-button").click(function(){
		213	+ var text = $("#search-input").val();
		214	+ var data = [];
		215	+ if ($("#title-table").text() == "{{n_did_table}}"){
		216	+ data = $.map(json_n_did["data"], function (obj) {
		217	+ return $.extend(true, {}, obj);
		218	+ });
		219	+ } else if ($("#title-table").text() == "{{did_table}}") {
		220	+ data = $.map(json_did["data"], function (obj) {
		221	+ return $.extend(true, {}, obj);
		222	+ });
		223	+ } else {
		224	+ data = $.map(json_history["data"], function (obj) {
		225	+ return $.extend(true, {}, obj);
		226	+ });
		227	+ }
		228	+ if ($("#title-table").text() != "{{n_did_table}}"){
		229	+ for (var i in data){
		230	+ data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
		231	+ }
		232	+ }
		233	+ var search = []
		234	+ if ($("#title-table").text() != "{{n_did_table}}"){
		235	+ for (var i in data){
		236	+ if (data[i][0].toLowerCase().includes(text.toLowerCase())
		237	+ \|\| data[i][1].toLowerCase().includes(text.toLowerCase())
		238	+ \|\| data[i][2].toLowerCase().includes(text.toLowerCase())
		239	+ \|\| data[i][3].toLowerCase().includes(text.toLowerCase())){
		240	+ if ($("#title-table").text() == "{{did_table}}"){
		241	+ search.push(json_did["data"][i]);
		242	+ } else {
		243	+ search.push(json_history["data"][i]);
		244	+ }
		245	+ }
		246	+ }
		247	+ }
		248	+ else {
		249	+ for (var i in data){
		250	+ if (data[i][0].toLowerCase().includes(text.toLowerCase())
		251	+ \|\| data[i][1].toLowerCase().includes(text.toLowerCase())){
		252	+ search.push(json_n_did["data"][i]);
		253	+ }
		254	+ }
		255	+ }
		256	+ if (($("#title-table").text() == "{{did_table}}")){
		257	+ drawTable(column_did,search,true,3);
		258	+ } else if (($("#title-table").text() == "{{n_did_table}}")){
		259	+ drawTable(column_n_did,search,false);
		260	+ } else {
		261	+ drawTable(column_history,search,true,3);
		262	+ }
		263	+ });
		264	+ </script>
129	{% endblock %}	265	{% endblock %}