From 92bd7d14369ec9751fe67617aee601f0f3eedc79 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 3 Mar 2018 02:27:15 +0100 Subject: [PATCH] Improvements when Product Cards are Loading --- .vs/AAWebPlatform/v15/.suo | Bin 79360 -> 78336 bytes Dashboard.js | 1 + Panels/ProductsPanel.js | 6 +- ProductCard.js | 174 ++++++++++++++++++++++++++----------- TimelineChart.js | 14 +-- server.js | 2 +- 6 files changed, 136 insertions(+), 61 deletions(-) diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo index ae7f9d31bff11f0ba5a8d9e2b15d513ce3e9002c..e275487c974bf3e1e2785b7f8efe2d5704120c5f 100644 GIT binary patch delta 2008 zcmbW1du-EH6vun+ukC*A+R?6TE9_Oe!jMPzfFa<3jg>Jv#BI)rh-}~hdC3wxMAWT= zKX_!YttYPhA$0s)No#}i^lLchmwqMX#|peUaZYAqv#T4KZm@Jgs)POvk zW0;gsP0boYXeXw;NWK(z8mbL%P$W)ZH}5k9CG%x!UQxS9y(Ip=`8+(Lci3)_2j4RE zS&~YF2V(#m*x6Js{Gios?=Jgau|-!T?`d5Q4Tklj3EOUGIYB z$mV62+Q()5bkN)t+Is5FA-s9kjyG1uV{2`)GKMJ&Sg;%*kLQ(~guwI?`FSezK$q#w zpcJz}l}9V?kJtnERW(C&dAv2N(%P=h5VM3uw;%@=_V6C>3!Hztr!C!eC z#`R9cd3!ox54Q1jxMsfr&xgn2fwwzwz48iX9go54j$)-C^M9<>Lp?{xCIgPAPiIRWxQ>Wc197p6uF-uxf|*IzVY7L)l$*Dipv zk>RM`(Y*WmIZ4^1#lp~Xyz#9O-5269yEhTtpPu9!e_H`oalxZjDFXh>nM{cIugZ^5 z2s=Wl=-XeEC?3sy8+ojOf?~qcdGDiz1UX-yND-Ti+A0df5OLh%5&kVC(`bTC$xx2( zZHo)8kRgpXo^68vFE6j|sFen5nWOx!ReDL@?e?J807gt*Y2mp8pG$bU!zC2q?h9YU z;yxu`J*|gDZilra-{#89Hhul6>c}hgpHu@1Qt#NnL;^i2V*#m+D>4> zOAg3ClJADqx?ngH7KO(EYo83qpbiV26~T)DX_mS5p`;O~R(iYkro`=-vakwsT*J}w gRR$gn$(FH}&+1z~NuB-8cl)aPr#Tyft$9%Q7e@D6vy}6eaj-hWmR5_tVoK8u&Y9fs0d4~Xv&U`I#VWEY80Bu>Zp~h)tDtF z>@k-f3jTEV4<94$Eu3+B5Q5|AAK6snW6TlLW~{8SVA4wIoRxL3_@nX8eD>UXe&^nM z&iCHE{;N9w&$_yDa2)ae1vt~-FgG8&vbrk#HB7=aq6WUlZt*&-!u8rRJZ^M>AG@{V zYBDt%O%Jv4WJeQ8gr2Ywj}iQB5Lpi~jL0WaiGhTjNFj2G!Nd@P*9^)OnOhBnA)(#3RIA3M(W#nV3opCyIz^L@`l9xQWLJUU4kh zWMVoogHVVSI7XkKNE0!bwbF6}hgNG{~;^j>cOid#aZPED+C#HZJKEqKs65 zIaq2QH<%+-6>6<`v(k(MH*A4r;L>HnDz{MK;G?g!}!t1~Bod@8$C%QU>WcQ31f!^=(WS-|Vs6`@BsYqq!M_`GixadvcB=vmMZ^_&9M+uoeVh`vw zPmzObi?M-5!+BDZJzG1#vVeLOM06j05=GSG?Sz*NOUTX2CQk1?2t%JZ>`Ki>$E*x& z7f$J$RSSW+$L|T-H%fNRoei?&=}$p@R;bSj9GhX2wu&3tzy?2>steI6Oz5uu1eNOX z)K{oqs4f%XDn&?T0sS~u34s|y?D$#k06ZzOBU`ES1T7a{=@95xUD4k*7o)$13sWsYLu` zc|4_*qP{J#ZA+0XdZ$&3{$lFvY}F4)q6^Qjo<$>J$5g}DW&>>9os7*(jM(&pf~oB#P=af&Z^cC&#)z^h9VZRzBeP`B zSr9xgtCjyhRRlj35$Py1?}bTtc=N#EG66$n&7YgJI4w*kc&Rl8UkYW&Z8yF($~P{r zg$D|`_0UPB-AjrR_@DV0)r&&CtE1nL01=7@6Bb`|bHa6*pdYyEgGt)(8aa$WepZN!LMX0C)R9l YOD#U%xo6((iRl~h5)S9v7`d_k0HTb*MF0Q* diff --git a/Dashboard.js b/Dashboard.js index 5162fb31f..660b0eca9 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -107,6 +107,7 @@ var viewPort = newViewPort(); const PRODUCT_CARD_STATUS = { ON: 'on', + LOADING: 'loading', OFF: 'off' }; diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index d76f9ff00..c8a7a1cab 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -5,7 +5,7 @@ function newProductsPanel() { var thisObject = { container: undefined, - getOnProductCards: getOnProductCards, + getLoadingProductCards: getLoadingProductCards, draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize @@ -116,7 +116,7 @@ function newProductsPanel() { } - function getOnProductCards() { + function getLoadingProductCards() { /* Returns all productCards which status is ON */ @@ -124,7 +124,7 @@ function newProductsPanel() { for (let i = 0; i < productCards.length; i++) { - if (productCards[i].status === PRODUCT_CARD_STATUS.ON) { + if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) { onProducts.push(productCards[i]); } diff --git a/ProductCard.js b/ProductCard.js index b15de8e22..957bc0f5a 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -26,19 +26,22 @@ let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, 0.5)'; let marketFileProgressBar = { - value: 100, + value: 0, + animatedValue: 0, fillStyle: UNLOADED_FILL_STYLE, strokeStyle: UNLOADED_STROKE_STYLE }; let dailyFileProgressBar = { - value: 100, + value: 0, + animatedValue: 0, fillStyle: UNLOADED_FILL_STYLE, strokeStyle: UNLOADED_STROKE_STYLE }; let singleFileProgressBar = { - value: 100, + value: 0, + animatedValue: 0, fillStyle: UNLOADED_FILL_STYLE, strokeStyle: UNLOADED_STROKE_STYLE }; @@ -76,13 +79,15 @@ thisObject.status = storedValue; + if (thisObject.status === PRODUCT_CARD_STATUS.ON) { + + changeStatusTo(PRODUCT_CARD_STATUS.LOADING); + + } + } else { - thisObject.status = PRODUCT_CARD_STATUS.ON; - - /* Save the value for future use */ - - window.localStorage.setItem(thisObject.code, thisObject.status); + changeStatusTo(PRODUCT_CARD_STATUS.LOADING); // This happens the first time the app is run on a new browser. } @@ -115,19 +120,13 @@ if (event.currentValue === event.totalValue) { - marketFileProgressBar = { - value: 100, - fillStyle: LOADED_FILL_STYLE, - strokeStyle: LOADED_STROKE_STYLE - }; + marketFileProgressBar.value= 100; } else { - marketFileProgressBar = { - value: Math.trunc(event.currentValue * 100 / event.totalValue), - fillStyle: LOADING_FILL_STYLE, - strokeStyle: LOADING_STROKE_STYLE - }; + marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue); + marketFileProgressBar.fillStyle = LOADING_FILL_STYLE; + marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE; } @@ -142,19 +141,13 @@ if (event.currentValue === event.totalValue) { - dailyFileProgressBar = { - value: 100, - fillStyle: LOADED_FILL_STYLE, - strokeStyle: LOADED_STROKE_STYLE - }; + dailyFileProgressBar.value = 100; } else { - dailyFileProgressBar = { - value: Math.trunc(event.currentValue * 100 / event.totalValue), - fillStyle: LOADING_FILL_STYLE, - strokeStyle: LOADING_STROKE_STYLE - }; + dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue); + dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE; + dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE; } @@ -169,19 +162,13 @@ if (event.currentValue === event.totalValue) { - singleFileProgressBar = { - value: 100, - fillStyle: LOADED_FILL_STYLE, - strokeStyle: LOADED_STROKE_STYLE - }; + singleFileProgressBar.value = 100; } else { - singleFileProgressBar = { - value: Math.trunc(event.currentValue * 100 / event.totalValue), - fillStyle: LOADING_FILL_STYLE, - strokeStyle: LOADING_STROKE_STYLE - }; + singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue); + singleFileProgressBar.fillStyle = LOADING_FILL_STYLE; + singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE; } @@ -197,21 +184,48 @@ switch (thisObject.status) { case PRODUCT_CARD_STATUS.ON: - thisObject.status = PRODUCT_CARD_STATUS.OFF; + + changeStatusTo(PRODUCT_CARD_STATUS.OFF); + + marketFileProgressBar.animatedValue = 0; + marketFileProgressBar.value = 0; + marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE; + marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE; + + dailyFileProgressBar.animatedValue = 0; + dailyFileProgressBar.value = 0; + dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE; + dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE; + + singleFileProgressBar.animatedValue = 0; + singleFileProgressBar.value = 0; + singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE; + singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE; + break; case PRODUCT_CARD_STATUS.OFF: - thisObject.status = PRODUCT_CARD_STATUS.ON; + + changeStatusTo(PRODUCT_CARD_STATUS.LOADING); + break; } + } - let eventData = thisObject; + function changeStatusTo(pNewStatus) { - thisObject.container.eventHandler.raiseEvent('Status Changed', eventData); + if (thisObject.status !== pNewStatus) { - window.localStorage.setItem(thisObject.code, thisObject.status); + thisObject.status = pNewStatus; + let eventData = thisObject; + + thisObject.container.eventHandler.raiseEvent('Status Changed', eventData); + + window.localStorage.setItem(thisObject.code, thisObject.status); + + } } function draw() { @@ -237,8 +251,9 @@ browserCanvasContext.arc(centerPoint.x, centerPoint.y, 3, 0, 2 * Math.PI); browserCanvasContext.closePath(); - let offFillStyle = 'rgba(232, 28, 28, 1)'; - let onFillStyle = 'rgba(45, 232, 28, 1)'; + let offFillStyle = 'rgba(232, 28, 28, 0.75)'; + let onFillStyle = 'rgba(45, 232, 28, 0.75)'; + let loadingFillStyle = 'rgba(237, 227, 47, 0.75)'; switch (thisObject.status) { @@ -250,6 +265,10 @@ browserCanvasContext.fillStyle = offFillStyle; break; + case PRODUCT_CARD_STATUS.LOADING: + browserCanvasContext.fillStyle = loadingFillStyle; + break; + } browserCanvasContext.fill(); @@ -317,6 +336,10 @@ browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + /* ------------------- Progress Bars -------------------------- */ + + const ANIMATED_INCREMENT = 3; + let point1; let point2; let point3; @@ -324,18 +347,34 @@ /* We draw here the Market Progress Bar. */ + /* Animate */ + + if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) { + + marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT; + + } + + if (marketFileProgressBar.animatedValue >= 100) { + + marketFileProgressBar.fillStyle = LOADED_FILL_STYLE; + marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE; + + changeStatusTo(PRODUCT_CARD_STATUS.ON); + } + point1 = { x: 0, y: thisObject.container.frame.height - 1 }; point2 = { - x: thisObject.container.frame.width * marketFileProgressBar.value / 100, + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 1 }; point3 = { - x: thisObject.container.frame.width * marketFileProgressBar.value / 100, + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 3 }; @@ -367,18 +406,34 @@ /* We draw here the Daily Progress Bar. */ + /* Animate */ + + if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) { + + dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT; + + } + + if (dailyFileProgressBar.animatedValue >= 100) { + + dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE; + dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE; + + changeStatusTo(PRODUCT_CARD_STATUS.ON); + } + point1 = { x: 0, y: thisObject.container.frame.height - 4 }; point2 = { - x: thisObject.container.frame.width * dailyFileProgressBar.value / 100, + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 4 }; point3 = { - x: thisObject.container.frame.width * dailyFileProgressBar.value / 100, + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 6 }; @@ -410,18 +465,35 @@ /* We draw here the Single File Progress Bar. */ + /* Animate */ + + if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) { + + singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT; + + } + + if (singleFileProgressBar.animatedValue >= 100) { + + singleFileProgressBar.fillStyle = LOADED_FILL_STYLE; + singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE; + + changeStatusTo(PRODUCT_CARD_STATUS.ON); + + } + point1 = { x: 0, y: thisObject.container.frame.height - 7 }; point2 = { - x: thisObject.container.frame.width * singleFileProgressBar.value / 100, + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 7 }; point3 = { - x: thisObject.container.frame.width * singleFileProgressBar.value / 100, + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, y: thisObject.container.frame.height - 9 }; diff --git a/TimelineChart.js b/TimelineChart.js index 8fd398b44..76131d079 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -101,15 +101,15 @@ function newTimelineChart() { viewPort.displace(displaceVector); - /* Lets get all the cards that are turned on. */ + /* Lets get all the cards that needs to be loaded. */ - let onProductCards = productsPanel.getOnProductCards(); + let loadingProductCards = productsPanel.getLoadingProductCards(); - for (let i = 0; i < onProductCards.length; i++) { + for (let i = 0; i < loadingProductCards.length; i++) { /* For each one, we will initialize the associated plotter. */ - initializePlotter(onProductCards[i]); + initializePlotter(loadingProductCards[i]); } } @@ -207,7 +207,7 @@ function newTimelineChart() { function onProductCardStatusChanged(pProductCard) { - if (pProductCard.status === PRODUCT_CARD_STATUS.ON) { + if (pProductCard.status === PRODUCT_CARD_STATUS.LOADING) { /* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */ @@ -229,7 +229,9 @@ function newTimelineChart() { } - } else { + } + + if (pProductCard.status === PRODUCT_CARD_STATUS.OFF) { /* If the plotter of this card is on our Active Plotters list, then we remove it. */ diff --git a/server.js b/server.js index 39b6fecda..a780cdf8c 100644 --- a/server.js +++ b/server.js @@ -6,7 +6,7 @@ if (CONSOLE_LOG === true) { } -let debugMode = false; // This forces the server to read Plotters from the local drive. +let debugMode = true; // This forces the server to read Plotters from the local drive. if (CONSOLE_LOG === true && debugMode === true) {