Hooking cloud popup UI to core

Set up the popup UI for cloud to core API to detected cloud API connection.

1 files changed, 43 insertions, 0 deletions

diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 3e104bb7..f81dc93c 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -18,10 +18,21 @@ exports.CloudPopup = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    components: {
+        enumerable: false,
+        value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     prepareForDraw: {
         enumerable: false,
         value: function () {
                 //
+                this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
+                this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
+                this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
+                this.components.status = this.element.getElementsByClassName('status')[0];
+                this.components.url = this.element.getElementsByClassName('cloud_url')[0];
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                this.testConnection();
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
+                //
+                this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
+                this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //this.application.ninja.coreIoApi.hideCloudDialog
+    testConnection: {
+        enumerable: false,
+        value: function() {
+                //
+                this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
+                //
+                        if (this.application.ninja.coreIoApi.cloudAvailable()) {
+                        this.components.status.style.color = '#77FF00';
+                        this.components.status.innerHTML = 'Connected';
+                } else {
+                        this.components.status.style.color = '#FF3A3A';
+                        this.components.status.innerHTML = 'Disconnected';
+                }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    closeDialog: {
+        enumerable: false,
+        value: function() {
+                //
+                this.application.ninja.coreIoApi.hideCloudDialog();
         }
     }
     ////////////////////////////////////////////////////////////////////