SHA256
243 lines
10 KiB
JavaScript
243 lines
10 KiB
JavaScript
import { profile } from '../mock-data.js';
|
||
import { state } from '../state.js';
|
||
import { renderUserAvatar } from '../components/avatar-image.js';
|
||
import { createOverflowDots } from '../components/overflow-dots.js';
|
||
import { createTopBar } from '../components/topbar.js';
|
||
import { loadUserProfileCard } from '../services/user-connections.js';
|
||
|
||
export const pageMeta = { id: 'profile-view', title: 'Профиль' };
|
||
|
||
function escapeHtml(text) {
|
||
return String(text || '')
|
||
.replaceAll('&', '&')
|
||
.replaceAll('<', '<')
|
||
.replaceAll('>', '>')
|
||
.replaceAll('"', '"')
|
||
.replaceAll("'", ''');
|
||
}
|
||
|
||
function metricHtml({ kind, label, value, glow = false, positionClass = '' }) {
|
||
const numericValue = Number(value || 0);
|
||
return `
|
||
<button
|
||
type="button"
|
||
class="user-profile-metric ${positionClass}${glow ? ' is-glowing' : ''}"
|
||
data-profile-list="${escapeHtml(kind)}"
|
||
aria-label="${escapeHtml(label)}: ${numericValue}"
|
||
>
|
||
<span class="user-profile-metric-circle">${numericValue}</span>
|
||
<span class="user-profile-metric-label">${escapeHtml(label)}</span>
|
||
</button>`;
|
||
}
|
||
|
||
function friendsMetricHtml(stats = {}) {
|
||
const friends = Number(stats.friendsCount || 0);
|
||
const closeFriends = Number(stats.closeFriendsCount || 0);
|
||
return `
|
||
<button
|
||
type="button"
|
||
class="user-profile-metric is-social-metric is-friends-combined"
|
||
data-profile-list="friends"
|
||
aria-label="Друзья: ${friends}; близкие друзья: ${closeFriends}"
|
||
>
|
||
<span class="user-profile-metric-value-combined">${closeFriends} / ${friends}</span>
|
||
<span class="user-profile-metric-label">Друзья</span>
|
||
</button>`;
|
||
}
|
||
|
||
function hasContacts(card) {
|
||
return [card?.web, card?.phone, card?.address].some((value) => String(value || '').trim());
|
||
}
|
||
|
||
function spiritualPathDetailHtml(card) {
|
||
const value = String(card?.spiritualPath || '').trim();
|
||
return `<div class="user-profile-detail-copy${value ? '' : ' is-muted'}">${escapeHtml(value || 'Не заполнено')}</div>`;
|
||
}
|
||
|
||
function contactsDetailHtml(card) {
|
||
const rows = [
|
||
['Ссылки', card?.web],
|
||
['Телефон', card?.phone],
|
||
['Адрес', card?.address],
|
||
].filter(([, value]) => String(value || '').trim());
|
||
|
||
if (!rows.length) {
|
||
return '<div class="user-profile-detail-copy is-muted">Не заполнено</div>';
|
||
}
|
||
return rows.map(([label, value]) => `
|
||
<div class="user-profile-contact-row">
|
||
<span>${escapeHtml(label)}</span>
|
||
<b>${escapeHtml(value)}</b>
|
||
</div>`).join('');
|
||
}
|
||
|
||
export function render({ navigate, chrome }) {
|
||
const login = String(state.session.login || profile.login || '').trim();
|
||
const screen = document.createElement('section');
|
||
screen.className = 'stack user-profile-screen';
|
||
|
||
const topbar = createTopBar({
|
||
title: login || 'Профиль',
|
||
className: 'topbar--profile user-profile-header',
|
||
actions: [
|
||
{
|
||
iconNode: createOverflowDots(),
|
||
title: 'Меню профиля',
|
||
ariaLabel: 'Меню профиля',
|
||
className: 'profile-head-menu-btn',
|
||
menu: {
|
||
className: 'profile-head-menu',
|
||
minWidth: 250,
|
||
items: [
|
||
{ label: 'Редактировать профиль', iconSrc: '/assets/profile-icon-profile.svg', action: () => navigate('profile-edit-view') },
|
||
{ label: 'Кошелёк', iconSrc: '/assets/profile-icon-wallet.svg', action: () => navigate('wallet-view') },
|
||
{ label: 'Настройки', iconSrc: '/assets/profile-icon-settings.svg', action: () => navigate('settings-view') },
|
||
{ label: 'Подтверждённые аккаунты', action: () => navigate(`SHiNE/${encodeURIComponent(login)}/list/primary_given`) },
|
||
{ label: 'Подтверждённые сияющие', action: () => navigate(`SHiNE/${encodeURIComponent(login)}/list/shine_given`) },
|
||
{ label: 'Сменить профиль', action: () => navigate('profiles-view') },
|
||
],
|
||
},
|
||
},
|
||
],
|
||
});
|
||
chrome?.setTopbar(topbar);
|
||
|
||
const status = document.createElement('div');
|
||
status.className = 'status-line user-profile-status';
|
||
status.textContent = 'Загрузка профиля...';
|
||
|
||
const body = document.createElement('div');
|
||
body.className = 'user-profile-body';
|
||
screen.append(status, body);
|
||
|
||
let card = null;
|
||
|
||
function renderProfile() {
|
||
if (!card) return;
|
||
const stats = card.stats || {};
|
||
const official = card.accountRole === 'primary';
|
||
const shining = card.shineStatus === 'shining';
|
||
const fullName = [card.firstName, card.lastName]
|
||
.map((value) => String(value || '').trim())
|
||
.filter(Boolean)
|
||
.join(' ');
|
||
const displayName = fullName || card.login || login || 'Профиль';
|
||
const about = String(card.about || '').trim();
|
||
const spiritualPath = String(card.spiritualPath || '').trim();
|
||
const contactsVisible = hasContacts(card);
|
||
|
||
const title = topbar.querySelector('.topbar__title');
|
||
if (title) title.textContent = card.login || login || 'Профиль';
|
||
|
||
body.innerHTML = `
|
||
<div class="user-profile-hero" aria-label="Профиль ${escapeHtml(card.login)}">
|
||
${metricHtml({ kind: 'primary_received', label: 'Официальный', value: stats.primaryReceivedCount, glow: official, positionClass: 'is-top-left' })}
|
||
${metricHtml({ kind: 'shine_received', label: 'Сияющий', value: stats.shineReceivedCount, glow: shining, positionClass: 'is-top-right' })}
|
||
<div class="user-profile-avatar-slot"></div>
|
||
</div>
|
||
|
||
<div class="user-profile-identity">
|
||
<div class="user-profile-full-name">${escapeHtml(displayName)}</div>
|
||
<div class="user-profile-login">@${escapeHtml(card.login || login)}</div>
|
||
</div>
|
||
|
||
<div class="user-profile-social-metrics">
|
||
${friendsMetricHtml(stats)}
|
||
${metricHtml({ kind: 'channels_owned', label: 'Каналы', value: stats.ownedPublicChannelsCount, positionClass: 'is-social-metric' })}
|
||
${metricHtml({ kind: 'channels_following', label: 'Подписки', value: stats.followingChannelsCount, positionClass: 'is-social-metric' })}
|
||
</div>
|
||
|
||
<section class="user-profile-about-card" aria-label="О себе">
|
||
<div class="user-profile-about-title">О себе</div>
|
||
<div class="user-profile-about-field${about ? '' : ' is-empty'}">${escapeHtml(about || 'Не заполнено')}</div>
|
||
</section>
|
||
|
||
${(contactsVisible || spiritualPath) ? `
|
||
<div class="user-profile-detail-links user-profile-detail-links--below-about" aria-label="Дополнительная информация о профиле">
|
||
${contactsVisible ? `<button type="button" class="ui-button" data-profile-detail="contacts" aria-pressed="false" aria-controls="profile-view-detail-panel"><span class="user-profile-detail-tab-label">Контакты</span></button>` : '<span></span>'}
|
||
${spiritualPath ? `<button type="button" class="ui-button" data-profile-detail="spiritual-path" aria-pressed="false" aria-controls="profile-view-detail-panel"><span class="user-profile-detail-tab-label">Духовный путь</span></button>` : '<span></span>'}
|
||
</div>
|
||
<section class="user-profile-detail-panel" id="profile-view-detail-panel" aria-live="polite" hidden></section>` : ''}
|
||
|
||
<div class="user-profile-actions-wrap">
|
||
<div class="user-profile-actions" aria-label="Действия со своим профилем">
|
||
<button type="button" class="user-profile-action-btn" data-self-profile-action="edit" aria-label="Редактировать профиль" title="Редактировать профиль"><img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true"></button>
|
||
<button type="button" class="user-profile-action-btn" data-self-profile-action="wallet" aria-label="Кошелёк" title="Кошелёк"><img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true"></button>
|
||
<button type="button" class="user-profile-action-btn" data-self-profile-action="settings" aria-label="Настройки" title="Настройки"><img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true"></button>
|
||
</div>
|
||
</div>`;
|
||
|
||
const avatarSlot = body.querySelector('.user-profile-avatar-slot');
|
||
avatarSlot?.append(renderUserAvatar({
|
||
login: card.login,
|
||
firstName: card.firstName,
|
||
lastName: card.lastName,
|
||
avatar: card.avatar,
|
||
size: 'xl',
|
||
className: 'user-profile-hero-avatar',
|
||
glow: shining,
|
||
}));
|
||
|
||
status.textContent = '';
|
||
}
|
||
|
||
body.addEventListener('click', (event) => {
|
||
if (!card) return;
|
||
|
||
const listButton = event.target.closest('[data-profile-list]');
|
||
if (listButton) {
|
||
const kind = listButton.dataset.profileList;
|
||
if (kind) navigate(`SHiNE/${encodeURIComponent(card.login)}/list/${encodeURIComponent(kind)}`);
|
||
return;
|
||
}
|
||
|
||
const actionButton = event.target.closest('[data-self-profile-action]');
|
||
if (actionButton) {
|
||
const action = actionButton.dataset.selfProfileAction;
|
||
if (action === 'edit') navigate('profile-edit-view');
|
||
if (action === 'wallet') navigate('wallet-view');
|
||
if (action === 'settings') navigate('settings-view');
|
||
return;
|
||
}
|
||
|
||
const detailButton = event.target.closest('[data-profile-detail]');
|
||
if (!detailButton) return;
|
||
const detailKind = detailButton.dataset.profileDetail;
|
||
const detailPanel = body.querySelector('#profile-view-detail-panel');
|
||
if (!detailPanel) return;
|
||
|
||
body.querySelectorAll('[data-profile-detail]').forEach((button) => {
|
||
const active = button === detailButton;
|
||
button.classList.toggle('is-active', active);
|
||
button.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||
});
|
||
|
||
if (detailKind === 'spiritual-path') {
|
||
detailPanel.innerHTML = spiritualPathDetailHtml(card);
|
||
} else if (detailKind === 'contacts') {
|
||
detailPanel.innerHTML = contactsDetailHtml(card);
|
||
} else {
|
||
return;
|
||
}
|
||
|
||
detailPanel.hidden = false;
|
||
detailPanel.dataset.activeDetail = detailKind;
|
||
});
|
||
|
||
async function refresh() {
|
||
if (state.session.isLocalDemo) {
|
||
status.textContent = 'Локальный тестовый режим.';
|
||
return;
|
||
}
|
||
card = await loadUserProfileCard(login);
|
||
renderProfile();
|
||
}
|
||
|
||
refresh().catch((error) => {
|
||
status.className = 'status-line user-profile-status is-unavailable';
|
||
status.textContent = `Ошибка: ${error?.message || 'unknown'}`;
|
||
});
|
||
|
||
return screen;
|
||
}
|