Untitled

class ux {
    static display = {};
    static displayOptions;
    static displayActive;
    static addTask;
    static tasks;
    static idRoot;
    static decorateTask(task, msg, id) {
        console.log('decorateTask');
        if (id === null) {
            task.firstElementChild.removeAttribute('id');
            task.firstElementChild.nextElementSibling.removeAttribute('for', id);
        }
        else {
        task.firstElementChild.setAttribute('id', id);
        task.firstElementChild.nextElementSibling.setAttribute('for', id);
        }
        task.firstElementChild.nextElementSibling.setAttribute.innerHTML=msg;
    }
    static addTask(task, rank) {
        const newTask = ux.taskTemplate.cloneNode(true);
        if (ux.displayOptionActive != ux.displayOptions.done) {
            ux.decorateTask(newTask, task.msg, ux.idRoot + rank.toString());
            ux.tasks.appendChild(newTask);
        }
    }
    static {
        ux.idRoot = "todo-";
        ux.displayOptions = { all: 1, todo: 2, done: 3 };
        for (let option in ux.displayOptions) {
            ux.display[option] = document.querySelector(`[data-filter="${option}"]`);
        }
        ux.displayOptionActive = 'all';
        ux.taskMsg = document.querySelector('form input');
        ux.addTask = document.querySelector('form button');
        ux.tasks = document.querySelector('.list-group');
        ux.taskTemplate = ux.tasks.firstElementChild.cloneNode(true);
        console.log(ux.taskTemplate); // ??
        console.log('Avant décoration.')
        ux.decorateTask(ux.taskTemplate, '', null);
        console.log(ux.taskTemplate); // ??
    }
    static changeActiveDisplay(option) {
        ux.display[ux.displayOptionActive].classList.remove('active');
        ux.display[option].classList.add('active');
        ux.displayOptionActive = option;
    }

    static getTaskMsg() {
        return ux.taskMsg.value;
    }
}

class ToDoListApp {
    static addTask(e) {
        console.log('add Task : ');
        task = {};
        task[msg] = ux.getTaskMsg();
        task[checked] = false;
        ToDoListApp.tasks.push(task);
        ux.addtask(task, ToDoListApp.tasks.length);
    }
    static {
        ToDoListApp.display = {}
        for (let option in ux.displayOptions) {
            ToDoListApp.display[option] = (e) => {
                console.log('Display' + option);
                if (option != ux.displayOptionActive) {
                    ux.changeActiveDisplay(option);
                }
            }
        }
        ToDoListApp.tasks = [];
    }

    constructor() {
        for (let option in ux.displayOptions) {
            ux.display[option].addEventListener('click', ToDoListApp.display[option]);
        }
        ux.addTask.addEventListener('click', ToDoListApp.addTask);
    }
}

const app = new ToDoListApp();