todomvc: progress
This commit is contained in:
parent
d316449538
commit
e18b2a8062
|
@ -23,8 +23,8 @@
|
||||||
<input class="toggle-all" type="checkbox">
|
<input class="toggle-all" type="checkbox">
|
||||||
<label for="toggle-all">Mark all as complete</label>
|
<label for="toggle-all">Mark all as complete</label>
|
||||||
<ul class="todo-list" id="todo-list">
|
<ul class="todo-list" id="todo-list">
|
||||||
<template id="todo-list-item-template">
|
<template id="todo-list-item-view-template">
|
||||||
<li data-id="{{id}}" class="">
|
<li data-id="{{id}}" class="{{hidden_class}} {{completed_class}}">
|
||||||
<div class="view">
|
<div class="view">
|
||||||
<input class="toggle" type="checkbox" {{checked}}>
|
<input class="toggle" type="checkbox" {{checked}}>
|
||||||
<label>{{task}}</label>
|
<label>{{task}}</label>
|
||||||
|
@ -32,6 +32,11 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
<template id="todo-list-item-edit-template">
|
||||||
|
<li data-id="{{id}}" class="editing">
|
||||||
|
<input value="{{task}}" class="edit">
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
|
assertion type todo(id, task, completed);
|
||||||
|
|
||||||
assertion type todo(id, task, completed, assignee);
|
|
||||||
message type deleteTodo(id);
|
message type deleteTodo(id);
|
||||||
|
assertion type show(completed);
|
||||||
|
assertion type currentLocationHash(hash);
|
||||||
|
|
||||||
var nextId = 0;
|
var nextId = 0;
|
||||||
function addTodo(task) {
|
function addTodo(task) {
|
||||||
|
@ -10,39 +10,101 @@ function addTodo(task) {
|
||||||
this.ui = new Syndicate.UI.Anchor();
|
this.ui = new Syndicate.UI.Anchor();
|
||||||
this.task = task;
|
this.task = task;
|
||||||
this.completed = false;
|
this.completed = false;
|
||||||
this.assignee = null;
|
this.editing = false;
|
||||||
|
this.visible = false;
|
||||||
|
|
||||||
react {
|
react {
|
||||||
assert todo(this.id, this.task, this.completed, this.assignee);
|
assert todo(this.id, this.task, this.completed);
|
||||||
|
during show(this.completed) {
|
||||||
|
do {
|
||||||
|
this.visible = true;
|
||||||
|
console.log('shown', this.id, this.task, this.visible);
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
this.visible = false;
|
||||||
|
console.log('hidden', this.id, this.task, this.visible);
|
||||||
|
}
|
||||||
|
}
|
||||||
assert this.ui.html('#todo-list',
|
assert this.ui.html('#todo-list',
|
||||||
Mustache.render($('#todo-list-item-template').html(), {
|
Mustache.render($(this.editing
|
||||||
id: this.id,
|
? '#todo-list-item-edit-template'
|
||||||
checked: this.completed ? "checked" : "",
|
: '#todo-list-item-view-template').html(),
|
||||||
task: this.task
|
{
|
||||||
}));
|
completed_class: this.completed ? "completed" : "",
|
||||||
on message this.ui.event('.toggle', 'click', $e) {
|
hidden_class: this.visible ? "" : "hidden",
|
||||||
console.log('toggle clicked');
|
id: this.id,
|
||||||
this.completed = e.target.value;
|
checked: this.completed ? "checked" : "",
|
||||||
|
task: this.task
|
||||||
|
}));
|
||||||
|
on message this.ui.event('.toggle', 'change', $e) {
|
||||||
|
this.completed = e.target.checked;
|
||||||
}
|
}
|
||||||
on message this.ui.event('.destroy', 'click', _) {
|
on message this.ui.event('.destroy', 'click', _) {
|
||||||
console.log('destroy clicked');
|
console.log('destroy clicked');
|
||||||
:: deleteTodo(this.id);
|
:: deleteTodo(this.id);
|
||||||
}
|
}
|
||||||
|
on message this.ui.event('label', 'dblclick', _) {
|
||||||
|
this.editing = true;
|
||||||
|
}
|
||||||
|
on message this.ui.event('input.edit', 'change', $e) {
|
||||||
|
this.task = e.target.value;
|
||||||
|
this.editing = false;
|
||||||
|
}
|
||||||
} until {
|
} until {
|
||||||
case message deleteTodo(this.id);
|
case message deleteTodo(this.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function () {
|
ground dataspace G {
|
||||||
ground dataspace G {
|
Syndicate.UI.spawnUIDriver();
|
||||||
Syndicate.UI.spawnUIDriver();
|
|
||||||
|
|
||||||
addTodo('Buy milk');
|
actor {
|
||||||
addTodo('Buy bread');
|
react {
|
||||||
addTodo('Finish PhD');
|
on message Syndicate.UI.globalEvent('.new-todo', 'change', $e) {
|
||||||
|
addTodo(e.target.value);
|
||||||
|
e.target.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
G.dataspace.setOnStateChange(function (mux, patch) {
|
actor {
|
||||||
$("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
|
this.hash = hashFrom(document.location.toString());
|
||||||
});
|
function hashFrom(u) {
|
||||||
|
var i = u.indexOf('#');
|
||||||
|
return (i !== -1) ? u.slice(i + 1) : '/';
|
||||||
|
}
|
||||||
|
react {
|
||||||
|
assert currentLocationHash(this.hash);
|
||||||
|
on message Syndicate.UI.windowEvent('hashchange', $e) {
|
||||||
|
this.hash = hashFrom(e.newURL);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
actor {
|
||||||
|
react {
|
||||||
|
during currentLocationHash('/') {
|
||||||
|
do { console.log('set hash to /'); }
|
||||||
|
assert show(true);
|
||||||
|
assert show(false);
|
||||||
|
}
|
||||||
|
during currentLocationHash('/active') {
|
||||||
|
do { console.log('set hash to /active'); }
|
||||||
|
assert show(false);
|
||||||
|
}
|
||||||
|
during currentLocationHash('/completed') {
|
||||||
|
do { console.log('set hash to /completed'); }
|
||||||
|
assert show(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addTodo('Buy milk');
|
||||||
|
addTodo('Buy bread');
|
||||||
|
addTodo('Finish PhD');
|
||||||
|
}
|
||||||
|
|
||||||
|
G.dataspace.setOnStateChange(function (mux, patch) {
|
||||||
|
$("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue