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 | 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 %} | ... | ... |