ADAM / AIAHTML5

Commit c9702e562458232f877382db8a3c61eb110b948c

Authored by Nikita Kulshreshtha
2 parents 380011e0 591e3041

Merge branch 'AAshowpinsviewhtml' into Develop

Inline Side-by-side
Showing 4 changed files with 337 additions and 44 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @c9702e5
1   -
2   -'use strict';
  1 +'use strict';
3 2  
4   -AIA.controller("TileViewListController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "DataService", "ModuleService",
5   -function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, DataService, ModuleService) {
  3 +AIA.controller("TileViewListController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "DataService", "ModuleService",
  4 +function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, BodyRegions, BodySystems, ViewOrientations, ImageTypes, DataService, ModuleService) {
6 5  
7 6  
8 7 $rootScope.OpenedTileData = [];
9 8 var ATLAS_ANATOMY = 'Atlas Anatomy';
10 9 var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
11 10 var CLINICAL_ANIMATION = 'Clinical Animations';
12   -
  11 + //variables to bind Filter by Controls
  12 + $scope.searchAAListViewData = [];
  13 + $scope.SelectedAAthumbImage = [];
  14 + $scope.SelectedAAImage = [];
  15 + $scope.SelectedAASummary = [];
  16 + $scope.SelectedAAId = [];
  17 + $scope.SelectedAATitle = [];
  18 + $scope.selectedAAListViewData = [];
  19 + $scope.filterstring = false;
  20 + $scope.AllBodyRegion = [];
  21 + $scope.AllBodySystem = [];
  22 + $scope.AllOrientation = [];
  23 + $scope.AllImageType = [];
  24 + $scope.query = {
  25 + selectedbodyregion: '',
  26 + selectedbodysystem: '',
  27 + selectedorientation: '',
  28 + selectedimagetype: '',
  29 + };
13 30 $scope.loadForModuleById = function (moduleId) {
14 31  
15 32 $scope.moduleId = moduleId;
16 33  
17 34 console.log('loadForModuleById is called')
18 35 $rootScope.moduleName = Modules[moduleId].Name;
19   -
20   - var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
21 36  
  37 + $scope.AllBodyRegion = BodyRegions;
  38 + $scope.AllBodySystem = BodySystems;
  39 + $scope.AllOrientation = ViewOrientations;
  40 + $scope.AllImageType = ImageTypes;
  41 + var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
22 42 .then(
23 43 function (result) {
  44 +
24 45 $scope.moduleLandingData = result;
25 46  
26   - console.log(JSON.stringify(result, null, 4));
  47 + //console.log(JSON.stringify(result, null, 4));
27 48 },
28 49 function (error) {
29 50 // handle errors here
30 51 console.log(' error: ' + error.statusText);
31 52 }
32 53 )
  54 +
  55 +
  56 +
  57 +
33 58 }
34 59  
35 60 $scope.openModuleItemView = function (event) {
... ... @@ -54,10 +79,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
54 79 $location.url('/module-item-view');
55 80 }
56 81  
57   -
58   - $scope.openModuleItem = function ()
59   - {
60   - debugger;
  82 + $scope.openModuleItem = function () {
61 83 var jsContentURL;
62 84 var moduleItemViewDivId;
63 85  
... ... @@ -65,7 +87,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
65 87 if ($rootScope.moduleName == ATLAS_ANATOMY) {
66 88  
67 89 jsContentURL = 'app/views/aa/atlas-anatomy-detail.html';
68   - moduleItemViewDivId = 'aaDetailPageDiv';
  90 + moduleItemViewDivId = 'aaDetailPageDiv';
69 91 }
70 92 else if ($rootScope.moduleName == CLINICAL_ANIMATION) {
71 93 //to do, in next phase of project
... ... @@ -110,7 +132,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
110 132  
111 133 $timeout(function () {
112 134 $compile(aaViewElement.contents())($scope);
113   -
  135 +
114 136 if (document.getElementById('aaDetailPageDiv') != null) {
115 137  
116 138 //0.4 added some stylesheets
... ... @@ -125,12 +147,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
125 147 canvas.height = parseInt(($scope.imageHeight));
126 148 canvas.width = parseInt($scope.imageWidth);
127 149 canvas.style.left = '0px';
128   - canvas.style.top = '0px';
  150 + canvas.style.top = '0px';
129 151 canvas.style.position = "absolute";
130 152  
131 153 $("#imageDiv").append(canvas);
132 154 $scope.context = canvas.getContext("2d")
133   -
  155 +
134 156 //6. Show all pins on AA opened item
135 157 $scope.showAllPins();
136 158 }
... ... @@ -139,13 +161,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
139 161  
140 162 function loadFailure() {
141 163 console.log('unable to load opened module ietem');
142   - return true;
  164 + return true;
143 165 }
144 166  
145   - function getImageHeightWidth()
146   - {
147   - $scope.imageWidth = this.width;
148   - $scope.imageHeight = this.height;
  167 + function getImageHeightWidth() {
  168 + $scope.imageWidth = this.width;
  169 + $scope.imageHeight = this.height;
149 170 }
150 171  
151 172 angular.element(document).ready(function (e) {
... ... @@ -164,9 +185,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
164 185 function (result) {
165 186 $scope.aaPinData = result.data.Root.Item;
166 187 debugger;
167   - angular.forEach($scope.aaPinData, function (value, key)
168   - {
169   -
  188 + angular.forEach($scope.aaPinData, function (value, key) {
  189 +
170 190 $scope.context.beginPath();
171 191 $scope.context.moveTo(value._PinX, value._PinY);
172 192 $scope.context.lineTo(value._HeadX, value._HeadY);
... ... @@ -175,14 +195,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
175 195 var headX = (parseInt(value._HeadX)) - 20;
176 196 var headY = (parseInt(value._HeadY)) - 15;
177 197  
178   - var img = new Image();
179   - img.src = "~/../../../content/images/noraml-pin.png";
180   - img.onload = function () {
  198 + var img = new Image();
  199 + img.src = "~/../../../content/images/noraml-pin.png";
  200 + img.onload = function () {
181 201 $scope.context.drawImage(img, headX, headY);
182 202 }
183 203  
184 204 })
185   -
  205 +
186 206 console.log(JSON.stringify(result, null, 4));
187 207 },
188 208 function (error) {
... ... @@ -193,8 +213,203 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
193 213 }
194 214  
195 215  
  216 + $scope.FilterByImage = function (moduleId, query) {
  217 + //alert(JSON.stringify(query));
  218 + $scope.moduleId = moduleId;
196 219  
197   -}]);
  220 + console.log('loadForModuleById is called')
  221 + $rootScope.moduleName = Modules[moduleId].Name;
  222 + while ($scope.searchAAListViewData.length) {
  223 + $scope.searchAAListViewData.pop();
  224 + }
  225 +
  226 + var filtercount = 0;
  227 + if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
  228 + filtercount = filtercount + 1;
  229 + localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion);
  230 + }
  231 + else {
  232 + localStorage.setItem("CurrentBodyRegion", '');
  233 + }
  234 +
  235 + if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
  236 + filtercount = filtercount + 1;
  237 + localStorage.setItem("CurrentBodySystem", query.selectedbodysystem);
  238 + }
  239 + else {
  240 + localStorage.setItem("CurrentBodySystem", '');
  241 + }
  242 +
  243 + if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) {
  244 + filtercount = filtercount + 1;
  245 + localStorage.setItem("CurrentOrientation", query.selectedorientation);
  246 + }
  247 + else {
  248 + localStorage.setItem("CurrentOrientation", '');
  249 + }
  250 +
  251 + if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) {
  252 + filtercount = filtercount + 1;
  253 + localStorage.setItem("CurrentImageType", query.selectedimagetype);
  254 + }
  255 + else {
  256 + localStorage.setItem("CurrentImageType", '');
  257 + }
  258 +
  259 + var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
  260 + .then(
  261 + function (result) {
  262 + alert("mukul");
  263 + // alert(JSON.stringify($scope.moduleLandingData));
  264 + $scope.moduleLandingData = result;
  265 + $scope.selectedAAListViewData = new jinqJs()
  266 + .from($scope.moduleLandingData.data.root.Item)
  267 + //.orderBy([{ field: '_Title', sort: 'asc' }])
  268 + .select();
  269 +
  270 + $('#grid-view').empty();
  271 + //alert(JSON.stringify($scope.selectedAAListViewData))
  272 + angular.forEach($scope.selectedAAListViewData, function (value, key) {
  273 +
  274 + var selectimg = true;
  275 + var count = 0;
  276 +
  277 +
  278 + if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
  279 + var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim()));
  280 + if (posbodyregion > -1) {
  281 + selectimg = true;
  282 + count = count + 1;
  283 +
  284 + }
  285 + else {
  286 + selectimg = false;
  287 + count = count - 1;
  288 + }
  289 +
  290 + }
  291 +
  292 + if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
  293 + var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem);
  294 + if (posbodysystem > -1) {
  295 + count = count + 1;
  296 + selectimg = true;
  297 + } else {
  298 + selectimg = false;
  299 + count = count - 1;
  300 + }
  301 + }
  302 +
  303 + if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) {
  304 + var posorientation = value._ViewOrientation.indexOf(query.selectedorientation);
  305 + if (posorientation > -1) {
  306 + count = count + 1;
  307 + selectimg = true;
  308 +
  309 + } else {
  310 + selectimg = false;
  311 + count = count - 1;
  312 + }
  313 +
  314 + }
  315 +
  316 + if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) {
  317 + var posimagetype = value._ImageType.indexOf(query.selectedimagetype);
  318 + if (posimagetype > -1) {
  319 + count = count + 1;
  320 + selectimg = true;
  321 +
  322 + } else {
  323 + selectimg = false;
  324 + count = count - 1;
  325 + }
  326 +
  327 + }
  328 +
  329 + if (selectimg === true && count >= filtercount) {
  330 +
  331 +
  332 + $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
  333 +
  334 + var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
  335 + + '<div class="thumbnail" >'
  336 + + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
  337 + + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
  338 +
  339 +
  340 + $compile($el)($scope);
  341 +
  342 + $(".sidebar").mCustomScrollbar({
  343 + autoHideScrollbar: true,
  344 + //theme:"rounded"
  345 + });
  346 +
  347 +
  348 + $scope.searchAAListViewData.push(
  349 + {
  350 + "_id": value._id,
  351 + "_ImageId": value._ImageId,
  352 + "_Title": value._Title,
  353 + "_ImageName": value._contentImage,
  354 + "_TileImageName": value._ThumbnailImage,
  355 + "_BodySystem": value._BodySystem,
  356 + "_BodyRegion": value._BodyRegion,
  357 + "_ViewOrientation": value._ViewOrientation,
  358 + "_ImageType": value._ImageType
  359 + //"$$hashKey": value._Summary
  360 +
  361 + });
  362 +
  363 + }
  364 +
  365 +
  366 + });
  367 +
  368 + //Show Error Message in case of gridview if no data is found
  369 + if ($scope.searchCIListViewData.length == 0) {
  370 +
  371 + var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
  372 + $compile($el)($scope);
  373 + }
  374 + console.log(JSON.stringify(result, null, 4));
  375 + },
  376 + function (error) {
  377 + // handle errors here
  378 + console.log(' error: ' + error.statusText);
  379 + }
  380 + )
198 381  
199   -
  382 + }
200 383  
  384 + $scope.Reset = function (moduleId, query) {
  385 +
  386 + query.selectedbodyregion = "";
  387 + query.selectedbodysystem = "";
  388 + query.selectedorientation = "";
  389 + query.selectedimagetype = "";
  390 + query.selectedspecialty = "";
  391 +
  392 +
  393 + //set localstorage values
  394 + localStorage.setItem("CurrentBodyRegion", '');
  395 + localStorage.setItem("CurrentBodySystem", '');
  396 + localStorage.setItem("CurrentOrientation", '');
  397 + localStorage.setItem("CurrentImageType", '');
  398 + //localStorage.setItem("CISelectedRowId", "");
  399 + //localStorage.setItem("CIListViewScroll", '');
  400 +
  401 + if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); }
  402 +
  403 + $('#ListViewDiv').scrollTop(0);
  404 +
  405 + // $scope.HideListViewDiv();
  406 +
  407 + $scope.filterstring = false;
  408 + //while ($scope.searchCIListViewData.length) {
  409 + // $scope.searchCIListViewData.pop();
  410 + //}
  411 +
  412 + $scope.FilterByImage(1, query);
  413 +
  414 + }
  415 +}]);
... ...
400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js
  View file @c9702e5
... ... @@ -152,6 +152,13 @@ AIA.constant(&#39;pages&#39;, [
152 152 pageUrl: 'app/widget/MainView.html',
153 153 pageController: 'HomeController'
154 154 },
  155 + {
  156 + name: 'Tiny View List view',
  157 + pageSlug: 'module-item-view',
  158 + pageUrl: 'app/views/module-item-view.html',
  159 + pageController: 'TileViewListController'
  160 +
  161 + },
155 162  
156 163 { // id:3,
157 164 name: 'Clinical Illustrations View',
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
  View file @c9702e5
... ... @@ -3,30 +3,101 @@
3 3 <div class="main" ng-init="loadForModuleById(1)">
4 4 <!--<div class="main">-->
5 5 <div class="col-sm-12" style="padding-left:25px; width:99%">
  6 +
  7 + <!--Filter section-->
  8 + <!--<div class="col-sm-12 stickey-area clsstickydiv">-->
  9 + <div class="breadcrumb">
  10 + <div class="row center-block">
  11 + <h5 class="text-center text-primary txt-white f15">Display Image By</h5>
  12 + <div class="col-md-2 col-sm-4 pad-lftrgt3">
  13 + <div class="form-group">
  14 + <h6 class="text-center text-primary txt-white f11">Body Region</h6>
  15 + <select ng-change="hideListViewDiv()" class="form-control input-sm" ng-model="query.selectedbodyregion" ng-options="item for item in AllBodyRegion track by item">
  16 + <option value="">All</option>
  17 + </select>
  18 + </div>
  19 + </div>
  20 + <div class="col-md-2 col-sm-4 pad-lftrgt3">
  21 + <div class="form-group">
  22 + <h6 class="text-center text-primary txt-white f11">Body System</h6>
  23 + <select ng-change="hideListViewDiv()" class="form-control input-sm" ng-model="query.selectedbodysystem" ng-options="item for item in AllBodySystem track by item">
  24 + <option value="">All</option>
  25 + </select>
  26 + </div>
  27 + </div>
  28 +
  29 + <div class="col-md-2 col-sm-4 pad-lftrgt3">
  30 + <div class="form-group">
  31 + <h6 class="text-center text-primary txt-white f11">View Orientation</h6>
  32 + <select ng-change="hideListViewDiv()" class="form-control input-sm" ng-model="query.selectedorientation" ng-options="item for item in AllOrientation track by item">
  33 + <option value="">All</option>
  34 + </select>
  35 + </div>
  36 + </div>
  37 + <div class="col-md-2 col-sm-4 pad-lftrgt3">
  38 + <div class="form-group">
  39 + <h6 class="text-center text-primary txt-white f11">Image Type</h6>
  40 + <select ng-change="hideListViewDiv()" class="form-control input-sm" ng-model="query.selectedimagetype" ng-options="item for item in AllImageType track by item">
  41 + <option value="">All</option>
  42 + </select>
  43 + </div>
  44 + </div>
  45 + <!--<div class="col-md-2 col-sm-4 pad-lftrgt3">
  46 + <div class="form-group">
  47 + <h6 class="text-center text-primary txt-white f11">Medical Speciality</h6>
  48 + <select ng-change="hideListViewDiv()" class="form-control input-sm" ng-model="query.selectedspecialty" ng-options="item for item in CIAllSpeciality track by item">
  49 + <option value="">All</option>
  50 + </select>
  51 + </div>
  52 + </div>-->
  53 + <div class="col-md-2 col-sm-4 pad-lftrgt3">
  54 + <div class="form-group">
  55 + <h6 class="text-center text-primary txt-white f11">Search</h6>
6 56  
  57 + <div class="btn-group col-xs-12" style="padding:0;">
  58 + <button type="button" class="btn btn-primary btn-sm col-xs-9" ng-click="Reset(1,query)"><i class="fa fa-eye"></i> Show All</button>
  59 + <button type="button" class="btn btn-primary btn-sm col-xs-3" ng-click="FilterByImage(1,query)">
  60 + <i class="fa fa-search"></i>
  61 + </button>
7 62  
8   - <!--<!-- Nav tabs -->
9   - <!--<ul class="nav nav-tabs" role="tablist">
  63 + </div>
  64 +
  65 +
  66 +
  67 + <!--<button class="btn btn-primary btn-sm" ng-click="ApplySearch(query)"><i class="fa fa-search"></i></button>&nbsp;<button class="btn btn-primary btn-sm col-md-9" ng-click="Reset(query)"><i class="fa fa-eye"></i> Show All</button>-->
  68 + </div>
  69 + </div>
  70 + </div>
  71 + </div>
  72 + <!--</div>-->
  73 + <!--End Filter Section-->
  74 + <!--<!-- Nav tabs -->
  75 + <!--<ul class="nav nav-tabs" role="tablist">
  76 + <li role="presentation" id="Male" class="active" ng-click="getDAViewList($event)"><a><i class="fa fa-mars-stroke "></i> Male</a></li>
  77 + <li role="presentation" id="Female" ng-click="getDAViewList($event)"><a><i class="fa fa-venus"></i> Female</a></li>
  78 + </ul>-->
  79 + <!--<!-- Nav tabs -->
  80 + <!--<ul class="nav nav-tabs" role="tablist">
10 81 <li role="presentation" id="Male" class="active" ng-click="getDAViewList($event)"><a><i class="fa fa-mars-stroke "></i> Male</a></li>
11 82 <li role="presentation" id="Female" ng-click="getDAViewList($event)"><a><i class="fa fa-venus"></i> Female</a></li>
12 83 </ul>-->
13   - <!-- Tab panes -->
14   - <div class="row tab-content">
15   - <!--<div role="tabpanel" class="tab-pane active" id="grid-view">-->
16   - <div role="tabpanel" class="tab-pane active" id="grid-view">
17   - <div ng-repeat="(key,val) in moduleLandingData.data.root.Item">
18   - <div id="{{val._Id}}" class="col-sm-3 col-lg-2" title="{{val._Title}}" ng-click="openModuleItemView($event)">
19   - <div class="thumbnail">
20   - <a href="#">
21   - <img class="tinyImg" id="{{val._Title}}" ng-src="../content/images/aa/thumbnails/{{val._TileImageName}}" data-ng-click="openModuleItemView($event)" alt="" title="">
22   - <div class="caption"><p>{{val._Title}}</p></div>
23   - </a>
  84 + <!-- Tab panes -->
  85 + <div class="row tab-content">
  86 + <!--<div role="tabpanel" class="tab-pane active" id="grid-view">-->
  87 + <div role="tabpanel" class="tab-pane active" id="grid-view">
  88 + <div ng-repeat="(key,val) in moduleLandingData.data.root.Item">
  89 + <div id="{{val._Id}}" class="col-sm-3 col-lg-2" title="{{val._Title}}" ng-click="openModuleItemView($event)">
  90 + <div class="thumbnail">
  91 + <a href="#">
  92 + <img class="tinyImg" id="{{val._Title}}" ng-src="../content/images/aa/thumbnails/{{val._TileImageName}}" data-ng-click="openModuleItemView($event)" alt="" title="">
  93 + <div class="caption"><p>{{val._Title}}</p></div>
  94 + </a>
  95 + </div>
24 96 </div>
25 97 </div>
26 98 </div>
27 99 </div>
28 100 </div>
29   - </div>
30 101  
31 102 <script>
32 103 $(function () {
... ...
400-SOURCECODE/AIAHTML5.Web/content/images/noraml-pin.png 0 → 100644
View file @c9702e5

1.69 KB