diff options
Diffstat (limited to 'portal-FE-os/src/app/layout/components/userbar')
4 files changed, 324 insertions, 0 deletions
diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.html b/portal-FE-os/src/app/layout/components/userbar/userbar.component.html new file mode 100644 index 00000000..e9a8b822 --- /dev/null +++ b/portal-FE-os/src/app/layout/components/userbar/userbar.component.html @@ -0,0 +1,13 @@ +<button type="button" class="btn btn-primary" href="javascript:void(0)" +[ngStyle]="{'right': isOpen ? '65px' : '-18px' }" (click)="toggleSidebar()"> + <span id="user-chevron-down" class="icon-controls-down" [hidden]="!isOpen">Close</span> + <span id="user-chevron-up" class="icon-controls-upPRIMARY" [hidden]="isOpen"><span class="right-menu-button"><i + class="icon ion-md-arrow-dropup"></i> Users</span></span> +</button> +<nav [ngStyle]="{'right': isOpen ? '18px' : '-75px' }" class="usb-item usb-item-vertical usb-item-right" id="usb-item-s2"> + <h3>Online Users</h3> + <div *ngFor="let user of userList" style="font-size: 10px;"> + <a [href]="user.linkQ"><img class="activeUserIcon" [src]="user.linkPic" alt="User Link"></a> + <div class="userId-txt">{{user.userId}}</div> + </div> +</nav>
\ No newline at end of file diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss b/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss new file mode 100644 index 00000000..ee9f8279 --- /dev/null +++ b/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss @@ -0,0 +1,114 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2017-2018 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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. + * + * ============LICENSE_END============================================ + * + * + */ + +.usb-item { + background: #fff; + position: fixed; +} + +.usb-item h3 { + color: #ef6f00; + font-size: 14px; + padding: 20px; + margin: 0; + text-align: center; + font-weight: 300; + background: #f8f9fa; +} + +.usb-item a { + display: block; + color: #fff; + font-size: 1.1em; + font-weight: 300; + transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; /* IE 9 */ + -webkit-transition: all 0.2s ease-in-out; /* Safari 3-8 */ +} + +.usb-item a:active { + background: #afdefa; + color: #47a3da; +} + +.usb-item-right { + transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; /* IE 9 */ + -webkit-transition: all 0.5s ease-in-out; /* Safari 3-8 */ +} + +.usb-item a:hover { + -ms-transform: scale(1.5); /* IE 9 */ + -webkit-transform: scale(1.5); /* Safari 3-8 */ + transform: scale(1.5); +} + +.usb-item-vertical { + margin-top: 105px; + text-align: center; + width: 75px; + height: 79%; + top: 0; + z-index: 1000; + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); +} + +.usb-item-vertical a { + padding: 0.5em; +} + +button { + transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; /* IE 9 */ + -webkit-transition: all 0.5s ease-in-out; /* Safari 3-8 */ + z-index: 9999; + top: 450px; + -ms-transform: rotate(-90deg); /* IE 9 */ + -webkit-transform: rotate(-90deg); /* Safari 3-8 */ + transform: rotate(-90deg); + position: fixed; +} + +.activeUserIcon { + display: block; + margin-left: auto; + margin-right: auto; + height: 55px; + width: 55px; + border-radius: 50%; +} diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts b/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts new file mode 100644 index 00000000..4115433c --- /dev/null +++ b/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts @@ -0,0 +1,63 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2017-2018 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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. + * + * ============LICENSE_END============================================ + * + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserbarComponent } from './userbar.component'; + +describe('UserbarComponent', () => { + let component: UserbarComponent; + let fixture: ComponentFixture<UserbarComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserbarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts b/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts new file mode 100644 index 00000000..343305fe --- /dev/null +++ b/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts @@ -0,0 +1,134 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2017-2018 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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. + * + * ============LICENSE_END============================================ + * + * + */ + +import { Component, OnInit } from '@angular/core'; +import { UserbarService, UserProfileService } from 'src/app/shared/services'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Component({ + selector: 'app-userbar', + templateUrl: './userbar.component.html', + styleUrls: ['./userbar.component.scss'] +}) +export class UserbarComponent implements OnInit { + + userList; + isOpen: boolean; + intervalPromise = null; + updateRate: number; + myservice: UserbarService; + constructor(private sanitizer: DomSanitizer, private userbarService: UserbarService, private userProfileService: UserProfileService) { } + + ngOnInit() { + this.userList = []; + this.myservice = this.userbarService; + this.isOpen = true; + // this.userbarService.getOnlineUserUpdateRate().subscribe((_res: any) => { + // if (_res != null) { + // var rate = parseInt(_res.onlineUserUpdateRate); + // var duration = parseInt(_res.onlineUserUpdateDuration); + // this.userbarService.setMaxRefreshCount((duration / rate) + 1); + // this.userbarService.setRefreshCount(this.userbarService.maxCount); + // if (rate != NaN && duration != NaN) { + // // $log.debug('UserbarCtlr: scheduling function at interval ' + millis); + // this.updateRate = rate; + // this.start(this.updateRate); + // } + // } + // }) + this.updateActiveUsers(); + } + + updateActiveUsers() { + // this.userbarService.decrementRefreshCount(); + this.userProfileService.getActiveUser().subscribe((_res: any) => { + if (_res == null) { + // $log.error('UserbarCtrl::updateActiveUsers: failed to get active user'); + this.stop(); + } else { + var maxItems = 25; + if (_res.length < maxItems) + maxItems = _res.length; + for (var i = 0; i < maxItems; i++) { + var data = { + userId: _res[i], + linkQ: this.sanitizer.bypassSecurityTrustResourceUrl('qto://talk/' + _res[i]), + linkPic: 'https://tspace.web.att.com/profiles/photo.do?uid=' + _res[i] + } + this.userList.push(data); + } + } + + }, (err) => { + this.userList = []; + this.stop(); + }) + + // .add(() => { + // var footerOff = $('#online-userbar').offset().top; + // var headOff = $('#footer').offset().top; + // var defaultOffSet = 45; + // $(".online-user-container").css({ + // "height": headOff - footerOff - defaultOffSet + // }); + // }) + + } + + toggleSidebar() { + this.isOpen = !this.isOpen; + } + + start(rate) { + // stops any running interval to avoid two intervals running at the same time + this.stop(); + // store the interval promise + this.intervalPromise = setInterval(this.updateActiveUsers, rate); + }; + + + stop() { + if (this.intervalPromise != null) { + clearInterval(this.intervalPromise); + this.intervalPromise = null; + } + }; + + + +} |