Web UI improvements and updates

[glennvgastel]

Short Description:

Updates to pokemon bag display on the map

Fixes:

• Added CP and IV to caught pokemon on map
• Improved layout for pokemon bag display on map

[jadbalout]

Nice work, though all those ??? on the eggs makes it look bad. Maybe work out a way to remove the display of those field for eggs?

[glennvgastel]

Good idea. I'm also looking into a way to sort the pokemon by name or CP level, will add that soon.

[jadbalout]

How about both? ;) Add sorting options mate.

[glennvgastel]

Sorting is coming up.

[elicwhite]

Screenshots for UI changes are helpful

[Tiokun]

sorting would be really nice :) im running this code atm

https://gyazo.com/d98b895f14baba667679985aff3548a4

[glennvgastel]

Sorting has been added and the eggs in your bag are now displayed below your pokemon as "You have x eggs".

[RedSparr0w]

Nice work, one more thing though.

Line 366 - 375 Change to

 if (menu == 2) {
    document.getElementById('subtitle').innerHTML = "Items in Bag";
    out = '<div class="row items"><div class="col s12"><h5>' + users[0] + '</h5><table>';
    for (var i = 0; i < bagItems.length; i++) {
      out += '<tr><td><img src="image/items/' + bagItems[i].inventory_item_data.item.item_id + '.png" class="item_img"></td><td>Item: ' + itemsArray[bagItems[i].inventory_item_data.item.item_id] +
      '<br>Count: ' + (bagItems[i].inventory_item_data.item.count || 0) + '</td></tr>';
    }
    out += '</table></div></div>';
    document.getElementById('subcontent').innerHTML = out;
  }

[glennvgastel]

@RedSparr0w Added.

[glennvgastel]

Improved responsiveness, items in bag layout and restyled the menu options

[glennvgastel]

I'm going to rebase and create a new PR, this is starting to become a mess :D

[RedSparr0w]

Coming along nicely.

One more thing if you think it would work/have the time.

Could you add a little pokeball icon next to each pokemon in your bag showing which pokeball it was caught with?

snippets of code:

pkmPokeball = obj[i].inventory_item_data.pokemon_data.pokeball || 0;

<img src="/image/items/' + pkmPokeball + '.png" class="pokeball">

.pokeball {
    width: 30px;
    height: auto;
}

if it is a starter pokemon it will show: (0.png)

not sure about eggs though as haven't hatched one yet.

edit: looks like web has moved

[glennvgastel]

@RedSparr0w I've merged my sorting code with the design Sniok created in the new repository.
You can see the PR here : tehp/OpenPoGoWeb#17 along with a screenshot.

I'll add the pokeball tomorrow.