diff --git a/src/app/content-creation/content-creation.component.html b/src/app/content-creation/content-creation.component.html
index 44da99144a7ceb9f746cec1f13e77dffd80ff027..06ffdeade735f3138639bb0f879c82f8c4e6d574 100644
--- a/src/app/content-creation/content-creation.component.html
+++ b/src/app/content-creation/content-creation.component.html
@@ -1,37 +1,23 @@
-<div>
- <mat-card class="content-card">
- <mat-card-title>
- <mat-form-field>
- <input matInput placeholder="Topic">
- </mat-form-field>
- </mat-card-title>
-
+<form (ngSubmit)="addContent(subjectTitle.value, bodyText.value)">
+ <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<mat-form-field>
- <textarea matInput placeholder="Place your text here" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8"></textarea>
+ <input class="input-block" #subjectTitle matInput (keypress)="resetEmptyInputs()" placeholder="Subject" [(ngModel)]="subject"
+ name="Title">
+ <button mat-button *ngIf="subject" type="text" matSuffix mat-icon-button aria-label="Clear" (click)="subject=''">
+ <mat-icon>close</mat-icon>
+ </button>
</mat-form-field>
- </mat-card>
-</div>
-
-<mat-card class="content-card">
- <mat-selection-list>
- <mat-list-option>Answer 32</mat-list-option>
- <mat-list-option>Answer 33</mat-list-option>
- <mat-list-option>Answer 34</mat-list-option>
-
- <mat-list>
- <mat-form-field>
- <input matInput placeholder="Add Answer">
- </mat-form-field>
- <button mat-mini-fab>+</button>
- </mat-list>
- </mat-selection-list>
-</mat-card>
-
-<button mat-raised-button="Preview">Preview</button>
- <!-- TODO: Save answers to array in a class. Show answers in a matlist -->
-
-<div>
- <mat-slide-toggle>Allow absention</mat-slide-toggle>
- <mat-slide-toggle>Show hints</mat-slide-toggle>
-</div>
- <!-- Let this view open in a mat dialog -->
+ <mat-form-field>
+ <textarea #bodyText matInput matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8" (keypress)="resetEmptyInputs()"
+ placeholder="Body" [(ngModel)]="body" name="Text"></textarea>
+ <button mat-button *ngIf="body" type="text" matSuffix mat-icon-button aria-label="Clear" (click)="body=''">
+ <mat-icon>close</mat-icon>
+ </button>
+ </mat-form-field>
+ <div fxLayout="row" fxLayoutGap="10px">
+ <mat-slide-toggle>Allow absention</mat-slide-toggle>
+ <mat-slide-toggle>Show hints</mat-slide-toggle>
+ </div>
+ <button mat-raised-button color="primary" type="submit">Create content</button>
+ </div>
+</form>
diff --git a/src/app/content-creation/content-creation.component.scss b/src/app/content-creation/content-creation.component.scss
index ed600034848f739d3824f93fe847dbe25f91693d..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/content-creation/content-creation.component.scss
+++ b/src/app/content-creation/content-creation.component.scss
@@ -1,4 +0,0 @@
-.content-card {
- max-width: 400px;
- margin: 10px;
-}
diff --git a/src/app/content-creation/content-creation.component.ts b/src/app/content-creation/content-creation.component.ts
index e80156f5e4c577c7b996638299f77449b78801fe..86d7ac2246f687b4b7068b403c94e5f8737e16d5 100644
--- a/src/app/content-creation/content-creation.component.ts
+++ b/src/app/content-creation/content-creation.component.ts
@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { ContentService } from '../content.service';
+import { Router } from '@angular/router';
+import { NotificationService } from '../notification.service';
+import { Content } from '../content';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { RoomComponent } from '../room/room.component';
@Component({
selector: 'app-content-creation',
@@ -6,10 +12,41 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./content-creation.component.scss']
})
export class ContentCreationComponent implements OnInit {
+ subject: string;
+ body: string;
+ roomId: string;
+ emptyInputs = false;
- constructor() { }
+ constructor(private contentService: ContentService,
+ private router: Router,
+ private notification: NotificationService,
+ public dialogRef: MatDialogRef<RoomComponent>,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
+ }
+
+ onNoClick(): void {
+ this.dialogRef.close();
+ }
ngOnInit() {
}
+ resetEmptyInputs(): void {
+ this.emptyInputs = false;
+ }
+
+ addContent(subject: string, body: string) {
+ subject = subject.trim();
+ body = body.trim();
+ if (!subject || !body) {
+ this.emptyInputs = true;
+ return;
+ }
+ this.contentService.addContent({ subject: subject, body: body, roomId: this.roomId } as Content)
+ .subscribe(content => {
+ this.notification.show(`Content '${content.subject}' successfully created.`);
+ this.router.navigate([`/creator/room/${content.roomId}/${content.id}`]);
+ this.dialogRef.close();
+ });
+ }
}
diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html
index c58c5db417265ef4ca3c53023fbbede6fb5f1f7f..78d20e59e31d7a121789c1e50181f05f83e60931 100644
--- a/src/app/creator-room/creator-room.component.html
+++ b/src/app/creator-room/creator-room.component.html
@@ -1,6 +1,6 @@
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-card *ngIf="room" class="input-form">
+ <mat-card *ngIf="room && !modify" class="input-form">
<mat-card-header>
<mat-card-title>
<h3 class="subheading-2">{{ room.name }}</h3>
@@ -18,19 +18,17 @@
</p>
</mat-card-content>
<mat-divider></mat-divider>
-
<app-content-list></app-content-list>
-
<mat-divider></mat-divider>
<mat-card-actions>
- <button mat-button color="primary" matTooltip="Create new content" routerLink="/creator/room/{{room.id}}/content-creation">
+ <button mat-button color="primary" matTooltip="Create new content" (click)="createContentDialog()">
Create content
</button>
<button mat-button color="primary" matTooltip="See room comments"
routerLink="/creator/room/{{room.id}}/comments">
Comments
</button>
- <button (click)="showEditDialog()" mat-button color="primary">
+ <button *ngIf="!modify" (click)="showEditDialog()" mat-button color="primary">
Edit room
</button>
<button mat-button color="warn" (click)="openDeletionRoomDialog()">
diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts
index 6e566f04fd18856b914dd5a77770190c33fb6ce9..675e8b12a8feafc474dc4618fee7587d7fef89d4 100644
--- a/src/app/creator-room/creator-room.component.ts
+++ b/src/app/creator-room/creator-room.component.ts
@@ -6,6 +6,7 @@ import { Room } from '../room';
import { Location } from '@angular/common';
import { NotificationService } from '../notification.service';
import { MatDialog } from '@angular/material';
+import { ContentCreationComponent } from '../content-creation/content-creation.component';
import { RoomDeletionComponent } from '../room-deletion/room-deletion.component';
import { RoomModificationComponent } from '../room-modification/room-modification.component';
@@ -21,8 +22,9 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
constructor(protected roomService: RoomService,
protected notification: NotificationService,
protected route: ActivatedRoute,
- public dialog: MatDialog,
- protected location: Location) {
+ protected location: Location,
+ public dialog: MatDialog
+ ) {
super(roomService, route, location);
}
@@ -59,6 +61,13 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
this.delete(room);
}
+ createContentDialog(): void {
+ const dialogRef = this.dialog.open(ContentCreationComponent, {
+ width: '350px'
+ });
+ dialogRef.componentInstance.roomId = this.room.id;
+ }
+
confirmDeletion(dialogAnswer: string): void {
if (dialogAnswer === 'delete') {
this.deleteRoom(this.room);
diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html
index 75666e5360428f647b6b8b9102f828f3d6bac522..de67617406d588253a7fd14b3074abb0f35ea88a 100644
--- a/src/app/room-creation/room-creation.component.html
+++ b/src/app/room-creation/room-creation.component.html
@@ -3,7 +3,7 @@
<mat-form-field>
<input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text" placeholder="Name"
maxlength="50"
- [(ngModel)]="longName"/>
+ [(ngModel)]="longName" name="LongName"/>
<mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
<mat-hint align="end" *ngIf="!emptyInputs">{{longRoomName.value.length}} / 50</mat-hint>
<mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
@@ -14,7 +14,7 @@
<mat-form-field>
<input (keypress)="resetEmptyInputs()" matInput #shortRoomName class="input-block" type="text"
placeholder="Short name" maxlength="8"
- [(ngModel)]="shortName"/>
+ [(ngModel)]="shortName" name="ShortName"/>
<mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
<mat-hint align="end" *ngIf="!emptyInputs">{{shortRoomName.value.length}} / 8</mat-hint>
<mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>