klebervirgilio/ng.html

## ng.html
<html ng-app="PomoDo" >
<head>
  <title>NG</title>
</head>
<body>
  <div id="done" ng-controller="TaskController">
    <form>
      <label>
        Task Titlte (<span>{{tasks.length}}</span>)
      </label>
      <br />
      <input type=checkbox ng-model="taskForm.status" checked="{{taskForm.status}}"  ><input type=text ng-model="taskForm.title" value="{{taskForm.title}}" >
      <button ng-click='update(taskForm)'>OK</button>
      <button ng-click='reseet()'>Reset</button>
    </form>

    <p>TODO</p>
    <ul>
        <li ng-repeat="task in tasks | filter_tasks">
          <input type="checkbox" checked="{{task.status}}" ng-click='checkTask(task)'> <a ng-click="fillForm(task)" href="">{{ task.title }}</a>
        </li>
    </ul>

    <p>Done</p>
    <ul>
        <li ng-repeat="task in tasks | filter_tasks:true ">
          <input type="checkbox" checked="{{task.status}}" ng-click='checkTask(task)'> <a ng-click="fillForm(task)" href="" style="text-decoration:line-through;">{{ task.title }}</a>
        </li>
    </ul>
  </div>
  <div id="todo"></div>
  <div id="timer"></div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script type="text/javascript">
    var storage = {};
    (function(w, db, undefined){

      var Task = (function(superKlass){

        function Task(opts){
          // var title, status, that = this;
          this.changeTitle(opts.title);
          this.changeStatus(opts.status);
          this._class = Task;
        };

        Task.fn     = (superKlass || Task).prototype;
        Task._class = this;

        Task.fn.changeTitle = function(title){
          this.title = title;
        };

        Task.fn.changeStatus = function(status){
          this.status = status;
        };

        Task.fn.toggleStatus = function(){
          this.status = (this.status === 'checked' ? '' : 'checked');
        };

        Task.fn.isChecked = function(){
          return this.status === 'checked';
        };

        Task.findByTitle = function(task){
          var scope = db.tasks,
              task_found;

          for( i = 0; i < scope.length; i++ ){
            _tsk = scope[i];

            if(_tsk.title === task.title){
              task_found = _tsk;
            }
          }

          return task_found;
        };

        Task.findOrPersistByProperties =  function(task){
          var _tsk   = Task.findByTitle(task),
              status = (task.status ? 'checked' : '');

          if(!_tsk){
            _tsk = new Task({title: task.title, status: status });
            db.tasks.push(_tsk);
          } else {
            _tsk.status = status;
          }

          return _tsk;
        };

        return Task;
      })(),

      // Initalize te app
      PomoDo = angular.module('PomoDo',[])

      PomoDo.filter('filter_tasks', function(){
        return function(input, selectTaskAlreadyDone){
          var collect = [];

          for( i = 0;  i < input.length; i++){
            task = input[i];

            if(( selectTaskAlreadyDone && task.isChecked() ) || (!selectTaskAlreadyDone && !task.isChecked() )){
              collect.push(task)
            }
          }

          return collect;
        }
      });

      PomoDo.controller('TaskController', function($scope){
        (function init(){
          $scope.tasks  =  storage.tasks;
          $scope.taskForm = new Task({title: '', status: ''});
        })();

        function afterFilter() {
          var slice  = [].slice,
              fn       = slice.call(arguments,0,1)[0],
              params   = slice.call(arguments,1,-1),
              callback = slice.call(arguments,-1)[0];

          callback(fn.apply(this, params));
        };

        $scope.checkTask = function(task){
          task.toggleStatus();
        };

        $scope.update = function(task){
          afterFilter(Task.findOrPersistByProperties, task, function(_){
            $scope.taskForm = new Task({title: '', status: ''});
          });
        };

        $scope.fillForm = function(task){
          $scope.taskForm = task;
        };

        $scope.reset = function() { $scope.reset(); }
      });

      storage.tasks = [
        new Task({title: 'T1', status: 'checked'}),
        new Task({title: 'T2', status: ''}),
        new Task({title: 'T3', status: ''}),
        new Task({title: 'T4', status: 'checked'})
      ]

    }).call(this, window, storage);

  </script>
</body>
</html>
	<html ng-app="PomoDo" >
	<head>
	<title>NG</title>
	</head>
	<body>
	<div id="done" ng-controller="TaskController">
	<form>
	<label>
	Task Titlte (<span>{{tasks.length}}</span>)
	</label>
	<br />
	<input type=checkbox ng-model="taskForm.status" checked="{{taskForm.status}}" ><input type=text ng-model="taskForm.title" value="{{taskForm.title}}" >
	<button ng-click='update(taskForm)'>OK</button>
	<button ng-click='reseet()'>Reset</button>
	</form>

	<p>TODO</p>
	<ul>
	<li ng-repeat="task in tasks \| filter_tasks">
	<input type="checkbox" checked="{{task.status}}" ng-click='checkTask(task)'> <a ng-click="fillForm(task)" href="">{{ task.title }}</a>
	</li>
	</ul>

	<p>Done</p>
	<ul>
	<li ng-repeat="task in tasks \| filter_tasks:true ">
	<input type="checkbox" checked="{{task.status}}" ng-click='checkTask(task)'> <a ng-click="fillForm(task)" href="" style="text-decoration:line-through;">{{ task.title }}</a>
	</li>
	</ul>
	</div>
	<div id="todo"></div>
	<div id="timer"></div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
	<script type="text/javascript">
	var storage = {};
	(function(w, db, undefined){

	var Task = (function(superKlass){

	function Task(opts){
	// var title, status, that = this;
	this.changeTitle(opts.title);
	this.changeStatus(opts.status);
	this._class = Task;
	};

	Task.fn = (superKlass \|\| Task).prototype;
	Task._class = this;

	Task.fn.changeTitle = function(title){
	this.title = title;
	};

	Task.fn.changeStatus = function(status){
	this.status = status;
	};

	Task.fn.toggleStatus = function(){
	this.status = (this.status === 'checked' ? '' : 'checked');
	};

	Task.fn.isChecked = function(){
	return this.status === 'checked';
	};

	Task.findByTitle = function(task){
	var scope = db.tasks,
	task_found;

	for( i = 0; i < scope.length; i++ ){
	_tsk = scope[i];

	if(_tsk.title === task.title){
	task_found = _tsk;
	}
	}

	return task_found;
	};

	Task.findOrPersistByProperties = function(task){
	var _tsk = Task.findByTitle(task),
	status = (task.status ? 'checked' : '');

	if(!_tsk){
	_tsk = new Task({title: task.title, status: status });
	db.tasks.push(_tsk);
	} else {
	_tsk.status = status;
	}

	return _tsk;
	};

	return Task;
	})(),

	// Initalize te app
	PomoDo = angular.module('PomoDo',[])

	PomoDo.filter('filter_tasks', function(){
	return function(input, selectTaskAlreadyDone){
	var collect = [];

	for( i = 0; i < input.length; i++){
	task = input[i];

	if(( selectTaskAlreadyDone && task.isChecked() ) \|\| (!selectTaskAlreadyDone && !task.isChecked() )){
	collect.push(task)
	}
	}

	return collect;
	}
	});

	PomoDo.controller('TaskController', function($scope){
	(function init(){
	$scope.tasks = storage.tasks;
	$scope.taskForm = new Task({title: '', status: ''});
	})();

	function afterFilter() {
	var slice = [].slice,
	fn = slice.call(arguments,0,1)[0],
	params = slice.call(arguments,1,-1),
	callback = slice.call(arguments,-1)[0];

	callback(fn.apply(this, params));
	};

	$scope.checkTask = function(task){
	task.toggleStatus();
	};

	$scope.update = function(task){
	afterFilter(Task.findOrPersistByProperties, task, function(_){
	$scope.taskForm = new Task({title: '', status: ''});
	});
	};

	$scope.fillForm = function(task){
	$scope.taskForm = task;
	};

	$scope.reset = function() { $scope.reset(); }
	});

	storage.tasks = [
	new Task({title: 'T1', status: 'checked'}),
	new Task({title: 'T2', status: ''}),
	new Task({title: 'T3', status: ''}),
	new Task({title: 'T4', status: 'checked'})
	]

	}).call(this, window, storage);

	</script>
	</body>
	</html>