From 28fb804c59c6fe67b3d35ec0c94d9623d5802cf3 Mon Sep 17 00:00:00 2001
From: Hagen <hagen.dressler@mni.thm.de>
Date: Wed, 14 Mar 2018 10:59:27 +0100
Subject: [PATCH] Edit html and style of answer-statistic
---
.../answer-statistics.component.html | 24 +++++++++++++++----
.../answer-statistics.component.scss | 14 +++++++++++
.../answer-statistics.component.ts | 4 ++++
3 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/src/app/answer-statistics/answer-statistics.component.html b/src/app/answer-statistics/answer-statistics.component.html
index d6571e24a..a8dd5151c 100644
--- a/src/app/answer-statistics/answer-statistics.component.html
+++ b/src/app/answer-statistics/answer-statistics.component.html
@@ -1,4 +1,20 @@
-<mat-card>
- <mat-progress-bar [value]="50">
- </mat-progress-bar>
-</mat-card>
+<div fxLayout="row" fxLayoutAlign="center">
+ <div fxLayout="column" fxLayoutGap="20px">
+ <mat-card>
+ <mat-tab-group>
+ <mat-tab label="Answer statistic">
+ <mat-select placeholder="Answers" fxLayoutAlign="right">
+ <mat-option *ngFor="let state of states" [value]="state.value">
+ {{ state.value }}
+ </mat-option>
+ </mat-select>
+ <div class="bars">
+ Answer 1
+ <mat-progress-bar [value]="50" #col *ngIf="state.value === 'Responded' :">
+ </mat-progress-bar>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card>
+ </div>
+</div>
diff --git a/src/app/answer-statistics/answer-statistics.component.scss b/src/app/answer-statistics/answer-statistics.component.scss
index e69de29bb..26bb809a0 100644
--- a/src/app/answer-statistics/answer-statistics.component.scss
+++ b/src/app/answer-statistics/answer-statistics.component.scss
@@ -0,0 +1,14 @@
+mat-card {
+ min-width: 800px;
+ justify-content: center;
+}
+
+mat-select {
+ max-width: 100px;
+ margin-top: 10px;
+ margin-left: 675px;
+}
+
+.bars {
+ margin-top: 20px;
+}
diff --git a/src/app/answer-statistics/answer-statistics.component.ts b/src/app/answer-statistics/answer-statistics.component.ts
index 4673b5ee2..07af3178d 100644
--- a/src/app/answer-statistics/answer-statistics.component.ts
+++ b/src/app/answer-statistics/answer-statistics.component.ts
@@ -6,6 +6,10 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./answer-statistics.component.scss']
})
export class AnswerStatisticsComponent implements OnInit {
+ states = [
+ { value: '1', viewValue: 'Responded' },
+ { value: '2', viewValue: 'Not responded' },
+ ];
constructor() { }
--
GitLab