Complete the Todo Sample

Fixes #17

Ooui/Client.js

@@ -104,6 +104,7 @@ function msgListen (m) {
         const ems = JSON.stringify (em);
         socket.send (ems);
         if (debug) console.log ("Event", em);
+        return true;
     });
 }
 

Ooui/Form.cs

@@ -4,6 +4,12 @@ namespace Ooui
 {
     public class Form : Element
     {
+        string action = "";
+        public string Action {
+            get => action;
+            set => SetProperty (ref action, value ?? "", "action");
+        }
+
         public event EventHandler Submitted {
             add => AddEventListener ("submit", value);
             remove => RemoveEventListener ("submit", value);

Ooui/Input.cs

@@ -43,7 +43,10 @@ namespace Ooui
         bool isChecked = false;
         public bool IsChecked {
             get => isChecked;
-            set => SetProperty (ref isChecked, value, "checked");
+            set {
+                SetProperty (ref isChecked, value, "checked");
+                TriggerEventFromMessage (Message.Event (Id, "change", isChecked));
+            }
         }
 
         double minimum = 0;

Ooui/Node.cs

@@ -16,6 +16,16 @@ namespace Ooui
             }
         }
 
+        public Node FirstChild {
+            get {
+                lock (children) {
+                    if (children.Count > 0)
+                        return children[0];
+                    return null;
+                }
+            }
+        }
+
         public virtual string Text {
             get { return String.Join ("", from c in Children select c.Text); }
             set {

Ooui/Paragraph.cs

@@ -0,0 +1,18 @@
+using System;
+
+namespace Ooui
+{
+    public class Paragraph : Element
+    {
+        public Paragraph ()
+            : base ("p")
+        {
+        }
+
+        public Paragraph (string text)
+            : this ()
+        {
+            Text = text;
+        }
+    }
+}

Samples/TodoSample.cs

@@ -1,48 +1,102 @@
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using Ooui;
 
 namespace Samples
 {
     public class TodoSample
     {
-        List items = new List ();
+        List items = new List () {
+            ClassName = "list-group",
+        };
+
+        public TodoSample ()
+        {
+            items.Style.MarginTop = "1em";
+        }
 
         class Item : ListItem
         {
+            Element label = new Div ();
+
+            bool isDone;
+            public bool IsDone {
+                get => isDone;
+                set {
+                    isDone = value;
+                    label.Style.TextDecoration = 
+                        isDone ? "line-through" : "none";
+                    label.Style.FontWeight = 
+                        isDone ? "normal" : "bold";
+                    label.Style.Color = 
+                        isDone ? "#999" : "#000";
+                }
+            }
+
             public Item (string text)
             {
-                var check = new Input {
+                ClassName = "list-group-item";
-                    Type = InputType.Checkbox,
+                Style.Cursor = "pointer";
-                };
+                label.Text = text;
-                var label = new Label {
+                label.Style.FontWeight = "bold";
-                    Text = text,
-                    For = check
-                };
-                check.Changed += (s,e) => {
-                    label.Style.TextDecoration = 
-                        check.IsChecked ? "line-through" : "none";
-                };
-                AppendChild (check);
                 AppendChild (label);
             }
         }
 
         Element MakeTodo ()
-        {            
+        {
-            var input = new Input ();
+            var heading = new Heading ("Todo List");
-            var button = new Button ("Add the item");
+            var subtitle = new Paragraph ("This is the shared todo list of the world.");
-            button.Clicked += (s, e) => {
+            var inputForm = new Form {
+                ClassName = "form-inline"
+            };
+            var input = new Input {
+                ClassName = "form-control"
+            };
+            var addbtn = new Button ("Add") {
+                Type = ButtonType.Submit,
+                ClassName = "btn btn-primary",
+            };
+            addbtn.Style.MarginLeft = "1em";
+            var clearbtn = new Button ("Clear Completed") {
+                Type = ButtonType.Submit,
+                ClassName = "btn btn-danger",
+            };
+            void AddItem ()
+            {
                 if (string.IsNullOrWhiteSpace (input.Value))
                     return;
                 var item = new Item (input.Value);
-                items.AppendChild (item);
+                item.Clicked += (s, e) => {
+                    item.IsDone = !item.IsDone;
+                };
+                items.InsertBefore (item, items.FirstChild);
                 input.Value = "";
+            }
+            addbtn.Clicked += (s, e) => {
+                AddItem ();
+            };
+            inputForm.Submitted += (s, e) => {
+                AddItem ();
+            };
+            clearbtn.Clicked += (s, e) => {
+                var toremove = new List<Node> ();
+                foreach (Item i in items.Children) {
+                    if (i.IsDone) toremove.Add (i);
+                }
+                foreach (var i in toremove) {
+                    items.RemoveChild (i);
+                }
             };
             var app = new Div ();
-            app.AppendChild (input);
+            app.AppendChild (heading);
-            app.AppendChild (button);
+            app.AppendChild (subtitle);
+            inputForm.AppendChild (input);
+            inputForm.AppendChild (addbtn);
+            app.AppendChild (inputForm);
             app.AppendChild (items);
+            app.AppendChild (clearbtn);
             return app;
         }