Dev: Show loading screen while login and dashboard loading (CintLink)

LimeSurvey · Jul 21, 2016 · 42cc225 · 42cc225
1 parent d5fb5a5
commit 42cc225
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 27 deletions.
diff --git a/application/core/plugins/CintLink/CintLink.php b/application/core/plugins/CintLink/CintLink.php
@@ -159,6 +159,9 @@ public function actionIndex($surveyId)
         App()->clientScript->registerScriptFile("$assetsUrl/cintlink.js");
         App()->clientScript->registerScriptFile("http://" . $this->cintApiKey . ".cds.cintworks.net/assets/cint-link-1-0-0.js");
 
+        $assetsUrl = Yii::app()->assetManager->publish(dirname(__FILE__) . '/css');
+        App()->clientScript->registerCssFile("$assetsUrl/cintlink.css");
+
         //$response = json_decode($response);
         /*
         $c = curl_init("https://www.limesurvey.org/index.php?option=com_nbill&action=orders&task=order&cid=10");

diff --git a/application/core/plugins/CintLink/js/cintlink.js b/application/core/plugins/CintLink/js/cintlink.js
@@ -10,6 +10,53 @@ LS.plugin.cintlink = LS.plugin.cintlink || {};
 
 $(document).ready(function() {
 
+    function showLoader() {
+        $('.ajaxLoading').show();
+    }
+
+    function hideLoader() {
+        $('.ajaxLoading').hide();
+    }
+
+    hideLoader();
+
+    /**
+     * Run when user click "Login"
+     *
+     * @param {object} ev - Event
+     * @return void
+     */
+    function onLoginClick(ev) {
+        ev.preventDefault();
+
+        var formValues = $('#cintlink-login-form').serialize();
+
+        showLoader();
+
+        $.ajax({
+            method: 'POST',
+            url: LS.plugin.cintlink.pluginBaseUrl + '&function=login&' + formValues
+        }).done(function(response) {
+            console.log(response);
+            hideLoader();
+
+            var response = JSON.parse(response);
+
+            if (response.error) {
+                $('#error-modal .modal-body-text').html(response.error);
+                $('#error-modal').modal();
+            }
+            else if (response.result) {
+                // Login OK
+                showDashboard();
+            }
+            else {
+                $('#error-modal .modal-body-text').html("Could not login. Please make sure username and password is correct.");
+                $('#error-modal').modal();
+            }
+        })
+    }
+
     /**
      * Show the login form if user is not already logged in
      *
@@ -23,33 +70,7 @@ $(document).ready(function() {
             $('#cintlink-container').html(response);
 
             $('#cintlink-login-submit').on('click', function(ev) {
-                ev.preventDefault();
-
-                var formValues = $('#cintlink-login-form').serialize();
-
-                $.ajax({
-                    method: 'POST',
-                    url: LS.plugin.cintlink.pluginBaseUrl + '&function=login&' + formValues
-                }).done(function(response) {
-                    console.log(response);
-
-                    var response = JSON.parse(response);
-
-                    if (response.error) {
-                        $('#error-modal .modal-body-text').html(response.error);
-                        $('#error-modal').modal();
-                    }
-                    else if (response.result) {
-                        // Login OK
-                        showDashboard();
-                    }
-                    else {
-                        $('#error-modal .modal-body-text').html("Could not login. Please make sure username and password is correct.");
-                        $('#error-modal').modal();
-                    }
-
-                });
-
+                onLoginClick(ev);
             });
         });
     }
@@ -88,11 +109,13 @@ $(document).ready(function() {
      */
     function showDashboard() {
         console.log('showDashboard');
+        showLoader();
         $.ajax({
             method: 'POST',
             url: LS.plugin.cintlink.pluginBaseUrl + '&function=getDashboard'
         }).done(function(response) {
             console.log('response', response);
+            hideLoader();
             $('#cintlink-container').html(response);
         });
     }

diff --git a/application/core/plugins/CintLink/views/dashboard.php b/application/core/plugins/CintLink/views/dashboard.php
@@ -1,3 +1,4 @@
+
 <button class='btn btn-default' onclick='LS.plugin.cintlink.showWidget();'><?php eT("Show widget"); ?></button>
 <p class='help-block'>Use the Cint widget to buy participants</p>
 
@@ -30,3 +31,4 @@
 <?php else: ?>
     <i>No orders made yet</i>
 <?php endif; ?>
+
diff --git a/application/core/plugins/CintLink/views/index.php b/application/core/plugins/CintLink/views/index.php
@@ -1,3 +1,15 @@
+<div id="ajaxContainerLoading2" class="ajaxLoading ajaxLoadingTransparent" >
+    <h2><b><?php eT('Please wait, loading data...');?></b></h2>
+    <div class="preloader loading" style="margin-top: 10px;">
+        <span class="slice"></span>
+        <span class="slice"></span>
+        <span class="slice"></span>
+        <span class="slice"></span>
+        <span class="slice"></span>
+        <span class="slice"></span>
+    </div>
+</div>
+
 <div class="row">
     <div class="col-lg-12 content-right">
         <h3><?php eT("CintLink Integration");?></h3>