60 lines
3.3 KiB
JavaScript
60 lines
3.3 KiB
JavaScript
// eslint-disable-next-line import/prefer-default-export
|
|
export function generatePostHtml(postObject, userObject) {
|
|
const postText = postObject.text !== null ? `<p class="post-caption mt-3">${postObject.text}</p>` : "";
|
|
const postImg = postObject.img !== null ? `<img src="${postObject.img}" alt="Post image" class="post-img mt-4 img-fluid">` : "";
|
|
const options = {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
};
|
|
const postCreatedDateTime = new Date(postObject.createdDateTime);
|
|
|
|
const editButtonHtml = `<a class="dropdown-item post-edit-button" id="edit-post-${postObject.id}"><i class="bi bi-pencil"></i> Редактировать</a>`;
|
|
const deleteButtonHtml = `<a class="dropdown-item post-delete-button" id="delete-post-${postObject.id}"><i class="bi bi-trash3"></i> Удалить</a>`;
|
|
|
|
const html = `<div class="card my-4 post">
|
|
<div class="card-body h-100" id="post-${postObject.id}">
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">${userObject.firstName} ${userObject.lastName}</h6>
|
|
<small class="opacity-50 text-nowrap">${postCreatedDateTime.toLocaleDateString("ru-RU", options)}</small>
|
|
</div>
|
|
${postText}
|
|
${postImg}
|
|
<div class="post-interaction">
|
|
<!-- Dropdown button -->
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Options
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
${editButtonHtml}
|
|
${deleteButtonHtml}
|
|
</ul>
|
|
</div>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
|
|
</svg>
|
|
<span class="me-1">123</span>
|
|
</div>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
|
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146a.5.5 0 0 0 .708-.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 0 0-.708.708L.146 4.293A1 1 0 0 0 0 4.414V2zm5 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
|
|
</svg>
|
|
<span class="me-1">123</span>
|
|
</div>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
|
|
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
|
|
</svg>
|
|
<span class="me-1">Share</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
return html;
|
|
}
|