Commit ac55c658028c7ea131bb631b42da09676b2b9984
1 parent
810bab2e
Exists in
master
and in
2 other branches
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 %} |