diff options
Diffstat (limited to 'portal-FE-common/src/app/layout/components/userbar')
4 files changed, 210 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/layout/components/userbar/userbar.component.html b/portal-FE-common/src/app/layout/components/userbar/userbar.component.html new file mode 100644 index 00000000..e9a8b822 --- /dev/null +++ b/portal-FE-common/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-common/src/app/layout/components/userbar/userbar.component.scss b/portal-FE-common/src/app/layout/components/userbar/userbar.component.scss new file mode 100644 index 00000000..b139d311 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/userbar/userbar.component.scss @@ -0,0 +1,76 @@ +.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-common/src/app/layout/components/userbar/userbar.component.spec.ts b/portal-FE-common/src/app/layout/components/userbar/userbar.component.spec.ts new file mode 100644 index 00000000..db476dde --- /dev/null +++ b/portal-FE-common/src/app/layout/components/userbar/userbar.component.spec.ts @@ -0,0 +1,25 @@ +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-common/src/app/layout/components/userbar/userbar.component.ts b/portal-FE-common/src/app/layout/components/userbar/userbar.component.ts new file mode 100644 index 00000000..8f68018a --- /dev/null +++ b/portal-FE-common/src/app/layout/components/userbar/userbar.component.ts @@ -0,0 +1,96 @@ +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; + } + }; + + + +} |