gerrit.onap Code Review - portal/sdk.git/blob

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
   5
   6 <title>Traffic distribution by day of week</title>
   7
   8 <script src="../../d3/js/d3.v3.min.js" charset="utf-8"></script>
   9
  10
  11 <link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/scribble.css" />
  12 <link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/flexslider.css" />
  13 <link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/welcome.css" />
  14
  15 <script src="../../../../../app/fusion/external/angular-1.4.8/angular.js"></script>
  16
  17 <script src="../../../../../static/js/jquery-1.10.2.js"></script>
  18 <script src="../../../../fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>
  19
  20
  21 <!--for line Chart and  Area Chart-->
  22 <script src="../../../../../static/fusion/d3/js/d3.v3.min.js"></script>
  23 <script src="../../../../../static/fusion/d3/js/nv.d3.min.js"></script>
  24 <script src="../../../../../static/fusion/d3/js/models/axis.min.js"></script>
  25
  26 <!-- Style for line Chart and area chart  -->
  27 <link rel="stylesheet" type="text/css" href="../../../../../static/fusion/d3/css/nv.d3.css">
  28 <!--  Charts -->
  29 <script type="text/javascript" src="../../../../../static/fusion/sample/js/charts.js"></script>
  30 <!--  Charts -->
  31 <script type="text/javascript" src="../../../../../static/fusion/sample/js/scribble.js"></script>
  32
  33
  34 <script>
  35         var app = angular.module("myApp", []);
  36         app.controller('trafficController',function($scope) {
  37                 $scope.activeTabId = 'Monday';
  38                 $scope.selectedTrafficDay = [{
  39                         title : 'Mon',
  40                         url : '#Monday'
  41                 }, {
  42                         title : 'Tue',
  43                         url : '#Tuesday'
  44                 }, {
  45                         title : 'Wed',
  46                         url : '#Wednesday'
  47                 }, {
  48                         title : 'Thu',
  49                         url : '#Thursday'
  50                 }, {
  51                         title : 'Fri',
  52                         url : '#Friday'
  53                 }, {
  54                         title : 'Sat',
  55                         url : '#Saturday'
  56                 }, {
  57                         title : 'Sun',
  58                         url : '#Sunday'
  59                 }];
  60
  61             $scope.currentSelectedDayTab = '#Monday';
  62
  63             $scope.onClickTab1 = function (Daytab) {
  64                 $scope.currentSelectedDayTab = Daytab.url;
  65             }
  66
  67             $scope.isActiveTab1 = function(tabUrl) {
  68                 return tabUrl == $scope.currentSelectedDayTab;
  69             }
  70
  71
  72                 $scope.gTabs = [ {
  73                         title : 'Monday',
  74                         id : 'Monday',
  75                         url : '#Monday',
  76                         selected : true
  77                 }, {
  78                         title : 'Tuesday',
  79                         id : 'Tuesday',
  80                         url : '#Tuesday'
  81                 }, {
  82                         title : 'Wednesday',
  83                         id : 'Wednesday',
  84                         url : '#Wednesday'
  85                 }, {
  86                         title : 'Thursday',
  87                         id : 'Thursday',
  88                         url : '#Thursday'
  89                 }, {
  90                         title : 'Friday',
  91                         id : 'Friday',
  92                         url : '#Friday'
  93                 }, {
  94                         title : 'Saturday',
  95                         id : 'Saturday',
  96                         url : '#Saturday'
  97                 }, {
  98                         title : 'Sunday',
  99                         id : 'Sunday',
 100                         url : '#Sunday'
 101                 }];
 102
 103
 104
 105
 106
 107             $scope.currentSelectedBusyHourTraffic = '#Incoming';
 108
 109             $scope.onClickTab2 = function (TrafficTab) {
 110                 $scope.currentSelectedBusyHourTraffic = TrafficTab.url;
 111             }
 112
 113             $scope.isActiveTab2 = function(tabUrl) {
 114                 return tabUrl == $scope.currentSelectedBusyHourTraffic;
 115             }
 116
 117                 $scope.toggleEastToWest = function() {
 118                         $("#toggle").toggle('slide');
 119                         if ($("#leftIcon").is(":visible")) {
 120                                 $("#rightIcon").show();
 121                                 $("#leftIcon").hide();
 122                         }
 123                         else if ($("#rightIcon").is(":visible")) {
 124                                 $("#rightIcon").hide();
 125                                 $("#leftIcon").show();
 126                         }
 127                 };
 128
 129                 $scope.group1 = {
 130                         open : true
 131                 };
 132                 $scope.group2 = {
 133                         open : true
 134                 };
 135                 $scope.group3 = {
 136                         open : true
 137                 };
 138                 $scope.group4 = {
 139                         open : true
 140                 };
 141                 $scope.group5 = {
 142                         open : true
 143                 };
 144                 $scope.group6 = {
 145                         open : true
 146                 };
 147                 $scope.group7 = {
 148                         open : true
 149                 };
 150                 $scope.group71 = {
 151                         open : true
 152                 };
 153                 $scope.group8 = {
 154                         open : true
 155                 };
 156                 $scope.group9 = {
 157                         open : true
 158                 };
 159                 $scope.group10 = {
 160                         open : true
 161                 };
 162                 $scope.group11 = {
 163                         open : true
 164                 };
 165                 $scope.group12 = {
 166                         open : false
 167                 };
 168         });
 169 </script>
 170
 171 </head>
 172         <body ng-app="myApp">
 173                 <div ng-controller="trafficController">
 174                         <div id="selectedTrafficDay">
 175                                 <ul>
 176                                         <li ng-repeat="Daytab in selectedTrafficDay" ng-class="{active1:isActiveTab1(Daytab.url)}" ng-click="onClickTab1(Daytab)">{{Daytab.title}}</li>
 177                                 </ul>
 178                                 <div id="SelectedTrafficeDayView">
 179                                         <div ng-include="currentSelectedDayTab"></div>
 180                                 </div>
 181                                 <script type="text/ng-template" id="#Monday">
 182                                         <div id="Monday"  align="centers"><img src="../../../../../static/fusion/sample/images/tunnels/1_mon.png" width=100% height=100% alt="Monday"></div>
 183                                 </script>
 184                                 <script type="text/ng-template" id="#Tuesday">
 185                                         <div id="Tuesday"  align="center"><img src="../../../../../static/fusion/sample/images/tunnels/2_tue.png" width=100% height=100% alt="Tuesday"></div>
 186                                 </script>
 187                                 <script type="text/ng-template" id="#Wednesday">
 188                                         <div id="Wednesday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/3_wed.png" width=100% height=100% alt="Wednesday"></div>
 189                                 </script>
 190                                 <script type="text/ng-template" id="#Thursday">
 191                                         <div id="Thursday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/4_thu.png" width=100% height=100% alt="Thursday"></div>
 192                                 </script>
 193                                 <script type="text/ng-template" id="#Friday">
 194                                         <div id="Friday"  align="center"><img src="../../../../../static/fusion/sample/images/tunnels/5_fri.png" width=100% height=100% alt="Friday"></div>
 195                                 </script>
 196                                 <script type="text/ng-template" id="#Saturday">
 197                                         <div id="Saturday"  align="center"><img src="../../../../../static/fusion/sample/images/tunnels/6_sat.png" width=100% height=100% alt="Saturday"></div>
 198                                 </script>
 199                                 <script type="text/ng-template" id="#Sunday">
 200                                         <div id="Sunday"  align="center"><img src="../../../../../static/fusion/sample/images/tunnels/7_sun.png" width=100% height=100% alt="Sunday"></div>
 201                                 </script>
 202                         </div>
 203                 </div>
 204         </body>
 205 </html>