From 670c9a0b9ce1f9c25a1031fbbc1890551bbdab1f Mon Sep 17 00:00:00 2001
From: ChronosX88 <chronosx88@gmail.com>
Date: Tue, 24 Sep 2019 21:26:29 +0400
Subject: [PATCH] [ui] feat: Add table view (with test data)

---
 ClientApp/src/app/home/home.component.html | 31 ++++++++++++----------
 ClientApp/src/app/home/home.component.ts   | 16 ++++++++++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html
index f74c2e7..d4c4759 100644
--- a/ClientApp/src/app/home/home.component.html
+++ b/ClientApp/src/app/home/home.component.html
@@ -1,14 +1,17 @@
-<h1>Hello, world!</h1>
-<p>Welcome to your new single-page application, built with:</p>
-<ul>
-  <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
-  <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
-  <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
-</ul>
-<p>To help you get started, we've also set up:</p>
-<ul>
-  <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
-  <li><strong>Angular CLI integration</strong>. In development mode, there's no need to run <code>ng serve</code>. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
-  <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration automatically invokes <code>ng build</code> to produce minified, ahead-of-time compiled JavaScript files.</li>
-</ul>
-<p>The <code>ClientApp</code> subdirectory is a standard Angular CLI application. If you open a command prompt in that directory, you can run any <code>ng</code> command (e.g., <code>ng test</code>), or use <code>npm</code> to install extra packages into it.</p>
+<div style="text-align: center;"><h1>Add/Edit Instructor</h1></div>
+<table class='table table-striped'>
+    <thead>
+        <tr>
+          <th>First name</th>
+          <th>Last Name</th>
+          <th>DELETE</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let instructor of instructors">
+          <td>{{ instructor.firstName }}</td>
+          <td>{{ instructor.lastName }}</td>
+          <td><button type="button" class="btn btn-danger">DELETE</button></td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts
index 2747b30..c18a930 100644
--- a/ClientApp/src/app/home/home.component.ts
+++ b/ClientApp/src/app/home/home.component.ts
@@ -1,8 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
+    public instructors: any[] = [{id: "1", firstName: "Test", lastName: "Testov"}];
+
+    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+        /*http.get<Instructor[]>(baseUrl + 'api/v1/instructors').subscribe(result => {
+          this.instructors = result;
+        }, error => console.error(error));*/
+    }
 }
+
+interface Instructor {
+    id: string,
+    firstName: string,
+    lastName: string
+}
\ No newline at end of file