Login Button at Top Space

Project.njsproj

@@ -60,6 +60,9 @@
     <Compile Include="Globals.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="TopSpace\Login.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="PlottersManager.js">
       <SubType>Code</SubType>
     </Compile>

Scripts/AppLoader.js

@@ -39,6 +39,7 @@
                 "TopSpace/CurrentBot.js",
                 "TopSpace/DevTeam.js",
                 "TopSpace/EndUser.js",
+                "TopSpace/Login.js",
 
                 "Panels/TimeControlPanel.js",
                 "Panels/ProductsPanel.js",

Spaces/TopSpace.js

@@ -11,6 +11,7 @@ function newTopSpace() {
         currentBot: undefined,
         currentProcess: undefined,
         currentStartMode: undefined,
+        login: undefined,
         playStopButton: undefined,
         initialize: initialize
     };
@@ -57,6 +58,9 @@ function newTopSpace() {
         thisObject.currentStartMode = newCurrentStartMode();
         thisObject.currentStartMode.initialize(sharedStatus);
 
+        thisObject.login = newLogin();
+        thisObject.login.initialize();
+
         thisObject.playStopButton = newPlayStopButton();
         thisObject.playStopButton.initialize();
 
@@ -84,6 +88,9 @@ function newTopSpace() {
         container = thisObject.currentStartMode.getContainer(point);
         if (container !== undefined) { return container; }
 
+        container = thisObject.login.getContainer(point);
+        if (container !== undefined) { return container; }
+
         container = thisObject.playStopButton.getContainer(point);
         if (container !== undefined) { return container; }
 
@@ -104,6 +111,7 @@ function newTopSpace() {
         thisObject.currentBot.draw();
         thisObject.currentProcess.draw();
         thisObject.currentStartMode.draw();
+        thisObject.login.draw();
         thisObject.playStopButton.draw();
 
     }

TopSpace/CurrentBot.js

@@ -15,7 +15,7 @@ function newCurrentBot() {
     thisObject.container.frame.width = 200;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 3;
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 4;
     container.frame.position.y = 0;
 
     container.isDraggeable = false;

TopSpace/CurrentProcess.js

@@ -15,7 +15,7 @@ function newCurrentProcess() {
     thisObject.container.frame.width = 200;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 2;
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 3;
     container.frame.position.y = 0;
 
     container.isDraggeable = false;

TopSpace/CurrentStartMode.js

@@ -15,7 +15,7 @@ function newCurrentStartMode() {
     thisObject.container.frame.width = 200;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1;
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 2;
     container.frame.position.y = 0;
 
     container.isDraggeable = false;

TopSpace/DevTeam.js

@@ -15,7 +15,7 @@ function newDevTeam() {
     thisObject.container.frame.width = 200;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 4;
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5;
     container.frame.position.y = 0;
 
     container.isDraggeable = false;

TopSpace/EndUser.js

@@ -15,7 +15,7 @@ function newEndUser() {
     thisObject.container.frame.width = 200;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5;
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 6;
     container.frame.position.y = 0;
 
     container.isDraggeable = false;

TopSpace/Login.js

@@ -0,0 +1,95 @@
+
+function newLogin() {
+
+    let thisObject = {
+        container: undefined,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize
+    };
+
+    let container = newContainer();
+    container.initialize();
+    thisObject.container = container;
+
+    thisObject.container.frame.width = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+    container.isClickeable = true;
+
+    const LOGIN_URL = "https://advancedalgos1.eu.auth0.com/login?state=HQmR_JEnoSYS9Zz0nkCzW_zALsRJXjoQ&client=GReymhOiUQuLhDEwxlLu6PMDIa6mjVQQ&protocol=oauth2&response_type=token%20id_token&redirect_uri=https%3A%2F%2F" + window.location.host + "%2F%23&scope=openid&audience=https%3A%2F%2Fadvancedalgos1.eu.auth0.com%2Fuserinfo&nonce=7LZ5hOd6D3jFdNdtDvEqNOyOR3nZXw5A&auth0Client=eyJuYW1lIjoiYXV0aDAuanMiLCJ2ZXJzaW9uIjoiOS41LjEifQ%3D%3D"
+    const LOGOUT_URL = "/";
+
+    let currentURL;
+    let currentLabel;
+
+    let sharedStatus;
+
+    return thisObject;
+
+    function initialize() {
+
+
+        if (window.USER_LOGGED_IN === "") {
+
+            currentLabel = "Login";
+            currentURL = LOGIN_URL;
+
+        } else {
+
+            currentLabel = "Logout";
+            currentURL = LOGOUT_URL;
+
+        }
+
+        thisObject.container.eventHandler.listenToEvent("onMouseClick", onClick);
+    }
+
+    function onClick() {
+
+        window.location.href = currentURL;
+
+    }
+
+    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);
+
+        let fontSize = 12;
+        let label = currentLabel;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}