PoGO Collection Tracker

Sept 23 19, added gen 5 etc.

by yairamon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript">
  (function($) {
    $(function() {
      $("#accordion > div").accordion({
        header: "h3",
        collapsible: true
      });
    })
  })(jQuery);

</script>


 <input type="button"  title="show top" class="flipButton" id="btnShowTop" style="position:absolute;top:18px;left:18px;display:none;" value="&#9658"></input>

<div id="topPanel">
<center>
 <h1 style="font-family:arial;">
 <input type="button"  title="maximize display area" class="flipButton" id="btnHideTop"  value="&#9660"></input>

  Pokemon Collection Tracker</h1>
</center>

<div id="accordion">
  <div id="about">
    <h3><a href="#">About</a></h3>
    <div>
      This is a simple tool to help track and visualize progress on Pokemon GO collections for objectives such as overall completion, or maintaining a "living dex", or collecting Level 1.0s, or Level 40.0s, or shinies, or 100% IV perfects, or 0%s, etc.
      <p>
 Click on Pokemon to mark them as "collected" (with a green background), "excluded" from collection goals (with a gray background; these automatically include unreleased Pokemon), or back to "uncollected" (with a white background).
      <p>
These settings can also be quickly edited using tools under "Collection Settings"
      <p>
      </p>
      Your collection data will be saved locally on your browser so it's easy to revisit and update, and you can also use the Import or Export Additional Tools to, for example, create backups or to copy/paste across to or from other browsers or spreadsheets.
     <p>
        By default every Gen 1 to Gen 4 Pokemon, collected (green), excluded (gray) or uncollected (white) will be shown, but any of these can be hidden with...

CSS

html,
body {
  width: 100%;
  height: 100%;
}

form {
  margin: 20px 0;
}

form input,
button {
  padding: 1px;
}

table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #cdcdcd;
}

table th,
table td {
  padding: 10px;
  text-align: left;
}

#scroller {
  border: 1px solid gray;
  height: 60%;
  width: 96%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollerMax {
  position: relative;
  top: 55px; 
  border: 1px solid gray;
  height: 90%;
  width: 96%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


.gridSmall {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 27px);
}

.gridLarge {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 80px);
}

/*
a {
  background: green;
  color: #eee;
  padding: 5px 10px;
}
*/

.button {
  background-color: SlateGray;
  border: none;
  color: white;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;;
  margin: 1px 1px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 12px;
}


.flipButton {
  position: relative;
  top: -10px; 
  
  background-color: lightgray;
  border: none;
  color: SlateGray;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 1px 1px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 12px;
}

JavaScript

function getImagePath(i, pokeName)
{
			// previously used images for gen 1 to gen 4
     imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + i + ".png";
    
    	// awful hack for meltan and melmetal...
      if (pokeName == "Meltan") imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + 494 + ".png";
      if (pokeName == "Melmetal") imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + 495 + ".png";
      
     
     //  switching to pokemon DB for new gen 5.. and maybe gen 2-3
     if (i>=251 && pokeName != "Meltan" && pokeName != "Melmetal")
     {
	     	dbName = pokeName.toLowerCase();
      
      	if (i == 439) dbName = "mime-jr";
        
    //    imagePath =  "https://img.pokemondb.net/sprites/x-y/normal/" +  dbName + ".png";
     		imagePath = "https://pogo.host/A/sync/ImageXY/" +  dbName + ".png";
     }
     
     return imagePath;

/*
    imagePath = "https://pogo.host/A/resources/imageSet0/" + i + ".png";
    imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + i + ".png";
	

       imagePath = "https://pldh.net/media/pokemon/ken_sugimori/update1/" + i + ".png";

    prefix = i + "_00";
    if (i < 10) prefix = "00" + i + "_00";
    else if (i < 100) prefix = "0" + i + "_00";

   prefix = i;
    if (i < 10) prefix = "00" + i;
    else if (i < 100) prefix = "0" + i;

       imagePath = "https://pldh.net/media/pokemon/ken_sugimori/update1/" + prefix + ".png";  

    imagePath = "https://pogo.host/A/resources/imageSet2/" + prefix + ".png";
    */
/*
   if (i > 386) 
	  imagePath = "https://raw.githubusercontent.com/ZeChrales/PogoAssets/master/pokemon_icons/pokemon_icon_"  + prefix + ".png";
  */

}


// includes for jQuery and jQuery UI
// includes for dom-to-image, html2canvas and FileSaver for the downloads

// ui tweakscat .
// setup the accordion
function collapseAccordions() {
  try {
    $("#about").accordion('option', 'active', 1);
    $("#relevants").accordion('option', 'active', 1);
    $("#settings").accordion('option', 'active', 1);
   ...