search api by id

MyPassionProjectClient/src/pages/game-search/game-search.html

@@ -0,0 +1,44 @@
+<ion-header>
+  <ion-navbar>
+    <ion-buttons start>
+      <button ion-button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Search Games</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-searchbar [(ngModel)]="searchTerm" (search)="searchGame($event)" placeholder="Search Games" debounce="500"></ion-searchbar>
+  <ion-list>
+    <ion-item-sliding *ngFor="let game of searchResult">
+      <ion-item>
+      <ion-thumbnail item-start>
+        <img src={{game.thumbnail}}>
+      </ion-thumbnail>
+      <h2>{{game.name}}</h2>
+      <p>{{game.mechanics}}</p>
+      <button ion-button clear item-end>View</button>
+        </ion-item>
+
+
+      <ion-item-options side="left">
+        <button ion-button color="primary" (click)="doAddToOwnedAndPlayedList()">
+          <ion-icon name="add"></ion-icon> Owned and Played
+        </button>
+      </ion-item-options>
+
+      <ion-item-options side="right">
+      <button ion-button color="primary" (click)="doAddToOwnedList()">
+      <ion-icon name="add"></ion-icon> Owned
+      </button>
+        <button ion-button color="secondary" (click)="doAddToPlayedList()">
+          <ion-icon name="add"></ion-icon> Played
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</ion-content>

MyPassionProjectClient/src/pages/game-search/game-search.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { GameSearchPage } from './game-search';
+import { BggGameSearch } from '../../providers/bggGames-service';
+
+@NgModule({
+  declarations: [
+    GameSearchPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(GameSearchPage),
+  ],
+  providers: [
+    BggGameSearch
+  ],
+})
+export class GameSearchPageModule {}

MyPassionProjectClient/src/pages/game-search/game-search.scss

@@ -0,0 +1,3 @@
+page-game-search {
+
+}

MyPassionProjectClient/src/pages/game-search/game-search.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
+import { BggGameSearch } from '../../providers/bggGames-service';
+ 
+@IonicPage()
+@Component({
+  selector: 'page-game-search',
+  templateUrl: 'game-search.html',
+})
+export class GameSearchPage {
+    game: any;
+    searchResult: any;
+    searchTerm: '';
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public bggGames: BggGameSearch) {
+  }
+  
+    ionViewDidLoad() {
+    }
+
+    searchGame(){
+      console.log("search method called");
+      this.bggGames.searchGame(this.searchTerm).subscribe(games=>{
+        this.searchResult = games;
+        this.searchResult = Array.of(this.searchResult);
+      })
+      ;
+    }
+
+  doAddToOwnedList() {
+      let toast = this.toastCtrl.create({
+        message: 'Game Added To MyGames',
+        duration: 2000,
+        position: 'bottom'
+      });
+      toast.present();
+
+  }
+
+  doAddToPlayedList() {
+    let toast = this.toastCtrl.create({
+      message: 'Game Added To PlayedGames',
+      duration: 2000,
+      position: 'bottom'
+    });
+    toast.present();
+
+  }
+
+  doAddToOwnedAndPlayedList() {
+    let toast = this.toastCtrl.create({
+      message: 'Game Added To MyPlayedGames',
+      duration: 2000,
+      position: 'bottom'
+    });
+    toast.present();
+
+  }
+}

MyPassionProjectClient/src/pages/games/games.ts

@@ -19,25 +19,25 @@ export class GamesPage {
     ;
   }
   
-  ionViewDidLoad() {
-  }
+    ionViewDidLoad() {
+    }
 
-  getItems(ev: any) {
-    // Reset items back to all of the items
-    this.filteredGames = this.games;
-    // set val to the value of the searchbar
-    const val = ev.target.value;
-    // if the value is an empty string don't filter the items
-    if (val && val.trim() != '') {
-      this.filterGamesBySearch(val);
+    getItems(ev: any) {
+      // Reset items back to all of the items
+      this.filteredGames = this.games;
+      // set val to the value of the searchbar
+      const val = ev.target.value;
+      // if the value is an empty string don't filter the items
+      if (val && val.trim() != '') {
+        this.filterGamesBySearch(val);
+      }
     }
-  }
 
-filterGamesBySearch(searchTerm){
-  this.filteredGames = this.games.filter((games) => {
-      return games.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
-  });    
-}
+  filterGamesBySearch(searchTerm){
+    this.filteredGames = this.games.filter((games) => {
+        return games.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
+    });    
+  }
 
   doAddToOwnedList() {
       let toast = this.toastCtrl.create({

MyPassionProjectClient/src/pages/menu/menu.ts

@@ -28,6 +28,7 @@ export class MenuPage {
   pages: PageInterface[] = [
     { title: 'Home', pageName: 'TabsPage', tabComponent: 'ProfilePage', index: 0, icon: 'home' },
     { title: 'Games', pageName: 'TabsPage', tabComponent: 'GamesPage', index: 1, icon: 'search' },
+    { title: 'Game Search', pageName: 'TabsPage', tabComponent: 'GameSearchPage', index: 1, icon: 'search' },
     { title: 'Friends', pageName: 'TabsPage', tabComponent: 'FriendsPage', index: 2, icon: 'contacts' },
   ];
 

MyPassionProjectClient/src/pages/tabs/tabs.html

@@ -1,5 +1,6 @@
 <ion-tabs>
     <ion-tab [root]="profileRoot" tabTitle="Home" tabIcon="home"></ion-tab>
     <ion-tab [root]="gamesRoot" tabTitle="Games" tabIcon="search"></ion-tab>
+    <ion-tab [root]="gameSearchRoot" tabTitle="GameSearch" tabIcon="search"></ion-tab>
     <ion-tab [root]="friendsRoot" tabTitle="Friends" tabIcon="contacts"></ion-tab>
 </ion-tabs>

MyPassionProjectClient/src/pages/tabs/tabs.ts

@@ -15,13 +15,10 @@ import {IonicPage, NavController, NavParams} from 'ionic-angular';
 })
 export class TabsPage {
 
-  // homeRoot = 'HomePage'
-  // friendsRoot = 'FriendsPage'
-  // gamesRoot = 'GamesPage'
-
   profileRoot: any = 'ProfilePage';
   friendsRoot: any = 'FriendsPage';
   gamesRoot: any = 'GamesPage';
+  gameSearchRoot: any = 'GameSearchPage';
   myIndex: number;
 
 

MyPassionProjectClient/src/providers/bggGames-service.ts

@@ -0,0 +1,14 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+
+@Injectable()
+export class BggGameSearch{
+  public API = "https://bgg-json.azurewebsites.net/thing/";
+
+  constructor(public http: HttpClient){
+  }
+
+  searchGame(gameId: String){
+    return this.http.get(this.API+gameId);
+  }
+}