Developer Key Test

developer key test - Austin

by Austin Anderson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>
<div ng-controller="myCtrl">
<div class="stats">
<span>
<i class="fa fa-check" aria-hidden="true">  </i>Valid Keys: <strong>{{keyRate.success}}</strong>
</span>
<span>
  <i class="fa fa-times" aria-hidden="true">  </i>Invalid Keys: <strong>{{keyRate.fail}}</strong>
</span>
</div>
<hr />
<strong>Enter Keys to test if they work (1 per line)</strong>
<div>
Copy/Paste examples from here: <a href="http://pastebin.com/raw/VHSJ4fBw" target="_blank">PasteBin examples (new tab)</a>
</div>

<div id="results" ng-show="keyRate.success || keyRate.fail">

</div>
<br />
<textarea id="textAreaID">
  
</textarea>
<button class="btn btn-sm btn-success" ng-click="summonerLookUp()" ng-disabled="isRunning">Run Tests</button>
<button class="pause btn btn-lg btn-warning" ng-click="pause()"><span ng-show="isPaused">Un-</span>Pause</button>
</div>

CSS

textarea {
    height:100px;
    width:100%;
}

.key {
  display:inline-block;
}
.container {
  display: block;
}

.fa {
  padding-right: 5px;
}
.fa-check {
  color: green;
}
.fa-times {
  color: red;
}
.stats {
  font-size: 18px;
}

.stats span:nth-of-type(2) {
  padding-left: 15px;
}
.pause {
  position:absolute;
  top: 0;
  right: 0;
}

#results {
    max-height: 200px;
    over-flow: auto;
    overflow: auto;
    background: lightgray;
    border: solid 1px;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

JavaScript

angular.module('myApp', ['ngResource'])
.controller('myCtrl', function ($scope, $http) {
    var matchIds = [];
    $scope.keyRate = {
    success: 0,
    fail: 0
    };
    
    $('#textAreaID').val('');
    
    $scope.pause = function() {
      $scope.isPaused = !$scope.isPaused;
      get_next();
    }
    
    $scope.summonerLookUp = function() {
    matchIds = $('#textAreaID').val().split(/\n/);
      $scope.isRunning = true;
      get_next();
    }
    
    var i = 0;
    
    function get_next() {
    if ($scope.isPaused) {
      return;
    }
    
    
      if (!matchIds[i] || matchIds[i] === '') {
        $scope.isRunning = false;
        return;
      }

      var val = matchIds[i];

      $http({
        url: 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/22421317?api_key=' +
          val,
        method: "GET",
        data: [],
      }).success(function(data, status, request) {        
        var e = $('<div class="container"><div class="key"><i class="fa fa-check" aria-hidden="true">  </i>'+val+'</div></div>');
        $('#results').append(e);    
				$scope.keyRate.success++;
        i++;
        $('#results').scrollTop($('#results')[0].scrollHeight);
        setTimeout(function() { get_next(); }, 100);
      })
      .error(function() {       
        var e = $('<div class="container"><div class="key"><i class="fa fa-times" aria-hidden="true">  </i>'+val+'</div></div>');
        $('#results').append(e);
        $scope.keyRate.fail++;
        i++;
        $('#results').scrollTop($('#results')[0].scrollHeight);
        setTimeout(function() { get_next(); }, 100);
      });
    }

});