amorfati0310/codespitz_75_1.html

## codespitz_75_1.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<section id="data"></section>
<script type="text/javascript">
  const CError = class extends Error {
    static invalidParam(param) {
      throw param ? `invalid  ${param}` : 'invalid param';
    }

    static invalidDataType() {
      throw 'invalid data type';
    }

    static notOverride(name) {
      throw `${name} must override`;
    }
  };
  const Validator = class {
    static isString(str) {
      return typeof str != 'string';
    }

    static isArray(arr) {
      return Array.isArray(arr);
    }
  };
  const Info = class {
    constructor(json) {
      const {title, header, items} = json;
      if (Validator.isString(title) || !title) CError.invalidParam('title');
      if (!Validator.isArray(header) || !header.length) CError.invalidParam('header');
      if (!Validator.isArray(items) || !items.length) CError.invalidParam('items');
      const checkItem = items.map(v => v.reduce((p, c, i, arr) => i < 1 ? p + c : !arr[i - 1] && arr[i] === "change" ? p + c : p + ',' + c, '').split(','));

      this._private = {title, header, items: checkItem}
    }

    get title() {
      return this._private.title;
    }

    get header() {
      return this._private.header;
    }

    get items() {
      return this._private.items;
    }
  };
  const Data = class {
    async getData() {
      const data = await this._getData();
      return new Info(data);
    }

    async _getData() {
      CError.notOverride('_getData');
    }
  };
  const JsonData = class extends Data {
    constructor(data) {
      super();
      this._data = data;
    }

    async _getData() {
      let json;
      if (typeof this._data === 'string') {
        const response = await fetch(this._data);
        json = await response.json();
      } else {
        json = this._data;
      }
      return json;
    }
  };
  const Render = class {
    constructor() {
    }

    async render(data) {
      if (!(data instanceof Data)) CError.invalidDataType();
      this._info = await data.getData();
      this._render();
    }

    _render() {
      CError.notOverride('_render');
    }

    get title() {
      return this._info.title;
    }

    get header() {
      return this._info.header;
    }

    get items() {
      return this._info.items;
    }
  };
  const TableRenderer = class extends Render {
    constructor(parent) {
      if (Validator.isString(parent) || !parent) CError.invalidParam();
      super();
      this._parent = parent;
    }

    _render() {
      const parent = this.selector(this._parent);
      if (!parent) CError.invalidParam('parent');
      parent.innerHTML = '';
      const [table, caption] = 'table,caption'.split(',').map(v => this.createEl(v));
      caption.innerHTML = this.title;
      table.appendChild(caption);
      table.appendChild(
        this.header.reduce(
          (thead, data) => (thead.appendChild(this.createEl('th')).innerHTML = data, thead), this.createEl('thead'))
      );
      parent.appendChild(
        this.items.reduce(
          (table, row) => (table.appendChild(
            row.reduce((tr, data) => (tr.appendChild(this.createEl('td')).innerHTML = data, tr), this.createEl('tr'))
          ), table),
          table));
    }

    selector(el) {
      return document.querySelector(el);
    }

    createEl(v) {
      return document.createElement(v);
    }
  };
  const data = new JsonData('./75_1.json');
  const render = new TableRenderer('#data');
  render.render(data);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<section id="data"></section>
	<script type="text/javascript">
	const CError = class extends Error {
	static invalidParam(param) {
	throw param ? `invalid ${param}` : 'invalid param';
	}

	static invalidDataType() {
	throw 'invalid data type';
	}

	static notOverride(name) {
	throw `${name} must override`;
	}
	};
	const Validator = class {
	static isString(str) {
	return typeof str != 'string';
	}

	static isArray(arr) {
	return Array.isArray(arr);
	}
	};
	const Info = class {
	constructor(json) {
	const {title, header, items} = json;
	if (Validator.isString(title) \|\| !title) CError.invalidParam('title');
	if (!Validator.isArray(header) \|\| !header.length) CError.invalidParam('header');
	if (!Validator.isArray(items) \|\| !items.length) CError.invalidParam('items');
	const checkItem = items.map(v => v.reduce((p, c, i, arr) => i < 1 ? p + c : !arr[i - 1] && arr[i] === "change" ? p + c : p + ',' + c, '').split(','));

	this._private = {title, header, items: checkItem}
	}

	get title() {
	return this._private.title;
	}

	get header() {
	return this._private.header;
	}

	get items() {
	return this._private.items;
	}
	};
	const Data = class {
	async getData() {
	const data = await this._getData();
	return new Info(data);
	}

	async _getData() {
	CError.notOverride('_getData');
	}
	};
	const JsonData = class extends Data {
	constructor(data) {
	super();
	this._data = data;
	}

	async _getData() {
	let json;
	if (typeof this._data === 'string') {
	const response = await fetch(this._data);
	json = await response.json();
	} else {
	json = this._data;
	}
	return json;
	}
	};
	const Render = class {
	constructor() {
	}

	async render(data) {
	if (!(data instanceof Data)) CError.invalidDataType();
	this._info = await data.getData();
	this._render();
	}

	_render() {
	CError.notOverride('_render');
	}

	get title() {
	return this._info.title;
	}

	get header() {
	return this._info.header;
	}

	get items() {
	return this._info.items;
	}
	};
	const TableRenderer = class extends Render {
	constructor(parent) {
	if (Validator.isString(parent) \|\| !parent) CError.invalidParam();
	super();
	this._parent = parent;
	}

	_render() {
	const parent = this.selector(this._parent);
	if (!parent) CError.invalidParam('parent');
	parent.innerHTML = '';
	const [table, caption] = 'table,caption'.split(',').map(v => this.createEl(v));
	caption.innerHTML = this.title;
	table.appendChild(caption);
	table.appendChild(
	this.header.reduce(
	(thead, data) => (thead.appendChild(this.createEl('th')).innerHTML = data, thead), this.createEl('thead'))
	);
	parent.appendChild(
	this.items.reduce(
	(table, row) => (table.appendChild(
	row.reduce((tr, data) => (tr.appendChild(this.createEl('td')).innerHTML = data, tr), this.createEl('tr'))
	), table),
	table));
	}

	selector(el) {
	return document.querySelector(el);
	}

	createEl(v) {
	return document.createElement(v);
	}
	};
	const data = new JsonData('./75_1.json');
	const render = new TableRenderer('#data');
	render.render(data);
	</script>
	</body>
	</html>