diff --git a/Animation.js b/Animation.js index aec3a28ae..063725ada 100644 --- a/Animation.js +++ b/Animation.js @@ -34,7 +34,7 @@ function newAnimation () { thisObject.stop() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } }s } @@ -45,7 +45,7 @@ function newAnimation () { /* Nothing to do here yet. */ callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -56,7 +56,7 @@ function newAnimation () { animationLoop() // Inside this function the animation process is started, and at the same time it creates a loop. } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -67,7 +67,7 @@ function newAnimation () { window.cancelAnimationFrame(animationLoopHandle) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -78,7 +78,7 @@ function newAnimation () { callBackFunctions.set(key, callBack) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -89,7 +89,7 @@ function newAnimation () { callBackFunctions.delete(key) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -126,7 +126,7 @@ function newAnimation () { animationLoopHandle = window.requestAnimationFrame(animationLoop) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err.stack) } } } diff --git a/BottomSpace/ChartAspectRatio.js b/BottomSpace/ChartAspectRatio.js deleted file mode 100644 index 16b4ffe3d..000000000 --- a/BottomSpace/ChartAspectRatio.js +++ /dev/null @@ -1,113 +0,0 @@ - function newChartAspectRatio () { - let thisObject = { - aspectRatio: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = 50 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - - resize() - - container.isDraggeable = false - container.isClickeable = false - container.isWheeleable = true - - thisObject.aspectRatio = {} - - const INITIAL_Y_ASPECT_RATIO = 5 / 10 - const MIN_Y_ASPECT_RATIO = 1 / 10 - const MAX_Y_ASPECT_RATIO = 10 / 10 - - thisObject.aspectRatio.x = 1 - thisObject.aspectRatio.y = INITIAL_Y_ASPECT_RATIO - - canDrawIcon = false - - return thisObject - - function initialize () { - icon = new Image() - - icon.onload = onImageLoad - - function onImageLoad () { - canDrawIcon = true - } - - icon.src = window.canvasApp.urlPrefix + 'Images/Icons/chart-scale.png' - - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) - } - - function resize () { - container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width - container.frame.position.y = viewPort.visibleArea.bottomLeft.y - } - - function onMouseWheel (pDelta) { - if (viewPort.isMinZoom() === false) { return } // We only make this button to work at the min zoom level. - - if (pDelta < 0) { - pDelta = -0.1 - } else { - pDelta = 0.1 - } - - thisObject.aspectRatio.y = thisObject.aspectRatio.y + pDelta - thisObject.aspectRatio.y = Math.round(thisObject.aspectRatio.y * 100) / 100 - - if (thisObject.aspectRatio.y < MIN_Y_ASPECT_RATIO) { - thisObject.aspectRatio.y = MIN_Y_ASPECT_RATIO - } - - if (thisObject.aspectRatio.y > MAX_Y_ASPECT_RATIO) { - thisObject.aspectRatio.y = MAX_Y_ASPECT_RATIO - } - - thisObject.container.eventHandler.raiseEvent('Chart Aspect Ratio Changed', thisObject.aspectRatio) - } - - function getContainer (point) { - let container - - /* First we check if this point is inside this object UI. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw () { - thisObject.container.frame.draw(false, false) - - if (canDrawIcon === false) { return } - if (viewPort.isMinZoom() === false) { return } // We only show this button at the min zoom level. - - let breakpointsHeight = 15 - - let imageHeight = 15 - let imageWidth = 15 - - let imagePoint = { - x: 10, - y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight - } - - imagePoint = thisObject.container.frame.frameThisPoint(imagePoint) - - browserCanvasContext.drawImage(icon, imagePoint.x, imagePoint.y, imageWidth, imageHeight) - } - } diff --git a/Canvas.js b/Canvas.js index 4e6330e49..8ef7e6bf9 100644 --- a/Canvas.js +++ b/Canvas.js @@ -103,7 +103,7 @@ function newCanvas () { // IE 6/7/8 else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -138,7 +138,7 @@ function newCanvas () { viewPort.raiseEvents() // These events will impacts on objects just initialized. } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -182,7 +182,7 @@ function newCanvas () { /* Display some Error Page here. */ } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -211,17 +211,17 @@ function newCanvas () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -236,7 +236,7 @@ function newCanvas () { viewPort.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } } } @@ -267,7 +267,7 @@ function newCanvas () { e.preventDefault() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } } } @@ -354,7 +354,7 @@ function newCanvas () { viewPortBeingDragged = true } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } } @@ -420,7 +420,7 @@ function newCanvas () { return } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } } } @@ -449,7 +449,7 @@ function newCanvas () { browserCanvas.style.cursor = 'auto' } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } } } @@ -485,7 +485,7 @@ function newCanvas () { onMouseOver(event) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } } } @@ -510,7 +510,7 @@ function newCanvas () { container = thisObject.topSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -519,7 +519,7 @@ function newCanvas () { container = thisObject.bottomSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -528,7 +528,7 @@ function newCanvas () { container = thisObject.panelsSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -546,14 +546,14 @@ function newCanvas () { /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - container = thisObject.chartSpace.getContainer(point) + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } } } @@ -572,10 +572,12 @@ function newCanvas () { y: event.pageY - window.canvasApp.topMargin } + event.mousePosition = point + let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (panelContainer !== undefined && panelContainer.isWheelable === true) { - panelContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + panelContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -592,17 +594,17 @@ function newCanvas () { let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) - if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) { - bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + if (bottomContainer !== undefined && bottomContainer.isWheelable === true) { + bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } /* Finally we try the Chart Space. */ - let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }) + let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) - if (chartContainer !== undefined && chartContainer.isWheeleable === true) { - chartContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + if (chartContainer !== undefined && chartContainer.isWheelable === true) { + chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ @@ -611,7 +613,7 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } } } @@ -678,7 +680,7 @@ function newCanvas () { dragVector.downY = dragVector.upY } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } } } } diff --git a/CompetitionStorage.js b/CompetitionStorage.js index 727b2a383..aebec6a93 100644 --- a/CompetitionStorage.js +++ b/CompetitionStorage.js @@ -38,7 +38,7 @@ function newCompetitionStorage (pName) { thisObject.fileSequences = undefined } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -120,7 +120,7 @@ function newCompetitionStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -134,7 +134,7 @@ function newCompetitionStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -147,7 +147,7 @@ function newCompetitionStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Container.js b/Container.js index 76eb3357f..442957f08 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,6 @@ function newContainer () { - var container = { + let thisObject = { frame: undefined, displacement: undefined, eventHandler: undefined, @@ -9,24 +9,93 @@ function newContainer () { isClickeable: false, isWheelable: false, name: undefined, - initialize: initialize + initialize: initialize, + connectToParent: connectToParent, + isForThisPurpose: isForThisPurpose } - return container + let connectedToParentWidth = false + let connectedToParentHeight = false - function initialize () { - var frame = newFrame() - frame.initialize() - this.frame = frame - frame.container = container + return thisObject - var eventHandler = newEventHandler() - eventHandler.initialize() - eventHandler.name = container.name - this.eventHandler = eventHandler + function initialize (pName) { + thisObject.name = pName - var displacement = newDisplacement() - this.displacement = displacement - displacement.container = container + thisObject.frame = newFrame() + thisObject.frame.initialize() + thisObject.frame.containerName = pName + thisObject.frame.container = thisObject + + thisObject.eventHandler = newEventHandler() + thisObject.eventHandler.initialize() + thisObject.eventHandler.name = pName + + thisObject.displacement = newDisplacement() + thisObject.displacement.container = thisObject + thisObject.displacement.containerName = pName + } + + function connectToParent (parentContainer, onWidth, onHeight) { + connectedToParentWidth = onWidth + connectedToParentHeight = onHeight + + thisObject.displacement.parentDisplacement = parentContainer.displacement + thisObject.frame.parentFrame = parentContainer.frame + thisObject.parentContainer = parentContainer + thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + } + } + + function onParentDimmensionsChanged (event) { + let dimmensionsChanged = false + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + dimmensionsChanged = true + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + dimmensionsChanged = true + } + + if (dimmensionsChanged) { + thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) + } + } + + function onMouseOver (event) { + thisObject.eventHandler.raiseEvent('onMouseOver', event) + } + + function isForThisPurpose (purpose) { + if (purpose !== undefined) { + switch (purpose) { + case GET_CONTAINER_PURPOSE.MOUSE_OVER: + if (thisObject.detectMouseOver === true) { + return true + } + break + case GET_CONTAINER_PURPOSE.MOUSE_WHEEL: + if (thisObject.isWheelable === true) { + return true + } + break + case GET_CONTAINER_PURPOSE.MOUSE_CLICK: + if (thisObject.isClickeable === true) { + return true + } + break + default: { return false } + + } + } + return false } } diff --git a/Dashboard.js b/Dashboard.js index a7ec436b1..1adcdea84 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -3,7 +3,7 @@ let canvas let markets let ecosystem = newEcosystem() let INITIAL_ZOOM_LEVEL = -26 // This is the zoom level at the view port in which the APP starts. -let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let viewPort = newViewPort() function newDashboard () { @@ -46,7 +46,7 @@ function newDashboard () { setTimeout(delayedStart, DEBUG_START_UP_DELAY) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } } } @@ -69,7 +69,7 @@ function newDashboard () { canvas = newCanvas() canvas.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err.stack) } } } @@ -79,7 +79,7 @@ function newDashboard () { canvas.topSpace.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err.stack) } } } @@ -94,7 +94,7 @@ function newDashboard () { viewPort.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err.stack) } } } @@ -227,7 +227,7 @@ function newDashboard () { }) .catch(err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> Error fetching data from Teams Module.') } - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err.stack) } reject(err) }) }) @@ -261,10 +261,10 @@ function newDashboard () { callBack() }, err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> Error fetching data from Teams Module.') } - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) } } } } diff --git a/EventHandler.js b/EventHandler.js index 9a242b190..89f100d9e 100644 --- a/EventHandler.js +++ b/EventHandler.js @@ -28,6 +28,10 @@ function newEventHandler () { } function stopListening (pEventType, pHandler) { + if (pHandler === undefined) { + pHandler = 'Anonymous Function' + } + if (thisObject.name !== undefined && CONSOLE_LOG === true) { console.log('Event Handler named ' + thisObject.name + ' received a request to stop listening to an the event ' + pEventType + ' with this handler: ' + pHandler) } @@ -37,14 +41,24 @@ function newEventHandler () { let eventType = record[0] let handler = record[1] - if (pEventType === eventType && pHandler.toString() === handler.toString()) { - eventHandlers.splice(i, 1) + if (pHandler === 'Anonymous Function') { + if (pEventType === eventType) { + eventHandlers.splice(i, 1) - if (thisObject.name !== undefined && CONSOLE_LOG === true) { - console.log('Evethandler found and deleted.') + if (thisObject.name !== undefined && CONSOLE_LOG === true) { + console.log('Evethandler found and deleted.') + } + return } + } else { + if (pEventType === eventType && pHandler.toString() === handler.toString()) { + eventHandlers.splice(i, 1) - return + if (thisObject.name !== undefined && CONSOLE_LOG === true) { + console.log('Evethandler found and deleted.') + } + return + } } } } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 419e8213c..0f83cf7e8 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -74,7 +74,7 @@ function newFloatingLayer () { visibleFloatingObjects = [] dyingFloatingObjects = [] } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index b1e8c42fd..d3e2ce42e 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -43,7 +43,7 @@ function newNoteSets () { callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -296,11 +296,11 @@ function newNoteSets () { if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> noteSet.floatingNotes.length = ' + noteSet.floatingNotes.length) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err.stack) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -330,7 +330,7 @@ function newNoteSets () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err.stack) } } } } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 73c0baed5..de67bfca6 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -31,7 +31,7 @@ function newProfileBalls () { floatingLayer.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -43,7 +43,7 @@ function newProfileBalls () { callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Frame.js b/Frame.js index 7ae3e4f29..93a4627e0 100644 --- a/Frame.js +++ b/Frame.js @@ -241,7 +241,7 @@ function newFrame () { return true } - function isThisPointHere (point, outsideViewPort) { + function isThisPointHere (point, outsideViewPort, dontTransform) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport. /* We need not to modify the point received, so me make a copy of it. */ @@ -253,12 +253,13 @@ function newFrame () { /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ - - if (outsideViewPort === true) { - checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) - checkPoint = this.container.frame.unframeThisPoint(checkPoint) - } else { - checkPoint = unTransformThisPoint(checkPoint, frame.container) + if (dontTransform === false || dontTransform === undefined) { + if (outsideViewPort === true) { + checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) + checkPoint = this.container.frame.unframeThisPoint(checkPoint) + } else { + checkPoint = unTransformThisPoint(checkPoint, frame.container) + } } /* Now we check if the resulting point is whin the current Frame. */ diff --git a/Globals.js b/Globals.js index 08ed4c5b7..61cd669b2 100644 --- a/Globals.js +++ b/Globals.js @@ -36,6 +36,13 @@ UI_FONT = { }; FONT_ASPECT_RATIO = 0.45; +const MIN_ZOOM_LEVEL = -28.25 + +const GET_CONTAINER_PURPOSE = { + MOUSE_OVER: 1, + MOUSE_WHEEL: 2, + MOUSE_CLICK: 3 +} /* User Interface Panels */ @@ -43,7 +50,8 @@ UI_PANEL = { WIDTH: { SMALL: 100, NORMAL: 150, - LARGE: 350 + LARGE: 250, + X_LARGE: 350 }, HEIGHT: { SMALL: 65, @@ -171,8 +179,8 @@ const MAX_PLOTABLE_DATE = maxDate; We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space. */ -const CHART_SPACE_WIDTH = browserCanvas.width * 1000; -const CHART_SPACE_HEIGHT = browserCanvas.height * 100; +const TIME_MACHINE_WIDTH = browserCanvas.width * 1000; +const TIME_MACHINE_HEIGHT = browserCanvas.height * 100; function toRadians(angle) { return angle * (Math.PI / 180); diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 3834e118a..a6c97f8a5 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -38,7 +38,7 @@ exchange = pExchange market = pMarket - thisObject.container.name = exchange + ' ' + market.assetB + '/' + market.assetA + ' ' + 'Indicators' + thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA thisObject.container.frame.containerName = thisObject.container.name thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; @@ -55,6 +55,16 @@ panelTabButton.container.frame.parentFrame = thisObject.container.frame panelTabButton.initialize() + /* Get the current teams of the logged in user. */ + + let storedTeams = window.localStorage.getItem('userTeams') + let userTeams + let userTeam = {slug: ''} + if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { + userTeams = JSON.parse(storedTeams) + userTeam = userTeams[0] // Currently we assume a user can be at only one team. + } + /* First thing is to build the productCards array */ let devTeams = ecosystem.getTeams() @@ -66,6 +76,7 @@ let bot = devTeam.bots[j] if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { @@ -127,14 +138,15 @@ isInitialized = true } - function onMouseWheel (pDelta) { - if (pDelta > 0) { - pDelta = -1 + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta > 0) { + delta = -1 } else { - pDelta = 1 + delta = 1 } - firstVisibleCard = firstVisibleCard + pDelta + firstVisibleCard = firstVisibleCard + delta let availableSlots = visibleProductCards.length diff --git a/PlottersManager.js b/PlottersManager.js index 80f07e8ef..b73fbc704 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -23,12 +23,8 @@ function newPlottersManager () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container - - container.displacement.containerName = 'Plotter Manager' - container.frame.containerName = 'Plotter Manager' + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let initializationReady = false @@ -94,7 +90,7 @@ function newPlottersManager () { competitionPlotters.splice(i, 1) // Delete item from array. } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -115,36 +111,6 @@ function newPlottersManager () { initializeCompetitionPlotters(onCompetitionPlottersInitialized) - canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) - - function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y - - /* First the Product Plotters. */ - - for (let i = 0; i < productPlotters.length; i++) { - let productPlotter = productPlotters[i] - productPlotter.plotter.container.frame.width = thisObject.container.frame.width - productPlotter.plotter.container.frame.height = thisObject.container.frame.height - - if (productPlotter.plotter.recalculateScale !== undefined) { - productPlotter.plotter.recalculateScale() - } - } - - /* Then the competition plotters. */ - - for (let i = 0; i < competitionPlotters.length; i++) { - let competitionPlotter = competitionPlotters[i] - competitionPlotter.plotter.container.frame.width = thisObject.container.frame.width - competitionPlotter.plotter.container.frame.height = thisObject.container.frame.height - - if (competitionPlotter.plotter.recalculateScale !== undefined) { - competitionPlotter.plotter.recalculateScale() - } - } - } - function onCompetitionPlottersInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCompetitionPlottersInitialized -> Entering function.') } @@ -196,17 +162,17 @@ function newPlottersManager () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -255,13 +221,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -339,17 +299,17 @@ function newPlottersManager () { callBack(GLOBAL.DEFAULT_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -421,7 +381,7 @@ function newPlottersManager () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -503,13 +463,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -601,17 +555,17 @@ function newPlottersManager () { callBack(GLOBAL.DEFAULT_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/ProductCard.js b/ProductCard.js index 83e38a692..0dcdbd59c 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -1,917 +1,932 @@ - function newProductCard () { - const CONSOLE_LOG = false +function newProductCard () { + const CONSOLE_LOG = false - const MODULE_NAME = 'Product Card' - const INFO_LOG = false - const ERROR_LOG = true - const INTENSIVE_LOG = false - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME + const MODULE_NAME = 'Product Card' + const INFO_LOG = false + const ERROR_LOG = true + const INTENSIVE_LOG = false + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME - var thisObject = { - container: undefined, - draw: draw, - status: 'off', - devTeam: undefined, - bot: undefined, - product: undefined, - code: undefined, + var thisObject = { + container: undefined, + draw: draw, + status: 'off', + devTeam: undefined, + bot: undefined, + product: undefined, + code: undefined, - setDatetime: setDatetime, - setTimePeriod: setTimePeriod, + setDatetime: setDatetime, + setTimePeriod: setTimePeriod, - onMarketFileLoaded: onMarketFileLoaded, - onDailyFileLoaded: onDailyFileLoaded, - onSingleFileLoaded: onSingleFileLoaded, - onFileSequenceLoaded: onFileSequenceLoaded, + onMarketFileLoaded: onMarketFileLoaded, + onDailyFileLoaded: onDailyFileLoaded, + onSingleFileLoaded: onSingleFileLoaded, + onFileSequenceLoaded: onFileSequenceLoaded, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + } - let LOADING_FILL_STYLE = 'rgba(234, 143, 23, @Opacity)' - let LOADED_FILL_STYLE = 'rgba(45, 232, 28, @Opacity)' - let UNLOADED_FILL_STYLE = 'rgba(226, 226, 226, @Opacity)' + let LOADING_FILL_STYLE = 'rgba(234, 143, 23, @Opacity)' + let LOADED_FILL_STYLE = 'rgba(45, 232, 28, @Opacity)' + let UNLOADED_FILL_STYLE = 'rgba(226, 226, 226, @Opacity)' - let LOADING_STROKE_STYLE = 'rgba(234, 143, 23, @Opacity)' - let LOADED_STROKE_STYLE = 'rgba(150, 150, 150, @Opacity)' - let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, @Opacity)' + let LOADING_STROKE_STYLE = 'rgba(234, 143, 23, @Opacity)' + let LOADED_STROKE_STYLE = 'rgba(150, 150, 150, @Opacity)' + let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, @Opacity)' - let marketFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let marketFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let dailyFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let dailyFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let singleFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let singleFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let fileSequenceProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let fileSequenceProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let timePeriod = INITIAL_TIME_PERIOD + let datetime = INITIAL_DATE - /* TODO We are in a transition period in which bots and teams images might be located at different places. - What we are going to do then is to try to load them from both places and use the variable that finally gets an - image. */ + /* TODO We are in a transition period in which bots and teams images might be located at different places. + What we are going to do then is to try to load them from both places and use the variable that finally gets an + image. */ - /* This is the legacy image storage. */ + /* This is the legacy image storage. */ - let legacyTeamAvatar - let legacyTeamAvatarLoaded = false + let legacyTeamAvatar + let legacyTeamAvatarLoaded = false - /* TODO Temporary code */ - let legacyBotAvatar - let legacyBotAvatarLoaded = false + /* TODO Temporary code */ + let legacyBotAvatar + let legacyBotAvatarLoaded = false - /* Now the plotters images */ + /* Now the plotters images */ - let legacyPlotterBanner - let legacyPlotterBannerLoaded = false + let legacyPlotterBanner + let legacyPlotterBannerLoaded = false - /* We are transitioning towards this */ + /* We are transitioning towards this */ - let teamAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. - let teamAvatarLoaded = false + let teamAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. + let teamAvatarLoaded = false - /* TODO Temporary code */ - let botAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. - let botAvatarLoaded = false + /* TODO Temporary code */ + let botAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. + let botAvatarLoaded = false - /* Add an Event Handler */ + /* Add an Event Handler */ - thisObject.eventHandler = newEventHandler() - let imagesLoaded = 0 + thisObject.eventHandler = newEventHandler() + let imagesLoaded = 0 - return thisObject + let lastMouseOver = 0 // This variable is used to animate what happens while we are having a mounse over. - function initialize () { - /* Create this objects continer */ - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + return thisObject - var container = newContainer() - container.name = 'Product Card ' + thisObject.code - container.initialize() - container.isDraggeable = false - container.isClickeable = true - thisObject.container = container + function initialize () { + /* Create this objects continer */ + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Add information that will later be needed. */ + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME + thisObject.code) + thisObject.container.detectMouseOver = true + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = true - let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) - let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) - let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) + /* Add information that will later be needed. */ - thisObject.product.plotter.profilePicture = plotterModule.profilePicture - thisObject.product.plotter.module = plotterModule + let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) + let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) + let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) - /* Lets set the basic dimensions of this thisObject. */ + thisObject.product.plotter.profilePicture = plotterModule.profilePicture + thisObject.product.plotter.module = plotterModule - var position = { - x: 0, - y: 0 - } + /* Lets set the basic dimensions of this thisObject. */ - this.container.frame.position = position - this.container.frame.width = 330 - this.container.frame.height = 100 + var position = { + x: 0, + y: 0 + } - /* We retrieve the locally stored status of the Product */ + thisObject.container.frame.position = position + thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE - 20 + thisObject.container.frame.height = 100 - let storedValue = window.localStorage.getItem(thisObject.code) + /* We retrieve the locally stored status of the Product */ - if (storedValue !== null) { - thisObject.status = storedValue + let storedValue = window.localStorage.getItem(thisObject.code) - if (thisObject.status === PRODUCT_CARD_STATUS.ON) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } - } else { - /* + if (storedValue !== null) { + thisObject.status = storedValue - This happens the first time the app is run on a new browser. + if (thisObject.status === PRODUCT_CARD_STATUS.ON) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } + } else { + /* - We will start with all product off, except for the candles chart, since something needs to be shown and allow the user to position themselves - on the timeline. + This happens the first time the app is run on a new browser. - For the time being, we will hard-code the name of the bot we will turn on by default, since we dont see that change in the near future. + We will start with all product off, except for the candles chart, since something needs to be shown and allow the user to position themselves + on the timeline. - */ + For the time being, we will hard-code the name of the bot we will turn on by default, since we dont see that change in the near future. - const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' - - if (thisObject.code === DEFAULT_ON_PRODUCT) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } else { - changeStatusTo(PRODUCT_CARD_STATUS.OFF) - } - } - - /* Lets listen to our own events to react when we have a Mouse Click */ - - thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) - - /* WARNING THIS IS TEMPORARY CODE */ - - const LEGACY_TEAM = thisObject.devTeam.codeName - const REPO = thisObject.bot.repo - const PROFILE_PIC = thisObject.bot.profilePicture - - /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */ - - const PLOTTER_TEAM = thisObject.product.plotter.devTeam - const PLOTTER_REPO = thisObject.product.plotter.codeName - const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture - - legacyPlotterBanner = new Image() - legacyPlotterBanner.onload = onLegacyPlotterBanner - - function onLegacyPlotterBanner () { - legacyPlotterBannerLoaded = true - } - - legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC - - const TEAM = thisObject.devTeam.codeName.toLowerCase() - const BOT = thisObject.bot.codeName.toLowerCase() - - if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { - // This means this Team is a Lecay Team, still not at any Module. - - /* - Here we will download the images still at the legacy storage. - */ - - legacyTeamAvatar = new Image() - - legacyTeamAvatar.onload = onLegacyImageLoad - - function onLegacyImageLoad () { - legacyTeamAvatarLoaded = true - } - - legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' - - legacyBotAvatar = new Image() - legacyBotAvatar.onload = onLegacyImageLoadBot - - function onLegacyImageLoadBot () { - legacyBotAvatarLoaded = true - thisObject.bot.avatar = legacyBotAvatar - } - - legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC - } else { - /* - Here we will download the images of teams uploaded at the Teams Module. - There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases - nothing should happen. */ - teamAvatar = new Image() + const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' - teamAvatar.onload = onImageLoad + if (thisObject.code === DEFAULT_ON_PRODUCT) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } else { + changeStatusTo(PRODUCT_CARD_STATUS.OFF) + } + } - function onImageLoad () { - teamAvatarLoaded = true - } + /* Lets listen to our own events to react when we have a Mouse Click */ - teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) + thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - botAvatar = new Image() - botAvatar.onload = onImageLoadBot + /* WARNING THIS IS TEMPORARY CODE */ - function onImageLoadBot () { - botAvatarLoaded = true - thisObject.bot.avatar = botAvatar - } + const LEGACY_TEAM = thisObject.devTeam.codeName + const REPO = thisObject.bot.repo + const PROFILE_PIC = thisObject.bot.profilePicture - botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } - } - } + /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */ - function getContainer (point) { - var container + const PLOTTER_TEAM = thisObject.product.plotter.devTeam + const PLOTTER_REPO = thisObject.product.plotter.codeName + const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture - /* First we check if this point is inside this space. */ + legacyPlotterBanner = new Image() + legacyPlotterBanner.onload = onLegacyPlotterBanner - if (this.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ + function onLegacyPlotterBanner () { + legacyPlotterBannerLoaded = true + } - return undefined - } - } + legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC - function setDatetime (pDatetime) { - /* + const TEAM = thisObject.devTeam.codeName.toLowerCase() + const BOT = thisObject.bot.codeName.toLowerCase() - When the datetime changes from one day to another, this forces cursors to potentially load more files, thus we reset this counter and - get ready to receive events on files loaded. + if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { + // This means this Team is a Lecay Team, still not at any Module. - */ + /* + Here we will download the images still at the legacy storage. + */ - let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) - let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS) + legacyTeamAvatar = new Image() - datetime = pDatetime + legacyTeamAvatar.onload = onLegacyImageLoad - if (currentDate !== newDate) { - if (timePeriod <= _1_HOUR_IN_MILISECONDS) { - dailyFileProgressBar.animatedValue = 0 + function onLegacyImageLoad () { + legacyTeamAvatarLoaded = true + } - if (CONSOLE_LOG === true) { - console.log('ProductCard -> onDayChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) - } - } - } - } + legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' - function setTimePeriod (pTimePeriod) { - /* + legacyBotAvatar = new Image() + legacyBotAvatar.onload = onLegacyImageLoadBot - When the time period below or equal to 1 hour changes, this forces cursors to potentially load more files, thus we reset this counter and - get ready to receive events on files loaded. + function onLegacyImageLoadBot () { + legacyBotAvatarLoaded = true + thisObject.bot.avatar = legacyBotAvatar + } - */ + legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC + } else { + /* + Here we will download the images of teams uploaded at the Teams Module. + There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases + nothing should happen. + */ - if (timePeriod !== pTimePeriod) { - timePeriod = pTimePeriod + teamAvatar = new Image() - if (timePeriod <= _1_HOUR_IN_MILISECONDS) { - dailyFileProgressBar.animatedValue = 0 + teamAvatar.onload = onImageLoad - if (CONSOLE_LOG === true) { - console.log('ProductCard -> onTimePeriodChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) - } - } - } - } + function onImageLoad () { + teamAvatarLoaded = true + } - function onMarketFileLoaded (event) { - marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - marketFileProgressBar.fillStyle = LOADING_FILL_STYLE - marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) - if (marketFileProgressBar.value > 100) { marketFileProgressBar.value = 100 } + botAvatar = new Image() + botAvatar.onload = onImageLoadBot - if (CONSOLE_LOG === true) { - console.log('ProductCard onMarketFileLoaded Value = ' + marketFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + function onImageLoadBot () { + botAvatarLoaded = true + thisObject.bot.avatar = botAvatar + } - function onDailyFileLoaded (event) { - dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE - dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + } + } - if (dailyFileProgressBar.value > 100) { dailyFileProgressBar.value = 100 } + function getContainer (point) { + var container - if (CONSOLE_LOG === true) { - console.log('ProductCard onDailyFileLoaded Value = ' + dailyFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + /* First we check if this point is inside this space. */ - function onSingleFileLoaded (event) { - singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - singleFileProgressBar.fillStyle = LOADING_FILL_STYLE - singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + /* This point does not belong to this space. */ - if (singleFileProgressBar.value > 100) { singleFileProgressBar.value = 100 } + return undefined + } + } - if (CONSOLE_LOG === true) { - console.log('ProductCard onSingleFileLoaded Value = ' + singleFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + function setDatetime (pDatetime) { + /* - function onFileSequenceLoaded (event) { - fileSequenceProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - fileSequenceProgressBar.fillStyle = LOADING_FILL_STYLE - fileSequenceProgressBar.strokeStyle = LOADING_STROKE_STYLE + When the datetime changes from one day to another, this forces cursors to potentially load more files, thus we reset this counter and + get ready to receive events on files loaded. - if (fileSequenceProgressBar.value > 100) { fileSequenceProgressBar.value = 100 } + */ - if (CONSOLE_LOG === true) { - console.log('ProductCard onFileSequenceLoaded Value = ' + fileSequenceProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) + let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS) - function buttonPressed (event) { - switch (thisObject.status) { + datetime = pDatetime - case PRODUCT_CARD_STATUS.ON: + if (currentDate !== newDate) { + if (timePeriod <= _1_HOUR_IN_MILISECONDS) { + dailyFileProgressBar.animatedValue = 0 - changeStatusTo(PRODUCT_CARD_STATUS.OFF) + if (CONSOLE_LOG === true) { + console.log('ProductCard -> onDayChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) + } + } + } + } - marketFileProgressBar.animatedValue = 0 - marketFileProgressBar.value = 0 - marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + function setTimePeriod (pTimePeriod) { + /* - dailyFileProgressBar.animatedValue = 0 - dailyFileProgressBar.value = 0 - dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + When the time period below or equal to 1 hour changes, this forces cursors to potentially load more files, thus we reset this counter and + get ready to receive events on files loaded. - singleFileProgressBar.animatedValue = 0 - singleFileProgressBar.value = 0 - singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + */ - fileSequenceProgressBar.animatedValue = 0 - fileSequenceProgressBar.value = 0 - fileSequenceProgressBar.fillStyle = UNLOADED_FILL_STYLE - fileSequenceProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + if (timePeriod !== pTimePeriod) { + timePeriod = pTimePeriod - break + if (timePeriod <= _1_HOUR_IN_MILISECONDS) { + dailyFileProgressBar.animatedValue = 0 - case PRODUCT_CARD_STATUS.OFF: + if (CONSOLE_LOG === true) { + console.log('ProductCard -> onTimePeriodChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) + } + } + } + } - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + function onMarketFileLoaded (event) { + marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + marketFileProgressBar.fillStyle = LOADING_FILL_STYLE + marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - break + if (marketFileProgressBar.value > 100) { marketFileProgressBar.value = 100 } - } - } + if (CONSOLE_LOG === true) { + console.log('ProductCard onMarketFileLoaded Value = ' + marketFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - function changeStatusTo (pNewStatus) { - if (thisObject.status !== pNewStatus) { - thisObject.status = pNewStatus + function onDailyFileLoaded (event) { + dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE + dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - let eventData = thisObject + if (dailyFileProgressBar.value > 100) { dailyFileProgressBar.value = 100 } - thisObject.container.eventHandler.raiseEvent('Status Changed', eventData) + if (CONSOLE_LOG === true) { + console.log('ProductCard onDailyFileLoaded Value = ' + dailyFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - window.localStorage.setItem(thisObject.code, thisObject.status) - } - } + function onSingleFileLoaded (event) { + singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + singleFileProgressBar.fillStyle = LOADING_FILL_STYLE + singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - function draw () { - drawProductCard() - } + if (singleFileProgressBar.value > 100) { singleFileProgressBar.value = 100 } - function drawProductCard () { - /* + if (CONSOLE_LOG === true) { + console.log('ProductCard onSingleFileLoaded Value = ' + singleFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - Put images on the card. + function onFileSequenceLoaded (event) { + fileSequenceProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + fileSequenceProgressBar.fillStyle = LOADING_FILL_STYLE + fileSequenceProgressBar.strokeStyle = LOADING_STROKE_STYLE - */ + if (fileSequenceProgressBar.value > 100) { fileSequenceProgressBar.value = 100 } - const devTeamImageSize = 50 - const botImageSize = 50 - const plotterImageSize = { - width: 180, - height: 50 - } + if (CONSOLE_LOG === true) { + console.log('ProductCard onFileSequenceLoaded Value = ' + fileSequenceProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - /* First the Dev Team Profile Picture. */ + function buttonPressed (event) { + switch (thisObject.status) { - let teamImagePoint = { - x: 10, - y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - } + case PRODUCT_CARD_STATUS.ON: - teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) + changeStatusTo(PRODUCT_CARD_STATUS.OFF) - let teamImage + marketFileProgressBar.animatedValue = 0 + marketFileProgressBar.value = 0 + marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (legacyTeamAvatarLoaded === true) { - teamImage = legacyTeamAvatar - } + dailyFileProgressBar.animatedValue = 0 + dailyFileProgressBar.value = 0 + dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (teamAvatarLoaded === true) { - teamImage = teamAvatar - } + singleFileProgressBar.animatedValue = 0 + singleFileProgressBar.value = 0 + singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (teamImage !== undefined) { - if (teamImage.naturalHeight !== 0) { - /* The image is rounded before being displayed. */ + fileSequenceProgressBar.animatedValue = 0 + fileSequenceProgressBar.value = 0 + fileSequenceProgressBar.fillStyle = UNLOADED_FILL_STYLE + fileSequenceProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(teamImagePoint.x + devTeamImageSize / 2, teamImagePoint.y + devTeamImageSize / 2, devTeamImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, devTeamImageSize, devTeamImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(teamImagePoint.x, teamImagePoint.y, devTeamImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() - } - } + break - /* Second the Bot's Profile Picture. */ + case PRODUCT_CARD_STATUS.OFF: - if (thisObject.bot.profilePicture !== undefined) { - let botImagePoint = { - x: thisObject.container.frame.width - botImageSize / 2 - 40, - y: thisObject.container.frame.height / 2 - botImageSize / 2 - } + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) + break - let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture + } + } - /* TODO Temporary code */ - let botImage + function onMouseOver (event) { + lastMouseOver = 25 + } - botImage = thisObject.bot.avatar + function changeStatusTo (pNewStatus) { + if (thisObject.status !== pNewStatus) { + thisObject.status = pNewStatus - if (botImage !== undefined) { - if (botImage.naturalHeight !== 0) { - /* The image is rounded before being displayed. */ + let eventData = thisObject - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(botImagePoint.x + botImageSize / 2, botImagePoint.y + botImageSize / 2, botImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, botImageSize, botImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(botImagePoint.x, botImagePoint.y, botImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() - } - } - } + thisObject.container.eventHandler.raiseEvent('Status Changed', eventData) - /* Third the Plotter's Profile Picture. */ + window.localStorage.setItem(thisObject.code, thisObject.status) + } + } - if (thisObject.product.plotter.profilePicture !== undefined) { - let plotterImagePoint = { - x: thisObject.container.frame.width / 2 - plotterImageSize.width / 2, - y: thisObject.container.frame.height / 2 - plotterImageSize.height / 2 - } + function draw () { + drawProductCard() + } - plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + function drawProductCard () { + /* - let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture - let plotterImage = legacyPlotterBanner + Put images on the card. - if (plotterImage !== undefined) { - if (plotterImage.naturalHeight !== 0) { - browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) - } - } - } + */ - drawProductLoadStatus() + const devTeamImageSize = 20 + const botImageSize = 20 + const plotterImageSize = { + width: 180, + height: 50 + } - function drawProductLoadStatus () { - let offFillStyle = 'rgba(' + UI_COLOR.RED + ', 0.20)' - let onFillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.20)' - let loadingFillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)' + lastMouseOver-- // Animating the mouse onMouseOver - switch (thisObject.status) { + if (lastMouseOver > 0) { + /* First the Dev Team Profile Picture. */ - case PRODUCT_CARD_STATUS.ON: - browserCanvasContext.fillStyle = onFillStyle - break + let teamImagePoint = { + x: 2, + y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 + } - case PRODUCT_CARD_STATUS.OFF: - browserCanvasContext.fillStyle = offFillStyle - break + teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) - case PRODUCT_CARD_STATUS.LOADING: - browserCanvasContext.fillStyle = loadingFillStyle - break + let teamImage - } + if (legacyTeamAvatarLoaded === true) { + teamImage = legacyTeamAvatar + } - let centerPoint = { - x: thisObject.container.frame.width / 2, - y: thisObject.container.frame.height / 2 - 13 - } + if (teamAvatarLoaded === true) { + teamImage = teamAvatar + } - let point1 = { - x: centerPoint.x - plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 - 7 - } + if (teamImage !== undefined) { + if (teamImage.naturalHeight !== 0) { + /* The image is rounded before being displayed. */ - let point2 = { - x: centerPoint.x + plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 - 7 - } + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(teamImagePoint.x + devTeamImageSize / 2, teamImagePoint.y + devTeamImageSize / 2, devTeamImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, devTeamImageSize, devTeamImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(teamImagePoint.x, teamImagePoint.y, devTeamImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } - let point3 = { - x: centerPoint.x + plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 + 7 - } + /* Second the Bot's Profile Picture. */ - let point4 = { - x: centerPoint.x - plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 + 7 - } + if (thisObject.bot.profilePicture !== undefined) { + let botImagePoint = { + x: thisObject.container.frame.width - botImageSize / 2 - 8, + y: thisObject.container.frame.height / 2 - botImageSize / 2 + } - /* Now the transformations. */ + botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + /* TODO Temporary code */ + let botImage - browserCanvasContext.fill() + botImage = thisObject.bot.avatar - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - } + if (botImage !== undefined) { + if (botImage.naturalHeight !== 0) { + /* The image is rounded before being displayed. */ - /* - print the text - */ + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(botImagePoint.x + botImageSize / 2, botImagePoint.y + botImageSize / 2, botImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, botImageSize, botImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(botImagePoint.x, botImagePoint.y, botImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } + } + } - let labelPoint - let fontSize = 10 + /* Third the Plotter's Profile Picture. */ + + if (thisObject.product.plotter.profilePicture !== undefined) { + let plotterImagePoint = { + x: thisObject.container.frame.width / 2 - plotterImageSize.width / 2, + y: thisObject.container.frame.height / 2 - plotterImageSize.height / 2 + } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + + let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture + let plotterImage = legacyPlotterBanner - let label + if (plotterImage !== undefined) { + if (plotterImage.naturalHeight !== 0) { + browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) + } + } + } - /* devTeam */ + drawProductLoadStatus() - label = thisObject.devTeam.displayName + function drawProductLoadStatus () { + let offFillStyle = 'rgba(' + UI_COLOR.RED + ', 0.20)' + let onFillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.20)' + let loadingFillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)' - labelPoint = { - x: 10 + devTeamImageSize / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 - } + switch (thisObject.status) { - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + case PRODUCT_CARD_STATUS.ON: + browserCanvasContext.fillStyle = onFillStyle + break - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + case PRODUCT_CARD_STATUS.OFF: + browserCanvasContext.fillStyle = offFillStyle + break - /* bot */ + case PRODUCT_CARD_STATUS.LOADING: + browserCanvasContext.fillStyle = loadingFillStyle + break - label = thisObject.bot.displayName + } - labelPoint = { - x: thisObject.container.frame.width - 40 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 - } + let centerPoint = { + x: thisObject.container.frame.width / 2, + y: thisObject.container.frame.height / 2 - 13 + } - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + let point1 = { + x: centerPoint.x - plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 - 7 + } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + let point2 = { + x: centerPoint.x + plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 - 7 + } - /* product */ + let point3 = { + x: centerPoint.x + plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 + 7 + } - fontSize = 10 + let point4 = { + x: centerPoint.x - plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 + 7 + } - label = thisObject.product.displayName + /* Now the transformations. */ - labelPoint = { - x: 65, - y: thisObject.container.frame.height / 2 + 15 - } + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - labelPoint = { - x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 5 - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + browserCanvasContext.fill() - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + } - /* ------------------- Progress Bars -------------------------- */ + /* + print the text + */ - const ANIMATED_INCREMENT = 5 - const OPACITY_INCREMENT = 0.05 - const OPACITY_MIN = 0.1 + let labelPoint + let fontSize = 10 - let point1 - let point2 - let point3 - let point4 + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - /* We draw here the Market Progress Bar. */ + let label - /* Animate */ + if (lastMouseOver > 0) { + /* devTeam */ - if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) { - marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT - marketFileProgressBar.opacity = marketFileProgressBar.opacity + OPACITY_INCREMENT - } + label = thisObject.devTeam.displayName + if (label.length > 10) { label = label.substring(1, 8) + '...' } - if (marketFileProgressBar.animatedValue >= 100) { - marketFileProgressBar.animatedValue = 100 + labelPoint = { + x: 2 + devTeamImageSize / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 + } - marketFileProgressBar.opacity = marketFileProgressBar.opacity - OPACITY_INCREMENT - if (marketFileProgressBar.opacity < OPACITY_MIN) { marketFileProgressBar.opacity = OPACITY_MIN } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - marketFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) - marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* bot */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 1 - } + label = thisObject.bot.displayName + if (label.length > 10) { label = label.substring(1, 8) + '...' } - point2 = { - x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 1 - } + labelPoint = { + x: thisObject.container.frame.width - 8 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 + } - point3 = { - x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 3 - } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - point4 = { - x: 0, - y: thisObject.container.frame.height - 3 - } + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } - /* Now the transformations. */ + /* product */ - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + fontSize = 10 - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + label = thisObject.product.displayName - browserCanvasContext.fillStyle = marketFileProgressBar.fillStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = marketFileProgressBar.strokeStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) + labelPoint = { + x: 65, + y: thisObject.container.frame.height / 2 + 15 + } - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() + labelPoint = { + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 20 + } - /* We draw here the Daily Progress Bar. */ + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - /* Animate */ + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) { - dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT - dailyFileProgressBar.opacity = dailyFileProgressBar.opacity + OPACITY_INCREMENT - } + /* ------------------- Progress Bars -------------------------- */ - if (dailyFileProgressBar.animatedValue >= 100) { - dailyFileProgressBar.animatedValue = 100 + const ANIMATED_INCREMENT = 5 + const OPACITY_INCREMENT = 0.05 + const OPACITY_MIN = 0.1 - dailyFileProgressBar.opacity = dailyFileProgressBar.opacity - OPACITY_INCREMENT - if (dailyFileProgressBar.opacity < OPACITY_MIN) { dailyFileProgressBar.opacity = OPACITY_MIN } + let point1 + let point2 + let point3 + let point4 - dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + /* We draw here the Market Progress Bar. */ - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* Animate */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 4 - } + if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) { + marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT + marketFileProgressBar.opacity = marketFileProgressBar.opacity + OPACITY_INCREMENT + } - point2 = { - x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 4 - } + if (marketFileProgressBar.animatedValue >= 100) { + marketFileProgressBar.animatedValue = 100 - point3 = { - x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 6 - } + marketFileProgressBar.opacity = marketFileProgressBar.opacity - OPACITY_INCREMENT + if (marketFileProgressBar.opacity < OPACITY_MIN) { marketFileProgressBar.opacity = OPACITY_MIN } - point4 = { - x: 0, - y: thisObject.container.frame.height - 6 - } + marketFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) + marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) - /* Now the transformations. */ + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = { + x: 0, + y: thisObject.container.frame.height - 1 + } - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + point2 = { + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 1 + } - browserCanvasContext.fillStyle = dailyFileProgressBar.fillStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = dailyFileProgressBar.strokeStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + point3 = { + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 3 + } - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() + point4 = { + x: 0, + y: thisObject.container.frame.height - 3 + } - /* We draw here the Single File Progress Bar. */ + /* Now the transformations. */ - /* Animate */ + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) { - singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT - singleFileProgressBar.opacity = singleFileProgressBar.opacity + OPACITY_INCREMENT - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - if (singleFileProgressBar.animatedValue >= 100) { - singleFileProgressBar.animatedValue = 100 + browserCanvasContext.fillStyle = marketFileProgressBar.fillStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = marketFileProgressBar.strokeStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) - singleFileProgressBar.opacity = singleFileProgressBar.opacity - OPACITY_INCREMENT - if (singleFileProgressBar.opacity < OPACITY_MIN) { singleFileProgressBar.opacity = OPACITY_MIN } + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() - singleFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) - singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + /* We draw here the Daily Progress Bar. */ - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* Animate */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 7 - } + if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) { + dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT + dailyFileProgressBar.opacity = dailyFileProgressBar.opacity + OPACITY_INCREMENT + } - point2 = { - x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 7 - } + if (dailyFileProgressBar.animatedValue >= 100) { + dailyFileProgressBar.animatedValue = 100 - point3 = { - x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 9 - } + dailyFileProgressBar.opacity = dailyFileProgressBar.opacity - OPACITY_INCREMENT + if (dailyFileProgressBar.opacity < OPACITY_MIN) { dailyFileProgressBar.opacity = OPACITY_MIN } - point4 = { - x: 0, - y: thisObject.container.frame.height - 9 - } + dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - /* Now the transformations. */ + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = { + x: 0, + y: thisObject.container.frame.height - 4 + } - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + point2 = { + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 4 + } - browserCanvasContext.fillStyle = singleFileProgressBar.fillStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = singleFileProgressBar.strokeStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) - - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - - /* We draw here the File Sequence Progress Bar. */ + point3 = { + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 6 + } - /* Animate */ - - if (fileSequenceProgressBar.animatedValue < fileSequenceProgressBar.value) { - fileSequenceProgressBar.animatedValue = fileSequenceProgressBar.animatedValue + ANIMATED_INCREMENT - fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity + OPACITY_INCREMENT - } + point4 = { + x: 0, + y: thisObject.container.frame.height - 6 + } - if (fileSequenceProgressBar.animatedValue >= 100) { - fileSequenceProgressBar.animatedValue = 100 + /* Now the transformations. */ - fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity - OPACITY_INCREMENT - if (fileSequenceProgressBar.opacity < OPACITY_MIN) { fileSequenceProgressBar.opacity = OPACITY_MIN } + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - fileSequenceProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - fileSequenceProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + browserCanvasContext.fillStyle = dailyFileProgressBar.fillStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = dailyFileProgressBar.strokeStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - point1 = { - x: 0, - y: thisObject.container.frame.height - 10 - } + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() - point2 = { - x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 10 - } + /* We draw here the Single File Progress Bar. */ - point3 = { - x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 11 - } + /* Animate */ - point4 = { - x: 0, - y: thisObject.container.frame.height - 11 - } + if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) { + singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT + singleFileProgressBar.opacity = singleFileProgressBar.opacity + OPACITY_INCREMENT + } + + if (singleFileProgressBar.animatedValue >= 100) { + singleFileProgressBar.animatedValue = 100 + + singleFileProgressBar.opacity = singleFileProgressBar.opacity - OPACITY_INCREMENT + if (singleFileProgressBar.opacity < OPACITY_MIN) { singleFileProgressBar.opacity = OPACITY_MIN } + + singleFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } + + point1 = { + x: 0, + y: thisObject.container.frame.height - 7 + } + + point2 = { + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 7 + } + + point3 = { + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 9 + } + + point4 = { + x: 0, + y: thisObject.container.frame.height - 9 + } + + /* 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.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = singleFileProgressBar.fillStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = singleFileProgressBar.strokeStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) + + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + + /* We draw here the File Sequence Progress Bar. */ + + /* Animate */ + + if (fileSequenceProgressBar.animatedValue < fileSequenceProgressBar.value) { + fileSequenceProgressBar.animatedValue = fileSequenceProgressBar.animatedValue + ANIMATED_INCREMENT + fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity + OPACITY_INCREMENT + } + + if (fileSequenceProgressBar.animatedValue >= 100) { + fileSequenceProgressBar.animatedValue = 100 + + fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity - OPACITY_INCREMENT + if (fileSequenceProgressBar.opacity < OPACITY_MIN) { fileSequenceProgressBar.opacity = OPACITY_MIN } + + fileSequenceProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + fileSequenceProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } + + point1 = { + x: 0, + y: thisObject.container.frame.height - 10 + } + + point2 = { + x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 10 + } + + point3 = { + x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 11 + } + + point4 = { + x: 0, + y: thisObject.container.frame.height - 11 + } + + /* 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.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = fileSequenceProgressBar.fillStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = fileSequenceProgressBar.strokeStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + } +} - /* 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.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() - - browserCanvasContext.fillStyle = fileSequenceProgressBar.fillStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = fileSequenceProgressBar.strokeStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - } - } diff --git a/ProductStorage.js b/ProductStorage.js index eca08a096..93bc938fd 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -77,7 +77,7 @@ function newProductStorage (pName) { thisObject.fileSequences = undefined } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -202,7 +202,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -257,7 +257,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -309,7 +309,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -361,7 +361,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -378,13 +378,13 @@ function newProductStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index 2b695bb43..3ceb3bd35 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -19,13 +19,10 @@ container.isDraggeable = false container.isClickeable = true - let rigthScale - return thisObject function initialize () { - rigthScale = newRigthScale() - rigthScale.initialize() + } function getContainer (point) { @@ -47,6 +44,8 @@ } function draw (container, timeLineCoordinateSystem) { + return // not for now + rightScaleBackground() leftScaleBackground() @@ -56,7 +55,7 @@ const basePeriod = { x: 8 * 60 * 60 * 1000, - y: timeLineCoordinateSystem.max.y / 1000 / canvas.bottomSpace.chartAspectRatio.aspectRatio.y + y: timeLineCoordinateSystem.max.y / 1000 } let period = { @@ -416,6 +415,8 @@ } function plotGrid (period) { + return + let periodWidth = period.x let periodHeight = period.y diff --git a/Scales/RightScale.js b/Scales/RightScale.js index c37f63994..c88b12ceb 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -1,39 +1,78 @@ function newRigthScale () { + const MODULE_NAME = 'Right Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + let thisObject = { container: undefined, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + heightPercentage: 100 } + const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = RIGHT_MARGIN thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y - container.frame.position.x = viewPort.visibleArea.bottomRight.x - container.frame.position.y = TOP_SPACE_HEIGHT + thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x + thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - container.isDraggeable = false - container.isClickeable = false - container.isWheeleable = true + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } return thisObject function initialize () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.heightPercentage) { + thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) + } + + let event = {} + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + }) } - function onMouseWheel (pDelta) { - if (pDelta < 0) { - pDelta = -0.1 + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE + if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } } else { - pDelta = 0.1 + thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE + if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } } + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } function getContainer (point) { @@ -42,7 +81,7 @@ /* First we check if this point is inside this object UI. */ if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container + return thisObject.container } else { /* This point does not belong to this space. */ @@ -51,6 +90,55 @@ } function draw () { + drawBackground() + drawLabel() + } + function drawBackground () { + const RIGHT_MARGIN = 50 + + /* We will paint some transparent background here. */ + + let opacity = '0.95' + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + + browserCanvasContext.closePath() + + browserCanvasContext.fill() + } + + function drawLabel () { + let label = '6000' + let fontSize = 10 + + let ratePoint = { + x: 0, + y: mouse.position.y + } + + // getRateFromPoint(ratePoint) + + let labelPoint = { + x: viewPort.visibleArea.topRight.x + 5, + y: mouse.position.y - fontSize / 2 + 1 + } + + let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + browserCanvasContext.fill() + + browserCanvasContext.closePath() + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js new file mode 100644 index 000000000..5e8dba0f1 --- /dev/null +++ b/Scales/TimeScale.js @@ -0,0 +1,84 @@ +function newTimeScale () { + const MODULE_NAME = 'Time Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + lenghtPercentage: undefined + } + + const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 + const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x + thisObject.container.frame.height = 100 + + thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x + thisObject.container.frame.position.y = TOP_SPACE_HEIGHT + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + return thisObject + + function initialize () { + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.lenghtPercentage) { + thisObject.lenghtPercentage = LENGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.lenghtPercentage = JSON.parse(thisObject.lenghtPercentage) + } + + let event = {} + event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + } + + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.lenghtPercentage = thisObject.lenghtPercentage - STEP_SIZE + if (thisObject.lenghtPercentage < STEP_SIZE) { thisObject.lenghtPercentage = STEP_SIZE } + } else { + thisObject.lenghtPercentage = thisObject.lenghtPercentage + STEP_SIZE + if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } + } + + event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) + } + + function getContainer (point) { + let container + + /* First we check if this point is inside this object UI. */ + + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + + } +} diff --git a/Scales/topScale.js b/Scales/topScale.js deleted file mode 100644 index bfe552c39..000000000 --- a/Scales/topScale.js +++ /dev/null @@ -1,56 +0,0 @@ -function newRigthScale () { - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - const RIGHT_MARGIN = 50 - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = RIGHT_MARGIN - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y - - container.frame.position.x = viewPort.visibleArea.bottomRight.x - container.frame.position.y = TOP_SPACE_HEIGHT - - container.isDraggeable = false - container.isClickeable = false - container.isWheeleable = true - - return thisObject - - function initialize () { - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - } - - function onMouseWheel (pDelta) { - if (pDelta < 0) { - pDelta = -0.1 - } else { - pDelta = 0.1 - } - } - - function getContainer (point) { - let container - - /* First we check if this point is inside this object UI. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw () { - - } -} diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 6a206873c..9121a5356 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -2,7 +2,6 @@ function newBottomSpace () { var thisObject = { deleteTradingHistory: undefined, - chartAspectRatio: undefined, container: undefined, draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -23,9 +22,6 @@ function newBottomSpace () { thisObject.deleteTradingHistory = newDeleteTradingHistory() thisObject.deleteTradingHistory.initialize() - thisObject.chartAspectRatio = newChartAspectRatio() - thisObject.chartAspectRatio.initialize() - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) } @@ -43,11 +39,6 @@ function newBottomSpace () { container = thisObject.deleteTradingHistory.getContainer(point) if (container !== undefined) { return container } - container = thisObject.chartAspectRatio.getContainer(point) - if (container !== undefined) { return container } - - /* The point does not belong to any inner container, so we return the current container. */ - return thisObject.container } @@ -56,7 +47,6 @@ function newBottomSpace () { drawBackground() thisObject.deleteTradingHistory.draw() - thisObject.chartAspectRatio.draw() } function drawBackground () { diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index b047ad9ae..80b0c838e 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -23,20 +23,10 @@ function newChartSpace () { finalize: finalize } - var container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = CHART_SPACE_WIDTH - thisObject.container.frame.height = CHART_SPACE_HEIGHT - - container.displacement.containerName = 'Chart Space' - container.frame.containerName = 'Chart Space' - - container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 - - container.isDraggeable = false + thisObject.container.isDraggeable = false return thisObject @@ -49,7 +39,7 @@ function newChartSpace () { timeMachine.finalize() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -63,16 +53,10 @@ function newChartSpace () { var timeMachine = newTimeMachine() - timeMachine.container.displacement.parentDisplacement = this.container.displacement - timeMachine.container.frame.parentFrame = this.container.frame - - timeMachine.container.parentContainer = this.container + // timeMachine.container.connectToParent(thisObject.container, true, true) /* We make the time machine a little bit smaller than the current space. */ - timeMachine.container.frame.width = this.container.frame.width * 1 - timeMachine.container.frame.height = this.container.frame.height * 1 - timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 @@ -106,7 +90,7 @@ function newChartSpace () { } function draw () { - thisObject.container.frame.draw(false, false) + // thisObject.container.frame.draw(false, false) for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] @@ -114,7 +98,7 @@ function newChartSpace () { } } - function getContainer (point) { + function getContainer (point, purpose) { if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } let container @@ -122,17 +106,13 @@ function newChartSpace () { /* Now we see which is the inner most container that has it */ for (var i = 0; i < this.timeMachines.length; i++) { - container = this.timeMachines[i].getContainer(point) - + container = this.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container + if (container.isForThisPurpose(purpose)) { + return container + } } } - - /* The point does not belong to any inner container, so we return the current container. */ - return this.container } } diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 6e1a22446..0e0010638 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -25,7 +25,7 @@ function newFloatingSpace () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index cd203c8ae..5378671d2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -126,17 +126,17 @@ function newPanelsSpace () { so panels overlapping others are picked firt although they are drawn last. */ + if (thisObject.panels !== undefined) { + for (var i = thisObject.panels.length - 1; i >= 0; i--) { + container = thisObject.panels[i].getContainer(point) - for (var i = thisObject.panels.length - 1; i >= 0; i--) { - container = thisObject.panels[i].getContainer(point) + if (container !== undefined) { + /* We found an inner container which has the point. We return it. */ - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container + return container + } } } - /* The point does not belong to any inner container, so we return the current container. */ return thisObject.container diff --git a/SplashScreen.js b/SplashScreen.js index 0697ad560..78ea7d85a 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -100,7 +100,7 @@ function newSplashScreen () { /* Second the % of Advance. */ let label = '' + Math.trunc(stepsInitializationCounter) + ' %' - stepsInitializationCounter = stepsInitializationCounter + 0.1 + stepsInitializationCounter = stepsInitializationCounter + 0.5 if (stepsInitializationCounter > 99) { splashScreenNeeded = false diff --git a/TimeMachine.js b/TimeMachine.js index 492397d7d..75e11f84a 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -25,18 +25,24 @@ function newTimeMachine () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = true - container.displacement.containerName = 'Time Machine' - container.frame.containerName = 'Time Machine' + thisObject.container.frame.width = TIME_MACHINE_WIDTH + thisObject.container.frame.height = TIME_MACHINE_HEIGHT + + thisObject.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... - // ... also to request a reference to the object for the cases we need it. + // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 + let timeScale + let rigthScale + return thisObject function finalize () { @@ -48,32 +54,28 @@ function newTimeMachine () { chart.finalize() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } function initialize (callBackFunction) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Each Time Machine has a Control Panel. */ + /* Each Time Machine has a Control Panel. */ let panelOwner = 'Global' controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ + /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 - timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y + timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position @@ -83,11 +85,7 @@ function newTimeMachine () { timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized) function onDefaultInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') } - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') } - callBackFunction(err) return } @@ -97,6 +95,26 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) + /* Each Time Machine has a Time Scale and a Right Scale. */ + + timeScale = newTimeScale() + + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + }) + + timeScale.initialize() + + rigthScale = newRigthScale() + + rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + }) + + rigthScale.initialize() + initializeTheRest() } @@ -131,13 +149,9 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 - timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y + timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position @@ -172,33 +186,46 @@ function newTimeMachine () { } function draw () { - this.container.frame.draw(false, false) + // this.container.frame.draw(false, false) for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] chart.draw() } + + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } } - function getContainer (point) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } - + function getContainer (point, purpose) { let container - /* Now we see which is the inner most container that has it */ - - for (let i = 0; i < this.charts.length; i++) { - container = this.charts[i].getContainer(point) - + if (timeScale !== undefined) { + container = timeScale.getContainer(point) if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container + if (container.isForThisPurpose(purpose)) { + return container + } } } - /* The point does not belong to any inner container, so we return the current container. */ + if (rigthScale !== undefined) { + container = rigthScale.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } + for (let i = 0; i < this.charts.length; i++) { + container = this.charts[i].getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } return this.container } } diff --git a/TimelineChart.js b/TimelineChart.js index 3058a650d..da21b21be 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -21,14 +21,11 @@ finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.detectMouseOver = true - container.displacement.containerName = 'Timeline Chart' - container.frame.containerName = 'Timeline Chart' - - let chartGrid + // let chartGrid let breakpointsBar let initializationReady = false @@ -59,7 +56,7 @@ plotterManager.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -67,6 +64,15 @@ try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { + recalculateScale() + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) + }) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) + /* We load the logow we will need for the background. */ exchange = pExchange market = pMarket @@ -110,16 +116,15 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - chartGrid = newChartGrid() - chartGrid.initialize() + // chartGrid = newChartGrid() + // chartGrid.initialize() breakpointsBar = newBreakpointsBar() - breakpointsBar.initialize(container, timeLineCoordinateSystem) + breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) recalculateScale() - // moveViewPortToCurrentDatetime(); - moveToUserPosition(container, timeLineCoordinateSystem) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD datetime = INITIAL_DATE @@ -132,13 +137,7 @@ plotterManager = newPlottersManager() - plotterManager.container.displacement.parentDisplacement = thisObject.container.displacement - plotterManager.container.frame.parentFrame = thisObject.container.frame - - plotterManager.container.parentContainer = thisObject.container - - plotterManager.container.frame.width = thisObject.container.frame.width - plotterManager.container.frame.height = thisObject.container.frame.height + plotterManager.container.connectToParent(thisObject.container, true, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 @@ -160,15 +159,8 @@ callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) return } - - canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) - - function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y - recalculateScale() - } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -189,7 +181,7 @@ recalculateCurrentDatetime() - saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) } } @@ -212,7 +204,7 @@ if (initializationReady === true) { if (thisObject.container.frame.isInViewPort()) { recalculateCurrentDatetime() - saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) } } } @@ -252,7 +244,7 @@ let container - container = chartGrid.getContainer(point) + // container = chartGrid.getContainer(point) if (container !== undefined) { return container } @@ -322,7 +314,7 @@ if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() - chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) plotterManager.draw() @@ -469,34 +461,4 @@ } } } - - function moveViewPortToCurrentDatetime () { - if (INFO_LOG === true) { logger.write('[INFO] moveViewPortToCurrentDatetime -> Entering function.') } - - let targetPoint = { - x: datetime.valueOf(), - y: 0 // we wont touch the y axis here. - } - - /* Lets put this point in the coordinate system of the viewPort */ - - targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint) - targetPoint = transformThisPoint(targetPoint, thisObject.container) - - /* Lets get the point on the viewPort coordinate system of the center of the visible screen */ - - let center = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 - } - - /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ - - let displaceVector = { - x: center.x - targetPoint.x, - y: 0 - } - - viewPort.displace(displaceVector) - } } diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 748b40ea7..bca896575 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -1,5 +1,11 @@ function newLogin () { + const MODULE_NAME = 'Login' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + let thisObject = { container: undefined, draw: draw, @@ -27,337 +33,341 @@ function newLogin () { return thisObject async function initialize (pSharedStatus) { - const accessToken = window.localStorage.getItem('access_token') - let user = window.localStorage.getItem('user') + try { + const accessToken = window.localStorage.getItem('access_token') + let user = window.localStorage.getItem('user') - sharedStatus = pSharedStatus + sharedStatus = pSharedStatus - if (user === null) { - // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in. + if (user === null) { + // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in. - window.localStorage.removeItem('loggedInUser') - window.localStorage.removeItem('sessionToken') - return - } + window.localStorage.removeItem('loggedInUser') + window.localStorage.removeItem('sessionToken') + return + } - user = JSON.parse(user) + user = JSON.parse(user) - const authId = user.authId + const authId = user.authId - let sessionToken + let sessionToken - const apolloClient = new Apollo.lib.ApolloClient({ - networkInterface: Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl, - transportBatching: true - }), - connectToDevTools: true - }) + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) - const USERS_QUERY = Apollo.gql` - query($authId: String){ - users_UserByAuthId (authId: $authId){ - id - referrerId - alias - firstName - middleName - lastName - bio - email - emailVerified - isDeveloper - isDataAnalyst - isTrader - avatarHandle - avatarChangeDate - sessionToken - role { - id - } - } + const USERS_QUERY = Apollo.gql` + query($authId: String){ + users_UserByAuthId (authId: $authId){ + id + referrerId + alias + firstName + middleName + lastName + bio + email + emailVerified + isDeveloper + isDataAnalyst + isTrader + avatarHandle + avatarChangeDate + sessionToken + role { + id + } + } + } + ` + const getUser = () => { + return new Promise((resolve, reject) => { + apolloClient.query({ + query: USERS_QUERY, + variables: { + authId: authId } - ` - const getUser = () => { - return new Promise((resolve, reject) => { - apolloClient.query({ - query: USERS_QUERY, - variables: { - authId: authId + }) + .then(response => { + sessionToken = response.data.users_UserByAuthId.sessionToken + + window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId)) + resolve({ user: response.data.users_UserByAuthId}) + }) + .catch(error => { + console.log('apolloClient error getting user query', error) + reject(error) + }) + }) + } + + /* Getting all Teams */ + + const networkInterfaceTeams = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterfaceTeams.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` } - }) - .then(response => { - sessionToken = response.data.users_UserByAuthId.sessionToken - - window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId)) - resolve({ user: response.data.users_UserByAuthId}) - }) - .catch(error => { - console.log('apolloClient error getting user query', error) - reject(error) - }) - }) - } - - /* Getting all Teams */ - - const networkInterfaceTeams = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - networkInterfaceTeams.use([{ - applyMiddleware (req, next) { - req.options.headers = { - authorization: `Bearer ${accessToken}` + next() } - next() - } - }]) + }]) - const apolloClientTeams = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceTeams, - connectToDevTools: true - }) - - const TEAM_BY_OWNER_QUERY = Apollo.gql` - query teamsByOwnerQuery { - teams_TeamsByOwner { - id - name - slug - profile { - avatar - banner - description - motto - updatedAt - } - members { - member { - alias - } - } - fb { - id - name - slug - avatar - kind - status { - status - reason - createdAt - } - } - } - } - ` - - const getTeamByOwner = () => { - return new Promise((resolve, reject) => { - apolloClientTeams.query({ - query: TEAM_BY_OWNER_QUERY - }) - .then(response => { - window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner)) - resolve({ teams: response.data.teams_TeamsByOwner}) - }) - .catch(error => { - console.log('apolloClient error getting user teams', error) - reject(error) - }) + const apolloClientTeams = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceTeams, + connectToDevTools: true }) - } - /* Gettings All Events */ - - const networkInterfaceEvents = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - const apolloClientEvents = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceEvents, - connectToDevTools: true, - addTypename: false - }) - - const EVENTS_QUERY = Apollo.gql` - query events($maxStartDate: Int, $minEndDate: Int){ - events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){ - id - title - startDatetime - endDatetime - participants{ - clone{ - id - team{ - slug - } - bot{ - slug - } - } - } - } - } - ` - - const getCurrentEvents = () => { - var d = new Date() - var nowSeconds = Math.round(d.getTime() / 1000) - var twoWeeksAgoSeconds = nowSeconds - 1209600 - return new Promise((resolve, reject) => { - apolloClientEvents.query({ - query: EVENTS_QUERY, - variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds } - }) - .then(response => { - window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events)) - currentEvent = window.localStorage.getItem('currentEventObject') - if (currentEvent === null || currentEvent === '[]' || currentEvent === '') { - sharedStatus.currentEventIndex = -1 - } else { - currentEvent = JSON.parse(currentEvent) - sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) { - return element.id == currentEvent.id - }) + const TEAM_BY_OWNER_QUERY = Apollo.gql` + query teamsByOwnerQuery { + teams_TeamsByOwner { + id + name + slug + profile { + avatar + banner + description + motto + updatedAt + } + members { + member { + alias + } + } + fb { + id + name + slug + avatar + kind + status { + status + reason + createdAt + } + } + } } - resolve({ currentEvents: response.data.events_Events}) - }) - .catch(error => { - console.log('apolloClient error getting current events', error) - reject(error) - }) - }) - } + ` - /* Getting all Clones */ - - const networkInterfaceClones = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - networkInterfaceClones.use([{ - applyMiddleware (req, next) { - req.options.headers = { - authorization: `Bearer ${accessToken}` - } - next() + const getTeamByOwner = () => { + return new Promise((resolve, reject) => { + apolloClientTeams.query({ + query: TEAM_BY_OWNER_QUERY + }) + .then(response => { + window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner)) + resolve({ teams: response.data.teams_TeamsByOwner}) + }) + .catch(error => { + console.log('apolloClient error getting user teams', error) + reject(error) + }) + }) } - }]) - const apolloClientClones = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceClones, - connectToDevTools: true - }) + /* Gettings All Events */ - const CLONES_QUERY = Apollo.gql` - query Operations_Clones{ - operations_Clones { + const networkInterfaceEvents = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + const apolloClientEvents = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceEvents, + connectToDevTools: true, + addTypename: false + }) + + const EVENTS_QUERY = Apollo.gql` + query events($maxStartDate: Int, $minEndDate: Int){ + events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){ id - authId - teamId - botId - mode - resumeExecution - beginDatetime + title + startDatetime endDatetime - waitTime - state - stateDatetime - createDatetime - lastLogs - runAsTeam - summaryDate - buyAverage - sellAverage - marketRate - combinedProfitsA - combinedProfitsB - assetA - assetB - botType - teamName - botName - botAvatar - teamAvatar - processName - keyId - botSlug + participants{ + clone{ + id + team{ + slug + } + bot{ + slug + } + } } - } - ` - - const getClones = () => { - return new Promise((resolve, reject) => { - apolloClientClones.query({ - query: CLONES_QUERY - }) - .then(response => { - window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones)) - let clones = response.data.operations_Clones - for (let i = 0; i < clones.length; i++) { - let clone = clones[i] - if (clone.botType === 'Trading') { - let teamSlug = clone.teamName.toLowerCase() - teamSlug = teamSlug.replace(' ', '-') - let devTeam = ecosystem.getTeam(teamSlug) - let bot = ecosystem.getBot(devTeam, clone.botSlug) - if (bot !== undefined) { - bot.cloneId = clone.id - } - } } + } + ` - resolve({ clones: response.data.operations_Clones}) - }) - .catch(error => { - console.log('apolloClient error getting user clones', error) - reject(error) - }) - }) - } - - // To avoid race conditions, add asynchronous fetches to array - let fetchDataPromises = [] - - fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser()) - - // When all asynchronous fetches resolve, authenticate user or throw error. - await Promise.all(fetchDataPromises).then(result => { - - }, err => { - console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err) - }) - - thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) - - async function authenticateUser () { - if (sessionToken === undefined) { sessionToken = '' } - - let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken - - return new Promise( - function (resolve, reject) { - callServer(undefined, path, (result) => { - let responseFromServer = JSON.parse(result) - - err = responseFromServer.err - - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - console.log('Please make sure you create a new team!') - reject(err) - } - - window.USER_PROFILE = responseFromServer.userProfile - window.localStorage.setItem('sessionToken', sessionToken) - - currentLabel = 'Logged In' - resolve() + const getCurrentEvents = () => { + var d = new Date() + var nowSeconds = Math.round(d.getTime() / 1000) + var twoWeeksAgoSeconds = nowSeconds - 1209600 + return new Promise((resolve, reject) => { + apolloClientEvents.query({ + query: EVENTS_QUERY, + variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds } + }) + .then(response => { + window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events)) + currentEvent = window.localStorage.getItem('currentEventObject') + if (currentEvent === null || currentEvent === '[]' || currentEvent === '') { + sharedStatus.currentEventIndex = -1 + } else { + currentEvent = JSON.parse(currentEvent) + sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) { + return element.id == currentEvent.id }) } - ) + resolve({ currentEvents: response.data.events_Events}) + }) + .catch(error => { + console.log('apolloClient error getting current events', error) + reject(error) + }) + }) + } + + /* Getting all Clones */ + + const networkInterfaceClones = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterfaceClones.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` + } + next() + } + }]) + + const apolloClientClones = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceClones, + connectToDevTools: true + }) + + const CLONES_QUERY = Apollo.gql` + query Operations_Clones{ + operations_Clones { + id + authId + teamId + botId + mode + resumeExecution + beginDatetime + endDatetime + waitTime + state + stateDatetime + createDatetime + lastLogs + runAsTeam + summaryDate + buyAverage + sellAverage + marketRate + combinedProfitsA + combinedProfitsB + assetA + assetB + botType + teamName + botName + botAvatar + teamAvatar + processName + keyId + botSlug + } + } + ` + + const getClones = () => { + return new Promise((resolve, reject) => { + apolloClientClones.query({ + query: CLONES_QUERY + }) + .then(response => { + window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones)) + let clones = response.data.operations_Clones + for (let i = 0; i < clones.length; i++) { + let clone = clones[i] + if (clone.botType === 'Trading') { + let teamSlug = clone.teamName.toLowerCase() + teamSlug = teamSlug.replace(' ', '-') + let devTeam = ecosystem.getTeam(teamSlug) + let bot = ecosystem.getBot(devTeam, clone.botSlug) + if (bot !== undefined) { + bot.cloneId = clone.id + } + } + } + + resolve({ clones: response.data.operations_Clones}) + }) + .catch(error => { + console.log('apolloClient error getting user clones', error) + reject(error) + }) + }) + } + + // To avoid race conditions, add asynchronous fetches to array + let fetchDataPromises = [] + + fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser()) + + // When all asynchronous fetches resolve, authenticate user or throw error. + await Promise.all(fetchDataPromises).then(result => { + + }, err => { + console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err) + }) + + thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) + + async function authenticateUser () { + if (sessionToken === undefined) { sessionToken = '' } + + let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken + + return new Promise( + function (resolve, reject) { + callServer(undefined, path, (result) => { + let responseFromServer = JSON.parse(result) + + err = responseFromServer.err + + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + console.log('Please make sure you create a new team!') + reject(err) + } + + window.USER_PROFILE = responseFromServer.userProfile + window.localStorage.setItem('sessionToken', sessionToken) + + currentLabel = 'Logged In' + resolve() + }) + } + ) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } } diff --git a/Utilities.js b/Utilities.js index ecf946f0b..2ea30bde1 100644 --- a/Utilities.js +++ b/Utilities.js @@ -59,15 +59,17 @@ function getMilisecondsFromPoint (point, container, timeLineCoordinateSystem) { return point.x } -function saveUserPosition (container, timeLineCoordinateSystem) { - let centerPoint = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 +function saveUserPosition (container, timeLineCoordinateSystem, position) { + if (position === undefined) { + position = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + } } let userPosition = { - date: getDateFromPoint(centerPoint, container, timeLineCoordinateSystem), - rate: getRateFromPoint(centerPoint, container, timeLineCoordinateSystem), + date: getDateFromPoint(position, container, timeLineCoordinateSystem), + rate: getRateFromPoint(position, container, timeLineCoordinateSystem), market: DEFAULT_MARKET, zoom: viewPort.zoomTargetLevel } @@ -75,7 +77,7 @@ function saveUserPosition (container, timeLineCoordinateSystem) { window.localStorage.setItem('userPosition', JSON.stringify(userPosition)) } -function moveToUserPosition (container, timeLineCoordinateSystem) { +function getUserPosition (timeLineCoordinateSystem) { let savedPosition = window.localStorage.getItem('userPosition') let userPosition @@ -90,11 +92,17 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { userPosition = JSON.parse(savedPosition) } - let centerPoint = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + userPosition.point = { + x: (new Date(userPosition.date)).valueOf(), + y: userPosition.rate } + return userPosition +} + +function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) { + let userPosition = getUserPosition(timeLineCoordinateSystem) + viewPort.newZoomLevel(userPosition.zoom) INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) INITIAL_DATE = new Date(userPosition.date) @@ -104,11 +112,24 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { y: userPosition.rate } - /* Put this point in the coordinate system of the viewPort */ + /* Put this po int in the coordinate system of the viewPort */ targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint) targetPoint = transformThisPoint(targetPoint, container) + let centerPoint + if (center !== undefined) { + centerPoint = { + x: center.x, + y: center.y + } + } else { + centerPoint = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + } + } + /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ let displaceVector = { @@ -116,6 +137,9 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { y: centerPoint.y - targetPoint.y } + if (ignoreX) { displaceVector.x = 0 } + if (ignoreY) { displaceVector.y = 0 } + viewPort.displace(displaceVector) } @@ -126,3 +150,4 @@ function removeTime (datetime) { return dateOnly } + diff --git a/ViewPort.js b/ViewPort.js index cdebcd76f..e45fc54c8 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -7,7 +7,6 @@ function newViewPort () { const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT const LEFT_MARGIN = 50 const RIGHT_MARGIN = 50 - const MIN_ZOOM_LEVEL = -28.25 let thisObject = { visibleArea: undefined, @@ -15,6 +14,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, + getDisplacement: getDisplacement, newZoomLevel: newZoomLevel, applyZoom: applyZoom, isMinZoom: isMinZoom, @@ -33,7 +33,7 @@ function newViewPort () { let increment = 0.035 - var offset = { + let offset = { x: 0, y: 0 } @@ -66,6 +66,14 @@ function newViewPort () { } } + function getDisplacement () { + let displacement = { + x: offset.x, + y: offset.y + } + return displacement + } + function raiseEvents () { let event = { newOffset: offset @@ -386,4 +394,3 @@ function newViewPort () { browserCanvasContext.stroke() } } -