startersacademy · jeffreytu · Jan 21, 2015 · Jan 22, 2015 · Jan 22, 2015 · Jan 22, 2015
diff --git a/client/css/style.css b/client/css/style.css
@@ -120,6 +120,43 @@ header.carousel .fill {
   font-size: 14px;
 }
 
+/*---Learning Resources---*/
+/*Collection*/
+  .lrs-tbl-header{
+    font-weight: bold;
+    background: #4F4D4D;
+    border: 1px solid #4F4D4D;
+    color: #FAFAFA;
+  }
+  .lrs-tbl-header th a:visited, .lrs-tbl-header th a {
+    color: #FAFAFA;
+  }
+  .lrs-tbl tr td {
+    background: #FDFDFD;
+  }
+
+  .lrs-tbl-h-n {
+    width: 5%;
+  }
+  .lrs-tbl-h-rt {
+    width: 10%;
+  }
+  .lrs-tbl-h-t {
+    width: 20%;
+  }
+  .lrs-tbl-h-a {
+    width: 10%;
+  }
+  .lrs-tbl-h-d {
+    width: 30%;
+  }
+  .lrs-tbl-h-de {
+    width: 2%;
+  }
+  .borderless {
+    border: none;
+  }
+
 /*---Learning Resource---*/
 /*Single ID*/
 .edit, .b-cancel, .b-update, .b-delete, .div-space-edit {

diff --git a/client/spa-index.html b/client/spa-index.html
@@ -5,6 +5,7 @@
     <title>SPA</title>
     <link rel="stylesheet" href="../css/bootstrap.min.css">
     <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
 </head>
 <body>
 Hi, I'm the spa index from the spa folder.

diff --git a/client/spa/js/learning-resource/learning-resource.controller.js b/client/spa/js/learning-resource/learning-resource.controller.js
@@ -8,7 +8,7 @@ var View = require('./learning-resource.view');
 module.exports = Backbone.Controller.extend({
 
   routes: {
-    'learning-resource/:id': 'showLearningResource'
+    'learning-resources/:id': 'showLearningResource'
   },
 
   initialize: function(){
@@ -26,7 +26,7 @@ module.exports = Backbone.Controller.extend({
 
     //Ensures that what the view put in the DOM is removed and
     //any events the view had listenTo'd are removed.
-    if (view) view.destroy();
+    if (view) view.remove();
 
     this.initializeModel({id: learningResourceId});
 

diff --git a/client/spa/js/learning-resource/learning-resource.html b/client/spa/js/learning-resource/learning-resource.html
@@ -1,5 +1,3 @@
-<style type="text/css">
-</style>
 <div class="vertical-center">
   <div class="container">
     <div class="row">

diff --git a/client/spa/js/learning-resource/learning-resource.view.js b/client/spa/js/learning-resource/learning-resource.view.js
@@ -7,7 +7,33 @@ var $ = require('../vendor/index').$;
 var fs = require('fs'); //will be replaced by brfs in the browser
 
 // readFileSync will be evaluated statically so errors can't be caught
-var template = fs.readFileSync(__dirname + '/learning-resources.html', 'utf8');
+var template = fs.readFileSync(__dirname + '/learning-resource.html', 'utf8');
+
+var showMessage = function(type, msg) {
+  $('#msg').empty().addClass(type)
+    .html(msg).fadeIn().delay(2000)
+    .fadeOut('slow').queue(function(remove) {
+      $('#msg').removeClass(type);
+      remove();
+    });
+};
+
+var renderAuthors = function(self) {
+  var auth = self.model.get('authors').toString().split(',').join(', ');
+  self.input = self.$('.editing');
+  self.$('select option[value="'+self.model.get('resourceType')+'"]')
+      .attr('selected','selected');
+  self.$('#auth').val(auth);
+  self.$('#author-dsp').text(auth);
+};
+
+var initialValues = function(self) {
+  self.$('#title').val(self.model.get('title'));
+  self.$('#desc').val(self.model.get('description'));
+  self.$('#auth').val(self.model.get('authors'));
+  self.$('select option[value="'+self.model.get('resourceType')+'"]')
+      .attr('selected','selected');
+};
 
 module.exports = Backbone.View.extend({
 
@@ -34,75 +60,56 @@ module.exports = Backbone.View.extend({
   },
 
   cancel: function(){
-    this.$('#title').val(this.model.get('title'));
-    this.$('#desc').val(this.model.get('description'));
-    this.$('#auth').val(this.model.get('authors'));
-    this.$('select option[value="'+this.model.get('resourceType')+'"]')
-        .attr('selected','selected');
     $('#form-area').removeClass('sty-form'); //remove bg color of form
-    $('#msg').empty()
-             .addClass('alert-warning')
-             .html('Changes cancelled')
-             .fadeIn().delay(2000).fadeOut('slow')
-             .queue(function(remove){
-                $('#msg').removeClass('alert-warning');
-                remove();
-             });
+    showMessage('alert-warning', 'Changes cancelled');
     this.$el.removeClass('editing');
   },
 
   save: function(){
     var view = this;
-    var auth = [];
-    if (this.$('#auth').val() === '') auth = null;
-    else $.each(this.$('#auth').val().split(','), function(){
-      auth.push($.trim(this));
-    });
-    var attributes = {
-      title: this.$('#title').val().trim(),
-      resourceType: $('#resourceType option:selected').val(),
-      description: this.$('#desc').val().trim(),
-      authors: auth
+
+    var authorsFormat = function() {
+      var authors = [];
+      // console.log($('#auth').val().split(','));
+      if ($('#auth').val() === '') authors = null;
+      else {
+        $.each($('#auth').val().split(','), function(key,value){
+          authors.push(value.trim());
+        });
+        return authors;
+      }
     };
-    var options = {
-      success: function(){
-        $('#form-area').removeClass('sty-form');
-        view.$el.removeClass('editing');
-        $('#msg').empty()
-                 .addClass('alert-success')
-                 .html('Sucessfully updated')
-                 .fadeIn().delay(2000).fadeOut('slow')
-                 .queue(function(remove){
-                    $('#msg').removeClass('alert-success');
-                    remove();
-                  });
+
+    var saveArgs = {
+      attributes: {
+        title: this.$('#title').val().trim(),
+        resourceType: $('#resourceType option:selected').val(),
+        description: this.$('#desc').val().trim(),
+        authors: authorsFormat
       },
-      error: function(model, error){
-        //server response errors if no validations specified
+      options: {
+        success: function(){
+          $('#form-area').removeClass('sty-form');
+          view.$el.removeClass('editing');
+          showMessage('alert-success', 'Successfully updated');
+        },
+        error: function(model, error){
+          //server response errors if no validations specified
+        }
       }
     };
-    this.model.save(attributes, options);
+
+    this.model.save(saveArgs.attributes, saveArgs.options);
+
     if (this.model.validationError) {
-      $('#msg').empty()
-         .addClass('alert-danger')
-         .html(this.model.validationError)
-         .fadeIn().delay(2000).fadeOut('slow')
-         .queue(function(remove){
-            $('#msg').removeClass('alert-danger');
-            remove();
-      });
+      showMessage('alert-danger', this.model.validationError);
     }
   },
 
   render: function(){
     var context = this.model.toJSON();
-    var auth = this.model.get('authors').toString().split(',').join(', ');
     this.$el.html(this.template(context));
-    this.input = this.$('.editing');
-    this.$('select option[value="'+this.model.get('resourceType')+'"]')
-        .attr('selected','selected');
-    this.$('#auth').val(auth);
-    this.$('#author-dsp').text(auth);
+    renderAuthors(this);
     return this;
   },
 

diff --git a/client/spa/js/learning-resource/learning-resources.collection.js b/client/spa/js/learning-resource/learning-resources.collection.js
@@ -0,0 +1,57 @@
+'use strict';
+
+var Backbone = require('../vendor/index').Backbone;
+
+module.exports = Backbone.Collection.extend({
+
+  url: '/api/learning-resources/',
+
+  initialize: function(){
+    this.on('sortById', this.sortById);
+    this.on('sortByTitle', this.sortByTitle);
+    this.on('sortByResourceType', this.sortByResourceType);
+    this.on('sortByAuthors', this.sortByAuthors);
+    this.on('sortByDescription', this.sortByDescription);
+    this.trigger('sortByTitle');
+    this.trigger('sortByResourceType');
+    this.trigger('sortByAuthors');
+    this.trigger('sortByDescription');
+  },
+
+  sortById: function(){
+    this.comparator = function(model){
+      return model.get('id');
+    };
+    this.sort();
+  },
+
+  sortByTitle: function(){
+    this.comparator = function(model){
+      return model.get('title');
+    };
+    this.sort();
+  },
+
+  sortByResourceType: function(){
+    this.comparator = function(model){
+      return model.get('resourceType');
+    };
+    this.sort();
+  },
+
+  sortByAuthors: function(){
+    this.comparator = function(model){
+      return model.get('authors');
+    };
+    this.sort();
+  },
+
+  sortByDescription: function(){
+    this.comparator = function(model){
+      return model.get('description');
+    };
+    this.sort();
+  }
+
+});
+
diff --git a/client/spa/js/learning-resource/learning-resources.controller.js b/client/spa/js/learning-resource/learning-resources.controller.js
@@ -0,0 +1,64 @@
+'use strict';
+
+var Backbone = require('../vendor/index').Backbone;
+var $ = require('../vendor/index').$;
+var Model = require('./learning-resource.model');
+var Collection = require('./learning-resources.collection');
+var View = require('./learning-resources.view');
+
+module.exports = Backbone.Controller.extend({
+
+  routes: {
+    'learning-resources': 'showLearningResources'
+  },
+
+  initialize: function(){
+    this.options.container = this.options.container || 'body';
+  },
+
+  getCollection: function(){
+    if (!this.collection){
+      Collection = Collection.extend({model: Model});
+      this.collection = new Collection();
+    }
+    return this.collection;
+  },
+
+  getView: function(){
+    // if (this.view) {
+    //   this.view.remove();
+    // }
+    if (!this.view) {
+      this.view = new View({collection: this.collection});
+    }
+    return this.view;
+  },
+
+  showLearningResources: function(){
+    var self = this;
+    this.getCollection().fetch({
+      success: function(collection, response, options){
+        self.getView();
+        self.renderView();
+      },
+      error: function(collection, response, options){
+        self.renderError();
+      }
+    });
+  },
+
+  renderToContainer: function(html){
+    return $(this.options.container).html(html);
+  },
+
+  renderView: function(){
+    this.renderToContainer(this.view.render().$el);
+    return this.view;
+  },
+
+  renderError: function(){
+    return this.renderToContainer(
+      '<p>There was a problem rendering learning resources</p>');
+  }
+
+});