SF-WDI-LABS · klawton1 · Feb 24, 2017 · Feb 25, 2017 · Feb 25, 2017 · Feb 25, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html ng-app="booksApp">
+<head>
+  <title>books</title>
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="/public/styles/styles.css">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
+
+  <script src="/public/scripts/app.js"></script>
+  <script src="/public/scripts/controllers/booksController.js"></script>
+  <script src="/public/scripts/controllers/oneBookController.js"></script>
+</head>
+<body>
+  <h2>Bunch O' Books</h2>
+  <div ng-view></div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "angular-books-crud-lab",
+  "version": "1.0.0",
+  "description": "<!-- Location: SF -->",
+  "main": "index.js",
+  "dependencies": {
+    "angular-route": "^1.6.2",
+    "bower": "^1.8.0",
+    "mongoose": "^4.8.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/klawton1/angular-books-crud-lab.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/klawton1/angular-books-crud-lab/issues"
+  },
+  "homepage": "https://github.com/klawton1/angular-books-crud-lab#readme"
+}
diff --git a/public/scripts/app.js b/public/scripts/app.js
@@ -0,0 +1,23 @@
+angular
+  .module("booksApp", ['ngRoute'])
+  .config(config);
+
+config.$inject = ['$routeProvider', '$locationProvider'];
+function config(   $routeProvider,   $locationProvider) {
+  $routeProvider
+    .when('/', {
+      templateUrl: '/templates/books.html',
+      controller: 'BooksController',
+      controllerAs: 'bc'
+    })
+    .when('/books/:id',{
+      templateUrl: '/templates/onebook.html',
+      controller: 'OneBookController',
+      controllerAs: 'obc'
+    })
+
+  $locationProvider.html5Mode({
+    enabled: true,
+    requireBase: false
+  });
+}
diff --git a/public/scripts/controllers/booksController.js b/public/scripts/controllers/booksController.js
@@ -0,0 +1,16 @@
+angular
+  .module("booksApp")
+  .controller("BooksController", BooksController);
+
+BooksController.$inject = ['$http', '$routeParams'];
+function BooksController(   $http,   $routeParams) {
+ var vm = this;
+ vm.books = [];
+ vm.filter = "author";
+ $http({
+  method: "GET",
+  url: "https://super-crud.herokuapp.com/books",
+ }).then(function Success(json){
+  vm.books = json.data.books;
+ })
+}
diff --git a/public/scripts/controllers/oneBookController.js b/public/scripts/controllers/oneBookController.js
@@ -0,0 +1,44 @@
+angular
+  .module("booksApp")
+  .controller("OneBookController",OneBookController);
+
+OneBookController.$inject = ['$http', '$routeParams', '$location'];
+function OneBookController(   $http,   $routeParams,   $location) {
+  var vm = this;
+  vm.book = {};
+  vm.editBook = {
+    title: "",
+    image: "",
+    author: "",
+    releaseDate: "",
+  }
+  $http({
+    method: "GET",
+    url: "https://super-crud.herokuapp.com/books/" + $routeParams.id,
+  }).then(function Success(response){
+    vm.book = response.data;
+  })
+  vm.makeCopy = function(book){
+    for(key in vm.editBook){
+      vm.editBook[key] = book[key]
+    }
+  }
+  vm.submit = function(book){
+    $http({
+      method: "PUT",
+      url: "https://super-crud.herokuapp.com/books/" + book._id,
+      data: vm.editBook
+    }).then(function(res){
+      vm.book = res.data;
+      $location.path('/');
+    })
+  }
+  vm.delete = function(){
+    $http({
+      method: "DELETE",
+      url: "https://super-crud.herokuapp.com/books/" + vm.book._id
+    }).then(function(res){
+      $location.path('/');
+    })
+  }
+}
diff --git a/public/styles/styles.css b/public/styles/styles.css
@@ -0,0 +1,10 @@
+.book-cover{
+  height: 275px;
+  width: 200px;
+}
+.editing{
+  display: inline;
+}
+.title{
+  width: 550px;
+}
diff --git a/templates/books.html b/templates/books.html
@@ -0,0 +1,17 @@
+<div>
+  <select ng-model="bc.filter">
+    <option ng-model="bc.filter">author</option>
+    <option ng-model="bc.filter">title</option>
+  </select>
+  <div class="book" ng-repeat="book in bc.books | orderBy: bc.filter" >
+    <div>
+      <img class="book-cover" ng-src="{{book.image}}">
+    </div>
+    <div class="editing">
+      <h3 class="title"><a ng-href="/books/{{book._id}}">{{book.title}}</a></h3>
+      <h5>{{book.author}}</h5>
+      <h5>{{book.releaseDate}}</h5>
+    </div>
+    <hr>
+  </div>
+</div>
diff --git a/templates/onebook.html b/templates/onebook.html
@@ -0,0 +1,15 @@
+<div class="book">
+  <div>
+    <img class="book-cover" ng-src="{{obc.book.image}}">
+  </div>
+  <form class="editing" ng-submit="obc.submit(obc.book)">
+    <h3 class="title"><span ng-hide="edit">{{obc.book.title}}</span><input type="text" name="title" ng-show="edit" ng-model="obc.editBook.title"></h3>
+    <h5><span ng-hide="edit">{{obc.book.author}}</span> <input type="text" name="author" ng-show="edit" ng-model="obc.editBook.author"></h5>
+    <h5><span ng-hide="edit">{{obc.book.releaseDate}}</span> <input type="text" name="releaseDate" ng-model="obc.editBook.releaseDate" ng-show="edit"></h5>
+    <button class="btn btn-default" ng-show="edit" ng-click="edit=false" type="submit">Save</button>
+  </form>
+  <button class="btn btn-default" ng-show="edit" ng-click="edit=false; obc.makeEdit(obc.book)">Cancel</button>
+  <button class="btn btn-default" ng-click="obc.makeCopy(obc.book); edit=true" ng-hide="edit" >Edit</button>
+  <hr>
+  <button class="btn btn-default" ng-click="obc.delete()">Delete</button>
+</div>