2 ================================================================================
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
11 http://www.apache.org/licenses/LICENSE-2.0
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 ================================================================================
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" %>
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"/>
30 <script src= "static/ebz/angular_js/angular.js"></script>
31 <script src= "static/ebz/angular_js/angular-sanitize.js"></script>
33 <script src= "static/ebz/angular_js/app.js"></script>
34 <script src= "static/ebz/angular_js/gestures.js"></script>
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>
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>
48 .button--small, [class*=bg-] .button--small {
54 .gridster-item-container .gridster-item-body{
57 .gridster-item-container{
72 border: 2px solid #52697E;
76 background: #fff url(../images/ajax_small.gif) no-repeat center;
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 -->
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 -->
95 <!-- Carousel rendering -->
98 var initLayout = function() {
99 $('#myGallery').spacegallery({loadingClass: 'loading'});
102 EYE.register(initLayout, 'init');
106 <!-- Slider rendering -->
109 $('#slides').slides({
111 preloadImage: 'static/fusion/sample/images/loading.gif',
115 animationStart: function(current){
116 $('.caption').animate({
119 if (window.console && console.log) {
120 // example return of current slide number
121 //console.log('animationStart on slide: ', current);
124 animationComplete: function(current){
125 $('.caption').animate({
128 if (window.console && console.log) {
129 // example return of current slide number
130 //console.log('animationComplete on slide: ', current);
133 slidesLoaded: function() {
134 $('.caption').animate({
144 <div ng-controller="welcomeController">
145 <fmt:message key="general.home" var="title" />
147 <span style="font-weight:bold;font-size:11pt;">Welcome ${sessionScope.user.firstName} ${sessionScope.user.lastName}</span>
148 (Last Login: <fmt:formatDate value="${sessionScope.user.lastLoginDate}" type="date" pattern="dd MMM yyyy hh:mma zzz" var="lastLogin" /> ${lastLogin})
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>
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:
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
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>
183 <div class="slides_container">
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>
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>
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>
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>
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>
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>
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>
224 <img src="static/fusion/sample/images/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
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>
242 <!--ICON BUTTONS PLACEHOLDER END-->
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> Sample Charts</label><BR>
249 <iframe scrolling="no" frameBorder="0" style="width: 430px; height: 360px;" src="static/fusion/sample/html/wordcloud.html"></iframe>
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>
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>
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>
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>
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>
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>
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>
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>
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>
294 <div align="left" ng-if="item.headerText=='Additional Samples' && item.max">
295 <label> Quick Links</label>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
370 <!--ACTUAL BODY CONTENT END-->
372 <!-- <div att-gridster-item-footer
373 att-gridster-item-footer-link={{item.footerLink}}>
374 {{item.footerLinkText}}
384 $(document).ready(function(){
385 $( "#rightIcon" ).hide();
386 $( "#leftIcon" ).show();
388 var app=angular.module("abs", ["att.abs", "modalServices","att.gridster","checklist-model"]);
389 app.controller('welcomeController', function ($scope, modalService, $modal) {
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
402 enabled: true, // whether dragging items is supported
403 stop: function(event, uiWidget, $element) {$scope.setCookie();} // optional callback fired when item is finished dragging
408 /* $scope.gridsterOpts = {
421 $scope.toggleMinMax = function(index, 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;
427 $scope.standardItems[index].sizeY=0;
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);
436 tileSizeY.assign($scope, 0);
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 = [{
449 headerText:'Dashboard',
460 headerText:'Donut Chart',
470 headerText:'Area Chart',
479 headerText:'Pie Chart',
488 headerText:'Line Chart',
506 headerText:'Traffic distribution by day of week',
515 headerText:'Busy hour traffic analysis by day of week',
524 headerText:'Additional Samples',
533 headerText:'Sticky Notes',
542 headerText:'Service Configuration',
546 $.each($scope.standardItems, function(i, a){
547 $scope.toggleMinMax(i,'');
549 $scope.activeTabId = 'Monday';
583 $scope.activeTabId2 = 'Incoming';
586 title: 'BH SNRC DLSTX - Incoming',
591 title: 'BH SNRC DLSTX - Outgoing',
595 title: 'BH National - Default',
599 title: 'BH National - Priority',
603 title: 'BH National',
609 $scope.activeTabId3 = 'Incoming';
612 title: 'BH SNRC DLSTX - Incoming',
617 title: 'BH SNRC DLSTX - Outgoing',
621 title: 'BH National - Default',
625 title: 'BH National - Priority',
629 title: 'BH National',
635 /* $scope.$watch('activeTabId', function(newVal) {
637 $('#'+newval).show();
640 $scope.toggleEastToWest = function() {
641 $( "#toggle" ).toggle( 'slide');
642 if ($("#leftIcon").is(":visible")) {
643 $( "#rightIcon" ).show();
644 $( "#leftIcon" ).hide();
646 else if ($("#rightIcon").is(":visible")) {
647 $( "#rightIcon" ).hide();
648 $( "#leftIcon" ).show();
694 <!-- Select the Slider control by default -->
695 <script>$('input[name=viewer]:eq(1)').click();</script>