Added series search

Author: GaProgMan

Angular2/ClientApp/app/app.module.ts

@@ -5,6 +5,7 @@ import { AppComponent } from './components/app/app.component'
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { BooksComponent } from './components/books/books.component';
 import { CharacterComponent } from './components/characters/characters.component';
+import { SeriesComponent } from './components/series/series.component';
 import { AboutComponent } from './components/about/about.component';
 
 @NgModule({
@@ -14,6 +15,7 @@ import { AboutComponent } from './components/about/about.component';
         NavMenuComponent,
         CharacterComponent,
         BooksComponent,
+        SeriesComponent,
         AboutComponent
     ],
     imports: [
@@ -22,6 +24,7 @@ import { AboutComponent } from './components/about/about.component';
             { path: '', redirectTo: 'books', pathMatch: 'full' },
             { path: 'books', component: BooksComponent },
             { path: 'characters', component: CharacterComponent },
+            { path: 'series', component: SeriesComponent },
             { path: 'about', component: AboutComponent },
             { path: '**', redirectTo: 'about' }
         ])

Angular2/ClientApp/app/components/navmenu/navmenu.component.html

@@ -1,4 +1,4 @@
-<div class='main-nav'>
+<div class='main-nav'>
     <div class='navbar navbar-inverse'>
         <div class='navbar-header'>
             <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
@@ -22,6 +22,11 @@
                         <span class='glyphicon glyphicon-user'></span> Characters
                     </a>
                 </li>
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/series']">
+                        <span class='glyphicon glyphicon-tags'></span> Series
+                    </a>
+                </li>
             </ul>
         </div>
     </div>

Angular2/ClientApp/app/components/series/series.component.html

@@ -0,0 +1,26 @@
+<h1>Series Search</h1>
+<div class="row">
+    <div class="col-xs-12">
+        <input [value]="searchString" (input)="searchString = $event.target.value" />
+        <button (click)="getDwSeries()">Search</button>
+    </div>
+</div>
+<div class="loader" *ngIf="!success">
+    <p>Could not find any results</p>
+</div>
+<div class="table-responsive" *ngIf="success">
+    <table class='table' *ngIf="series">
+        <thead>
+            <tr>
+                <th colspan="2">Name</th>
+                <th>Books</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let ser of series">
+                <td colspan="2">{{ ser.seriesName }}</td>
+                <td>{{ ser.booksAsString() }}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

Angular2/ClientApp/app/components/series/series.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { Http } from '@angular/http';
+import { ResultJson } from "../../models/ResultJson";
+import { Series } from "../../models/Series";
+
+@Component({
+    selector: 'series',
+    templateUrl: './series.component.html'
+})
+export class SeriesComponent {
+    constructor(http: Http) {
+        this.http = http;
+
+        this.success = true;
+        this.loading = false;
+        this.baseApiUrl =  'http://dwcheckapi.azurewebsites.net/series/search?searchString';
+        this.registerFunctions();
+    }
+    // private vars
+    private http: Http;
+
+    // public bound vars
+    success: boolean;
+    loading: boolean;
+    baseApiUrl: string;
+    searchString = '';
+    series: ISeries[];
+
+    // public functions
+    getDwSeries: () => void;
+
+    private registerFunctions() {
+        this.getDwSeries = () => {
+            this.success = false;
+            var route = `${this.baseApiUrl}${this.searchString}`;
+            this.http.get(route).subscribe((result) => {
+                var resultJson = result.json() as IResultJson;
+                if(resultJson.success) {
+                    this.success = true;
+                    this.series = new Array<ISeries>();
+                    result.json().result.forEach(element => {
+                        this.series.push(new Series(element.seriesName, element.bookNames));
+                    });
+                }
+            });
+        }
+    }
+}

Angular2/ClientApp/app/interfaces/ISeries.ts

@@ -0,0 +1,6 @@
+interface ISeries {
+    seriesName: string;
+    books: string[];
+
+    booksAsString:() => string;
+}

Angular2/ClientApp/app/models/Series.ts

@@ -0,0 +1,13 @@
+export class Series implements ISeries {
+    constructor(seriesName: string, books: string[]){
+        this.seriesName = seriesName;
+        this.books = books;
+
+        this.booksAsString = (): string =>{
+            return books.map(b => b).join(', ');
+        }
+    }
+    seriesName: string;
+    books: string[];
+    booksAsString: () => string;
+}