<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="Books_module.js"></script>
</head>
<body background="images/greenBack.gif">
<center>
<br><br><br>
<form name="myForm" ng-controller="BooksController" ng-App="booksApp">
<table border="0" cellpadding="2">
<tr>
<td style="vertical-align:top">
<table border="1" cellpadding="2">
<tr>
<td colspan="2" style="text-align:center;vertical-align:top"><label>Filter By Field</label></td>
<tr>
<td style="vertical-align:top"><label>Author: </label></td>
<td style="vertical-align:top"><label><input ng-model="searchingFor.AUTHOR"></label></td>
</tr>
<tr>
<td style="vertical-align:top"><label>Title: </label></td>
<td style="vertical-align:top"><label><input ng-model="searchingFor.TITLE"></label></td>
</tr>
<tr>
<td style="vertical-align:top"><label>Year Read: </label></td>
<td style="vertical-align:top"><label><input ng-model="searchingFor.YEAR_READ"></label></td>
</tr>
<tr>
<td style="vertical-align:top"><label>Book Type: </label></td>
<td style="vertical-align:top">
<label>Hardback</label><input type="checkbox" ng-model="Filter.BookTypeFilter.H" ng-true-value="'H'" ng-false-value='' /><br/>
<label>Kindle</label><input type="checkbox" ng-model="Filter.BookTypeFilter.K" ng-true-value="'K'" ng-false-value='' /><br/>
<label>Paperback</label><input type="checkbox" ng-model="Filter.BookTypeFilter.P" ng-true-value="'P'" ng-false-value='' />
<pre><!-- {{details | json}} --></pre>
</td>
</tr>
<tr>
<td style="vertical-align:top"><label>Rating: </label></td>
<td style="vertical-align:top">
<label>5.0</label><input type="checkbox" ng-model="Filter.RatingFilter.five" ng-true-value="'5'" ng-false-value='' />
<label>4.5</label><input type="checkbox" ng-model="Filter.RatingFilter.fourfive" ng-true-value="'4.5'" ng-false-value='' />
<label>4.0</label><input type="checkbox" ng-model="Filter.RatingFilter.four" ng-true-value="'4'" ng-false-value='' /><br/>
<label>3.5</label><input type="checkbox" ng-model="Filter.RatingFilter.threefive" ng-true-value="'3.5'" ng-false-value='' />
<label>3.0</label><input type="checkbox" ng-model="Filter.RatingFilter.three" ng-true-value="'3'" ng-false-value='' />
<label>2.5</label><input type="checkbox" ng-model="Filter.RatingFilter.twofive" ng-true-value="'2.5'" ng-false-value='' /><br/>
<label>2.0</label><input type="checkbox" ng-model="Filter.RatingFilter.two" ng-true-value="'2'" ng-false-value='' />
<label>1.5</label><input type="checkbox" ng-model="Filter.RatingFilter.onefive" ng-true-value="'1.5'" ng-false-value='' />
<label>1.0</label><input type="checkbox" ng-model="Filter.RatingFilter.one" ng-true-value="'1'" ng-false-value='' /><br/>
<label>0.5</label><input type="checkbox" ng-model="Filter.RatingFilter.zerofive" ng-true-value="'0.5'" ng-false-value='' /><br/>
</tr>
</table>
<br/>
<table border="0" cellpadding="2">
<tr>
<td style="vertical-align:top">Total Books Read:</td>
<td style="vertical-align:top">{{details.length}}</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table border="1" cellpadding="2" align="center">
<tr>
<td align="Left">
<b>Count</font></b>
</td>
<td align="center" width="325px">
<b>Title</font></b>
</td>
<td align="center" width="220px">
<b>Author</font></b>
</td>
<td align="center" width="100px">
<b>Year Read</font></b>
</td>
<td align="center" width="110px">
<b>Book Type</font></b>
</td>
<td align="center" width="200px">
<b>My Rating (out of 5 stars)</font></b>
</td>
</tr>
<tr ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:chooseBookType | filter:chooseRatingType | filter:searchingFor as filteredList ">
<td>{{filteredList.length - $index}}</td>
<td>
<!-- display url if one exists -->
<span ng-if="det.BOOK_WEBSITE != ''"><a href="{{det.BOOK_WEBSITE}}" target="_blank" class="BookWebsite">{{det.TITLE}}</a></span>
<span ng-if="det.BOOK_WEBSITE == ''">{{det.TITLE}}</span>
</td>
<td>
<!-- display url if one exists -->
<span ng-if="det.AUTHOR_WEBSITE != ''"><a href="{{det.AUTHOR_WEBSITE}}" target="_blank" class="AuthorWebsite">{{det.AUTHOR}}</a></span>
<span ng-if="det.AUTHOR_WEBSITE == ''">{{det.AUTHOR}}</span>
</td>
<td>{{det.YEAR_READ}}</td>
<td>
<span ng-switch="det.BOOKTYPE">
<span ng-switch-when="P">Paperback</span>
<span ng-switch-when="H">Hardback</span>
<span ng-switch-when="K">Kindle</span>
<span ng-switch-default>Kindle</span>
</span>
</td>
<td>
<!-- display my rating of book in stars and favorite if 5 stars -->
<span ng-switch="det.RATING">
<span ng-switch-when="5">
5
</span>
<span ng-switch-when="4.5">4.5</span>
<span ng-switch-when="4">4</span>
<span ng-switch-when="3.5">3.5</span>
<span ng-switch-when="3">3</span>
<span ng-switch-when="2.5">2.5</span>
<span ng-switch-when="2">2</span>
<span ng-switch-when="1.5">1.5</span>
<span ng-switch-when="1">1</span>
<span ng-switch-when="0.5">0.5</span>
<span ng-switch-when="0"> - </span>
<span ng-switch-default> - </span>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
/* Styles go here */
// Create angularjs module with ngRoute as dependency
var booksApp = angular.module("booksApp",['ngRoute']);
// configure routes with $routeProvider service
booksApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
// route for Books.html page
.when('/Books', {
templateUrl: 'Books.html',
controller: 'BooksController'
})
.otherwise({
// default if not Books.html
redirectTo: '/Books.html'
});
}]);
booksApp.controller('BooksController', function ($scope, $http) {
// Filter Defaults
$scope.Filter = new Object();
$scope.Filter.BookTypeFilter = {
H: 'H',
K: 'K',
P: 'P'
};
$scope.Filter.RatingFilter = {
five : '5',
fourfive: '4.5',
four: '4',
threefive: '3.5',
three: '3',
twofive: '2.5',
two: '2',
onefive: '1.5',
one: '1',
zerofive: '0.5'
};
$scope.chooseBookType = function(det){
return det.BOOKTYPE === $scope.Filter.BookTypeFilter.P || det.BOOKTYPE === $scope.Filter.BookTypeFilter.H || det.BOOKTYPE === $scope.Filter.BookTypeFilter.K;
};
$scope.chooseRatingType = function(det) {
return det.RATING === $scope.Filter.RatingFilter.five || det.RATING === $scope.Filter.RatingFilter.fourfive || det.RATING === $scope.Filter.RatingFilter.four // ||
// det.RATING === $scope.RatingFilter.threefive || det.RATING === $scope.RatingFilter.three || det.RATING === $scope.RatingFilter.twofive ||
// det.RATING === $scope.RatingFilter.two || det.RATING === $scope.RatingFilter.onefive || det.RATING === $scope.RatingFilter.one ||
// det.RATING === $scope.RatingFilter.zerofive;
};
$http.get('books.js')
.then(function(result){
$scope.details = result.data;
});
});
[ {
"TITLE": "Dandelion Wine",
"AUTHOR": "Ray Bradbury",
"YEAR_READ": "2015",
"BOOK_WEBSITE": "http://www.raybradbury.com/books/dandelionwine-hc.html",
"AUTHOR_WEBSITE": "http://www.raybradbury.com/",
"RATING": "3.5",
"COUNTER": "A",
"BOOKTYPE": "H",
"FAVORITE": "N"
},
{
"TITLE": "Finders Keepers (Bill Hodges Triology #2)",
"AUTHOR": "Stephen King",
"YEAR_READ": "2015",
"BOOK_WEBSITE": "http://stephenking.com/promo/finders-keepers/",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "4",
"COUNTER": "B",
"BOOKTYPE": "K",
"FAVORITE": "N"
},
{
"TITLE": "Star Trek (TNG) - Metamorphosis",
"AUTHOR": "Jean Lorrah",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://memory-beta.wikia.com/wiki/Metamorphosis_(novel)",
"AUTHOR_WEBSITE": "http://www.jeanlorrah.com/",
"RATING": "4.5",
"COUNTER": "A",
"BOOKTYPE": "P",
"FAVORITE": "N"
},
{
"TITLE": "Star Trek (TNG) - Survivors (PB #4)",
"AUTHOR": "Jean Lorrah",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://memory-beta.wikia.com/wiki/Survivors",
"AUTHOR_WEBSITE": "http://www.jeanlorrah.com/",
"RATING": "3",
"COUNTER": "B",
"BOOKTYPE": "H",
"FAVORITE": "N"
},
{
"TITLE": "The Dead Zone",
"AUTHOR": "Stephen King",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://stephenking.com/library/novel/dead_zone_the.html",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "5",
"COUNTER": "C",
"BOOKTYPE": "K",
"FAVORITE": "N"
},
{
"TITLE": "Firestarter",
"AUTHOR": "Stephen King",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://stephenking.com/library/novel/firestarter.html",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "5",
"COUNTER": "D",
"BOOKTYPE": "K",
"FAVORITE": "N"
},
{
"TITLE": "Carrie",
"AUTHOR": "Stephen King",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://stephenking.com/library/novel/carrie.html",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "5",
"COUNTER": "E",
"BOOKTYPE": "K",
"FAVORITE": "N"
},
{
"TITLE": "Cujo",
"AUTHOR": "Stephen King",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://stephenking.com/library/novel/cujo.html",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "5",
"COUNTER": "F",
"BOOKTYPE": "K",
"FAVORITE": "N"
},
{
"TITLE": "Christine",
"AUTHOR": "Stephen King",
"YEAR_READ": "2016",
"BOOK_WEBSITE": "http://stephenking.com/library/novel/christine.html",
"AUTHOR_WEBSITE": "http://stephenking.com/",
"RATING": "5",
"COUNTER": "G",
"BOOKTYPE": "K",
"FAVORITE": "Y"
}
]