codefellows-sea-d45-javascript · akeogh · Jan 1, 2016 · Jan 4, 2016 · Jan 5, 2016 · Jan 5, 2016
diff --git a/amanda_keogh/app/index.html b/amanda_keogh/app/index.html
@@ -9,10 +9,7 @@
 
 <body data-ng-app="morderMens">
   <main data-ng-controller="IntroController">
-    <header>
-      <h1>MORDERMENS!</h1>
-      <h2>{{intro}}</h2>
-    </header>
+    <header-directive></header-directive>
 
     <section class="container section-box" id="vs-container">
 
@@ -39,23 +36,22 @@ <h2>{{intro}}</h2>
       <button data-ng-click="getAll()">Get Everyone!</button>
     </section>
       <div class="container">
-        <div class="morderor" data-ng-repeat="morderor in morderors">
-          <h2>{{morderor.name}}</h2>
-          <form name="editMorderor{{morderor._id}}" data-ng-submit="update(morderor)" data-ng-if="morderor.editing">
+        <morderor-directive data-ng-repeat="morderor in morderors" data-morderor="morderor">
 
-            <label for="morderorName{{morderor._id}}">Name:</label>
-            <input type="text" id="morderorName{{morderor._id}}" data-ng-model="morderor.name" placeholder="{{morderor.name}}">
-
-            <label for="morderorVerb{{morderor._id}}">Verb:</label>
-            <input type="text" id="morderorVerb{{morderor._id}}" data-ng-model="morderor.verb" placeholder="{{morderor.verb}}">
-
-            <button class="form-button" type="submit">Submit Changes</button>
+          <edit-morderor-directive
+            name="editMorderor{{morderor._id}}"
+            data-ng-update="update(morderor)"
+            data-ng-if="morderor.editing"
+            data-morderor="morderor">
             <button class="form-button" data-ng-click="morderor.editing = false; refresh(morderor)">Cancel!!</button>
-          </form>
-          <button>Pick Me!</button>
+          </edit-morderor-directive>
+
+          <button class="form-button">Pick Me!</button>
           <button class="form-button" data-ng-if="!morderor.editing" data-ng-click="morderor.editing = true">Change me!</button>
-          <button class="form-button" data-ng-click="remove(morderor)">Kill me!</button>
-        </div>
+          <button class="delete-button" data-ng-click="remove(morderor)">Kill me!</button>
+
+        </morderor-directive>
+
       </div>
   </main>
 

diff --git a/amanda_keogh/app/js/directives/header_directive.js b/amanda_keogh/app/js/directives/header_directive.js
@@ -0,0 +1,9 @@
+module.exports = exports = function(app) {
+  app.directive('headerDirective', function(){
+    return {
+      restrict: 'AEC',
+      replace: 'true',
+      templateUrl: '/templates/header_template.html'
+    }
+  });
+};
diff --git a/amanda_keogh/app/js/entry.js b/amanda_keogh/app/js/entry.js
@@ -2,5 +2,6 @@ require('angular/angular');
 var angular = window.angular;
 
 var morderMens = angular.module('morderMens', []);
+require('./directives/header_directive')(morderMens);
 require('./morderors/morderors')(morderMens);
 
diff --git a/amanda_keogh/app/js/morderors/controllers/morderors_controller.js b/amanda_keogh/app/js/morderors/controllers/morderors_controller.js
@@ -1,6 +1,5 @@
 module.exports = function(app) {
   app.controller('IntroController', ['$scope', '$http', function($scope, $http) {
-  $scope.intro = 'You thought Rock/Paper/Scissors was intense. You were wrong!';
   $scope.choice = 'Rock'; //default
   $scope.morderors = [];
   $scope.newMorderor = {};
@@ -25,10 +24,11 @@ module.exports = function(app) {
   };
 
   $scope.create = function(morderor) {
-    $http.post('api/morderors', morderor)
+    $http.post('/api/morderors', morderor)
       .then(function(res) {
         $scope.morderors.push(res.data);
         $scope.newMorderor = {};
+        console.log('morderor created');
       }, function(err) {
         console.log(err.data);
       });
@@ -41,12 +41,12 @@ module.exports = function(app) {
         console.log('morderor updated.');
       }, function(err) {
         console.log(err.data);
-      })
+      });
   };
 
   $scope.remove = function(morderor) {
     $scope.morderors.splice($scope.morderors.indexOf(morderor), 1);
-    $http.delete('api/morderors/' + morderor._id)
+    $http.delete('/api/morderors/' + morderor._id)
       .then(function(res) {
         console.log('morderor removed!');
       }, function(err) {
@@ -56,7 +56,7 @@ module.exports = function(app) {
   };
 
   $scope.refresh = function(morderor) {
-    $http.get('api/morderors/' + morderor._id)
+    $http.get('/api/morderors/' + morderor._id)
       .then(function(res) {
         console.log('refresh!');
         $scope.morderors[$scope.morderors.indexOf(morderor)] = res.data[0];

diff --git a/amanda_keogh/app/js/morderors/directives/directives.js b/amanda_keogh/app/js/morderors/directives/directives.js
@@ -0,0 +1,4 @@
+module.exports = exports = function(app) {
+  require('./morderor_directive.js')(app);
+  require('./edit_morderor_directive.js')(app);
+}
diff --git a/amanda_keogh/app/js/morderors/directives/edit_morderor_directive.js b/amanda_keogh/app/js/morderors/directives/edit_morderor_directive.js
@@ -0,0 +1,14 @@
+module.exports = exports = function(app) {
+  app.directive('editMorderorDirective', function() {
+    return {
+      restrict: 'AE',
+      replace: true,
+      templateUrl: '/templates/edit_morderor_template.html',
+      transclude: true,
+      scope: {
+        morderor: "=",
+        update: "&"
+      }
+    }
+  })
+}
diff --git a/amanda_keogh/app/js/morderors/directives/morderor_directive.js b/amanda_keogh/app/js/morderors/directives/morderor_directive.js
@@ -0,0 +1,13 @@
+module.exports = exports = function(app) {
+  app.directive('morderorDirective', function(){
+    return {
+      restrict: 'AE',
+      replace: 'true',
+      templateUrl: '/templates/morderor_template.html',
+      transclude: true,
+      scope: {
+        morderor: '='
+      }
+    }
+  });
+};
diff --git a/amanda_keogh/app/js/morderors/morderors.js b/amanda_keogh/app/js/morderors/morderors.js
@@ -1,3 +1,4 @@
 module.exports = function(app) {
   require('./controllers/morderors_controller')(app);
+  require('./directives/directives')(app);
 };
diff --git a/amanda_keogh/app/sass/_base.scss b/amanda_keogh/app/sass/_base.scss
@@ -0,0 +1,9 @@
+body {
+  color: $black;
+  background-color: $background-color;
+  font-family: 'Open Sans', sans-serif;
+}
+
+form {
+  background-color: $accent-color;
+}
diff --git a/amanda_keogh/app/sass/_config.scss b/amanda_keogh/app/sass/_config.scss
@@ -0,0 +1,8 @@
+$blue: #51c1bc;
+$white: #f6f4f0;
+$black: #646464;
+$yellow: #e5a919;
+
+$background-color: $white;
+$accent-color: $blue;
+$second-accent: $yellow;
diff --git a/amanda_keogh/app/sass/layout.scss → amanda_keogh/app/sass/_layout.scss b/amanda_keogh/app/sass/layout.scss → amanda_keogh/app/sass/_layout.scss
@@ -1,9 +1,6 @@
 header {
-  background-color: #51c1bc;
+  background-color: $accent-color;
   padding: 1.5em;
-  h1 {
-    margin: 0px;
-  }
 }
 
 @media all and (min-width: 420px) {

diff --git a/amanda_keogh/app/sass/modules.scss → amanda_keogh/app/sass/_modules.scss b/amanda_keogh/app/sass/modules.scss → amanda_keogh/app/sass/_modules.scss
@@ -1,6 +1,7 @@
 .morderor {
+  background-color: darken($background-color, 5%);
   margin: 25px;
-  border: 1px solid #646464;
+  border: 1px solid $black;
   padding: 1em;
   text-align: center;
 }
@@ -21,10 +22,6 @@ form[name="newMorderorForm"] {
   text-align: center;
 }
 
-.form-button {
-  margin-top: 10px;
-}
-
 .vs-box {
   padding-top: 25px;
   padding-bottom: 25px;

diff --git a/amanda_keogh/app/sass/reset.scss → amanda_keogh/app/sass/_reset.scss b/amanda_keogh/app/sass/reset.scss → amanda_keogh/app/sass/_reset.scss
diff --git a/amanda_keogh/app/sass/state.scss → amanda_keogh/app/sass/_state.scss b/amanda_keogh/app/sass/state.scss → amanda_keogh/app/sass/_state.scss
diff --git a/amanda_keogh/app/sass/application.scss b/amanda_keogh/app/sass/application.scss
@@ -0,0 +1,7 @@
+@import 'config';
+@import 'buttons/buttons';
+@import 'reset';
+@import 'base';
+@import 'layout';
+@import 'modules';
+@import 'state';
diff --git a/amanda_keogh/app/sass/base.scss b/amanda_keogh/app/sass/base.scss
diff --git a/amanda_keogh/app/sass/buttons/_buttons.scss b/amanda_keogh/app/sass/buttons/_buttons.scss
@@ -0,0 +1,22 @@
+@import 'mixins';
+
+%button-defaults {
+  border: 1px solid $black;
+  border-radius: 5px;
+}
+
+button {
+  @extend %button-defaults;
+  @include button($second-accent, $white, "large");
+}
+
+.form-button {
+  @extend button-defaults;
+  @include button($second-accent, $white, "small");
+  margin-top: 10px;
+}
+
+.delete-button {
+  @extend button-defaults;
+  @include button(#ff0000, $white, "small");
+}
diff --git a/amanda_keogh/app/sass/buttons/_mixins.scss b/amanda_keogh/app/sass/buttons/_mixins.scss
@@ -0,0 +1,21 @@
+@mixin button-size($size) {
+  @if $size == "small" {
+    font-size: .75em;
+    padding: .5em;
+  }
+  @else if $size == "large" {
+    font-size: 1.2em;
+    padding: .75em;
+  }
+}
+
+@mixin button($background, $color, $size) {
+  @include button-size($size);
+  background-color: $background;
+  color: $color;
+
+  &:hover,
+  &:active {
+    background-color: lighten($background, 8%);
+  }
+}
diff --git a/amanda_keogh/app/templates/edit_morderor_template.html b/amanda_keogh/app/templates/edit_morderor_template.html
@@ -0,0 +1,11 @@
+  <form data-ng-submit="update({morderor: morderor})">
+    <label for="morderorName{{morderor._id}}">Name:</label>
+    <input type="text" id="morderorName{{morderor._id}}" data-ng-model="morderor.name" placeholder="{{morderor.name}}">
+
+    <label for="morderorVerb{{morderor._id}}">Verb:</label>
+    <input type="text" id="morderorVerb{{morderor._id}}" data-ng-model="morderor.verb" placeholder="{{morderor.verb}}">
+
+    <button class="form-button" type="submit">Submit Changes</button>
+    <ng-transclude></ng-transclude>
+  </form>
+
diff --git a/amanda_keogh/app/templates/header_template.html b/amanda_keogh/app/templates/header_template.html
@@ -0,0 +1,4 @@
+<header>
+  <h1>MORDERMENS!</h1>
+  <h2>You thought Rock, Paper, Scissors was where it ended...</h2>
+</header>
diff --git a/...pp/templates/make_morderor_directive.html → ...app/templates/make_morderor_template.html b/...pp/templates/make_morderor_directive.html → ...app/templates/make_morderor_template.html
diff --git a/amanda_keogh/app/templates/morderor_template.html b/amanda_keogh/app/templates/morderor_template.html
@@ -0,0 +1,5 @@
+  <section class="morderor">
+    <h2>{{morderor.name}}</h2>
+    {{morderor.verb}}
+    <ng-transclude></ng-transclude>
+  </section>
diff --git a/amanda_keogh/gulpfile.js b/amanda_keogh/gulpfile.js
@@ -41,8 +41,8 @@ gulp.task('webpack:test', function() {
   .pipe(gulp.dest('test/client/'));
 });
 
-gulp.task('webpack:sass', function() {
-  return gulp.src(['app/sass/reset.scss', 'app/sass/base.scss', 'app/sass/layout.scss', 'app/sass/modules.scss', 'app/sass/state.scss'])
+gulp.task('sass', function() {
+  return gulp.src(['app/sass/**/*.scss'])
     .pipe(sourcemaps.init({loadMaps: true}))
       .pipe(sass().on('error', sass.logError))
       .pipe(concatCss('styles.min.css'))
@@ -51,7 +51,7 @@ gulp.task('webpack:sass', function() {
     .pipe(gulp.dest('build/'));
 })
 
-gulp.task('build:dev', ['static:dev', 'webpack:dev', 'webpack:sass']);
+gulp.task('build:dev', ['static:dev', 'webpack:dev', 'sass']);
 
 /* * * * * * * * * * * * * * * * * *
             LINT TASKS
@@ -99,7 +99,7 @@ gulp.task('mocha', function() {
 gulp.task('buildWatch', function() {
   gulp.watch(htmlFiles, ['static:dev']);
   gulp.watch('app/js/**/*.js', ['build:dev']);
-  gulp.watch('app/sass/**/*.sass', ['webpack:sass']);
+  gulp.watch('app/sass/**/*.scss', ['sass']);
 });
 
 // backend

diff --git a/amanda_keogh/test/client/morderor_controller_tests.js b/amanda_keogh/test/client/morderor_controller_tests.js
@@ -35,19 +35,58 @@ describe('morderors controller', function() {
     });
 
     it('should add to the morderors array with GETall', function() {
-      $httpBackend.expectGET('/api/morderors').respond(200, [{_id: 1, name: 'testthing', verb: 'testaction'}]);
+      $httpBackend.expectGET('/api/morderors').respond(200, [{_id: 1, name: 'getall test', verb: 'testaction'}]);
       $scope.getAll();
       $httpBackend.flush();
-      expect($scope.morderors[0].name).toBe('testthing');
+      expect($scope.morderors[0].name).toBe('getall test');
     });
 
-    it('should post a new bear', function() {
-      $httpBackend.expectPOST('/api/morderors', {name: 'testthing', verb: 'testaction'}).respond(200, {name: 'differenttestthing'});
+    it('should post a new morderor', function() {
+      $httpBackend.expectPOST('/api/morderors', {name: 'testthing', verb: 'testaction'}).respond(200, {name: 'post test'});
       expect($scope.morderors.length).toBe(0);
-      $scope.create({name: 'testthing'});
+      $scope.create({name: 'testthing', verb:'testaction'});
       $httpBackend.flush();
-      expect($scope.morderors[0].name).toBe('differenttestthing');
-    })
+      expect($scope.morderors[0].name).toBe('post test');
+      expect($scope.newMorderor.name).toBe(undefined);
+    });
+
+    it('should edit a morderor', function() {
+      // test that "editing" property is changed
+      $httpBackend.expectPUT('/api/morderors/test', {_id: 'test', name: 'a test?', verb: 'no really', editing: false}).respond(200, {name: 'put test'});
+      $scope.update({_id: 'test', name: 'a test?', verb: 'no really'});
+      $httpBackend.flush();
+    });
+  });
+
+  //tests which require a dummy morderer in list
+  describe('delete, refresh', function() {
+    beforeEach(angular.mock.inject(function(_$httpBackend_, $rootScope) {
+      $httpBackend = _$httpBackend_;
+      $scope = $rootScope.$new();
+      $ControllerConstructor('IntroController', {$scope: $scope});
+      $scope.morderors = [{_id: 'test', name: 'test name', verb: 'test verb'}];
+    }));
+
+    afterEach(function() {
+      $httpBackend.verifyNoOutstandingExpectation();
+      $httpBackend.verifyNoOutstandingRequest();
+    });
+
+    it('should delete a morderor', function() {
+      $httpBackend.expectDELETE('/api/morderors/test').respond(200);
+      $scope.remove({_id: 'test'});
+      $httpBackend.flush();
+      expect($scope.morderors[0]).toBe(undefined);
+    });
+
+    it('should refresh the current list with new information', function() {
+      $httpBackend.expectGET('/api/morderors/test').respond(200, [{_id: 'test', name: 'super diff'}]);
+      $scope.refresh($scope.morderors[0]);
+      $httpBackend.flush();
+      expect($scope.morderors[0].name).toBe('super diff');
+    });
 
   });
+
+
 })