Commit 3448f2be authored by David Noah Donges's avatar David Noah Donges

Merge branch '135-adjust-participant-room-view' into 'master'

Resolve "Adjust participant-room view"

Closes #135

See merge request swtp-block-ws17/arsnova-angular-frontend!94
parents 774f0851 a615bad3
Pipeline #13692 passed with stage
in 32 seconds
<div fxLayout="row" fxLayoutAlign="center">
<div fxLayout="column" fxLayoutGap="20px">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<div *ngFor="let comment of comments">
<mat-card>
<mat-card-content>
......
......@@ -19,6 +19,7 @@ export class CommentListComponent implements OnInit {
userRole: UserRole;
user: User;
comments: Comment[];
isLoading = true;
constructor(
protected authenticationService: AuthenticationService,
......@@ -26,7 +27,8 @@ export class CommentListComponent implements OnInit {
private roomService: RoomService,
private location: Location,
private commentService: CommentService,
private notification: NotificationService) { }
private notification: NotificationService) {
}
ngOnInit() {
this.userRole = this.authenticationService.getRole();
......@@ -46,15 +48,21 @@ export class CommentListComponent implements OnInit {
getComments(roomId: string): void {
if (this.userRole === UserRole.CREATOR) {
this.commentService.getComments(roomId)
.subscribe(comments => this.comments = comments);
.subscribe(comments => {
this.comments = comments;
this.isLoading = false;
});
} else if (this.userRole === UserRole.PARTICIPANT) {
this.commentService.searchComments(roomId, this.user.id)
.subscribe(comments => this.comments = comments);
.subscribe(comments => {
this.comments = comments;
this.isLoading = false;
});
}
}
setRead(comment: Comment): void {
this.comments.find( c => c.id === comment.id).read = !comment.read;
this.comments.find(c => c.id === comment.id).read = !comment.read;
this.commentService.updateComment(comment).subscribe();
}
......
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room && !modify" class="input-form">
<mat-card-header>
<mat-card-title>
......
......@@ -2,35 +2,42 @@
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room">
<mat-card-header>
<mat-card-header fxLayoutAlign="center">
<mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
<mat-card-subtitle>{{ room.shortId }}</mat-card-subtitle>
<mat-card-subtitle fxLayoutAlign="center">{{ room.shortId }}</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-card-content fxLayoutAlign="center">
<p>
{{ room.description }}
</p>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions>
<button mat-icon-button color="primary" matTooltip="Create comment" routerLink="/participant/room/{{ room.id }}/create-comment">
<mat-icon>question_answer</mat-icon>
</button>
<button mat-icon-button color="primary" matTooltip="Give feedback">
<mat-icon>feedback</mat-icon>
</button>
<button mat-button color="primary" matTooltip="Join question round" routerLink="/participant/room/{{ room.id }}/questions">
Questions
</button>
<button mat-button color="primary" matTooltip="Start personal question round">
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
<button mat-icon-button color="primary" matTooltip="Create comment"
routerLink="/participant/room/{{ room.id }}/create-comment">
<mat-icon>question_answer</mat-icon>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button color="primary" matTooltip="Give feedback">
<mat-icon>thumbs_up_down</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
<mat-nav-list>
<mat-list-item matTooltip="Join question round" routerLink="/participant/room/{{ room.id }}/questions">
Contents
</mat-list-item>
<mat-list-item matTooltip="See room comments">
Comments
</mat-list-item>
<mat-list-item matTooltip="Join question round">
Learn
</button>
</mat-card-actions>
</mat-list-item>
</mat-nav-list>
</mat-card>
<div *ngIf="!isLoading && !room">
Error: room could not be found!
</div>
</div>
<button mat-button color="primary" (click)="goBack()">Back</button>
</div>
......@@ -6,3 +6,8 @@ mat-card {
mat-card-content>:first-child {
margin-top: 16px;
}
mat-icon {
font-size: 500%;
}
<mat-accordion>
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
</div>
<mat-expansion-panel *ngFor="let room of rooms">
<mat-expansion-panel-header>
<button mat-button color="primary" routerLink="/{{ baseUrl }}/room/{{ room.id }}">
<mat-icon>send</mat-icon>
</button>
<mat-panel-title>
{{ room.shortId }}
</mat-panel-title>
......@@ -11,8 +17,5 @@
<p>
{{ room.description }}
</p>
<mat-action-row>
<button mat-button routerLink="/{{ baseUrl }}/room/{{ room.id }}">Join room</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
......@@ -13,6 +13,7 @@ export class RoomListComponent implements OnInit {
rooms: Room[];
closedRooms: Room[];
baseUrl: string;
isLoading = true;
constructor(
private roomService: RoomService,
......@@ -35,6 +36,7 @@ export class RoomListComponent implements OnInit {
this.roomService.getRooms().subscribe(rooms => {
this.rooms = rooms;
this.closedRooms = this.rooms.filter(room => room.closed);
this.isLoading = false;
});
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment