diff options
Diffstat (limited to 'ecomp-portal-FE/client/app/views/dashboard')
8 files changed, 2224 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget-manage.html b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget-manage.html new file mode 100644 index 00000000..84ac2a44 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget-manage.html @@ -0,0 +1,152 @@ +<!-- + ================================================================================ + eCOMP Portal + ================================================================================ + Copyright (C) 2017 AT&T Intellectual Property + ================================================================================ + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + ================================================================================ + --> +<div style="margin-top: 10px; margin-bottom: 10psx;"> + <h1 class="heading1"></h1> +</div> +<br /> + +<div style="margin-top: 25px;"> + <div id="title" class="manage-contactUs-home-manageWidgets-title">Manage {{widgetTypeDisplay}} Widgets</div> + <div class="widgets-popup-margin"> + <div class="get-access-table"> + <div class="table-control" style="margin:30px;"> + <div class="c-ecomp-att-abs-table" style="height:300px""> + <table att-table id="table-main" + table-data="ignoredTableData" + current-page="ignoredCurrentPage"> + <thead att-table-row type="header"> + <tr> + <th id="th-users-1" att-table-header key="title" sortable="true" >Title</th> + <th id="th-users-2" att-table-header key="href" sortable="true" >URL</th> + <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-3" att-table-header key="event_date" sortable="true" >Date</th> + <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-4" att-table-header key="content" sortable="true" >Content</th> + <th id="th-users-5" att-table-header key="sortOrder" sortable="true" >Order</th> + <th id="th-users-6" att-table-header key="edit" sortable="false" >Edit</th> + <th id="th-users-7" att-table-header key="delete" sortable="false" >Delete</th> + </tr> + </thead> + <!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data --> + <tbody att-table-row type="body" class="table-body" track-by="$index" row-repeat="rowData in widgetData"> + <tr id="tr-rowData" ng-click=""> + <td att-table-body> + <div id="widget-td-title" ng-hide="rowData.showEdit" ng-bind="rowData.title"></div> + <input type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].title"/> + </td> + <td att-table-body> + <div id="widget-td-href" ng-hide="rowData.showEdit" ng-bind="rowData.href"></div> + <input type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].href"/> + </td> + <td ng-show="{{widgetType=='EVENTS'}}" att-table-body> + <div id="widget-td-date" ng-hide="rowData.showEdit" ng-bind="rowData.eventDate"></div> + <input type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].eventDate"/> + </td> + <td ng-show="{{widgetType=='EVENTS'}}" att-table-body> + <div id="widget-td-content" ng-hide="rowData.showEdit">{{rowData.content | cut:true:20:' ...'}}</div> + <input type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].content"/> + </td> + <td att-table-body> + <div id="widget-td-order" ng-hide="rowData.showEdit" ng-bind="rowData.sortOrder"></div> + <input type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].sortOrder"/> + </td> + <td att-table-body> + <div class="delete-contact-us" ng-hide="rowData.showEdit" ng-click="setEdit($index);"> + <span class="ion-edit"></span> + </div> + <span ng-show="rowData.showEdit"> + <a att-button btn-type="primary" ng-click="modify($index);" class="button button--primary" size="small" >Save</a> + </span> + </td> + <td att-table-body> + <div class="delete-contact-us" ng-click="remove($index);"> + <span class="ion-trash-b"></span> + </div> + </td> + </tr> + </tbody> + </table> + </div> + + <div att-divider-lines></div> + <div style="margin-top: 15px; margin-left: -80px;" > + <form name = "widgetForm" novalidate> + <div id="addWidgetHeader" class="contact-us-margin"> + <h1 style="font-size:18px;">Add</h1> + <div class="errMsg">{{errMsg}}</div> + <div class="sucessMsg" ng-bind="successMsg"></div> + </div> + <div id="addWidget" class="contact-us-margin"> + <div> + <div> + <div class="add-widget-field"> + <div id="mots-property-label" class="property-label">Title</div> + <input class="input-text-area" type="text" ng-model="newWidgetObject.title" name="title" ng-required="true"/> + </div> + <div class="add-widget-field"> + <div class="property-label">URL</div> + <input class="input-text-area" type="text" ng-model="newWidgetObject.href" type="url" size="3" name = "url" ng-required = "true"/> + </div> + <div class="add-widget-field" > + <div class="property-label">Sort Order</div> + <input class="input-text-area" type="text" ng-model="newWidgetObject.sortOrder"/> + </div> + </div> + <div class="add-widget-field" ng-controller="DatePickerController" ng-show="{{widgetType=='EVENTS'}}"> + <h4>Event Date</h4> + <div> + <div> + <p class="input-group"> + <input type="text" name = "eventDate" datetime="yyyy-MM-dd" class="input-text-area" uib-datepicker-popup="{{format}}" + ng-model="newWidgetObject.eventDate" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" + ng-focus="open1()" + ng-required = "widgetType =='EVENTS'" /> + </p> + </div> + </div> + </div> + + <div class="add-contact-us-field-des" ng-show="{{widgetType=='EVENTS'}}"> + <div class="property-label">Content</div> + <textarea style="margin-top: 0px; margin-bottom: 0px; height: 150px" ng-model="newWidgetObject.content" name="content" ng-required = "widgetType =='EVENTS'"> + </textarea> + </div> + </div> + <div style="height:50px;"> + <a style="float:right; margin-top:20px;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="saveNew()">Add New</a> + + </div> + + <div att-divider-lines></div> + + </div> + </form> + </div> + <div style="height:50px;"> + <a style="float:right;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="closeDialog()">Close</a> + </div> + </div> + </div> + </div> +</div> + +<script type="application/javascript"> + $(document).ready(function(){ + $(".ngdialog-content").css("width","85%") + }); +</script> diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.js b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.js new file mode 100644 index 00000000..d489ac42 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.js @@ -0,0 +1,422 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ +'use strict'; + +(function () { + class CommonWidgetController { + constructor(dashboardService, $scope, message, $q, $http, conf, $filter,confirmBoxService,$log) { + $scope.widgetType = message.type; + $scope.widgetTypeDisplay = message.type; + $scope.modflag = false; + + switch (message.type) { + case 'EVENTS': + $scope.widgetTypeDisplay = 'Events' + break; + case 'NEWS': + $scope.widgetTypeDisplay = 'News' + break; + case 'IMPORTANTRESOURCES': + $scope.widgetTypeDisplay = 'Resources' + break; + } + + $scope.widgetData = []; + dashboardService.getCommonWidgetData(message.type) + .then(function (res) { + // console.log('CommonWidgetController: result is ' + res); + $scope.widgetData = res.response.items; + }); + + + + $scope.setEdit = function(index) { + + //for(var i=0; i<$scope.widgetData ) + + if($scope.modflag === false){ + $scope.widgetData[index].showEdit = true; + $scope.modflag = true; + } + } + + $scope.modify = function(index) { + + $scope.widgetObject = {}; + $scope.widgetObject.id = $scope.widgetData[parseInt(index)].id; + $scope.widgetObject.category = $scope.widgetData[parseInt(index)].category; + $scope.widgetObject.title = $scope.widgetData[parseInt(index)].title; + $scope.widgetObject.href = $scope.widgetData[parseInt(index)].href; + $scope.widgetObject.eventDate = $scope.widgetData[parseInt(index)].eventDate; + $scope.widgetObject.content = $scope.widgetData[parseInt(index)].content; + $scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder; + + var validateMsg = $scope.validateWidgetObject($scope.widgetObject); + if (validateMsg) { + confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;}); + return; + } + + dashboardService.saveCommonWidgetData($scope.widgetObject) + .then(function(res){ + if (res.status == 'OK') { + dashboardService.getCommonWidgetData(message.type) + .then(function(res){ + $scope.widgetData = res.response.items; + $scope.modflag = false; + $scope.cancelEdit(index); + }); + } + else { + // Save failed + confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;}); + return; + } + }); + + }; + + $scope.newWidgetObject = {}; + + // Answers string error if validation fails; + // answers null if all is well. + $scope.validateWidgetObject = function(wo) { + if (wo.title == null || wo.title == '') + return "Please enter a title."; + if (wo.href == null || wo.href == '' || !validateUrl(wo.href)) + return "Please enter a valid URL that starts with http."; + if (wo.sortOrder == null || wo.sortOrder == '' || isNaN(parseInt(wo.sortOrder))) + return "Please enter a number for the sort order."; + if (wo.category=='EVENTS') { + if (wo.eventDate == null || wo.eventDate == '') + return "Please enter a date for the event."; + // Parses and normalizes the date with rollover. + var filteredDate = $filter('date')(wo.eventDate, "yyyy-MM-dd"); + // $log.debug('dashboard-widget-controller: date filter yields ' + filteredDate); + // The date picker shows mm/dd/yy. + if (filteredDate == null || filteredDate.length != 10) + return "Please enter a valid date as YYYY-MM-DD"; + if (wo.content==null || wo.content=='') + return "Please enter content for the event."; + } + return null; + }; + + $scope.saveNew = function() { + $scope.newWidgetObject.category = message.type; + // $log.info($scope.newWidgetObject); + var validateMsg = $scope.validateWidgetObject($scope.newWidgetObject); + if (validateMsg) { + confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;}); + return; + } + // Transform date into expected storage format + $scope.newWidgetObject.eventDate = $filter('date')($scope.newWidgetObject.eventDate, "yyyy-MM-dd"); + + dashboardService.saveCommonWidgetData($scope.newWidgetObject) + .then(function(res){ + if (res.status == 'OK') { + $scope.widgetForm.$setPristine(); + confirmBoxService.showInformation('You have added a new item').then(isConfirmed => { + }); + dashboardService.getCommonWidgetData(message.type) + .then(function(res){ + $scope.widgetData = res.response.items; + $scope.newWidgetObject = {}; + }); + } + else { + confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;}); + return; + } + }); + }; + + $scope.remove = function(index) { + var confirmMsg = 'Are you sure you want to delete this item from the list?' + ' Press OK to delete.'; + confirmBoxService.confirm(confirmMsg).then(function (confirmed) { + if (confirmed == true) { + $scope.widgetObject = {}; + $scope.widgetObject.id = $scope.widgetData[parseInt(index)].id; + $scope.widgetObject.category = $scope.widgetData[parseInt(index)].category; + $scope.widgetObject.title = $scope.widgetData[parseInt(index)].title; + $scope.widgetObject.href = $scope.widgetData[parseInt(index)].href; + $scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder; + + + dashboardService.removeCommonWidgetData($scope.widgetObject) + .then(function(res){ + dashboardService.getCommonWidgetData(message.type) + .then(function(res){ + $scope.widgetData = res.response.items; + $scope.cancelEdit(index); + }); + }); + } + }); + + }; + $scope.closeDialog = function(){ + $scope.closeThisDialog( $scope.widgetData); + } + $scope.deleteSpeedDial = function(widget){ + + } + + $scope.manage = function(index) { + $scope.modflag = true; + + var thisdata = $scope.widgetData[index]; + $scope.editMode=true; + var category = "#category"+index; + var categoryEdit = "#categoryEdit"+index; + + var title = "#title"+index; + var titleEdit = "#titleEdit"+index; + + var url = "#href"+index; + var urlEdit = "#hrefEdit"+index; + + var order = "#order"+index; + var orderEdit = "#orderEdit"+index; + + var eventDate = "#eventDate"+index; + var eventDateEdit = "#eventDateEdit"+index; + + + var dsavebutton ="#savebutton"+index; + var dremovebutton="#removebutton"+index; + var dmanagebutton="#managebutton"+index; + var deditRbutton="#editRbutton"+index; + + $(title).css('display', 'none'); + $(titleEdit).css('display', 'inherit'); + $(url).css('display', 'none'); + $(urlEdit).css('display', 'inherit'); + $(order).css('display', 'none'); + $(orderEdit).css('display', 'inherit'); + $(eventDate).css('display', 'none'); + $(eventDateEdit).css('display', 'inherit'); + + $(dsavebutton).css('display', 'inherit'); + $(dremovebutton).css('display', 'inherit'); + $(dmanagebutton).css('display', 'none'); + $(deditRbutton).css('display', 'inherit'); + + }; + + $scope.cancelEdit = function(index) { + + $scope.editMode=false; + var category = "#category"+index; + var categoryEdit = "#categoryEdit"+index; + + var title = "#title"+index; + var titleEdit = "#titleEdit"+index; + + var url = "#href"+index; + var urlEdit = "#hrefEdit"+index; + + var order = "#order"+index; + var orderEdit = "#orderEdit"+index; + + var eventDate = "#eventDate"+index; + var eventDateEdit = "#eventDateEdit"+index; + + var dsavebutton ="#savebutton"+index; + var dremovebutton ="#removebutton"+index; + var dmanagebutton="#managebutton"+index; + var deditRbutton="#editRbutton"+index; + + $(title).css('display', 'inherit'); + $(titleEdit).css('display', 'none'); + + $(url).css('display', 'inherit'); + $(urlEdit).css('display', 'none'); + + $(order).css('display', 'inherit'); + $(orderEdit).css('display', 'none'); + + $(eventDate).css('display', 'inherit'); + $(eventDateEdit).css('display', 'none'); + + $(dsavebutton).css('display', 'none'); + $(dremovebutton).css('display', 'none'); + $(dmanagebutton).css('display', 'inherit'); + $(deditRbutton).css('display', 'none'); + + }; + + $scope.popupConfirmWin = function(title, msgBody, callback){ + modalService.popupConfirmWin.apply(null, arguments); + }; + } + } + CommonWidgetController.$inject = ['dashboardService', '$scope', 'message', '$q', '$http', 'conf', '$filter','confirmBoxService','$log']; + angular.module('ecompApp').controller('CommonWidgetController', CommonWidgetController); +})(); + +angular.module('ecompApp').filter('cut', function () { + return function (value, wordwise, max, tail) { + if (!value) return ''; + + max = parseInt(max, 10); + if (!max) return value; + if (value.length <= max) return value; + + value = value.substr(0, max); + if (wordwise) { + var lastspace = value.lastIndexOf(' '); + if (lastspace != -1) { + //Also remove . and , so its gives a cleaner result. + if (value.charAt(lastspace-1) == '.' || value.charAt(lastspace-1) == ',') { + lastspace = lastspace - 1; + } + value = value.substr(0, lastspace); + } + } + + return value + (tail || ' …'); + }; +}); + +angular.module('ecompApp').controller('DatePickerController', function ($scope, uibDateParser) { + $scope.today = function() { + $scope.dt = new Date(); + }; + $scope.today(); + + $scope.clear = function() { + $scope.dt = null; + }; + + $scope.inlineOptions = { + customClass: getDayClass, + minDate: new Date(), + showWeeks: true + }; + + $scope.dateOptions = { + dateDisabled: disabled, + formatYear: 'yy', + minDate: new Date(), + startingDay: 1 + }; + + // Disable weekend selection + function disabled(data) { + var date = data.date, + mode = data.mode; + return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); + } + + $scope.toggleMin = function() { + $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); + $scope.dateOptions.minDate = $scope.inlineOptions.minDate; + }; + + $scope.toggleMin(); + + $scope.open1 = function() { + // console.log('In open1'); + $scope.popup1.opened = true; + }; + + $scope.open2 = function() { + // console.log('In open2'); + $scope.popup2.opened = true; + }; + + + $scope.setDate = function(year, month, day) { + $scope.dt = new Date(year, month, day); + }; + + $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; + $scope.format = $scope.formats[3]; + $scope.altInputFormats = ['M!/d!/yyyy']; + + $scope.popup1 = { + opened: false + }; + + $scope.popup2 = { + opened: false + }; + + var tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + var afterTomorrow = new Date(); + afterTomorrow.setDate(tomorrow.getDate() + 1); + $scope.events = [ + { + date: tomorrow, + status: 'full' + }, + { + date: afterTomorrow, + status: 'partially' + } + ]; + + function getDayClass(data) { + var date = data.date, + mode = data.mode; + if (mode === 'day') { + var dayToCheck = new Date(date).setHours(0,0,0,0); + + for (var i = 0; i < $scope.events.length; i++) { + var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); + + if (dayToCheck === currentDay) { + return $scope.events[i].status; + } + } + } + + return ''; + } +}); + + + +function toggleCollapsible(id, clickedIconId, subtitutingIconId){ + $("#"+id).toggle(); + $("#"+clickedIconId).toggle(); + $("#"+subtitutingIconId).toggle(); + setTimeout(function(){focusFirstEle(id);}, 1000); +} + +function focusFirstEle(id){ + var focusItems = $("#"+id).find(":focusable"); + for(var i=0; i<focusItems.length; i++){ + if(!isHidden(focusItems[i])){ + var targetClassName = focusItems[i].className; + if(targetClassName!='collapsibleArrow'){ + focusItems[i].focus(); + return; + } + } + } +} + +function validateUrl(value){ + return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value); + } diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.less b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.less new file mode 100644 index 00000000..dda8e300 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard-widget.controller.less @@ -0,0 +1,101 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ + .searchLiHeader { +font-weight: bold; +color: #0574ac; +font-size: 16px; +padding-bottom: 10px; +line-height: 1.5; +font-family: arial; + +} + +.searchLiItems{ +cursor: pointer; +font-weight: normal; +font-size: 12px; +color: #444444; +font-family: arial; +} + +.searchUl { +list-style: none; +border-bottom: 1px solid #bbb; +padding-bottom: 20px; +} + +#editWidgetsContent { + height: 300px; + width: 1770px; +} + +#editWidgetsContent .scroll-viewport { + height: 300px; + width: 1770px; +} + +.full button span { + background-color: limegreen; + border-radius: 32px; + color: black; +} + +.partially button span { + background-color: orange; + border-radius: 32px; + color: black; + } + + .add-widget-field{ + width:250px; + display: inline-table; + margin:10px; + + } + .uib-datepicker-popup { + th { + vertical-align: middle !important; + } + } + + .input-text-area { + font-style: italic; + padding: 7px 10px; + width: 250px !important; + display: inline-block; + position: relative; + margin-bottom: 10px; + border-radius: 6px; + border: 1px solid #d8d8d8; + height: 32px; + border-color: slategrey !important; + } + .input-inline-edit-text { + font-style: italic; + padding: 7px 10px; + display: inline-block; + position: relative; + margin-bottom: 10px; + border-radius: 6px; + border: 1px solid #d8d8d8; + height: 32px; + border-color: slategrey !important; + width:100%; + }
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.js b/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.js new file mode 100644 index 00000000..3228f636 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.js @@ -0,0 +1,312 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ +'use strict'; + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError('Cannot call a class as a function'); + } +} + +(function() { + var HTTP_PROTOCOL_RGX = /https?:\/\//; + + var DashboardCtrl = function DashboardCtrl(applicationsService, $log, + $window, userProfileService, $scope, $cookies, $timeout, $interval, + $modal, $state, dashboardService,ngDialog) { + + var _this = this; + + _classCallCheck(this, DashboardCtrl); + + // activate spinner + this.isLoading = true; + $scope.getUserAppsIsDone = false; + this.userProfileService = userProfileService; + $scope.demoNum = 1; + $scope.event_content_show = false; + $scope.widgetData = []; + + $scope.editWidgetModalPopup = function(availableData, resourceType) { + $scope.editData = JSON.stringify(availableData); + $scope.availableDataTemp = $scope.availableData; + ngDialog.open({ + templateUrl : 'app/views/dashboard/dashboard-widget-manage.html', + controller : 'CommonWidgetController', + resolve : { + message : function message() { + var message = { + type : resourceType, + availableData : $scope.editData + }; + return message; + } + } + }).closePromise.then(needUpdate => { + if(resourceType=='NEWS'){ + $scope.updateNews(); + }else if(resourceType=='EVENTS'){ + $scope.updateEvents(); + }else if(resourceType=='IMPORTANTRESOURCES'){ + $scope.updateImportRes(); + } + }); + }; + + userProfileService.getUserProfile() + .then( + function(profile) { + // $log.info(profile); + $scope.attuid = profile.attuid; + // $log.info('user has the following attuid: ' + + // profile.attuid); + $scope.appsView = []; + + applicationsService.getPersUserApps() + .then( + function(res) { + // $log.info(res); + _this.apps = res; + + for (var i = 0; i < _this.apps.length; i++) { + $scope.appsView[i] = { + sizeX : 2, + sizeY : 2, + headerText : _this.apps[i].name, + subHeaderText : _this.apps[i].notes, + imageLink : _this.apps[i].thumbnail || _this.apps[i].imageUrl, + order : _this.apps[i].order, + restrictedApp : _this.apps[i].restrictedApp, + url : _this.apps[i].url + }; + } + + // Append the show add/remove applications tile + $scope.appsView[_this.apps.length] = { + addRemoveApps : true, + sizeX : 2, + sizeY : 2, + headerText : 'Add/Remove Applications', + subHeaderText : '', + imageLink : 'assets/images/cloud.png', + order : '', + restrictedApp : false, + url : '' + }; + + // $log.info('getUserApps apps count : ' + + // $scope.appsView.length); + // Show 2 rows in the gridster if needed + if ($scope.appsView.length > 6) { + $(".dashboard-boarder").css({ + "height" : "400px" + }); + }else{ + $(".dashboard-boarder").css({ + "height" : "210px" + }); + } + _this.isLoading = false; + $scope.getUserAppsIsDone = true; + })['catch'] + (function(err) { + $log.error('DashboardCtlr: failed to get applications list', err); + _this.isLoading = false; + $scope.getUserAppsIsDone = true; + }); + }); + + + /* Widget Gridster Section */ + $scope.newsGridsterItem = { + sizeX : 4, + sizeY : 4, + headerText : 'News', + subHeaderText : '', + imageLink : '', + order : '', + url : '' + }; + + $scope.eventsGridsterItem = { + sizeX : 4, + sizeY : 4, + headerText : 'Calendar Events', + subHeaderText : '', + imageLink : '', + order : '', + url : '' + }; + + $scope.impoResGridsterItem = { + sizeX : 4, + sizeY : 4, + headerText : 'Resources', + subHeaderText : '', + imageLink : '', + order : '', + url : '' + }; + this.gridsterOpts = { + columns : 12, + colWidth : 95, + rowHeight : 95, + margins : [ 20, 20 ], + outerMargin : true, + pushing : true, + floating : true, + swapping : true, + draggable : { + handle: 'img' + } + }; + + this.emptyGridsterOpts = { + columns : 24, + colWidth : 190, + rowHeight : 190, + margins : [ 20, 20 ], + outerMargin : true, + pushing : true, + floating : true, + swapping : true, + draggable : { + handle: 'img' + } + }; + + this.goToCatalog = function(item) { + $state.go('root.appCatalog'); + } + + // navigate to application url in new tab + this.goToPortal = function(item) { + if (!item.url) { + $log.error('No URL found for this application, doing nothing!'); + return; + } + if (item.restrictedApp) { + // Link-based apps open in their own browser tab + $window.open(item.url, '_blank'); + } else { + // cache control so browsers load app page every time + var ccParam = '?cc=' + new Date().getTime(); + var appUrl = null; + var urlParts = item.url.split('#'); + if (urlParts.length < 2) + appUrl = item.url + ccParam; + else + appUrl = urlParts[0] + ccParam + "#" + urlParts[1]; + // $log.debug('DashboardCtrlr::goToPortal: opening tab with URL + // ' + appUrl); + var tabContent = { + id : new Date(), + title : item.headerText, + url : appUrl + }; + $cookies.putObject('addTab', tabContent); + } + }; + + /* News data */ + $scope.newsData = []; + $scope.updateNews = function() { + $scope.newsData.length=0; + dashboardService.getCommonWidgetData('NEWS').then(function(res) { + // $log.info(res.message); + var newsDataJsonArray = res.response.items; + for (var i = 0; i < newsDataJsonArray.length; i++) { + $scope.newsData.push(newsDataJsonArray[i]); + } + })['catch'](function(err) { + $log.error('dashboard controller: failed to get news list', err); + _this.isLoading = false; + }); + } + $scope.updateNews(); + + /* Events data */ + $scope.eventData = []; + $scope.updateEvents = function() { + $scope.eventData.length=0; + dashboardService.getCommonWidgetData('EVENTS').then(function(res) { + var eventDataJsonArray = res.response.items; + for (var i = 0; i < eventDataJsonArray.length; i++) { + if(eventDataJsonArray[i].eventDate !=null) { + // yyyy-mm-dd + eventDataJsonArray[i].year = eventDataJsonArray[i].eventDate.substring(2,4); + eventDataJsonArray[i].mon = eventDataJsonArray[i].eventDate.substring(5,7); + eventDataJsonArray[i].day = eventDataJsonArray[i].eventDate.substring(8,10); + } + $scope.eventData.push(eventDataJsonArray[i]); + } + })['catch'](function(err) { + $log.error('dashboard controller: failed to get Events list', err); + _this.isLoading = false; + }); + } + $scope.updateEvents(); + + /* Important Resources data */ + $scope.importResData = []; + $scope.updateImportRes = function() { + $scope.importResData.length=0; + dashboardService.getCommonWidgetData('IMPORTANTRESOURCES').then( + function(res) { + // $log.error('couldnt get important list...', + // res.response.dataBlob); + // $log.info(res); + var importResDataJSONArray = res.response.items; + for (var i = 0; i < importResDataJSONArray.length; i++) { + $scope.importResData.push(importResDataJSONArray[i]); + } + })['catch'](function(err) { + $log.error('dashboard controller: failed to get resources list...', err); + _this.isLoading = false; + }); + } + $scope.updateImportRes(); + + if (getParameterByName('noUserError') != null) { + if (getParameterByName('noUserError') == "Show") { + $("#errorInfo").show(); + } + } + + }; + + DashboardCtrl.$inject = [ 'applicationsService', '$log', '$window', + 'userProfileService', '$scope', '$cookies', '$timeout', + '$interval', '$modal', '$state', 'dashboardService','ngDialog']; + angular.module('ecompApp').controller('DashboardCtrl', DashboardCtrl); +})(); + +function getParameterByName(name, url) { + if (!url) + url = window.location.href; + name = name.replace(/[\[\]]/g, "\\$&"); + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex + .exec(url); + if (!results) + return ''; + if (!results[2]) + return ''; + return results[2].replace(/\+/g, " "); +} diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.spec.js b/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.spec.js new file mode 100644 index 00000000..0a2ddd3a --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard.controller.spec.js @@ -0,0 +1,78 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ +'use strict'; + +describe('Controller: DashboardCtrl ', function() { + beforeEach(module('ecompApp')); + + let DashboardCtrl, $controller, $q, rootScope, $log, $window, $cookies, scope; + let deferredApps, deferredUserProfile, applicationsServiceMock, userProfileServiceMock; + + + beforeEach(inject( (_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_, _CacheFactory_)=>{ + rootScope = _$rootScope_; + scope = rootScope.$new(); + $q = _$q_; + $controller = _$controller_; + $log = _$log_; + $window = _$window_; + $cookies = _$cookies_; + + _CacheFactory_.destroyAll(); + + deferredApps = $q.defer(); + deferredUserProfile = $q.defer(); + applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getUserApps']); + applicationsServiceMock.getUserApps.and.returnValue(deferredApps.promise); + + userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']); + userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise); + + DashboardCtrl = $controller('DashboardCtrl', { + applicationsService: applicationsServiceMock, + $log: $log, + $window: $window, + userProfileService: userProfileServiceMock, + $scope: scope, + $cookies: $cookies + }); + scope.$digest(); + })); + + it('should populate this.apps with data from portals service getUserApps', inject(function ( _$q_) { + $q = _$q_; + + let profile = {roles: 'superAdmin', userId: 'userid'}; + + deferredUserProfile.resolve(profile) + deferredApps.resolve([{name: 'portal1'},{name: 'portal2'},{name: 'portal3'}]); + scope.$digest(); + expect(scope.appsViewData.length).toBe(3); + })); + + it('should call $log error when getAllPortals fail', inject(function ( _$q_) { + $q = _$q_; + spyOn($log, 'error'); + deferredUserProfile.reject('something happened!'); + scope.$digest(); + expect($log.error).toHaveBeenCalled(); + })); + +}); diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard.less b/ecomp-portal-FE/client/app/views/dashboard/dashboard.less new file mode 100644 index 00000000..4dc1a6c8 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard.less @@ -0,0 +1,766 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ + .w-ecomp-applications-home { + .bg_w; + position: @page-main-position; + top: @page-main-top; + left: @page-main-left; + right: @page-main-right; + bottom: @page-main-bottom; + padding-top: @padding-top; + overflow-y: @page-main-overflow-y; + padding-left: @padding-left-side; + + .gridster-item-container .gridster-item-body { + overflow-y:auto; + overflow-x:hidden; + } + + .go-button { + .btn-green; + width: 96px; + position: absolute; + border-radius: 0px; + } + + .applications-home-container { + .content_justify; + position: relative; + padding: 15px 0 32px 0; + width: 100%; + + .applications-home-title { + .a24r; + margin: auto; + .content_justify; + } + .portals-list { + min-height: 70vh; + //display: flex; + justify-content: center; + flex-flow: row wrap; + width: 1170px; + + margin: auto; + margin-bottom: 63px; + + .app-gridster-header { + background-color: @u; + font-size:12px; + overflow:hidden + } + + .app-gridster-footer { + background-color: @u; + } + + .portals-list-item { + background-color: @u; + border-radius: 2px; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + display: inline-block; + width: 360px; + height: 300px; + background-size: cover; + cursor: pointer; + margin: 15px; + overflow: hidden; + + .portals-item-info { + background-color: @u; + height: 120px; + top: 180px; + position: relative; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + padding: 16px; + + .info-title { + .a24r; + margin-bottom: 4px; + + text-overflow: ellipsis; + overflow: hidden; + } + .info-description { + .c16r; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + .info-button { + .btn-green; + width: 96px; + position: absolute; + bottom: 16px; + left: 16px; + } + + &:hover { + opacity: .93; + z-index: 3; + } + } + } + } + } +} +.w-ecomp-main-error{ + .o14r; + position: absolute; + width: 100%; + line-height: 1.5em; +} +.w-ecomp-main-disclaimer { + text-align: center; + .o14r; + //position: absolute; + bottom: -75px; + line-height: 1.5em; + margin: 0 auto; + width:1170px; + position: relative; + +} +.build-number { + .o12i; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.slide.ng-hide-add, +.slide.ng-hide-remove, +.slide.ng-enter, +.slide.ng-leave { + transition: all 0.5s ease; +} +.slide.ng-hide, +.slide.ng-enter { + transform: translate(-100%, 0); +} +.slide.ng-enter-active { + transform: translate(0, 0); +} +.slide.ng-leave { + transform: translate(0, 0); +} +.slide.ng-leave-active { + transform: translate(+100%, 0); +} +.dashboard-boarder{ + height: 210px; + overflow: auto; +} +.dashboard-information-boarder{ + border: 2px solid #ccc!important; + border-radius: 16px!important; +} + +#information-section { + margin-top:50px; +} + +.information-section-title{ + color: #0574ac; + font-family: arial; + font-size: 25px; + margin: 20px; + width: 1170px; +} +#left { + float: left; + width: 33%; + height:300px; + background-color:white; +} + +#center { + float: right; + width: 33%; + height:300px; + background: white; +} +#right { + margin-left:34%; + margin-right:34%; + height:300px; + background:white; +} + + +.dock ul{ +display: inline-block; + +width: auto; +margin: 0px; +padding: 0px; +list-style: none; + +} +.dock ul li { +width: auto; +height: auto; +display: inline-block; +bottom: 0; +vertical-align: bottom; +margin-top: -43px; +} +.dock ul li a { +display: block; +height: 150px; +width: 150px; +position: relative; +-webkit-transition-property: width, height,margin-top; +-webkit-transition-duration: 0.5s; +-o-transition-property: width, height,margin-top; +-o-transition-duration: 0.5s; +-moz-transition-property: width, height,margin-top; +-moz-transition-duration: 0.5s; +} +.dock ul li a:hover { +width: 200px; +height: 200px; +margin-top: -50px; +} +.dock ul li a img { +width: 100%; +position: absolute; +bottom: 0; +left: 0; +border: none; +padding: 0px 0px 0px 30px; +} +.dock_left{ +width: 31px; +-webkit-transform: rotate(33deg); +-moz-transform: rotate(33deg); +-o-transform: rotate(33deg); +position: relative; +background: #EEE; +overflow: hidden; +float: left; +height: 100px; +z-index: 2; +margin: -18px; +} +.dock_right{ +width: 36px; +-webkit-transform: rotate(-33deg); +-moz-transform: rotate(-33deg); +-o-transform: rotate(-33deg); +position: relative; +background: #EEE; +overflow: hidden; +float: left; +height: 100px; +z-index: 2; +margin: -18px; +} + + + + +* {margin: 0; padding: 0;} +body {background: #ccc;} + +.slider{ + width: 640px; + position: relative; + padding-top: 320px; + + margin: 50px auto; + + box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); +} + +.slider>img{ + position: absolute; + left: 0; top: 0; + transition: all 0.5s; +} + +.slider input[name='slide_switch'] { + display: none; +} + +.slider label { + margin: 18px 0 0 18px; + border: 3px solid #999; + + float: left; + cursor: pointer; + transition: all 0.5s; + + opacity: 0.6; +} + +.slider label img{ + display: block; +} + +.slider input[name='slide_switch']:checked+label { + border-color: #666; + opacity: 1; +} + +.slider input[name='slide_switch'] ~ img { + opacity: 0; + transform: scale(1.1); +} +/*That hides all main images at a 110% size +On click the images will be displayed at normal size to complete the effect +*/ +.slider input[name='slide_switch']:checked+label+img { + opacity: 1; + transform: scale(1); +} + +.accordion { + width: 895px; height: 320px; + overflow: hidden; + box-shadow: 0 10px 6px -6px #111; + margin: 20px auto +} +.accordion ul { width: 200% } + +.accordion li { + position: relative; + display: block; + width: 160px; + float: left; + box-shadow: 0 0 30px 8px #222; + transition: all 0.4s ease .300ms; +} + +.accordion ul:hover li {width: 40px } +.accordion ul li:hover {width: 640px } + +.caption { + background: rgba(0, 0, 0, 0.5); + position: absolute; + bottom: 0; + width: 640px +} + +.caption a { + display: block; + color: #fff; + text-decoration: none; + font: normal 16px 'Lato', Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + padding: 15px; +} + + + +/*events*/ +.events-date{ + margin-left: 10px; + float:left; + white-space: normal; + display: inline-block; + vertical-align: middle; + width: 55px; +} +.event-title-div{ + float: left; + width: 235px; + line-height: 20px; + padding: 5px; + font-size: 14px; + margin-left: 4px; +} +.events-date{ + height: 20px; + margin-left: 4px; + font-size: 14px; +} +.events-content{ + font-size: 14px; + color: #444; + margin-right: 10px; +} +.events-content-body{ + margin-top:5px; + color:#444; + margin-left:12px; + line-height:1.5; +} +.events { + border-radius: 4px; + padding: 3px; + -webkit-user-select: none; +} +.events ul { + float: left; + width:100%; + -webkit-user-select: none +} +.events ul li { + line-height: 30px; + list-style: none; + border-bottom: 2px solid grey; + height: 100%; + min-height: 42px; +} +.events ul li:hover { + background: #ddd; + cursor: pointer; +} +.events ul li a { + color: black; + text-decoration: none; + font: 14px Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + font-family: arial; +} +.events-link{ + color: #067ab4 !important; +} + + + +/*widgets*/ +.singleBtnBorder { + border-radius: 6px 6px 6px 6px; +} + +.widgetHeaderBtn{ + + height: 30px; + background-color: #FFFFFF; + position: relative; + display: inline-block; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 8px 20px; + font-size: 14px; + line-height: 14px; + min-width: 60px; + border: none; + border-radius: 6px; + background-color: #ffffff; + background-image: none; + color: #ffffff; + vertical-align: middle; + text-align: center; + text-decoration: none; + text-transform: capitalize; + text-shadow: none; + white-space: nowrap; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-transition: background-color 0.3s ease-out; + -moz-transition: background-color 0.3s ease-out; + transition: background-color 0.3s ease-out; + } + +.widgetHeaderBtnPosition { + width: 30px; + min-width: 0px; + border: 1px solid #AAAAAA; + padding-left: 5px; + padding-right: 5px; + } + +.icon-anchor { + color: #888; +} + +.widgetHeaderBtn:hover, .widgetHeaderBtn:focus { + background: rgba(0, 0, 0, 0); + color: #3a7999; + box-shadow: inset 0 0 0 2px #3a7999; +} + +@keyframes ticker { + 0% {margin-top: 0} + 25% {margin-top: -55px} + 50% {margin-top: -110px} + 75% {margin-top: -165px} + 100% {margin-top: 0} +} + +body { background: #333; width: 100%; height: 100% } + +.news { + + width: 350px; + height: 250px; + margin: 0px auto; + border-radius: 4px; + padding: 3px; + -webkit-user-select: none; + +} + + + +.news ul { + float: left; + width:100%; + -webkit-user-select: none +} + +.news ul li {line-height: 30px; list-style: none; + border-bottom: 2px solid grey; + min-height: 42px; + } + +.news ul li:hover { + background: #ddd; + cursor: pointer; +} + +.news ul li a { + color: black; + text-decoration: none; + font-size: 14px; + line-height: 1.5; + display: inline-block; + width:100%; + min-height:40px; + padding-top: 5px; + padding-bottom: 5px; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + + /* font-family: arial;*/ +} + +.news ul:hover { animation-play-state: paused } +.news span:hover+ul { animation-play-state: paused } +.resources { + + width: 350px; + height: 200px; + margin-left: 5px; + border-radius: 4px; + padding: 3px; + -webkit-user-select: none; + +} + + + +.resources ul { + float: left; + width:100%; + + -webkit-user-select: none +} + +.resources ul li {line-height: 30px; list-style: none; + border-bottom: 2px solid grey; + min-height: 42px; + } + +.resources ul li:hover { + background: #ddd; + cursor: pointer; +} + +.resources ul li a { + color: black; + text-decoration: none; + font-size: 14px; + line-height: 1.5; + width:100%; + min-height:40px; + display: inline-block; + padding-top: 5px; + padding-bottom: 5px; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; +} + + +.blue { background: #347fd0 } +.blue span { background: #2c66be } +.red { background: #d23435 } +.red span { background: #c22b2c } +.green { background: #699B67 } +.green span { background: #547d52 } +.magenta { background: #b63ace } +.magenta span { background: #842696 } + + +.box-one { + -webkit-transition:all linear 0.4s; + transition:all linear 0.4s; + height:100px; width:200px; background:white; border: 2px solid #ccc!important; + border-radius: 16px!important; +} +.box-one.ng-hide { +display: block!important; + opacity:0; +} + +.gridsterContent{ + height:120px; +} +.gridsterAppContent{ + height:120px; + +} + + .gridsterImage{ + height:84px; + width:168px; + } + .grider-content-ecomp{ + transition: transform 0.5s ease-out; + } + .grider-content-ecomp:hover{ + transform: scale(1.1); +} + + +.information-section{ + /*margin-top:25px;*/ +} +.information-section-gridsterContent{ + height:300px; +} +.information-sections-gridster-header{ + color: #0574ac; + font-family: arial; + font-size: 25px; + +} +/*application empty div*/ +.app-error-block { + padding-top: 10px; + +} +.activity-error-block { + padding-top: 60px; + +} + +.activity-error-msg1{ + text-align: center; + margin-top: 20px; + font-family: arial; + color: #444; + font-size: 20px; + +} + +.newstape { + background: white; + color: black; + height: 400px; + overflow: hidden; +} + +.newstape-content { + position: relative; + padding: 15px; +} + +.newstape-drag { cursor: ns-resize; } + +.text-center { text-align: center; } + +.text-right { text-align: right; } + +.text-justify { text-align: justify; } + +.optionsMenu{ + position: absolute; + list-style: none; + top: 25px; + right: 10px; + border: 1px solid #067ab4; + display: none; + z-index: 2; + border-radius: 6px 0px 6px 6px; + background: #fff; + width: 130px; +} + +.optionsMenuLink { + position: relative; + padding-left: 8px; + padding-right: 2px; + font-size: 12px; + line-height: 30px; + color: #444444; +} +.optionsMenu > li:hover a { + color: #ffffff !important; +} +.optionsMenu > li { + width: 100%; + text-align: left; +} +.optionsMenu > li:hover { + background-color: #0faaf7; + border-color: none !important; + cursor: pointer; +} + +.simulateGridHeader{ + position: relative; + height: 50px !important; + border: 1px solid #d3d3d3; + border-bottom: 0; + background-color: #E5E5E5; + white-space: nowrap; + text-overflow: ellipsis; + z-index: 1; +} + +.simulateGridHeaderTitle{ + line-height: 44px; + margin-left: 26px; + font-family: arial; + font-size: 18px; + color: #444444; + float: left; +} + +.simulateGridHeaderHandle{ + cursor: move; + margin: 12px; + position: absolute; + top: 0; + left: 0; + border: 0; + vertical-align: middle; + -ms-interpolation-mode: bicubic; + display: block; +}
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/dashboard/dashboard.tpl.html b/ecomp-portal-FE/client/app/views/dashboard/dashboard.tpl.html new file mode 100644 index 00000000..0d96a585 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/dashboard.tpl.html @@ -0,0 +1,346 @@ +<!-- + ================================================================================ + eCOMP Portal + ================================================================================ + Copyright (C) 2017 AT&T Intellectual Property + ================================================================================ + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + ================================================================================ + --> +<div class="w-ecomp-applications-home" id="contentId"> + <div class="applications-home-container"> + <div align="center" id="errorInfo" + style="display: none; font-size: 12px; margin-left: 5px"> + <span style="color: red">You don't have a user account in that + application. Please ask the system administrator. </span> + </div> + <div class="portals-list" style="margin-bottom: 0px;"> + <div> + <div class="simulateGridHeader"> + <span class="simulateGridHeaderTitle">Applications</span> + </div> + <div class="dashboard-boarder"> + <div class="gridster-container override_background"> + + <div att-gridster att-gridster-options="dashboard.gridsterOpts"> + + <div ng-if="appsView.length==1"> + <i class="ion-information-circled full-linear-ion-information-circled" + style="margin-left: 50%; font-size: 90px; color: black"></i> <br> + <div class="activity-error-msg1"> + <span>Click on the tile at the left to personalize your applications.</span> + </div> + </div> + + <div class="style_prevu_kit" att-gridster-item='item' + ng-repeat="item in appsView" + id="app-{{item.headerText.split(' ').join('-')}}"> + <!-- A regular application tile --> + <div class="grider-content-ecomp" ng-if="item.addRemoveApps == null"> + <div id="grips-{{item.headerText.split(' ').join('-')}}" + ng-hide="users.isLoadingTable && !users.getUserAppsIsDone" + att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{item.headerText | elipsis: 33}}" + class="app-gridster-header"></div> + <div id="app-image-{{item.headerText.split(' ').join('-')}}" + att-gridster-item-body + ng-style="{'cursor':'pointer', + 'background-image': 'url('+(item.imageLink)+')', + 'order': item.order, + 'background-color':'white', + 'background-repeat': 'no-repeat', + 'background-size': '170px 130px'}" + ng-click="dashboard.goToPortal(item)" + ng-hide="users.isLoadingTable && !users.getUserAppsIsDone" + class="gridsterContent"></div> + </div> + <!-- Format the special tile differently --> + <div class="grider-content-ecomp" style="width: 170px" ng-if="item.addRemoveApps"> + <div id="grips-add-remove-applications-tile" att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text='Select applications..' + ng-click="dashboard.goToCatalog()" + ng-style="{'cursor':'pointer'}" + class="app-gridster-header"> + </div> + <div id="app-image-empty" att-gridster-item-body + ng-style="{'cursor':'pointer', + 'text-align':'center', + 'order': item.order, + 'background-color':'white', + 'background-repeat': 'no-repeat', + 'background-size': '170px 130px', + 'width': '170px', + 'height': '120px', + 'opacity': '1'}" + ng-click="dashboard.goToCatalog()" class="gridsterContent"> + <label style="font-size:12px">Click here to personalize <br> this applications page</label> + <i class="ion-plus-circled" style="font-size:70px;color: #067ab4"></i> + </div> + </div> + </div> + + </div> + + </div> + + </div> + </div> + + <br> + <br> + + <div class="information-section"> + <div id="news-gridster-container" + class="gridster-container override_background"> + <div att-gridster att-gridster-options="dashboard.gridsterOpts"> + + <div class="style_prevu_kit"> + <!-- News --> + <div att-gridster-item='newsGridsterItem'> + <div att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{newsGridsterItem.headerText | elipsis: 33}}" + header-icon="full-linear-icon-webwindow" + sub-header-text="{{newsGridsterItem.subHeaderText | elipsis: 56}}" + class="information-sections-gridster-header" + style="font-size: 18px"> + + <div ng-if="isAdminPortalAdmin == true" + style="font-size: 20px;"> + + <a id="widgetHeaderBtns" + class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder" + ng-mousedown="showNewsOption=!showNewsOption" + ng-mouseleave="showNewsOption=false" + ng-class="singleBtnBorder" role="button" alt="Settings" + title="Settings" att-accessibility-click="13,32" tabindex="0"> + <span class="ion-more" style="color:#888"></span> + </a> + <ul class="optionsMenu" + style="max-width: 130px; height: 32px; display: block" + ng-show="showNewsOption" ng-mouseenter="showNewsOption=true" + ng-mouseleave="showNewsOption=false"> + <!-- ngIf: widget.duplicateAllowed --> + <li ng-click="editWidgetModalPopup(newsData, 'NEWS');" + ddh-accessibility-click="13,32"><a + class="optionsMenuLink" href="javascript:void(0)">Edit</a></li> + <!-- end ngIf: widget.duplicateAllowed --> + + </ul> + </div> + + </div> + <div id="newsContainer" att-gridster-item-body + class="information-section-gridsterContent"> + <div class="news"> + <ul id="newsContent" ng-show="newsData.length!=0"> + <li ng-repeat="news in newsData"><a href="{{news.href}}" + target="_blank" ng-bind="news.title"></a></li> + </ul> + <div ng-hide="newsData.length!=0"> + <div class="activity-error-container" + style="background: rgb(255, 255, 255); overflow: auto !important; width: 100%;"> + <div class="activity-error-block"> + <i class="ion-information-circled full-linear-ion-information-circled" + style="margin-left: 125px; font-size: 90px"></i> <br> + <div class="activity-error-msg1">There's currently no + news available.</div> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- Events --> + <div att-gridster-item='eventsGridsterItem'> + <div att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{eventsGridsterItem.headerText | elipsis: 33}}" + header-icon="full-linear-icon-calendar" + sub-header-text="{{eventsGridsterItem.subHeaderText | elipsis: 56}}" + class="information-sections-gridster-header" + style="font-size: 18px"> + <div style="font-size: 20px;" + ng-if="isAdminPortalAdmin == true" class="ng-scope" + role="button" tabindex="0"> + <a id="widgetHeaderBtns" + class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder" + ng-mousedown="showEventsOption=!showEventsOption" + ng-mouseleave="showEventsOption=false" + ng-class="singleBtnBorder" role="button" alt="Settings" + title="Settings" att-accessibility-click="13,32" tabindex="0"> + <span class="ion-more" style="color:#888"></span> + </a> + <ul class="optionsMenu" + style="max-width: 130px; height: 32px; display: block" + ng-show="showEventsOption" + ng-mouseenter="showEventsOption=true" + ng-mouseleave="showEventsOption=false"> + <!-- ngIf: widget.duplicateAllowed --> + <li ng-click="editWidgetModalPopup(eventData, 'EVENTS');"> + <a class="optionsMenuLink" href="javascript:void(0)" + ddh-accessibility-click="13,32">Edit</a> + </li> + <!-- end ngIf: widget.duplicateAllowed --> + </ul> + </div> + </div> + <div att-gridster-item-body + class="information-section-gridsterContent"> + <div class="events"> + <ul ng-show="eventData.length!=0"> + <li ng-repeat="event in eventData"> + <div ng-click="event_content_show=!event_content_show"> + <div class="events-date">{{event.mon}}/{{event.day}}/{{event.year}} + </div> + <div> + <div class="event-title-div"> + <p ng-bind="event.title"></p> + </div> + <div> + <span class="ion-ios-arrow-up" ng-if="event_content_show" + style="color: #888; font-size: 22px;"></span> <span + class="ion-ios-arrow-down" ng-if="!event_content_show" + style="color: #888; font-size: 22px;"></span> + + </div> + <div style="clear: both;"></div> + </div> + </div> + <div class="events-content" ng-show="event_content_show"> + <div class="events-content-body"> + <a class="events-link" ng-href="{{event.href}}" + target="_blank"> <span ng-bind="event.content"></span> + </a> + </div> + <div></div> + </div> + </li> + + + </ul> + <div ng-hide="eventData.length!=0"> + <div class="activity-error-container" + style="background: rgb(255, 255, 255); overflow: hidden !important; width: 100%;"> + <div class="activity-error-block"> + <i class="ion-information-circled full-linear-ion-information-circled" + style="margin-left: 125px; font-size: 90px"></i> <br> + <div class="activity-error-msg1">There's currently no + event available.</div> + </div> + </div> + </div> + </div> + </div> + </div> + + <!-- Important Resources --> + <div att-gridster-item='impoResGridsterItem'> + <div att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{impoResGridsterItem.headerText | elipsis: 33}}" + header-icon="full-linear-icon-cloud" + sub-header-text="{{impoResGridsterItem.subHeaderText | elipsis: 56}}" + class="information-sections-gridster-header" + style="font-size: 18px"> + <!-- <span class="full-linear-icon-cloud" style="font-size: 33px; font-weight: bold; margin-right: 10px;"></span> + --> + <div style="font-size: 20px;" + ng-if="isAdminPortalAdmin == true" class="ng-scope" + role="button" tabindex="0"> + <a id="widgetHeaderBtns" + class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder" + ng-class="singleBtnBorder" role="button" alt="Settings" + ng-mousedown="showImpResOption=!showImpResOption" + ng-mouseleave="showImpResOption=false" title="Settings" + att-accessibility-click="13,32" tabindex="0"> <span + class="ion-more" style="color:#888"></span> + </a> + + <ul class="optionsMenu" + style="max-width: 130px; height: 32px; display: block" + ng-show="showImpResOption" + ng-mouseenter="showImpResOption=true" + ng-mouseleave="showImpResOption=false"> + <!-- ngIf: widget.duplicateAllowed --> + <li + ng-click="editWidgetModalPopup(importResData, 'IMPORTANTRESOURCES');"> + <a class="optionsMenuLink" href="javascript:void(0)" + ddh-accessibility-click="13,32">Edit</a> + </li> + <!-- end ngIf: widget.duplicateAllowed --> + + </ul> + </div> + </div> + <div att-gridster-item-body + class="information-section-gridsterContent"> + <div class="resources"> + <ul ng-show="importResData.length!=0"> + + <li ng-repeat="item in importResData"><a + href="{{item.href}}" target="_blanl">{{item.title}}</a></li> + </ul> + <div ng-hide="importResData.length!=0"> + <div class="activity-error-container" + style="background: rgb(255, 255, 255); overflow: hidden !important; width: 100%;"> + <div class="activity-error-block"> + <i class="ion-information-circled full-linear-ion-information-circled" + style="margin-left: 125px; font-size: 90px"></i> <br> + <div class="activity-error-msg1">There's currently no + links available.</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="style_prevu_kit" att-gridster-item='item' + ng-repeat="item in widgetData"> + <div> + <div att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{item.headerText | elipsis: 33}}" + sub-header-text="{{item.subHeaderText | elipsis: 56}}" + class="app-gridster-header"></div> + <div att-gridster-item-body></div> + </div> + + </div> + + <div class="style_prevu_kit" att-gridster-item='item' + ng-repeat="item in widgetData"> + <div> + <div att-gridster-item-header + grips-img-path="assets/images/grips.png" + header-text="{{item.headerText | elipsis: 33}}" + sub-header-text="{{item.subHeaderText | elipsis: 56}}" + class="app-gridster-header"></div> + <div att-gridster-item-body></div> + </div> + + </div> + </div> + </div> + </div> + + <div></div> + + </div> + + </div> +</div>
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/dashboard/newsticker.controller.js b/ecomp-portal-FE/client/app/views/dashboard/newsticker.controller.js new file mode 100644 index 00000000..88e6942e --- /dev/null +++ b/ecomp-portal-FE/client/app/views/dashboard/newsticker.controller.js @@ -0,0 +1,47 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ +'use strict'; +(function () { + class NewsTickerController { + constructor($scope) { + $scope.newstape = function(){ + jQuery('.newstape').newstape({ + + period: 30, + + offset: 1, + + mousewheel: true, + + mousewheelRate: 30, + + dragable: true, + + heightSpy: true + + }); + }; + $scope.newstape(); + + } + } + NewsTickerController.$inject = ['$scope']; + angular.module('ecompApp').controller('NewsTickerController', NewsTickerController); +})(); |