mirror of
https://github.com/nasa/openmct.git
synced 2025-03-06 06:01:51 +00:00
Tidy todo views, remove unnecessary code
This commit is contained in:
Pete Richards
Andrew Henry
parent
d341a8be97
commit
10e90519c0
@ -1,14 +1,14 @@
|
||||
<div class="example-todo">
|
||||
<div class="example-button-group">
|
||||
<a class="example-todo-button-all">All</a>
|
||||
<a class="example-todo-button-incomplete">Incomplete</a>
|
||||
<a class="example-todo-button-complete">Complete</a>
|
||||
<a class="example-todo-button" data-filter="all">All</a>
|
||||
<a class="example-todo-button" data-filter="incomplete">Incomplete</a>
|
||||
<a class="example-todo-button" data-filter="complete">Complete</a>
|
||||
</div>
|
||||
|
||||
<ul class="example-todo-task-list">
|
||||
</ul>
|
||||
|
||||
<div class="example-message">
|
||||
<div class="example-no-tasks">
|
||||
There are no tasks to show.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,76 +25,71 @@ define([
|
||||
});
|
||||
|
||||
function TodoView(domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
this.mutableObject = mct.Objects.getMutable(domainObject);
|
||||
|
||||
this.tasks = domainObject.tasks;
|
||||
this.filterValue = "all";
|
||||
this.render = this.render.bind(this);
|
||||
this.objectChanged = this.objectChanged.bind(this);
|
||||
|
||||
this.setTaskStatus = this.setTaskStatus.bind(this);
|
||||
this.selectTask = this.selectTask.bind(this);
|
||||
|
||||
this.mutableObject = mct.Objects.getMutable(domainObject);
|
||||
this.mutableObject.on('tasks', this.updateTasks.bind(this));
|
||||
|
||||
this.$el = $(todoTemplate);
|
||||
this.$emptyMessage = this.$el.find('.example-no-tasks');
|
||||
this.$taskList = this.$el.find('.example-todo-task-list');
|
||||
this.$el.on('click', '[data-filter]', this.updateFilter.bind(this));
|
||||
this.$el.on('change', 'li', this.setTaskStatus.bind(this));
|
||||
this.$el.on('click', '.example-task-description', this.selectTask.bind(this));
|
||||
|
||||
this.updateSelection = this.updateSelection.bind(this);
|
||||
mct.selection.on('change', this.updateSelection);
|
||||
}
|
||||
|
||||
TodoView.prototype.objectChanged = function (object) {
|
||||
if (this.mutableObject) {
|
||||
this.mutableObject.stopListening();
|
||||
}
|
||||
//Swap out local object instance for fresh one
|
||||
this.domainObject = object;
|
||||
this.mutableObject = mct.Objects.getMutable(object);
|
||||
this.render();
|
||||
|
||||
//If anything on object changes, re-render view
|
||||
this.mutableObject.on("*", this.objectChanged);
|
||||
};
|
||||
|
||||
TodoView.prototype.show = function (container) {
|
||||
var self = this;
|
||||
this.destroy();
|
||||
|
||||
self.$els = $(todoTemplate);
|
||||
self.$buttons = {
|
||||
all: self.$els.find('.example-todo-button-all'),
|
||||
incomplete: self.$els.find('.example-todo-button-incomplete'),
|
||||
complete: self.$els.find('.example-todo-button-complete')
|
||||
};
|
||||
|
||||
$(container).empty().append(self.$els);
|
||||
|
||||
|
||||
self.initialize();
|
||||
self.render();
|
||||
|
||||
mct.selection.on('change', self.render);
|
||||
$(container).empty().append(this.$el);
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoView.prototype.destroy = function () {
|
||||
if (this.mutableObject) {
|
||||
this.mutableObject.stopListening();
|
||||
}
|
||||
mct.selection.off('change', this.render);
|
||||
this.mutableObject.stopListening();
|
||||
mct.selection.off('change', this.updateSelection);
|
||||
};
|
||||
|
||||
TodoView.prototype.setFilter = function (value) {
|
||||
this.filterValue = value;
|
||||
TodoView.prototype.updateSelection = function (selection) {
|
||||
if (selection && selection.length) {
|
||||
this.selection = selection[0].index;
|
||||
} else {
|
||||
this.selection = -1;
|
||||
}
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoView.prototype.initialize = function () {
|
||||
Object.keys(this.$buttons).forEach(function (k) {
|
||||
this.$buttons[k].on('click', this.setFilter.bind(this, k));
|
||||
}, this);
|
||||
|
||||
//If anything on object changes, re-render view
|
||||
this.mutableObject.on("*", this.objectChanged);
|
||||
TodoView.prototype.updateTasks = function (tasks) {
|
||||
this.tasks = tasks;
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoView.prototype.render = function () {
|
||||
var $els = this.$els;
|
||||
var mutableObject = mct.Objects.getMutable(this.domainObject);
|
||||
var tasks = this.domainObject.tasks;
|
||||
var $message = $els.find('.example-message');
|
||||
var $list = $els.find('.example-todo-task-list');
|
||||
var $buttons = this.$buttons;
|
||||
var filters = {
|
||||
TodoView.prototype.updateFilter = function (e) {
|
||||
this.filterValue = $(e.target).data('filter');
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoView.prototype.setTaskStatus = function (e) {
|
||||
var $checkbox = $(e.target);
|
||||
var taskIndex = $checkbox.data('taskIndex');
|
||||
var completed = !!$checkbox.prop('checked');
|
||||
this.tasks[taskIndex].completed = completed;
|
||||
this.mutableObject.set('tasks[' + taskIndex + '].checked', completed);
|
||||
};
|
||||
|
||||
TodoView.prototype.selectTask = function (e) {
|
||||
var taskIndex = $(e.target).data('taskIndex');
|
||||
mct.selection.clear();
|
||||
mct.selection.select({index: taskIndex});
|
||||
};
|
||||
|
||||
TodoView.prototype.getFilteredTasks = function () {
|
||||
return this.tasks.filter({
|
||||
all: function () {
|
||||
return true;
|
||||
},
|
||||
@ -104,104 +99,93 @@ define([
|
||||
complete: function (task) {
|
||||
return task.completed;
|
||||
}
|
||||
};
|
||||
var filterValue = this.filterValue;
|
||||
var selected = mct.selection.selected();
|
||||
}[this.filterValue]);
|
||||
};
|
||||
|
||||
Object.keys($buttons).forEach(function (k) {
|
||||
$buttons[k].toggleClass('selected', filterValue === k);
|
||||
});
|
||||
tasks = tasks.filter(filters[filterValue]);
|
||||
TodoView.prototype.render = function () {
|
||||
var filteredTasks = this.getFilteredTasks();
|
||||
this.$emptyMessage.toggle(filteredTasks.length === 0);
|
||||
this.$taskList.empty();
|
||||
filteredTasks
|
||||
.forEach(function (task) {
|
||||
var $taskEl = $(taskTemplate),
|
||||
taskIndex = this.tasks.indexOf(task);
|
||||
$taskEl.find('.example-task-checked')
|
||||
.prop('checked', task.completed)
|
||||
.attr('data-task-index', taskIndex);
|
||||
$taskEl.find('.example-task-description')
|
||||
.text(task.description)
|
||||
.toggleClass('selected', taskIndex === this.selection)
|
||||
.attr('data-task-index', taskIndex);
|
||||
|
||||
$list.empty();
|
||||
tasks.forEach(function (task, index) {
|
||||
var $taskEls = $(taskTemplate);
|
||||
var $checkbox = $taskEls.find('.example-task-checked');
|
||||
var $desc = $taskEls.find('.example-task-description');
|
||||
$checkbox.prop('checked', task.completed);
|
||||
$desc.text(task.description);
|
||||
|
||||
$checkbox.on('change', function () {
|
||||
var checked = !!$checkbox.prop('checked');
|
||||
mutableObject.set("tasks." + index + ".completed", checked);
|
||||
});
|
||||
|
||||
$desc.on('click', function () {
|
||||
mct.selection.clear();
|
||||
mct.selection.select({ index: index });
|
||||
});
|
||||
|
||||
if (selected.length > 0 && selected[0].index === index) {
|
||||
$desc.addClass('selected');
|
||||
}
|
||||
|
||||
$list.append($taskEls);
|
||||
});
|
||||
|
||||
$message.toggle(tasks.length < 1);
|
||||
this.$taskList.append($taskEl);
|
||||
}, this);
|
||||
};
|
||||
|
||||
function TodoToolbarView(domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
this.handleSelectionChange = this.handleSelectionChange.bind(this);
|
||||
this.tasks = domainObject.tasks;
|
||||
this.mutableObject = mct.Objects.getMutable(domainObject);
|
||||
|
||||
this.handleSelectionChange = this.handleSelectionChange.bind(this);
|
||||
|
||||
this.mutableObject.on('tasks', this.updateTasks.bind(this));
|
||||
mct.selection.on('change', this.handleSelectionChange);
|
||||
this.$el = $(toolbarTemplate);
|
||||
this.$remove = this.$el.find('.example-remove');
|
||||
this.$el.on('click', '.example-add', this.addTask.bind(this));
|
||||
this.$el.on('click', '.example-remove', this.removeTask.bind(this));
|
||||
}
|
||||
|
||||
TodoToolbarView.prototype.show = function (container) {
|
||||
var self = this;
|
||||
this.destroy();
|
||||
|
||||
var $els = $(toolbarTemplate);
|
||||
var $add = $els.find('a.example-add');
|
||||
var $remove = $els.find('a.example-remove');
|
||||
|
||||
$(container).append($els);
|
||||
|
||||
$add.on('click', function () {
|
||||
var $dialog = $(dialogTemplate),
|
||||
view = {
|
||||
show: function (container) {
|
||||
$(container).append($dialog);
|
||||
},
|
||||
destroy: function () {}
|
||||
};
|
||||
|
||||
mct.dialog(view, "Add a Task").then(function () {
|
||||
var description = $dialog.find('input').val();
|
||||
var tasks = self.domainObject.tasks;
|
||||
tasks.push({ description: description });
|
||||
self.mutableObject.set('tasks', tasks);
|
||||
});
|
||||
});
|
||||
$remove.on('click', function () {
|
||||
var index = mct.selection.selected()[0].index;
|
||||
if (index !== undefined) {
|
||||
var tasks = self.mutableObject.tasks.filter(function (t, i) {
|
||||
return i !== index;
|
||||
});
|
||||
self.mutableObject.set("tasks", tasks);
|
||||
self.mutableObject.set("selected", undefined);
|
||||
mct.selection.clear();
|
||||
}
|
||||
});
|
||||
self.$remove = $remove;
|
||||
self.handleSelectionChange();
|
||||
mct.selection.on('change', self.handleSelectionChange);
|
||||
TodoToolbarView.prototype.updateTasks = function (tasks) {
|
||||
this.tasks = tasks;
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.handleSelectionChange = function () {
|
||||
var selected = mct.selection.selected();
|
||||
if (this.$remove) {
|
||||
this.$remove.toggle(selected.length > 0);
|
||||
TodoToolbarView.prototype.addTask = function () {
|
||||
var $dialog = $(dialogTemplate),
|
||||
view = {
|
||||
show: function (container) {
|
||||
$(container).append($dialog);
|
||||
},
|
||||
destroy: function () {}
|
||||
};
|
||||
|
||||
mct.dialog(view, "Add a Task").then(function () {
|
||||
var description = $dialog.find('input').val();
|
||||
this.tasks.push({description: description});
|
||||
this.mutableObject.set('tasks', this.tasks);
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.removeTask = function () {
|
||||
if (this.selection >= 0) {
|
||||
this.tasks.splice(this.selection, 1);
|
||||
this.mutableObject.set('tasks', this.tasks);
|
||||
mct.selection.clear();
|
||||
this.render();
|
||||
}
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.show = function (container) {
|
||||
$(container).empty().append(this.$el);
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.render = function () {
|
||||
this.$remove.toggle(this.selection >= 0);
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.handleSelectionChange = function (selection) {
|
||||
if (selection && selection.length) {
|
||||
this.selection = selection[0].index;
|
||||
} else {
|
||||
this.selection = -1;
|
||||
}
|
||||
this.render();
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.destroy = function () {
|
||||
mct.selection.off('change', this.handleSelectionChange);
|
||||
this.$remove = undefined;
|
||||
if (this.mutableObject) {
|
||||
this.mutableObject.stopListening();
|
||||
}
|
||||
this.mutableObject.stopListening();
|
||||
};
|
||||
|
||||
mct.type('example.todo', todoType);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user