diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo index ae7f9d31b..e275487c9 100644 Binary files a/.vs/AAWebPlatform/v15/.suo and b/.vs/AAWebPlatform/v15/.suo differ 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) {