From 892437f6697957e3d7d14bb50dac95c05674c507 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 2 Mar 2018 18:30:33 +0100 Subject: [PATCH] Everything connected and implemented --- .vs/AAWebPlatform/v15/.suo | Bin 77824 -> 78336 bytes ProductCard.js | 76 +++++++++++++++++++++++++++++++++++- Storage.js | 6 +-- TimelineChart.js | 78 ++++++++++++++++++++++++------------- 4 files changed, 129 insertions(+), 31 deletions(-) diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo index c4514eca9cb626728d148d05cba44345d018fc7b..954f27362feff2b844ca2fd699d8436b25571ec4 100644 GIT binary patch delta 1847 zcmb`He@xVM7{|ZQ=e~E`!JXW3h=+n6Uq}g25tX!<0+K1Ah0%|dO*BhIGbPQvmh3P47dZTW-c2Yvqc{nzrSj(m!0a)^tfuulECo)ux+UeYV%0ANPEo z&*ypX`?=;`v-u};d+G30!!R7+Mm!#eF$iQIskug6?FxGiUtE`29s8PUc!O%9ANh(a z?t29l(NR)s7#=1wx6}tOAD~6tf*lPqffEG5954c;gF27{q&5u8b!K|`bp+l-@-Em3 zpb!KSxe#mtxF3uI$si5P1Y^P7Z8bsu#9f^&Qxqd1-G`PR@n%qkBJ&YAJl8WdFcQvE zAXN{-KFh71#p$xY9Z@4_0Xf(ZD6Y^V9AzO?mL9f+>>0lEK3XU*hTTWpMFj$>4)tJTBsuAa;X$KsA^K zL^Kg<444FDwtHdk1EpXV7!Pux$Tib5y#oGhPzgjG=`UK&1)|V=AX?UgDzE@N1h~{$ zODiF+Q%=~$?>QfjB{w^KefaGMAlVyjOLFyLUk}|Po66)HIBe((;G8vidVQdWxH9J> z+pi)OVI9usrAX;|*E}=~h4iM~WSOP`W?xvT{9>s7sHM4v+37J4@M? zH=&WhW@MAguO>E8K&1Rc55l($?yIFDZH#N13te zQ{{ z*=Lk}R@vXG_LJku;_T&qUHskW#BFcoL3BOw{8uT1Lj8Oy>5fz>;lhrtTk4VQu!hFN zjc#*2J+k8>E@l4fI*w=>xuS{`$6m_s%n#AoB(C_hl6y-^IyYs|7GHEMsb~SIb~}YK zIy3xqiH;UhlsN6Pg-P>`B}Rj>sxzKTWF9S`sDmdTe3I(9+^TIql}j0ZU$Fc4Jul{5 uJJwpa?cB!x`TX&&;oS4~gy6#sFXa2XH*D+5t~l4X@3HALa&4 zOr{T;(w>BFactv9QlrxZdPkNeGa_?y`oN~fWF}F9N6L#WNqKVi_a1I8{ZLk=5!D$$x zNH>0Hel{v~o5NpKPqCEG{3GQO4B&iP@g_5+c?i~&RSOYZ$Viq|V_#FvMRQhd7s0A2 z#2wseD#|sH=OwlfPZBH@xBpNiL2L*WpzFme~(CH##!PyKJJ|SOMZ4G;~4kpSJNhpO$ zh&mcgET6V0dL0J=H+VBersvm;s7nz_1!V;qA;yv%rc^%eYvZB!L9I-Wx_gcF6yw9V zo4~?ltgFfyHqk^93q@&?8kDHqs8VYZN=s6osNoZE?dRJJsgfT+G+2k{f;+{DU?-?; zlKPyK=&?(}zWF93wtTTtUsIU-#NW4;q1Tl!f?ZPv^<_!jAxFDB!n17ztk6z-+g2aO zNunGQ3wzQ`i7*%=tq$Sb_lrLExdqBa`PpyM)ToqELcbH=8;kB(Y{U;8n7ro3va1eM zhF#*w(e0q_kkof2^ncQhc+aRw3=TSjlpOE~pTji?!%)MNJ_W*5T%6XUKkj9vMcLJFGyaq8XJD1i zpQTy(nb1b9xGDOkHtymjXJScyQ)>P;bj|8RU32NU=%-cvcQN zGYxSUnBo!`X~hyR1UWXVK;U$s6uJy}V0RD)cjw!E_6vRQO%>GsaD8O^!bVR&UOKhr H?icQFoNF@N 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); - } }