Page MenuHomePhabricator
Differential D238 Diff 928 src/app/navBar/navBar.component.ts

Changeset View

Standalone View

View Options

src/app/navBar/navBar.component.ts

Show All 9 Lines
import { AreaService } from '../_services/area.service'; import { AreaService } from '../_services/area.service';
import { AuthenticationService } from '../_services/authentication.service'; import { AuthenticationService } from '../_services/authentication.service';
import { NavBarService } from '../_services/navBar.service'; import { NavBarService } from '../_services/navBar.service';
import { NotificationService } from '../_services/notification.service'; import { NotificationService } from '../_services/notification.service';
import { BootController } from '../../boot-control'; import { BootController } from '../../boot-control';
@Component({ @Component({
selector: 'app-nav-bar', selector: 'app-nav-bar',
templateUrl: 'navBar.component.html' templateUrl: 'navBar.component.html',
styleUrls: ['./navBar.component.scss']
}) })
export class NavBarComponent implements OnInit, OnDestroy { export class NavBarComponent implements OnInit, OnDestroy {
@ViewChild('sidenav') sidenav: MatSidenav; @ViewChild('sidenav') sidenav: MatSidenav;
activeLinkIndex = 2; activeLinkIndex = 1;
areas = new Array<Area>(new Area('', '', 0, 0)); areas = new Array<Area>(new Area('', '', 0, 0));
areaReputation: { [area: string]: number; } = { }; areaReputation: { [area: string]: number; } = { };
areaSpread: { [area: string]: number; } = { }; areaSpread: { [area: string]: number; } = { };
areaVisible = true; areaVisible = true;
comment: CommentData = new CommentData('', null); comment: CommentData = new CommentData('', null);
commentDisabled = false; commentDisabled = false;
componentDestroyed: Subject<boolean> = new Subject(); componentDestroyed: Subject<boolean> = new Subject();
currentArea: Area = this.areas[0]; currentArea: Area = this.areas[0];
Show All 21 Lines constructor(
private dialog: MatDialog, private dialog: MatDialog,
private ngZone: NgZone, private ngZone: NgZone,
private router: Router, private router: Router,
public snackBar: MatSnackBar, public snackBar: MatSnackBar,
private areaService: AreaService, private areaService: AreaService,
private authenticationService: AuthenticationService, private authenticationService: AuthenticationService,
private notificationService: NotificationService, private notificationService: NotificationService,
private navBarService: NavBarService private navBarService: NavBarService
) { ) { }
this.routeLinks = [
{label: 'Profile', link: '/profile/', index: '0'},
{label: 'Notifications', link: '/notifications/1/', index: '1'},
{label: 'Home', link: '/', index: '2'},
{label: 'My Posts', link: '/posts/1/', index: '3'},
{label: 'Create a Post', link: '/create/', index: '4'}
];
this.mobileRouteLinks = [
{label: '<i class="material-icons">perm_identity</i>', link: '/profile/', index: '0'},
{label: '<i class="material-icons">notifications_none</i>', link: '/notifications/1/', index: '1'},
{label: '<i class="material-icons">home</i>', link: '/', index: '2'},
{label: '<i class="material-icons">content_copy</i>', link: '/posts/1/', index: '3'},
{label: '<i class="material-icons">create</i>', link: '/create/', index: '4'}
];
}
ngOnInit() { ngOnInit() {
this.navBarService.areaVisible this.router.events
.takeUntil(this.componentDestroyed)
.subscribe((visible: boolean) => {
this.areaVisible = visible;
this.cdRef.detectChanges();
});
this.navBarService.hasPost
.takeUntil(this.componentDestroyed)
.subscribe((has: boolean) => {
this.hasPost = has;
this.cdRef.detectChanges();
});
this.navBarService.clearInputs
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((action: boolean) => { .subscribe((url: any) => {
if (action) { this.setActiveIndex(url.url);
this.comment.comment = '';
this.comment.image = null;
this.contractBox();
this.commentDisabled = false;
} else {
this.commentDisabled = false;
}
}); });
this.navBarService.loggedIn this.navBarService.loggedIn
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((loggedIn: boolean) => { .subscribe((loggedIn: boolean) => {
if (loggedIn === true) { if (loggedIn === true) {
this.login(); this.login();
this.styleMobile = ''; this.styleMobile = '';
this.styleDesktop = ''; this.styleDesktop = '';
} }
this.cdRef.detectChanges(); this.cdRef.detectChanges();
}); });
if (this.authenticationService.token) { if (this.authenticationService.token) {
this.login(); this.login();
this.loggedIn = true; this.loggedIn = true;
} else { } else {
this.styleMobile = 'none'; this.styleMobile = 'none';
this.styleDesktop = 'none'; this.styleDesktop = 'none';
this.navBarService.areaVisible.next(false); this.navBarService.areaVisible.next(false);
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
} }
ngOnDestroy() { ngOnDestroy() {
this.contractBox();
this.cdRef.detach(); this.cdRef.detach();
this.componentDestroyed.next(true); this.componentDestroyed.next(true);
this.componentDestroyed.complete(); this.componentDestroyed.complete();
} }
private addLineBreak(s: string) {
if (this.comment.comment !== '') {
this.comment.comment += '\n';
}
this.comment.comment += s;
}
addBlockQoutes() {
this.addLineBreak('> Blockquote example');
}
addBold() {
this.addLineBreak('**Example**');
}
addImage() {
const dialogRef = this.dialog.open(PictureDialogComponent);
dialogRef.componentInstance.comment = true;
dialogRef.afterClosed()
.takeUntil(this.componentDestroyed)
.subscribe(result => {
if (result.bool) {
this.comment.image = result.picture;
this.snackBar.open('Image added successfully', 'Close', {
duration: 3000
});
} else {
this.snackBar.open('You did not select a valid image file', 'Close', {
duration: 3000
});
}
});
}
addItalics() {
this.addLineBreak('_Example_');
}
addStrikethrough() {
this.addLineBreak('~~Example~~');
}
close() {
this.sidenav.close();
}
contractBox() {
this.expanded = false;
this.rowsExapanded = 2;
this.styleMobile = '';
this.styleHeightTextarea = '56px';
if (window.screen.width < 600) {
this.styleHeightTextarea = '40px';
this.styleBottomTextarea = '40px';
this.styleBottomEditor = '3px';
this.styleHeightEditor = '48px';
this.styleBottomSend = '42px';
this.styleHeightSend = '38px';
}
}
deleteImage() {
this.comment.image = null;
this.snackBar.open('Image removed successfully', 'Close', {
duration: 3000
});
}
expandBox() {
this.expanded = true;
this.rowsExapanded = 3;
this.styleMobile = 'none';
this.styleBottomEditor = '48px';
this.styleHeightTextarea = '96px';
if (window.screen.width < 600) {
this.styleHeightTextarea = '118px';
this.styleBottomTextarea = '0px';
this.styleBottomEditor = '59px';
this.styleHeightEditor = '59px';
this.styleBottomSend = '0px';
this.styleHeightSend = '59px';
}
}
getNotificationLength(nLength: number) { getNotificationLength(nLength: number) {
if (nLength.toString().length === 4) { if (nLength.toString().length === 4) {
return nLength.toString().slice(0, 1) + 'K'; return nLength.toString().slice(0, 1) + 'K';
} else if (nLength.toString().length === 5) { } else if (nLength.toString().length === 5) {
return nLength.toString().slice(0, 2) + 'K'; return nLength.toString().slice(0, 2) + 'K';
} else if (nLength.toString().length >= 6) { } else if (nLength.toString().length >= 6) {
return '\u221E'; return '\u221E';
} else { } else {
Show All 14 Lines login() {
this.navBarService.notifications this.navBarService.notifications
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(num => { .subscribe(num => {
this.notificationLength = num; this.notificationLength = num;
this.cdRef.detectChanges(); this.cdRef.detectChanges();
}); });
this.navBarService.isVisibleSource
.takeUntil(this.componentDestroyed)
.subscribe((isVisible: string) => {
this.styleMobile = isVisible;
this.cdRef.detectChanges();
});
Observable.interval(2000 * 60) Observable.interval(2000 * 60)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(x => { .subscribe(x => {
this.notificationService.getSuperNotification(10, 0) this.notificationService.getSuperNotification(10, 0)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(superNotification => { .subscribe(superNotification => {
this.navBarService.notifications.next(superNotification.count); this.navBarService.notifications.next(superNotification.count);
this.cdRef.detectChanges(); this.cdRef.detectChanges();
}); });
}); });
this.router.events
.takeUntil(this.componentDestroyed)
.subscribe((url: any) => {
this.setActiveIndex(url.url);
});
this.areaService.getAreas() this.areaService.getAreas()
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(areas => { .subscribe(areas => {
this.areas = []; this.areas = [];
for (let i = 0; i < areas.length; i++) { for (let i = 0; i < areas.length; i++) {
this.areaService.getAreaRep(areas[i].name) this.areaService.getAreaRep(areas[i].name)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
▲ Show 20 Lines • Show All 53 Lines • ▼ Show 20 Linesexport class NavBarComponent implements OnInit, OnDestroy {
setActiveIndex(s: string) { setActiveIndex(s: string) {
this.width = '100%'; this.width = '100%';
if (s === undefined) { if (s === undefined) {
s = '/'; s = '/';
} }
if (s === '/profile') { if (s === '/profile') {
this.stylePage = false; this.stylePage = false;
this.activeLinkIndex = 0; this.activeLinkIndex = 4;
this.navBarService.areaVisible.next(false);
} else if (s === '/notifications/archive') { } else if (s === '/notifications/archive') {
this.stylePage = false; this.stylePage = false;
this.width = '90%'; this.activeLinkIndex = 2;
this.activeLinkIndex = 1;
this.navBarService.areaVisible.next(true);
} else if (s.lastIndexOf('/notifications/archive/') !== -1) { } else if (s.lastIndexOf('/notifications/archive/') !== -1) {
this.stylePage = false; this.stylePage = false;
this.width = '90%'; this.activeLinkIndex = 2;
this.activeLinkIndex = 1;
this.navBarService.areaVisible.next(true);
} else if (s === '/notifications') { } else if (s === '/notifications') {
this.stylePage = false; this.activeLinkIndex = 2;
this.activeLinkIndex = 1;
this.navBarService.areaVisible.next(false);
} else if (s.lastIndexOf('/notifications/') !== -1) { } else if (s.lastIndexOf('/notifications/') !== -1) {
this.stylePage = false;
this.activeLinkIndex = 1;
this.navBarService.areaVisible.next(false);
} else if (s === '/') {
this.stylePage = true;
this.activeLinkIndex = 2; this.activeLinkIndex = 2;
this.navBarService.areaVisible.next(true); } else if (s === '/') {
this.activeLinkIndex = 1;
} else if (s === '/posts') { } else if (s === '/posts') {
this.stylePage = false;
this.activeLinkIndex = 3; this.activeLinkIndex = 3;
this.navBarService.areaVisible.next(true);
} else if (s.lastIndexOf('/posts/') !== -1) { } else if (s.lastIndexOf('/posts/') !== -1) {
this.stylePage = false;
this.activeLinkIndex = 3; this.activeLinkIndex = 3;
this.navBarService.areaVisible.next(true);
} else if (s === '/create') { } else if (s === '/create') {
this.stylePage = false; this.activeLinkIndex = -1;
this.activeLinkIndex = 4;
this.navBarService.areaVisible.next(true);
} else if (s.lastIndexOf('/create/') !== -1) { } else if (s.lastIndexOf('/create/') !== -1) {
this.stylePage = false; this.activeLinkIndex = -1;
this.activeLinkIndex = 4;
this.navBarService.areaVisible.next(false);
} else if (s === '/drafts') { } else if (s === '/drafts') {
this.stylePage = false; this.activeLinkIndex = -1;
this.width = '90%';
this.activeLinkIndex = 4;
this.navBarService.areaVisible.next(true);
} else if (s.lastIndexOf('/areas/') !== -1) { } else if (s.lastIndexOf('/areas/') !== -1) {
this.stylePage = true; this.activeLinkIndex = -1;
this.width = '90%';
this.activeLinkIndex = 2;
this.navBarService.areaVisible.next(false);
} else if (s.lastIndexOf('/user/') !== -1) { } else if (s.lastIndexOf('/user/') !== -1) {
this.stylePage = false; this.activeLinkIndex = -1;
this.width = '90%'; } else if (s.lastIndexOf('/login') !== -1) {
this.activeLinkIndex = 0; this.activeLinkIndex = -1;
this.navBarService.areaVisible.next(false);
} }
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
switchRoute(s: string) {
if (s === 'home') {
this.router.navigateByUrl('/');
} else if (s === 'profile') {
this.router.navigateByUrl('/profile');
} else if (s === 'notifications') {
this.router.navigateByUrl('/notifications');
} else if (s === 'my-posts') {
this.router.navigateByUrl('/posts');
}
}
} }
Copyright WildFyre · Privacy Policy · Terms and Conditions