main view: Create & update work

Add hooks to create new notes and save existing notes from the
interface.

4 files changed, 85 insertions, 6 deletions

diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js
index b1b4e90..bfa0b03 100644
--- a/app/assets/javascripts/services/notes.js
+++ b/app/assets/javascripts/services/notes.js
@@ -3,7 +3,13 @@ angular
 	.factory('NoteService', [
 		'$resource',
 		function($resource) {
-			var Note = $resource('/notes/:id.json', { id: '@id' });
+			var Note = $resource('/notes/:id.json',
+				{ id: '@id' },
+				{
+					save: {
+						method: 'PUT'
+					}
+				});
 			
 			return {
 				notes: [],
@@ -14,15 +20,32 @@ angular
 				},
 				
 				get_note: function(note) {
-					this.current_note = Note.get({ id: note.id });
+					this.current_note = note;
 				},
 				
 				save: function() {
+					console.log(this.current_note.body);
 					Note.save({
 						id: this.current_note.id,
 						title: this.current_note.title,
 						body: this.current_note.body
 					});
+				},
+				
+				create: function () {
+					var _this = this;
+					
+					if (this.new_note_title) {
+						Note.save({
+							title: this.new_note_title,
+							body: ''
+						}, function(response) {
+							_this.show_create = false;
+							delete _this.new_note_title;
+							_this.current_note = response;
+							_this.get_notes();
+						});
+					}
 				}
 			};
 		}
diff --git a/app/assets/stylesheets/components/type.scss b/app/assets/stylesheets/components/type.scss
index 7e8fc05..d4e4ecf 100644
--- a/app/assets/stylesheets/components/type.scss
+++ b/app/assets/stylesheets/components/type.scss
@@ -3,6 +3,10 @@
 }
 
 
+.font-size-16 {
+	font-size: 16px;
+}
+
 .font-size-28 {
 	font-size: 28px;
 }
diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
index 02dbe0c..88973e3 100644
--- a/app/assets/stylesheets/layouts/_global.scss
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -4,6 +4,10 @@ body {
 }
 
 
+.display-inline-block {
+	display: inline-block;
+}
+
 .display-block {
 	display: block;
 }
@@ -13,6 +17,10 @@ body {
 }
 
 
+.margin-top--15 {
+	margin-top: -15px;
+}
+
 .margin-top-70 {
 	margin-top: 70px;
 }
@@ -41,6 +49,19 @@ body {
 }
 
 
+.border-none {
+	border: none;
+}
+
+.outline-none {
+	outline: none;
+}
+
+
+.width-100\% {
+	width: 100%;
+}
+
 .min-height-100\% {
 	min-height: 100%;
 }
@@ -121,8 +142,11 @@ $sidebar-width: 250px;
 .note-editor {
 	margin-left: $sidebar-width;
 	padding: 12px 15px;
-	font: 18px/1.7 Georgia, Times, serif;
 	outline: none;
+	
+	textarea {
+		font: 18px/1.7 Georgia, Times, serif;
+	}
 }
 
 
@@ -134,6 +158,12 @@ $sidebar-width: 250px;
 	border-radius: 6px;
 }
 
+button.button {
+	border: none;
+	font: 16px Avenir, Helvetica, sans-serif;
+	cursor: pointer;
+}
+
 .button:hover {
 	background-color: #178E17;
 	color: #eee;
@@ -144,3 +174,12 @@ $sidebar-width: 250px;
 	-webkit-box-shadow:inset 0 2px 4px 0 #0D4F0D;
 	box-shadow:inset 0 2px 4px 0 #0D4F0D;
 }
+
+
+input.form-field {
+	border: 2px solid rgb(213, 202, 202);
+	width: 260px;
+	height: 42px;
+	padding: 0 10px;
+	font-size: 16px;
+}
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index 7d34ad2..610d86f 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -3,10 +3,21 @@
 	
 	<div class="position-relative">
 		<div class="right-section">
+			<span class="display-inline-block margin-top--15"
+				ng-show="noteService.show_create">
+				<input type="text" class="form-field" ng-model="noteService.new_note_title" />
+				<button type="button" class="button"
+					ng-click="noteService.create()">Create</button>
+				<button type="button" class="button"
+					ng-click="noteService.show_create = false">Cancel</button>
+			</span>
+			
 			<a href="#" class="button"
-				ng-click="">New</a>
+				ng-show="!noteService.show_create"
+				ng-click="noteService.show_create = true">New</a>
 				
 			<a href="#" class="button margin-left-8"
+				ng-show="noteService.current_note"
 				ng-click="noteService.save()">Save</a>
 		</div>
 	</div>
@@ -22,6 +33,8 @@
 		</div>
 	</div>
 
-	<div class="note-editor" contenteditable
-		ng-bind="noteService.current_note.body"></div>
+	<div class="note-editor">
+		<textarea class="border-none outline-none width-100% font-size-16"
+			ng-model="noteService.current_note.body"></textarea>
+	</div>
 </div>