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 058925e146d34a131d3e10c98d76b5409a4c7422..e6dc728eec0e1c8387b7a4b79504c4a11afa227b 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 5945fe3f55e871158a8f1f210c2c534949c681a3..d48250df0010d3f13cd64deb5d646d6a994cdedf 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 53651c3b8e24cc80707750d6cc2da2455efc6ac9..55392ff27edf59d58e59ade3e592f98729b15e78 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 c2e6ac40eb4e4fccdffe554f04394f39127d84f2..7ce0116d5efcc2eb8fada4e7c88e0a3204ca4d44 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 e070286e496cd177d51ca4223ce25bfb17d95556..5abca04318f8e8d74cbd6ce9e95b579934ac1e49 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 e7e11dfb1841912801f32e4ce46c612a98be37fa..41c0b339653cb87571ca8fe3cecebe5a3308e4a9 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 6ca94819f174e020ac88b6f051b0427f4d65b492..704deaf2504c9fe6457929ae0108381d05369836 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 5959d3cebd7201c9f28e54a5ffa956e3b0ec277b..b792cd9c17b805a7272c5ae5520d2cbf44494297 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 92a0a692e5c27483574cb917dbf023a3b584ff52..306fe5587e2648e792e35bda0996f8779d7bb71e 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 2329ff52678e6dfedc0c8eda99bea56772595ced..0a7c7ac6b5b43b69c967eeec58c638995b7b7392 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 44f9d6b44659f93e633ed89748bd90770abf62ce..5a8df0ad56470a12b90a4850b0a70d310f6b706b 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 725fc8800b5bee1039f167bd72cd7a67c7d2e52f..9c8f4a178733afa36456f248cf2eaa1905edc249 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 f15b78a3b1e11bb9fc536d2ef1cb82f20e1fa99e..42fba1bdf70d1d3a91548e7d06628a276d7dd02d 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 00adbe55fb791540cd3ecc77c8db0ea22aff6f48..bbf3359fd19cb77dcf7ddbd3dc274f1e6316ea0c 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 3480e3ece17c69ebae2b386b12930cd9ae84d050..a9554b6dfb7b591c3d99f711b2ccddc4eee4f189 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 cc6dbe0a5acd5927d3cd19c0f98505c9d0311d85..0ab9341c8a5e5a21c939a9b08d6b0ecd87c695e0 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 36f04a865381cfdfc82fa1ad12f31e8e4a29b86f..5e8f796a3a351f9b10a0210b30f9c1229276300f 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;
+}