New Strategy Space added, connected to Strategizer

Canvas.js

@@ -38,6 +38,7 @@ function newCanvas () {
     floatingSpace: undefined,
     panelsSpace: undefined,
     bottomSpace: undefined,
+    strategySpace: undefined,
     animation: undefined,
     initialize: initialize,
     finalize: finalize
@@ -52,13 +53,14 @@ function newCanvas () {
 /*
    The canvas object represents a layer on top of the browser canvas object.
 
-   Graphically, thiscanvas object has 4 spaces:
+   Graphically, thiscanvas object has 5 spaces:
 
    1. The "Top Space": It is where Team and User information is displayed.
    2. The "Chart Space": It is where the charts are plotted.
    3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
    4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
-   5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
+   5. The "Bottom Space": Includes UIControls that other panels can add there.
+   6. The "Strategy Spece": Functionality to manage Strategies
 
    All these spaces are child objects of the Canvas object.
 
@@ -78,6 +80,9 @@ function newCanvas () {
    |
    |
    ---> bottomSpace
+   |
+   |
+   ---> strategySpace
 */
 
   function finalize () {
@@ -120,6 +125,9 @@ function newCanvas () {
       thisObject.topSpace = newTopSpace()
       await thisObject.topSpace.initialize()
 
+      thisObject.strategySpace = newStrategySpace()
+      await thisObject.strategySpace.initialize()
+
       thisObject.bottomSpace = newBottomSpace()
       thisObject.bottomSpace.initialize()
 
@@ -168,6 +176,7 @@ function newCanvas () {
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
           animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
           animation.start(onStart)
 
           function onFunctionAdded (err) {
@@ -298,6 +307,16 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.isDraggeable === true) {
+        containerBeingDragged = container
+        containerDragStarted = true
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
@@ -373,6 +392,15 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.isClickeable === true) {
+        container.eventHandler.raiseEvent('onMouseClick', point)
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
@@ -506,6 +534,15 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.detectMouseOver === true) {
+        container.eventHandler.raiseEvent('onMouseOver', point)
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)

Spaces/StrategySpace.js

@@ -0,0 +1,54 @@
+
+function newStrategySpace () {
+  let thisObject = {
+    container: undefined,
+    draw: draw,
+    strategyCollection: undefined,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let container = newContainer()
+  container.initialize()
+  thisObject.container = container
+
+  resize()
+
+  container.isDraggeable = false
+
+  return thisObject
+
+  async function initialize () {
+    thisObject.strategyCollection = newStrategyCollection()
+    await thisObject.strategyCollection.initialize()
+
+    window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
+  }
+
+  function resize () {
+    thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x
+    thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y
+
+    container.frame.position.x = viewPort.visibleArea.topLeft.x
+    container.frame.position.y = viewPort.visibleArea.topLeft.y
+  }
+
+  function getContainer (point) {
+    let container
+
+    container = thisObject.strategyCollection.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
+  }
+
+  function draw () {
+    drawBackground()
+  }
+
+  function drawBackground () {
+
+  }
+}

StrategySpace/StrategyCollection.js

@@ -0,0 +1,228 @@
+
+function newStrategyCollection () {
+  const MODULE_NAME = 'Strategy Collection'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let container = newContainer()
+  container.initialize()
+  thisObject.container = container
+
+  thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x
+  thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y
+
+  container.frame.position.x = viewPort.visibleArea.topLeft.x
+  container.frame.position.y = viewPort.visibleArea.topLeft.y
+
+  container.isDraggeable = false
+  container.isClickeable = true
+
+  return thisObject
+
+  async function initialize () {
+    try {
+      const accessToken = window.localStorage.getItem('access_token')
+      let user = window.localStorage.getItem('user')
+
+      if (user === null) {
+              // if there is no user that means that we are logged off, which means this object can not be used.
+        return
+      }
+
+      thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick)
+
+      user = JSON.parse(user)
+
+      const authId = user.authId
+
+      let sessionToken
+
+      const apolloClient = new Apollo.lib.ApolloClient({
+        networkInterface: Apollo.lib.createNetworkInterface({
+          uri: window.canvasApp.graphQL.masterAppApiUrl,
+          transportBatching: true
+        }),
+        connectToDevTools: true
+      })
+
+      /* Getting the FB that own the Strategies */
+
+      let strategySimulationClone = ''
+      let clones = window.localStorage.getItem('userClones')
+      if (clones === null || clones === '') {
+        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') }
+        return
+      }
+      clones = JSON.parse(clones)
+      for (let i = 0; i < clones.length; i++) {
+        let clone = clones[i]
+        if (clone.botType === 'Indicator') {
+          strategySimulationClone = clone.botSlug
+        }
+      }
+
+      /* Getting all Strategies */
+
+      const networkInterface = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterface.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
+          }
+          next()
+        }
+      }])
+
+      const QUERY = Apollo.gql`
+          query($fbSlug: String!){
+
+                    strategizer_StrategyByFb(fbSlug: $fbSlug){
+                    subStrategies(activeOnly: true){
+                        name
+                        entryPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        exitPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        sellPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        buyPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        stopLoss{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                        buyOrder{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                        sellOrder{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                    }
+                    }
+                }
+              `
+
+      const getStrategies = () => {
+        return new Promise((resolve, reject) => {
+          apolloClient.query({
+            query: QUERY,
+            variables: { fbSlug: strategySimulationClone}
+          })
+                  .then(response => {
+                    window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
+                    let strategies = response.data.strategizer_StrategyByFb.subStrategies
+                    resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
+                  })
+                  .catch(error => {
+                    console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack)
+                    reject(error)
+                  })
+        })
+      }
+
+          // To avoid race conditions, add asynchronous fetches to array
+      let fetchDataPromises = []
+
+      fetchDataPromises.push(getStrategies())
+
+          // 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.stack)
+      })
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
+    }
+  }
+
+  function onClick () {
+
+  }
+
+  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 () {
+    return // nothing to show.
+  }
+}

TopSpace/Login.js

@@ -5,6 +5,7 @@ function newLogin () {
   const INTENSIVE_LOG = false
   const ERROR_LOG = true
   const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
 
   let thisObject = {
     container: undefined,
@@ -100,7 +101,7 @@ function newLogin () {
                         resolve({ user: response.data.users_UserByAuthId})
                       })
                       .catch(error => {
-                        console.log('apolloClient error getting user query', error)
+                        console.log('apolloClient error getting user query', error.graphQLErrors, error.stack)
                         reject(error)
                       })
         })
@@ -170,7 +171,7 @@ function newLogin () {
                 resolve({ teams: response.data.teams_TeamsByOwner})
               })
               .catch(error => {
-                console.log('apolloClient error getting user teams', error)
+                console.log('apolloClient error getting user teams', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })
@@ -233,7 +234,7 @@ function newLogin () {
                 resolve({ currentEvents: response.data.events_Events})
               })
               .catch(error => {
-                console.log('apolloClient error getting current events', error)
+                console.log('apolloClient error getting current events', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })
@@ -320,7 +321,7 @@ function newLogin () {
                 resolve({ clones: response.data.operations_Clones})
               })
               .catch(error => {
-                console.log('apolloClient error getting user clones', error)
+                console.log('apolloClient error getting user clones', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })

WebDebugLog.js

@@ -2,7 +2,7 @@
 function newWebDebugLog () {
   let thisObject = {
     write: write,
-    fileName: undefined
+    fileName: 'undefined'
   }
 
   return thisObject