Complete the Todo Sample

Fixes #17
This commit is contained in:
Frank A. Krueger 2017-06-24 16:25:14 -07:00
parent fff50cce00
commit f8c5e75070
6 changed files with 113 additions and 21 deletions

View File

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

View File

@ -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);

View File

@ -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;

View File

@ -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 {

18
Ooui/Paragraph.cs Normal file
View File

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

View File

@ -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 {
Type = InputType.Checkbox,
};
var label = new Label {
Text = text,
For = check
};
check.Changed += (s,e) => {
label.Style.TextDecoration =
check.IsChecked ? "line-through" : "none";
};
AppendChild (check);
ClassName = "list-group-item";
Style.Cursor = "pointer";
label.Text = text;
label.Style.FontWeight = "bold";
AppendChild (label);
}
}
Element MakeTodo ()
{
var input = new Input ();
var button = new Button ("Add the item");
button.Clicked += (s, e) => {
var heading = new Heading ("Todo List");
var subtitle = new Paragraph ("This is the shared todo list of the world.");
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 (button);
app.AppendChild (heading);
app.AppendChild (subtitle);
inputForm.AppendChild (input);
inputForm.AppendChild (addbtn);
app.AppendChild (inputForm);
app.AppendChild (items);
app.AppendChild (clearbtn);
return app;
}