codefellows-sea-d45-javascript · KenjiCrosland · Nov 17, 2015 · Nov 22, 2015 · Nov 22, 2015 · Nov 23, 2015
diff --git a/.gitignore b/.gitignore
diff --git a/kenji_crosland/.gitignore b/kenji_crosland/.gitignore
@@ -0,0 +1,5 @@
+**/*.sw?
+node_modules
+db
+build
+**/*bundle.js
diff --git a/kenji_crosland/app/index.html b/kenji_crosland/app/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="application.css">
+  <title>Our Super Recipe App</title>
+</head>
+<body data-ng-app="recipeApp">
+<main class="container" data-ng-controller="RecipesController" data-ng-init="getAll()">
+  <section class="row top-row">
+    <h1 class="main-headline">Our Super Recipe App</h1>
+  </section>
+  <div data-card-directive
+  header="h2"
+  data-header-text="Add a New Recipe!"
+  data-width="row">
+  <form class="card-form" name="newRecipeForm" data-ng-submit="create(newRecipe)">
+      <label for="newRecipeTitle">Recipe Name: </label>
+      <input type="text" id="newRecipeTitle" required data-ng-model="newRecipe.title">
+      <button class="btn" type="submit" data-ng-disabled="newRecipeForm.$invalid">Create New Recipe</button>
+    </form>
+  </div>
+  <div class="row">
+    <div data-card-directive
+    header="h3"
+    data-header-text="Recipe List"
+    data-width="one-third column">
+      <ul class="recipe-list">
+        <li data-ng-repeat="recipe in recipes">
+          <button type="button" class="btn" data-ng-click="seeRecipe(recipe)">
+            {{recipe.title}}
+          </button>
+        </li>
+      </ul>
+    </div>
+  <div data-card-directive
+  data-ng-if="currentRecipe !== null"
+  data-header-text="{{currentRecipe.title}}"
+  data-width="two-thirds column">
+    <div data-ng-if="currentRecipe.editing" data-recipe-form-directive
+        header="h3"
+        data-button-text="Update Recipe"
+        data-form-name="recipeForm{{currentRecipe._id}}"
+        data-recipe="currentRecipe"
+        data-add-ingredient-field="addIngredientField(recipe, ingredient)"
+        data-remove-ingredient-field="removeIngredientField(recipe)"
+        data-cancel="cancelEditing(recipe)"
+        data-save="update(recipe)">
+    </div>
+    <div data-ng-if="!currentRecipe.editing">
+       <strong>Ingredients:</strong>
+       <ul>
+         <li data-ng-repeat="ingredient in currentRecipe.ingredients">
+          {{ingredient}}
+        </li>
+      </ul>
+      <button class="btn btn-edit" data-ng-click="makeCopy(currentRecipe)">Edit</button>
+      <button class="btn btn-delete" data-ng-click="remove(currentRecipe)">Delete</button>
+    </div>
+  </div>
+</div>
+</main>
+<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/kenji_crosland/app/js/entry.js b/kenji_crosland/app/js/entry.js
@@ -0,0 +1,6 @@
+require('angular/angular');
+var angular = window.angular;
+
+var recipeApp = angular.module('recipeApp', []);
+require('./services/services')(recipeApp);
+require('./recipes/recipes')(recipeApp);
diff --git a/kenji_crosland/app/js/recipes/controllers/recipes_controller.js b/kenji_crosland/app/js/recipes/controllers/recipes_controller.js
@@ -0,0 +1,64 @@
+module.exports = function(app) {
+  app.controller('RecipesController', ['$scope', '$http', 'cfResource', function($scope, $http, cfResource){
+    $scope.recipes = [];
+    $scope.editing = {};
+    $scope.currentRecipe = null;
+
+    $scope.seeRecipe = function(recipe){
+      $scope.currentRecipe = recipe;
+    }
+
+    $scope.makeCopy = function(recipe) {
+      recipe.editing = true;
+      $scope.editing[recipe._id] = angular.copy(recipe);
+    }
+
+    $scope.cancelEditing = function(recipe) {
+      $scope.editing[recipe._id].editing = false;
+      for(i = 0; i < $scope.recipes.length; i++){
+        if($scope.recipes[i]._id === recipe._id){
+          angular.copy($scope.editing[recipe._id], $scope.recipes[i]);
+          delete $scope.editing[recipe._id];
+          return;
+        }
+      }
+    }
+
+    $scope.addIngredientField = function(recipe) {
+      if (recipe.ingredients[recipe.ingredients.length - 1] !== "") {
+        recipe.ingredients.push("");
+      }
+    }
+
+    $scope.removeIngredientField = function(recipe, ingredient) {
+      recipe.ingredients.splice(recipe.ingredients.indexOf(ingredient), 1);
+    }
+
+    $scope.getAll = function() {
+     cfResource('/allrecipes').getAll(function(err, data){
+      if (err) return err;
+      $scope.recipes = data;
+     });
+    };
+
+    $scope.create = function(recipe) {
+      cfResource('/recipes', recipe).post(function(err, data){
+        $scope.recipes.push(data);
+      });
+    };
+
+    $scope.update = function(recipe) {
+      recipe.editing = false;
+      cfResource('/recipes/' + recipe._id, recipe).put(function(err, data) {
+        console.log('Recipe updated!');
+      });
+    }
+
+    $scope.remove = function(recipe) {
+      $scope.recipes.splice($scope.recipes.indexOf(recipe), 1);
+      cfResource('/recipes/' + recipe._id).delete(function(err, data){
+        console.log('Totes cool. Recipe is gone.')
+      })
+    }
+  }]);
+}
diff --git a/kenji_crosland/app/js/recipes/directives/card_directive.js b/kenji_crosland/app/js/recipes/directives/card_directive.js
@@ -0,0 +1,15 @@
+module.exports = function(app) {
+  app.directive('cardDirective', function() {
+    return {
+      restrict: 'AC',
+      replace: true,
+      transclude: true,
+      templateUrl: '/templates/card_template.html',
+      scope: {
+        header: '@',
+        headerText: '@',
+        width: '@' //two columns, three columns, etc
+      }
+    }
+  })
+}
diff --git a/kenji_crosland/app/js/recipes/directives/recipe_form_directive.js b/kenji_crosland/app/js/recipes/directives/recipe_form_directive.js
@@ -0,0 +1,19 @@
+module.exports = function(app) {
+  app.directive('recipeFormDirective', function() {
+    return {
+      restrict: 'AC',
+      replace: true,
+      templateUrl: '/templates/recipe_form_template.html',
+      scope: {
+        buttonText: '@',
+        formClass: '@',
+        formName: '@',
+        recipe: '=',
+        addIngredientField: '&',
+        removeIngredientField: '&',
+        cancel: '&',
+        save: '&'
+      }
+    }
+  })
+}
diff --git a/kenji_crosland/app/js/recipes/recipes.js b/kenji_crosland/app/js/recipes/recipes.js
@@ -0,0 +1,5 @@
+module.exports = function(app){
+  require('./controllers/recipes_controller')(app);
+  require('./directives/card_directive')(app);
+  require('./directives/recipe_form_directive')(app);
+};
diff --git a/kenji_crosland/app/js/services/cf_resource.js b/kenji_crosland/app/js/services/cf_resource.js
@@ -0,0 +1,43 @@
+//Made with help from watching in-class code videos
+
+var handleSuccess = function(callback) {
+  return function(res) {
+    callback(null, res.data)
+  };
+};
+
+var handleFail = function(callback) {
+  return function(res) {
+    console.log(res);
+    callback(res.data);
+  }
+}
+
+module.exports = function(app) {
+  app.factory('cfResource', ['$http', function($http) {
+    return function(resourceName, resourceData) {
+      var resource = {};
+      resource.getAll = function(callback) {
+        $http.get(resourceName)
+          .then(handleSuccess(callback), handleFail(callback));
+        };
+      resource.get = function(callback) {
+        $http.get(resourceName)
+        .then(handleSuccess(callback), handleFail(callback));
+      };
+      resource.post = function(callback) {
+        $http.post(resourceName, resourceData)
+        .then(handleSuccess(callback), handleFail(callback));
+      };
+      resource.put = function(callback) {
+        $http.put(resourceName, resourceData)
+        .then(handleSuccess(callback), handleFail(callback));
+      }
+      resource.delete = function(callback) {
+        $http.delete(resourceName)
+        .then(handleSuccess(callback), handleFail(callback));
+      }
+      return resource;
+    };
+  }]);
+};
diff --git a/kenji_crosland/app/js/services/services.js b/kenji_crosland/app/js/services/services.js
@@ -0,0 +1,3 @@
+module.exports = function(app) {
+  require('./cf_resource')(app);
+};
diff --git a/kenji_crosland/app/sass/_base.scss b/kenji_crosland/app/sass/_base.scss
@@ -0,0 +1,41 @@
+@import url(https://fonts.googleapis.com/css?family=Nunito);
+@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
+@import url(https://fonts.googleapis.com/css?family=Ledger);
+
+html {font-size: 1.125em;}
+
+body {
+  font-family: 'Ledger', serif;
+  background-color: $light-background;
+  font-weight: 400;
+  line-height: 1.45;
+  color: #333;
+}
+
+p {margin-bottom: 1.3em;}
+
+h1, h2, h3, h4 {
+  font-family: 'Ledger', serif;
+  margin: 1.414em 0 0.5em;
+  font-weight: inherit;
+  line-height: 1.2;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 2.074em;
+}
+
+h2 {font-size: 1.728em;}
+
+h3 {font-size: 1.44em;}
+
+h4 {font-size: 1.2em;}
+
+small, .font_small {font-size: 0.833em;}
+
+//Forms
+
+input {
+  display: table-cell;
+}