ecomp-sdk-app/src/main/webapp/WEB-INF/jsp/welcome.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal SDK
   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/scribble.css" />
  25
  26 <link rel="stylesheet" type="text/css" href="static/fusion/sample/css/welcome.css" />
  27
  28 <script src="static/js/jquery-1.10.2.js"></script>
  29 <script src="app/fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>
  30
  31 <!-- <script src="static/fusion/js/jquery.resize.js"></script> -->
  32 <link rel="stylesheet" href="static/fusion/css/att_angular_gridster/ui-gridster.css"/>
  33 <link rel="stylesheet" href="static/fusion/css/att_angular_gridster/sandbox-gridster.css"/>
  34 <script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
  35 <script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
  36 <script src="app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
  37
  38 <!--for line Chart and  Area Chart-->
  39 <script src="static/fusion/d3/js/d3.v3.min.js"></script>
  40 <script src="static/fusion/d3/js/nv.d3.min.js"></script>
  41 <script src="static/fusion/d3/js/models/axis.min.js"></script>
  42
  43 <!-- Style for line Chart and area chart  -->
  44 <link rel="stylesheet" type="text/css" href="static/fusion/d3/css/nv.d3.css">
  45
  46
  47 <script type="text/javascript" src="static/fusion/sample/js/FusionCharts.js"></script>                  <!--  Charts -->
  48 <script type="text/javascript" src="static/fusion/sample/js/charts.js"></script>                                <!--  Charts -->
  49 <script type="text/javascript" src="static/fusion/sample/js/scribble.js"></script>                              <!-- Scribble -->
  50
  51 <!--  Data for Line and Area Charts -->
  52 <script>
  53 historicalBarChart=[{"type":"line","key":"AP_CPU","yAxis":"1","values":[{"x":1388552400000,"y":2.13},{"x":1388552400000,"y":5.0},{"x":1388552400000,"y":2.36},{"x":1388552400000,"y":10.0},{"x":1391230800000,"y":3.15},{"x":1391230800000,"y":2.88},{"x":1391230800000,"y":3.0},{"x":1391230800000,"y":4.0},{"x":1393650000000,"y":8.0},{"x":1393650000000,"y":3.93},{"x":1393650000000,"y":4.27},{"x":1393650000000,"y":4.0},{"x":1396324800000,"y":4.25},{"x":1396324800000,"y":5.35},{"x":1396324800000,"y":5.92},{"x":1396324800000,"y":12.0},{"x":1398916800000,"y":5.55},{"x":1398916800000,"y":4.89},{"x":1398916800000,"y":5.01},{"x":1398916800000,"y":3.27},{"x":1401595200000,"y":6.27},{"x":1401595200000,"y":9.17},{"x":1401595200000,"y":9.31},{"x":1401595200000,"y":6.07},{"x":1404187200000,"y":8.37},{"x":1404187200000,"y":8.11},{"x":1404187200000,"y":8.84},{"x":1404187200000,"y":8.93},{"x":1406865600000,"y":11.79},{"x":1406865600000,"y":12.22},{"x":1406865600000,"y":12.6},{"x":1406865600000,"y":11.61},{"x":1409544000000,"y":15.27},{"x":1409544000000,"y":19.09},{"x":1409544000000,"y":16.09},{"x":1409544000000,"y":18.66},{"x":1412136000000,"y":18.4},{"x":1412136000000,"y":22.05},{"x":1412136000000,"y":21.66},{"x":1412136000000,"y":19.04},{"x":1414814400000,"y":19.13},{"x":1414814400000,"y":19.61},{"x":1414814400000,"y":17.61},{"x":1414814400000,"y":17.5},{"x":1417410000000,"y":19.0},{"x":1417410000000,"y":15.73},{"x":1420088400000,"y":9.67},{"x":1420088400000,"y":15.19},{"x":1420088400000,"y":15.02},{"x":1420088400000,"y":9.62333333333333},{"x":1422766800000,"y":16.95},{"x":1422766800000,"y":14.29},{"x":1425186000000,"y":12.9},{"x":1425186000000,"y":16.1166666666667}]},{"type":"line","key":"ROUTER_CPU","yAxis":"1","values":[{"x":1388552400000,"y":3.0},{"x":1388552400000,"y":4.0},{"x":1388552400000,"y":4.89},{"x":1388552400000,"y":7.0},{"x":1391230800000,"y":4.57},{"x":1391230800000,"y":4.0},{"x":1391230800000,"y":4.0},{"x":1391230800000,"y":7.0},{"x":1393650000000,"y":7.0},{"x":1393650000000,"y":4.18},{"x":1393650000000,"y":5.0},{"x":1393650000000,"y":5.0},{"x":1396324800000,"y":5.0},{"x":1396324800000,"y":5.0},{"x":1396324800000,"y":5.06},{"x":1396324800000,"y":6.0},{"x":1398916800000,"y":5.0},{"x":1398916800000,"y":5.0},{"x":1398916800000,"y":5.0},{"x":1398916800000,"y":5.0},{"x":1401595200000,"y":6.0},{"x":1401595200000,"y":6.09},{"x":1401595200000,"y":6.0},{"x":1401595200000,"y":6.0},{"x":1404187200000,"y":6.36},{"x":1404187200000,"y":7.0},{"x":1404187200000,"y":7.0},{"x":1404187200000,"y":7.0},{"x":1406865600000,"y":7.0},{"x":1406865600000,"y":7.02},{"x":1406865600000,"y":7.24},{"x":1406865600000,"y":7.0},{"x":1409544000000,"y":8.23},{"x":1409544000000,"y":8.11},{"x":1409544000000,"y":8.12},{"x":1409544000000,"y":8.03},{"x":1412136000000,"y":9.0},{"x":1412136000000,"y":8.93},{"x":1412136000000,"y":8.57},{"x":1412136000000,"y":9.0},{"x":1414814400000,"y":5.97},{"x":1414814400000,"y":6.0},{"x":1414814400000,"y":9.0},{"x":1414814400000,"y":9.0},{"x":1417410000000,"y":9.0},{"x":1417410000000,"y":8.78},{"x":1420088400000,"y":3.0},{"x":1420088400000,"y":2.01},{"x":1420088400000,"y":3.0},{"x":1420088400000,"y":3.01},{"x":1422766800000,"y":2.67},{"x":1422766800000,"y":2.0},{"x":1425186000000,"y":2.8},{"x":1425186000000,"y":3.63333333333333}]},{"type":"line","key":"SCTP_CPU","yAxis":"1","values":[{"x":1388552400000,"y":7.0},{"x":1388552400000,"y":10.0},{"x":1388552400000,"y":8.27},{"x":1388552400000,"y":8.0},{"x":1391230800000,"y":10.02},{"x":1391230800000,"y":8.04},{"x":1391230800000,"y":9.0},{"x":1391230800000,"y":10.0},{"x":1393650000000,"y":12.0},{"x":1393650000000,"y":10.04},{"x":1393650000000,"y":11.16},{"x":1393650000000,"y":10.0},{"x":1396324800000,"y":10.7},{"x":1396324800000,"y":13.31},{"x":1396324800000,"y":12.73},{"x":1396324800000,"y":9.0},{"x":1398916800000,"y":12.41},{"x":1398916800000,"y":11.95},{"x":1398916800000,"y":12.82},{"x":1398916800000,"y":9.58},{"x":1401595200000,"y":11.28},{"x":1401595200000,"y":14.01},{"x":1401595200000,"y":14.63},{"x":1401595200000,"y":11.83},{"x":1404187200000,"y":14.06},{"x":1404187200000,"y":13.96},{"x":1404187200000,"y":14.66},{"x":1404187200000,"y":14.36},{"x":1406865600000,"y":16.6},{"x":1406865600000,"y":16.95},{"x":1406865600000,"y":17.11},{"x":1406865600000,"y":15.94},{"x":1409544000000,"y":19.86},{"x":1409544000000,"y":22.97},{"x":1409544000000,"y":21.56},{"x":1409544000000,"y":24.55},{"x":1412136000000,"y":22.66},{"x":1412136000000,"y":26.79},{"x":1412136000000,"y":26.54},{"x":1412136000000,"y":25.35},{"x":1414814400000,"y":21.0},{"x":1414814400000,"y":20.35},{"x":1414814400000,"y":21.93},{"x":1414814400000,"y":23.63},{"x":1417410000000,"y":24.0},{"x":1417410000000,"y":21.43},{"x":1420088400000,"y":12.63},{"x":1420088400000,"y":25.14},{"x":1420088400000,"y":21.85},{"x":1420088400000,"y":12.5766666666667},{"x":1422766800000,"y":26.3},{"x":1422766800000,"y":24.4},{"x":1425186000000,"y":23.3833333333333},{"x":1425186000000,"y":24.5833333333333}]},{"type":"line","key":"DP_CPU","yAxis":"1","values":[{"x":1388552400000,"y":2.0},{"x":1388552400000,"y":5.0},{"x":1388552400000,"y":2.17},{"x":1388552400000,"y":2.0},{"x":1391230800000,"y":3.01},{"x":1391230800000,"y":2.56},{"x":1391230800000,"y":3.0},{"x":1391230800000,"y":9.0},{"x":1393650000000,"y":10.0},{"x":1393650000000,"y":3.64},{"x":1393650000000,"y":4.06},{"x":1393650000000,"y":4.0},{"x":1396324800000,"y":4.04},{"x":1396324800000,"y":5.11},{"x":1396324800000,"y":5.9},{"x":1396324800000,"y":8.0},{"x":1398916800000,"y":5.08},{"x":1398916800000,"y":4.65},{"x":1398916800000,"y":4.74},{"x":1398916800000,"y":2.98},{"x":1401595200000,"y":6.13},{"x":1401595200000,"y":8.98},{"x":1401595200000,"y":9.22},{"x":1401595200000,"y":5.84},{"x":1404187200000,"y":8.12},{"x":1404187200000,"y":7.89},{"x":1404187200000,"y":8.41},{"x":1404187200000,"y":8.47},{"x":1406865600000,"y":11.06},{"x":1406865600000,"y":11.84},{"x":1406865600000,"y":11.92},{"x":1406865600000,"y":10.8},{"x":1409544000000,"y":14.58},{"x":1409544000000,"y":18.39},{"x":1409544000000,"y":15.5},{"x":1409544000000,"y":18.33},{"x":1412136000000,"y":18.01},{"x":1412136000000,"y":21.3},{"x":1412136000000,"y":21.11},{"x":1412136000000,"y":18.37},{"x":1414814400000,"y":18.59},{"x":1414814400000,"y":18.81},{"x":1414814400000,"y":17.13},{"x":1414814400000,"y":16.92},{"x":1417410000000,"y":18.0},{"x":1417410000000,"y":15.18},{"x":1420088400000,"y":9.16},{"x":1420088400000,"y":12.13},{"x":1420088400000,"y":11.76},{"x":1420088400000,"y":9.31},{"x":1422766800000,"y":13.47},{"x":1422766800000,"y":13.41},{"x":1425186000000,"y":12.2333333333333},{"x":1425186000000,"y":12.4}]}];
  54 </script>
  55
  56         <script>
  57                 $(function(){
  58
  59
  60                         /* area chart and line chart titles */
  61                         d3.select("#areaChart svg").append("text").attr("x", 200).attr("y", 15)
  62                                         .attr("text-anchor", "middle").style("font-size", "16px").text(
  63                                                         "Data Usage in NJ Locations");
  64
  65                         d3.select("#lineChart svg").append("text").attr("x", 200).attr("y", 15)
  66                                         .attr("text-anchor", "middle").style("font-size", "16px").text(
  67                                                         "Data Usage in NJ Locations");
  68         });
  69 </script>
  70
  71 <div ng-controller="welcomeController">
  72         <fmt:message key="general.home" var="title" />
  73         <div>
  74                 <span style="font-weight:bold;font-size:11pt;">Welcome ${sessionScope.user.firstName} ${sessionScope.user.lastName}</span>&nbsp;
  75         (Last Login:&nbsp;<fmt:formatDate value="${sessionScope.user.lastLoginDate}" type="date" pattern="dd MMM yyyy hh:mma zzz" var="lastLogin" /> ${lastLogin})
  76         </div>
  77
  78         <div id="gridDiv" class="center">
  79         <div class="gridster-container">
  80             <div att-gridster att-gridster-options='gridsterOpts'>
  81                 <div att-gridster-item='item' ng-repeat="item in standardItems">
  82                     <div att-gridster-item-header
  83                          header-text={{item.headerText}}
  84                          sub-header-text={{item.subHeaderText}}>
  85                             <!--ICON BUTTONS PLACEHOLDER START-->
  86                             <div class="tileMinMaxBtn" ng-click="toggleMinMax($index,'')">
  87                                                                 <span class="tileMinMaxIcon">
  88                                                                         <i      class="ion-chevron-up" style="color:gray"  ng-show="item.max"></i>
  89                                                                         <i      class="ion-chevron-down" style="color:gray"  ng-hide="item.max"></i>
  90                                                                 </span>
  91                                                         </div>
  92                             <!--ICON BUTTONS PLACEHOLDER END-->
  93                     </div>
  94                         <div att-gridster-item-body >
  95                                 <!--ACTUAL BODY CONTENT START-->
  96                                         <div align="center" style="margin-top:10px;">
  97                                                 <div align="left" ng-if="item.headerText=='Dashboard' && item.max">
  98                                                         <label>&nbsp; Sample Charts</label><BR>
  99                                                         <iframe scrolling="no" frameBorder="0" style="width: 430px; height: 360px;" src="static/fusion/sample/html/wordcloud.html"></iframe>
 100                                                 </div>
 101                                                 <div ng-if="item.headerText=='Donut Chart' && item.max">
 102                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/donut_d3.html"></iframe>
 103                                                 </div>
 104                                                 <div ng-if="item.headerText=='Area Chart' && item.max">
 105                                                         <div id="areaChart">
 106                                                                 <div> <svg></svg> </div>
 107                                                                 <script src="static/fusion/sample/html/js/area_chart.min.js"></script>
 108                                                         </div>
 109                                                         <!-- <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/area_chart.html"></iframe> -->
 110                                                 </div>
 111                                                 <div ng-if="item.headerText=='Pie Chart' && item.max">
 112                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/pie_chart.html"></iframe>
 113                                                 </div>
 114                                                 <div ng-if="item.headerText=='Line Chart' && item.max">
 115                                                         <div id="lineChart">
 116                                                                 <div> <svg></svg> </div>
 117                                                                 <script src="static/fusion/sample/html/js/line_chart.min.js"></script>
 118                                                         </div>
 119
 120 <!--                                                    <iframe scrolling="no" frameBorder="0"  style="width: 310px; height: 210px;" src="static/fusion/sample/html/line_chart.html"></iframe> -->
 121                                                 </div>
 122                                                 <div ng-if="item.headerText=='Gauges' && item.max">
 123                                                         <iframe scrolling="no" frameBorder="0"  style="width: 310pxx; height: 210px;" src="static/fusion/sample/html/d3_gauges_demo.html"></iframe>
 124                                                 </div>
 125
 126                                                 <div align="left" ng-if="item.headerText=='Traffic distribution by day of week' && item.max">
 127                                                                 <div id = "selectedTrafficDay">
 128                                                                         <ul>
 129                                                                                 <li ng-repeat="Daytab in selectedTrafficDay"
 130                                                                                 ng-class="{active1:isActiveTab1(Daytab.url)}"
 131                                                                                 ng-click="onClickTab1(Daytab)">{{Daytab.title}}</li>
 132                                                                         </ul>
 133                                                                         <div id = "SelectedTrafficeDayView">
 134                                                                                 <div ng-include="currentSelectedDayTab"></div>
 135                                                                         </div>
 136                                                                         <script type="text/ng-template" id="#Monday">
 137                                                                                         <div id="Monday"  align="centers"><img src="static/fusion/sample/images/tunnels/1_mon.png" width=100% height=100% alt="Monday"></div>
 138                                                                                 </script>
 139                                                                                 <script type="text/ng-template" id="#Tuesday">
 140                                                                                         <div id="Tuesday"  align="center"><img src="static/fusion/sample/images/tunnels/2_tue.png" width=100% height=100% alt="Tuesday"></div>
 141                                                                                 </script>
 142                                                                                 <script type="text/ng-template" id="#Wednesday">
 143                                                                                         <div id="Wednesday" align="center"><img src="static/fusion/sample/images/tunnels/3_wed.png" width=100% height=100% alt="Wednesday"></div>
 144                                                                                 </script>
 145                                                                                 <script type="text/ng-template" id="#Thursday">
 146                                                                                         <div id="Thursday" align="center"><img src="static/fusion/sample/images/tunnels/4_thu.png" width=100% height=100% alt="Thursday"></div>
 147                                                                                 </script>
 148                                                                                 <script type="text/ng-template" id="#Friday">
 149                                                                                         <div id="Friday"  align="center"><img src="static/fusion/sample/images/tunnels/5_fri.png" width=100% height=100% alt="Friday"></div>
 150                                                                                 </script>
 151                                                                                 <script type="text/ng-template" id="#Saturday">
 152                                                                                         <div id="Saturday"  align="center"><img src="static/fusion/sample/images/tunnels/6_sat.png" width=100% height=100% alt="Saturday"></div>
 153                                                                                 </script>
 154                                                                                 <script type="text/ng-template" id="#Sunday">
 155                                                                                         <div id="Sunday"  align="center"><img src="static/fusion/sample/images/tunnels/7_sun.png" width=100% height=100% alt="Sunday"></div>
 156                                                                                 </script>
 157                                                                 </div>
 158                                                 </div>
 159
 160                                                 <div align="left" ng-if="item.headerText=='Busy hour traffic analysis by day of week' && item.max">
 161                                                                 <div id = "BusyHourTraffic">
 162                                                                         <ul>
 163                                                                                 <li ng-repeat="TrafficTab in BusyHourTraffic"
 164                                                                                 ng-class="{active2:isActiveTab2(TrafficTab.url)}"
 165                                                                                 ng-click="onClickTab2(TrafficTab)">{{TrafficTab.title}}</li>
 166                                                                         </ul>
 167                                                                         <div id = "BusyHourTrafficView">
 168                                                                                 <div ng-include="currentSelectedBusyHourTraffic"></div>
 169                                                                         </div>
 170                                                                         <script type="text/ng-template" id="#Incoming">
 171                                                                                 <div id="Incoming" align="left"><img src="static/fusion/sample/images/tunnels/BH_DLSTX_IN.png" width=100% height=100%></div>
 172                                                                         </script>
 173                                                                                 <script type="text/ng-template" id="#Outgoing">
 174                                                                                         <div id="Outgoing" align="center"><img src="static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png" width=100% height=100%></div>
 175                                                                                 </script>
 176                                                                                 <script type="text/ng-template" id="#Default">
 177                                                                                         <div id="Default" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat_Def.png" width=100% height=100%></div>
 178                                                                                 </script>
 179                                                                                 <script type="text/ng-template" id="#Priority">
 180                                                                                         <div id="Priority" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat_Priority.png" width=100% height=100%></div>
 181                                                                                 </script>
 182                                                                                 <script type="text/ng-template" id="#BHNational">
 183                                                                                         <div id="BHNational" align="center"><img src="static/fusion/sample/images/tunnels/BH_Nat.png" width=100% height=100%></div>
 184                                                                                 </script>
 185                                                                         </div>
 186                                                 </div>
 187
 188                                                 <div align="left" ng-if="item.headerText=='Additional Samples' && item.max">
 189                                                         <label>&nbsp;Quick Links</label>
 190                                                                 <table att-table >
 191
 192
 193                                                                                   <tr>
 194                                                                                     <td att-table-body width="90%" ><a href="http://jquery.com" target="_blank">JQuery</a></td>
 195                                                                                         <td att-table-body width="10%">
 196                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 197                                                                                      </td>
 198                                                                                   </tr>
 199
 200                                                                                 <!--   <tr>
 201                                                                                     <td att-table-body width="90%" ><a href="sample_heat_map.htm" target="">Heat Map</a></td>
 202                                                                                         <td att-table-body width="10%">
 203                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 204                                                                                      </td>
 205                                                                                   </tr> -->
 206                                                                                   <tr>
 207                                                                                         <td att-table-body width="90%" ><a href="leafletMap.htm" target="">Animated Map</a></td>
 208                                                                                         <td att-table-body width="10%">
 209                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 210                                                                                      </td>
 211                                                                                   </tr>
 212                                                                                   <tr>
 213                                                                                         <td att-table-body width="90%" ><a href="collaborate_list.htm">Chat Session</a></td>
 214                                                                                         <td att-table-body width="10%">
 215                                                                                         <a ng-click="removeRole();" ><img src="static/fusion/sample/images/deleteicon.gif"></a>
 216                                                                                      </td>
 217                                                                                   </tr>
 218                                                                         </table>
 219                                                 </div>
 220                                                 <div ng-if="item.headerText=='Sticky Notes' && item.max">
 221                                                         <div style="width:100%; height:400px" id="scribble-pad"><pre id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);"></pre></div>
 222                                                 </div>
 223
 224                                                         <div ng-if="item.headerText=='Service Configuration' && item.max">
 225                                                                 <accordion close-others="true" css="att-accordion">
 226                                                                           <accordion-group heading="Service Configuration" is-open="group11.open">
 227                                                                                         <iframe style="overflow:auto" frameBorder="0" align="center" width="100%" height="400px"  src="static/fusion/sample/org_chart/example.html" ></iframe>
 228                                                                           </accordion-group>
 229                                                                           <accordion-group heading="VSP Service Configuration" is-open="group12.open">
 230                                                                                 <iframe style="overflow:auto" frameBorder="0" align="center" width="100%" height="400px" src="static/fusion/sample/org_chart/example_vsp.html" ></iframe>
 231                                                                           </accordion-group>
 232                                                           </accordion>
 233
 234                                                         </div>
 235
 236                                                 </div>
 237
 238                                                 <!--ACTUAL BODY CONTENT END-->
 239                                         </div>
 240
 241                                 </div>
 242                         </div>
 243                 </div>
 244         </div> <!-- End gridDiv -->
 245
 246 </div>
 247
 248 <script>
 249         $(document).ready(function() {
 250                 $("#rightIcon").hide();
 251                 $("#leftIcon").show();
 252         });
 253
 254         app.controller('welcomeController',function($scope, modalService, $modal) {
 255                                                 $scope.gridsterOpts = {
 256                                                         columns : 3, // the width of the grid, in columns
 257                                                         pushing : true, // whether to push other items out of the way on move or resize
 258                                                         floating : true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
 259                                                         width : 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
 260                                                         colWidth : 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
 261                                                         rowHeight : 60, // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
 262                                                         margins : [ 10, 10 ], // the pixel distance between each widget
 263                                                         outerMargin : true, // whether margins apply to outer edges of the grid
 264                                                         swapping : true,
 265                                                         draggable : {
 266                                                                 enabled : true, // whether dragging items is supported
 267                                         stop: function(event, uiWidget, $element) {$scope.setCookie();} // optional callback fired when item is finished dragging
 268                                                         }
 269
 270                                                 };
 271
 272                                                 /* $scope.gridsterOpts = {
 273                                                         columns: 6,
 274                                                         width: 'auto',
 275                                                         colWidth: '230',
 276                                                                 rowHeight: '120',
 277                                                                 margins: [10, 10],
 278                                                                 outerMargin: true,
 279                                                                 pushing: true,
 280                                                                 floating: true,
 281                                                         swapping: true
 282                                                         }; */
 283
 284                                                 $scope.toggleMinMax = function(index, tileName) {
 285                                                         if (tileName == '') {
 286                                                                 $scope.standardItems[index].max = !$scope.standardItems[index].max;
 287                                                                 if ($scope.standardItems[index].max)
 288                                                                         $scope.standardItems[index].sizeY = $scope.standardItems[index].maxHeight;
 289                                                                 else
 290                                                                         $scope.standardItems[index].sizeY = 0;
 291                                                         } else {
 292                                                                 $scope.tileTemp = $scope.$eval(tileName);
 293                                                                 var tileMax = $parse(tileName + '.max');
 294                                                                 tileMax.assign($scope,!$scope.$eval(tileName).max);
 295                                                                 var tileSizeY = $parse(tileName + '.sizeY');
 296                                                                 if ($scope.tileTemp.max)
 297                                                                         tileSizeY.assign($scope,$scope.tileTemp.maxHeight);
 298                                                                 else
 299                                                                         tileSizeY.assign($scope, 0);
 300                                                         }
 301                                                 };
 302
 303
 304
 305                                                 // These map directly to gridsterItem options
 306                                                 // IMPORTANT: Items should be placed in the grid in the order in which
 307                                                 // they should appear.
 308                                                 // In most cases the sorting should be by row ASC, col ASC
 309                                         $scope.standardItems = [{
 310                                                                         sizeX : 1,
 311                                                                         sizeY : 8,
 312                                                                         maxHeight : 8,
 313                                                                         row : 0,
 314                                                                         col : 0,
 315                                                                         headerText : 'Dashboard',
 316                                                                         max : false
 317
 318                                                                 },
 319                                                                 {
 320                                                                         sizeX : 1,
 321                                                                         sizeY : 5,
 322                                                                         maxHeight : 5,
 323                                                                         row : 0,
 324                                                                         col : 1,
 325                                                                         headerText : 'Donut Chart',
 326                                                                         max : false
 327
 328                                                                 },
 329                                                                 {
 330                                                                         sizeX : 1,
 331                                                                         sizeY : 5,
 332                                                                         maxHeight : 5,
 333                                                                         row : 0,
 334                                                                         col : 2,
 335                                                                         headerText : 'Area Chart',
 336                                                                         max : false
 337                                                                 },
 338                                                                 {
 339                                                                         sizeX : 1,
 340                                                                         sizeY : 5,
 341                                                                         maxHeight : 5,
 342                                                                         row : 8,
 343                                                                         col : 0,
 344                                                                         headerText : 'Pie Chart',
 345                                                                         max : false
 346                                                                 },
 347                                                                 {
 348                                                                         sizeX : 1,
 349                                                                         sizeY : 5,
 350                                                                         maxHeight : 5,
 351                                                                         row : 8,
 352                                                                         col : 1,
 353                                                                         headerText : 'Line Chart',
 354                                                                         max : false
 355                                                                 },
 356                                                                 {
 357                                                                         sizeX : 1,
 358                                                                         sizeY : 5,
 359                                                                         maxHeight : 5,
 360                                                                         row : 8,
 361                                                                         col : 2,
 362                                                                         headerText : 'Gauges',
 363                                                                         max : false
 364                                                                 },
 365                                                                 {
 366                                                                         sizeX : 1,
 367                                                                         sizeY : 8,
 368                                                                         maxHeight : 8,
 369                                                                         row : 16,
 370                                                                         col : 0,
 371                                                                         headerText : 'Traffic distribution by day of week',
 372                                                                         max : false
 373                                                                 },
 374                                                                 {
 375                                                                         sizeX : 1,
 376                                                                         sizeY : 8,
 377                                                                         maxHeight : 8,
 378                                                                         row : 16,
 379                                                                         col : 1,
 380                                                                         headerText : 'Busy hour traffic analysis by day of week',
 381                                                                         max : false
 382                                                                 },
 383                                                                         {
 384                                                                         sizeX : 1,
 385                                                                         sizeY : 6,
 386                                                                         maxHeight : 6,
 387                                                                         row : 24,
 388                                                                         col : 0,
 389                                                                         headerText : 'Additional Samples',
 390                                                                         max : false
 391                                                                 },
 392                                                                         {
 393                                                                         sizeX : 1,
 394                                                                         sizeY : 8,
 395                                                                         maxHeight : 8,
 396                                                                         row : 24,
 397                                                                         col : 1,
 398                                                                         headerText : 'Sticky Notes',
 399                                                                         max : false
 400                                                                 },
 401                                                                         {
 402                                                                         sizeX : 3,
 403                                                                         sizeY : 10,
 404                                                                         maxHeight : 10,
 405                                                                         row : 32,
 406                                                                         col : 0,
 407                                                                         headerText : 'Service Configuration',
 408                                                                         max : false
 409                                                                 } ];
 410
 411                                                 $.each($scope.standardItems, function(i, a) {
 412                                                         $scope.toggleMinMax(i, '');
 413                                                 });
 414                                                 $scope.activeTabId = 'Monday';
 415                                                 //for generic tabs
 416
 417                                                 $scope.selectedTrafficDay = [{
 418                                                         title : 'Mon',
 419                                                         url : '#Monday'
 420                                                 }, {
 421                                                         title : 'Tue',
 422                                                         url : '#Tuesday'
 423                                                 }, {
 424                                                         title : 'Wed',
 425                                                         url : '#Wednesday'
 426                                                 }, {
 427                                                         title : 'Thu',
 428                                                         url : '#Thursday'
 429                                                 }, {
 430                                                         title : 'Fri',
 431                                                         url : '#Friday'
 432                                                 }, {
 433                                                         title : 'Sat',
 434                                                         url : '#Saturday'
 435                                                 }, {
 436                                                         title : 'Sun',
 437                                                         url : '#Sunday'
 438                                                 }];
 439
 440                                             $scope.currentSelectedDayTab = '#Monday';
 441
 442                                             $scope.onClickTab1 = function (Daytab) {
 443                                                 $scope.currentSelectedDayTab = Daytab.url;
 444                                             }
 445
 446                                             $scope.isActiveTab1 = function(tabUrl) {
 447                                                 return tabUrl == $scope.currentSelectedDayTab;
 448                                             }
 449
 450
 451                                                 $scope.gTabs = [ {
 452                                                         title : 'Monday',
 453                                                         id : 'Monday',
 454                                                         url : '#Monday',
 455                                                         selected : true
 456                                                 }, {
 457                                                         title : 'Tuesday',
 458                                                         id : 'Tuesday',
 459                                                         url : '#Tuesday'
 460                                                 }, {
 461                                                         title : 'Wednesday',
 462                                                         id : 'Wednesday',
 463                                                         url : '#Wednesday'
 464                                                 }, {
 465                                                         title : 'Thursday',
 466                                                         id : 'Thursday',
 467                                                         url : '#Thursday'
 468                                                 }, {
 469                                                         title : 'Friday',
 470                                                         id : 'Friday',
 471                                                         url : '#Friday'
 472                                                 }, {
 473                                                         title : 'Saturday',
 474                                                         id : 'Saturday',
 475                                                         url : '#Saturday'
 476                                                 }, {
 477                                                         title : 'Sunday',
 478                                                         id : 'Sunday',
 479                                                         url : '#Sunday'
 480                                                 }
 481                                         ];
 482
 483
 484
 485
 486
 487                                         $scope.BusyHourTraffic = [ {
 488                                                 title : 'BH SNRC DLSTX - Incoming',
 489                                                 url : '#Incoming'
 490                                         }, {
 491                                                 title : 'BH SNRC DLSTX - Outgoing',
 492                                                 url : '#Outgoing'
 493                                         }, {
 494                                                 title : 'BH National - Default',
 495                                                 url : '#Default'
 496                                         }, {
 497                                                 title : 'BH National - Priority',
 498                                                 url : '#Priority'
 499                                         }, {
 500                                                 title : 'BH National',
 501                                                 url : '#BHNational'
 502                                         }
 503
 504                                 ];
 505
 506                                     $scope.currentSelectedBusyHourTraffic = '#Incoming';
 507
 508                                     $scope.onClickTab2 = function (TrafficTab) {
 509                                         $scope.currentSelectedBusyHourTraffic = TrafficTab.url;
 510                                     }
 511
 512                                     $scope.isActiveTab2 = function(tabUrl) {
 513                                         return tabUrl == $scope.currentSelectedBusyHourTraffic;
 514                                     }
 515
 516
 517                                                 $scope.activeTabId2 = 'Incoming';
 518                                                 //for generic tabs
 519                                                 $scope.gTabs2 = [ {
 520                                                         title : 'BH SNRC DLSTX - Incoming',
 521                                                         id : 'Incoming',
 522                                                         url : '#Incoming',
 523                                                         selected : true
 524                                                 }, {
 525                                                         title : 'BH SNRC DLSTX - Outgoing',
 526                                                         id : 'Outgoing',
 527                                                         url : '#Outgoing'
 528                                                 }, {
 529                                                         title : 'BH National - Default',
 530                                                         id : 'Default',
 531                                                         url : '#Default'
 532                                                 }, {
 533                                                         title : 'BH National - Priority',
 534                                                         id : 'Priority',
 535                                                         url : '#Priority'
 536                                                 }, {
 537                                                         title : 'BH National',
 538                                                         id : 'BHNational',
 539                                                         url : '#BHNational'
 540                                                 }
 541                                         ];
 542
 543                                                 $scope.activeTabId3 = 'Incoming';
 544                                                 //for generic tabs
 545                                                 $scope.gTabs3 = [ {
 546                                                         title : 'BH SNRC DLSTX - Incoming',
 547                                                         id: 'Incoming',
 548                                                         url : '#Incoming',
 549                                                         selected : true
 550                                                 }, {
 551                                                         title : 'BH SNRC DLSTX - Outgoing',
 552                                                         id : 'Outgoing',
 553                                                         url : '#Outgoing'
 554                                                 }, {
 555                                                         title : 'BH National - Default',
 556                                                         id : 'Default',
 557                                                         url : '#Default'
 558                                                 }, {
 559                                                         title : 'BH National - Priority',
 560                                                         id : 'Priority',
 561                                                         url : '#Priority'
 562                                                 }, {
 563                                                         title : 'BH National',
 564                                                         id : 'BHNational',
 565                                                         url : '#BHNational'
 566                                                 }
 567                                         ];
 568
 569                                                 /* $scope.$watch('activeTabId', function(newVal) {
 570                                                         alert(newval);
 571                                                         $('#'+newval).show();
 572                                                 }, true); */
 573
 574                                                 $scope.toggleEastToWest = function() {
 575                                                         $("#toggle").toggle('slide');
 576                                                         if ($("#leftIcon").is(":visible")) {
 577                                                                 $("#rightIcon").show();
 578                                                                 $("#leftIcon").hide();
 579                                                         }
 580                                                         else if ($("#rightIcon").is(":visible")) {
 581                                                                 $("#rightIcon").hide();
 582                                                                 $("#leftIcon").show();
 583                                                         }
 584                                                 };
 585
 586                                                 $scope.group1 = {
 587                                                         open : true
 588                                                 };
 589                                                 $scope.group2 = {
 590                                                         open : true
 591                                                 };
 592                                                 $scope.group3 = {
 593                                                         open : true
 594                                                 };
 595                                                 $scope.group4 = {
 596                                                         open : true
 597                                                 };
 598                                                 $scope.group5 = {
 599                                                         open : true
 600                                                 };
 601                                                 $scope.group6 = {
 602                                                         open : true
 603                                                 };
 604                                                 $scope.group7 = {
 605                                                         open : true
 606                                                 };
 607                                                 $scope.group71 = {
 608                                                         open : true
 609                                                 };
 610                                                 $scope.group8 = {
 611                                                         open : true
 612                                                 };
 613                                                 $scope.group9 = {
 614                                                         open : true
 615                                                 };
 616                                                 $scope.group10 = {
 617                                                         open : true
 618                                                 };
 619                                                 $scope.group11 = {
 620                                                         open : true
 621                                                 };
 622                                                 $scope.group12 = {
 623                                                         open : false
 624                                                 };
 625                                         });
 626 </script>
 627
 628 <!-- Select the Slider control by default -->
 629   <script>$('input[name=viewer]:eq(1)').click();</script>