diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/widget-catalog')
4 files changed, 602 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js new file mode 100644 index 00000000..2b0cc5cf --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js @@ -0,0 +1,350 @@ +/*-
+ * ================================================================================
+ * 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 WidgetCatalogCtrl {
+ constructor(widgetsService, $log, $cookies, $scope, conf, beReaderService, widgetsCatalogService, userProfileService,dashboardService,$compile, ngDialog) {
+
+ $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();
+ }
+ });
+ };
+
+ $scope.WidgetCatView = [];
+ $scope.applyPresentationDetailsToWidgetsCatalog = function(widgetsReturned){
+ var rowNo = 0;
+ for (var i = 0; i < widgetsReturned.length; i++) {
+ $scope.WidgetCatView[i] = {
+ sizeX : 2,
+ sizeY : 2,
+ headerText:'',
+ widgetIdentifier : '',
+ url : '',
+ widgetid: '',
+ attrb:'',
+ select: false,
+ };
+ $scope.WidgetCatView[i].widgetid = widgetsReturned[i].id;
+ $scope.WidgetCatView[i].headerText = widgetsReturned[i].headerName;
+
+ if(widgetsReturned[i].headerName === 'widget-news'){
+ $scope.WidgetCatView[i].widgetIdentifier = 'NEWS';
+ }
+ else
+ if(widgetsReturned[i].headerName === 'widget-resources'){
+ $scope.WidgetCatView[i].widgetIdentifier = 'IMPORTANTRESOURCES';
+ }
+ else
+ if(widgetsReturned[i].headerName === 'widget-events'){
+ $scope.WidgetCatView[i].widgetIdentifier = 'EVENTS';
+ }
+
+ $scope.WidgetCatView[i].url = widgetsReturned[i].url;
+ $scope.WidgetCatView[i].attrb = widgetsReturned[i].attrs;
+ $scope.WidgetCatView[i].select = widgetsReturned[i].select;
+ }
+
+ $scope.widgetViewData = $scope.WidgetCatView;
+
+ }
+
+ /** Widget code starts */
+ let getUserWidgets = (loginName) => {
+
+ this.isCommError = false;
+ var conf = this.conf;
+ widgetsCatalogService.getUserWidgets(loginName).then(res => {
+
+ if(!(res instanceof Array)){
+ this.isCommError = true;
+ return;
+ }
+ for(var i = 0; i < res.length; i++){
+ var widget_id = res[i][0];
+ var widget_name = res[i][1];
+ let url = this.conf.api.widgetCommon + "/" + widget_id + "/framework.js";
+ $scope.widgetsList.push({
+ id: widget_id,
+ name: widget_name,
+ headerName: widget_name,
+ url: url,
+ attrs: [{attr: 'data-' + widget_id, value: ''}],
+ status: res[i][4],
+ select: (res[i][4] == 'S' || res[i][4] === null) ? true : false
+ });
+ var script = document
+ .createElement('script');
+ script.src = url;
+ script.async = true;
+ var entry = document
+ .getElementsByTagName('script')[0];
+ entry.parentNode
+ .insertBefore(script, entry);
+ }
+ $scope.applyPresentationDetailsToWidgetsCatalog($scope.widgetsList);
+ }).catch(err => {
+ $log.error('WidgetCatalogCtrl::getUserWidgets caught error', err);
+ }).finally(()=> {
+
+ });
+ };
+
+ let init = () => {
+ userProfileService.getUserProfile()
+ .then(profile=> {
+ // $log.info('WidgetCatalogCtrl::getUserProfile: ',
+ // profile);
+ $scope.orgUserId = profile.orgUserId;
+ $scope.widgetsViewData = [];
+ $scope.widgetsView = [];
+ getUserWidgets($scope.orgUserId);
+ });
+ this.conf = conf;
+ $scope.widgetsList = [];
+ };
+
+ /** Widget code ends */
+
+ $scope.activateThis = function(ele){
+ $compile(ele.contents())($scope);
+ $scope.$apply();
+ };
+ $scope.setCommonWidget = function() {
+ /* News Events Resources */
+ var widgetLength = ($scope.widgetsViewData==null || $scope.widgetsViewData.length==0) ? 0:$scope.widgetsViewData.length;
+ $scope.widgetsViewData[widgetLength] = {
+ sizeX: 2,
+ sizeY: 2,
+ headerText: 'News',
+ width: '',
+ height: '',
+ url: '',
+ selected:true
+ };
+ $scope.widgetsViewData[widgetLength+1] = {
+ sizeX: 2,
+ sizeY: 2,
+ headerText: 'Calendar Events',
+ width: '',
+ height: '',
+ url: '',
+ selected:true
+ };
+ $scope.widgetsViewData[widgetLength+2] = {
+ sizeX: 2,
+ sizeY: 2,
+ headerText: 'Resources',
+ width: '',
+ height: '',
+ url: '',
+ selected:true
+ };
+
+ /* Setting 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);
+ });
+ }
+ $scope.updateNews();
+ /* Setting 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);
+ });
+ }
+ $scope.updateEvents();
+ /* Setting Important Resources data */
+
+ $scope.importResData = [];
+ $scope.updateImportRes = function() {
+ $scope.importResData.length=0;
+ dashboardService.getCommonWidgetData('IMPORTANTRESOURCES').then(
+ function(res) {
+ // $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);
+ });
+ }
+ $scope.updateImportRes();
+
+ /** ******End hardcoded news events and resources*************** */
+
+ }
+
+ $scope.newsGridsterItem = {
+ headerText : 'Test',
+ subHeaderText : ''
+ };
+
+ $scope.newsGridsterItem = {
+ headerText : 'News',
+ subHeaderText : ''
+ };
+
+ $scope.eventsGridsterItem = {
+ headerText : 'Events',
+ subHeaderText : ''
+ };
+
+ $scope.impoResGridsterItem = {
+ headerText : 'Resources',
+ subHeaderText : ''
+ };
+
+ this.gridsterOpts = {
+ columns: 6,
+ colWidth: 190,
+ rowHeight: 190,
+ margins: [20, 20],
+ outerMargin: true,
+ pushing: true,
+ floating: true,
+ swapping: true,
+ draggable: {
+ handle: '.icon-content-gridguide'
+ }
+ };
+
+ // Run this function when user clicks on checkbox.
+ $scope.storeSelection = function(widget) {
+
+ // not needed as only 'SHOW' and 'HIDE' status_cd is expected from the micro service now
+ /*var pendingFlag = false;
+ if(widget.access)
+ pendingFlag = false;
+ else
+ pendingFlag = widget.pending; */
+
+ var appData = {
+ widgetId: widget.widgetid,
+ select : widget.select,
+ // pending : pendingFlag
+ };
+
+ widgetsCatalogService.updateWidgetCatalog(appData).then(
+ function(result) {
+ // $log.debug('CatalogCtrl:storeSelection result is ', result);
+ })['catch'](function(err) {
+ $log.error('CatalogCtrl:storeSelection: exception: ', err);
+ });
+ };
+
+ init();
+ }
+ }
+
+
+
+ WidgetCatalogCtrl.$inject = ['widgetsService', '$log', '$cookies', '$scope', 'conf', 'beReaderService', 'widgetsCatalogService', 'userProfileService','dashboardService','$compile','ngDialog'];
+ angular.module('ecompApp').controller('WidgetCatalogCtrl', WidgetCatalogCtrl);
+
+ angular.module('ecompApp').constant('refreshInterval', '30000');
+
+ angular.module('ecompApp').directive('refreshIframe', ['$interval', 'refreshInterval', function ($interval, refreshInterval) {
+
+ function link(scope, element, attrs) {
+ var timeoutId;
+
+ function updateIframe() {
+ if(attrs.isEnlarged == "false")
+ {
+ element.attr('src', element.attr('src'));
+ }
+ }
+
+ element.on('$destroy', function () {
+ $interval.cancel(timeoutId);
+ });
+
+ // start the UI update process; save the timeoutId for cancelling
+ /*
+ * timeoutId = $interval(function () { updateIframe(); // update DOM },
+ * refreshInterval);
+ */
+ }
+
+ return {
+ link: link
+ };
+ } ]);
+
+})();
+
+
+app.directive('dynAttr', function() {
+ return {
+ scope: { list: '=dynAttr' },
+ link: function(scope, elem, attrs){
+ for(var attr in scope.list){
+ elem.attr(scope.list[attr].attr, scope.list[attr].value);
+ }
+ }
+ };
+});
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js new file mode 100644 index 00000000..77659d93 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js @@ -0,0 +1,20 @@ +/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.less b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.less new file mode 100644 index 00000000..65a74a5f --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.less @@ -0,0 +1,156 @@ +.widget-catalog{ + .bg_portalWhite;//white for 1702 + //.bg_portalGray; // gray for 1610 + 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; + margin: auto; + + .widget-title { + padding-left: 20px; + margin-bottom: -15px; + } + + .widget-gridster-header { + color: #0574ac; + font-family: Omnes-ECOMP-W02-Bold, Arial; + font-size: 18px; + } + + .widget-gridster-footer { + background-color: @portalWhite + } + + .widget-iframe { + width: 100%; + height: 100%; + } + + .widget-image { + cursor: pointer; + width: 20px; + height: 25px; + } + + .enlarge-content{ + top: 120px; + left: 400px; + width:1170px; + height:600px; + right: 0; + bottom: 0; + left: 0; + background: none repeat scroll 0 0 @funcBkgGray; + } + + .enlarge-close-button{ + .btn-blue; + position: relative; + top : -20px; + left : 1145px; + width : 25px; + } + + .widgets-home-container { + //.content_justify; + //position: relative; + padding-right: 0; + padding-left: 0; + padding-bottom: 32px; + width: 100%; + //margin-left: @table-margin-left; + + .portals-list { + min-height: 70vh; + //display: flex; + //justify-content: center; + flex-flow: row wrap; + width: @table-width; + margin:auto; + //margin-left: @table-margin-left; + margin-bottom: 63px; + + .portals-list-item { + background-color: @portalWhite; + 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: @portalWhite; + height: 50px; + top: 180px; + // position: relative; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + padding: 16px; + + .info-title { + //.a24r; + .dBlue24r; // AT&T Dark Blue + margin-bottom: 4px; + + text-overflow: ellipsis; + overflow: hidden; + } + .info-description { + .portalDBlue16r; + 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; + } + } + } + } + } +} + +.gridster-item-container .gridster-item-body { + bottom:0px; + overflow-y:auto; + overflow-x:hidden; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +#widget-page-content{ + padding-left:250px; +} + +.widget-centerAlignment{ +margin: auto; +width: 1170px; +} +#widget-checkbox-label{ +margin-left: 190px; +top: 3px; +} diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html new file mode 100644 index 00000000..1b77a28c --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html @@ -0,0 +1,76 @@ +<!--
+ ================================================================================
+ 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-main">
+ <div class="w-ecomp-main-container">
+ <div class="widget-catalog" id="widget-page-content">
+ <div id="title" class="w-ecomp-main-view-title">
+ <h1 class="heading-page">Widget Catalog</h1>
+ </div>
+ <div class="widget-centerAlignment">
+ <div class="portals-list">
+ <div ng-show="widgetCatalog.isCommError">Failed to
+ communicate with the widget microservice.</div>
+ <div id="widgets" class="information-section"
+ ng-hide="widgetCatalog.isCommError">
+ <div id="news-gridster-container"
+ class="gridster-container override_background">
+ <div class="content" gridster="widgetCatalog.gridsterOpts">
+ <ul>
+ <li gridster-item="widget" ng-repeat="widget in widgetViewData">
+ <div class="box">
+ <div class="box-header">
+ <i style="cursor: move;" class="icon-content-gridguide"></i>
+ <h3>{{ widget.headerText}}</h3>
+ <div class="form-row">
+ <label id="widget-checkbox-label" class="checkbox"> <input type="checkbox"
+ id="{{widget.headerText.split(' ').join('-')}}-checkbox"
+ ng-model="widget.select"
+ ng-change="storeSelection(widget)"> <i
+ class="skin"></i>
+ </label>
+ </div>
+ </div>
+ <div class="box-content">
+ <div dyn-attr="widget.attrb"></div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div ng-show="widgetCatalog.isEnlarged">
+ <div id="widgets-button-enlarge-close"
+ class="enlarge-close-button"
+ ng-click="widgetCatalog.isEnlarged=false">X</div>
+ <iframe id="iframe-widget-enlarge-close"
+ ng-src="{{widgetCatalog.enlargeURL | trusted}}"
+ class="enlarge-content"> </iframe>
+ </div>
+ </div>
+ </div>
+
+ <div id="widgets-disclaimer" class="w-ecomp-main-disclaimer">
+ To request access to an application widget, please visit the <a
+ ng-href="getAccess">Get Access</a> page.
+ </div>
+ </div>
+ </div>
+</div>
|