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 7 {{ block.super }}
8 8 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9 9 <script type="text/javascript">
  10 +
10 11 var array_history = [];
11 12 {%for data_json in json_history.data%}
12 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 14 {% endfor%}
16 15 var json_history = {"data":array_history};
17 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 25 var array_did = [];
21 26 {%for data_json in json_did.data%}
... ... @@ -23,7 +28,6 @@
23 28 {% endfor%}
24 29 var json_did = {"data":array_did};
25 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 32 var array_n_did = [];
29 33 {%for data_json in json_n_did.data%}
... ... @@ -31,7 +35,6 @@
31 35 {% endfor%}
32 36 var json_n_did = {"data":array_n_did};
33 37 var column_n_did = [{"string":"User"},{"string":"Group"}];
34   - // console.log(json_n_did);
35 38 </script>
36 39  
37 40  
... ... @@ -44,6 +47,10 @@
44 47 var data = google.visualization.arrayToDataTable({{db_data|safe}});
45 48 var options = {
46 49 title: '{{title_chart}}',
  50 + // legend: {position: 'right', maxLines: 1},
  51 + bar: { groupWidth: '30%' },
  52 + chartArea:{width:"50%"},
  53 + titlePosition: 'out',
47 54 vAxis: {
48 55 title: '{{title_vAxis}}',
49 56 ticks: [0, .20, .40, .60, .80, 1],
... ... @@ -60,23 +67,32 @@
60 67 if (selectedItem) {
61 68 var col = data.getColumnLabel(selectedItem.column);
62 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 71 </li>';
65 72 if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
66 73 if (length("#link-history") <= 0){
67 74 add(element,"#view-table",true);
68 75 }
69 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 84 } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
74 85 if (length("#link-history") <= 0){
75 86 add(element,"#view-table",true);
76 87 }
77 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 98 chart.setSelection([])
... ... @@ -87,7 +103,7 @@
87 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 107 var data_table = new google.visualization.DataTable();
92 108 for (var i in columns){
93 109 for (var item in columns[i]){
... ... @@ -131,59 +147,95 @@
131 147 </div>
132 148 {% endfor %}
133 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 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 182 </div>
154 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 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 218 </div>
182 219 </div>
183   - <div class="row">
184   - <br><br>
185   - </div>
  220 +
186 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 239 $('#period-form').submit(function(event) {
188 240 $('<input />').attr('type', 'hidden')
189 241 .attr('name', "language")
... ... @@ -207,8 +259,18 @@
207 259 drawTable(column_history,json_history["data"],true,3);
208 260 $("#title-table").text("{{history_table}}");
209 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 274 var text = $("#search-input").val();
213 275 var data = [];
214 276 if ($("#title-table").text() == "{{n_did_table}}"){
... ... @@ -229,7 +291,6 @@
229 291 data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
230 292 }
231 293 }
232   - var search = []
233 294 if ($("#title-table").text() != "{{n_did_table}}"){
234 295 for (var i in data){
235 296 if (data[i][0].toLowerCase().includes(text.toLowerCase())
... ... @@ -252,13 +313,46 @@
252 313 }
253 314 }
254 315 }
  316 + // console.log(search,"busca");
255 317 if (($("#title-table").text() == "{{did_table}}")){
256   - drawTable(column_did,search,true,3);
  318 + drawTable(column_did,pagination(search,1),true,3);
257 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 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 357 </script>
264 358 {% endblock %}
... ...