83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
class ListComponent {
|
|
constructor(parent, df) {
|
|
this.parent = parent;
|
|
this.df = df || {};
|
|
|
|
this.make();
|
|
}
|
|
|
|
make() {
|
|
this.wrapper = $(`<div class="list-component">`).appendTo(this.parent);
|
|
this.iterate_list(
|
|
this.wrapper,
|
|
this.df.data,
|
|
this.df.template,
|
|
this.df.onclick,
|
|
);
|
|
}
|
|
|
|
iterate_list(parent, data, template) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
let cursor_style = this.df.onclick ? 'cursor: pointer;' : '';
|
|
let list_row = $(
|
|
`<div id="${i}" class="item-row hover-shadow" style="${cursor_style}">`,
|
|
).appendTo(parent);
|
|
data[i].last = i == data.length - 1;
|
|
list_row.append(template(data[i]));
|
|
if (this.df.onclick) {
|
|
$(list_row).on('click', () => {
|
|
this.df.onclick(list_row[0].id); // TODO pass index
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// list component templates
|
|
|
|
function title_with_message_and_tag_template(data) {
|
|
let title = data.title || '';
|
|
let message = data.message || '';
|
|
let tag = data.tag || '';
|
|
let tag_type = data.tag_type || '';
|
|
|
|
return `
|
|
<div class="d-flex flex-column">
|
|
<div class="d-flex flex-column">
|
|
<h5>${title || ''}</h5>
|
|
</div>
|
|
<div class="d-flex flex-row justify-between">
|
|
<p>${message || ''}</p>
|
|
<p class="${tag_type}">${tag || ''}</p>
|
|
</div>
|
|
</div>
|
|
${data.last ? `` : `<hr>`}
|
|
`;
|
|
}
|
|
|
|
function title_with_sub_text_tag_and_button_template(data) {
|
|
return `
|
|
<div class="d-flex flex-row justify-between">
|
|
<p class="list-row-col ellipsis list-subject level">${data.title || ''}
|
|
<p class="list-row-col ellipsis hidden-xs">${data.sub_text || ''}</p>
|
|
<div class="list-row-col ellipsis hidden-xs">
|
|
<p class="${data.tag_type}" ellipsis">${data.tag}</p>
|
|
</div>
|
|
<button class="btn btn-outline-primary ellipsis">
|
|
${data.button.title}
|
|
</button>
|
|
</div>
|
|
${data.last ? `` : `<hr>`}
|
|
`;
|
|
}
|
|
|
|
function title_with_text_area_template(data) {
|
|
return `
|
|
<div class="mb-4">
|
|
<h5>${data.title || ''}</h5>
|
|
<div class="mt-3 p-2 card bg-light text-dark border-0 rounded-sm">
|
|
<span style="white-space: pre-line">${data.message || ''}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|