From 0332c8b33419264741dafadfc2d6c53de66b5245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sat, 1 Jun 2019 21:40:02 +0200
Subject: [PATCH] Add loading indicator to several components
---
.../content-list/content-list.component.html | 12 +++++-----
.../content-list/content-list.component.scss | 4 ++++
.../content-list/content-list.component.ts | 3 +--
.../content-presentation.component.html | 6 +++++
.../content-presentation.component.ts | 2 ++
.../room-creator-page.component.html | 2 +-
...ipant-content-carousel-page.component.html | 6 +++++
...icipant-content-carousel-page.component.ts | 2 ++
.../comment-list/comment-list.component.html | 2 +-
.../comment-list/comment-list.component.ts | 14 +++--------
.../comment-page/comment-page.component.html | 8 ++++++-
.../comment-page/comment-page.component.ts | 16 ++++++++++++-
.../list-statistic.component.html | 24 ++++++++++++-------
.../list-statistic.component.scss | 4 ++++
.../list-statistic.component.ts | 2 ++
.../shared/room-list/room-list.component.html | 6 +++++
.../shared/room-list/room-list.component.scss | 4 ++++
17 files changed, 86 insertions(+), 31 deletions(-)
diff --git a/src/app/components/creator/content-list/content-list.component.html b/src/app/components/creator/content-list/content-list.component.html
index 058925e14..e6dc728ee 100644
--- a/src/app/components/creator/content-list/content-list.component.html
+++ b/src/app/components/creator/content-list/content-list.component.html
@@ -6,11 +6,6 @@
</mat-card-title>
</mat-card-header>
<mat-divider></mat-divider>
- <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
- </div>
- </div>
<mat-grid-list cols="3" rowHeight="1:1">
<mat-grid-tile>
<button class="actionButton" mat-icon-button
@@ -36,10 +31,15 @@
</mat-grid-list>
<mat-divider></mat-divider>
<mat-card-content>
+ <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center">
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
+ </div>
+ </div>
<mat-expansion-panel *ngFor="let content of contents; index as i" class="matPanel">
<mat-expansion-panel-header class="matPanelListHeader">
<mat-panel-title class="panelTitle">
- {{ labels[i] }}
+ {{ labels[i] }}
</mat-panel-title>
<button mat-icon-button color="accent" (click)="editContent(content);$event.stopPropagation();"
class="editButton">
diff --git a/src/app/components/creator/content-list/content-list.component.scss b/src/app/components/creator/content-list/content-list.component.scss
index 5945fe3f5..d48250df0 100644
--- a/src/app/components/creator/content-list/content-list.component.scss
+++ b/src/app/components/creator/content-list/content-list.component.scss
@@ -76,3 +76,7 @@ mat-tooltip-component {
width: 50px;
line-height: 100%!important;
}
+
+mat-progress-spinner {
+ margin-top: 10px;
+}
diff --git a/src/app/components/creator/content-list/content-list.component.ts b/src/app/components/creator/content-list/content-list.component.ts
index 53651c3b8..55392ff27 100644
--- a/src/app/components/creator/content-list/content-list.component.ts
+++ b/src/app/components/creator/content-list/content-list.component.ts
@@ -65,14 +65,13 @@ export class ContentListComponent implements OnInit {
this.labels[i] = this.contents[i].subject;
}
}
-
+ this.isLoading = false;
});
this.route.params.subscribe(params => {
sessionStorage.setItem('collection', params['contentGroup']);
this.collectionName = params['contentGroup'];
});
this.translateService.use(localStorage.getItem('currentLang'));
- this.isLoading = false;
}
findIndexOfSubject(subject: string): number {
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.html b/src/app/components/creator/content-presentation/content-presentation.component.html
index c2e6ac40e..7ce0116d5 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.html
+++ b/src/app/components/creator/content-presentation/content-presentation.component.html
@@ -1,3 +1,9 @@
+<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
+ </div>
+</div>
+
<div fxLayout="column" fxLayoutAlign="start center">
<mat-tab-group>
<mat-tab fxLayoutAlign="center" *ngFor="let content of contents" label="{{content.subject}}">
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.ts b/src/app/components/creator/content-presentation/content-presentation.component.ts
index e070286e4..5abca0431 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.ts
+++ b/src/app/components/creator/content-presentation/content-presentation.component.ts
@@ -13,6 +13,7 @@ export class ContentPresentationComponent implements OnInit {
contents: ContentChoice[];
contentGroup: ContentGroup;
labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+ isLoading = true;
constructor(private contentService: ContentService) {
}
@@ -21,6 +22,7 @@ export class ContentPresentationComponent implements OnInit {
this.contentGroup = JSON.parse(sessionStorage.getItem('contentGroup'));
this.contentService.getContentChoiceByIds(this.contentGroup.contentIds).subscribe( contents => {
this.contents = contents;
+ this.isLoading = false;
});
}
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index e7e11dfb1..41c0b3396 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -1,6 +1,6 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner *ngIf="isLoading" color="accent" mode="indeterminate"></mat-progress-spinner>
+ <mat-progress-spinner *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
diff --git a/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.html b/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.html
index 6ca94819f..704deaf25 100644
--- a/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.html
+++ b/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.html
@@ -1,3 +1,9 @@
+<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
+ </div>
+</div>
+
<div fxLayout="column" fxLayoutAlign="start center">
<mat-tab-group>
<mat-tab *ngFor="let content of contents" label="{{content.subject}}">
diff --git a/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.ts b/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.ts
index 5959d3ceb..b792cd9c1 100644
--- a/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.ts
+++ b/src/app/components/participant/participant-content-carousel-page/participant-content-carousel-page.component.ts
@@ -14,6 +14,7 @@ export class ParticipantContentCarouselPageComponent implements OnInit {
contents: Content[];
contentGroup: ContentGroup;
+ isLoading = true;
constructor(private contentService: ContentService) {
}
@@ -22,6 +23,7 @@ export class ParticipantContentCarouselPageComponent implements OnInit {
this.contentGroup = JSON.parse(sessionStorage.getItem('contentGroup'));
this.contentService.getContentsByIds(this.contentGroup.contentIds).subscribe( contents => {
this.contents = contents;
+ this.isLoading = false;
});
}
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 92a0a692e..306fe5587 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" id="search-container">
+<div fxLayout="row" id="search-container" *ngIf="!isLoading">
<mat-label fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
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 2329ff526..0a7c7ac6b 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -23,13 +23,13 @@ import { DeleteCommentComponent } from '../_dialogs/delete-comment/delete-commen
export class CommentListComponent implements OnInit {
@Input() user: User;
@Input() roomId: string;
+ @Input() comments: Comment[];
room: Room;
- comments: Comment[];
- isLoading = true;
hideCommentsList = false;
filteredComments: Comment[];
userRole: UserRole;
deviceType: string;
+ isLoading = true;
constructor(private commentService: CommentService,
private translateService: TranslateService,
@@ -50,20 +50,11 @@ export class CommentListComponent implements OnInit {
this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
this.parseIncomingMessage(message);
});
- this.getComments();
this.translateService.use(localStorage.getItem('currentLang'));
this.userRole = this.authenticationService.getRole();
this.deviceType = localStorage.getItem('deviceType');
}
- getComments(): void {
- this.commentService.getComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- this.isLoading = false;
- });
- }
-
searchComments(term: string): void {
if (term && term.length > 2) {
this.hideCommentsList = true;
@@ -74,6 +65,7 @@ export class CommentListComponent implements OnInit {
}
showComments(): Comment[] {
+ this.isLoading = false;
let commentThreshold = -10;
if (this.room.extensions && this.room.extensions['comments']) {
commentThreshold = this.room.extensions['comments'].commentThreshold;
diff --git a/src/app/components/shared/comment-page/comment-page.component.html b/src/app/components/shared/comment-page/comment-page.component.html
index 44f9d6b44..5a8df0ad5 100644
--- a/src/app/components/shared/comment-page/comment-page.component.html
+++ b/src/app/components/shared/comment-page/comment-page.component.html
@@ -1,6 +1,12 @@
+<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
+ </div>
+</div>
+
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutAlign="center">
- <app-comment-list [user]="user" [roomId]="roomId"></app-comment-list>
+ <app-comment-list [user]="user" [roomId]="roomId" [comments]="comments"></app-comment-list>
</div>
</div>
diff --git a/src/app/components/shared/comment-page/comment-page.component.ts b/src/app/components/shared/comment-page/comment-page.component.ts
index 725fc8800..9c8f4a178 100644
--- a/src/app/components/shared/comment-page/comment-page.component.ts
+++ b/src/app/components/shared/comment-page/comment-page.component.ts
@@ -3,6 +3,8 @@ import { ActivatedRoute } from '@angular/router';
import { User } from '../../../models/user';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
+import { CommentService } from '../../../services/http/comment.service';
+import { Comment } from '../../../models/comment';
@Component({
selector: 'app-comment-page',
@@ -12,13 +14,25 @@ import { AuthenticationService } from '../../../services/http/authentication.ser
export class CommentPageComponent implements OnInit {
roomId: string;
user: User;
+ isLoading = true;
+ comments: Comment[];
constructor(private route: ActivatedRoute,
private notification: NotificationService,
- private authenticationService: AuthenticationService) { }
+ private authenticationService: AuthenticationService,
+ private commentService: CommentService) { }
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
+ this.getComments();
+ }
+
+ getComments(): void {
+ this.commentService.getComments(this.roomId)
+ .subscribe(comments => {
+ this.comments = comments;
+ this.isLoading = false;
+ });
}
}
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.html b/src/app/components/shared/list-statistic/list-statistic.component.html
index f15b78a3b..42fba1bdf 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.html
+++ b/src/app/components/shared/list-statistic/list-statistic.component.html
@@ -6,44 +6,52 @@
<mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
*ngIf="total < status.okay && total != status.empty" color="warn"></mat-progress-bar>
<mat-toolbar></mat-toolbar>
+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="content">
<mat-header-cell *matHeaderCellDef> {{'statistic.content' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
+ 'empty' : cp.percent < status.zero,
'positive' : cp.percent >= status.good,
'okay' : cp.percent >= status.okay && cp.percent < status.good,
- 'negative' : cp.percent < status.okay,
- 'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
+ 'negative' : cp.percent < status.okay}" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
</ng-container>
<ng-container matColumnDef="percentage">
<mat-header-cell *matHeaderCellDef> {{'statistic.percentage' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
+ 'empty invisible' : cp.percent < status.zero ,
'positive' : cp.percent >= status.good,
'okay' : cp.percent >= status.okay && cp.percent < status.good,
- 'negative' : cp.percent < status.okay,
- 'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
+ 'negative' : cp.percent < status.okay}"
+ (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="abstentions">
<mat-header-cell *matHeaderCellDef> {{'statistic.abstentions' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
+ 'empty invisible' : cp.percent < status.zero,
'positive' : cp.percent >= status.good,
'okay' : cp.percent >= status.okay && cp.percent < status.good,
- 'negative' : cp.percent < status.okay,
- 'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
+ 'negative' : cp.percent < status.okay}" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
</ng-container>
<ng-container matColumnDef="counts">
<mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
+ 'empty invisible' : cp.percent < status.zero,
'positive' : cp.percent >= status.good,
'okay' : cp.percent >= status.okay && cp.percent < status.good,
- 'negative' : cp.percent < status.okay,
- 'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
+ 'negative' : cp.percent < status.okay}" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
+
+<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
+ </div>
+</div>
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index 00adbe55f..bbf3359fd 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -62,3 +62,7 @@ mat-toolbar {
#okayP {
color: var(--yellow);
}
+
+mat-progress-spinner {
+ margin-top: 30px;
+}
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.ts b/src/app/components/shared/list-statistic/list-statistic.component.ts
index 3480e3ece..a9554b6df 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.ts
+++ b/src/app/components/shared/list-statistic/list-statistic.component.ts
@@ -51,6 +51,7 @@ export class ListStatisticComponent implements OnInit {
roomId: number;
baseUrl: string;
deviceType = localStorage.getItem('deviceType');
+ isLoading = true;
constructor(private contentService: ContentService,
private translateService: TranslateService,
@@ -120,6 +121,7 @@ export class ListStatisticComponent implements OnInit {
this.dataSource[i].percent = -1;
}
}
+ this.isLoading = false;
}
getSingleCounts(answers: number[]): number {
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index cc6dbe0a5..0ab9341c8 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -1,3 +1,9 @@
+<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner color="primary" mode="indeterminate" diameter="80"></mat-progress-spinner>
+ </div>
+</div>
+
<div *ngIf="rooms && rooms.length != 0">
<mat-expansion-panel [disabled]="true" id="matPanelHeader">
<mat-expansion-panel-header>
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index 36f04a865..5e8f796a3 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -50,3 +50,7 @@ mat-card-title {
background-color: var(--grey);
color: var(--primary);
}
+
+mat-progress-spinner {
+ margin-top: 30px;
+}
--
GitLab