can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
217 lines (186 loc) • 6.47 kB
HTML
<html>
<head>
<style>
</style>
</head>
<body>
<todo-create></todo-create>
<todo-list></todo-list>
<script src="../../node_modules/steal/steal.js" dev-bundle></script>
<script type="steal-module" id="demo-source">
import {
fixture,
ObservableArray,
ObservableObject,
realtimeRestModel,
StacheElement,
type,
} from "can";
class Todo extends ObservableObject {
static props = {
id: { type: type.maybeConvert(Number), identity: true },
complete: { type: Boolean, default: false },
dueDate: {
type: type.maybeConvert(Date),
get default() {
return new Date();
}
},
name: type.maybeConvert(String)
};
preventSave() {
return !this.name || this.isSaving() || this.isDestroying();
}
}
class TodoListModel extends ObservableArray {
static items = Todo;
}
const todoConnection = realtimeRestModel({
Map: Todo,
List: TodoListModel,
url: "/api/todos/{id}"
});
mockService();
class TodoList extends StacheElement {
static view = `
Sort By: <select value:bind="sort">
<option value="">none</option>
<option value="name">name</option>
<option value="dueDate">dueDate</option>
</select>
Show: <select value:bind="completeFilter">
<option value="">All</option>
<option value="complete">Complete</option>
<option value="incomplete">Incomplete</option>
</select>
Due: <select value:bind="dueFilter">
<option value="">Anytime</option>
<option value="today">Today</option>
<option value="week">This Week</option>
</select>
Results <select value:bind="count">
<option value="">All</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
<ul>
{{
{{
<li>
<input type='checkbox'
checked:bind='todo.complete'
on:change="todo.save()"
disabled:from="todo.preventSave()"/>
<label>{{ todo.name }}</label>
<input type='date'
valueAsDate:bind='todo.dueDate'
on:change="todo.save()"
disabled:from="todo.preventSave()"/>
<button on:click="todo.destroy()"
disabled:from="todo.preventSave()">delete</button>
</li>
{{/ for }}
{{/ if }}
{{
<li>Loading</li>
{{/ if }}
</ul>
`;
static props = {
sort: type.maybe(String),
completeFilter: type.maybe(String),
dueFilter: type.maybe(String),
count: {type: type.convert(String), default: "10"},
todosPromise: {
get(){
var query = {filter: { }};
if(this.sort) {
query.sort = this.sort;
}
if(this.completeFilter) {
query.filter.complete = this.completeFilter === "complete";
}
if(this.dueFilter) {
var day = 24*60*60*1000;
var now = new Date();
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate() );
if(this.dueFilter === "today") {
query.filter.dueDate = {
$gte: now.toString(),
$lt: new Date(now.getTime() + day).toString()
}
}
if(this.dueFilter === "week") {
var start = today.getTime() - (today.getDay() * day);
query.filter.dueDate = {
$gte: new Date(start).toString(),
$lt: new Date(start + 7*day).toString()
};
}
}
if(this.count) {
query.page = {
start: 0,
end: (+this.count)-1
};
}
return Todo.getList(query);
}
}
};
}
customElements.define("todo-list", TodoList);
class TodoCreate extends StacheElement {
static view = `
<form on:submit="createTodo(scope.event)">
<p>
<label>Name</label>
<input on:input:value:bind='todo.name'/>
</p>
<p>
<label>Complete</label>
<input type='checkbox' checked:bind='todo.complete'/>
</p>
<p>
<label>Date</label>
<input type='date' valueAsDate:bind='todo.dueDate'/>
</p>
<button disabled:from="todo.preventSave()">Create Todo</button>
{{
</form>
`;
static props = {
todo: {
get default() {
return new Todo();
}
}
};
createTodo(event) {
event.preventDefault();
this.todo.save().then((createdTodo) => {
this.todo = new Todo();
})
}
}
customElements.define("todo-create", TodoCreate);
function mockService(){
var terms = ["can you","please","","","",""],
verbs = ["clean","walk","do","vaccum","organize","fold","wash","dust","pay","cook","get","take out"],
subjects = ["dog","laundry","diapers","clothes","car","windows","carpet","taxes","food","gas","trash"];
var dayInMS = 24*60*60*1000;
var lastWeek = new Date() - (7*dayInMS);
var fourWeeks = new Date().getTime() + (4*7*dayInMS);
var todoStore = fixture.store(100, function(){
return {
complete: fixture.rand([true, false],1)[0],
dueDate: new Date( fixture.rand(lastWeek, fourWeeks) ).toString(),
name: (fixture.rand(terms,1)[0]+" "+fixture.rand(verbs,1)[0]+" "+fixture.rand(subjects,1)[0]).trim()
}
}, Todo);
fixture("/api/todos/{id}", todoStore);
fixture.delay = 500;
}
</script>
</body>
</html>