Changeset View
Changeset View
Standalone View
Standalone View
src/app/home/home.component.ts
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; | import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; | ||||
import { FormGroup, FormControl } from '@angular/forms'; | |||||
import { MatDialog, MatSnackBar } from '@angular/material'; | import { MatDialog, MatSnackBar } from '@angular/material'; | ||||
import { Router } from '@angular/router'; | import { Router } from '@angular/router'; | ||||
import { Subject } from 'rxjs/Subject'; | import { Subject } from 'rxjs/Subject'; | ||||
import { ConfirmDeletionDialogComponent } from '../_dialogs/confirmDeletion.dialog.component'; | import { ConfirmDeletionDialogComponent } from '../_dialogs/confirmDeletion.dialog.component'; | ||||
import { FlagDialogComponent } from '../_dialogs/flag.dialog.component'; | import { FlagDialogComponent } from '../_dialogs/flag.dialog.component'; | ||||
import { ShareDialogComponent } from '../_dialogs/share.dialog.component'; | import { ShareDialogComponent } from '../_dialogs/share.dialog.component'; | ||||
import { Area } from '../_models/area'; | import { Area } from '../_models/area'; | ||||
import { Author } from '../_models/author'; | import { Author } from '../_models/author'; | ||||
import { Comment } from '../_models/comment'; | import { Comment } from '../_models/comment'; | ||||
import { CommentData } from '../_models/commentData'; | import { CommentData } from '../_models/commentData'; | ||||
import * as C from '../_models/constants'; | import * as C from '../_models/constants'; | ||||
import { Link } from '../_models/link'; | import { Link } from '../_models/link'; | ||||
import { Post } from '../_models/post'; | import { Post } from '../_models/post'; | ||||
import { Reputation } from '../_models/reputation'; | import { Reputation } from '../_models/reputation'; | ||||
import { AreaService } from '../_services/area.service'; | |||||
import { CommentService } from '../_services/comment.service'; | import { CommentService } from '../_services/comment.service'; | ||||
import { FlagService } from '../_services/flag.service'; | import { FlagService } from '../_services/flag.service'; | ||||
import { NavBarService } from '../_services/navBar.service'; | import { NavBarService } from '../_services/navBar.service'; | ||||
import { PostService } from '../_services/post.service'; | import { PostService } from '../_services/post.service'; | ||||
import { ProfileService } from '../_services/profile.service'; | import { ProfileService } from '../_services/profile.service'; | ||||
import { RouteService } from '../_services/route.service'; | import { RouteService } from '../_services/route.service'; | ||||
enum TypeOfReport { | enum TypeOfReport { | ||||
Post, | Post, | ||||
Comment | Comment | ||||
} | } | ||||
@Component({ | @Component({ | ||||
templateUrl: 'home.component.html', | templateUrl: 'home.component.html', | ||||
styleUrls: ['./home.component.scss'] | |||||
}) | }) | ||||
export class HomeComponent implements OnInit, OnDestroy { | export class HomeComponent implements OnInit, OnDestroy { | ||||
private systemAuthor: Author = new Author(375, 'WildFyre', '', '', false); | private systemAuthor: Author = new Author(375, 'WildFyre', '', '', false); | ||||
areaCheck: string; | areaCheck: string; | ||||
blockedUsers: string[]; | blockedUsers: string[]; | ||||
blanketText = `<span class="markdown fyre-blanket"><p>Fyre Blanket</p></span>`; | blanketText = `<span class="markdown fyre-blanket"><p>Fyre Blanket</p></span>`; | ||||
areas = new Array<Area>(new Area('', '', 0, 0)); | |||||
commentCount = 0; | commentCount = 0; | ||||
commentForm: FormGroup; | |||||
componentDestroyed: Subject<boolean> = new Subject(); | componentDestroyed: Subject<boolean> = new Subject(); | ||||
currentArea: string; | currentArea: Area; | ||||
errors: any; | |||||
fakePost: Post = new Post(0, this.systemAuthor, false, false, Date(), false, | fakePost: Post = new Post(0, this.systemAuthor, false, false, Date(), false, | ||||
'No more posts in this area, try creating one?', null, null, []); | 'No more posts in this area, try creating one?', null, null, []); | ||||
isCopied = false; | isCopied = false; | ||||
loading = true; | loading = true; | ||||
loggedIn = true; | loggedIn = true; | ||||
post: Post = this.fakePost; | post: Post = this.fakePost; | ||||
rep: Reputation; | rep: Reputation; | ||||
userID: number; | self: Author; | ||||
wait = true; | wait = true; | ||||
constructor( | constructor( | ||||
private cdRef: ChangeDetectorRef, | private cdRef: ChangeDetectorRef, | ||||
private dialog: MatDialog, | private dialog: MatDialog, | ||||
private router: Router, | private router: Router, | ||||
private snackBar: MatSnackBar, | private snackBar: MatSnackBar, | ||||
private areaService: AreaService, | |||||
private commentService: CommentService, | private commentService: CommentService, | ||||
private flagService: FlagService, | private flagService: FlagService, | ||||
private navBarService: NavBarService, | private navBarService: NavBarService, | ||||
private postService: PostService, | private postService: PostService, | ||||
private profileService: ProfileService, | private profileService: ProfileService, | ||||
private routeService: RouteService | private routeService: RouteService | ||||
) { } | ) { } | ||||
ngOnInit() { | ngOnInit() { | ||||
this.loading = true; | this.loading = true; | ||||
this.blockedUsers = []; | this.blockedUsers = []; | ||||
if (window.localStorage.getItem('blockedUsers')) { | if (window.localStorage.getItem('blockedUsers')) { | ||||
this.blockedUsers = window.localStorage.getItem('blockedUsers').split(','); | this.blockedUsers = window.localStorage.getItem('blockedUsers').split(','); | ||||
this.blockedUsers.pop(); | this.blockedUsers.pop(); | ||||
} | } | ||||
this.commentForm = new FormGroup({ | |||||
'comment': new FormControl(''), | |||||
'image': new FormControl('') | |||||
}); | |||||
this.routeService.resetRoutes(); | this.routeService.resetRoutes(); | ||||
this.navBarService.comment | this.navBarService.comment | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe((comment: CommentData) => { | .subscribe((comment: CommentData) => { | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
if (!this.wait) { | if (!this.wait) { | ||||
if (comment.comment !== '' && this.runImageCheck(comment.comment)) { | if (comment.comment !== '' && this.runImageCheck(comment.comment)) { | ||||
if (comment.image) { | if (comment.image) { | ||||
this.postService.setPicture(comment.image, this.post, this.currentArea, false, comment.comment) | this.postService.setPicture(comment.image, this.post, this.currentArea.name, false, comment.comment) | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(result2 => { | .subscribe(result2 => { | ||||
if (!result2.getError()) { | if (!result2.getError()) { | ||||
this.post.comments.push(result2); | this.post.comments.push(result2); | ||||
this.navBarService.clearInputs.next(true); | this.navBarService.clearInputs.next(true); | ||||
} else { | } else { | ||||
this.snackBar.open('Your image file must be below 512KiB in size', 'Close', { | this.snackBar.open('Your image file must be below 512KiB in size', 'Close', { | ||||
duration: 3000 | duration: 3000 | ||||
}); | }); | ||||
} | } | ||||
}); | }); | ||||
} else { | } else { | ||||
this.postService.comment(this.currentArea, this.post, comment.comment) | this.postService.comment(this.currentArea.name, this.post, comment.comment) | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(); | .subscribe(); | ||||
this.navBarService.clearInputs.next(true); | this.navBarService.clearInputs.next(true); | ||||
} | } | ||||
this.commentCount += 1; | this.commentCount += 1; | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} else { | } else { | ||||
this.snackBar.open( | this.snackBar.open( | ||||
'Please enter something' | 'Please enter something' | ||||
, 'Close', { | , 'Close', { | ||||
duration: 3000 | duration: 3000 | ||||
}); | }); | ||||
this.navBarService.clearInputs.next(false); | this.navBarService.clearInputs.next(false); | ||||
} | } | ||||
} | } | ||||
this.wait = false; | this.wait = false; | ||||
}); | }); | ||||
this.areaService.getAreas() | |||||
.takeUntil(this.componentDestroyed) | |||||
.subscribe(areas => { | |||||
this.areas = []; | |||||
for (let i = 0; i < areas.length; i++) { | |||||
this.areaService.getAreaRep(areas[i].name) | |||||
.takeUntil(this.componentDestroyed) | |||||
.subscribe(result => { | |||||
let area; | |||||
area = new Area( | |||||
areas[i].name, | |||||
areas[i].displayname, | |||||
result.reputation, | |||||
result.spread | |||||
); | |||||
this.areas.push(area); | |||||
this.cdRef.detectChanges(); | |||||
}); | |||||
} | |||||
}); | |||||
this.profileService.getSelf() | this.profileService.getSelf() | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe( (author: Author) => { | .subscribe( (author: Author) => { | ||||
this.userID = author.user; | this.self = author; | ||||
this.loggedIn = true; | this.loggedIn = true; | ||||
}); | }); | ||||
this.refresh(true); | this.refresh(true); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} | } | ||||
ngOnDestroy() { | ngOnDestroy() { | ||||
this.cdRef.detach(); | this.cdRef.detach(); | ||||
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines | gotoUser(user: string) { | ||||
this.routeService.addNextRoute(this.router.url); | this.routeService.addNextRoute(this.router.url); | ||||
this.router.navigateByUrl('/user/' + user); | this.router.navigateByUrl('/user/' + user); | ||||
} | } | ||||
isBlockedUser(c: number) { | isBlockedUser(c: number) { | ||||
return this.blockedUsers.includes(String(c)); | return this.blockedUsers.includes(String(c)); | ||||
} | } | ||||
hideViews() { | |||||
document.getElementById('post').style.display = 'none'; | |||||
document.getElementById('home').style.display = 'none'; | |||||
document.getElementById('comment').style.display = 'none'; | |||||
document.getElementById('comment-box').style.display = 'none'; | |||||
document.getElementById('comment-tab').style.display = 'none'; | |||||
document.getElementById('areaList').style.display = 'none'; | |||||
document.getElementById('navBar').style.display = 'none'; | |||||
this.errors = null; | |||||
this.loading = false; | |||||
} | |||||
openCommentDeleteDialog(c: Comment) { | openCommentDeleteDialog(c: Comment) { | ||||
const dialogRef = this.dialog.open(ConfirmDeletionDialogComponent); | const dialogRef = this.dialog.open(ConfirmDeletionDialogComponent); | ||||
dialogRef.afterClosed() | dialogRef.afterClosed() | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(result => { | .subscribe(result => { | ||||
if (result.bool) { | if (result.bool) { | ||||
this.commentService.deleteComment( | this.commentService.deleteComment( | ||||
this.currentArea, | this.currentArea.name, | ||||
this.post, | this.post, | ||||
c | c | ||||
); | ); | ||||
this.commentCount -= 1; | this.commentCount -= 1; | ||||
this.snackBar.open('Comment deleted successfully', 'Close', { | this.snackBar.open('Comment deleted successfully', 'Close', { | ||||
duration: 3000 | duration: 3000 | ||||
}); | }); | ||||
} | } | ||||
Show All 9 Lines | openFlagDialog(comment: Comment, typeOfFlagReport: TypeOfReport) { | ||||
dialogRef.afterClosed() | dialogRef.afterClosed() | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(result => { | .subscribe(result => { | ||||
this.flagService.sendFlagReport(result.typeOfReport, result.report, result.choice, result.area); | this.flagService.sendFlagReport(result.typeOfReport, result.report, result.choice, result.area); | ||||
}); | }); | ||||
} | } | ||||
postComment() { | |||||
this.loading = true; | |||||
this.navBarService.comment.next(new CommentData(this.commentForm.controls.comment.value, this.commentForm.controls.image.value)); | |||||
this.loading = false; | |||||
} | |||||
refresh(reload: boolean) { | refresh(reload: boolean) { | ||||
this.wait = true; | this.wait = true; | ||||
this.loading = true; | this.loading = true; | ||||
this.navBarService.currentArea | this.navBarService.currentArea | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe((currentArea: Area) => { | .subscribe((currentArea: Area) => { | ||||
if (currentArea.name !== '') { | if (currentArea.name !== '') { | ||||
this.currentArea = currentArea.name; | this.currentArea = currentArea; | ||||
if ((reload === true || this.areaCheck !== currentArea.name) && currentArea.name !== '') { | if ((reload === true || this.areaCheck !== currentArea.name) && currentArea.name !== '') { | ||||
this.postService.getNextPost(currentArea.name) | this.postService.getNextPost(currentArea.name) | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(nextPost => { | .subscribe(nextPost => { | ||||
if (nextPost) { | if (nextPost) { | ||||
this.post = nextPost; | this.post = nextPost; | ||||
this.commentCount = this.post.comments.length; | this.commentCount = this.post.comments.length; | ||||
this.loading = false; | this.loading = false; | ||||
this.areaCheck = this.currentArea; | this.areaCheck = this.currentArea.name; | ||||
this.navBarService.hasPost.next(true); | this.navBarService.hasPost.next(true); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} else { | } else { | ||||
this.fakePost = new Post(0, this.systemAuthor, false, false, | this.fakePost = new Post(0, this.systemAuthor, false, false, | ||||
Date(), false, 'No more posts in this area, try creating one?', null, null, []); | Date(), false, 'No more posts in this area, try creating one?', null, null, []); | ||||
this.post = this.fakePost; | this.post = this.fakePost; | ||||
this.commentCount = 0; | this.commentCount = 0; | ||||
this.loading = false; | this.loading = false; | ||||
this.areaCheck = this.currentArea; | this.areaCheck = this.currentArea.name; | ||||
this.navBarService.hasPost.next(false); | this.navBarService.hasPost.next(false); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} | } | ||||
}); | }); | ||||
} else if (currentArea.name === '') { | } else if (currentArea.name === '') { | ||||
} else { | } else { | ||||
this.postService.getPost(this.currentArea, this.post.id, false) | this.postService.getPost(this.currentArea.name, this.post.id, false) | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(post => { | .subscribe(post => { | ||||
this.post = post; | this.post = post; | ||||
this.commentCount = this.post.comments.length; | this.commentCount = this.post.comments.length; | ||||
this.loading = false; | this.loading = false; | ||||
this.areaCheck = this.currentArea; | this.areaCheck = this.currentArea.name; | ||||
this.navBarService.hasPost.next(true); | this.navBarService.hasPost.next(true); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
}); | }); | ||||
} | } | ||||
} | } | ||||
}); | }); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | dialogRef.afterClosed() | ||||
}); | }); | ||||
} | } | ||||
spread(spread: boolean) { | spread(spread: boolean) { | ||||
this.loading = true; | this.loading = true; | ||||
this.navBarService.clearInputs.next(true); | this.navBarService.clearInputs.next(true); | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
this.postService.spread( | this.postService.spread( | ||||
this.currentArea, | this.currentArea.name, | ||||
this.post, | this.post, | ||||
spread | spread | ||||
); | ); | ||||
this.postService.getNextPost(this.currentArea) | this.postService.getNextPost(this.currentArea.name) | ||||
.subscribe(nextPost => { | .subscribe(nextPost => { | ||||
if (nextPost) { | if (nextPost) { | ||||
this.post = nextPost; | this.post = nextPost; | ||||
this.loading = false; | this.loading = false; | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} else { | } else { | ||||
this.fakePost = new Post(0, this.systemAuthor, false, false, | this.fakePost = new Post(0, this.systemAuthor, false, false, | ||||
Date(), false, 'No more posts in this area, try creating one?', null, null, []); | Date(), false, 'No more posts in this area, try creating one?', null, null, []); | ||||
this.post = this.fakePost; | this.post = this.fakePost; | ||||
this.loading = false; | this.loading = false; | ||||
this.cdRef.detectChanges(); | this.cdRef.detectChanges(); | ||||
} | } | ||||
}); | }); | ||||
} | } | ||||
subscribe(s: boolean) { | subscribe(s: boolean) { | ||||
this.postService.subscribe(this.currentArea, this.post, s) | this.postService.subscribe(this.currentArea.name, this.post, s) | ||||
.takeUntil(this.componentDestroyed) | .takeUntil(this.componentDestroyed) | ||||
.subscribe(); | .subscribe(); | ||||
} | } | ||||
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'); | |||||
} | |||||
} | |||||
switchView(s: string, a?: Area) { | |||||
if (s === 'home') { | |||||
this.hideViews(); | |||||
this.currentArea = a; | |||||
this.navBarService.currentArea.next(a); | |||||
document.getElementById('home').style.display = 'flex'; | |||||
document.getElementById('post').style.display = 'block'; | |||||
} else if (s === 'comment') { | |||||
this.hideViews(); | |||||
document.getElementById('comment').style.display = 'flex'; | |||||
document.getElementById('comment-box').style.display = 'flex'; | |||||
document.getElementById('comment-tab').style.display = 'flex'; | |||||
} else if (s === 'areaList') { | |||||
this.hideViews(); | |||||
document.getElementById('areaList').style.display = 'flex'; | |||||
document.getElementById('navBar').style.display = 'flex'; | |||||
} | |||||
} | |||||
} | } |