diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/application.js | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/notes.coffee | 3 | ||||
| -rw-r--r-- | app/assets/javascripts/notes.js | 14 | ||||
| -rw-r--r-- | app/assets/javascripts/services/notes.js | 60 | ||||
| -rw-r--r-- | app/views/home/main.html.erb | 36 | ||||
| -rw-r--r-- | app/views/layouts/application.html.erb | 4 |
6 files changed, 101 insertions, 18 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4a2ae1d..af30db1 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,4 +13,6 @@ //= require jquery //= require jquery_ujs //= require turbolinks +//= require angular/angular +//= require angular-resource/angular-resource //= require_tree . diff --git a/app/assets/javascripts/notes.coffee b/app/assets/javascripts/notes.coffee deleted file mode 100644 index 24f83d1..0000000 --- a/app/assets/javascripts/notes.coffee +++ /dev/null @@ -1,3 +0,0 @@ -# Place all the behaviors and hooks related to the matching controller here. -# All this logic will automatically be available in application.js. -# You can use CoffeeScript in this file: http://coffeescript.org/ diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js new file mode 100644 index 0000000..d57f7b2 --- /dev/null +++ b/app/assets/javascripts/notes.js @@ -0,0 +1,14 @@ +(function(angular) { + angular + .module('nt.NotesApp', [ + 'nt.NotesService' + ]) + .controller('MainController', [ + '$scope', + 'NotesService', + function($scope, NotesService) { + $scope.notesService = NotesService; + NotesService.fetch(); + } + ]); +})(window.angular); diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js new file mode 100644 index 0000000..8c864a9 --- /dev/null +++ b/app/assets/javascripts/services/notes.js @@ -0,0 +1,60 @@ +(function(angular) { + angular + .module('nt.NotesService', [ + 'ngResource' + ]) + .service('NotesService', [ + '$resource', + function($resource) { + var Note = $resource('/notes/:id.json', + { id: '@id' }, + { + update: { + method: 'PUT' + } + }); + + this.current_note = null; + + // Get all notes + this.fetch = function() { + this.notes = Note.query(); + + return this.notes.$promise; + }; + + this.open = function(note) { + this.current_note = note; + }; + + this.update = function() { + this.current_note.$update(); + }; + + this.create = function() { + if (this.new_note_title) { + Note.save( + { + title: this.new_note_title, + body: '' + }, + (response) => { + delete this.new_note_title; + this.show_create_buttons = false; + this.fetch().then(() => { + this.current_note = this.notes.find((el) => { + return el.id === response.id; + }); + }); + } + ) + } + }; + + this.delete = function(note) { + this.notes.splice(this.notes.indexOf(note), 1); + note.$delete(); + }; + } + ]); +})(window.angular); diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb index 990f007..8f3a7f3 100644 --- a/app/views/home/main.html.erb +++ b/app/views/home/main.html.erb @@ -3,30 +3,40 @@ <div class="position-relative"> <div class="right-section"> - <span class="display-none margin-top-neg-15"> - <input type="text" class="form-field" /> - <button type="button" class="button">Create</button> - <button type="button" class="button">Cancel</button> + <span class="margin-top-neg-15" + ng-show="notesService.show_create_buttons"> + <input type="text" class="form-field" + ng-model="notesService.new_note_title" /> + <button type="button" class="button" + ng-click="notesService.create()">Create</button> + <button type="button" class="button" + ng-click="notesService.show_create_buttons = false">Cancel</button> </span> - <a href="#" class="button">New</a> + <a href="#" class="button" + ng-hide="notesService.show_create_buttons" + ng-click="notesService.show_create_buttons = true">New</a> - <a href="#" class="button margin-left-8">Save</a> + <a href="#" class="button margin-left-8" + ng-click="notesService.update()">Save</a> </div> </div> </div> <div class="margin-top-70"> <div class="sidebar position-fixed min-height-100%"> - <a href="#" class="sidebar-link display-block padding-13">A Note</a> - <a href="#" class="delete-link display-none"><span>×</span></a> - <a href="#" class="sidebar-link display-block padding-13">A Note</a> - <a href="#" class="delete-link display-none"><span>×</span></a> - <a href="#" class="sidebar-link display-block padding-13">A Note</a> - <a href="#" class="delete-link display-none"><span>×</span></a> + <div ng-repeat="note in notesService.notes"> + <a href="#" class="sidebar-link display-block padding-13" + ng-class="{ active: notesService.current_note === note }" + ng-click="notesService.open(note)" + ng-bind="note.title"></a> + <a href="#" class="delete-link" + ng-click="notesService.delete(note)"><span>×</span></a> + </div> </div> <div class="note-editor"> - <textarea class="border-none outline-none width-100% font-size-16"></textarea> + <textarea class="border-none outline-none width-100% font-size-16" + ng-model="notesService.current_note.body"></textarea> </div> </div> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2b9affc..bf4eb07 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,12 +1,12 @@ <!DOCTYPE html> -<html> +<html ng-app="nt.NotesApp"> <head> <title>Notes</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> -<body> +<body ng-controller="MainController"> <%= yield %> |