Commit ac55c658028c7ea131bb631b42da09676b2b9984

Authored by Jailson Dias
1 parent 810bab2e

fazendo ajustes na páginação e pesquisa no relatorio de webpage

Showing 1 changed file with 153 additions and 59 deletions   Show diff stats
webpage/templates/webpages/relatorios.html
@@ -7,15 +7,20 @@ @@ -7,15 +7,20 @@
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 +
10 var array_history = []; 11 var array_history = [];
11 {%for data_json in json_history.data%} 12 {%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 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%} 14 {% endfor%}
16 var json_history = {"data":array_history}; 15 var json_history = {"data":array_history};
17 var column_history = [{"string":"User"},{"string":"Group"},{"string":"Action"},{"date":"Date of Action"}]; 16 var column_history = [{"string":"User"},{"string":"Group"},{"string":"Action"},{"date":"Date of Action"}];
18 - // console.log(json_history); 17 +
  18 + var search = [];
  19 + for (var i in json_history["data"]){
  20 + search.push([json_history["data"][i][0],json_history["data"][i][1],
  21 + json_history["data"][i][2],json_history["data"][i][3]]);
  22 + }
  23 +
19 24
20 var array_did = []; 25 var array_did = [];
21 {%for data_json in json_did.data%} 26 {%for data_json in json_did.data%}
@@ -23,7 +28,6 @@ @@ -23,7 +28,6 @@
23 {% endfor%} 28 {% endfor%}
24 var json_did = {"data":array_did}; 29 var json_did = {"data":array_did};
25 var column_did = [{"string":"User"},{"string":"Group"},{"string":"Number of Views"},{"date":"Date of Last View"}]; 30 var column_did = [{"string":"User"},{"string":"Group"},{"string":"Number of Views"},{"date":"Date of Last View"}];
26 - // console.log(json_did);  
27 31
28 var array_n_did = []; 32 var array_n_did = [];
29 {%for data_json in json_n_did.data%} 33 {%for data_json in json_n_did.data%}
@@ -31,7 +35,6 @@ @@ -31,7 +35,6 @@
31 {% endfor%} 35 {% endfor%}
32 var json_n_did = {"data":array_n_did}; 36 var json_n_did = {"data":array_n_did};
33 var column_n_did = [{"string":"User"},{"string":"Group"}]; 37 var column_n_did = [{"string":"User"},{"string":"Group"}];
34 - // console.log(json_n_did);  
35 </script> 38 </script>
36 39
37 40
@@ -44,6 +47,10 @@ @@ -44,6 +47,10 @@
44 var data = google.visualization.arrayToDataTable({{db_data|safe}}); 47 var data = google.visualization.arrayToDataTable({{db_data|safe}});
45 var options = { 48 var options = {
46 title: '{{title_chart}}', 49 title: '{{title_chart}}',
  50 + // legend: {position: 'right', maxLines: 1},
  51 + bar: { groupWidth: '30%' },
  52 + chartArea:{width:"50%"},
  53 + titlePosition: 'out',
47 vAxis: { 54 vAxis: {
48 title: '{{title_vAxis}}', 55 title: '{{title_vAxis}}',
49 ticks: [0, .20, .40, .60, .80, 1], 56 ticks: [0, .20, .40, .60, .80, 1],
@@ -60,23 +67,32 @@ @@ -60,23 +67,32 @@
60 if (selectedItem) { 67 if (selectedItem) {
61 var col = data.getColumnLabel(selectedItem.column); 68 var col = data.getColumnLabel(selectedItem.column);
62 var element = '<li id="link-history">\ 69 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>\ 70 + <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>'; 71 </li>';
65 if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){ 72 if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
66 if (length("#link-history") <= 0){ 73 if (length("#link-history") <= 0){
67 add(element,"#view-table",true); 74 add(element,"#view-table",true);
68 } 75 }
69 altertitle("{{n_did_table}}"); 76 altertitle("{{n_did_table}}");
70 - drawTable(column_n_did,json_n_did["data"],false);  
71 - // console.log("n_did_table"); 77 + search = [];
  78 + for (var i in json_n_did["data"]){
  79 + search.push([json_n_did["data"][i][0],json_n_did["data"][i][1]]);
  80 + }
  81 + drawTable(column_n_did,pagination(json_n_did["data"],1),false);
  82 + putpagination(json_n_did["data"]);
72 83
73 } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){ 84 } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
74 if (length("#link-history") <= 0){ 85 if (length("#link-history") <= 0){
75 add(element,"#view-table",true); 86 add(element,"#view-table",true);
76 } 87 }
77 altertitle("{{did_table}}"); 88 altertitle("{{did_table}}");
78 - drawTable(column_did,json_did["data"],true,3);  
79 - // console.log("did_table"); 89 + search = [];
  90 + for (var i in json_did["data"]){
  91 + search.push([json_did["data"][i][0],json_did["data"][i][1],
  92 + json_did["data"][i][2],json_did["data"][i][3]]);
  93 + }
  94 + drawTable(column_did,pagination(json_did["data"],1),true,3);
  95 + putpagination(json_did["data"]);
80 } 96 }
81 } 97 }
82 chart.setSelection([]) 98 chart.setSelection([])
@@ -87,7 +103,7 @@ @@ -87,7 +103,7 @@
87 chart.draw(data, options); 103 chart.draw(data, options);
88 104
89 } 105 }
90 - function drawTable(columns = column_history,rows = json_history["data"],isdate = true,columndate = 3) { 106 + function drawTable(columns = column_history,rows = pagination(json_history["data"],1),isdate = true,columndate = 3) {
91 var data_table = new google.visualization.DataTable(); 107 var data_table = new google.visualization.DataTable();
92 for (var i in columns){ 108 for (var i in columns){
93 for (var item in columns[i]){ 109 for (var item in columns[i]){
@@ -131,59 +147,95 @@ @@ -131,59 +147,95 @@
131 </div> 147 </div>
132 {% endfor %} 148 {% endfor %}
133 {% endif %} 149 {% endif %}
134 - <div class="row">  
135 - <div class="col-md-10">  
136 - <div class="text-center">  
137 - <h2>{% trans "Report of the resource webpage" %}</h2> 150 + <div class="panel panel-info topic-panel">
  151 + <div class="panel-heading">
  152 + <div class="row">
  153 + <div class="col-md-12 category-header">
  154 + <h4 class="panel-title" style="margin-top: 10px; margin-bottom: 8px">
  155 + <span>{{webpage}} / {% trans "Reports" %}</span>
  156 + </h4>
  157 + </div>
  158 + </div>
  159 + </div>
  160 + <div class="row">
  161 + <div class="col-md-12 text-center">
  162 + <h4 style="margin-top: 15px; margin-bottom: 10px" ><strong>{% trans "Report of the resource " %}{{webpage}}</strong></h4>
  163 + </div>
  164 + <div class="col-md-2 text-right">
  165 + <h4>{% trans "Select the period: " %}</h4>
138 </div> 166 </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 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 %}">  
145 - </div> 167 + <div class="col-md-8">
  168 + <div id="general-parameters-div">
  169 + <form id="period-form" action="" method="get">
  170 + <div class="general-parameters-field">
  171 + {# <label class="form-field-report"> {% trans "Initial Date" %} </label> #}
  172 + <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 %}">
  173 + </div>
146 174
147 - <div class="general-parameters-field">  
148 - <label class="form-field-report"> {% trans "Final Date" %} </label>  
149 - <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 %}">  
150 - </div>  
151 - <input type="submit" value="{% trans 'Search' %}" class="btn btn-success btn-raised">  
152 - </form> 175 + <div class="general-parameters-field">
  176 + {# <label class="form-field-report"> {% trans "Final Date" %} </label> #}
  177 + <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 %}">
  178 + </div>
  179 + <input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised">
  180 + </form>
  181 + </div>
153 </div> 182 </div>
154 </div> 183 </div>
155 - </div>  
156 - <div class="row">  
157 - <div class="col-md-10">  
158 - <div id="chart_div" style="height: 500px;"></div> 184 + <div class="row">
  185 + <div class="col-md-10 col-md-offset-1">
  186 + <div id="chart_div" style="height: 500px; margin-top: -50px;"></div>
  187 + </div>
159 </div> 188 </div>
160 - </div>  
161 189
162 - <div class="row">  
163 - <div class="col-md-10">  
164 - <div class="text-center">  
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>  
178 - </div> 190 + <div class="row">
  191 + <div class="col-md-10 col-md-offset-1">
  192 + <div class="text-center">
  193 + <ul class="list-inline nav-justified">
  194 + <li>
  195 + <ul id="view-table" class="list-inline text-right">
  196 + <li><h3 id="title-table">{{history_table}}</h3></li>
  197 + </ul>
  198 + </li>
  199 + <li>
  200 + <ul class="list-inline text-right">
  201 + <li><p>{% trans "Filtro: " %}</p></li>
  202 + <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
  203 + </ul>
  204 + </li>
  205 + </ul>
  206 + </div>
179 207
180 - <div id="table_div"></div> 208 + <div id="table_div"></div>
  209 + <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
  210 + <ul class="pagination">
  211 +
  212 + </ul>
  213 + </div>
  214 + </div>
  215 + </div>
  216 + <div class="row">
  217 + <br><br>
181 </div> 218 </div>
182 </div> 219 </div>
183 - <div class="row">  
184 - <br><br>  
185 - </div> 220 +
186 <script type="text/javascript"> 221 <script type="text/javascript">
  222 + function putpagination(data = json_history["data"]){
  223 + var len = Math.ceil(data.length / 20);
  224 + $(".pagination").empty();
  225 + $(".pagination").append('<li class="disabled"><span>«</span></li>');
  226 + $(".pagination").append('<li id="1" class="active">\
  227 + <a href="javascript:void(0);" onclick="return clickPagination(1);">1</a>\
  228 + </li>');
  229 + for (var i = 2; i <= len;i++){
  230 + $(".pagination").append('<li id="' + i + '">\
  231 + <a href="javascript:void(0);" onclick="return clickPagination(' + i +');">' + i + '</a>\
  232 + </li>');
  233 + }
  234 + if (len > 1) $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(2);"><span>»</span></a></li>');
  235 + else $(".pagination").append('<li class="disabled"><span>»</span></li>');
  236 + };
  237 + putpagination();
  238 +
187 $('#period-form').submit(function(event) { 239 $('#period-form').submit(function(event) {
188 $('<input />').attr('type', 'hidden') 240 $('<input />').attr('type', 'hidden')
189 .attr('name', "language") 241 .attr('name', "language")
@@ -207,8 +259,18 @@ @@ -207,8 +259,18 @@
207 drawTable(column_history,json_history["data"],true,3); 259 drawTable(column_history,json_history["data"],true,3);
208 $("#title-table").text("{{history_table}}"); 260 $("#title-table").text("{{history_table}}");
209 $("#link-history").remove(); 261 $("#link-history").remove();
  262 + search = [];
  263 + for (var i in json_history["data"]){
  264 + search.push([json_history["data"][i][0],json_history["data"][i][1],
  265 + json_history["data"][i][2],json_history["data"][i][3]]);
  266 + }
  267 + putpagination(json_history["data"]);
210 } 268 }
211 - $("#search-button").click(function(){ 269 + // $("#search-input").on("keyup",function(){
  270 + // console.log($("#search-input").val());
  271 + // });
  272 + $("#search-input").on("keyup",function(){
  273 + search = [];
212 var text = $("#search-input").val(); 274 var text = $("#search-input").val();
213 var data = []; 275 var data = [];
214 if ($("#title-table").text() == "{{n_did_table}}"){ 276 if ($("#title-table").text() == "{{n_did_table}}"){
@@ -229,7 +291,6 @@ @@ -229,7 +291,6 @@
229 data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm"); 291 data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
230 } 292 }
231 } 293 }
232 - var search = []  
233 if ($("#title-table").text() != "{{n_did_table}}"){ 294 if ($("#title-table").text() != "{{n_did_table}}"){
234 for (var i in data){ 295 for (var i in data){
235 if (data[i][0].toLowerCase().includes(text.toLowerCase()) 296 if (data[i][0].toLowerCase().includes(text.toLowerCase())
@@ -252,13 +313,46 @@ @@ -252,13 +313,46 @@
252 } 313 }
253 } 314 }
254 } 315 }
  316 + // console.log(search,"busca");
255 if (($("#title-table").text() == "{{did_table}}")){ 317 if (($("#title-table").text() == "{{did_table}}")){
256 - drawTable(column_did,search,true,3); 318 + drawTable(column_did,pagination(search,1),true,3);
257 } else if (($("#title-table").text() == "{{n_did_table}}")){ 319 } else if (($("#title-table").text() == "{{n_did_table}}")){
258 - drawTable(column_n_did,search,false); 320 + drawTable(column_n_did,pagination(search,1),false);
259 } else { 321 } else {
260 - drawTable(column_history,search,true,3); 322 + drawTable(column_history,pagination(search,1),true,3);
261 } 323 }
  324 + putpagination(search);
262 }); 325 });
  326 +
  327 + function pagination(data,pag){
  328 + var len = data.length;
  329 + var first = (pag * 20 - 20 < len) ? pag * 20 - 20:len;
  330 + var end = (pag * 20 < len) ? pag * 20:len;
  331 + var search = data.slice(first,end);
  332 + return search;
  333 + // $(".pagination > .disabled").css("color","red");
  334 + }
  335 + function clickPagination(pag){
  336 + $(".pagination > li").last().remove();
  337 + $(".pagination > li").first().remove();
  338 +
  339 + // console.log(search,"texto");
  340 + if (($("#title-table").text() == "{{did_table}}")){
  341 + drawTable(column_did,pagination(search,pag),true,3);
  342 + } else if (($("#title-table").text() == "{{n_did_table}}")){
  343 + drawTable(column_n_did,pagination(search,pag),false);
  344 + } else {
  345 + drawTable(column_history,pagination(search,pag),true,3);
  346 + }
  347 +
  348 + if (pag < Math.ceil(search.length / 20))
  349 + $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag + 1) + ');"><span>»</span></a></li>');
  350 + else $(".pagination").append('<li class="disabled"><span>»</span></li>');
  351 + if (pag > 1)
  352 + $(".pagination").prepend('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag - 1) + ');"><span>«</span></a></li>');
  353 + else $(".pagination").prepend('<li class="disabled"><span>«</span></li>');
  354 + $(".active").removeClass("active");
  355 + $("#" + pag).addClass("active");
  356 + }
263 </script> 357 </script>
264 {% endblock %} 358 {% endblock %}