mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 13:17:53 +00:00
145 lines
4.3 KiB
HTML
145 lines
4.3 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>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script type="text/babel">
|
||
|
|
|
||
|
|
// 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.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var Task = React.createClass({
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<li>
|
||
|
|
<input type="checkbox"
|
||
|
|
checked={this.props.checked}/>
|
||
|
|
<span>{this.props.description}</span>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var TaskList = React.createClass({
|
||
|
|
render: function () {
|
||
|
|
var taskNodes = this.props.tasks.map(function(task) {
|
||
|
|
return (
|
||
|
|
<Task checked={task.checked}
|
||
|
|
description={task.description}/>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<ul>
|
||
|
|
{taskNodes}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
MCT.view(MCT.regions.main, {
|
||
|
|
canView: function (domainObject) {
|
||
|
|
return domainObject.type === 'example.todo';
|
||
|
|
},
|
||
|
|
view: function (domainObject) {
|
||
|
|
var mutableObject = MCT.Objects.getMutable(domainObject);
|
||
|
|
|
||
|
|
return {
|
||
|
|
show: function (container) {
|
||
|
|
ReactDOM.render(
|
||
|
|
<TaskList tasks={domainObject.tasks}/>,
|
||
|
|
container
|
||
|
|
);
|
||
|
|
mutableObject.on('tasks', function (tasks) {
|
||
|
|
ReactDOM.render(
|
||
|
|
<TaskList tasks={tasks}/>,
|
||
|
|
container
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
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.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var TaskToolbar = React.createClass({
|
||
|
|
render: function () {
|
||
|
|
return (
|
||
|
|
<button onClick={this.props.addTask}>Add Task</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
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) {
|
||
|
|
ReactDOM.render(
|
||
|
|
<TaskToolbar addTask={addTask}/>,
|
||
|
|
container
|
||
|
|
);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
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.run();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|