added popover

.idea/workspace.xml

@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="e7490434-64fb-4385-9a0e-a04ccfae4c30" name="Default" comment="">
-      <change beforePath="$PROJECT_DIR$/MyPassionProjectClient/src/pages/friends/friends.html" beforeDir="false" afterPath="$PROJECT_DIR$/MyPassionProjectClient/src/pages/friends/friends.html" afterDir="false" />
-    </list>
+    <list default="true" id="e7490434-64fb-4385-9a0e-a04ccfae4c30" name="Default" comment="" />
     <ignored path="$PROJECT_DIR$/target/" />
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -330,12 +328,12 @@
       <workItem from="1532732570325" duration="2999000" />
       <workItem from="1533223998681" duration="8083000" />
       <workItem from="1533245929577" duration="1617000" />
-      <workItem from="1533318241838" duration="4083000" />
+      <workItem from="1533318241838" duration="4125000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="16782000" />
+    <option name="totallyTimeSpent" value="16824000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="0" width="1280" height="800" extended-state="0" />

MyPassionProjectClient/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { ErrorHandler, NgModule } from '@angular/core';
-import { IonicApp, IonicErrorHandler, IonicModule, IonicPage, Menu } from 'ionic-angular';
+import { IonicApp, IonicErrorHandler, IonicModule, IonicPage, Menu, Popover } from 'ionic-angular';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';
 import { MyApp } from './app.component';
@@ -14,6 +14,7 @@ import { Camera } from '../../node_modules/@ionic-native/camera';
 import { FilePath } from '../../node_modules/@ionic-native/file-path';
 import {File} from '../../node_modules/@ionic-native/file';
 import { MenuPage } from '../pages/menu/menu';
+import { PopoverComponent } from '../components/popover/popover';
 
 
 @NgModule({
@@ -21,7 +22,8 @@ import { MenuPage } from '../pages/menu/menu';
     MyApp,
     ProfileModalPage,
     PictureModalPage,
-    MenuPage
+    MenuPage,
+    PopoverComponent,
   ],
   imports: [
     BrowserModule,
@@ -33,7 +35,8 @@ import { MenuPage } from '../pages/menu/menu';
     MyApp,
     ProfileModalPage,
     PictureModalPage,
-    MenuPage
+    MenuPage,
+    PopoverComponent,
    ],
   providers: [
     StatusBar,

MyPassionProjectClient/src/components/popover/popover.html

@@ -0,0 +1,12 @@
+<h2>
+  <strong>{{game.name}}</strong>
+</h2>
+<img src={{game.thumbnail}}/>
+<h6>
+  <strong>Rating: </strong>{{game.averageRating}}<br/>
+  <strong>Players: </strong>{{game.minPlayers}}-{{game.maxPlayers}}<br/>
+  <strong>Mechanics: </strong> {{game.mechanics}}<br/>
+</h6>
+<p>
+{{game.description}}
+</p>

MyPassionProjectClient/src/components/popover/popover.scss

@@ -0,0 +1,3 @@
+popover {
+
+}

MyPassionProjectClient/src/components/popover/popover.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import {NavParams} from 'ionic-angular';
+
+/**
+ * Generated class for the PopoverComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'popover',
+  templateUrl: 'popover.html'
+})
+export class PopoverComponent {
+  game:any;
+
+  constructor(public navParams: NavParams) {
+    console.log(this.navParams.data);
+    this.game = navParams.data;
+  }
+
+}

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

@@ -21,7 +21,7 @@
       </ion-thumbnail>
       <h2>{{game.name}}</h2>
       <p>{{game.mechanics}}</p>
-      <button ion-button clear item-end>View</button>
+      <button ion-button clear item-end (click)="presentPopover(game)">View</button>
         </ion-item>
 
 

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

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
-import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
+import {IonicPage, NavController, NavParams, ToastController, PopoverController} from 'ionic-angular';
 import { BggGameSearch } from '../../providers/bggGames-service';
 import { UsersService } from '../../providers/users-service';
 import { GamesService } from '../../providers/games-service';
 import { SettingsPageModule } from '../settings/settings.module';
+import { PopoverComponent } from '../../components/popover/popover';
  
 @IonicPage()
 @Component({
@@ -23,7 +24,10 @@ export class GameSearchPage {
     searchResult: any;
     searchTerm: '';
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public bggGames: BggGameSearch, public usersService: UsersService, public gamesService: GamesService) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, 
+      public toastCtrl: ToastController, public bggGames: BggGameSearch, 
+      public usersService: UsersService, public gamesService: GamesService, 
+      public popoverCtrl: PopoverController) {
   }
   
   ionViewDidLoad() {
@@ -81,4 +85,10 @@ export class GameSearchPage {
       toast.present();
 
     }
+
+    presentPopover(game) {
+      const popover = this.popoverCtrl.create(PopoverComponent,game);
+      console.log(game);
+      popover.present();
+    }
 }

MyPassionProjectClient/src/pages/my-games/my-games.html

@@ -21,7 +21,7 @@
         </ion-thumbnail>
         <h2>{{game.name}}</h2>
         <p>{{game.mechanics}}</p>
-        <button ion-button clear item-end>View</button>
+        <button ion-button clear item-end (click)="presentPopover(game)">View</button>
           </ion-item>
   
         <ion-item-options side="right">

MyPassionProjectClient/src/pages/my-games/my-games.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
+import {IonicPage, NavController, NavParams, ToastController, PopoverController} from 'ionic-angular';
 import { UsersService } from '../../providers/users-service';
+import { PopoverComponent } from '../../components/popover/popover';
  
 @IonicPage()
 @Component({
@@ -12,7 +13,7 @@ export class MyGamesPage {
     filteredGames: any;
     userId: any;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public usersService: UsersService) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public usersService: UsersService, public popoverCtrl:PopoverController) {
     console.log(navParams.get('id'));
     this.userId = navParams.get('id');
   }
@@ -50,4 +51,10 @@ export class MyGamesPage {
     });
     toast.present();
   }
+
+  presentPopover(game) {
+    const popover = this.popoverCtrl.create(PopoverComponent,game);
+    console.log(game);
+    popover.present();
+  }
 }