Refactor POIs so that Mobs can be displayed #131
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,9 +2,10 @@ import { Component, ViewChild } from '@angular/core'; | |
| import { Events } from 'ionic-angular'; | ||
| import { Geolocation } from 'ionic-native'; | ||
|
|
||
| import { Sighting } from '../../models/sighting'; | ||
| import { Prediction } from '../../models/prediction'; | ||
| import { Mob, MobTweet } from '../../models/mob'; | ||
| import { POI } from '../../models/poi'; | ||
| import { Filter } from '../../models/filter'; | ||
|
|
||
| let PokeMap = require('pokemap-1'); | ||
|
|
@@ -46,9 +47,9 @@ export class MapComponent { | |
| //this.map.filter(filter); | ||
| } | ||
|
|
||
| private onClick(poi) { | ||
| console.debug('map:click', poi); | ||
| this.events.publish('map:click', poiFromMapEventData(poi)); | ||
| } | ||
|
|
||
| private onMove(position) { | ||
|
|
@@ -67,15 +68,35 @@ export class MapComponent { | |
| this.map.navigate(start, destination); | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| function poiFromMapEventData(rawData: any) : POI { | ||
| if ('source' in rawData) { | ||
| const sighting = new Sighting(); | ||
| sighting.latitude = rawData.location.coordinates[1]; | ||
| sighting.longitude = rawData.location.coordinates[0]; | ||
| sighting.pokemonId = rawData.pokemonId; | ||
| sighting.source = rawData.source; | ||
| sighting.appearedOn = rawData.appearedOn; | ||
| return sighting; | ||
| } else if ('clusterId' in rawData) { | ||
| const mob = new Mob(); | ||
| mob.clusterId = rawData.clusterId; | ||
| mob.timestamp = rawData.timestamp; | ||
| mob.latitude = rawData.coordinates[1]; | ||
| mob.longitude = rawData.coordinates[0]; | ||
| mob.tweets = rawData.tweets.map(t => { | ||
| return <MobTweet>{ | ||
| id: t.id, | ||
| text: t.text, | ||
| latitude: t.coordinates[1], | ||
| longitude: t.coordinates[0], | ||
| timestamp: t.timestamp | ||
| } | ||
| }) | ||
| return mob; | ||
|
There was a problem hiding this comment. What's the reason for returning an empty mob object here? There was a problem hiding this comment. Does the map already produce mobs? If so, what's the exact format of the event data? There was a problem hiding this comment. I'm not sure if they already do. But the data should look like this PokemonGoers/PokeMap-2#32 (comment) which is exactly what our There was a problem hiding this comment. Well I just realized that you've removed the There was a problem hiding this comment. I removed it from the model itself because it doesn't really belong in there. |
||
| } else { | ||
| throw new Error('POI cannot be identified as ' + | ||
| 'Sighting or Mob:\n' + JSON.stringify(rawData)); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <div class="circle" #circle> | ||
| <div class="circle-inner"></div> | ||
| <img [src]="pokemon.svgIcon"> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,6 @@ | |
| display: flex; | ||
| border-radius: 50%; | ||
| border: 1px solid #cacaca; | ||
| padding: 10px; | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,59 @@ | ||
| <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> | ||
|
|
||
| <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> | ||
|
|
||
| <!-- Mobs --> | ||
| <div *ngIf="poi?.type == 'mob'"> | ||
| <section class="side-section" id="mob-side-section"> | ||
| <img src="img/pokemon-mob.svg" alt="Pokemon Logo"> | ||
| </section> | ||
|
|
||
| <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> | ||
|
|
||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,90 @@ | ||
| #slide-card { | ||
| background: white; | ||
| position: absolute; right: 0; bottom: 0; left: 0; | ||
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); | ||
| z-index: 99999; | ||
|
|
||
| > 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; | ||
| } | ||
|
|
||
| > .main-section { | ||
| flex: 1 0 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| .title { font-size: 2em; font-weight: 300; } | ||
|
|
||
| > .description { | ||
| flex: 1 0 0; | ||
| color: #525252; | ||
| } | ||
|
|
||
| > .buttons { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
|
|
||
| > button { | ||
| color: #123784; | ||
| padding: 4px 10px; | ||
| margin: 0px 2px; | ||
|
|
||
| ion-icon { font-size: 26px; } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > .line { | ||
| position: absolute; right: 0; top: 0; left: 0; | ||
| height: 5px; | ||
| } | ||
|
|
||
| > .line-badge { | ||
| position: absolute; right: 0; top: 0; | ||
| padding: 3px 4px 2px 6px; | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| color: white; | ||
| } | ||
|
|
||
| /* Sightings only */ | ||
| > #sighting-side-section { | ||
| > poke-poi-bubble { width: 100px; height: 100px; margin-bottom: 10px; } | ||
| > div { text-align: center; } | ||
| } | ||
| > #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; } | ||
|
|
||
| /* Mobs only */ | ||
| > #mob-side-section { | ||
| justify-content: center; | ||
|
|
||
| > img { | ||
| width: 100px; | ||
| display: block; | ||
| } | ||
| } | ||
| > #mob-line, > #mob-line-badge { background: #ca1010; } | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no reason to use the function keyword
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is that TypeScript feature?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, and we are using it all over the place I think 😆 http://www.typescriptlang.org/docs/handbook/classes.html
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Compile error. Am I doing something wrong?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you paste the error?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TypeScript docu uses the keyword as well https://www.typescriptlang.org/docs/handbook/functions.html
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The class ends before the function definition, I didn't realiize this on github.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, exactly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@johartl Should I make this a static method or a utility function? What do you prefer? I and @WoH need another opinion
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer the static method