diff --git a/amanda_keogh/app/index.html b/amanda_keogh/app/index.html index 86b26d3..b29091c 100644 --- a/amanda_keogh/app/index.html +++ b/amanda_keogh/app/index.html @@ -9,10 +9,7 @@
-
-

MORDERMENS!

-

{{intro}}

-
+
@@ -39,23 +36,22 @@

{{intro}}

-
-

{{morderor.name}}

-
+ - - - - - - - + - - + + + - -
+ + + +
diff --git a/amanda_keogh/app/js/directives/header_directive.js b/amanda_keogh/app/js/directives/header_directive.js new file mode 100644 index 0000000..442d09e --- /dev/null +++ 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 index c1c10fa..32d7551 100644 --- 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 index 0d2120a..a36659e 100644 --- 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 new file mode 100644 index 0000000..93282e4 --- /dev/null +++ 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 new file mode 100644 index 0000000..d179730 --- /dev/null +++ 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 new file mode 100644 index 0000000..1675ece --- /dev/null +++ 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 index d9808e3..84759cd 100644 --- 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 new file mode 100644 index 0000000..18d2269 --- /dev/null +++ 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 new file mode 100644 index 0000000..bbedf21 --- /dev/null +++ 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 b/amanda_keogh/app/sass/_layout.scss similarity index 80% rename from amanda_keogh/app/sass/layout.scss rename to amanda_keogh/app/sass/_layout.scss index a6be255..6959e3c 100644 --- a/amanda_keogh/app/sass/layout.scss +++ b/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 b/amanda_keogh/app/sass/_modules.scss similarity index 81% rename from amanda_keogh/app/sass/modules.scss rename to amanda_keogh/app/sass/_modules.scss index a59dbff..653d5c6 100644 --- a/amanda_keogh/app/sass/modules.scss +++ b/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 b/amanda_keogh/app/sass/_reset.scss similarity index 100% rename from amanda_keogh/app/sass/reset.scss rename to amanda_keogh/app/sass/_reset.scss diff --git a/amanda_keogh/app/sass/state.scss b/amanda_keogh/app/sass/_state.scss similarity index 100% rename from amanda_keogh/app/sass/state.scss rename to amanda_keogh/app/sass/_state.scss diff --git a/amanda_keogh/app/sass/application.scss b/amanda_keogh/app/sass/application.scss new file mode 100644 index 0000000..353fb7e --- /dev/null +++ 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 deleted file mode 100644 index 7f0d07e..0000000 --- a/amanda_keogh/app/sass/base.scss +++ /dev/null @@ -1,17 +0,0 @@ -body { - color: #646464; - background-color: #f6f4f0; - font-family: 'Open Sans', sans-serif; -} - -button { - background-color: #e5a919; - color: #f6f4f0; - padding: 1em; - border: 1px solid #646464; - border-radius: 5px; -} - -form { - background-color: #51c1bc; -} diff --git a/amanda_keogh/app/sass/buttons/_buttons.scss b/amanda_keogh/app/sass/buttons/_buttons.scss new file mode 100644 index 0000000..67b0296 --- /dev/null +++ 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 new file mode 100644 index 0000000..0685aa5 --- /dev/null +++ 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 new file mode 100644 index 0000000..96f9f22 --- /dev/null +++ b/amanda_keogh/app/templates/edit_morderor_template.html @@ -0,0 +1,11 @@ +
+ + + + + + + + +
+ diff --git a/amanda_keogh/app/templates/header_template.html b/amanda_keogh/app/templates/header_template.html new file mode 100644 index 0000000..f8fc8aa --- /dev/null +++ b/amanda_keogh/app/templates/header_template.html @@ -0,0 +1,4 @@ +
+

MORDERMENS!

+

You thought Rock, Paper, Scissors was where it ended...

+
diff --git a/amanda_keogh/app/templates/make_morderor_directive.html b/amanda_keogh/app/templates/make_morderor_template.html similarity index 100% rename from amanda_keogh/app/templates/make_morderor_directive.html rename to amanda_keogh/app/templates/make_morderor_template.html diff --git a/amanda_keogh/app/templates/morderor_template.html b/amanda_keogh/app/templates/morderor_template.html new file mode 100644 index 0000000..77ffd78 --- /dev/null +++ b/amanda_keogh/app/templates/morderor_template.html @@ -0,0 +1,5 @@ +
+

{{morderor.name}}

+ {{morderor.verb}} + +
diff --git a/amanda_keogh/gulpfile.js b/amanda_keogh/gulpfile.js index e2002f1..9af6504 100644 --- 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 index 62452f4..475b49e 100644 --- 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'); + }); }); + + })