TODO Apps with Gavia

app.css

body {
  margin: 10px 20px;
}

#content {
  margin-left: 40px;
}

#menu {
  vertical-align: text-top;
  margin: 0px;
}

#menu > .btn {
  width: 100%;
}

#main {
  width: 780px;
}

#main .todo i {
  cursor: pointer;
}

#main .todo td > * {
  text-align: center;
}

#main .todo td:nth-child(2) {
  min-width: 100px;
}

#main .todo td:nth-child(3) {
  min-width: 100px;
}

#main .todo td > *:not(.btn) {
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
}

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 $.when.apply(null, results.map(function (result) {
        return calllback(result);
      }));
    });
  };

  $(function () {
    $('#menu').on('click', 'button:first-child', function () {
      $('#createTodo').modal();
    }).on('click', 'button: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', 'button: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 ? 'success' : 'error';
          $('#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();
      });
    }).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('button:not(:first-child)').removeClass('disabled');
      else
        $('#menu').children('button: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();
      });
    });

    $('#createTodo').on('show', function () {
      var body = $(this).find('.modal-body');
      body.children('[name=title]').val('');
      body.children('[name=memo]').val('');
      body.children('.alert').hide();
    }).on('click', '.modal-footer .btn-primary', function () {
      var $$ = $(this).parent().prev(),
        name = $$.children('[name=title]').val(),
        memo = $$.children('[name=memo]').val();
      $$.children('.alert').hide();
      if (name === '') {
        $$.children('.alert').show();
        return;
      }
      $$.parent().modal('toggle');

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

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link type="text/css" href="./css/bootstrap.css" rel="stylesheet" />
  <link type="text/css" href="./css/app.css" rel="stylesheet" />
</head>
<body>
  <div class="alert alert-success hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> Created a new TODO.
  </div>
  <div class="alert alert-error hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Error!</strong> Failed to create a new TODO.
  </div>
  <div class="alert alert-success hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> Updated a TODO.
  </div>
  <div class="alert alert-error hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Error!</strong> Failed to update a TODO.
  </div>
  <div class="alert alert-success hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> Deleted a TODO.
  </div>
  <div class="alert alert-error hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Error!</strong> Failed to delete a TODO.
  </div>
  <div class="alert alert-error hide">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Error!</strong> Failed to get a TODO.
  </div>

  <h1>TODO App</h1>

  <div id="content" class="row">
    <div id="menu" class="span2 btn-group btn-group-vertical">
      <button class="btn">Create</button>
      <button class="btn disabled">Complete</button>
      <button class="btn disabled">Delete</button>
    </div>

    <table id="main" class="span10 table table-hover"><tbody></tbody></table>
  </div>

  <div id="createTodo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Create TODO</h3>
    </div>
    <div class="modal-body">
      <div class="alert alert-warning hide">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Warn!</strong> Required for name.
      </div>
      <label for="title">名前</label>
      <input name="title" type="text" required />
      <label for="memo">メモ</label>
      <textarea name="memo"></textarea>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary">Create</button>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </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="./js/jquery.js"></script>
  <script src="./js/jquery.tmpl.js"></script>
  <script src="./js/bootstrap.js"></script>
  <script src="./js/Gavia.js"></script>
  <script src="./js/app.js"></script>
</body>
</html>