From 0b867dfc9158a5794585813ff1ee6dca338072e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Fri, 8 Mar 2019 19:33:11 +0100
Subject: [PATCH] Create mat-tab-group with card in every tab to show content
and answers
---
.../content-presentation.component.html | 18 +++++++++--
.../content-presentation.component.scss | 30 +++++++++++++++++++
.../content-presentation.component.ts | 14 ++++++++-
3 files changed, 58 insertions(+), 4 deletions(-)
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 ad62d8f33..c2e6ac40e 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,15 @@
-<p>
- content-presentation works!
-</p>
+<div fxLayout="column" fxLayoutAlign="start center">
+ <mat-tab-group>
+ <mat-tab fxLayoutAlign="center" *ngFor="let content of contents" label="{{content.subject}}">
+ <mat-card>
+ <mat-card-content>
+ <h3>{{content.body}}</h3>
+ <mat-divider></mat-divider>
+ <div class="answers" *ngFor="let answer of content.options; let i = index">
+ <h4>{{labels[i]}} : {{answer.label}}</h4>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </mat-tab>
+ </mat-tab-group>
+</div>
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index e69de29bb..8b0580e3b 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -0,0 +1,30 @@
+mat-tab-group {
+ width: 100%;
+ max-width: 800px;
+}
+
+.tab-container {
+ padding: 20px;
+}
+
+mat-card {
+ width: 800px;
+ max-width: 90%;
+ margin-top: 20px;
+ background-color: #fff8e1;
+}
+
+h3 {
+ font-size: 150%;
+ color: #26a69a;
+}
+
+h4 {
+ padding-top: 10%;
+ font-size: 120%;
+ margin: 0px;
+}
+
+.answers:last-child {
+ padding-bottom: 5%;
+}
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 577bcc06a..e070286e4 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.ts
+++ b/src/app/components/creator/content-presentation/content-presentation.component.ts
@@ -1,3 +1,6 @@
+import { ContentChoice } from './../../../models/content-choice';
+import { ContentService } from './../../../services/http/content.service';
+import { ContentGroup } from './../../../models/content-group';
import { Component, OnInit } from '@angular/core';
@Component({
@@ -7,9 +10,18 @@ import { Component, OnInit } from '@angular/core';
})
export class ContentPresentationComponent implements OnInit {
- constructor() { }
+ contents: ContentChoice[];
+ contentGroup: ContentGroup;
+ labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+ constructor(private contentService: ContentService) {
+ }
ngOnInit() {
+ this.contentGroup = JSON.parse(sessionStorage.getItem('contentGroup'));
+ this.contentService.getContentChoiceByIds(this.contentGroup.contentIds).subscribe( contents => {
+ this.contents = contents;
+ });
}
}
--
GitLab