<!DOCTYPE html>
<html>
<head>
<title>F-1 Feeder</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
</head>
<body ng-app="F1FeederApp" ng-controller="driversController">
<header class="plain-header">
<div class="container">
<nav>
<ul class="nav navbar-nav navbar-left" id="home_link">
<li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
<li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
<li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<ng-view></ng-view>
</div>
<footer class="footer">
<div class="container">
<span style="float:left;">©2015 Bryant Tunbutr</span>
<span style="float:right;">
<a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
<a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
</div>
<!-- end Container-->
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>-->
<!--<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>-->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script>
</script>
</body>
</html>
angular.module('F1FeederApp.controllers', []).
/* Drivers controller */
controller('driversController', function($scope, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers().success(function (response) {
//Digging into the response to get the relevant data
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
}).
/* Driver controller */
controller('driverController', function($scope, $routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
});
ergastAPIservice.getDriverRaces($scope.id).success(function (response) {
$scope.races = response.MRData.RaceTable.Races;
});
});
.categories {
/* margin: 0 0 10px; */
margin-left: auto;
margin-right: auto;
}
.categories ul {
/* margin-left: auto;
margin-right: auto; */
margin: 0 auto 0 auto;
padding: 0;
width: 100px;
background: #f0f0f0;
border: solid 1px #333;
text-align: center;
list-style-type: none;
}
img {
max-width: 250px;
}
.footer {
height: 40px;
background-color: transparent !important;
}
.plain-header {
a {
color: #428bca;
}
a:hover,
a:focus {
background-color: #FFF;
color: #0085a1;
}
position: relative;
padding: 30px 15px;
text-align: center;
font-size: 20px;
}
#home_link {
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding: 9px 15px;
font-weight: bold;
}
#logo {
color: #428bca;
position: relative;
text-align: center;
font-size: 20px;
padding: 30px 15px;
text-align: left;
:hover, :focus {
background-color: #eeeeee;
color: #0085a1;
}
}
#logo:hover,
#logo:focus {
background-color: #eeeeee;
color: #0085a1;
}
.footer {
height: 40px;
background-color: transparent;
}
h1,
h3 {
text-align: center;
}
.centering {
text-align: center;
}
.center-block {
float: none !important
}
angular.module('F1FeederApp', [
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).
otherwise({redirectTo: '/drivers'});
}]);
angular.module('F1FeederApp.services', [])
.factory('ergastAPIservice', function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() {
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverDetails = function(id) {
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverRaces = function(id) {
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
});
}
return ergastAPI;
});
<div class="container">
<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList | filter: searchFilter">
<td>{{$index + 1}}</td>
<td>
<img src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{driver.Driver.nationality}}.png" />
<a href="#/drivers/{{driver.Driver.driverId}}">
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</a>
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<section id="main">
<a href="./#/drivers"><- Back to drivers list</a>
<nav id="secondary" class="main-nav">
<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</div>
</div>
<div class="driver-status">
Country: {{driver.Driver.nationality}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
Birth: {{driver.Driver.dateOfBirth}}<br/>
<a href="{{driver.Driver.url}}" target="_blank">Biography</a>
</div>
</nav>
<div class="main-content">
<table class="result-table">
<thead>
<tr><th colspan="5">Formula 1 2013 Results</th></tr>
</thead>
<tbody>
<tr>
<td>Round</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Race</td>
</tr>
<tr ng-repeat="race in races">
<td>{{race.round}}</td>
<td><img src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>
<td>{{race.Results[0].Constructor.name}}</td>
<td>{{race.Results[0].grid}}</td>
<td>{{race.Results[0].position}}</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>