s78-day5

todo.js

const err = message => {
  throw message;
};

const el = el => document.createElement(el);

const Task = class {
  constructor(title) {
    this.title = title;
    this.isComplete = false;
  }
  static create(title) { return new Task(title); }
  toggle() { this.isComplete = !this.isComplete; }
  getInfo() { return { title: this.title, isComplete: this.isComplete }; }
};

const Folder = class extends Set {
  constructor(title) {
    super();
    this.title = title;
  }
  static create(title) { return new Folder(title); }
  addTask(task) { super.add(task); }
  removeTask(task) { super.delete(task); }
  getTitle() { return this.title; }
  getTasks() { return [...super.values()]; }
  add() { }
  delete() { }
  values() { }
};

const App = class extends Set {
  constructor() {
    super();
  }
  addFolder(folder) { super.add(folder); }
  removeFolder(folder) { super.delete(folder); }
  getFolders() { return [...super.values()]; }
  add() { }
  delete() { }
  values() { }
};

const Renderer = class {
  constructor(app) { this.app = app; }
  render() { this._render(); }
  _render() { err('must be override.'); }
};

const DomRenderer = class extends Renderer {
  constructor(parent, app) {
    super(app);
    const section = parent.appendChild(el('section'));
    section.innerHTML = '<nva><input/><ul></ul></nav><section><input/><ul></ul></section>';
    const [f, t] = section.querySelectorAll('input');
    f.addEventListener('keyup', e => {
      if (e.keyCode != 13) return;
      const v = e.target.value.trim();
      e.target.value = '';
      if (!v) return;
      app.addFolder(Folder.create(v));
      this.render();
    });
    t.addEventListener('keyup', e => {
      if (e.keyCode != 13 || !this.current) return;
      const v = e.target.value.trim();
      e.target.value = '';
      if (!v) return;
      this.current.addTask(Task.create(v));
      this.render();
    });
    const [folder, task] = section.querySelectorAll('ul');
    this.folder = folder, this.task = task;
    this.render();
  }

  _render() {
    const folders = this.app.getFolders();
    if (!folders.length) return;
    if (!this.current) this.current = folders[0];
    this.folder.innerHTML = '';
    folders.forEach(f => {
      const li = el('li');
      li.innerHTML = f.getTitle();
      li.style.color = this.current == f ? '#000' : '#777';
      li.addEventListener('click', e => { this.current = f, this.render(); });
      this.folder.appendChild(li);
    });
    if (!this.current) return;
    this.task.innerHTML = '';
    const tasks = this.current.getTasks();
    if (!tasks.length) return;
    tasks.forEach(t => {
      const li = el('li'), { title, isComplete } = t.getInfo();
      li.innerHTML = (isComplete ? 'completed ' : 'process ') + title;
      li.addEventListener('click', e => { t.toggle(), this.render(); });
      this.task.appendChild(li);
    });
  }
};

const todo = new DomRenderer(document.body, new App());



(() => {
  const task = Task.create('task1');
  console.log('task constructor', task.getInfo().title === 'task1');
  console.log('task initial not complelted', task.getInfo().isComplete === false);

  task.toggle();
  console.log('toggle task is completed', task.getInfo().isComplete === true);
})();

(() => {
  const folder = Folder.create('folder1');
  console.log('foler constructor', folder.getTitle() === 'folder1');

  console.log('tasks empty', folder.getTasks().length === 0);

  const task1 = Task.create('task1');
  folder.addTask(task1);
  console.log('tasks length 1', folder.getTasks().length === 1);
  console.log('first task title', folder.getTasks()[0].getInfo().title === 'task1');

  folder.addTask(task1);
  console.log('tasks length 1', folder.getTasks().length === 1);

  const task2 = Task.create('task2');
  folder.addTask(task2);
  console.log('tasks length 2 after add 1', folder.getTasks().length === 2);

  folder.removeTask(task1);
  console.log('tasks length 1 after remove 1', folder.getTasks().length === 1);
  console.log('first task title after remove first', folder.getTasks()[0].getInfo().title === 'task2');
})();

(() => {
  const app = new App(null);
  console.log('folders length 0', app.getFolders().length === 0);

  const folder1 = Folder.create('folder1');
  app.addFolder(folder1);
  console.log('folders length 1 after add', app.getFolders().length === 1);

  console.log('first folder title', app.getFolders()[0].getTitle() === 'folder1');

  app.addFolder(folder1);
  console.log('folders length 1 after added twice folder1', app.getFolders().length === 1);

  const folder2 = Folder.create('folder2');
  app.addFolder(folder2);
  console.log('folders length 2 after add', app.getFolders().length === 2);

  console.log('first folder title', app.getFolders()[0].getTitle() === 'folder1');
  console.log('second folder title', app.getFolders()[1].getTitle() === 'folder2');

  app.removeFolder(folder1);
  console.log('folders length 1 after remove', app.getFolders().length === 1);

  console.log('first folder title', app.getFolders()[0].getTitle() === 'folder2');
})();