diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss index 52e87c8f4d46dd26bbe4eadcc2af352633c54a62..49f857654aa1538adaa7a7eb21b3c8892f10c5a3 100644 --- a/src/app/components/shared/comment-list/comment-list.component.scss +++ b/src/app/components/shared/comment-list/comment-list.component.scss @@ -13,28 +13,6 @@ mat-toolbar { background-color: #bbdefb; } -.card-container { - background-color: #4dd0e1; - opacity: 0.7; - border-radius: 2px; -} - .outer-card { border-radius: 8px; } - -mat-icon { - color: white; -} - -.incorrect-icon { - color: white; -} - -.correct-icon { - color: green; -} - -mat-card-title { - margin: 0px; -} diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts index d90260ac2c8fc4c243da687cecc8f11de237ad6f..4c4dd71762068a2af36b8a195f6c81bc5e0a072f 100644 --- a/src/app/components/shared/comment-list/comment-list.component.ts +++ b/src/app/components/shared/comment-list/comment-list.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; import { Comment } from '../../../models/comment'; @@ -17,7 +17,6 @@ import { LanguageService } from '../../../services/util/language.service'; styleUrls: ['./comment-list.component.scss'] }) export class CommentListComponent implements OnInit { - userRoleTemp: any = UserRole.CREATOR; userRole: UserRole; user: User; comments: Comment[]; diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html index 834776dfaa0ec0d4c5d13c17524ac853a8d67ec3..5cd0576111330e1fe099f338af40162bd3be2b0b 100644 --- a/src/app/components/shared/comment/comment.component.html +++ b/src/app/components/shared/comment/comment.component.html @@ -1,5 +1,11 @@ -<mat-card> - <mat-card-title>{{comment.subject}}</mat-card-title> +<mat-card class="card-container"> + <div fxLayout="row" fxLayoutAlign="center center"> + <mat-card-title>{{comment.subject}}</mat-card-title> + <span class="fill-remaining-space"></span> + <button mat-icon-button [disabled]="userRole === 0" (click)="setCorrect(comment)"> + <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon> + </button> + </div> <mat-divider></mat-divider> <mat-card-content> <p>{{comment.body}}</p> diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..52e87c8f4d46dd26bbe4eadcc2af352633c54a62 100644 --- a/src/app/components/shared/comment/comment.component.scss +++ b/src/app/components/shared/comment/comment.component.scss @@ -0,0 +1,40 @@ +mat-card { + margin-bottom: 20px; + background-color: #b2ebf2; +} + +mat-card-content>:first-child { + margin-top: 20px; +} + +mat-toolbar { + border-radius: 10px; + margin-bottom: 20px; + background-color: #bbdefb; +} + +.card-container { + background-color: #4dd0e1; + opacity: 0.7; + border-radius: 2px; +} + +.outer-card { + border-radius: 8px; +} + +mat-icon { + color: white; +} + +.incorrect-icon { + color: white; +} + +.correct-icon { + color: green; +} + +mat-card-title { + margin: 0px; +} diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts index 24a9ea824ff980a303370a4e37043d980f5b0ba8..d371f329b0ff7cf84dd46755a251e708ae9fae47 100644 --- a/src/app/components/shared/comment/comment.component.ts +++ b/src/app/components/shared/comment/comment.component.ts @@ -4,7 +4,6 @@ import { UserRole } from '../../../models/user-roles.enum'; import { User } from '../../../models/user'; import { AuthenticationService } from '../../../services/http/authentication.service'; import { ActivatedRoute } from '@angular/router'; -import { RoomService } from '../../../services/http/room.service'; import { Location } from '@angular/common'; import { CommentService } from '../../../services/http/comment.service'; import { NotificationService } from '../../../services/util/notification.service'; @@ -18,16 +17,12 @@ import { LanguageService } from '../../../services/util/language.service'; }) export class CommentComponent implements OnInit { @Input() comment: Comment; - userRoleTemp: any = UserRole.CREATOR; userRole: UserRole; user: User; isLoading = true; - roomId: string; - roomShortId: string; constructor(protected authenticationService: AuthenticationService, private route: ActivatedRoute, - private roomService: RoomService, private location: Location, private commentService: CommentService, private notification: NotificationService, @@ -38,14 +33,19 @@ export class CommentComponent implements OnInit { ngOnInit() { this.userRole = this.authenticationService.getRole(); this.user = this.authenticationService.getUser(); - this.roomShortId = this.route.snapshot.paramMap.get('roomId'); - this.roomId = localStorage.getItem(`roomId`); this.translateService.use(localStorage.getItem('currentLang')); } + setRead(comment: Comment): void { this.commentService.updateComment(comment).subscribe(); } + setCorrect(comment: Comment): void { + comment.correct = !comment.correct; + this.commentService.updateComment(comment).subscribe(); + console.log('is' + comment.correct); + } + delete(comment: Comment): void { this.commentService.deleteComment(comment.id).subscribe(room => { this.notification.show(`Comment '${comment.subject}' successfully deleted.`);