playing around with components

MyPassionProjectClient/src/pages/friends/friends.html

@@ -1,9 +1,3 @@
-<!--
-  Generated template for the FriendsPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
 
   <ion-navbar>
@@ -20,4 +14,30 @@
 
 <ion-content padding>
 
+  <ion-searchbar></ion-searchbar>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-thumbnail item-start>
+          <img src="img/thumbnail-totoro.png">
+        </ion-thumbnail>
+        <h2>SpiderMango</h2>
+        <p>Nafear</p>
+        <button ion-button clear item-end>View</button>
+      </ion-item>
+
+      <ion-item-options side="left">
+        <button ion-button color="primary" (click)="viewFriendDetails()">
+          <ion-icon></ion-icon> View
+        </button>
+      </ion-item-options>
+
+      <ion-item-options side="right">
+        <button ion-button color="secondary" (click)="addToFriendList()">
+          <ion-icon></ion-icon> Add
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+
 </ion-content>

MyPassionProjectClient/src/pages/friends/friends.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
 
 /**
  * Generated class for the FriendsPage page.
@@ -15,11 +15,19 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
 })
 export class FriendsPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {
   }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad FriendsPage');
+  addToFriendList() {
+    let toast = this.toastCtrl.create({
+      message: 'Friend Request Sent!',
+      duration: 3000,
+      position: 'bottom'
+    });
+    toast.present();
+
   }
 
+  viewFriendDetails() {}
+
 }

MyPassionProjectClient/src/pages/games/games.html

@@ -1,9 +1,3 @@
-<!--
-  Generated template for the GamesPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
   <ion-navbar>
     <ion-buttons start>
@@ -17,8 +11,9 @@
 
 
 <ion-content padding>
-  <ion-list>
 
+  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
+  <ion-list>
     <ion-item-sliding>
       <ion-item>
       <ion-thumbnail item-start>
@@ -29,6 +24,11 @@
       <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()">
@@ -39,6 +39,5 @@
         </button>
       </ion-item-options>
     </ion-item-sliding>
-
   </ion-list>
 </ion-content>

MyPassionProjectClient/src/pages/games/games.ts

@@ -14,13 +14,16 @@ import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angula
   templateUrl: 'games.html',
 })
 export class GamesPage {
+  searchQuery: string = '';
+  items: string[];
 
   constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController,) {
+    this.initializeItems();
   }
 
   doAddToOwnedList() {
       let toast = this.toastCtrl.create({
-        message: 'Game Added To Owned List',
+        message: 'Game Added To MyGames',
         duration: 3000,
         position: 'bottom'
       });
@@ -30,7 +33,7 @@ export class GamesPage {
 
   doAddToPlayedList() {
     let toast = this.toastCtrl.create({
-      message: 'Game Added To Played List',
+      message: 'Game Added To PlayedGames',
       duration: 3000,
       position: 'bottom'
     });
@@ -38,4 +41,38 @@ export class GamesPage {
 
   }
 
+  doAddToOwnedAndPlayedList() {
+    let toast = this.toastCtrl.create({
+      message: 'Game Added To MyPlayedGames',
+      duration: 3000,
+      position: 'bottom'
+    });
+    toast.present();
+
+  }
+
+  initializeItems() {
+    this.items = [
+      'Agricola',
+      'Catan',
+      'Magic'
+    ];
+  }
+
+  getItems(ev: any) {
+    // Reset items back to all of the items
+    this.initializeItems();
+
+    // 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.items = this.items.filter((item) => {
+        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
+      })
+    }
+  }
+
+
 }

MyPassionProjectClient/src/pages/profile/profile.html

@@ -19,5 +19,58 @@
 
 
 <ion-content padding>
+  <ion-card>
 
+    <ion-card-header>
+      <strong>My Profile</strong>
+    </ion-card-header>
+
+    <img src="img/nin-live.png"/>
+
+    <ion-card-content>
+      <ion-card-title>
+        Xomi
+      </ion-card-title>
+      <p>
+        Always up for a good strategy game! Currently obsessed with Dominion.
+      </p>
+    </ion-card-content>
+
+  </ion-card>
+
+  <ion-card>
+
+    <ion-card-header>
+      <strong>My Games</strong>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-card-title>
+        Descent
+      </ion-card-title>
+      <p>
+        Cooperative, Character-Building
+      </p>
+
+      <ion-card-title>
+        Dominion
+      </ion-card-title>
+      <p>
+        Deck-Builder, Strategy
+      </p>
+
+      <ion-card-title>
+        SushiGo
+      </ion-card-title>
+      <p>
+        Pass the Trash, New-Player Friendly
+      </p>
+    </ion-card-content>
+
+  </ion-card>
 </ion-content>
+
+
+
+
+