Hooking cloud popup UI to core

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

4 files changed, 79 insertions, 31 deletions

diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 8e45f926..5d7de347 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -36,15 +36,15 @@
                         
                         <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
                         
-                        <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" />
+                        <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
                         
-                        <button class="test">Test</button>
+                        <button class="btn_test">Test</button>
                         
-                        <label>Status:</label><div class="status">Disconnected</div>
+                        <label>Status:</label><div class="status">&nbsp;</div>
                         
-                        <button class="handle_cancel">Cancel</button>
+                        <button class="btn_cancel">Cancel</button>
                         
-                        <button class="handle_ok">Ok</button>
+                        <button class="btn_ok">Ok</button>
                         
                 </div>
         </div>
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();
         }
     }
     ////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index 009ba835..81e0742f 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -34,20 +34,21 @@
 
 /* line 40, cloudpopup.scss */
 .cloud_popup .content p {
-  text-shadow: 1px 1px 1px #333;
+  text-shadow: 1px 1px 1px #222;
   margin: 0px 0px 12px 0px;
   text-align: justify;
   color: #EEE;
 }
 
 /* line 48, cloudpopup.scss */
-.cloud_popup .content .test {
+.cloud_popup .content .btn_test {
   float: right;
   clear: right;
   margin: 0px 0px 0px 8px;
+  width: 60px;
 }
 
-/* line 55, cloudpopup.scss */
+/* line 56, cloudpopup.scss */
 .cloud_popup .content label {
   float: left;
   margin: 5px 8px 0px 0px;
@@ -56,28 +57,30 @@
   text-align: right;
 }
 
-/* line 64, cloudpopup.scss */
+/* line 65, cloudpopup.scss */
 .cloud_popup .content input {
   display: block;
+  float: left;
+  color: #FFF;
   border: 0px;
   padding: 4px;
   margin: 0px;
-  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
-  border: 1px #5c5c5c solid;
-  color: #FFF;
-  float: left;
-  width: 202px;
+  width: 176px;
   border-radius: 4px;
+  text-shadow: 1px 1px 1px #222;
+  border: 1px #5c5c5c solid;
+  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
 }
 
-/* line 77, cloudpopup.scss */
+/* line 80, cloudpopup.scss */
 .cloud_popup .content input:focus {
+  text-shadow: none;
   background: #FFF;
   border: 1px #292929 solid;
   color: #292929;
 }
 
-/* line 84, cloudpopup.scss */
+/* line 88, cloudpopup.scss */
 .cloud_popup .content button {
   display: block;
   border: 0px;
@@ -92,16 +95,15 @@
   text-shadow: 1px 1px 1px #000;
 }
 
-/* line 99, cloudpopup.scss */
+/* line 103, cloudpopup.scss */
 .cloud_popup .content button:hover {
   border: 1px #222 solid;
   background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
   color: #EEE;
 }
 
-/* line 107, cloudpopup.scss */
+/* line 111, cloudpopup.scss */
 .cloud_popup .content .status {
-  color: red;