diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo index c4514eca9..954f27362 100644 Binary files a/.vs/AAWebPlatform/v15/.suo and b/.vs/AAWebPlatform/v15/.suo differ diff --git a/ProductCard.js b/ProductCard.js index f24ef9cef..7718b0573 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -8,10 +8,17 @@ bot: undefined, product: undefined, code: undefined, + onFileLoaded: onFileLoaded, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize }; + let progressBar = { + value: 100, + fillStyle = 'rgba(226, 226, 226, 1)', + strokeStyle = 'rgba(86, 86, 86, 1)' + }; + return thisObject; function initialize() { @@ -80,6 +87,28 @@ } + function onFileLoaded(event) { + + if (event.totalValue === event.totalValue) { + + progressBar = { + value: 100, + fillStyle = 'rgba((56, 209, 6, 1)', + strokeStyle = 'rgba(40, 99, 21, 1)' + }; + + } else { + + progressBar = { + value: event.totalValue * 100 / event.totalValue, + fillStyle = 'rgba(234, 143, 23, 1)', + strokeStyle = 'rgba(122, 79, 23, 1)' + }; + + } + + } + function buttonPressed(event) { switch (thisObject.status) { @@ -104,11 +133,11 @@ function draw() { - drawIcon(); + drawProductCard(); } - function drawIcon() { + function drawProductCard() { centerPoint = { x: 7, @@ -205,5 +234,48 @@ browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + /* We draw here the progress bar. */ + + point1 = { + x: 0, + y: thisObject.container.frame.height - 1 + }; + + point2 = { + x: thisObject.container.frame.width * progressBar.value / 100, + y: thisObject.container.frame.height - 1 + }; + + point3 = { + x: thisObject.container.frame.width * progressBar.value / 100, + y: thisObject.container.frame.height - 5 + }; + + point4 = { + x: 0, + y: thisObject.container.frame.height - 5 + }; + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1); + point2 = thisObject.container.frame.frameThisPoint(point2); + point3 = thisObject.container.frame.frameThisPoint(point3); + point4 = thisObject.container.frame.frameThisPoint(point4); + + browserCanvasContext.beginPath(); + browserCanvasContext.moveTo(point1.x, point1.y); + browserCanvasContext.moveTo(point2.x, point2.y); + browserCanvasContext.moveTo(point3.x, point3.y); + browserCanvasContext.moveTo(point4.x, point4.y); + browserCanvasContext.closePath(); + + browserCanvasContext.fillStyle = progressBar.fillStyle; + browserCanvasContext.strokeStyle = progressBar.strokeStyle; + + browserCanvasContext.fill(); + browserCanvasContext.lineWidth = 1; + browserCanvasContext.stroke(); + } } \ No newline at end of file diff --git a/Storage.js b/Storage.js index 7ea0fef91..46d62d573 100644 --- a/Storage.js +++ b/Storage.js @@ -78,7 +78,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi currentValue: thisObject.fileCache.getFilesLoaded() } - thisObject.eventHandler.raiseEvent('Storage File Ready', event); + thisObject.eventHandler.raiseEvent('Storage File Loaded', event); if (event.currentValue === event.totalValue) { @@ -95,7 +95,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi currentValue: thisObject.fileCursorCache.getFilesLoaded() } - thisObject.eventHandler.raiseEvent('Storage File Ready', event); + thisObject.eventHandler.raiseEvent('Storage File Loaded', event); if (event.currentValue === event.totalValue) { @@ -112,7 +112,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi currentValue: 1 } - thisObject.eventHandler.raiseEvent('Storage File Ready', event); + thisObject.eventHandler.raiseEvent('Storage File Loaded', event); if (event.currentValue === event.totalValue) { diff --git a/TimelineChart.js b/TimelineChart.js index 509b71064..0408dc172 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -1,6 +1,8 @@  function newTimelineChart() { + const CONSOLE_LOG = false; + let activePlotters = []; let plotArea = newPlotArea(); @@ -114,41 +116,65 @@ function newTimelineChart() { function initializePlotter(pProductCard) { - let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.repo, pProductCard.product.plotter.moduleName); + /* Before Initializing a Plotter, we need the Storage it will use, loaded with the files it will initially need. */ - plotter.container.displacement.parentDisplacement = timelineChart.container.displacement; - plotter.container.zoom.parentZoom = timelineChart.container.zoom; - plotter.container.frame.parentFrame = timelineChart.container.frame; + let storage = newStorage(); - plotter.container.parentContainer = timelineChart.container; + /* - plotter.container.frame.width = timelineChart.container.frame.width * 1; - plotter.container.frame.height = timelineChart.container.frame.height * 1; + Before Initializing the Storage, we will put put the Product Card to listen to the events the storage will raise every time a file is loaded, + so that the UI can somehow show this. - plotter.container.frame.position.x = timelineChart.container.frame.width / 2 - plotter.container.frame.width / 2; - plotter.container.frame.position.y = timelineChart.container.frame.height / 2 - plotter.container.frame.height / 2; + */ - plotter.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onInizialized); + storage.eventHandler.listenToEvent('Storage File Loaded', pProductCard.onFileLoaded); - function onInizialized() { + storage.initialize(pProductCard.devTeam, pProductCard..bot, pProductCard.product, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onStorageInitialized) ; - console.log(pProductCard.product.plotter.devTeam + '->' + pProductCard.product.plotter.repo + '->' + pProductCard.product.plotter.moduleName + " Initialized. "); + function onStorageInitialized() { + + /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */ + + let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.repo, pProductCard.product.plotter.moduleName); + + plotter.container.displacement.parentDisplacement = timelineChart.container.displacement; + plotter.container.zoom.parentZoom = timelineChart.container.zoom; + plotter.container.frame.parentFrame = timelineChart.container.frame; + + plotter.container.parentContainer = timelineChart.container; + + plotter.container.frame.width = timelineChart.container.frame.width * 1; + plotter.container.frame.height = timelineChart.container.frame.height * 1; + + plotter.container.frame.position.x = timelineChart.container.frame.width / 2 - plotter.container.frame.width / 2; + plotter.container.frame.position.y = timelineChart.container.frame.height / 2 - plotter.container.frame.height / 2; + + plotter.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onPlotterInizialized); + + function onPlotterInizialized() { + + if (CONSOLE_LOG === true) { + + console.log(pProductCard.product.plotter.devTeam + '->' + pProductCard.product.plotter.repo + '->' + pProductCard.product.plotter.moduleName + " Initialized. "); + + } + + try { + plotter.positionAtDatetime(INITIAL_DATE); + } catch (err) { + // If the plotter does not implement this function its ok. + } + + let activePlotter = { + productCard: pProductCard, + plotter: plotter + }; + + /* Add the new Active Protter to the Array */ + + activePlotters.push(activePlotter); - try { - plotter.positionAtDatetime(INITIAL_DATE); - } catch (err) { - // If the plotter does not implement this function its ok. } - - let activePlotter = { - productCard: pProductCard, - plotter: plotter - }; - - /* Add the new Active Protter to the Array */ - - activePlotters.push(activePlotter); - } }