Refactor POIs so that Mobs can be displayed

ionic2/app/components/map/map.component.ts

@@ -2,10 +2,8 @@ import { Component, ViewChild } from '@angular/core';
 import { Events } from 'ionic-angular';
 import { Geolocation } from 'ionic-native';
 
-import { PokeSighting } from '../../models/poke-sighting';
-import { PokePrediction } from '../../models/poke-prediction';
-import { PokeMob } from '../../models/poke-mob';
 import { Filter } from '../../models/filter';
+import { poiFromMapEventData } from '../../utils/poi-from-map-event-data'
 
 let PokeMap = require('pokemap-1');
 
@@ -46,9 +44,9 @@ export class MapComponent {
     //this.map.filter(filter);
   }
 
-  private onClick(pokePOI) {
-    console.debug('map:click', pokePOI);
-    this.events.publish('map:click', MapComponent.mapPokePOI(pokePOI));
+  private onClick(poi) {
+    console.debug('map:click', poi);
+    this.events.publish('map:click', poiFromMapEventData(poi));
   }
 
   private onMove(position) {
@@ -67,15 +65,4 @@ export class MapComponent {
       this.map.navigate(start, destination);
     })
   }
-
-  private static mapPokePOI(pokePOI: Object): (PokeSighting | PokePrediction | PokeMob) {
-    if ('source' in pokePOI) {
-      return PokeSighting.fromObject(pokePOI);
-    } else if ('clusterId' in pokePOI) {
-      return PokeMob.fromObject(pokePOI);
-    } else {
-      throw new Error('PokePOI cannot be identified as PokeSighting or PokeMob:\n' + JSON.stringify(pokePOI));
-    }
-  }
-
 }

ionic2/app/components/poi-bubble/poi-bubble.component.html

@@ -1,4 +1,4 @@
 <div class="circle" #circle>
   <div class="circle-inner"></div>
-  <img [src]="pokePOI.pokemon.svgIcon">
+  <img [src]="pokemon.svgIcon">
 </div>

ionic2/app/components/poi-bubble/poi-bubble.component.scss

@@ -8,7 +8,6 @@
     display: flex;
     border-radius: 50%;
     border: 1px solid #cacaca;
-    box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
     padding: 10px;
   }
 

ionic2/app/components/poi-bubble/poi-bubble.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
 
-import { PokeSighting } from '../../models/poke-sighting';
+import { Pokemon } from '../../models/pokemon';
 
 @Component({
   selector: 'poke-poi-bubble',
@@ -10,7 +10,8 @@ import { PokeSighting } from '../../models/poke-sighting';
 })
 export class POIBubbleComponent implements OnInit {
 
-  @Input() pokePOI: PokeSighting;
+  @Input() pokemon: Pokemon;
+  @Input() appearedOn: number;
   @ViewChild('circle') circle: ElementRef;
 
   arcHighlightColor = '#FFF75A';
@@ -19,7 +20,7 @@ export class POIBubbleComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
-    let appearedOn = (new Date(this.pokePOI.appearedOn)).getTime() / 1000;
+    let appearedOn = (new Date(this.appearedOn)).getTime() / 1000;
     let now = Date.now() / 1000;
     let diff = Math.max(Math.log((now -appearedOn) / 1000), 1);
     let max = Math.log(30 * 86400 / 1000);

ionic2/app/components/poi-card/poi-card.component.html

@@ -1,46 +1,59 @@
-<div class="slide-card" #slideCard @slide="slideState">
-  <div class="poke-poi-card-content" *ngIf="pokePOI" [ngClass]="'poi-type-'+pokePOI.getType()">
-    <ion-row>
+<div id="slide-card" #slideCard @slide="slideState">
+  <!-- Sightings -->
+  <div *ngIf="poi?.type == 'sighting' && pokemon">
+    <section class="side-section" id="sighting-side-section">
+      <poke-poi-bubble [pokemon]="pokemon"
+                       [appearedOn]="poi.appearedOn"></poke-poi-bubble>
+      <div>
+        <poke-type [type]="type" *ngFor="let type of pokemon.types">
+        </poke-type>
+      </div>
+    </section>
 
-      <ion-col class="poke-column">
-        <ion-row>
-          <poke-poi-bubble [pokePOI]="pokePOI"></poke-poi-bubble>
-        </ion-row>
-        <ion-row>
-          <poke-type [type]="type" *ngFor="let type of pokePOI.pokemon.types">
-          </poke-type>
-        </ion-row>
-      </ion-col>
-
-      <ion-col style="flex-grow: 1;">
-        <ion-row>
-          <span class="poke-name">{{ pokePOI.pokemon.name }}</span>
-          <poke-rarity-badge [rarity]="pokePOI.pokemon.appearanceLikelihood">
-          </poke-rarity-badge>
-        </ion-row>
-        <ion-row class="poke-description">
-          {{ pokePOI.pokemon.description }}
-        </ion-row>
+    <section class="main-section" id="sighting-main-section">
+      <div class="name-and-rarity">
+        <span class="title">{{ pokemon.name }}</span>
+        <poke-rarity-badge [rarity]="pokemon.appearanceLikelihood">
+        </poke-rarity-badge>
+      </div>
+      <div class="description">{{ pokemon.description }}</div>
+      <div class="buttons">
+        <button clear (click)="showDirections()">
+          <ion-icon name="navigate"></ion-icon> Directions
+        </button>
+        <button clear (click)="launchPokeDex()">
+          <ion-icon name="book"></ion-icon> PokeDex
+        </button>
+      </div>
+    </section>
 
+    <div class="line" id="sighting-line"></div>
+    <div class="line-badge" id="sighting-line-badge">Pokemon Sighting</div>
+  </div>
 
-        <ion-row class="action-button-bar">
-          <button clear (click)="showDirections()">
-            <ion-icon name="navigate"></ion-icon>
-            Directions
-          </button>
+  <!-- Mobs -->
+  <div *ngIf="poi?.type == 'mob'">
+    <section class="side-section" id="mob-side-section">
+      <img src="img/pokemon-mob.svg" alt="Pokemon Logo">
+    </section>
 
-          <button clear (click)="launchPokeDex()">
-            <ion-icon name="book"></ion-icon>
-            PokeDex
-          </button>
-        </ion-row>
-      </ion-col>
-    </ion-row>
+    <section class="main-section" id="mob-main-section">
+      <div class="title">PokeMob</div>
+      <div class="description">
+        A lot of players seem to gather at this location!<br><br>
+        Based on {{ poi.tweets.length }} tweets.
+      </div>
+      <div class="buttons">
+        <button clear (click)="showDirections()">
+          <ion-icon name="navigate"></ion-icon> Directions
+        </button>
+      </div>
+    </section>
 
-    <div class="poke-poi-type-line"></div>
-    <div class="poke-poi-type-badge">
-      {{ getPOITypeBadgeLabel() }}
-    </div>
+    <section class="buttons-section" id="mob-buttons-section">
+    </section>
 
+    <div class="line" id="mob-line"></div>
+    <div class="line-badge" id="mob-line-badge">PokeMob</div>
   </div>
 </div>

ionic2/app/components/poi-card/poi-card.component.scss

@@ -1,114 +1,90 @@
-:host .slide-card {
-  min-height: 100px;
-  width: 100%;
+#slide-card {
   background: white;
-  position: absolute;
-  display: inline-block;
-  bottom: 0;
-  box-shadow: 0px -2px 3px 0 rgba(0,0,0,0.5);
+  position: absolute; right: 0; bottom: 0; left: 0;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
   z-index: 99999;
 
-  .poke-poi-card-content {
-    padding-top: 12px;
-
-    .poke-picture {
-      flex-grow: 1;
-    }
-
-    .poke-name {
-      font-size: 28px;
+  > div {
+    margin: 0 auto;
+    max-width: 700px;
+    height: 170px;
+    padding: 10px;
+    display: flex;
+
+    /* General */
+    > .side-section {
+      width: 120px;
+      margin-right: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
     }
 
-    poke-rarity-badge {
-      margin-left: 10px;
-      align-self: center;
-    }
+    > .main-section {
+      flex: 1 0 0;
+      display: flex;
+      flex-direction: column;
 
-    .poke-description {
-      font-size: 12px;
-      color: #525252;
-      padding: 2px 0;
-    }
+      .title { font-size: 2em; font-weight: 300; }
 
-    .poke-column {
-      flex-grow: 0;
-      flex-basis: 120px;
-
-      ion-row {
-        justify-content: center;
+      > .description {
+        flex: 1 0 0;
+        color: #525252;
       }
 
-      poke-poi-bubble {
-        width: 100px;
-        height: 100px;
-      }
+      > .buttons {
+        display: flex;
+        justify-content: flex-end;
 
-      poke-type {
-        margin: 16px 0 6px 0;
+        > button {
+          color: #123784;
+          padding: 4px 10px;
+          margin: 0px 2px;
 
-        ion-badge {
-          font-size: 10px;
-          padding: 2px 5px;
+          ion-icon { font-size: 26px; }
         }
       }
     }
 
-    .action-button-bar {
-      justify-content: flex-end;
-      margin-top: 8px;
-
-      button {
-        color: #123784;
-        padding: 4px 10px;
-        margin: 0px 2px;
-
-        ion-icon {
-          font-size: 26px;
-        }
-      }
-    }
-
-    .poke-poi-type-line {
-      position: absolute;
-      top:0;
-      right: 0;
+    > .line {
+      position: absolute; right: 0; top: 0; left: 0;
       height: 5px;
-      background: yellow;
-      display: inline-block;
-      width: 110%;
-      box-shadow: 4px 3px 4px -3px rgba(0, 0, 0, 0.75);
     }
 
-    .poke-poi-type-badge {
-      position: absolute;
-      display: inline-block;
-      top: 0;
-      right: 0;
+    > .line-badge {
+      position: absolute; right: 0; top: 0;
       padding: 3px 4px 2px 6px;
       font-size: 12px;
       font-weight: bold;
       color: white;
     }
 
-    &.poi-type-sighting {
-      .poke-poi-type-badge,
-      .poke-poi-type-line {
-        background: #123784;
-      }
+    /* Sightings only */
+    > #sighting-side-section {
+      > poke-poi-bubble { width: 100px; height: 100px; margin-bottom: 10px; }
+      > div { text-align: center; }
     }
-
-    &.poi-type-prediction {
-      .poke-poi-type-badge,
-      .poke-poi-type-line {
-        background: #149062;
+    > #sighting-main-section {
+      poke-rarity-badge {
+        margin-left: 10px;
+        vertical-align: 35%;
       }
     }
+    > #sighting-line, > #sighting-line-badge { background: #149062; }
+
+
+    /* Predictions only */
+    > #prediction-line, > #prediction-line-badge { background: #123784; }
 
-    &.poi-type-mob {
-      .poke-poi-type-badge,
-      .poke-poi-type-line {
-        background: #ca1010;
+    /* Mobs only */
+    > #mob-side-section {
+      justify-content: center;
+
+      > img {
+        width: 100px;
+        display: block;
       }
     }
+    > #mob-line, > #mob-line-badge { background: #ca1010; }
   }
 }