mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 21:53:08 +00:00
161 lines
5.2 KiB
HTML
161 lines
5.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
|
|
<title>Implementing a Custom Type and View </title>
|
||
|
|
<script src="dist/main.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// First, we're going to create the Todo List type, so that users can create
|
||
|
|
// todo lists.
|
||
|
|
|
||
|
|
MCT.type('example.todo', new MCT.Type({
|
||
|
|
metadata: {
|
||
|
|
label: "To-Do List",
|
||
|
|
glyph: "2",
|
||
|
|
description: "A list of things that need to be done."
|
||
|
|
},
|
||
|
|
initialize: function (object) {
|
||
|
|
object.tasks = [
|
||
|
|
{ description: "This is a task." }
|
||
|
|
];
|
||
|
|
},
|
||
|
|
creatable: true
|
||
|
|
}));
|
||
|
|
|
||
|
|
/*
|
||
|
|
Refresh the page, and you should be able to create new Todo Lists.
|
||
|
|
unfortunately, when you navigate to a Todo list, you see a blank page. let's
|
||
|
|
fix that by adding a main view for that todo list.
|
||
|
|
|
||
|
|
If you're wondering why this is commented out, well, it's because we'll
|
||
|
|
write a new version later.
|
||
|
|
*/
|
||
|
|
|
||
|
|
// MCT.view(MCT.regions.main, {
|
||
|
|
// canView: function (domainObject) {
|
||
|
|
// return domainObject.type === 'example.todo';
|
||
|
|
// },
|
||
|
|
// view: function (domainObject) {
|
||
|
|
// function renderTask(task) {
|
||
|
|
// return [
|
||
|
|
// '<li>',
|
||
|
|
// '<input type="checkbox"' + (task.complete ? ' checked="true"' : '') + '>',
|
||
|
|
// '<span>' + task.description + '</span>',
|
||
|
|
// '</li>'
|
||
|
|
// ].join('');
|
||
|
|
// };
|
||
|
|
//
|
||
|
|
// function renderTaskList() {
|
||
|
|
// return [
|
||
|
|
// '<ul>',
|
||
|
|
// domainObject.tasks.map(renderTask).join(''),
|
||
|
|
// '</ul>'
|
||
|
|
// ].join('');
|
||
|
|
// };
|
||
|
|
//
|
||
|
|
// return {
|
||
|
|
// show: function (container) {
|
||
|
|
// container.innerHTML = renderTaskList();
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
/*
|
||
|
|
Refresh the page and you should see a todo list with checkboxes! Now let's
|
||
|
|
Allow you to add tasks by mutating the object. We'll add a toolbar view to
|
||
|
|
do this.
|
||
|
|
*/
|
||
|
|
|
||
|
|
MCT.view(MCT.regions.toolbar, {
|
||
|
|
canView: function (domainObject) {
|
||
|
|
return domainObject.type === 'example.todo';
|
||
|
|
},
|
||
|
|
view: function (domainObject) {
|
||
|
|
var mutableObject = MCT.Objects.getMutable(domainObject);
|
||
|
|
|
||
|
|
function addTask(event) {
|
||
|
|
var description = prompt('Task description');
|
||
|
|
var tasks = mutableObject.get('tasks');
|
||
|
|
tasks.push({
|
||
|
|
description: description,
|
||
|
|
complete: false
|
||
|
|
});
|
||
|
|
mutableObject.set('tasks', tasks);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
show: function (container) {
|
||
|
|
container.addEventListener('click', addTask);
|
||
|
|
container.innerHTML = '<button>Add Task</button>';
|
||
|
|
},
|
||
|
|
destroy: function (container) {
|
||
|
|
container.removeEventListener('click', addTask);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
Refresh the page, edit the todo list, and you'll have a button that allows
|
||
|
|
you to add tasks! Unfortunately, new tasks don't show in the list. Why?
|
||
|
|
Well, if your view should update on mutation, you need to set up the correct
|
||
|
|
listeners. Let's update the TodoView we made earlier:
|
||
|
|
*/
|
||
|
|
|
||
|
|
MCT.view(MCT.regions.main, {
|
||
|
|
canView: function(domainObject) {
|
||
|
|
return domainObject.type === 'example.todo'
|
||
|
|
},
|
||
|
|
view: function (domainObject) {
|
||
|
|
|
||
|
|
var mutableObject = MCT.Objects.getMutable(domainObject);
|
||
|
|
|
||
|
|
function renderTask(task) {
|
||
|
|
return [
|
||
|
|
'<li>',
|
||
|
|
'<input type="checkbox"' + (task.complete ? ' checked="true"' : '') + '>',
|
||
|
|
'<span>' + task.description + '</span>',
|
||
|
|
'</li>'
|
||
|
|
].join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTaskList(tasks) {
|
||
|
|
return [
|
||
|
|
'<ul>',
|
||
|
|
tasks.map(renderTask).join(''),
|
||
|
|
'</ul>'
|
||
|
|
].join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function onCheckboxChange(event) {
|
||
|
|
var checkbox = event.target;
|
||
|
|
var taskEl = checkbox.parentNode;
|
||
|
|
var taskList = taskEl.parentNode;
|
||
|
|
var taskIndex = [].slice.apply(taskList.children).indexOf(taskEl);
|
||
|
|
mutableObject.set('tasks[' + taskIndex + '].complete', checkbox.checked);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
show: function (container) {
|
||
|
|
container.innerHTML = renderTaskList(domainObject.tasks);
|
||
|
|
mutableObject.on('tasks', function (tasks) {
|
||
|
|
container.innerHTML = renderTaskList(tasks);
|
||
|
|
});
|
||
|
|
container.addEventListener('change', onCheckboxChange);
|
||
|
|
},
|
||
|
|
destroy: function () {
|
||
|
|
mutableObject.stopListening();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
MCT.run();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|