diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
index 236216731a7d7ac9545b3039f07b15926ea9693f..1d90657e7a255d33db528e0e88576ae02754e6ba 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
+++ b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
@@ -50,8 +50,8 @@
<mat-icon class="addIcon">add_box</mat-icon>
</button>
</div>
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px">
- <button mat-raised-button class="create" type="submit">{{ 'content.create' | translate }}</button>
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
<button mat-raised-button class="reset" (click)="reset($event)">{{ 'content.reset' | translate }}</button>
+ <button mat-raised-button class="create" type="submit">{{ 'content.create' | translate }}</button>
</div>
</form>
diff --git a/src/app/components/creator/content-likert-creator/content-likert-creator.component.html b/src/app/components/creator/content-likert-creator/content-likert-creator.component.html
index feecd6014a4e081262bc1b1d7620f747210417cb..7caf6c9ddec6441384c4ae666502ce63e331f9ba 100644
--- a/src/app/components/creator/content-likert-creator/content-likert-creator.component.html
+++ b/src/app/components/creator/content-likert-creator/content-likert-creator.component.html
@@ -10,7 +10,7 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
- <div>
+ <div fxLayout="row" fxLayoutAlign="center">
<button mat-raised-button type="submit"class="submit">{{ 'content.create' | translate }}</button>
</div>
</form>
diff --git a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
index 4b6e92c0b8df802c07e7c0f5988113e281894fd1..051ec35e599f1025c913dbac28d5e56a8aabd1e9 100644
--- a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
+++ b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
@@ -11,6 +11,11 @@ mat-cell {
}
.submit {
+ margin-top: 80px;
background-color: var(--primary);
color: var(--on-primary);
}
+
+.mat-raised-button {
+ min-width: 120px;
+}
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/content-text-creator/content-text-creator.component.html b/src/app/components/creator/content-text-creator/content-text-creator.component.html
index d9a776aea364e5547a90dccf135fbab779022769..2eae0303e27a9e8c160f6c3bedb40360a0123b80 100644
--- a/src/app/components/creator/content-text-creator/content-text-creator.component.html
+++ b/src/app/components/creator/content-text-creator/content-text-creator.component.html
@@ -1,5 +1,5 @@
<form (ngSubmit)="submitContent()">
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+ <div fxLayout="row" fxLayoutAlign="center">
<button mat-raised-button type="submit" class="submit">{{'content.create' | translate}}</button>
</div>
</form>
diff --git a/src/app/components/creator/content-text-creator/content-text-creator.component.scss b/src/app/components/creator/content-text-creator/content-text-creator.component.scss
index 3eb278fae9f3ee459aff8278e0a0df2bb128711d..bb06a964f1b1ee6e391892ea8af40c1ff7880c9d 100644
--- a/src/app/components/creator/content-text-creator/content-text-creator.component.scss
+++ b/src/app/components/creator/content-text-creator/content-text-creator.component.scss
@@ -3,6 +3,11 @@ form > button {
}
.submit {
+ margin-top: 180px;
background-color: var(--primary);
color: var(--on-primary);
}
+
+.mat-raised-button {
+ min-width: 120px;
+}
diff --git a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.html b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.html
index dd2647f880e0105e06eaa1463d44677e487973c0..cd1a5358556f8d94bd509f1b1418abe1bfeb81fa 100644
--- a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.html
+++ b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.html
@@ -7,7 +7,7 @@
{{ 'content.no' | translate }}
</mat-radio-button>
</mat-radio-group>
- <div>
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px">
<button mat-raised-button type="submit" class="submit">{{ 'content.create' | translate }}</button>
</div>
</form>
diff --git a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
index 3eb278fae9f3ee459aff8278e0a0df2bb128711d..0047e966a4654204184c48c75cd3611bdf3fc440 100644
--- a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
+++ b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
@@ -5,4 +5,9 @@ form > button {
.submit {
background-color: var(--primary);
color: var(--on-primary);
+ margin-top: 160px;
+}
+
+.mat-raised-button {
+ min-width: 120px;
}
diff --git a/src/app/components/creator/home-creator-page/home-creator-page.component.html b/src/app/components/creator/home-creator-page/home-creator-page.component.html
index b6d80569da72ba0f390b1cd7f604548eaf1940f8..fb8fa396a107d4f768b4d7be01abd84592cb649a 100644
--- a/src/app/components/creator/home-creator-page/home-creator-page.component.html
+++ b/src/app/components/creator/home-creator-page/home-creator-page.component.html
@@ -1,6 +1,8 @@
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <button mat-raised-button (click)="openCreateRoomDialog()">{{ 'home-page.create-session' | translate }}</button>
+ <button mat-raised-button (click)="openCreateRoomDialog()">
+ <mat-icon>add</mat-icon>
+ {{ 'home-page.create-session' | translate }}</button>
</div>
<div fxLayout="row" fxLayoutAlign="center">
<app-room-list></app-room-list>
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 e7bc4b5095040b4609ce613a9802218a565d5494..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>
@@ -31,13 +31,6 @@
</mat-expansion-panel>
</mat-card-content>
<mat-grid-list cols="2" rowHeight="2:1">
- <mat-grid-tile colspan="1" rowspan="1">
- <button mat-icon-button
- routerLink="/creator/room/{{ room.shortId }}/create-content">
- <mat-icon>note_add</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3>
- </button>
- </mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button
routerLink="/creator/room/{{ room.shortId }}/comments">
@@ -45,19 +38,26 @@
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
</button>
</mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
+ <mat-icon class="smallerIcon">thumbs_up_down
+ </mat-icon>
+ <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
+ </button>
+ </mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
- <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/statistics">
- <mat-icon>insert_chart</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.answer-statistics' | translate}}</h3>
+ <button mat-icon-button
+ routerLink="/creator/room/{{ room.shortId }}/create-content">
+ <mat-icon>note_add</mat-icon>
+ <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3>
</button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
- <mat-icon class="smallerIcon">thumbs_up_down
- </mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
+ <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/statistics">
+ <mat-icon>insert_chart</mat-icon>
+ <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.answer-statistics' | translate}}</h3>
</button>
</mat-grid-tile>
</mat-grid-list>
diff --git a/src/app/components/participant/content-choice-participant/content-choice-participant.component.html b/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
index bbe19ad9690da554b8be85350df08895dfdd4e64..7d252fd369888e113d9827df327bf76b1f0f9897 100644
--- a/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
+++ b/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
@@ -19,7 +19,7 @@
</mat-radio-group>
<mat-divider></mat-divider>
<div fxLayoutAlign="center" fxLayoutGap="20px" fxAlign="row">
- <button mat-raised-button [disabled]="alreadySent" type="submit" color="accent">{{ 'answer.submit' | translate }}</button>
- <button mat-raised-button [disabled]="alreadySent" (click)="abstain($event)" color="primary">{{ 'answer.abstain' | translate }}</button>
+ <button mat-raised-button class="abstain" [disabled]="alreadySent" (click)="abstain($event)">{{ 'answer.abstain' | translate }}</button>
+ <button mat-raised-button class="submit" [disabled]="alreadySent" type="submit">{{ 'answer.submit' | translate }}</button>
</div>
</form>
diff --git a/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss b/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
index 81c1f2bc4cd81f9ee99c59f6ddf3ed2ea76d8165..f091afe27c1c243c63343c6d768ed00d0a1a64e9 100644
--- a/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
+++ b/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
@@ -10,3 +10,13 @@ form > h1 {
margin:20px 0;
font-size: larger;
}
+
+.submit {
+ background-color: var(--primary);
+ color: var(--on-primary);
+}
+
+.abstain {
+ background-color: var(--secondary);
+ color: var(--on-secondary);
+}
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 137d1da26b1ce13fb400438f11dd0b51406c48e9..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,8 +1,8 @@
-<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>
- <input #searchBox placeholder="{{ 'comment-list-page.search' | translate }}"
+ <input #searchBox placeholder="{{ 'comment-list.search' | translate }}"
(input)="searchComments(searchBox.value)">
<button mat-icon-button class="searchBarButton close" *ngIf="searchBox.value"
(click)="hideCommentsList=false; searchBox.value=''">
@@ -13,16 +13,17 @@
<div class="button-bar" fxLayoutAlign="center center">
<button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
- [matTooltip]="'Export comments'" (click)="openExportDialog()">
+ matTooltip="{{ 'comment-list.export-comments' | translate }}" (click)="openExportDialog()">
<mat-icon class="searchBarIcon">cloud_download</mat-icon>
</button>
- <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value" (click)="openCreateDialog()">
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value" (click)="openCreateDialog()"
+ matTooltip="{{ 'comment-list.add-comment' | translate }}">
<mat-icon class="searchBarIcon">add_circle</mat-icon>
</button>
<button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
- [matMenuTriggerFor]="filterMenu">
+ [matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
<mat-icon class="searchBarIcon">sort</mat-icon>
</button>
</div>
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 07252e03cfef15ac7929811d73fc5c3d5eb3d9a3..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,12 +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,
@@ -49,17 +50,9 @@ 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();
- }
-
- getComments(): void {
- this.commentService.getComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- this.isLoading = false;
- });
+ this.deviceType = localStorage.getItem('deviceType');
}
searchComments(term: string): void {
@@ -72,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/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 78a035810f80b2bc74be269604bdb65e2bb38c5d..98dff1aeefbed675ffe9001795f6853c895876b7 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -11,19 +11,15 @@
{{comment.timestamp | date: 'h:mm:ss a, M/d/yy'}}
</ng-template>
</div>
- <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)"
- [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+ <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)">
<mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
</button>
<button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
- (click)="setFavorite(comment)"
- [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+ (click)="setFavorite(comment)">
<mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite_border</mat-icon>
</button>
- <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
- [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
- <mat-icon class="icon" [ngClass]="{'read-icon': comment.read,
- 'not-marked' : !comment.read}">visibility
+ <button mat-icon-button *ngIf="comment.read || !isStudent" [disabled]="isStudent" (click)="setRead(comment)">
+ <mat-icon class="icon" [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
</mat-icon>
</button>
</div>
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 07c51d408ea949dcf1a82b51a6514ad63bbfa77a..75e17bba205f3b53ef1aabb229e44b79cbec0f2f 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,11 +1,10 @@
<mat-toolbar class="mat-elevation-z4">
<mat-toolbar-row>
- <button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
+ <button mat-icon-button *ngIf="router.url !== '/home'" (click)="goBack()"
+ matTooltip="{{'header.back' | translate}}">
<mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
</button>
<span class="fill-remaining-space"></span>
- <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
- <span class="fill-remaining-space"></span>
<mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
<mat-grid-list cols="2">
@@ -39,7 +38,7 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="themeMenu">
- <mat-icon class="header-icons">palette</mat-icon>
+ <mat-icon class="header-icons" matTooltip="{{'header.change-theme' | translate}}">palette</mat-icon>
</button>
<mat-menu #langMenu="matMenu" [overlapTrigger]="false">
@@ -48,7 +47,7 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="langMenu">
- <mat-icon class="header-icons">language</mat-icon>
+ <mat-icon class="header-icons" matTooltip="{{'header.change-language' | translate}}">language</mat-icon>
</button>
<mat-menu #loginMenu="matMenu" [overlapTrigger]="false">
@@ -60,27 +59,29 @@
<mat-icon class="sessions">turned_in</mat-icon>
<span>{{'header.visited-sessions' | translate}}</span>
</button>
- <button mat-menu-item (click)="logout()">
+ <button mat-menu-item (click)="logout()">
<mat-icon color="warn">exit_to_app</mat-icon>
<span>{{ 'header.logout' | translate }}</span>
</button>
</mat-menu>
<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
- <button mat-menu-item (click)=login(true)>
- <mat-icon>record_voice_over</mat-icon>
- <span>{{ 'login-page.creator' | translate }}</span>
- </button>
- <button mat-menu-item (click)=login(false)>
- <mat-icon>supervisor_account</mat-icon>
- <span>{{ 'login-page.participant' | translate }}</span>
- </button>
+ <button mat-menu-item (click)=login(true)>
+ <mat-icon>record_voice_over</mat-icon>
+ <span>{{ 'login-page.creator' | translate }}</span>
+ </button>
+ <button mat-menu-item (click)=login(false)>
+ <mat-icon>supervisor_account</mat-icon>
+ <span>{{ 'login-page.participant' | translate }}</span>
+ </button>
</mat-menu>
- <button mat-icon-button *ngIf="!user" [matMenuTriggerFor]="userMenu">
+ <button mat-icon-button *ngIf="!user" [matMenuTriggerFor]="userMenu"
+ matTooltip="{{'header.login' | translate}}">
<mat-icon class="header-icons">account_box</mat-icon>
</button>
- <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="loginMenu">
+ <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="loginMenu"
+ matTooltip="{{'header.my-account' | translate}}">
<mat-icon class="header-icons">account_box</mat-icon>
</button>
</mat-toolbar-row>
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;
+}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index ff04dd4b82978107fdae01b211f8ed3093322bec..eb32ec070a1d6a4226c9806404c341228f2ee0a0 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -94,8 +94,10 @@
"really": "Wollen sie wirklich alle Kommentare dieser Session löschen?",
"no-comments": "Es wurden noch keine Kommentare erstellt ..."
},
- "comment-list-page": {
+ "comment-list": {
"search": "Suchen",
- "cancel": "Abbrechen"
+ "export-comments": "Kommentare exportieren",
+ "filter-comments": "Kommentare Sortieren",
+ "add-comment": "Kommentar erstellen"
}
}
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 50e6bcb68a12a99817f02328b99dc06f17de919c..c6fb0b52cf7853c3d6b1d10ccc48b437a475ef36 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -94,8 +94,10 @@
"really": "Do you really want to delete all comments of this session?",
"no-comments": "No comments have been created yet ..."
},
- "comment-list-page": {
+ "comment-list": {
"search": "Search",
- "cancel": "Cancel"
+ "export-comments": "Export comments",
+ "filter-comments": "Sort comments",
+ "add-comment": "Create comment"
}
}
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 7d5899df57300df974694a12dca978fb400e81d2..ca8ed1c1175f0a4fb8ce69463b08608e810f7824 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -8,8 +8,10 @@
"back": "Zurück",
"my-sessions": "Meine Sessions",
"visited-sessions": "Besuchte Sessions",
- "default": "ARSnova",
- "dark": "Nacht"
+ "change-theme": "Theme ändern",
+ "change-language": "Sprache ändern",
+ "login": "Login",
+ "my-account": "Mein Account"
},
"login-page": {
"creator": "Dozent/in",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 3691c26bfc340bc8f875c63ab7fa3c2e73721a65..d8cdb9223e5c9a447e83ec0a803084a5b4c299b1 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -8,8 +8,10 @@
"back": "Back",
"my-sessions": "My Sessions",
"visited-sessions": "Visited Sessions",
- "default": "ARSnova",
- "dark": "Night"
+ "change-theme": "Change theme",
+ "change-language": "Change language",
+ "login": "Login",
+ "my-account": "My account"
},
"login-page": {
"creator": "Lecturer",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 0c25a7baadb452a93190cd92f96168f2139fb031..83c4bcc6e3ee7d165408c3e6fd90bcb806d86b89 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -24,9 +24,10 @@
"error-both-fields": "Bitte füllen Sie alle Felder aus.",
"no-comments": "Es wurden noch keine Kommentare erstellt ..."
},
- "comment-list-page": {
+ "comment-list": {
"search": "Suchen",
- "cancel": "Abbrechen"
+ "filter-comments": "Kommentare Sortieren",
+ "add-comment": "Kommentar erstellen"
},
"answer": {
"submit": "Absenden",
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index b98e799cb3b2decd47402464b429c8ca477d5b06..64552a26aed6509cce9d23097b3902c8a4067de9 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -24,9 +24,10 @@
"error-both-fields": "Please fill in all fields.",
"no-comments": "No comments have been created yet ..."
},
- "comment-list-page": {
+ "comment-list": {
"search": "Search",
- "cancel": "Cancel"
+ "filter-comments": "Sort comments",
+ "add-comment": "Create comment"
},
"answer": {
"submit": "Submit",
diff --git a/src/assets/icons/favicon.png b/src/assets/icons/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4a8924b72205820d7dff943cd1b838c635cc7c1
Binary files /dev/null and b/src/assets/icons/favicon.png differ
diff --git a/src/assets/icons/icon-128x128.png b/src/assets/icons/icon-128x128.png
deleted file mode 100644
index 9f9241f0be40661db1eed29384231e76d33b6e7c..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/icon-128x128.png and /dev/null differ
diff --git a/src/assets/icons/icon-144x144.png b/src/assets/icons/icon-144x144.png
index 4a5f8c16389c261b3291ef34a9ef8b2222f76d69..7bfa86aa2b5ee2694eb708b78e7d95a53743799f 100644
Binary files a/src/assets/icons/icon-144x144.png and b/src/assets/icons/icon-144x144.png differ
diff --git a/src/assets/icons/icon-152x152.png b/src/assets/icons/icon-152x152.png
deleted file mode 100644
index 34a1a8d645872c776c9425de45c3fcfba12c271e..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/icon-152x152.png and /dev/null differ
diff --git a/src/assets/icons/icon-192x192.png b/src/assets/icons/icon-192x192.png
index 9172e5dd29e4b2c35cbf4da874e778934fa27e77..181ca1eb4f69b79b1c7bc27f793ce79e3d7be6e4 100644
Binary files a/src/assets/icons/icon-192x192.png and b/src/assets/icons/icon-192x192.png differ
diff --git a/src/assets/icons/icon-384x384.png b/src/assets/icons/icon-384x384.png
deleted file mode 100644
index e54e8d3eafe56a617b9de13c361ed68657371e84..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/icon-384x384.png and /dev/null differ
diff --git a/src/assets/icons/icon-512x512.png b/src/assets/icons/icon-512x512.png
index 51ee297df1cbeb0354814ffe95afa6e4bc86ea23..07ce678d530aa3130b736a85efa3bad20f37939a 100644
Binary files a/src/assets/icons/icon-512x512.png and b/src/assets/icons/icon-512x512.png differ
diff --git a/src/assets/icons/icon-72x72.png b/src/assets/icons/icon-72x72.png
deleted file mode 100644
index 2814a3f30caf3abf4de2ac85082ef83888b4b479..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/icon-72x72.png and /dev/null differ
diff --git a/src/assets/icons/icon-96x96.png b/src/assets/icons/icon-96x96.png
deleted file mode 100644
index d271025c4f22c7ba3c5f43ccfcab0e52ebbe80ca..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/icon-96x96.png and /dev/null differ
diff --git a/src/index.html b/src/index.html
index e33f54078b0dc55598895e0d3395b616df110297..ae854574211cb24bd7e4335c3b1a9cbeee07de09 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,31 +4,31 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A responsive, interactive Audience Response System, developed at THM">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0">
<title>ARSnova</title>
<base href="/">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
- <link rel="icon" sizes="192x192" href="assets/images/android-desktop.png">
+ <link rel="icon" sizes="192x192" href="assets/icons/icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="#4DB6AC">
+ <meta name="apple-mobile-web-app-status-bar-style" content="#fafafa">
<meta name="apple-mobile-web-app-title" content="ARSnova">
- <link rel="apple-touch-icon-precomposed" href="assets/images/ios-desktop.png">
+ <link rel="apple-touch-icon-precomposed" href="assets/icons/icon-144x144.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
- <meta name="msapplication-TileImage" content="assets/images/touch/ms-touch-icon-144x144-precomposed.png">
- <meta name="msapplication-TileColor" content="#3372DF">
+ <meta name="msapplication-TileImage" content="assets/icons/icon-192x192">
+ <meta name="msapplication-TileColor" content="#fafafa">
- <link rel="shortcut icon" href="assets/images/favicon.png">
+ <link rel="shortcut icon" href="assets/icons/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="manifest" href="manifest.webmanifest">
- <meta name="theme-color" content="#b2dfdb">
+ <meta name="theme-color" content="#fafafa">
</head>
<body>
<app-root></app-root>
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
index 346ea67f7dd63d65386bcaa888bdc7912ac2c04e..f13e92090d423a9f0912179b5fd74eeae98aa764 100644
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@@ -1,8 +1,8 @@
{
"name": "ARSnova Lite",
"short_name": "ARSnova",
- "theme_color": "#b2dfdb",
- "background_color": "#b2dfdb",
+ "theme_color": "#fafafa",
+ "background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/home",