todomvc: progress

js/examples/todo/index.html

@@ -23,8 +23,8 @@
 	<input class="toggle-all" type="checkbox">
 	<label for="toggle-all">Mark all as complete</label>
 	<ul class="todo-list" id="todo-list">
-          <template id="todo-list-item-template">
-            <li data-id="{{id}}" class="">
+          <template id="todo-list-item-view-template">
+            <li data-id="{{id}}" class="{{hidden_class}} {{completed_class}}">
               <div class="view">
                 <input class="toggle" type="checkbox" {{checked}}>
                 <label>{{task}}</label>
@@ -32,6 +32,11 @@
               </div>
             </li>
           </template>
+          <template id="todo-list-item-edit-template">
+            <li data-id="{{id}}" class="editing">
+              <input value="{{task}}" class="edit">
+            </li>
+          </template>
         </ul>
       </section>
       <footer class="footer">

js/examples/todo/index.js

@@ -1,7 +1,7 @@
-
-
-assertion type todo(id, task, completed, assignee);
+assertion type todo(id, task, completed);
 message type deleteTodo(id);
+assertion type show(completed);
+assertion type currentLocationHash(hash);
 
 var nextId = 0;
 function addTodo(task) {
@@ -10,39 +10,101 @@ function addTodo(task) {
     this.ui = new Syndicate.UI.Anchor();
     this.task = task;
     this.completed = false;
-    this.assignee = null;
+    this.editing = false;
+    this.visible = false;
+
     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',
-                     Mustache.render($('#todo-list-item-template').html(), {
-                       id: this.id,
-                       checked: this.completed ? "checked" : "",
-                       task: this.task
-                 }));
-      on message this.ui.event('.toggle', 'click', $e) {
-        console.log('toggle clicked');
-        this.completed = e.target.value;
+                          Mustache.render($(this.editing
+                                            ? '#todo-list-item-edit-template'
+                                            : '#todo-list-item-view-template').html(),
+                                          {
+                                            completed_class: this.completed ? "completed" : "",
+                                            hidden_class: this.visible ? "" : "hidden",
+                                            id: this.id,
+                                            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', _) {
         console.log('destroy clicked');
         :: 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 {
       case message deleteTodo(this.id);
     }
   }
 }
 
-$(document).ready(function () {
-  ground dataspace G {
-    Syndicate.UI.spawnUIDriver();
+ground dataspace G {
+  Syndicate.UI.spawnUIDriver();
 
-    addTodo('Buy milk');
-    addTodo('Buy bread');
-    addTodo('Finish PhD');
+  actor {
+    react {
+      on message Syndicate.UI.globalEvent('.new-todo', 'change', $e) {
+        addTodo(e.target.value);
+        e.target.value = "";
+      }
+    }
   }
 
-  G.dataspace.setOnStateChange(function (mux, patch) {
-    $("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
-  });
+  actor {
+    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));
 });