Implemented Title and List View Functionality in Atlas Anatomy

unknown
1 parent 2ca490b1
Showing 2 changed files with 116 additions and 24 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
@@ -33,13 +33,57 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         selectedorientation: '',
         selectedimagetype: '',
     };
-    $scope.loadForModuleById = function (moduleId) {
+    $scope.showTabButton = true;
+    $scope.isListViewDataLoaded = true;
+    $scope.setActiveTab = function (tabToSet) {
+       
+        $scope.activeTab = tabToSet;
+        localStorage.setItem("activeTab", $scope.activeTab);
+        if ($scope.activeTab == 1) {
+            $('#grid-view').css("display","block");
+            $('#list-view').css("display", "none");
+            $("#demoView").remove();
+        }
+        else
+        {
+            $('#grid-view').css("display", "none");
+            if ($scope.isListViewDataLoaded == true) {
+                var htm = '';
+                htm += "<table class='table table-hover table-fixed bg-white table-txt12'>  <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
+                $.ajax({
+                    url: '~/../content/data/json/aa/aa_dat_contentlist.json',
+                    dataType: "json",
+                    success: function (result) {
+                        $(result.root.Item).each(function (key, value) {
+                            console.log(key + " " + value);
+                            htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
+                            htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
+                            htm += "</tr>"
+                        });
+                        htm += "</tbody></table>";
+                        $("#list-view").append(htm);
+                        $compile(htm)($scope);
+                    }
+                });
+                $('#list-view').css("display", "block");
+                $scope.isListViewDataLoaded = false;
+            }
+            else
+            {
+                $('#list-view').css("display", "block");
+            }
+        }
+       
+    };
+  
+    $scope.loadForModuleById = function (moduleId) {
+       
         $scope.moduleId = moduleId;
-
+        $scope.activeTab = 1;
         console.log('loadForModuleById is called')
         $rootScope.moduleName = Modules[moduleId].Name;
-
+        $rootScope.currentActiveModuleTitle = $rootScope.moduleName;
         $scope.AllBodyRegion = BodyRegions;
         $scope.AllBodySystem = BodySystems;
         $scope.AllOrientation = ViewOrientations;
@@ -57,17 +101,34 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                    console.log(' error: ' + error.statusText);
                }
               )
+    }
+    //$scope.$on('$viewContentLoaded', function (event) {
+    //    $scope.loadForModuleById();
-
-    }
-
+    //});
+    $scope.isOpenBtnClicked = false;
     $scope.openModuleItemView = function (event) {
-
+      
         //0. Get selected Image Id
-        var moduleItemDataToBeSaved = event.target.id;
-
+        if ($scope.isListViewButtonClicked == true) {
+            if ($scope.isOpenBtnClicked == true) {
+               // alert($("#demoText").html());
+                var moduleItemDataToBeSaved = $("#demoText").html();
+                $scope.isOpenBtnClicked = false;
+            }
+            else {
+                var moduleItemDataToBeSavedID = event.currentTarget.id;
+                var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text();
+            }
+            }
+        else
+        {
+            var moduleItemDataToBeSaved = event.target.id;
+            $scope.isListViewButtonClicked = false;
+        }
+        
         //1.Filter selected module ietem data and get the pushed opened moduile array object
         $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
@@ -86,6 +147,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $location.url('/module-item-view');
     }
+
+    $scope.openListViewModuleItem = function (event) {
+        $("#demoView").remove();
+        var moduleItemDataToBeSavedID = event.currentTarget.id;
+        var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text();
+        $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
+        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
+        $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.OpenItemImagePath + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + moduleItemDataToBeSaved + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
+    }
+
+
     $scope.openModuleItem = function () {
         var jsContentURL;
         var moduleItemViewDivId;
@@ -158,8 +230,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                    $scope.relativeDimesion = 0;
                     $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
-               
-
                     //0.5 create canvas on the top of image so that I can draw a line over the canvas.
                     var canvas = document.createElement('canvas');
                     canvas.id = 'aaDetailViewCanvas';
@@ -169,14 +239,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     canvas.style.left = '0px';
                     canvas.style.top = '0px';
                     canvas.style.position = "absolute";
-                    //canvas.addEventListener('click', function () {
-                    //    alert('canvas clicked');
-                    //    var clickedPint = $scope.getMousePos(event);
-                    //    alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
-                    //})
                     $("#canvasDiv").append(canvas);
                     $scope.context = canvas.getContext("2d")
-
                     //6. Show all pins on AA opened item
                     $scope.showAllPins();
                     //7. Highlight all system body list in left side
@@ -380,12 +444,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                          $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
-                         var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
-                             + '<div class="thumbnail" >'
-                                        + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
-                                        + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
-
+                         
+                             var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
+                                 + '<div class="thumbnail" >'
+                                            + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
+                                            + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
+                         
                          $compile($el)($scope);
                          $(".sidebar").mCustomScrollbar({
@@ -1463,6 +1528,32 @@ function showSelectedPins(event) {
     });
 }
+
+function openModuleItemView(event) {
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isListViewButtonClicked = true;
+    scope.$apply(function () {
+        scope.openModuleItemView(event);
+    });
+}
+
+function openListViewModuleItem(event) {
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isListViewButtonClicked = true;
+    scope.$apply(function () {
+        scope.openListViewModuleItem(event);
+    });
+}
+
+function openCurrentView(event) {
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isOpenBtnClicked = true;
+    scope.$apply(function () {
+        scope.openModuleItemView(event);
+    });
+
+}
+
 function onZoom(scope) {
     //$(".common-drag").remove();
@@ -82,7 +82,7 @@
             <li role="presentation" id="Female" ng-click="getDAViewList($event)"><a><i class="fa fa-venus"></i> Female</a></li>
         </ul>-->
                 <!-- Tab panes -->
-                <div class="row tab-content">
+                <div class="row tab-content" id="viewList">
                     <!--<div role="tabpanel" class="tab-pane active" id="grid-view">-->
                     <div role="tabpanel" class="tab-pane active" id="grid-view">
                         <div ng-repeat="(key,val) in moduleLandingData.data.root.Item | orderBy:'_Title' ">
@@ -96,7 +96,8 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                    <div class="col-xs-12" id="list-view"></div>
+                    </div>
             </div>
 <script>