80 lines
No EOL
2.8 KiB
TypeScript
80 lines
No EOL
2.8 KiB
TypeScript
import BaseUIElement from "../BaseUIElement";
|
|
import {Utils} from "../../Utils";
|
|
import Translations from "../i18n/Translations";
|
|
|
|
export default class Table extends BaseUIElement {
|
|
|
|
private readonly _header: BaseUIElement[];
|
|
private readonly _contents: BaseUIElement[][];
|
|
private readonly _contentStyle: string[][];
|
|
|
|
constructor(header: (BaseUIElement | string)[],
|
|
contents: (BaseUIElement | string)[][],
|
|
contentStyle?: string[][]) {
|
|
super();
|
|
this._contentStyle = contentStyle ?? [["min-width: 9rem"]];
|
|
this._header = header?.map(Translations.W);
|
|
this._contents = contents.map(row => row.map(Translations.W));
|
|
}
|
|
|
|
AsMarkdown(): string {
|
|
|
|
const headerMarkdownParts = this._header.map(hel => hel?.AsMarkdown() ?? " ")
|
|
const header = headerMarkdownParts.join(" | ");
|
|
const headerSep = headerMarkdownParts.map(part => '-'.repeat(part.length + 2)).join(" | ")
|
|
const table = this._contents.map(row => row.map(el => el.AsMarkdown() ?? " ").join(" | ")).join("\n")
|
|
|
|
return "\n\n" + [header, headerSep, table, ""].join("\n")
|
|
}
|
|
|
|
protected InnerConstructElement(): HTMLElement {
|
|
const table = document.createElement("table")
|
|
|
|
const headerElems = Utils.NoNull((this._header ?? []).map(elems => elems.ConstructElement()))
|
|
if (headerElems.length > 0) {
|
|
|
|
const thead = document.createElement("thead")
|
|
|
|
const tr = document.createElement("tr");
|
|
headerElems.forEach(headerElem => {
|
|
const td = document.createElement("th")
|
|
td.appendChild(headerElem)
|
|
tr.appendChild(td)
|
|
})
|
|
thead.appendChild(tr)
|
|
table.appendChild(thead)
|
|
|
|
}
|
|
|
|
for (let i = 0; i < this._contents.length; i++) {
|
|
let row = this._contents[i];
|
|
const tr = document.createElement("tr")
|
|
for (let j = 0; j < row.length; j++) {
|
|
try {
|
|
|
|
let elem = row[j];
|
|
const htmlElem = elem?.ConstructElement()
|
|
if (htmlElem === undefined) {
|
|
continue;
|
|
}
|
|
|
|
let style = undefined;
|
|
if (this._contentStyle !== undefined && this._contentStyle[i] !== undefined && this._contentStyle[j] !== undefined) {
|
|
style = this._contentStyle[i][j]
|
|
}
|
|
|
|
const td = document.createElement("td")
|
|
td.style.cssText = style;
|
|
td.appendChild(htmlElem)
|
|
tr.appendChild(td)
|
|
} catch (e) {
|
|
console.error("Could not render an element in a table due to", e, row[j])
|
|
}
|
|
}
|
|
table.appendChild(tr)
|
|
}
|
|
|
|
return table;
|
|
}
|
|
|
|
} |