Add info modal support

advisor/mainapp/static/js/advisor/app.js

@@ -13,10 +13,16 @@ $(function () {
       t.fetchRelated('semesters', {
         success: function() {
           advisor.Semesters = t.get('semesters');
-          new advisor.SemesterCollectionView();
+          advisor.SemestersViews = new advisor.SemesterCollectionView();
         }
       });
     }
   });
-
 });
+
+$(document).ready(function() {
+  $('#slide').click(function() {
+    $('#semesters').slideToggle();
+    //advisor.SemestersViews.addAll();
+  })
+})

advisor/mainapp/static/js/advisor/models/semester.js

@@ -8,7 +8,6 @@ advisor.Semester = Backbone.RelationalModel.extend({
   },
   
   events: {
-    "click .panel-heading": "toggle"
   },
 
   relations: [{

advisor/mainapp/static/js/advisor/views/course-view.js

+});

advisor/mainapp/static/js/advisor/views/courseCollectionView.js

@@ -8,7 +8,6 @@ advisor.CourseCollectionView = Backbone.View.extend({
     var view = new advisor.CourseView({ model: course });
     // Fix bug where element render multiple times
     var elm = view.render().el
-    console.log(elm)
     $('#' + elm.id).remove()
     this.$el.append(elm);
   },

advisor/mainapp/static/js/advisor/views/courseView.js

@@ -8,9 +8,21 @@ advisor.CourseView = Backbone.View.extend({
     this.listenTo(this.model, 'change', this.render);
   },
 
+  events: {
+    "click": "info"
+  },
+
   render: function() {
     this.$el.addClass('course ' + this.model.get('dept')).attr('id', 'course-' + this.model.get('id'))
       .html(this.template(this.model.toJSON()));
     return this;
   },
+
+  info: function() {
+    var m = this.model;
+    $('#course-info-title').html(m.get('dept') + ' ' + m.get('courseid'));
+    $('#course-info-description').text(m.get('description'));
+    $('#course-info-prereqs').text(m.get('prerequisites'));
+    $("#infoModal").modal();
+  }
 });

advisor/mainapp/static/js/advisor/views/semesterCollectionView.js

@@ -2,7 +2,7 @@ var advisor = advisor || {};
 
 advisor.SemesterCollectionView = Backbone.View.extend({
 
-  className: 'semester',
+  el: '#semesters',
 
   initialize: function() {
     this.addAll();
@@ -15,7 +15,7 @@ advisor.SemesterCollectionView = Backbone.View.extend({
   },
 
   addAll: function() {
-    this.$el.html('');
+    //this.$el.html('');
     advisor.Semesters.each(this.addOne, this);
   },
 

advisor/mainapp/static/js/advisor/views/semesterView.js

@@ -8,7 +8,6 @@ advisor.SemesterView = Backbone.View.extend({
   },
 
   events: {
-    "click .panel-heading": "render"
   },
 
   render: function() {
@@ -21,10 +20,8 @@ advisor.SemesterView = Backbone.View.extend({
   render_courses: function() {
     //this.$('.panel-body').html('');
     var that = this;
-    console.log(that.model.get('courses'))
     this.model.fetchRelated('courses', {
       success: function() {
-        console.log(that.model.get('courses'));
         var courseViews = new advisor.CourseCollectionView({el: that.el});
         courseViews.addAll(that.model.get('courses'));
       },

advisor/mainapp/templates/build.html

@@ -6,7 +6,7 @@
 
 {% block templates %}
 <script type="text/template" id="course-template">
-    <%= dept %> <%= courseid %>
+  <%= dept %> <%= courseid %>
 </script>
 <script type="text/template" id="program-template">
   <div class="panel-heading program-title">
@@ -30,11 +30,14 @@
 
 {% block content %}
 <div class="row semester-controls">
-  <div class="col-lg-2 col-lg-offset-8">
+  <div class="col-lg-2 col-lg-offset-7">
     <a href="#NewSemester" class="btn btn-block btn-lg btn-info">Semester <i class="fa fa-plus"></i> </a>
   </div>
   <div class="col-lg-2">
-    <a href="#Save" class="btn btn-block btn-lg btn-primary">Save</a>
+    <a id="save" href="#Save" class="btn btn-block btn-lg btn-primary">Save</a>
+  </div>
+  <div class="col-lg-1">
+    <a id="slide" href="#" class="btn btn-block btn-lg btn-inverse"><i class="fa fa-sort-desc fa-lg"></i></a>
   </div>
 </div>
 <div class="row gridster">
@@ -99,6 +102,23 @@
   </div>
   </div>
 </div>
+<div id="infoModal" class="modal fade">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 id="course-info-title" class="modal-title"></h4>
+      </div>
+      <div id="course-info-body" class="modal-body">
+        <p id="course-info-description"></p>
+        <strong>Prerequsities:</strong><p id="course-info-prereqs"></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 {% endblock %}
 {% block javascript %}
   {{ block.super }}

advisor/static/css/style.css

@@ -51,6 +51,7 @@ body {
   color: #171C21;
   display: inline-block;
   background-color: #2980B9;
+  cursor: pointer;
 }
 
 .CS {