<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Gothic 2 Gold Pickpocket List</title>
  <script data-require="underscore.js@*" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
  <script data-require="angular.js@*" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  <script src="app.js"></script>
  <script src="defaultController.js"></script>

  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />


</head>

<body>
  <div>
    <div ng-controller="defaultController">
      <div>
        <table class="table table-nonfluid center">
          <tbody>
            <tr>
              <td>Minimum Dexterity</td>
              <td>
                <input type="number" ng-model="min" />
              </td>
            </tr>
            <tr>
              <td>Maximum Dexterity</td>
              <td>
                <input type="number" ng-model="max" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <hr />

      <table ng-table class="table table-striped table-bordered">
        <tr>
          <th>Name</th>
          <th>Location</th>
          <th>Required Dexterity</th>
          <th>Loot</th>
        </tr>
        <tr ng-repeat="person in renderedData">
          <td>{{person.name}}</td>
          <td>{{person.location}}</td>
          <td>{{person.dexterity}}</td>
          <td>{{person.loot}}</td>
        </tr>
      </table>

    </div>
  </div>
</body>

</html>
.table-nonfluid {
   width: auto;
}

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

.table td,th {
   text-align: center;   
}
'use strict';

var processData = function(data){
    window.data = data
};

var app = angular.module('app', []);


app.controller('defaultController',
  function defaultController($scope, $http) {

    var url = "https://spreadsheets.google.com/feeds/list/0AlrYtJiMIxsMdHhvdnhYQy1fZVU3MVBDLU9laDVqUmc/1/public/values?alt=json-in-script&callback=JSON_CALLBACK";

    $http.jsonp(url).success(function(data) {
      $scope.data = _.map(data.feed.entry, function(item) {
        return {
          name: item["gsx$name"]["$t"],
          location: item["gsx$location"]["$t"],
          dexterity: parseInt(item["gsx$dexterity"]["$t"]),
          loot: item["gsx$loot"]["$t"]
        }
      });

      $scope.renderedData = $scope.data;
      $scope.min = 0;
      $scope.max = 20;

      var updateValues = function() {
        $scope.renderedData = _.filter($scope.data, function(item) {
          return item.dexterity >= $scope.min && item.dexterity <= $scope.max;
        })
      };

      $scope.$watch('min', function() {
        updateValues();
      })

      $scope.$watch('max', function() {
        updateValues();
      })

    });


  });