implemented synchronous http calls to load json data

Nikita Kulshreshtha
1 parent 2ddd840c
Showing 8 changed files with 212 additions and 114 deletions
300-PROTOTYPES/bottomLeftArrow.png
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
400-SOURCECODE/AIAHTML5.Web/app/services/GetJsonService.js
400-SOURCECODE/AIAHTML5.Web/app/services/load-json-service.js
400-SOURCECODE/AIAHTML5.Web/index.html
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/bottomLeftArrow.png
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/bottomLeftArrow_old.png
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
 'use strict';
  
-AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams",
-function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam) {
+AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "GetJsonService",
+function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, GetJsonService) {
  
     $scope.genderId = "";
     $scope.BodyViewData;
@@ -19,6 +19,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.layerNumber;
     $scope.daCounter = 1;
  
+    $scope.isBodylayerdataLoaded = false;
+    $scope.isBodyRegionDataLoaded = false;
  
     //get the DA body view list based on selected gender
     $scope.getDAViewList = function ($event) {
@@ -147,101 +149,138 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     //da-body-view functions
  
     $scope.openBodyView = function () {
+        //debugger;
  
+        //load bodyRegion data
+        var brViewdata = GetJsonService.getJson('~/../content/data/json/da_dat_brview.json')
+        brViewdata.then(
+           function (result) {
+              // debugger;
+               $scope.BodyRegionData = result;
+               $scope.isBodyRegionDataLoaded = true;
+            //   alert('da_dat_brview= ' + result)
  
-        //load json
-        $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
-            $scope.TermNumberData = data;
-        })
-         .error(function (data, status, headers, config) {
-             console.log(data);
-         });
+               //get layer data for body view
+               GetJsonService.getAnotherJson('~/../content/data/json/da_dat_layer_1.json')
+              .then(
+               function (result) {
+                 //debugger;
+               
+                 $scope.BodyLayerData = result;
+                 $scope.isBodylayerdataLoaded = true;
  
+                 //load json for annotations
+                 $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
+                     $scope.TermNumberData = data;
+                 })
+               .error(function (data, status, headers, config) {
+                 console.log(data);
+                });
  
-        //load vocabterm data
-        $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
-            $scope.VocabTermData = data;
-        })
-         .error(function (data, status, headers, config) {
-             console.log(data);
-         });
+                   //load vocabterm data
+                 $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
+                     $scope.VocabTermData = data;
+                 })
+                  .error(function (data, status, headers, config) {
+                      console.log(data);
+                  });
  
  
  
-        var openViews;
-        var currentBodyViewId = localStorage.getItem("currentBodyViewId");
-        // debugger;
-        if ($rootScope.openViews.length > 0) {
-            openViews = new jinqJs()
-               .from($rootScope.openViews)
-               .where("BodyViewId==" + currentBodyViewId)
-               .select();
-        }
-        var counter = 1;
+                 var openViews;
  
-        // var tittle = $rootScope.ViewTitle;
-        var tittle = localStorage.getItem("currentViewTitleFromJson");
+                 var currentBodyViewId = localStorage.getItem("currentBodyViewId");
+                   // debugger;
+                 if ($rootScope.openViews.length > 0) {
+                     openViews = new jinqJs()
+                        .from($rootScope.openViews)
+                        .where("BodyViewId==" + currentBodyViewId)
+                        .select();
+                 }
+                 var counter = 1;
  
-        if (openViews != null && openViews.length > 0) {
-            angular.forEach(openViews, function (value, key) {
+                   // var tittle = $rootScope.ViewTitle;
+                 var tittle = localStorage.getItem("currentViewTitleFromJson");
  
-                if (value.BodyView == tittle) {
-                    tittle = localStorage.getItem("currentViewTitleFromJson") + counter++;
-                    $rootScope.currentActiveViewTitle = tittle;
-                    localStorage.setItem("currentViewTitle", tittle);
-                }
-
-            });
-        }
-        else {
-            localStorage.setItem("currentViewTitle", tittle);
-        }
+                 if (openViews != null && openViews.length > 0) {
+                     angular.forEach(openViews, function (value, key) {
  
+                         if (value.BodyView == tittle) {
+                             tittle = localStorage.getItem("currentViewTitleFromJson") + counter++;
+                             $rootScope.currentActiveViewTitle = tittle;
+                             localStorage.setItem("currentViewTitle", tittle);
+                         }
  
+                     });
+                 }
+                 else {
+                     localStorage.setItem("currentViewTitle", tittle);
+                 }
  
-        $.jsPanel({
-            id: 'daImagePanel',
-            selector: '.daBodyView',
-            theme: 'success',
-            ajax: {
-                url: 'app/views/da/da-view.html'
-            },
-            title: localStorage.getItem("currentViewTitle"),
-            position: {
-                top: 70,
-                left: 1,
-            },
  
-            size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },
+                $.jsPanel({
+                     id: 'daImagePanel',
+                     selector: '.daBodyView',
+                     theme: 'success',
+                     ajax: {
+                         url: 'app/views/da/da-view.html'
+                     },
+                     title: localStorage.getItem("currentViewTitle"),
+                     position: {
+                         top: 70,
+                         left: 1,
+                     },
  
-        });
+                     size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },
  
+                 });
  
  
  
  
-        $scope.LoadDefaultLayerImage();
-        //   $rootScope.openViewsDA.push({ "ViewId": 1 });
-        $rootScope.currentSlug = 'da-body-view';
  
-        //hide scrollbar
  
+                   //   $rootScope.openViewsDA.push({ "ViewId": 1 });
+                 $rootScope.currentSlug = 'da-body-view';
  
-        $rootScope.openViews.push(
-                  {
-                      "module": $rootScope.currentActiveModuleTitle, "BodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,
-                      "slug": $rootScope.currentSlug
-                  }
-                );
-        //   debugger;
+                   //hide scrollbar
  
-        var e1 = angular.element(document.getElementById("daBodyview"));
-        $timeout(function () { $compile(e1.contents())($scope) }, 250);
-        // $compile(e1.contents())($scope);
  
-        $('#daBodyview').css("height", $(window).outerHeight());
-      
-     $('#daBodyview').css("width", $(window).outerWidth());
+                 $rootScope.openViews.push(
+                           {
+                               "module": $rootScope.currentActiveModuleTitle, "BodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,
+                               "slug": $rootScope.currentSlug
+                           }
+                         );
+                   //   debugger;
+
+                 var e1 = angular.element(document.getElementById("daBodyview"));
+                 $timeout(function () { $compile(e1.contents())($scope) }, 250);
+                   // $compile(e1.contents())($scope);
+
+                 $('#daBodyview').css("height", $(window).outerHeight());
+
+                 $('#daBodyview').css("width", $(window).outerWidth());
+
+               //  debugger
+                 if ($scope.isBodylayerdataLoaded) {
+                     $timeout(function () { $scope.LoadDefaultLayerImage() }, 350);
+                 }
+             },
+             function (error) {
+                 // handle errors here
+                 console.log(' $scope.BodyLayerData= ' + error.statusText);
+             }
+         );
+           },
+           function (error) {
+               // handle errors here
+               console.log(' $scope.BodyRegionData = ' + error.statusText);
+           }
+        );
+
+       // debugger
+    
     }
  
     angular.element(document).ready(function () {
@@ -258,26 +297,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
     $scope.LoadDefaultLayerImage = function () {
         //  debugger;
-        $http({ method: 'GET', url: '~/../content/data/json/da_dat_brview.json' }).success(function (data) {
-
-            $scope.BodyRegionData = data;
-            console.log($scope.BodyRegionData);
-        })
-      .error(function (data, status, headers, config) {
-          console.log(data);
-      });
-
  
-        //  Load Layer data
-        $http({ method: 'GET', url: '~/../content/data/json/da_dat_layer_1.json' }).success(function (data) {
-            //  debugger
-            $scope.BodyLayerData = data;
-            console.log($scope.BodyLayerData);
-
-        })
-        .error(function (data, status, headers, config) {
-            console.log(data);
-        });
  
         //  debugger;
  
@@ -285,16 +305,42 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.layerNumber = 0;
         $scope.skinTone = DA[0].ethnicity;
  
-        $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 250);
-
+       // $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 350);
  
+        $scope.CalculateImageCordinates($scope.voId);
     };
  
  
     //calculate coordinates for body region images
     $scope.CalculateImageCordinates = function (viewOrientationId) {
  
-        //  debugger;
+        // debugger;
+        //load json data
+        //  $http({ method: 'GET', url: '~/../content/data/json/da_dat_brview.json' }).success(function (data) {
+        //      alert('da_dat_brview.json')
+        //      $scope.BodyRegionData = data;
+        //      alert(data)
+        //     // console.log($scope.BodyRegionData);
+        //  })
+        //.error(function (data, status, headers, config) {
+        //    console.log(data);
+        //});
+
+
+        //  //  Load Layer data
+        //  $http({ method: 'GET', url: '~/../content/data/json/da_dat_layer_1.json' }).success(function (data) {
+        //      //  debugger
+        //      $scope.BodyLayerData = data;
+        //      console.log($scope.BodyLayerData);
+
+        //  })
+        //  .error(function (data, status, headers, config) {
+        //      console.log(data);
+        //  });
+
+
+
+
         //set height of canvas div and left tool bar as per window size
         $scope.BodyRegionCordinatesData = []; // create an empty array
  
@@ -453,7 +499,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
  
     $scope.GetImageSource = function (bodyRegionId) {
-        //  debugger;
+       // debugger;
         var dataLength = $scope.BodyLayerData.Layers.DataLayer.length;
  
         //set max for LayerNumber input
@@ -664,7 +710,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         imgCanvas.addEventListener('click', function (evt) {
  
  
-         //   debugger;
+            //   debugger;
             var context = imgCanvas.getContext("2d");
  
  
@@ -770,7 +816,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
     //get annotation from term number
     $scope.GetAnnotationText = function (termNumber) {
-      //  debugger;
+        //  debugger;
  
         var annotationText;
         //0
@@ -801,7 +847,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
  
     $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
-       // debugger;
+        // debugger;
  
         var Annotation;
         $scope.ActualTermNo = actualTermNo;
@@ -822,7 +868,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
     //layer change function
     $scope.LayerChange = function () {
-        
+
         var canvasDiv = document.getElementById('canvasDiv');
         $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
         $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;
@@ -908,7 +954,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
  
  
-    $scope.createSpeechBubble = function(event, text, x, y) {
+    $scope.createSpeechBubble = function (event, text, x, y) {
  
         $('#canvasDiv').css('cursor', 'pointer');
         $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <div class="">'
@@ -972,6 +1018,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
 }]
  
+);
  
-
-);
 \ No newline at end of file
+//DAController.$inject = ["$scope", "$rootScope", "$q", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "GetJsonService"];
+AIA.service("GetJsonService", function ($http, $q) {
+
+    var deferred = $q.defer();
+
+    this.getJson = function (url) {
+        var deferred = $q.defer();
+        return $http.get(url)
+            .then(function (response) {
+                // promise is fulfilled
+               // debugger;
+                deferred.resolve(response.data);
+                // promise is returned
+                return deferred.promise;
+            }, function (response) {
+                // the following line rejects the promise 
+                deferred.reject(response);
+                // promise is returned
+                return deferred.promise;
+            })
+        ;
+    };
+
+    this.getAnotherJson = function (url1) {
+        var deferred1 = $q.defer();
+        return $http.get(url1)
+            .then(function (response1) {
+                // promise is fulfilled
+              //  debugger;
+                deferred1.resolve(response1.data);
+                // promise is returned
+                return deferred1.promise;
+            }, function (response1) {
+                // the following line rejects the promise 
+                deferred1.reject(response1);
+                // promise is returned
+                return deferred1.promise;
+            })
+        ;
+    };
+});
+
+
+
+//AIA.factory('GetJsonService', function ($http) {
+//    return {
+//        // 1st function
+//        getJson: function (url) {
+//            debugger;
+//            return $http.get(url).then(function (response) {
+//                alert(response.data);
+//                return response.data;
+//            });
+//        },
+//        // 2nd function
+//        getAnotherJson: function (url) {
+//            return $http.get(url).then(function (response) {
+//                alert(response.data);
+//                return response.data;
+//            });        }
+//    };
+//})
 \ No newline at end of file
-AIA.factory('LoadJsonService', function () {
-    return {
-        getJson: function (userName, Password) {
-            alert('called service');
-            return true;
-        }
-    };
-});
@@ -147,8 +147,7 @@
     <script src="content/js/custom/custom.js"></script>
     <script src="app/controllers/DAController.js"></script>
     <script src="app/controllers/HomeController.js"></script>
-
-
+    <script src="app/services/GetJsonService.js"></script>
  
  
  
@@ -386,9 +386,9 @@ footer.dark {
 	transition: margin .3s ease;
 	margin-top: 1px;
 }
-.main2.active {
+/*.main2.active {
 	margin-left: 5;
-}
+}*/
 .tools {
 	height: 100vh;
 	background: #222;