308 lines
9.4 KiB
JavaScript
308 lines
9.4 KiB
JavaScript
|
|
let canvas;
|
|
let markets;
|
|
let ecosystem = newEcosystem();
|
|
let cloudVM = newCloudVM();
|
|
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 viewPort = newViewPort();
|
|
|
|
function newDashboard() {
|
|
|
|
const MODULE_NAME = "Dashboard";
|
|
const INFO_LOG = false;
|
|
const ERROR_LOG = true;
|
|
const INTENSIVE_LOG = false;
|
|
const logger = newWebDebugLog();
|
|
logger.fileName = MODULE_NAME;
|
|
|
|
let thisObject = {
|
|
start: start
|
|
};
|
|
|
|
const DEBUG_START_UP_DELAY = 0; //3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time.
|
|
|
|
return thisObject;
|
|
|
|
function start() {
|
|
|
|
try {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] start -> Entering function."); }
|
|
|
|
/* Here we will setup the global eventHandler that will enable the Canvas App to react to events happening outside its execution scope. */
|
|
|
|
window.canvasApp.eventHandler = newEventHandler();
|
|
window.canvasApp.eventHandler.listenToEvent("User Profile Changed", userProfileChanged);
|
|
window.canvasApp.eventHandler.listenToEvent("Browser Resized", browserResized);
|
|
|
|
loadImages(onImagesLoaded);
|
|
|
|
function onImagesLoaded() {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] start -> onImagesLoaded -> Entering function."); }
|
|
|
|
/* Next we start the App*/
|
|
|
|
setTimeout(delayedStart, DEBUG_START_UP_DELAY);
|
|
|
|
}
|
|
|
|
} catch (err) {
|
|
|
|
if (ERROR_LOG === true) { logger.write("[ERROR] start -> err = " + err); }
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function delayedStart() {
|
|
|
|
try {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] delayedStart -> Entering function."); }
|
|
|
|
/* For now, we are supporting only one market. */
|
|
|
|
let market = {
|
|
id: 2,
|
|
assetA: "USDT",
|
|
assetB: "BTC"
|
|
};
|
|
|
|
markets = new Map();
|
|
|
|
markets.set(market.id, market);
|
|
|
|
canvas = newCanvas();
|
|
canvas.initialize();
|
|
|
|
} catch (err) {
|
|
|
|
if (ERROR_LOG === true) { logger.write("[ERROR] delayedStart -> err = " + err); }
|
|
|
|
}
|
|
}
|
|
|
|
function userProfileChanged() {
|
|
|
|
try {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] userProfileChanged -> Entering function."); }
|
|
|
|
canvas.topSpace.initialize();
|
|
|
|
} catch (err) {
|
|
|
|
if (ERROR_LOG === true) { logger.write("[ERROR] userProfileChanged -> err = " + err); }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function browserResized() {
|
|
|
|
try {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] browserResized -> Entering function."); }
|
|
|
|
browserCanvas = document.getElementById('canvas');
|
|
|
|
browserCanvas.width = window.innerWidth;
|
|
browserCanvas.height = window.innerHeight - window.canvasApp.topMargin;
|
|
|
|
viewPort.initialize();
|
|
|
|
} catch (err) {
|
|
|
|
if (ERROR_LOG === true) { logger.write("[ERROR] browserResized -> err = " + err); }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function loadImages(callBack) {
|
|
|
|
try {
|
|
|
|
if (INFO_LOG === true) { logger.write("[INFO] loadImages -> Entering function."); }
|
|
|
|
const accessToken = "";
|
|
|
|
/*
|
|
Soon, we will need to get images from the Financial Beings Module. I live this core here as a sample for that:
|
|
|
|
const apolloClient = new Apollo.lib.ApolloClient({
|
|
networkInterface: Apollo.lib.createNetworkInterface({
|
|
uri: window.canvasApp.graphQL.masterAppApiUrl,
|
|
transportBatching: true,
|
|
}),
|
|
connectToDevTools: true,
|
|
})
|
|
|
|
const 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: 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)
|
|
});
|
|
});
|
|
}
|
|
|
|
*/
|
|
|
|
const networkInterfaceTeams = Apollo.lib.createNetworkInterface({
|
|
uri: window.canvasApp.graphQL.masterAppApiUrl
|
|
});
|
|
|
|
networkInterfaceTeams.use([{
|
|
applyMiddleware(req, next) {
|
|
req.options.headers = {
|
|
authorization: `Bearer ${accessToken}`
|
|
};
|
|
next();
|
|
}
|
|
}]);
|
|
|
|
const apolloClientTeams = new Apollo.lib.ApolloClient({
|
|
networkInterface: networkInterfaceTeams,
|
|
connectToDevTools: true,
|
|
});
|
|
|
|
const ALL_TEAMS_QUERY = Apollo.gql`
|
|
{
|
|
teams_Teams{
|
|
edges{
|
|
node{
|
|
id
|
|
name
|
|
slug
|
|
profile {
|
|
avatar
|
|
banner
|
|
description
|
|
motto
|
|
updatedAt
|
|
}
|
|
fb {
|
|
id
|
|
name
|
|
slug
|
|
avatar
|
|
kind
|
|
status {
|
|
status
|
|
reason
|
|
createdAt
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
let teams;
|
|
|
|
const getTeams = () => {
|
|
return new Promise((resolve, reject) => {
|
|
apolloClientTeams.query({
|
|
query: ALL_TEAMS_QUERY
|
|
})
|
|
.then(response => {
|
|
teams = response.data.teams_Teams;
|
|
window.localStorage.setItem('Teams', JSON.stringify(response.data.teams_Teams));
|
|
resolve({ teams: response.data.teams_Teams })
|
|
})
|
|
.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); }
|
|
reject(err)
|
|
});
|
|
})
|
|
}
|
|
|
|
// To avoid race conditions, add asynchronous fetches to array
|
|
let fetchDataPromises = [];
|
|
|
|
fetchDataPromises.push(/*getUser(),*/ getTeams()); // <-- Here we must add the function calll to the Financial Beings module.
|
|
|
|
// When all asynchronous fetches resolve, authenticate user or throw error.
|
|
Promise.all(fetchDataPromises).then(result => {
|
|
|
|
/* All good, we will go through the results creating a map with all the Images URLs */
|
|
|
|
let teamProfileImages = new Map();
|
|
let fbProfileImages = new Map();
|
|
|
|
for (let i = 0; i < teams.edges.length; i++) {
|
|
|
|
let team = teams.edges[i].node;
|
|
|
|
teamProfileImages.set(team.slug, team.profile.avatar);
|
|
|
|
if (team.fb.length > 0) {
|
|
|
|
fbProfileImages.set(team.slug + "-" + team.fb[0].slug, team.fb[0].avatar);
|
|
|
|
}
|
|
}
|
|
|
|
window.canvasApp.context.teamProfileImages = teamProfileImages;
|
|
window.canvasApp.context.fbProfileImages = fbProfileImages;
|
|
|
|
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); }
|
|
});
|
|
|
|
} catch (err) {
|
|
|
|
if (ERROR_LOG === true) { logger.write("[ERROR] loadImages -> err = " + err); }
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|