Skip to content

Instantly share code, notes, and snippets.

@kokudori

kokudori/app.js

Created January 4, 2014 11:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kokudori/8254669 to your computer and use it in GitHub Desktop.
Save kokudori/8254669 to your computer and use it in GitHub Desktop.
Download ZIP
TODO Apps whis Gavia v0.1.0
Raw
app.js
(function ($, undefined) {
'use strcit';
var todo = Gavia('todo', {
todo: {
keyPath: 'id',
autoIncrement: true,
index: {
unique: true
}
}
}).todo;
var applyTodo = function (ids, calllback) {
return todo.filter(function (result) {
return ids.some(function (id) {
return result.id === id;
});
}).then(function (results) {
return Gavia.Deferred.when.apply(null, results.map(function (result) {
return calllback(result);
}));
});
};
$(function () {
$('#menu').on('click', 'a:nth-child(2)', function () {
var ids = $('.todo input[type=checkbox]').filter(function () {
return this.checked;
}).map(function () {
return $(this).parents('.todo').data('id');
}).toArray();
applyTodo(ids, function (todo) {
return todo.update({
complete: true
}).save().promise;
}).done(function () {
$('#main').trigger('update');
$('.alert:nth-child(3)').show();
}).fail(function () {
$('.alert:nth-child(4)').show();
});
}).on('click', 'a:nth-child(3)', function () {
var ids = $('.todo input[type=checkbox]').filter(function () {
return this.checked;
}).map(function () {
return $(this).parents('.todo').data('id');
}).toArray();
applyTodo(ids, function (todo) {
return todo.delete();
}).done(function () {
$('#main').trigger('update');
$('.alert:nth-child(5)').show();
}).fail(function () {
$('.alert:nth-child(6)').show();
});
});
$('#main').on('update', function () {
var ids = [].slice.call(arguments, 1);
(function () {
if (ids.length === 0) {
$('#main tbody').empty();
return todo.all();
}
return todo.filter(function (result) {
return ids.some(function (id) {
return result.id === id;
});
});
})().done(function (results) {
results.forEach(function (result) {
var state = result.complete ? '済' : '未';
$('#todo-template').tmpl({
name: result.name,
memo: result.memo,
state: state
}).attr('data-id', result.id)
.addClass(state)
.appendTo('#main tbody');
});
}).fail(function () {
$('.alert:nth-child(7)').show();
});
$('#menu').children('a:not(:first-child)').addClass('disabled');
}).on('click', 'input[type=checkbox]', function () {
var anyChecked = $(this).parents('#main').find('.todo input[type=checkbox]').map(function () {
return this.checked;
}).toArray().some(function (x) {
return x;
});
if (anyChecked)
$('#menu').children('a:not(:first-child)').removeClass('disabled');
else
$('#menu').children('a:not(:first-child)').addClass('disabled');
}).on('click', 'i.icon-remove-sign', function () {
var id = $(this).parents('.todo').data('id');
applyTodo([id], function (todo) {
return todo.delete();
}).done(function () {
$('#main').trigger('update');
$('.alert:nth-child(5)').show();
}).fail(function () {
$('.alert:nth-child(6)').show();
});
});
$('#create').on('show.bs.modal', function () {
var body = $(this).find('.modal-body');
body.find('[name=title]').val('');
body.find('[name=memo]').val('');
body.find('.alert').addClass('hide').hide();
body.find('.form-group:eq(0)').removeClass('has-error');
}).on('click', '.modal-footer .btn-primary', function () {
var $$ = $(this).parent().prev(),
name = $$.find('[name=title]').val(),
memo = $$.find('[name=memo]').val();
if (name === '') {
$$.find('.alert').removeClass('hide').show();
$$.find('.form-group:eq(0)').addClass('has-error');
return;
}
$$.parents('#create').modal('hide')
todo.create().update({
name: name,
date: Date(),
memo: memo,
complete: false
}).save().promise.done(function (id) {
$('#main').trigger('update', id);
$('.alert:nth-child(1)').show();
}).fail(function () {
$('.alert:nth-child(2)').show();
});
});
$('#main').trigger('update');
});
}).call(this, jQuery);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="./vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h1><a href="./">TODO App</a></h1>
<div id="content" class="row">
<div id="menu" class="col-md-2 btn-group btn-group-vertical">
<a data-toggle="modal" class="btn btn-default btn-lg" href="#create">作成</a>
<a data-toggle="modal" class="btn btn-default btn-lg disabled">達成</a>
<a data-toggle="modal" class="btn btn-default btn-lg disabled">削除</a>
</div>
<div class="col-md-10">
<table id="main" class="table table-hover">
<thead>
<tr>
<th>選択</th>
<th>名前</th>
<th>メモ</th>
<th>達成度</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="create" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="=modal-title">TODOの作成</h4>
</div>
<div class="modal-body">
<div class="alert alert-warning alert-dismissable hide">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Warn!</strong> 名前を入力してください。
</div>
<div class="form-group">
<label class="control-label" for="title">名前</label>
<input name="title" type="text" class="form-control" required />
</div>
<div class="form-group">
<label class="control-label" for="memo">メモ</label>
<textarea class="form-control" name="memo"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Create</button>
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script id="todo-template" type="text/x-jquery-tmpl">
<tr class="todo">
<td><input type="checkbox" /></td>
<td><p>${name}</p></td>
<td><p>${memo}</p></td>
<td><p>${state}</p></td>
<td><i class="icon-remove-sign"></i></td>
</tr>
</script>
<script src="./vendor/jquery/jquery.js"></script>
<script src="./vendor/jquery-tmpl/jquery.tmpl.js"></script>
<script src="./vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="./vendor/gavia/Gavia/Gavia.js"></script>
<script src="./app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment