From a99a5b037eefe9805ffecd19f7a820bd9e2fef5a Mon Sep 17 00:00:00 2001 From: Kayan Almeida Date: Tue, 9 Dec 2014 15:19:06 -0200 Subject: [PATCH] =?UTF-8?q?Adicionando=20anima=C3=A7=C3=A3o=20de=20loading?= =?UTF-8?q?;=20Modificando=20a=20resposta;=20Inserindo=20radio=20mais=20cl?= =?UTF-8?q?aro;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/loading.gif | Bin 0 -> 1431 bytes public/css/style.css | 14 ++++++++++ public/index.html | 22 +++++++++++++--- public/relatorioCodigo.js | 53 +++++++++++++++++++++++++++++--------- 4 files changed, 73 insertions(+), 16 deletions(-) create mode 100644 public/css/loading.gif create mode 100644 public/css/style.css diff --git a/public/css/loading.gif b/public/css/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..215f2864df86afcf4566a3e6b80ddc4409ac7e2e GIT binary patch literal 1431 zcmZ?wbhEHbbYtLP_`t}pZQHj0|NkrgWZ~puU}RAIC*@p}npl#WqEMb$lA(~8l~|FJ zpO~VTnU|K&p!lEL&ow02*)hP?NY8+ok%56h2Z$L!Mlmp1wg?uknEpG)c%mO${!#B| z?_0$zx?*n5eRV8LZ|A;Dp6y$EE^W^Jv~&IGyKS~HA3Xj@Hu@xgx>3W#%>c2U31M0z z&{T-afD9(57DXZHlWS*8F7%ClxO>*V=9D`c(`LV1dZT>8^VMb9Z;mC{KL6DB`9;z1 zp9#C>849cLWgc2=bTY(haY(}I&Z%ju8<_}M;nAX4r15Z~T#kO&tDIxOum0(Do~TXh zta`cBOXcRKPhyviGpyeiUi)!>H*2Yl>qT>xbwys`f@(2li#^Vrn{dW!>ptzpT+6y< zvJ$e$2WZiX>5PZFg~K$Ju5Ew5LnSe};!gTP>7}#Qm>u);p8u_Txw*=8mCeyFiw-U7 zHh<07>7LxXGN>!<;IgllF29yUq;I|bq;FqJhGY-}A3gGt|5Y+xk(d~1q{5cA=EgB4PjAy-&*sW~ zTFmQmSHdn*(2RT46!k~%ZZ_{)a(J0(>Xfv_cjiy%&f>$F8RyvmaZn~$6$z+ zF~*uV0`j*>cfW4DaHMCMNz>h5nY!QE)Lq@aoLOPG`n!0Z_QEz3`7;tlogIgyjZXx7 z^#|YF+{XHD+ldvf-22LQUiG`tnfL5e$|~ysf_4VN?3~!u;C$-Wv%i%RCWcQm7mBeb z9%v!e1b^oqC#g&mOALjMUFf5S~Z1!0&c}k1o@>2^#J93>?28sKB*ecXx7S?F_I$kc-0C>~(_32{Z|CoDW=i!u?aQgF*Ewgg$*DPJtKn8KBFd`< NU@-+OMky%+tpV8YSq=aI literal 0 HcmV?d00001 diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..a176c01 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,14 @@ +#dvLoading { + background:url(loading.gif) no-repeat center center; + height: 100%; + width: 100%; + position: fixed; + left: 0; + top: 0; + margin: 0 0 0 0; + z-index: 2; + +} +body { + z-index: 1; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 3067858..d2c8fd6 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,7 @@ + -
+
+
+

Preencha as informações abaixo

@@ -170,10 +173,21 @@

Preencha as informações abaixo

-
-
- Obter dados em tempo real
+
+
+ +
+
+
+
+
diff --git a/public/relatorioCodigo.js b/public/relatorioCodigo.js index 5302830..92b1164 100644 --- a/public/relatorioCodigo.js +++ b/public/relatorioCodigo.js @@ -37,7 +37,7 @@ window.onload = function() { "emptyLines": averageEmptyLines, "buses": uniqueLines, "numberOfJsonsInData": data.length, - "percentual": averageEmptyLinesPercentual + "total": calculateTotalBuses(data) }; } @@ -45,6 +45,15 @@ window.onload = function() { return parseInt(array.length / (jsonArray.length)); } + var calculateTotalBuses = function (jsonArray) { + var total = 0; + jsonArray.map(function(data) { + total += data.DATA.length; + }); + return parseInt(total); + + } + var calculatesAveragePercentual = function(array, jsonArray) { var totalCounter = 0; jsonArray.map(function(data) { @@ -92,7 +101,7 @@ window.onload = function() { "totalStoped": average, "buses": uniqueStopped, "numberOfJsonsInData": data.length, - "percentual": averagePercentual + "total": calculateTotalBuses(data) }; } @@ -122,7 +131,7 @@ window.onload = function() { "totalOutDated": average, "buses": uniqueOutDated, "numberOfJsonsInData": data.length, - "percentual": averagePercentual + "total": calculateTotalBuses(data) }; } @@ -192,7 +201,7 @@ window.onload = function() { "numberOfLines": calculatesAverageNumber(output_list, data), "lines": uniqueLines, "numberOfJsonsInData": data.length, - "percentual": percentual + "total": calculateTotalBuses(data) }; return output; @@ -229,7 +238,7 @@ window.onload = function() { "numberOfBuses": calculatesAverageNumber(in_range_buses, data), "buses": removeDuplicatedFromArray(in_range_buses), "numberOfJsonsInData": data.length, - "percentual": calculatesAveragePercentual(in_range_buses, data) + "total": calculateTotalBuses(data) }; return output; @@ -238,6 +247,7 @@ window.onload = function() { var result; $(document).on('click', '#button', function() { + startLoadingAnimation(); var selected = $('input[name="report"]:checked').val(); var dateNow = $("#dateNow"); var initialDate = $("#initialDate").val(); @@ -334,6 +344,7 @@ window.onload = function() { $(function(){ + endLoadingAnimation(); $('.checkbox').hide(); $('ul[role=menu] a').click(function(event) { @@ -356,13 +367,30 @@ $(function(){ }); // when the page loads, the initial and final date must be disabled $('[id*=Date]').prop('disabled', true); + var dateInputDisabled = true; - $('#dateNow').on('change',function(event) { + $('input[name=dateNow]').on('change',function(event) { event.preventDefault(); //when the dateNow checkbox changes, the fields become available or no - $('[id*=Date]').prop('disabled', $(this).prop('checked') ); + dateInputDisabled = !dateInputDisabled; + $('[id*=Date]').prop('disabled', dateInputDisabled); }); }) + +function startLoadingAnimation(){ + // Starts the loading animation + $('#main-container').fadeTo("fast",0.1,function(){ + $('#dvLoading').fadeIn("fast"); + }); +} + +function endLoadingAnimation(){ + // Finishes the loading animation + $('#dvLoading').fadeOut("fast", function() { + $('#main-container').fadeTo("fast",1); + }); +} + function showForm(form){ //Making fade transition to hide previous report and show the other var formTitle = $('a[data-input-id='+form+']').html(); @@ -381,6 +409,7 @@ function showForm(form){ function generateTable(answerArray,report){ //placing server's answer on a better format for the user... + endLoadingAnimation(); if (answerArray.length > 1){} $('#dados-analisados').html(''); $('#dados-analisados').append('Levamos em consideração ' + answerArray.numberOfJsonsInData + ' captura(s) de dado(s) distinta(s).'); @@ -394,7 +423,7 @@ function generateTable(answerArray,report){ $('#resposta > h2').append('Nenhum resultado encontrado'); } else { - $('#resposta > h2').append('Total de ônibus sem linha - ' + answerArray.emptyLines + ' (' + answerArray.percentual + '% do total)'); + $('#resposta > h2').append('Total de ônibus sem linha - ' + answerArray.emptyLines + ' do total de ' + answerArray.total + ' (' + parseFloat(answerArray.emptyLines/answerArray.total*100).toFixed(2) + '% do total)'); $('#resposta > table > thead').append(' Hora '); $('#resposta > table > thead').append(' Código do ônibus '); for (var i in answerArray.buses){ @@ -415,7 +444,7 @@ function generateTable(answerArray,report){ $('#resposta > h2').append('Nenhum resultado encontrado'); } else { - $('#resposta > h2').append('Total de ônibus sem linha - ' + answerArray.totalStoped + ' (' + answerArray.percentual + '% do total)'); + $('#resposta > h2').append('Total de ônibus sem linha - ' + answerArray.totalStoped + ' do total de ' + answerArray.total + ' (' + parseFloat(answerArray.totalStoped/answerArray.total*100).toFixed(2) + '% do total)'); $('#resposta > table > thead').append(' Hora '); $('#resposta > table > thead').append(' Código do ônibus '); for (var i in answerArray.buses){ @@ -436,7 +465,7 @@ function generateTable(answerArray,report){ $('#resposta > h2').append('Nenhum resultado encontrado'); } else { - $('#resposta > h2').append('Total de ônibus atrasados - ' + answerArray.totalOutDated + ' (' + answerArray.percentual + '% do total)'); + $('#resposta > h2').append('Total de ônibus atrasados - ' + answerArray.totalOutDated + ' do total de ' + answerArray.total + ' (' + parseFloat(answerArray.totalOutDated/answerArray.total*100).toFixed(2) + '% do total)'); $('#resposta > table > thead').append(' Hora '); $('#resposta > table > thead').append(' Código do ônibus '); for (var i in answerArray.buses){ @@ -458,7 +487,7 @@ function generateTable(answerArray,report){ $('#resposta > h2').append('Nenhum resultado encontrado'); } else { - $('#resposta > h2').append('Total de linhas - ' + answerArray['numberOfLines'] + ' (' + answerArray.percentual + '% do total)'); + $('#resposta > h2').append('Total de linhas - ' + answerArray.numberOfLines + ' do total de ' + answerArray.total + ' (' + parseFloat(answerArray.numberOfLines/answerArray.total*100).toFixed(2) + '% do total)'); $('#resposta > table ').css('width','40%'); $('#resposta > table > thead').append(' Número da Linha '); for (var i in answerArray.lines){ @@ -478,7 +507,7 @@ function generateTable(answerArray,report){ $('#resposta > h2').append('Nenhum resultado encontrado'); } else { - $('#resposta > h2').append('Total de ônibus dentro da faixa de velocidade - ' + answerArray['numberOfBuses'] + ' (' + answerArray.percentual + '% do total)'); + $('#resposta > h2').append('Total de ônibus dentro da faixa de velocidade - ' + answerArray.numberOfBuses + ' do total de ' + answerArray.total + ' (' + parseFloat(answerArray.numberOfBuses/answerArray.total*100).toFixed(2) + '% do total)'); $('#resposta > table > thead').append(' Hora '); $('#resposta > table > thead').append(' Código do ônibus '); $('#resposta > table > thead').append(' Velocidade Instantânea ');