From 532d9dcfaa64c7487b040d339ad2acdb3d3b51f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Mon, 28 Jan 2019 20:49:10 +0100
Subject: [PATCH] Add loading spinner and adjust colors of statistic-components
---
.../shared/list-statistic/list-statistic.component.scss | 3 +--
src/app/components/shared/statistic/statistic.component.html | 5 +++++
src/app/components/shared/statistic/statistic.component.scss | 3 ++-
src/app/components/shared/statistic/statistic.component.ts | 2 ++
.../shared/statistics-page/statistics-page.component.scss | 1 +
5 files changed, 11 insertions(+), 3 deletions(-)
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 cf3ca118d..4eb3b9569 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -28,7 +28,7 @@ mat-cell {
mat-toolbar {
height: 20px;
- background-color: white;
+ background-color: #fff8e1;
}
.positiveC {
@@ -63,4 +63,3 @@ mat-toolbar {
.emptyCC {
background: #E0E0E0;
}
-
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 3c1111d6b..85692db5f 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -7,6 +7,11 @@
<mat-toolbar></mat-toolbar>
<div>
<div style="position: relative; height: 60vh">
+ <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>
<canvas id="chart"></canvas>
</div>
</div>
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index 8c4e99f4c..ddfd27aad 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,9 +1,10 @@
mat-card {
max-width: 800px;
width: 100%;
+ background-color: #fff8e1 !important;
}
mat-toolbar {
height: 15px;
- background-color: white;
+ background-color: #fff8e1;
}
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 33528463c..1b81eb3f7 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -32,6 +32,7 @@ export class StatisticComponent implements OnInit {
contentId: string;
subject: string;
maxLength: number;
+ isLoading = true;
constructor(protected route: ActivatedRoute,
private contentService: ContentService) { }
@@ -47,6 +48,7 @@ export class StatisticComponent implements OnInit {
});
this.contentService.getChoiceContent(this.contentId).subscribe(content => {
this.getData(content);
+ this.isLoading = false;
});
}
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index 9df634ba7..ba47efdcd 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,4 +2,5 @@ mat-card {
max-width: 800px;
width: 100%;
min-height: 300px;
+ background-color: #fff8e1 !important;
}
--
GitLab