underpost
Version:
Underpost Platform — end-to-end CI/CD and application-delivery toolchain CLI. Covers bare metal, Kubernetes, K3s, kubeadm, LXD, container/image orchestration, secrets, databases, cron jobs, monitoring, SSH, runners, PWA + Workbox delivery, and release orc
1,309 lines • 53.2 kB
JavaScript
import { getId, isValidDate, newInstance } from './CommonJs.js';
import { LoadingAnimation } from '../core/LoadingAnimation.js';
import { Validator } from '../core/Validator.js';
import { Input } from '../core/Input.js';
import { darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from './Css.js';
import { append, copyData, getDataFromInputFile, htmls, s, sa } from './VanillaJs.js';
import { BtnIcon } from './BtnIcon.js';
import { Translate } from './Translate.js';
import { DropDown } from './DropDown.js';
import { dynamicCol } from './Css.js';
import { EventsUI } from './EventsUI.js';
import { ToggleSwitch } from './ToggleSwitch.js';
import { RichText } from './RichText.js';
import { loggerFactory } from './Logger.js';
import { Badge } from './Badge.js';
import { Content, attachMarkdownLinkHandlers } from './Content.js';
import { DocumentService } from '../../services/document/document.service.js';
import { NotificationManager } from './NotificationManager.js';
import { getApiBaseUrl } from '../../services/core/core.service.js';
import { getProxyPath, setQueryPath, navigateToProfile } from './Router.js';
import { PublicProfile } from './PublicProfile.js';
const logger = loggerFactory(import.meta);
class Panel {
static Tokens = {};
static async instance(
options = {
idPanel: '',
parentIdModal: '',
scrollClassContainer: '',
htmlFormHeader: async () => '',
formData: [],
data: [],
originData: () => [],
filesData: () => [],
onClick: () => {},
share: {
copyLink: false,
copySourceMd: false,
},
showCreatorProfile: false,
},
) {
const idPanel = options?.idPanel ? options.idPanel : getId(this.Tokens, `${idPanel}-`);
if (options.formData)
options.formData = options.formData.map((formObj) => {
formObj.id = `${idPanel}-${formObj.id}`;
return formObj;
});
const { scrollClassContainer, formData, data } = options;
const titleObj = formData.find((f) => f.panel && f.panel.type === 'title');
const titleKey = titleObj ? titleObj.model : '';
const subTitleObj = formData.find((f) => f.panel && f.panel.type === 'subtitle');
const subTitleKey = subTitleObj ? subTitleObj.model : '';
const fileNameInputExtDefaultContent = html` <div class="abs center">
<i style="font-size: 25px" class="fa-solid fa-cloud"></i>
</div>`;
const openPanelForm = () => {
s(`.${idPanel}-form-body`).classList.remove('hide');
s(`.btn-${idPanel}-add`).classList.add('hide');
// s(`.${scrollClassContainer}`).style.overflow = 'hidden';
if (options.customButtons) {
let customBtnIndex = -1;
for (const dataBtn of options.customButtons) {
customBtnIndex++;
const customBtnIndexFn = customBtnIndex;
const btnSelector = `btn-${idPanel}-custom${customBtnIndexFn}`;
s(`.${btnSelector}`).classList.add('hide');
}
}
setTimeout(() => {
s(`.${idPanel}-form-body`).style.opacity = 1;
});
};
const renderPanel = async (payload) => {
const obj = newInstance(payload);
if ('_id' in obj) obj.id = obj._id;
const { id } = obj;
setTimeout(async () => {
if (!s(`.${idPanel}`)) return;
LoadingAnimation.spinner.play(`.${idPanel}-img-spinner-${id}`, 'dual-ring');
if (options && options.callBackPanelRender)
await options.callBackPanelRender({
data: obj,
fileRender: async (options = { file: '', style: {}, class: '' }) => {
await Content.RenderFile({ container: `.${idPanel}-cell-col-a-${id}`, ...options });
s(`.${idPanel}-img-spinner-${id}`).classList.add('hide');
},
htmlRender: async ({ render }) => {
htmls(`.${idPanel}-cell-col-a-${id}`, render);
},
});
if (options.share && options.share.copyLink) {
EventsUI.onClick(
`.${idPanel}-btn-copy-share-${id}`,
async (e) => {
try {
const shareUrl = `${window.location.origin}${window.location.pathname}?cid=${obj._id}`;
await copyData(shareUrl);
await NotificationManager.Push({
status: 'success',
html: html`<div>${Translate.instance('link-copied')}</div>`,
});
// Track the copy share link event
await DocumentService.patch({ id: obj._id, action: 'copy-share-link' });
// Update the count in the UI - read current value from span first
const countSpan = s(`.${idPanel}-share-count-${id}`);
if (countSpan) {
const currentCount = parseInt(countSpan.textContent) || 0;
const newCount = currentCount + 1;
htmls(`.${idPanel}-share-count-${id}`, newCount);
} else {
// Create count badge if it didn't exist before (was 0)
const btn = s(`.${idPanel}-btn-copy-share-${id}`);
if (btn) {
const countBadge = document.createElement('span');
countBadge.className = `${idPanel}-share-count-${id}`;
countBadge.style.cssText =
'position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;';
countBadge.textContent = '1';
btn.appendChild(countBadge);
}
}
} catch (error) {
logger.error('Error copying share link:', error);
await NotificationManager.Push({
status: 'error',
html: html`<div>${Translate.instance('error-copying-link')}</div>`,
});
}
},
{ context: 'modal' },
);
// Add tooltip hover effect
setTimeout(() => {
const btn = s(`.${idPanel}-btn-copy-share-${id}`);
const tooltip = s(`.${idPanel}-share-tooltip-${id}`);
if (btn && tooltip) {
btn.addEventListener('mouseenter', () => {
tooltip.style.opacity = '1';
});
btn.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
});
}
});
}
if (options.share && options.share.copySourceMd) {
EventsUI.onClick(
`.${idPanel}-btn-copy-source-md-${id}`,
async (e) => {
try {
const filesData = options.filesData();
const foundFiles = filesData.find((d) => String(d._id || d.id) === String(obj._id || obj.id));
if (foundFiles && foundFiles.mdFileId && foundFiles.mdFileId.mdPlain) {
await copyData(foundFiles.mdFileId.mdPlain);
await NotificationManager.Push({
status: 'success',
html: html`<div>${Translate.instance('markdown-source-copied')}</div>`,
});
} else {
await NotificationManager.Push({
status: 'warning',
html: html`<div>No markdown source available</div>`,
});
}
} catch (error) {
logger.error('Error copying markdown source:', error);
await NotificationManager.Push({
status: 'error',
html: html`<div>${Translate.instance('error-copying-markdown')}</div>`,
});
}
},
{ context: 'modal' },
);
// Add tooltip hover effect
setTimeout(() => {
const btn = s(`.${idPanel}-btn-copy-source-md-${id}`);
const tooltip = s(`.${idPanel}-source-md-tooltip-${id}`);
if (btn && tooltip) {
btn.addEventListener('mouseenter', () => {
tooltip.style.opacity = '1';
});
btn.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
});
}
});
}
EventsUI.onClick(
`.${idPanel}-btn-delete-${id}`,
async (e) => {
logger.warn('delete', obj);
const { status } = await options.on.remove({ e, data: obj });
if (status === 'error') return;
if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
},
{ context: 'modal' },
);
EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
logger.warn('edit', obj);
const searchId = String(obj._id || obj.id);
if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
else if (obj.id) Panel.Tokens[idPanel].editId = obj.id;
s(`.btn-${idPanel}-label-edit`).classList.remove('hide');
s(`.btn-${idPanel}-label-add`).classList.add('hide');
openPanelForm();
// s(`.${scrollClassContainer}`).scrollTop = 0;
const originData = options.originData();
const filesData = options.filesData();
// Convert IDs to strings for comparison to handle ObjectId vs string issues
const foundOrigin = originData.find((d) => String(d._id || d.id) === searchId);
const foundFiles = filesData.find((d) => String(d._id || d.id) === searchId);
if (!foundOrigin) {
logger.error('Could not find origin data for ID:', searchId);
logger.error(
'Available originData IDs:',
originData.map((d) => String(d._id || d.id)),
);
}
if (!foundFiles) {
logger.error('Could not find files data for ID:', searchId);
logger.error(
'Available filesData IDs:',
filesData.map((d) => String(d._id || d.id)),
);
}
// Clear previous form values then populate with the current item's data
Input.cleanValues(formData);
await Input.setValues(formData, obj, foundOrigin, foundFiles);
if (options.on.initEdit) await options.on.initEdit({ data: obj });
});
s(`.a-${payload._id}`).onclick = async (e) => {
e.preventDefault();
if (options.onClick) await options.onClick({ payload });
};
s(`.container-${idPanel}-${id}`).onclick = async (e) => {
e.preventDefault();
// if (options.onClick) await options.onClick({ payload });
};
// Add theme change handler for creator profile header
if (options.showCreatorProfile && obj.userInfo) {
const updateCreatorProfileTheme = () => {
const profileHeader = s(`.creator-profile-header-${id}`);
if (profileHeader) {
profileHeader.style.borderBottom = `1px solid ${darkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)'}`;
profileHeader.style.background = `${darkTheme ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)'}`;
// Update avatar border if it's an image
const avatarImg = profileHeader.querySelector('.creator-avatar');
if (avatarImg && avatarImg.tagName === 'IMG') {
avatarImg.style.border = `2px solid ${darkTheme ? 'rgba(102, 126, 234, 0.5)' : 'rgba(102, 126, 234, 0.3)'}`;
}
// Update username color
const username = profileHeader.querySelector('.creator-username');
if (username) {
username.style.color = `${darkTheme ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.85)'}`;
}
// Update "Creator" label color
const creatorLabel = username?.nextElementSibling;
if (creatorLabel) {
creatorLabel.style.color = `${darkTheme ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.45)'}`;
}
}
};
// Register theme change handler
const profileThemeHandlerId = `${id}-creator-profile-theme`;
ThemeEvents[profileThemeHandlerId] = updateCreatorProfileTheme;
// Add click handlers for public profile links
setTimeout(() => {
const links = sa(`.creator-profile-link-${id}`);
links.forEach((link) => {
link.onclick = async (e) => {
e.preventDefault();
const username = link.getAttribute('data-id');
// Check if public profile modal is already open
const currentModal = s('.modal-public-profile');
if (currentModal) {
// Modal is already open, update the profile content dynamically
// Navigate to clean URL without intermediate ?cid= in history
navigateToProfile(username, { replace: false });
await PublicProfile.Update({
idModal: 'modal-public-profile',
user: { username },
});
} else {
// Modal is not open, navigate to clean URL and open modal
navigateToProfile(username, { replace: false });
if (s('.main-btn-public-profile')) s('.main-btn-public-profile').click();
}
};
});
});
}
});
if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
// Check if document is public (from obj.isPublic field)
const isPublic = obj.isPublic === true;
// Visibility icon: globe for public, padlock for private
const visibilityIcon = isPublic
? '<i class="fas fa-globe" title="Public document"></i>'
: '<i class="fas fa-lock" title="Private document"></i>';
return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}" style="position: relative;">
<div class="fl ${idPanel}-tools session-fl-log-in ${obj.tools ? '' : 'hide'}">
${await BtnIcon.instance({
class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
useVisibilityHover: true,
tooltipHtml: await Badge.instance({
id: `tooltip-${idPanel}-${id}`,
text: `${Translate.instance(`delete`)}`,
classList: '',
style: { top: `-22px`, left: '-13px' },
}),
})}
${await BtnIcon.instance({
class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
useVisibilityHover: true,
tooltipHtml: await Badge.instance({
id: `tooltip-${idPanel}-${id}`,
text: `${Translate.instance(`edit`)}`,
classList: '',
style: { top: `-22px`, left: '-5px' },
}),
})}
</div>
<div class="in container-${idPanel}-${id}">
<div class="panel-visibility-icon">${visibilityIcon}</div>
${options.showCreatorProfile && obj.userInfo
? html`<div
class="creator-profile-header creator-profile-header-${id}"
style="padding: 10px 12px; margin-bottom: 10px; border-bottom: 1px solid ${darkTheme
? 'rgba(255,255,255,0.1)'
: 'rgba(0,0,0,0.08)'}; display: flex; align-items: center; gap: 10px; background: ${darkTheme
? 'rgba(255,255,255,0.02)'
: 'rgba(0,0,0,0.02)'}; border-radius: 4px 4px 0 0;"
>
<a
href="${getProxyPath()}u/${obj.userInfo.username}"
class="creator-profile-link-${id}"
data-id="${obj.userInfo.username}"
style="display: flex;"
>
${obj.userInfo.profileImageId && obj.userInfo.profileImageId._id
? html`<img
class="creator-avatar"
src="${getApiBaseUrl({ id: obj.userInfo.profileImageId._id, endpoint: 'file/blob' })}"
alt="${obj.userInfo.username}"
style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid ${darkTheme
? 'rgba(102, 126, 234, 0.5)'
: 'rgba(102, 126, 234, 0.3)'}; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"
title="${obj.userInfo.username}"
/>`
: html`<div
class="creator-avatar"
style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"
title="${obj.userInfo.username}"
>
${(obj.userInfo.username || 'U').charAt(0).toUpperCase()}
</div>`}
</a>
<div style="display: flex; flex-direction: column; min-width: 0; flex: 1;">
<a
href="${getProxyPath()}u/${obj.userInfo.username}"
class="creator-username creator-profile-link-${id}"
data-id="${obj.userInfo.username}"
style="font-size: 14px; font-weight: 600; color: ${darkTheme
? 'rgba(255,255,255,0.9)'
: 'rgba(0,0,0,0.85)'}; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
>
${obj.userInfo.username || 'Unknown'}
</a>
<span
style="font-size: 11px; color: ${darkTheme
? 'rgba(255,255,255,0.5)'
: 'rgba(0,0,0,0.45)'}; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;"
>${obj.userInfo.briefDescription || 'Uploader'}</span
>
</div>
</div>`
: ''}
<div class="in ${idPanel}-head">
<div class="in ${idPanel}-title">
${options.titleIcon}
<a href="?cid=${payload._id}" class="a-title-${idPanel} a-${payload._id}">
${titleKey ? obj[titleKey] : ''}</a
>
</div>
<div class="in ${idPanel}-subtitle">
${subTitleKey ? obj[subTitleKey] : ''} <span class="tag-render-${id}"></span>
</div>
<!-- <div class="in ${idPanel}-tags"></div> -->
</div>
<div class="fl">
<div class="in fll ${idPanel}-cell ${idPanel}-cell-col-a ${idPanel}-cell-col-a-${id}">
<div class="abs center ${idPanel}-img-spinner-${id}"></div>
</div>
<div class="in fll ${idPanel}-cell ${idPanel}-cell-col-b">
${Object.keys(obj)
.map((infoKey) => {
if (infoKey === 'id') return html``;
const formObjData = formData.find((f) => f.model === infoKey);
const valueIcon = formObjData?.panel?.icon?.value ? formObjData.panel.icon.value : '';
const keyIcon = formObjData?.panel?.icon?.key ? formObjData.panel.icon.key : '';
if (formObjData && ['datetime-local'].includes(formObjData.inputType) && isValidDate(obj[infoKey])) {
obj[infoKey] = `${obj[infoKey]}`.replace('T', ' ').replace('.000Z', '');
}
if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'tags')) {
// Function to render tags with current theme
const renderTags = async () => {
let tagRender = html``;
for (const tag of obj[infoKey]) {
// Use subThemeManager colors for consistent theming
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
let tagBg, tagColor;
if (darkTheme) {
tagBg = hasThemeColor ? darkenHex(themeColor, 0.6) : '#4a4a4a';
tagColor = hasThemeColor ? lightenHex(themeColor, 0.7) : '#ffffff';
} else {
tagBg = hasThemeColor ? lightenHex(themeColor, 0.7) : '#a2a2a2';
tagColor = hasThemeColor ? darkenHex(themeColor, 0.5) : '#ffffff';
}
tagRender += await Badge.instance({
text: tag,
classList: 'inl panel-tag-clickable',
style: {
margin: '3px',
background: tagBg,
color: tagColor,
cursor: 'pointer',
transition: 'all 0.2s ease',
},
});
}
if (s(`.tag-render-${id}`)) {
htmls(`.tag-render-${id}`, tagRender);
// Add click handlers to tags for search integration
setTimeout(() => {
const tagElements = sa(`.tag-render-${id} .panel-tag-clickable`);
tagElements.forEach((tagEl) => {
tagEl.onclick = (e) => {
e.stopPropagation();
const tagText = tagEl.textContent.trim();
// Open search bar if closed
if (
!s('.main-body-btn-ui-bar-custom-open').classList.contains('hide') ||
!s(`.main-body-btn-ui-open`).classList.contains('hide')
)
s('.main-body-btn-bar-custom').click();
// Find and populate search box if it exists
const searchBox = s('.top-bar-search-box');
if (searchBox) {
searchBox.value = tagText;
searchBox.focus();
// Trigger input event to start search
const inputEvent = new Event('input', { bubbles: true });
searchBox.dispatchEvent(inputEvent);
logger.info(`Tag clicked: ${tagText} - search triggered`);
}
};
});
}, 100);
}
};
// Initial render
setTimeout(renderTags);
// Add theme change handler for this tag set
const tagThemeHandlerId = `${id}-tags-${infoKey}-theme`;
ThemeEvents[tagThemeHandlerId] = renderTags;
return html``;
}
{
const formDataObj = formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'list');
if (obj[infoKey] && obj[infoKey].length > 0 && formDataObj)
return html`<div class="in ${idPanel}-row">
<span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
${keyIcon} ${Translate.instance(infoKey)}:</span
>
<span class="${idPanel}-row-value"
>${valueIcon} ${obj[infoKey].map((k) => Translate.instance(k)).join(', ')}</span
>
</div> `;
}
{
const formDataObj = formData.find(
(f) => f.model === infoKey && f.panel && f.panel.type === 'info-row-pin',
);
if (obj[infoKey] && formDataObj)
return html`<div class="in ${idPanel}-row">
<span class="${idPanel}-row-pin-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
${keyIcon}
${formDataObj.translateCode
? Translate.instance(formDataObj.translateCode)
: Translate.instance(infoKey)}:</span
>
<span class="${idPanel}-row-pin-value">${valueIcon} ${obj[infoKey]}</span>
</div> `;
}
{
const formDataObj = formData.find(
(f) => f.model === infoKey && f.panel && f.panel.type === 'info-row',
);
if (obj[infoKey] && formDataObj)
return html`<div class="in ${idPanel}-row">
<span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
${keyIcon}
${formDataObj.translateCode
? Translate.instance(formDataObj.translateCode)
: Translate.instance(infoKey)}:</span
>
<span class="${idPanel}-row-value"> ${valueIcon} ${obj[infoKey]}</span>
</div> `;
}
return html``;
})
.join('')}
</div>
</div>
</div>
${options.share && (options.share.copyLink || options.share.copySourceMd)
? html`<div
class="${idPanel}-share-btn-container ${idPanel}-share-btn-container-${id}"
style="position: absolute; bottom: 8px; right: 8px; z-index: 2; display: flex; gap: 8px;"
>
${options.share.copyLink
? html`<div style="position: relative;">
<button
class="btn-icon ${idPanel}-btn-copy-share-${id}"
style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
>
<i class="fas fa-link" style="font-size: 20px;"></i>
${obj.totalCopyShareLinkCount && obj.totalCopyShareLinkCount > 0
? html`<span
class="${idPanel}-share-count-${id}"
style="position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;"
>${obj.totalCopyShareLinkCount}</span
>`
: ''}
</button>
<div
class="${idPanel}-share-tooltip-${id}"
style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
>
${Translate.instance('copy-share-link')}
</div>
</div>`
: ''}
${options.share.copySourceMd
? html`<div style="position: relative;">
<button
class="btn-icon ${idPanel}-btn-copy-source-md-${id}"
style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
>
<i class="fas fa-code" style="font-size: 20px;"></i>
</button>
<div
class="${idPanel}-source-md-tooltip-${id}"
style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
>
Copy Source MD
</div>
</div>`
: ''}
</div>`
: ''}
</div>`;
};
let render = '';
let renderForm = html` <div class="in modal" style="top: 0px; z-index: 1; padding-bottom: 5px">
${await BtnIcon.instance({
class: `inl section-mp btn-custom btn-${idPanel}-close`,
label: html`<i class="fa-solid fa-xmark"></i> ${Translate.instance('close')}`,
type: 'button',
})}
</div>
${options?.htmlFormHeader ? await options.htmlFormHeader() : ''}`;
for (const modelData of formData) {
if (modelData.disableRender) continue;
switch (modelData.inputType) {
case 'dropdown-checkbox': {
renderForm += html`<div class="in section-mp">
${await DropDown.instance({
id: `${modelData.id}`,
label: html`${Translate.instance(modelData.model)}`,
type: 'checkbox',
value: modelData.dropdown.options[0],
resetOption: true,
containerClass: `${idPanel}-dropdown-checkbox`,
data: modelData.dropdown.options.map((dKey) => {
return {
value: dKey,
data: dKey,
checked: false,
display: html`${Translate.instance(dKey)}`,
onClick: function () {
logger.info('DropDown onClick', this.checked);
},
};
}),
})}
</div>`;
break;
}
case 'dropdown':
renderForm += html` <div class="in section-mp">
${await DropDown.instance({
id: `${modelData.id}`,
label: html`${Translate.instance(modelData.model)}`,
containerClass: `${idPanel}-dropdown`,
// type: 'checkbox',
value: modelData.dropdown.options[0].replaceAll(' ', '-').toLowerCase(),
data: modelData.dropdown.options.map((dKey) => {
const key = dKey.replaceAll(' ', '-').toLowerCase();
return {
value: key,
data: dKey,
// checked: true,
display: html`${Translate.instance(dKey)}`,
onClick: function () {},
};
}),
})}
</div>`;
break;
case 'md': {
renderForm += html`<div class="in section-mp">
${await RichText.instance({ id: modelData.id, parentIdModal: options.parentIdModal })}
</div>`;
break;
}
case 'checkbox-on-off':
{
setTimeout(() => {
s(`.toggle-form-container-${modelData.id}`).onclick = () => {
ToggleSwitch.Tokens[`${modelData.id}`].click();
};
});
renderForm += html`<div
class="in section-mp toggle-form-container toggle-form-container-${modelData.id} hover"
style="height: 82px;"
>
<div class="fl">
<div class="in fll" style="width: 70%">
<div class="in">
${modelData.panel && modelData.panel.icon ? modelData.panel.icon : ''}
${Translate.instance(modelData.model)}
</div>
</div>
<div class="in fll" style="width: 30%">
${await ToggleSwitch.instance({
id: `${modelData.id}`,
containerClass: 'inl',
disabledOnClick: true,
checked: false,
on: {
unchecked: () => {},
checked: () => {},
},
})}
</div>
</div>
</div>`;
}
break;
case 'file':
setTimeout(() => {
if (!s(`.${modelData.id}`)) return;
s(`.${modelData.id}`).fileNameInputExtDefaultContent = fileNameInputExtDefaultContent;
s(`.${modelData.id}`).onchange = async (e) => {
if (!Object.keys(e.target.files).length) return;
s(`.${modelData.id}`).inputFiles = e.target.files;
let htmlFileRender = '';
for (const fileKey of Object.keys(e.target.files)) {
const file = e.target.files[fileKey];
htmlFileRender += html`${await Content.RenderFile({
url: URL.createObjectURL(file),
file: {
mimetype: file.type,
name: file.name,
data: {
data: await getDataFromInputFile(file),
},
},
raw: true,
})}
<div class="in" style="overflow: hidden">${file.name}</div>`;
}
htmls(`.file-name-render-${modelData.id}`, htmlFileRender);
};
});
renderForm += `${await Input.instance({
inputClass: 'hide',
id: `${modelData.id}`,
type: modelData.inputType,
multiple: true,
// autocomplete: 'new-password',
label: html`<i class="fa-solid fa-file-arrow-up"></i> ${Translate.instance('select')}
${Translate.instance('file')}`,
containerClass: 'in section-mp width-mini-box input-container',
placeholder: true,
extension: () =>
html`<div class="file-name-render-${modelData.id}" style="min-height: 50px">
${fileNameInputExtDefaultContent}
</div>`,
// disabled: true,
// disabledEye: true,
})}
${await BtnIcon.instance({
class: `inl section-mp btn-custom btn-${idPanel}-clean-file`,
label: html`<i class="fa-solid fa-file-circle-xmark"></i> ${Translate.instance('clear-file')}`,
type: 'button',
})}`;
break;
default:
renderForm += `${await Input.instance({
id: `${modelData.id}`,
type: modelData.inputType,
// autocomplete: 'new-password',
label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance(modelData.model)}`,
containerClass: 'in section-mp width-mini-box input-container',
placeholder: true,
// disabled: true,
// disabledEye: true,
})}`;
break;
}
}
let renderFormBtn = html`
${await BtnIcon.instance({
class: `inl section-mp btn-custom btn-${idPanel}-submit`,
label: html`<span class="btn-${idPanel}-label-add"
><i class="fas fa-plus"></i> ${Translate.instance('add')}</span
><span class="btn-${idPanel}-label-edit hide"
><i class="fas fa-edit"></i> ${Translate.instance('edit')}</span
>`,
type: 'submit',
})}
${await BtnIcon.instance({
class: `inl section-mp btn-custom btn-${idPanel}-clean`,
label: html`<i class="fa-solid fa-broom"></i> ${Translate.instance('clear')}`,
type: 'button',
})}
`;
setTimeout(async () => {
const validators = await Validator.instance(formData);
s(`.${idPanel}-form`).onsubmit = (e) => {
e.preventDefault();
s(`.btn-${idPanel}-submit`).click();
};
EventsUI.onClick(`.btn-${idPanel}-submit`, async (e) => {
e.preventDefault();
const { errorMessage } = await validators();
if (errorMessage) return;
const obj = Input.getValues(formData);
obj.id = `${data.length}`;
let documents;
if (options && options.on && options.on.add) {
const { status, data } = await options.on.add({ data: obj, editId: Panel.Tokens[idPanel].editId });
if (status === 'error') return;
documents = data;
}
s(`.btn-${idPanel}-clean`).click();
if (Panel.Tokens[idPanel].editId && s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`))
s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`).remove();
if (Array.isArray(documents)) {
htmls(`.${idPanel}-render`, '');
for (const doc of documents) {
append(`.${idPanel}-render`, await renderPanel(doc));
}
} else htmls(`.${idPanel}-render`, await renderPanel({ ...obj, ...documents }));
attachMarkdownLinkHandlers(`.${idPanel}-render`);
Input.cleanValues(formData);
s(`.btn-${idPanel}-close`).click();
s(`.${scrollClassContainer}`).scrollTop = 0;
if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
});
s(`.btn-${idPanel}-clean`).onclick = () => {
Input.cleanValues(formData);
};
if (s(`.btn-${idPanel}-clean-file`))
s(`.btn-${idPanel}-clean-file`).onclick = () => {
// Clear file input specifically
const fileFormData = formData.find((f) => f.inputType === 'file');
if (fileFormData && s(`.${fileFormData.id}`)) {
s(`.${fileFormData.id}`).value = '';
s(`.${fileFormData.id}`).inputFiles = null;
htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
}
};
s(`.btn-${idPanel}-close`).onclick = (e) => {
e.preventDefault();
s(`.${idPanel}-form-body`).style.opacity = 0;
s(`.btn-${idPanel}-add`).classList.remove('hide');
s(`.${scrollClassContainer}`).style.overflow = 'auto';
if (options.customButtons) {
let customBtnIndex = -1;
for (const dataBtn of options.customButtons) {
customBtnIndex++;
const customBtnIndexFn = customBtnIndex;
const btnSelector = `btn-${idPanel}-custom${customBtnIndexFn}`;
s(`.${btnSelector}`).classList.remove('hide');
}
}
s(`.${idPanel}-form-body`).classList.add('hide');
};
s(`.btn-${idPanel}-add`).onclick = async (e) => {
e.preventDefault();
// Clean all form inputs and reset data scope
Input.cleanValues(formData);
// Clean file input specifically
const fileFormData = formData.find((f) => f.inputType === 'file');
if (fileFormData && s(`.${fileFormData.id}`)) {
s(`.${fileFormData.id}`).value = '';
s(`.${fileFormData.id}`).inputFiles = null;
htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
}
// Reset edit ID to ensure we're in "add" mode
Panel.Tokens[idPanel].editId = undefined;
// Update button labels
s(`.btn-${idPanel}-label-add`).classList.remove('hide');
s(`.btn-${idPanel}-label-edit`).classList.add('hide');
// Scroll to top
s(`.${scrollClassContainer}`).scrollTop = 0;
openPanelForm();
if (options.on.initAdd) await options.on.initAdd();
};
if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
attachMarkdownLinkHandlers(`.${idPanel}-render`);
});
if (data.length > 0) for (const obj of data) render += await renderPanel(obj);
else {
render += html`<div class="in" style="min-height: 200px">
<div class="abs center"><i class="fas fa-exclamation-circle"></i> ${Translate.instance(`no-result-found`)}</div>
</div>`;
if (options.on.noResultFound) setTimeout(options.on.noResultFound);
}
this.Tokens[idPanel] = { idPanel, scrollClassContainer, formData, data, titleKey, subTitleKey, renderPanel };
let customButtonsRender = '';
if (options && options.customButtons) {
let customBtnIndex = -1;
for (const dataBtn of options.customButtons) {
customBtnIndex++;
const customBtnIndexFn = customBtnIndex;
const btnSelector = `btn-${idPanel}-custom${customBtnIndexFn}`;
if (dataBtn.onClick)
setTimeout(() => {
s(`.${btnSelector}`).onclick = () => dataBtn.onClick();
});
customButtonsRender += ` ${await BtnIcon.instance({
class: `inl section-mp btn-custom ${btnSelector}`,
label: dataBtn.label,
type: 'button',
})}`;
}
}
// Add theme change handler
const themeChangeHandler = () => {
const styleElement = s(`.${idPanel}-styles`);
if (styleElement) {
styleElement.textContent = darkTheme
? getDarkStyles(idPanel, scrollClassContainer)
: getLightStyles(idPanel, scrollClassContainer);
}
// Update tag hover styles
const tagStyleElement = s(`.${idPanel}-tag-styles`);
if (tagStyleElement) {
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
let hoverBg;
if (darkTheme) {
hoverBg = hasThemeColor ? darkenHex(themeColor, 0.5) : '#5a5a5a';
} else {
hoverBg = hasThemeColor ? lightenHex(themeColor, 0.6) : '#8a8a8a';
}
tagStyleElement.textContent = css`
.panel-tag-clickable:hover {
background: ${hoverBg} !important;
transform: scale(1.05);
}
.panel-tag-clickable:active {
transform: scale(0.98);
}
`;
}
};
// Add theme change listener
ThemeEvents[`${idPanel}-theme`] = themeChangeHandler;
// Initial styles
setTimeout(ThemeEvents[`${idPanel}-theme`]);
return html`
<style>
.${idPanel}-head {
/* background: white; */
margin-bottom: 10px;
}
.img-${idPanel} {
width: 100%;
}
.${idPanel}-title {
color: ${(() => {
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
if (hasThemeColor) {
return darkTheme ? lightenHex(themeColor, 0.3) : darkenHex(themeColor, 0.2);
} else {
return darkTheme ? '#8a85ff' : 'rgba(109, 104, 255, 1)';
}
})()};
font-size: 24px;
padding: 5px;
}
.a-title-${idPanel} {
color: ${(() => {
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
if (hasThemeColor) {
return darkTheme ? lightenHex(themeColor, 0.3) : darkenHex(themeColor, 0.2);
} else {
return darkTheme ? '#8a85ff' : 'rgba(109, 104, 255, 1)';
}
})()};
}
.a-title-${idPanel}:hover {
color: ${(() => {
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
if (hasThemeColor) {
return darkTheme ? lightenHex(themeColor, 0.5) : lightenHex(themeColor, 0.3);
} else {
return darkTheme ? '#ffb74d' : '#e89f4c';
}
})()};
}
.${idPanel}-row {
padding: 5px;
margin: 5px;
font-size: 16px;
}
.${idPanel}-subtitle {
font-size: 17px;
margin-left: 20px;
top: -7px;
}
.${idPanel}-tags {
font-size: 17px;
margin-left: 10px;
top: -7px;
}
.${idPanel}-row-key {
}
.${idPanel}-row-value {
}
.${idPanel}-row-pin-key {
}
.${idPanel}-row-pin-value {
font-size: 20px;
color: rgb(19 190 84);
}
.${idPanel}-form-header {
}
.${idPanel}-form-body {
transition: 0.3s;
}
.btn-${idPanel}-add {
padding: 10px;
font-size: 20px;
}
.${idPanel}-dropdown {
min-height: 100px;
}
.${idPanel}-btn-tool {
background: none !important;
color: #c4c4c4 !important;
}
.${idPanel}-btn-tool:hover {
color: #000000 !important;
font-size: 17px !important;
}
.${idPanel}-share-btn-container button:hover {
background: transparent !important;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}
.${idPanel}-share-btn-container button:focus {
outline: none;
background: transparent !important;
}
.${idPanel}-share-btn-container button:focus {
outline: none;
background: transparent !important;
}
.${idPanel}-share-btn-container button:active {
transform: scale(0.95);
}
.${idPanel}-share-btn-container span[class*='share-count'] {
animation: ${idPanel}-share-pulse 2s infinite;
}
@keyframes ${idPanel}-share-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
<style class="${idPanel}-styles"></style>
<style class="${idPanel}-tag-styles">
.panel-tag-clickable:hover {
background: ${(() => {
const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
if (darkTheme) {
return hasThemeColor ? darkenHex(themeColor, 0.5) : '#5a5a5a';
} else {
return hasThemeColor ? lightenHex(themeColor, 0.6) : '#8a8a8a';
}
})()} !important;
transform: scale(1.05);
}
.panel-tag-clickable:active {
transform: scale(0.98);
}
</style>
<div class="${idPanel}-container">
<div class="in modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}">
<div class="in ${idPanel}-form-header">
${await BtnIcon.instance({
class: `inl section-mp btn-custom btn-${idPanel}-add ${
options?.role?.add ? (!options.role.add() ? 'hide' : '') : ''
}`,
label: html`<i class="fas fa-plus"></i> ${Translate.instance('add')}`,
type: 'button',
})}
<!-- pagination component -->
${customButtonsRender}
</div>
<div class="in ${idPanel}-form-body hide" style="opacity: 0">
<form class="in ${idPanel}-form">
<div class="fl">${renderForm}</div>
<div class="in">${renderFormBtn}</div>
<br /><br />
</form>
</div>
</div>
${dynamicCol({
id: `${idPanel}-cell`,
containerSelector: `${idPanel}-render`,
limit: 500,
type: 'a-50-b-50',
})}
<div class="in ${idPanel}-render">${render}</div>
</div>
`;
}
}
// Function to generate base styles
function getBaseStyles(idPanel, scrollClassContainer) {
return css`
.${scrollClassContainer} {
scroll-behavior: smooth;
}
.${idPanel}-form-container {
padding-bottom: 20px;
top: 0px;
z-index: 1;
overflow: auto;
}
.${idPanel}-form {
max-width: 900px;
}
.${idPanel}-cell {
min-height: 200px;
}
.${idPanel}-container {
}
.${idPanel} {
margin: 10px;
transition: 0.3s;
border-radius: 10px;
padding: 10px;
min-height: 400px;
}
.${idPanel}-head {
margin-bottom: 10px;
}
.img-${idPanel} {
width: 100%;
}
.${idPanel}-row {
padding: 5px;
margin: 5px;
font-size: 16px;
}
.${idPanel}-subtitle {
font-size: 17px;
margin-left: 20px;
top: -7px;
}
.${idPanel}-tags {
font-size: 17px;
margin-left: 10px;
top: -7px;
}
.${idPanel}-form-body {
transition: 0.3s;
}
.btn-${idPanel}-add {
padding: 10px;
font-size: 20px;
}
.${idPanel}-dropdown {
min-height: 100px;
}
.panel-visibility-icon {
position: absolute;
top: 34px;
left: 0px;
font-size: 14px;
opacity: 0.7;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 10;
}
.${idPanel}:hover .panel-visibility-icon {
opacity: 1;
}
`;
}
// Function to generate light theme styles
function getLightStyles(idPanel, scrollClassContainer) {
return css`
${getBaseStyles(idPanel, scrollClassContainer)}
.${idPanel} {
background: #f6f6f6;
color: black;
}
.${idPanel}:hover {
background: #ffffff;
}
.${idPanel}-title {
color: ${(() => {
const themeColor = subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? darkenHex(themeColor, 0.2) : 'rgba(109, 104, 255, 1)';
})()};
font-size: 24px;
padding: 5px;
}
.a-title-${idPanel} {
color: ${(() => {
const themeColor = subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? darkenHex(themeColor, 0.2) : 'rgba(109, 104, 255, 1)';
})()};
}
.a-title-${idPanel}:hover {
color: ${(() => {
const themeColor = subThemeManager.lightColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? lightenHex(themeColor, 0.3) : '#e89f4c';
})()};
}
.${idPanel}-row-pin-value {
font-size: 20px;
color: rgb(19 190 84);
}
.${idPanel}-btn-tool {
background: none !important;
color: #c4c4c4 !important;
}
.${idPanel}-btn-tool:hover {
color: #000000 !important;
font-size: 17px !important;
}
.panel-visibility-icon .fa-globe,
.panel-visibility-icon .fa-lock {
color: #666;
}
`;
}
// Function to generate dark theme styles
function getDarkStyles(idPanel, scrollClassContainer) {
return css`
${getBaseStyles(idPanel, scrollClassContainer)}
.${idPanel} {
background: #2d2d2d;
color: #e0e0e0;
}
.${idPanel}:hover {
background: #3a3a3a;
}
.${idPanel}-title {
color: ${(() => {
const themeColor = subThemeManager.darkColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? lightenHex(themeColor, 0.3) : '#8a85ff';
})()};
font-size: 24px;
padding: 5px;
}
.a-title-${idPanel} {
color: ${(() => {
const themeColor = subThemeManager.darkColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? lightenHex(themeColor, 0.3) : '#8a85ff';
})()};
}
.a-title-${idPanel}:hover {
color: ${(() => {
const themeColor = subThemeManager.darkColor;
const hasThemeColor = themeColor && themeColor !== null;
return hasThemeColor ? lightenHex(themeColor, 0.5) : '#ffb74d';
})()};
}
.${idPanel}-row-pin-value {
font-size: 20px;
color: #4caf50;
}
.${idPanel}-btn-tool {
background: none !important;
color: #666666 !important;
}
.${idPanel}-btn-tool:hover {
color: #ffffff !important;
font-size: 17px !important;
}
.panel-visibility-icon .fa-globe,
.panel-visibility-icon .fa-lock {
color: #999;
}
`;
}
export { Panel };