diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 05a5f3e714bdff1afe555bdab9e7f8c61aeec8e7..4a858f65242a5d9f0b5d051bbc546ce0932815f3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -80,6 +80,7 @@ import { CreatorChoiceContentComponent } from './creator-choice-content/creator-
import { AddContentComponent } from './add-content/add-content.component';
import { ParticipantContentCarouselPageComponent } from './participant-content-carousel-page/participant-content-carousel-page.component';
import { ParticipantTextContentComponent } from './participant-text-content/participant-text-content.component';
+import { CreatorTextContentComponent } from './creator-text-content/creator-text-content.component';
@NgModule({
declarations: [
@@ -113,7 +114,8 @@ import { ParticipantTextContentComponent } from './participant-text-content/part
AddContentComponent,
ParticipantContentCarouselPageComponent,
ParticipantTextContentComponent,
- AnswerStatisticsComponent
+ AnswerStatisticsComponent,
+ CreatorTextContentComponent
],
entryComponents: [
RegisterComponent,
diff --git a/src/app/creator-choice-content/creator-choice-content.component.html b/src/app/creator-choice-content/creator-choice-content.component.html
index ba5d3ea8d2b936bdc4dc73d1a88d21b85c6825e4..4bd29154f4845732a8b6d5ed6393cf3b047406eb 100644
--- a/src/app/creator-choice-content/creator-choice-content.component.html
+++ b/src/app/creator-choice-content/creator-choice-content.component.html
@@ -1,48 +1,49 @@
-<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-card class="input-form" fxLayoutGap="20px">
- <mat-card-header>
- <mat-card-title>
- <h3 class="subheading-2">
- <mat-form-field>
- <input [(ngModel)]="subject" matInput placeholder="Subject" name="newSubject">
- </mat-form-field>
- </h3>
- <h4>
- <div>
- <mat-form-field>
- <input [(ngModel)]="body" matInput placeholder="Body" name="newBody">
- </mat-form-field>
- </div>
- </h4>
- </mat-card-title>
- </mat-card-header>
- <mat-divider></mat-divider>
- <mat-card-content>
- <mat-list *ngFor="let answer of options; let i = index" [attr.data-index]="i">
- <!-- <mat-checkbox color="primary">{{answer.label}}</mat-checkbox> -->
- <div fxLayout="row" fxLayoutGap="20px">
- <mat-checkbox color="primary" value="checked"></mat-checkbox>
- <input matInput placeholder="Label" value="{{answer.label}}">
- <input matInput placeholder="Points" value="{{answer.points}}">
- </div>
- </mat-list>
- <mat-divider class="underListDivider"></mat-divider>
- <h4>Add new answer:</h4>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field>
- <input [(ngModel)]="newLabel" matInput placeholder="Label" name="newLabel">
- </mat-form-field>
- <mat-form-field>
- <input [(ngModel)]="newPoints" matInput placeholder="Points" name="newPoints">
- </mat-form-field>
- <mat-checkbox color="primary">Correct answer</mat-checkbox>
- </div>
- </mat-card-content>
- <mat-card-actions fxLayoutAlign="center">
- <button mat-raised-button color="primary" (click)="addAnswer()">Add answer</button>
- <button mat-raised-button color="primary">Save content</button>
- </mat-card-actions>
- </mat-card>
+<form (ngSubmit)="submitContent()">
+ <mat-form-field>
+ <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
+ </mat-form-field>
+ <mat-form-field>
+ <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea>
+ </mat-form-field>
+ <mat-divider></mat-divider>
+
+ <mat-table #table [dataSource]="content.options">
+
+ <ng-container matColumnDef="label">
+ <mat-header-cell *matHeaderCellDef>Answer</mat-header-cell>
+ <mat-cell *matCellDef="let answer">
+ <mat-checkbox color="primary">{{ answer.label }}</mat-checkbox>
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="points">
+ <mat-header-cell *matHeaderCellDef>Points</mat-header-cell>
+ <mat-cell *matCellDef="let answer">{{ answer.points }}</mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+ </mat-table>
+
+ <mat-divider></mat-divider>
+
+ <div fxLayout="row" fxLayoutGap="5px">
+ <div fxLayout="column" fxLayoutAlign="center">
+ <mat-checkbox #answerIsCorrect color="primary"></mat-checkbox>
+ </div>
+ <mat-form-field>
+ <input matInput #answerLabel placeholder="Answer" name="answer">
+ </mat-form-field>
+ <mat-form-field>
+ <input matInput #answerPoints placeholder="Points" name="points">
+ </mat-form-field>
+ <div fxLayout="column" fxLayoutAlign="center">
+ <button mat-button type="button"
+ (click)="addAnswer(answerIsCorrect.value, answerLabel.value, answerPoints.value)">
+ Add Answer
+ </button>
+ </div>
</div>
-</div>
+
+ <button mat-button type="submit">Submit</button>
+</form>
diff --git a/src/app/creator-choice-content/creator-choice-content.component.scss b/src/app/creator-choice-content/creator-choice-content.component.scss
index f50ca6d2e524f3db8a355fe6bc97c6f7edd35f65..9ee20adf8bfa62fd7d1268bc17f9fb4bb98f79a4 100644
--- a/src/app/creator-choice-content/creator-choice-content.component.scss
+++ b/src/app/creator-choice-content/creator-choice-content.component.scss
@@ -1,3 +1,3 @@
-.underListDivider{
- margin-top: 10px;
+mat-form-field {
+ display: block;
}
diff --git a/src/app/creator-choice-content/creator-choice-content.component.ts b/src/app/creator-choice-content/creator-choice-content.component.ts
index 154b58a96ad932d1f1f7c2f58aa3721fb72f5241..c8c96da294715e66826f915a60609c5cf573c25f 100644
--- a/src/app/creator-choice-content/creator-choice-content.component.ts
+++ b/src/app/creator-choice-content/creator-choice-content.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { AnswerOption } from '../answer-option';
+import { ChoiceContent } from '../choice-content';
@Component({
selector: 'app-creator-choice-content',
@@ -7,24 +8,33 @@ import { AnswerOption } from '../answer-option';
styleUrls: ['./creator-choice-content.component.scss']
})
export class CreatorChoiceContentComponent implements OnInit {
- subject: string;
- body: string;
- newLabel: string;
- newPoints: string;
- options = [
- new AnswerOption('A - Giraffe', '0'),
- new AnswerOption('B - Bär', '0'),
- new AnswerOption('C - bra', '10')
- ];
- constructor() { }
+ content: ChoiceContent = new ChoiceContent('2',
+ '1',
+ '1',
+ 'Choice Content 1',
+ 'This is the body of Choice Content 1',
+ 1,
+ [
+ new AnswerOption('Option 1', '0'),
+ new AnswerOption('Option 2', '10'),
+ new AnswerOption('Option 3', '20'),
+ new AnswerOption('Option 4', '30')
+ ],
+ [1, 2, 3],
+ true);
+
+ displayedColumns = ['label', 'points'];
+
+ constructor() {
+ }
ngOnInit() {
}
- addAnswer() {
- this.options.push(new AnswerOption(this.newLabel, this.newPoints));
- this.newLabel = '';
- this.newPoints = '';
+ submitContent() {
+ }
+
+ addAnswer(isCorrect: boolean, label: string, points: number) {
}
}