CHAL-12 (comments)

front/src/app/app.module.ts

@@ -2,6 +2,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 
 // used to create fake backend
 import { fakeBackendProvider } from './_helpers';
@@ -23,7 +24,8 @@ import { AddChallangeComponent } from './addChallange';
         BrowserModule,
         ReactiveFormsModule,
         HttpClientModule,
-        appRoutingModule
+        appRoutingModule,
+        FormsModule
     ],
     declarations: [
         AppComponent,

front/src/app/challange/challange.component.html

@@ -26,4 +26,27 @@
       <div class="col-md-4"><button type="button" class="btn btn-success">Podejmij się!</button></div>
     </div>
   </div>
+  <div class="container">
+    <h2>Komentarze</h2>
+    <div class="row">
+      <div class="col-md-3">
+        Autor
+        <input type="text" [(ngModel)]="author">
+      </div>
+      <div class="col-md-7">
+        <textarea type="text" [(ngModel)]="body" style="width: 100%;"></textarea>
+      </div>
+      <div class="col-md-2">
+        <button (click)="addComment()">Dodaj komentarz</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-2"><b>Autor</b></div>
+      <div class="col-md-10"><b>Komentarz</b></div>
+    </div>
+    <div *ngFor="let comment of comments" class="row" style="padding-top: 20px;">
+      <div class="col-md-2">{{comment.author}}</div>
+      <div class="col-md-10">{{comment.body}}</div>
+    </div>
+  </div>
 </div>

front/src/app/challange/challange.component.ts

@@ -5,9 +5,16 @@ import { ChallangesService } from '@/_services';
 
 @Component({ templateUrl: 'challange.component.html' })
 export class ChallangeComponent implements OnInit {
+  comments = [
+    {author: "szalony", body: "Wow, ale opcja!!!!!"},
+    {author: "krejzol", body: "Nie wierzę!!!!!"},
+  ]
   challange: Challange = null
   observing = false
 
+  author: string  = '';
+  body: string = '';
+
   constructor(
     private route: ActivatedRoute,
     private service: ChallangesService
@@ -30,4 +37,8 @@ export class ChallangeComponent implements OnInit {
     this.observing = true
     this.challange.numberOfObservators += 1
   }
+
+  addComment() {
+    this.comments.push({author: this.author, body: this.body})
+  }
 }