kujyp/codespitz_week01.html

## codespitz_week01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section id="data"></section>
</body>
<script>
    const error = (msg) => {
        throw msg;
    };

    const Info = class {
        constructor(json) {
            const {
                title, header, items
            } = json;

            if (typeof title != 'string' || !title) {
                error("invalid title");
            }
            if (!Array.isArray(header) || !header.length) {
                error("invalid header");
            }
            if (!Array.isArray(items) || !items.length) {
                error("invalid items");
            }

            this._private = {
                title, header, items
            };
        }

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

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

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

    const Data = class {
        async getData() {
            const json = await this._getData();
            return new Info(json);
        }

        async _getData() {
            error("_getData must overrided");
        }
    };

    const JsonData = class extends Data {
        constructor(data) {
            super();
            this._data = data;
        }

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

    const Renderer = class {
        async render(data) {
            if (!(data instanceof Data)) {
                error("invalid data type");
            }

            const {
                title, header, items
            } = await data.getData();
            this._render(title, header, items);
        }

        _render() {
            error("_render must overrided");
        }
    };

    const TableRenderer = class extends Renderer {
        constructor(parent) {
            if (typeof parent != 'string' || !parent) {
                error("invalid param");
            }
            super();
            this._parent = parent;
        }

        _render(title, header, items) {
            const parent = document.querySelector(this._parent);
            if (!parent) {
                error("invaild parent");
            }
            parent.innerHTML = "";

            const [
                table, caption, thead
            ] = "table,caption,thead".split(",")
                    .map(tag => document.createElement(tag));
            caption.innerHTML = title;

            [
                caption,
                header.reduce((_, v) => {
                    thead.appendChild(document.createElement("th")).innerHTML = v;
                    return thead;
                }),
                ...items.map(item =>
                    item.reduce((tr, v) => {
                        tr.appendChild(document.createElement("td")).innerHTML = v;
                        return tr;
                    }, document.createElement("tr"))
                )
            ].forEach(el => table.appendChild(el));
            parent.appendChild(table);
        }
    };

    const Loader = class {
        constructor(url) {
            this._url = url;
        }

        load(callback) {
            callback(new JsonData(this._url));
        }
    };

    const loader = new Loader("75_1.json");
    loader.load(json => {
        const renderer = new TableRenderer("#data");
        renderer.render(json);
    });

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<section id="data"></section>
	</body>
	<script>
	const error = (msg) => {
	throw msg;
	};

	const Info = class {
	constructor(json) {
	const {
	title, header, items
	} = json;

	if (typeof title != 'string' \|\| !title) {
	error("invalid title");
	}
	if (!Array.isArray(header) \|\| !header.length) {
	error("invalid header");
	}
	if (!Array.isArray(items) \|\| !items.length) {
	error("invalid items");
	}

	this._private = {
	title, header, items
	};
	}

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

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

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

	const Data = class {
	async getData() {
	const json = await this._getData();
	return new Info(json);
	}

	async _getData() {
	error("_getData must overrided");
	}
	};

	const JsonData = class extends Data {
	constructor(data) {
	super();
	this._data = data;
	}

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

	const Renderer = class {
	async render(data) {
	if (!(data instanceof Data)) {
	error("invalid data type");
	}

	const {
	title, header, items
	} = await data.getData();
	this._render(title, header, items);
	}

	_render() {
	error("_render must overrided");
	}
	};

	const TableRenderer = class extends Renderer {
	constructor(parent) {
	if (typeof parent != 'string' \|\| !parent) {
	error("invalid param");
	}
	super();
	this._parent = parent;
	}

	_render(title, header, items) {
	const parent = document.querySelector(this._parent);
	if (!parent) {
	error("invaild parent");
	}
	parent.innerHTML = "";

	const [
	table, caption, thead
	] = "table,caption,thead".split(",")
	.map(tag => document.createElement(tag));
	caption.innerHTML = title;

	[
	caption,
	header.reduce((_, v) => {
	thead.appendChild(document.createElement("th")).innerHTML = v;
	return thead;
	}),
	...items.map(item =>
	item.reduce((tr, v) => {
	tr.appendChild(document.createElement("td")).innerHTML = v;
	return tr;
	}, document.createElement("tr"))
	)
	].forEach(el => table.appendChild(el));
	parent.appendChild(table);
	}
	};

	const Loader = class {
	constructor(url) {
	this._url = url;
	}

	load(callback) {
	callback(new JsonData(this._url));
	}
	};

	const loader = new Loader("75_1.json");
	loader.load(json => {
	const renderer = new TableRenderer("#data");
	renderer.render(json);
	});

	</script>
	</html>