S70 6강 - 기존 html, con

var Html = function(){};
Html.prototype = new Renderer();

Html.prototype._init = function(){
    if(typeof this.completeLi !== 'undefined' && typeof this.progressLi !== 'undefined') {
        return;
    }

    this.progressLi = document.querySelector('#todo .progress li');
    this.completeLi = document.querySelector('#todo .complete li');

    this.progressLi.parentNode.removeChild(this.progressLi);
    this.completeLi.parentNode.removeChild(this.completeLi);

    console.log('form 안의 input 을 연결');
};

Html.prototype._render = function(tasks){
    if(typeof this.completeLi === 'undefined' || typeof this.progressLi === 'undefined') {
        return;
    }
    console.log('//각 리스트를 비운다.');
    document.querySelector('#todo .progress').innerHTML = '';
    document.querySelector('#todo .complete').innerHTML = '';

    console.log('//진행을 채운다.');
    console.log('//완료를 채운다.');
    var progress = document.querySelector('#todo .progress');
    var complete = document.querySelector('#todo .complete');

    var task, child, inputs;
    for(var i = 0; i < tasks.length; i++){
        task = tasks[i];
        if(task.state === STATE.PROGRESS()){
            child = this.progressLi.cloneNode(true);
            child.querySelector('p').innerHTML = task.title;
            inputs = child.querySelectorAll('input');

            inputs[0].setAttribute('data-task-id', task.id);
            inputs[0].onclick = function(){
                this.todo.toggle(this.getAttribute('data-task-id'));
            };
            inputs[1].setAttribute('data-task-id', task.id);
            inputs[1].onclick = function(){
                this.todo.remove(this.getAttribute('data-task-id'));
            };

            progress.appendChild(child);
        }else{
            child = this.completeLi.cloneNode(true);
            child.querySelector('p').innerHTML = task.title;
            inputs = child.querySelectorAll('input');

            inputs[0].setAttribute('data-task-id', task.id);
            inputs[0].onclick = function(){
                this.todo.toggle(this.getAttribute('data-task-id'));
            };
            inputs[1].setAttribute('data-task-id', task.id);
            inputs[1].onclick = function(){
                this.todo.remove(this.getAttribute('data-task-id'));
            };
            complete.appendChild(child);
        }
    }

    console.log('//인풋 박스를 비운다.');
};

var Con = function(){};
Con.prototype = new Renderer();
Con.prototype._init = function(){
    console.clear();
};

Con.prototype._render = function(tasks){
    var task;
    console.log('진행');
    for(var i = 0; i < tasks.length; i++){
        task = tasks[i];
        if(task.state === STATE.PROGRESS()){
            console.log(task.id+'.', task.title+'('+task.state.toString()+')');
        }
    }

    console.log('완료');
    for(var i = 0; i < tasks.length; i++){
        task = tasks[i];
        if(task.state === STATE.COMPLETE()){
            console.log(task.id+'.', task.title+'('+task.state.toString()+')');
        }
    }
};

var html = new Html();
var con = new Con();