ecomp-portal-BE-os/src/main/webapp/WEB-INF/jsp/welcome.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   --%>
  20 <%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
  21 <%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
  22 <%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
  23
  24 <link rel="stylesheet" type="text/css" href="static/fusion/sample/css/slider.css">
  25 <link rel="stylesheet" type="text/css" href="static/fusion/sample/css/scribble.css" />
  26 <link rel="stylesheet" type="text/css" href="static/fusion/sample/css/spacegallery.css" />
  27 <link rel="stylesheet" href="static/fusion/css/att_angular_gridster/ui-gridster.css"/>
  28 <link rel="stylesheet" href="static/fusion/css/att_angular_gridster/sandbox-gridster.css"/>
  29
  30 <script src= "static/ebz/angular_js/angular.js"></script>
  31 <script src= "static/ebz/angular_js/angular-sanitize.js"></script>
  32
  33 <script src= "static/ebz/angular_js/app.js"></script>
  34 <script src= "static/ebz/angular_js/gestures.js"></script>
  35
  36 <script src="static/js/jquery-1.10.2.js"></script>
  37 <!-- <script src="static/fusion/js/jquery.resize.js"></script> -->
  38 <script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
  39 <script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
  40
  41 <script src= "static/ebz/angular_js/checklist-model.js"></script>
  42 <script src= "static/js/modalService.js"></script>
  43 <script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
  44 <script src="static/js/jquery-ui.js" type="text/javascript"></script>
  45 <script src="static/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
  46 <script src="static/ebz/sandbox/att-abs-tpls.min.js" type="text/javascript"></script>
  47 <style>
  48 .button--small, [class*=bg-] .button--small {
  49     font-size: 14px;
  50  };
  51 </style>
  52
  53 <style>
  54 .gridster-item-container .gridster-item-body{
  55 bottom:0px;
  56 }
  57 .gridster-item-container{
  58 min-height:50px;
  59 }
  60 .att-accordion {
  61     border-width: 0px;
  62 }
  63 </style>
  64
  65 <style>
  66   #myGallery {
  67         width: 100%;
  68         height: 400px;
  69   }
  70
  71   #myGallery img {
  72         border: 2px solid #52697E;
  73   }
  74
  75   a.loading {
  76         background: #fff url(../images/ajax_small.gif) no-repeat center;
  77   }
  78
  79   .center {
  80     margin-left: auto;
  81     margin-right: auto;
  82   }
  83
  84 </style>
  85
  86 <script type="text/javascript" src="static/fusion/sample/js/FusionCharts.js"></script> <!--  Charts -->
  87 <script type="text/javascript" src="static/fusion/sample/js/charts.js"></script> <!--  Charts -->
  88
  89 <script type="text/javascript" src="static/fusion/sample/js/slides.min.jquery.js"></script> <!-- Image Slider -->
  90 <script type="text/javascript" src="static/fusion/sample/js/scribble.js"></script>          <!-- Scribble -->
  91 <script type="text/javascript" src="static/fusion/sample/js/eye.js"></script>               <!-- Space Gallery -->
  92 <script type="text/javascript" src="static/fusion/sample/js/utils.js"></script>             <!-- Space Gallery -->
  93 <script type="text/javascript" src="static/fusion/sample/js/spacegallery.js"></script>      <!-- Space Gallery -->
  94
  95  <!--  Carousel rendering -->
  96   <script>
  97   (function($){
  98                 var initLayout = function() {
  99                         $('#myGallery').spacegallery({loadingClass: 'loading'});
 100                 };
 101
 102                 EYE.register(initLayout, 'init');
 103         })(jQuery)
 104   </script>
 105
 106   <!--  Slider rendering -->
 107   <script>
 108   $(function(){
 109           $('#slides').slides({
 110                         preload: true,
 111                         preloadImage: 'static/fusion/sample/images/loading.gif',
 112                         play: 5000,
 113                         pause: 10000,
 114                         hoverPause: true,
 115                         animationStart: function(current){
 116                                 $('.caption').animate({
 117                                         bottom:-35
 118                                 },100);
 119                                 if (window.console && console.log) {
 120                                         // example return of current slide number
 121                                         //console.log('animationStart on slide: ', current);
 122                                 };
 123                         },
 124                         animationComplete: function(current){
 125                                 $('.caption').animate({
 126                                         bottom:0
 127                                 },200);
 128                                 if (window.console && console.log) {
 129                                         // example return of current slide number
 130                                         //console.log('animationComplete on slide: ', current);
 131                                 };
 132                         },
 133                         slidesLoaded: function() {
 134                                 $('.caption').animate({
 135                                         bottom:0
 136                                 },200);
 137                         }
 138                 });
 139     });
 140
 141
 142   </script>
 143
 144 <div ng-controller="welcomeController">
 145         <fmt:message key="general.home" var="title" />
 146         <div>
 147                 <span style="font-weight:bold;font-size:11pt;">Welcome ${sessionScope.user.firstName} ${sessionScope.user.lastName}</span>&nbsp;
 148         (Last Login:&nbsp;<fmt:formatDate value="${sessionScope.user.lastLoginDate}" type="date" pattern="dd MMM yyyy hh:mma zzz" var="lastLogin" /> ${lastLogin})
 149         </div>
 150
 151         <div style="float:left; width:320px; height:320px; margin:10px 27px 10px 27px;color:#222222;text-shadow: 1px 1px 2px #A0A0A0;" >
 152             <p style="font-weight:bold;font-size:16pt;color:#0046B8;">Network </p>
 153             <p style="font-weight:bold;font-size:16pt;color:#0046B8;">Visualization </p>
 154
 155         </div>
 156
 157         <!-- Spacer required to center the Image slider (can also be used for content) -->
 158           <div style="float:right; width:120px; height:320px; margin:10px 27px 10px 10px;color:#222222;text-shadow: 1px 1px 2px #A0A0A0;">
 159             <p style="font-weight:bold;font-size:9pt;">
 160               You can toggle between the Image Slider and Carousel controls by clicking on the respective radio button below:
 161             </p>
 162             <input type="radio" name="viewer" onClick="$('#example').show();$('#myGallery').hide();" value="Slider" />Slider<br/>
 163             <input type="radio" name="viewer" onClick="$('#example').hide();$('#myGallery').show();" value="Carousel" />Carousel
 164
 165             <br/>
 166           </div>
 167
 168           <div id="container">
 169
 170                 <div style="position:relative">
 171                         <div id="myGallery" class="spacegallery" style="position:static">
 172                       <img src="static/fusion/sample/images/carousel/slide_b_drive_test_map.png" alt="Drive test analytics" />
 173                       <img src="static/fusion/sample/images/carousel/slide_b_ios_throughput.png" alt="MTSA - Nationwide DL throughput for iOS devices over cellular network" />
 174                       <img src="static/fusion/sample/images/carousel/slide_b_eppt_county.png" alt="Location based services county level drive test" />
 175                           <img src="static/fusion/sample/images/carousel/slide_b_lata_map.png" alt="Network demand data by LATA (2020 forecast)" />
 176                           <img src="static/fusion/sample/images/carousel/slide_b_eppt_regression.png" alt="Linear regression prediction of LBS/E911 drive test accuracy" />
 177                           <img src="static/fusion/sample/images/carousel/slide_b_nova_sdn_map.png" alt="SDN Simulator - SNRC Traffic" />
 178                       <span style="float:right; color:#222222;">(Click on Image to Rotate)</span>
 179                         </div>
 180                 </div>
 181                 <div id="example">
 182                   <div id="slides">
 183                         <div class="slides_container">
 184                           <div class="slide">
 185                                 <a href="#" title="Drive test analytics"><img src="static/fusion/sample/images/carousel/slide_b_drive_test_map.png" width="570" height="270" alt="Drive test analytics"></a>
 186                                 <div class="caption">
 187                                   <p>Drive test analytics</p>
 188                                 </div>
 189                           </div>
 190                           <div class="slide">
 191                                 <a href="doclib.htm" title="MTSA - Nationwide DL throughput for iOS devices over cellular network"><img src="static/fusion/sample/images/carousel/slide_b_ios_throughput.png" width="570" height="270" alt="MTSA - Nationwide DL throughput for iOS devices over cellular network"></a>
 192                                 <div class="caption">
 193                                   <p>Nationwide DL throughput for iOS devices over cellular network</p>
 194                                 </div>
 195                           </div>
 196                           <div class="slide">
 197                                 <a href="#" title="Network demand data by LATA (2020 forecast)"><img src="static/fusion/sample/images/carousel/slide_b_lata_map.png" width="570" height="270" alt="Network demand data by LATA (2020 forecast)"></a>
 198                                 <div class="caption">
 199                                   <p>Network demand data by LATA (2020 forecast)</p>
 200                                 </div>
 201                           </div>
 202                           <div class="slide">
 203                                 <a href="#" title="Location based services county level drive test"><img src="static/fusion/sample/images/carousel/slide_b_eppt_county.png" width="570" height="270" alt="Location based services county level drive test"></a>
 204                                 <div class="caption">
 205                                   <p>Location based services county level drive test</p>
 206                                 </div>
 207                           </div>
 208                           <div class="slide">
 209                                 <a href="broadcast_list.htm" title="SDN Simulator - SNRC Traffic"><img src="static/fusion/sample/images/carousel/slide_b_nova_sdn_map.png" width="570" height="270" alt="SDN Simulator - SNRC Traffic"></a>
 210                                 <div class="caption">
 211                                   <p>SDN Simulator - SNRC Traffic</p>
 212                                 </div>
 213                           </div>
 214                           <div class="slide">
 215                                 <a href="#" title="Linear regression prediction of LBS/E911 drive test accuracy"><img src="static/fusion/sample/images/carousel/slide_b_eppt_regression.png" width="570" height="270" alt="Linear regression prediction of LBS/E911 drive test accuracy"></a>
 216                                 <div class="caption" style="bottom:0">
 217                                   <p>Linear regression prediction of LBS/E911 drive test accuracy</p>
 218                                 </div>
 219                           </div>
 220                         </div>
 221                         <a href="#" class="prev"><img src="static/fusion/sample/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 222                         <a href="#" class="next"><img src="static/fusion/sample/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
 223                   </div>
 224                   <img src="static/fusion/sample/images/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
 225                 </div>
 226           </div>
 227
 228         <center>
 229         <div class="gridster-container">
 230             <div att-gridster att-gridster-options='gridsterOpts'>
 231                 <div att-gridster-item='item' ng-repeat="item in standardItems">
 232                     <div att-gridster-item-header
 233                          header-text={{item.headerText}}
 234                          sub-header-text={{item.subHeaderText}}>
 235                             <!--ICON BUTTONS PLACEHOLDER START-->
 236                             <div class="tileMinMaxBtn" ng-click="toggleMinMax($index,'')">
 237                                                                 <span class="tileMinMaxIcon">
 238                                                                         <i      class="icon-chevron-up" style="color:gray"  ng-show="item.max"></i>
 239                                                                         <i      class="icon-chevron-down" style="color:gray"  ng-hide="item.max"></i>
 240                                                                 </span>
 241                                                         </div>
 242                             <!--ICON BUTTONS PLACEHOLDER END-->
 243                     </div>
 244                         <div att-gridster-item-body >
 245                                 <!--ACTUAL BODY CONTENT START-->
 246                                         <div align="center" style="margin-top:10px;">
 247                                                 <div align="left" ng-if="item.headerText=='Dashboard' && item.max">
 248                                                         <label>&nbsp; Sample Charts</label><BR>
 249                                                         <iframe scrolling="no" frameBorder="0" style="width: 430px; height: 360px;" src="static/fusion/sample/html/wordcloud.html"></iframe>
 250                                                 </div>
 251                                                 <div ng-if="item.headerText=='Donut Chart' && item.max">
 252                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/donut_d3.html"></iframe>
 253                                                 </div>
 254                                                 <div ng-if="item.headerText=='Area Chart' && item.max">
 255                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/area_chart.html"></iframe>
 256                                                 </div>
 257                                                 <div ng-if="item.headerText=='Pie Chart' && item.max">
 258                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/pie_chart.html"></iframe>
 259                                                 </div>
 260                                                 <div ng-if="item.headerText=='Line Chart' && item.max">
 261                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/line_chart.html"></iframe>
 262                                                 </div>
 263                                                 <div ng-if="item.headerText=='Gauges' && item.max">
 264                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310pxx; height: 210px;" src="static/fusion/sample/html/d3_gauges_demo.html"></iframe>
 265                                                 </div>
 266
 267                                                 <div align="left" ng-if="item.headerText=='Traffic distribution by day of week' && item.max">
 268                                                         <att-tabs title="gTabs" class="tabs" >
 269                                                                 <floating-tabs ng-model='activeTabId' size="small"></floating-tabs>
 270                                                                 </att-Tabs>
 271                                                                 <div>
 272                                                                         <div id="Monday" align="left"><img src="static/fusion/sample/images/tunnels/1_mon.png" width=100% height=100% alt="Monday"></div>
 273                                                                                 <div id="Tuesday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/2_tue.png" width=100% height=100% alt="Tuesday"></div>
 274                                                                                 <div id="Wednesday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/3_wed.png" width=100% height=100% alt="Wednesday"></div>
 275                                                                                 <div id="Thursday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/4_thu.png" width=100% height=100% alt="Thursday"></div>
 276                                                                                 <div id="Friday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/5_fri.png" width=100% height=100% alt="Friday"></div>
 277                                                                                 <div id="Saturday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/6_sat.png" width=100% height=100% alt="Saturday"></div>
 278                                                                                 <div id="Sunday" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/7_sun.png" width=100% height=100% alt="Sunday"></div>
 279                                                                 </div>
 280                                                 </div>
 281                                                 <div align="left" ng-if="item.headerText=='Busy hour traffic analysis by day of week' && item.max">
 282                                                         <att-tabs title="gTabs2">
 283                                                                 <floating-tabs ng-model='activeTabId2' size="small"></floating-tabs>
 284                                                                 </att-Tabs>
 285                                                                 <div>
 286                                                                         <div id="Incoming" align="left"><img src="static/fusion/sample/images/tunnels/BH_DLSTX_IN.png" width=100% height=100% alt="Monday"></div>
 287                                                                                 <div id="Outgoing" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png" width=100% height=100% alt="Tuesday"></div>
 288                                                                                 <div id="Default" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat_Def.png" width=100% height=100% alt="Wednesday"></div>
 289                                                                                 <div id="Priority" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat_Priority.png" width=100% height=100% alt="Thursday"></div>
 290                                                                                 <div id="BHNational" class="hidden" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat.png" width=100% height=100% alt="Friday"></div>
 291                                                                 </div>
 292                                                 </div>
 293
 294                                                 <div align="left" ng-if="item.headerText=='Additional Samples' && item.max">
 295                                                         <label>&nbsp;Quick Links</label>
 296                                                                 <table att-table >
 297
 298                                                                                   <tr>
 299                                                                                     <td att-table-body width="90%" ><a href="" target="_blank">Contacts</a></td>
 300                                                                                     <td att-table-body width="10%">
 301                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 302                                                                                      </td>
 303                                                                                   </tr>
 304                                                                                   <tr>
 305                                                                                     <td att-table-body width="90%" ><a href="" target="_blank">Developer Program</a></td>
 306                                                                                         <td att-table-body width="10%">
 307                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 308                                                                                      </td>
 309                                                                                   </tr>
 310                                                                                   <tr>
 311                                                                                     <td att-table-body width="90%" ><a href="http://www.zkoss.org" target="_blank">ZK Framework</a></td>
 312                                                                                         <td att-table-body width="10%">
 313                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 314                                                                                      </td>
 315                                                                                   </tr>
 316                                                                                   <tr>
 317                                                                                     <td att-table-body width="90%" ><a href="http://jquery.com" target="_blank">JQuery</a></td>
 318                                                                                         <td att-table-body width="10%">
 319                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 320                                                                                      </td>
 321                                                                                   </tr>
 322                                                                                   <tr>
 323                                                                                     <td att-table-body width="90%" ><a href="force_cluster.html" target="_blank">RNC Visualization</a></td>
 324                                                                                         <td att-table-body width="10%">
 325                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 326                                                                                      </td>
 327                                                                                   </tr>
 328                                                                                   <tr>
 329                                                                                     <td att-table-body width="90%" ><a href="sample_heat_map.htm" target="">Heat Map</a></td>
 330                                                                                         <td att-table-body width="10%">
 331                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 332                                                                                      </td>
 333                                                                                   </tr>
 334                                                                                   <tr>
 335                                                                                         <td att-table-body width="90%" ><a href="sample_animated_map.htm" target="">Animated Map</a></td>
 336                                                                                         <td att-table-body width="10%">
 337                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 338                                                                                      </td>
 339                                                                                   </tr>
 340                                                                                   <tr>
 341                                                                                         <td att-table-body width="90%" ><a href="jbpm_drools.htm" target="_blank">Process Management</a></td>
 342                                                                                         <td att-table-body width="10%">
 343                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 344                                                                                      </td>
 345                                                                                   </tr>
 346                                                                                   <tr>
 347                                                                                         <td att-table-body width="90%" ><a href="chatRoom.htm">Chat Session</a></td>
 348                                                                                         <td att-table-body width="10%">
 349                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 350                                                                                      </td>
 351                                                                                   </tr>
 352                                                                         </table>
 353                                                 </div>
 354                                                 <div ng-if="item.headerText=='Sticky Notes' && item.max">
 355                                                         <div style="width:100%; height:400px" id="scribble-pad"><pre id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);"></pre></div>
 356                                                 </div>
 357                                                 <div ng-if="item.headerText=='Service Configuration' && item.max">
 358                                                                   <accordion close-others="true" css="att-accordion">
 359                                                                                                   <accordion-group heading="Service Configuration" is-open="group11.open">
 360                                                                                                                 <iframe scrolling="no" frameBorder="0" align="center" width="100%" height="400px"  src="static/fusion/sample/org_chart/example.html" ></iframe>
 361                                                                                                   </accordion-group>
 362                                                                                                   <accordion-group heading="VSP Service Configuration" is-open="group12.open">
 363                                                                                                         <iframe scrolling="no" frameBorder="0" align="center" width="100%" height="400px" src="static/fusion/sample/org_chart/example_vsp.html" ></iframe>
 364                                                                                                   </accordion-group>
 365                                                                                   </accordion>
 366                                                 </div>
 367
 368                                                 </div>
 369
 370                                 <!--ACTUAL BODY CONTENT END-->
 371                         </div>
 372                    <!--  <div att-gridster-item-footer
 373                          att-gridster-item-footer-link={{item.footerLink}}>
 374                         {{item.footerLinkText}}
 375                     </div> -->
 376                 </div>
 377             </div>
 378         </div>
 379     </center>
 380
 381 </div>
 382
 383 <script>
 384 $(document).ready(function(){
 385           $( "#rightIcon" ).hide();
 386                 $( "#leftIcon" ).show();
 387 });
 388 var app=angular.module("abs", ["att.abs", "modalServices","att.gridster","checklist-model"]);
 389 app.controller('welcomeController', function ($scope, modalService, $modal) {
 390
 391         $scope.gridsterOpts = {
 392                     columns: 3, // the width of the grid, in columns
 393                     pushing: true, // whether to push other items out of the way on move or resize
 394                     floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
 395                     width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
 396                     colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
 397                     rowHeight: 60, // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
 398                     margins: [10, 10], // the pixel distance between each widget
 399                     outerMargin: true, // whether margins apply to outer edges of the grid
 400                 swapping: true,
 401                 draggable: {
 402                     enabled: true, // whether dragging items is supported
 403                     stop: function(event, uiWidget, $element) {$scope.setCookie();} // optional callback fired when item is finished dragging
 404                  }
 405
 406                 };
 407
 408         /* $scope.gridsterOpts = {
 409             columns: 6,
 410             width: 'auto',
 411             colWidth: '230',
 412                         rowHeight: '120',
 413                         margins: [10, 10],
 414                         outerMargin: true,
 415                         pushing: true,
 416                         floating: true,
 417             swapping: true
 418                 }; */
 419
 420
 421         $scope.toggleMinMax = function(index, tileName){
 422                 if(tileName==''){
 423                         $scope.standardItems[index].max = !$scope.standardItems[index].max;
 424                         if($scope.standardItems[index].max)
 425                                 $scope.standardItems[index].sizeY=$scope.standardItems[index].maxHeight;
 426                         else
 427                                 $scope.standardItems[index].sizeY=0;
 428                 }else{
 429                         $scope.tileTemp = $scope.$eval(tileName);
 430                         var tileMax = $parse(tileName+'.max');
 431                         tileMax.assign($scope, !$scope.$eval(tileName).max);
 432                         var tileSizeY = $parse(tileName+'.sizeY');
 433                         if($scope.tileTemp.max)
 434                                 tileSizeY.assign($scope, $scope.tileTemp.maxHeight);
 435                         else
 436                                 tileSizeY.assign($scope, 0);
 437                 }
 438         };
 439                 // These map directly to gridsterItem options
 440                     // IMPORTANT: Items should be placed in the grid in the order in which
 441                     // they should appear.
 442                     // In most cases the sorting should be by row ASC, col ASC
 443                     $scope.standardItems = [{
 444                         sizeX: 1,
 445                         sizeY: 8,
 446                 maxHeight: 8,
 447                         row: 0,
 448                         col: 0,
 449                             headerText:'Dashboard',
 450                             max:false
 451
 452
 453                 },
 454                     {
 455                         sizeX: 1,
 456                         sizeY: 5,
 457                 maxHeight: 5,
 458                         row: 0,
 459                         col: 1,
 460                             headerText:'Donut Chart',
 461                             max:false
 462
 463                 },
 464                     {
 465                         sizeX: 1,
 466                         sizeY: 5,
 467                 maxHeight: 5,
 468                         row: 0,
 469                         col: 2,
 470                             headerText:'Area Chart',
 471                             max:true
 472                 },
 473                     {
 474                         sizeX: 1,
 475                         sizeY: 5,
 476                 maxHeight: 5,
 477                         row: 8,
 478                         col: 0,
 479                             headerText:'Pie Chart',
 480                             max:false
 481                 },
 482                     {
 483                         sizeX: 1,
 484                         sizeY: 5,
 485                 maxHeight: 5,
 486                         row: 8,
 487                         col: 1,
 488                             headerText:'Line Chart',
 489                             max:true
 490                 },
 491                     {
 492                         sizeX: 1,
 493                         sizeY: 5,
 494                 maxHeight: 5,
 495                         row: 8,
 496                         col: 2,
 497                             headerText:'Gauges',
 498                             max:false
 499                 },
 500                     {
 501                         sizeX: 1,
 502                         sizeY: 8,
 503                 maxHeight: 8,
 504                         row: 16,
 505                         col: 0,
 506                             headerText:'Traffic distribution by day of week',
 507                             max:false
 508                 },
 509                     {
 510                         sizeX: 1,
 511                         sizeY: 8,
 512                 maxHeight: 8,
 513                         row: 16,
 514                         col: 1,
 515                             headerText:'Busy hour traffic analysis by day of week',
 516                             max:false
 517                 },
 518                     {
 519                         sizeX: 1,
 520                         sizeY: 6,
 521                 maxHeight: 6,
 522                         row: 24,
 523                         col: 0,
 524                             headerText:'Additional Samples',
 525                             max:false
 526                 },
 527                     {
 528                         sizeX: 1,
 529                         sizeY: 8,
 530                 maxHeight: 8,
 531                         row: 24,
 532                         col: 1,
 533                             headerText:'Sticky Notes',
 534                             max:false
 535                 },
 536                     {
 537                         sizeX: 3,
 538                         sizeY: 10,
 539                 maxHeight: 10,
 540                         row: 32,
 541                         col: 0,
 542                             headerText:'Service Configuration',
 543                             max:false
 544                 }];
 545
 546         $.each($scope.standardItems, function(i, a){
 547                     $scope.toggleMinMax(i,'');
 548         });
 549          $scope.activeTabId = 'Monday';
 550         //for generic tabs
 551     $scope.gTabs = [{
 552             title: 'Monday',
 553             id: 'Monday',
 554             url: '#Monday',
 555             selected: true
 556         },{
 557             title: 'Tuesday',
 558             id: 'Tuesday',
 559             url: '#Tuesday'
 560         },{
 561             title: 'Wednesday',
 562             id: 'Wednesday',
 563             url: '#Wednesday'
 564         },{
 565             title: 'Thursday',
 566             id: 'Thursday',
 567             url: '#Thursday'
 568         },{
 569             title: 'Friday',
 570             id: 'Friday',
 571             url: '#Friday'
 572         },{
 573             title: 'Saturday',
 574             id: 'Saturday',
 575             url: '#Saturday'
 576         },{
 577             title: 'Sunday',
 578             id: 'Sunday',
 579             url: '#Sunday'
 580         }
 581     ];
 582
 583     $scope.activeTabId2 = 'Incoming';
 584         //for generic tabs
 585     $scope.gTabs2 = [{
 586             title: 'BH SNRC DLSTX - Incoming',
 587             id: 'Incoming',
 588             url: '#Incoming',
 589             selected: true
 590         },{
 591             title: 'BH SNRC DLSTX - Outgoing',
 592             id: 'Outgoing',
 593             url: '#Outgoing'
 594         },{
 595             title: 'BH National - Default',
 596             id: 'Default',
 597             url: '#Default'
 598         },{
 599             title: 'BH National - Priority',
 600             id: 'Priority',
 601             url: '#Priority'
 602         },{
 603             title: 'BH National',
 604             id: 'BHNational',
 605             url: '#BHNational'
 606         }
 607     ];
 608
 609     $scope.activeTabId3 = 'Incoming';
 610         //for generic tabs
 611     $scope.gTabs3 = [{
 612             title: 'BH SNRC DLSTX - Incoming',
 613             id: 'Incoming',
 614             url: '#Incoming',
 615             selected: true
 616         },{
 617             title: 'BH SNRC DLSTX - Outgoing',
 618             id: 'Outgoing',
 619             url: '#Outgoing'
 620         },{
 621             title: 'BH National - Default',
 622             id: 'Default',
 623             url: '#Default'
 624         },{
 625             title: 'BH National - Priority',
 626             id: 'Priority',
 627             url: '#Priority'
 628         },{
 629             title: 'BH National',
 630             id: 'BHNational',
 631             url: '#BHNational'
 632         }
 633     ];
 634
 635         /* $scope.$watch('activeTabId', function(newVal) {
 636                 alert(newval);
 637                 $('#'+newval).show();
 638         }, true); */
 639
 640         $scope.toggleEastToWest = function() {
 641                 $( "#toggle" ).toggle( 'slide');
 642                 if ($("#leftIcon").is(":visible")) {
 643                         $( "#rightIcon" ).show();
 644                         $( "#leftIcon" ).hide();
 645             }
 646                 else if ($("#rightIcon").is(":visible")) {
 647                 $( "#rightIcon" ).hide();
 648                         $( "#leftIcon" ).show();
 649             }
 650         };
 651
 652         $scope.group1 = {
 653             open: true
 654         };
 655         $scope.group2 = {
 656             open: true
 657         };
 658         $scope.group3 = {
 659             open: true
 660         };
 661         $scope.group4 = {
 662             open: true
 663         };
 664         $scope.group5 = {
 665             open: true
 666         };
 667         $scope.group6 = {
 668             open: true
 669         };
 670         $scope.group7 = {
 671             open: true
 672         };
 673         $scope.group71 = {
 674             open: true
 675         };
 676         $scope.group8 = {
 677             open: true
 678         };
 679         $scope.group9 = {
 680             open: true
 681         };
 682         $scope.group10 = {
 683             open: true
 684         };
 685         $scope.group11 = {
 686             open: true
 687         };
 688         $scope.group12 = {
 689             open: false
 690         };
 691 });
 692 </script>
 693
 694   <!-- Select the Slider control by default -->
 695   <script>$('input[name=viewer]:eq(1)').click();</script>