Skip to content

Commit

Permalink
Upgraded to backbone 0.9.10
Browse files Browse the repository at this point in the history 
Upgraded to bootstrap 2.3.1
Fixed issue mgage#26 and improved the coding of the Problem Set Detail page.
Fixed issue mgage#25.
  • Loading branch information
@pstaabp
pstaabp committed Mar 4, 2013
1 parent e9b259a commit 3f8efe7
Show file tree
Hide file tree
Showing 13 changed files with 1,713 additions and 1,109 deletions.
4 changes: 2 additions & 2 deletions htdocs/css/problemsetlist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ label.checklist {display: inline; margin-left: 8px;}

.hw-assigned {color: blue;}

#probSetList {margin:0;}

#probSetList {margin:0}
.prob-set-container {overflow-y: scroll;}
.prob-value {width: 20px;}

.loading {background-color: orange;}
Expand Down
87 changes: 49 additions & 38 deletions htdocs/html-templates/homework-manager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,14 @@ <h3>Help for the Homework Manager</h3>
</script>

<script type="text/template" id="hw-set-list-template">
<%if(loading){%>
<div id="set-list">Loading Homework Sets...
<img src='/webwork2_files/images/ajax-loader-small.gif'></div>

<%} else {%>
<div style='font-size:110%; font-weight:bold'>Homework Sets</div>
<div class="prob-set-container">
<ul id='probSetList' class='btn-group btn-group-vertical'></ul>
</div>
<div class="btn-group">

<a class="btn dropdown-toggle btn-small" data-toggle="dropdown" href="#">
Expand All @@ -121,6 +126,8 @@ <h3>Help for the Homework Manager</h3>
</ul>
</div>

<%}%>

</script>

<script type="text/template" id="add-hw-set-template">
Expand Down Expand Up @@ -255,22 +262,52 @@ <h3>Help for the Homework Manager</h3>

<script type="text/template" id="HW-detail-template">
<ul class="nav nav-tabs" id="problem-set-tabs">
<li class="active"><a href="#prob-tab">Problems</a></li>
<li><a href="#property-tab">Properties</a></li>
<li><a href="#user-assign-tab">Assign to Users</a></li>
<li><a href="#user-customize-tab">Customize Set to Users</a></li>
<li class="active"><a href="#problem-list-tab" data-toggle="tab">Problems</a></li>
<li><a href="#property-tab" data-toggle="tab">Properties</a></li>
<li><a href="#user-assign-tab" data-toggle="tab">Assign to Users</a></li>
<li><a href="#user-customize-tab" data-toggle="tab">Customize Set to Users</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="prob-tab"><p>Click on a Problem Set Name on the left to view the set.</p>
<div class="prob-list"></div></div>
<div class="tab-pane" id="property-tab">Problem Set Properties (to be implemented)</div>
<div class="tab-pane" id="user-assign-tab">Assign to Users (to be implemented)</div>
<div class="tab-pane" id="user-customize-tab">Customize Set to Users (to be implemented)</div>
</div>

<div class="tab-pane active" id="problem-list-tab"><p>Click on a Problem Set Name on the left to view the set.</p></div>
<div class="tab-pane" id="property-tab"></div>
<div class="tab-pane" id="user-assign-tab"></div>
<div class="tab-pane" id="user-customize-tab"></div>
</div>
</script>

<script type="text/template" id="problem-set-props-template">

</script>

<script type="text/template" id="assign-users-template">
<p>Select the users and the problem sets then click the button to change the assignment dates. </p>
<p><button type="button" id="assign-users-sets" class="btn">Assign Users to Sets</button></p>

<table class="table">
<thead><tr><th>Open Date</th><th>Due Date</th><th>Answer Date</th></tr></thead>
<tbody>
<tr id="assign-users-due-date-row"></tr>
</tbody>
</table>

<table class="table">
<thead>
<tr><th>Users</th><th><input type="checkbox" id="select-users-checkbox" class="select-all">&nbsp;Select All</th>
<th>Sets</th><th><input type="checkbox" id="select-sets-checkbox" class="select-all">&nbsp;Select All</th></tr>
</thead>
<tbody>
<tr><td colspan="2"><ul id='assign-users-list' class="no-bullets scrollable"></ul></td>
<td colspan="2"><ul id='assign-sets-list' class="no-bullets scrollable"></ul></td></tr>
</tbody>
</table>




</script>


<script type="text/template" id="old-library-browswer-template">
<div class="btn-group span2">

Expand Down Expand Up @@ -316,29 +353,3 @@ <h3>Help for the Homework Manager</h3>
<%= data %>
</script>

<script type="text/template" id="assign-users-template">
<p>Select the users and the problem sets then click the button to change the assignment dates. </p>
<p><button type="button" id="assign-users-sets" class="btn">Assign Users to Sets</button></p>

<table class="table">
<thead><tr><th>Open Date</th><th>Due Date</th><th>Answer Date</th></tr></thead>
<tbody>
<tr id="assign-users-due-date-row"></tr>
</tbody>
</table>

<table class="table">
<thead>
<tr><th>Users</th><th><input type="checkbox" id="select-users-checkbox" class="select-all">&nbsp;Select All</th>
<th>Sets</th><th><input type="checkbox" id="select-sets-checkbox" class="select-all">&nbsp;Select All</th></tr>
</thead>
<tbody>
<tr><td colspan="2"><ul id='assign-users-list' class="no-bullets scrollable"></ul></td>
<td colspan="2"><ul id='assign-sets-list' class="no-bullets scrollable"></ul></td></tr>
</tbody>
</table>




</script>
152 changes: 79 additions & 73 deletions htdocs/js/apps/HomeworkManager/HWDetailView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,62 @@ define(['Backbone',
'../../lib/webwork/views/EditableCell',
'../../lib/webwork/views/ProblemListView',
'../../lib/webwork/models/ProblemList',
'../../lib/webwork/views/UserListView','config'],
'../../lib/webwork/views/UserListView','config','bootstrap'],
function(Backbone, _,EditableCell,ProblemListView,ProblemList,UserListView,config){
var HWDetailView = Backbone.View.extend({
className: "set-detail-view",
tagName: "div",
initialize: function () {
_.bindAll(this,'render','changeHWSet','renderProblems','updateNumProblems');
_.bindAll(this,'render','changeHWSet','updateNumProblems');
this.parent = this.options.parent;
this.dispatcher = _.clone(Backbone.Events);
this.render();
this.problemsView = new ProblemsView({parent: this});
this.usersAssignedView = new AssignUsersView({parent: this});
this.propertiesView = new PropertySetDetailView({parent: this});
this.customizeUserAssignView = new CustomizeUserAssignView({parent: this});

},
render: function () {
var self = this;

// all of the details of a problem set are in tabs.
// problems : #list-of-problems
// properties: #property-tab
// Assign to Users: #user-assign-tab
// customize set to users: #user-customize-tab
//
// render the set only when it is visible.

this.$el.html(_.template($("#HW-detail-template").html()));
// activate the tabs
this.problemsView = new ProblemsView({parent: this, el: $("#problem-list-tab")});
this.usersAssignedView = new AssignUsersView({parent: this, el: $("#user-assign-tab")});
this.propertiesView = new PropertySetDetailView({parent: this, el: $("#property-tab")});
this.customizeUserAssignView = new CustomizeUserAssignView({parent: this, el: $("#user-customize-tab")});

$('#problem-set-tabs a').click(function (evt) {
evt.preventDefault();
$(this).tab('show');
});

$('a[href="#property-tab"]').on('shown', function (evt) {
self.propertiesView.render();
});
$('a[href="#user-assign-tab"]').on('shown', function (evt) {
self.usersAssignedView.render();
});

$('a[href="#user-customize-tab"]').on('shown', function (evt) {
self.customizeUserAssignView.render();
});


return this;

},
changeHWSet: function (setName)
{
var self = this;
$("#view-header-list div[data-view='problem-set']").html("Problem Set Details for " + setName);
$("#view-header-list div[data-view='problem-set']").html("Problem Set Details for " + setName)

$("#problem-set-tabs a:first").tab("show"); // shows the problems

Expand All @@ -36,22 +77,15 @@ define(['Backbone',

if(this.model.problems){
console.log("changing the HW Set to " + setName);
this.renderProblems();
this.problemsView.render();
this.model.problems.on("add",function (){
console.log("Added a Problem");
self.parent.announce.addMessage("Problem Added to set: " + self.model.get("set_id"));
});

self.propertyView = new HWPropertiesView({el: $("#property-tab"), model: this.model});
self.usersAssignedView = new AssignUsersView({users: self.parent.users, model: self.model});
self.customizeUserAssignView = new CustomizeUserAssignView({users: self.parent.users, model: self.model});
$("#num-users-assigned").html(length + " of " + self.parent.users.length);
$("#user-assign-tab").html(self.usersAssignedView.el);
$("#user-customize-tab").html(self.customizeUserAssignView.el);

// This sets messages
this.model.problems.on("deleteProblem",function (setName,place) {
var str = "Problem #" + (place +1) + " Deleted from set: " + setName + " <br> "
var str = "Problem #" + (place +1) + " deleted from set: " + setName + " <br> "
+ "To undo this, click the Undo button above the problem list. ";
self.parent.announce.addMessage(str);
});
Expand All @@ -69,45 +103,15 @@ define(['Backbone',
console.log(self.model.assignedUsers);
self.usersAssignedView.updateUserList();
});

this.model.problems.on("num-problems-shown", self.updateNumProblems);

} else {
this.model.problems = new ProblemList({type: "Problem Set", setName: setName});
this.model.problems.on("fetchSuccess",function() {self.changeHWSet(setName)});
}

this.dispatcher.off("num-problems-shown");
this.dispatcher.on("num-problems-shown", self.updateNumProblems);
},
render: function () {
var self = this;
this.$el.html(_.template($("#HW-detail-template").html()));
// activate the tabs
$('#problem-set-tabs a').click(function (evt) {
evt.preventDefault();

switch($(evt.target).attr("href")){
case "#user-assign-tab":
self.usersAssignedView.render();
break;
case "#user-customize-tab":
self.customizeUserAssignView.render();
break;
}


$(this).tab('show');
});


return this;

},
renderProblems: function (){
console.log("showing the problems for problem set " + this.model.get("set_id"));
$("#prob-tab").html(_.template($("#problem-set-header").html(),{set: this.model.get("set_id")}));
var plv = new ProblemListView({el: this.$("#list-of-problems"), parent: this, collection: this.model.problems,
reorderable: true, deletable: true, draggable: false, showPoints: true});
plv.render();
},
updateNumProblems: function () {
console.log("firing num-problems-shown");
Expand All @@ -116,26 +120,33 @@ define(['Backbone',
}
});

var HWPropertiesView = Backbone.View.extend({
var ProblemsView = Backbone.View.extend({
initialize: function () {
_.bindAll(this,'render');
_.extend(this,this.options);
this.render();
this.parent = this.options.parent;
},
render: function () {
// Update the HW Properties Tab

console.log("in HWPropertiesView render");
console.log("showing the problems for problem set " + this.parent.model.get("set_id"));
$("#prob-tab").html(_.template($("#problem-set-header").html(),{set: this.parent.model.get("set_id")}));
var plv = new ProblemListView({el: this.el, parent: this, collection: this.parent.model.problems,
reorderable: true, deletable: true, draggable: false, showPoints: true});
plv.render();
}
});

var PropertySetDetailView = Backbone.View.extend({
initialize: function () {
_.bindAll(this,'render');
this.parent = this.options.parent;
},
render: function () {
console.log(this.parent.model);
this.$el.html(_.template($("#hwset-dates-tmpl").html()));


this.$(".due-date-row").append( (new EditableCell({model : this.model, type: "datetime", property: "open_date"})).render().el);
this.$(".due-date-row").append( (new EditableCell({model : this.model, type: "datetime", property: "due_date"})).render().el);
this.$(".due-date-row").append( (new EditableCell({model : this.model, type: "datetime", property: "answer_date"})).render().el);

this.$(".hwset-visible").html((new EditableCell({model: this.model, property: "visible"})).render().el);
this.$(".reduced-credit").html((new EditableCell({model: this.model, property: "enable_reduced_scoring"})).render().el);
this.$(".due-date-row").append( (new EditableCell({model : this.parent.model, type: "datetime", property: "open_date"})).render().el);
this.$(".due-date-row").append( (new EditableCell({model : this.parent.model, type: "datetime", property: "due_date"})).render().el);
this.$(".due-date-row").append( (new EditableCell({model : this.parent.model, type: "datetime", property: "answer_date"})).render().el);
this.$(".hwset-visible").html((new EditableCell({model: this.parent.model, property: "visible"})).render().el);
this.$(".reduced-credit").html((new EditableCell({model: this.parent.model, property: "enable_reduced_scoring"})).render().el);

}
});
Expand All @@ -144,13 +155,13 @@ define(['Backbone',
tagName: "div",
initialize: function () {
_.bindAll(this,'render','selectAll','assignToSelected','updateUserList');
_.extend(this,this.options);
this.parent = this.options.parent;
},
render: function () {
var self = this;
this.$el.html($("#users-assigned-tmpl").html());

var allUsers = this.users.sortBy(function(_user) { return _user.get("last_name");});
var allUsers = this.parent.parent.users.sortBy(function(_user) { return _user.get("last_name");});

this.usersListView = new UserListView({users: allUsers, checked: false, el: this.$("#users-assigned-row")});
this.updateUserList();
Expand All @@ -161,21 +172,21 @@ define(['Backbone',
"click #classlist-select-all": "selectAll"},
updateUserList: function () {
this.usersListView.render();
this.usersListView.highlightUsers(this.model.assignedUsers);
this.usersListView.disableCheckboxForUsers(this.model.assignedUsers);
this.usersListView.highlightUsers(this.parent.model.assignedUsers);
this.usersListView.disableCheckboxForUsers(this.parent.model.assignedUsers);
},
assignToSelected: function ()
{
var selectedUsers = _($("input:checkbox.classlist-li[checked='checked']")).map(function(v){ return $(v).data("username")});
console.log(selectedUsers)
console.log("assigning to selected users");

this.model.assignToUsers(_.difference(selectedUsers,this.model.assignedUsers));
this.model.assignedUsers = selectedUsers;
this.parent.model.assignToUsers(_.difference(selectedUsers,this.parent.model.assignedUsers));
this.parent.model.assignedUsers = selectedUsers;
},
selectAll: function (){
this.$(".classlist-li").attr("checked",this.$("#classlist-select-all").attr("checked")==="checked");
_(this.model.assignedUsers).each(function(_user){
_(this.parent.model.assignedUsers).each(function(_user){
self.$(".classlist-li[data-username='"+ _user + "']").prop("checked",true);
});
}
Expand All @@ -186,8 +197,7 @@ define(['Backbone',
tagName: "div",
initialize: function () {
_.bindAll(this,'render','selectAll','customizeSelected','unassignUsers');
_.extend(this,this.options);
this.render();
this.parent = this.options.parent;
},


Expand Down Expand Up @@ -217,10 +227,6 @@ define(['Backbone',
},
selectAll: function (){
this.usersListView.checkAll(this.$("#custom-select-all").prop("checked"));
/* this.$(".classlist-li").attr("checked",);
_(this.assignedUsers).each(function(_user){
self.$(".classlist-li[data-username='"+ _user + "']").prop("checked",true);
});*/
},
unassignUsers: function(){
var users = this.usersListView.getSelectedUsers();
Expand Down
Loading

0 comments on commit 3f8efe7

Please sign in to comment.