feat(profile): разделить просмотр и редактирование профиля
This commit is contained in:
AidarKC
parent
1fec6c7b54
commit
2350745e61
@ -1,2 +1,2 @@
|
||||
client.version=1.2.12
|
||||
server.version=1.2.12
|
||||
client.version=1.2.13
|
||||
server.version=1.2.13
|
||||
|
||||
@ -40,6 +40,7 @@ import * as loginPasswordView from './pages/login-password-view.js';
|
||||
import * as keyStorageView from './pages/key-storage-view.js';
|
||||
|
||||
import * as profileView from './pages/profile-view.js';
|
||||
import * as profileEditView from './pages/profile-edit-view.js';
|
||||
import * as walletView from './pages/wallet-view.js';
|
||||
import * as settingsView from './pages/settings-view.js';
|
||||
import * as serverSettingsView from './pages/server-settings-view.js';
|
||||
@ -75,6 +76,7 @@ const routes = {
|
||||
'login-password-view': loginPasswordView,
|
||||
'key-storage-view': keyStorageView,
|
||||
'profile-view': profileView,
|
||||
'profile-edit-view': profileEditView,
|
||||
'wallet-view': walletView,
|
||||
'settings-view': settingsView,
|
||||
'server-settings-view': serverSettingsView,
|
||||
|
||||
806
shine-UI/js/pages/profile-edit-view.js
Normal file
806
shine-UI/js/pages/profile-edit-view.js
Normal file
@ -0,0 +1,806 @@
|
||||
import { renderHeader } from '../components/header.js';
|
||||
import { profile } from '../mock-data.js';
|
||||
import { authService, state } from '../state.js';
|
||||
import {
|
||||
PROFILE_GENDER_FEMALE,
|
||||
PROFILE_GENDER_MALE,
|
||||
PROFILE_GENDER_UNKNOWN,
|
||||
loadProfileSnapshot,
|
||||
saveProfileGender,
|
||||
saveProfileParamBlock,
|
||||
saveProfileToggle,
|
||||
} from '../services/user-profile-params.js';
|
||||
import { buildIdentityLines, loadUserProfileCard } from '../services/user-connections.js';
|
||||
import { openAvatarWizard } from '../components/avatar-wizard.js';
|
||||
import { renderUserAvatar } from '../components/avatar-image.js';
|
||||
|
||||
export const pageMeta = { id: 'profile-edit-view', title: 'Редактирование профиля' };
|
||||
|
||||
function toggleText(enabled) {
|
||||
return enabled ? 'Yes' : 'No';
|
||||
}
|
||||
|
||||
function showLocalErrorAlert(prefix, error) {
|
||||
const message = error?.message || 'Неизвестная ошибка';
|
||||
const stack = error?.stack ? `\n\nStack:\n${error.stack}` : '';
|
||||
window.alert(`${prefix}: ${message}${stack}`);
|
||||
}
|
||||
|
||||
function genderLabel(value) {
|
||||
if (value === PROFILE_GENDER_MALE) return 'Мужской';
|
||||
if (value === PROFILE_GENDER_FEMALE) return 'Женский';
|
||||
return 'Не указан';
|
||||
}
|
||||
|
||||
const GENDER_OPTIONS = Object.freeze([
|
||||
{ value: PROFILE_GENDER_MALE, label: 'Мужской' },
|
||||
{ value: PROFILE_GENDER_FEMALE, label: 'Женский' },
|
||||
{ value: PROFILE_GENDER_UNKNOWN, label: 'Не указан' },
|
||||
]);
|
||||
|
||||
const RELATIVE_RELATION_OPTIONS = Object.freeze([
|
||||
{ value: 'parent', label: 'Родитель (мать/отец по полу)' },
|
||||
{ value: 'child', label: 'Ребёнок (сын/дочь по полу)' },
|
||||
{ value: 'spouse', label: 'Жена / Муж (по полу)' },
|
||||
{ value: 'sibling', label: 'Брат или сестра (по полу)' },
|
||||
{ value: 'close_friend', label: 'Близкий друг' },
|
||||
]);
|
||||
|
||||
function normalizeGender(value) {
|
||||
const v = String(value || '').trim().toLowerCase();
|
||||
if (v === PROFILE_GENDER_MALE) return PROFILE_GENDER_MALE;
|
||||
if (v === PROFILE_GENDER_FEMALE) return PROFILE_GENDER_FEMALE;
|
||||
return PROFILE_GENDER_UNKNOWN;
|
||||
}
|
||||
|
||||
function relationAccusativeLabel(type, targetGender) {
|
||||
const gender = normalizeGender(targetGender);
|
||||
if (type === 'parent') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'отца';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'мать';
|
||||
return 'родителя';
|
||||
}
|
||||
if (type === 'child') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'сына';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'дочь';
|
||||
return 'ребёнка';
|
||||
}
|
||||
if (type === 'sibling') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'брата';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'сестру';
|
||||
return 'брата/сестру';
|
||||
}
|
||||
if (type === 'spouse') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'мужа';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'жену';
|
||||
return 'жену/мужа';
|
||||
}
|
||||
return 'близкого друга';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
return String(text || '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const login = state.session.login || profile.login;
|
||||
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack profile-screen';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Редактирование профиля',
|
||||
leftAction: { label: '←', onClick: () => navigate('profile-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
|
||||
const topRow = document.createElement('div');
|
||||
topRow.className = 'row';
|
||||
topRow.innerHTML = `
|
||||
<div class="row" style="gap:12px; align-items:center;">
|
||||
<div class="profile-avatar-block" data-change-avatar="true" style="cursor:pointer;">
|
||||
<div data-profile-avatar-slot="true"></div>
|
||||
</div>
|
||||
<div class="profile-identity-lines" data-profile-identity="true">
|
||||
<div class="profile-identity-line profile-identity-login">${String(login || '').trim() || 'unknown'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary-btn" type="button" data-reload="true">Обновить</button>
|
||||
`;
|
||||
|
||||
const badgesRow = document.createElement('div');
|
||||
badgesRow.className = 'row';
|
||||
badgesRow.innerHTML = `
|
||||
<button class="badge profile-toggle-btn is-no" type="button" data-toggle="official">Официальный: No</button>
|
||||
<button class="badge profile-toggle-btn is-no" type="button" data-toggle="shine">Сияющий: No</button>
|
||||
`;
|
||||
|
||||
const status = document.createElement('div');
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Загрузка параметров...';
|
||||
|
||||
const listWrap = document.createElement('div');
|
||||
listWrap.className = 'stack profile-param-list';
|
||||
|
||||
const relativesCard = document.createElement('div');
|
||||
relativesCard.className = 'card stack';
|
||||
relativesCard.innerHTML = `
|
||||
<div class="profile-param-value"><b>Близкие родственники</b></div>
|
||||
<div class="meta-muted">
|
||||
Добавьте связь: родитель, ребёнок, жена/муж, брат/сестра или близкий друг.
|
||||
Формулировка (мать/отец, брат/сестра) определяется по полу выбранного пользователя.
|
||||
</div>
|
||||
<button class="secondary-btn" type="button" data-add-relative="true">Добавить близких родственников</button>
|
||||
`;
|
||||
|
||||
const reloadBtn = topRow.querySelector('[data-reload="true"]');
|
||||
const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
|
||||
const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
|
||||
const addRelativeBtn = relativesCard.querySelector('[data-add-relative="true"]');
|
||||
const avatarActionEl = topRow.querySelector('[data-change-avatar="true"]');
|
||||
|
||||
let currentFields = [];
|
||||
let currentToggles = [];
|
||||
let currentGender = PROFILE_GENDER_UNKNOWN;
|
||||
let currentAvatar = { value: '', source: '', txId: '', timeMs: 0 };
|
||||
const identityEl = topRow.querySelector('[data-profile-identity="true"]');
|
||||
const avatarSlotEl = topRow.querySelector('[data-profile-avatar-slot="true"]');
|
||||
|
||||
function openGenderPickerModal(initialGender) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
root.innerHTML = '';
|
||||
|
||||
const selected = GENDER_OPTIONS.some((item) => item.value === initialGender)
|
||||
? initialGender
|
||||
: PROFILE_GENDER_UNKNOWN;
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-gender-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Выбор пола</h3>
|
||||
<p class="meta-muted">Выберите значение профиля из списка:</p>
|
||||
<select class="input profile-gender-select" id="profile-gender-select">
|
||||
${GENDER_OPTIONS.map((item) => (
|
||||
`<option value="${item.value}" ${item.value === selected ? 'selected' : ''}>${item.label}</option>`
|
||||
)).join('')}
|
||||
</select>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-gender-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-gender-save" type="button">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-gender-modal');
|
||||
const selectEl = root.querySelector('#profile-gender-select');
|
||||
const saveEl = root.querySelector('#profile-gender-save');
|
||||
const cancelEl = root.querySelector('#profile-gender-cancel');
|
||||
if (!(modal instanceof HTMLElement) || !(selectEl instanceof HTMLSelectElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const close = (value = null) => {
|
||||
root.innerHTML = '';
|
||||
resolve(value);
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
saveEl?.addEventListener('click', () => close(selectEl.value || PROFILE_GENDER_UNKNOWN));
|
||||
window.setTimeout(() => selectEl.focus(), 0);
|
||||
});
|
||||
}
|
||||
|
||||
function syncIdentity() {
|
||||
if (!identityEl) return;
|
||||
const firstName = currentFields.find((field) => field.key === 'first_name')?.value || '';
|
||||
const lastName = currentFields.find((field) => field.key === 'last_name')?.value || '';
|
||||
const lines = buildIdentityLines({ login, firstName, lastName });
|
||||
identityEl.innerHTML = lines.map((line, idx) => (
|
||||
`<div class="profile-identity-line${idx === lines.length - 1 ? ' profile-identity-login' : ''}">${escapeHtml(line)}</div>`
|
||||
)).join('');
|
||||
}
|
||||
|
||||
function updateAvatarUi() {
|
||||
if (!(avatarSlotEl instanceof HTMLElement)) return;
|
||||
const firstName = String(currentFields.find((field) => field.key === 'first_name')?.value || '').trim();
|
||||
const lastName = String(currentFields.find((field) => field.key === 'last_name')?.value || '').trim();
|
||||
avatarSlotEl.innerHTML = '';
|
||||
avatarSlotEl.append(renderUserAvatar({
|
||||
login,
|
||||
firstName,
|
||||
lastName,
|
||||
avatar: currentAvatar?.txId ? { ar: currentAvatar.txId } : null,
|
||||
size: 'large',
|
||||
className: 'profile-avatar',
|
||||
}));
|
||||
}
|
||||
|
||||
function updateToggleButton(button, prefix, enabled) {
|
||||
button.textContent = `${prefix}: ${toggleText(enabled)}`;
|
||||
button.classList.remove('is-no', 'is-yes-official', 'is-yes-shine');
|
||||
|
||||
if (!enabled) {
|
||||
button.classList.add('is-no');
|
||||
return;
|
||||
}
|
||||
|
||||
if (prefix === 'Официальный') {
|
||||
button.classList.add('is-yes-official');
|
||||
} else {
|
||||
button.classList.add('is-yes-shine');
|
||||
}
|
||||
}
|
||||
|
||||
function updateTogglesUi() {
|
||||
const official = currentToggles.find((item) => item.key === 'official') || { enabled: false };
|
||||
const shine = currentToggles.find((item) => item.key === 'shine') || { enabled: false };
|
||||
updateToggleButton(officialBtn, 'Официальный', official.enabled);
|
||||
updateToggleButton(shineBtn, 'Сияющий', shine.enabled);
|
||||
}
|
||||
|
||||
function updateGenderUi() {
|
||||
const genderValueEl = listWrap.querySelector('[data-gender-value]');
|
||||
if (!genderValueEl) return;
|
||||
genderValueEl.textContent = genderLabel(currentGender);
|
||||
}
|
||||
|
||||
function openFieldEditModal({ label, value, placeholder = '' }) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-field-edit-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Изменить: ${escapeHtml(label)}</h3>
|
||||
<input
|
||||
id="profile-field-edit-input"
|
||||
class="input"
|
||||
type="text"
|
||||
maxlength="300"
|
||||
placeholder="${escapeHtml(placeholder || `Введите ${label.toLowerCase()}`)}"
|
||||
value="${escapeHtml(String(value || ''))}"
|
||||
/>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-field-edit-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-field-edit-save" type="button">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-field-edit-modal');
|
||||
const inputEl = root.querySelector('#profile-field-edit-input');
|
||||
const saveEl = root.querySelector('#profile-field-edit-save');
|
||||
const cancelEl = root.querySelector('#profile-field-edit-cancel');
|
||||
if (!(modal instanceof HTMLElement) || !(inputEl instanceof HTMLInputElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const close = (nextValue = null) => {
|
||||
root.innerHTML = '';
|
||||
resolve(nextValue);
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
saveEl?.addEventListener('click', () => close(inputEl.value));
|
||||
inputEl.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
close(inputEl.value);
|
||||
}
|
||||
});
|
||||
window.setTimeout(() => {
|
||||
inputEl.focus();
|
||||
inputEl.selectionStart = inputEl.value.length;
|
||||
inputEl.selectionEnd = inputEl.value.length;
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
function openAddRelativeModal({ contacts = [] } = {}) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
const preparedContacts = Array.isArray(contacts)
|
||||
? contacts
|
||||
.map((item) => String(item || '').trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const uniqueContacts = Array.from(new Set(preparedContacts.map((item) => item.toLowerCase())))
|
||||
.map((key) => preparedContacts.find((item) => item.toLowerCase() === key))
|
||||
.filter(Boolean);
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-add-relative-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Добавить связь</h3>
|
||||
<label class="meta-muted" for="profile-relative-kind">Какой тип связи вы хотите добавить?</label>
|
||||
<select class="input profile-relation-select" id="profile-relative-kind">
|
||||
${RELATIVE_RELATION_OPTIONS.map((item) => (
|
||||
`<option value="${item.value}">${item.label}</option>`
|
||||
)).join('')}
|
||||
</select>
|
||||
<label class="meta-muted" for="profile-relative-login">Логин пользователя</label>
|
||||
<input
|
||||
class="input"
|
||||
id="profile-relative-login"
|
||||
type="text"
|
||||
maxlength="30"
|
||||
placeholder="Введите логин пользователя"
|
||||
/>
|
||||
<div class="meta-muted profile-relative-search-meta" id="profile-relative-search-meta">
|
||||
Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.
|
||||
</div>
|
||||
<div class="profile-relative-search-suggest" id="profile-relative-search-suggest" hidden></div>
|
||||
<div class="meta-muted inline-error" id="profile-relative-error"></div>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-relative-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-relative-submit" type="button">Продолжить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-add-relative-modal');
|
||||
const kindEl = root.querySelector('#profile-relative-kind');
|
||||
const loginEl = root.querySelector('#profile-relative-login');
|
||||
const submitEl = root.querySelector('#profile-relative-submit');
|
||||
const cancelEl = root.querySelector('#profile-relative-cancel');
|
||||
const errorEl = root.querySelector('#profile-relative-error');
|
||||
const searchMetaEl = root.querySelector('#profile-relative-search-meta');
|
||||
const suggestEl = root.querySelector('#profile-relative-search-suggest');
|
||||
|
||||
if (!(modal instanceof HTMLElement) || !(kindEl instanceof HTMLSelectElement) || !(loginEl instanceof HTMLInputElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let closed = false;
|
||||
let searchTimerId = 0;
|
||||
let searchSeq = 0;
|
||||
|
||||
const clearSearchTimer = () => {
|
||||
if (!searchTimerId) return;
|
||||
window.clearTimeout(searchTimerId);
|
||||
searchTimerId = 0;
|
||||
};
|
||||
|
||||
const uniqueCaseInsensitive = (list) => {
|
||||
const out = [];
|
||||
const seen = new Set();
|
||||
(Array.isArray(list) ? list : []).forEach((item) => {
|
||||
const value = String(item || '').trim();
|
||||
if (!value) return;
|
||||
const key = value.toLowerCase();
|
||||
if (seen.has(key)) return;
|
||||
seen.add(key);
|
||||
out.push(value);
|
||||
});
|
||||
return out;
|
||||
};
|
||||
|
||||
const renderSuggestions = (list) => {
|
||||
if (!(suggestEl instanceof HTMLElement)) return;
|
||||
const values = uniqueCaseInsensitive(list).slice(0, 5);
|
||||
if (!values.length) {
|
||||
suggestEl.hidden = true;
|
||||
suggestEl.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
suggestEl.hidden = false;
|
||||
suggestEl.innerHTML = values.map((value) => (
|
||||
`<button type="button" class="profile-relative-suggest-item" data-login="${escapeHtml(value)}">${escapeHtml(value)}</button>`
|
||||
)).join('');
|
||||
};
|
||||
|
||||
const searchContactsFallback = (prefix) => {
|
||||
const query = String(prefix || '').trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return uniqueContacts
|
||||
.filter((entry) => entry.toLowerCase().startsWith(query))
|
||||
.slice(0, 5);
|
||||
};
|
||||
|
||||
const runSearch = async ({ withErrorMessage = false } = {}) => {
|
||||
const prefix = String(loginEl.value || '').trim();
|
||||
if (!prefix) {
|
||||
renderSuggestions([]);
|
||||
if (searchMetaEl) {
|
||||
searchMetaEl.textContent = 'Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Поиск пользователей по префиксу «${prefix}»...`;
|
||||
const reqId = ++searchSeq;
|
||||
let found = [];
|
||||
let searchFailed = false;
|
||||
|
||||
try {
|
||||
const payload = await authService.searchUsers(prefix);
|
||||
found = Array.isArray(payload) ? payload : [];
|
||||
} catch {
|
||||
searchFailed = true;
|
||||
found = [];
|
||||
}
|
||||
|
||||
if (closed || reqId !== searchSeq) return;
|
||||
|
||||
const query = prefix.toLowerCase();
|
||||
const candidateList = uniqueCaseInsensitive([
|
||||
...found,
|
||||
...searchContactsFallback(prefix),
|
||||
])
|
||||
.filter((entry) => entry.toLowerCase().startsWith(query))
|
||||
.slice(0, 5);
|
||||
|
||||
renderSuggestions(candidateList);
|
||||
|
||||
if (candidateList.length > 0) {
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Найдено ${candidateList.length} пользователей. Выберите пользователя из списка.`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchFailed) {
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Не удалось получить список пользователей. Уточните логин вручную.';
|
||||
if (withErrorMessage && errorEl) errorEl.textContent = 'Ошибка поиска пользователей.';
|
||||
return;
|
||||
}
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Пользователи с таким префиксом не найдены.';
|
||||
};
|
||||
|
||||
const close = (payload = null) => {
|
||||
closed = true;
|
||||
clearSearchTimer();
|
||||
root.innerHTML = '';
|
||||
resolve(payload);
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const relationType = String(kindEl.value || '').trim();
|
||||
const toLogin = String(loginEl.value || '').trim();
|
||||
if (!relationType) {
|
||||
if (errorEl) errorEl.textContent = 'Выберите тип связи.';
|
||||
return;
|
||||
}
|
||||
if (!toLogin) {
|
||||
if (errorEl) errorEl.textContent = 'Введите логин пользователя.';
|
||||
return;
|
||||
}
|
||||
close({ relationType, toLogin });
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
submitEl?.addEventListener('click', submit);
|
||||
suggestEl?.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
const button = target.closest('[data-login]');
|
||||
if (!(button instanceof HTMLElement)) return;
|
||||
const pickedLogin = String(button.dataset.login || '').trim();
|
||||
if (!pickedLogin) return;
|
||||
loginEl.value = pickedLogin;
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Выбран пользователь «${pickedLogin}». Нажмите «Продолжить».`;
|
||||
renderSuggestions([]);
|
||||
});
|
||||
loginEl.addEventListener('input', () => {
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
clearSearchTimer();
|
||||
const value = String(loginEl.value || '').trim();
|
||||
if (!value) {
|
||||
renderSuggestions([]);
|
||||
if (searchMetaEl) {
|
||||
searchMetaEl.textContent = 'Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Ожидание паузы 2 секунды для поиска...';
|
||||
searchTimerId = window.setTimeout(() => {
|
||||
runSearch({ withErrorMessage: false });
|
||||
}, 2000);
|
||||
});
|
||||
loginEl.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
clearSearchTimer();
|
||||
runSearch({ withErrorMessage: true });
|
||||
}
|
||||
});
|
||||
window.setTimeout(() => loginEl.focus(), 0);
|
||||
});
|
||||
}
|
||||
|
||||
function renderFields(fields) {
|
||||
listWrap.innerHTML = '';
|
||||
fields.forEach((field) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'card profile-param-item row';
|
||||
row.dataset.editField = field.key;
|
||||
row.style.cursor = 'pointer';
|
||||
const value = String(field.value || '').trim() || 'не заполнено';
|
||||
const isNameField = field.key === 'first_name' || field.key === 'last_name';
|
||||
const valueClass = isNameField ? 'profile-param-value profile-param-value-small' : 'profile-param-value';
|
||||
row.innerHTML = `<div class="${valueClass}"><b>${field.label}</b>: ${escapeHtml(value)}</div>`;
|
||||
listWrap.append(row);
|
||||
|
||||
if (field.key === 'last_name') {
|
||||
const genderRow = document.createElement('div');
|
||||
genderRow.className = 'card profile-param-item row';
|
||||
genderRow.dataset.editGender = 'true';
|
||||
genderRow.style.cursor = 'pointer';
|
||||
genderRow.innerHTML = `<div class="profile-param-value"><b>Пол</b>: <span data-gender-value>${escapeHtml(genderLabel(currentGender))}</span></div>`;
|
||||
listWrap.append(genderRow);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshProfileSnapshot() {
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Загрузка параметров...';
|
||||
reloadBtn.disabled = true;
|
||||
officialBtn.disabled = true;
|
||||
shineBtn.disabled = true;
|
||||
if (addRelativeBtn instanceof HTMLButtonElement) addRelativeBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const snapshot = await loadProfileSnapshot(login);
|
||||
currentFields = snapshot.fields;
|
||||
currentToggles = snapshot.toggles;
|
||||
currentGender = snapshot.gender || PROFILE_GENDER_UNKNOWN;
|
||||
currentAvatar = snapshot.avatar || { value: '', source: '', txId: '', timeMs: 0 };
|
||||
|
||||
syncIdentity();
|
||||
renderFields(currentFields);
|
||||
updateTogglesUi();
|
||||
updateGenderUi();
|
||||
updateAvatarUi();
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = '';
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось загрузить параметры: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка загрузки параметров профиля', error);
|
||||
} finally {
|
||||
reloadBtn.disabled = false;
|
||||
officialBtn.disabled = false;
|
||||
shineBtn.disabled = false;
|
||||
if (addRelativeBtn instanceof HTMLButtonElement) addRelativeBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onChangeAvatarClick() {
|
||||
const confirmed = window.confirm('Сменить аватар?');
|
||||
if (!confirmed) return;
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Открываем мастер аватара...';
|
||||
|
||||
try {
|
||||
await openAvatarWizard({
|
||||
login,
|
||||
storagePwd: state.session.storagePwdInMemory,
|
||||
gateway: state.entrySettings.arweaveServer,
|
||||
navigate,
|
||||
onStatus: (message) => {
|
||||
status.className = 'status-line';
|
||||
status.textContent = String(message || '');
|
||||
},
|
||||
onAvatarSaved: async () => {
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохраняем аватар в профиль...';
|
||||
await refreshProfileSnapshot();
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = 'Аватар обновлён.';
|
||||
},
|
||||
});
|
||||
if (!status.textContent) {
|
||||
status.className = 'status-line';
|
||||
}
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = error?.message || 'Не удалось открыть мастер аватара.';
|
||||
}
|
||||
}
|
||||
|
||||
async function onToggleClick(toggleKey) {
|
||||
const toggle = currentToggles.find((item) => item.key === toggleKey) || { enabled: false };
|
||||
const nextEnabled = !toggle.enabled;
|
||||
const title = toggleKey === 'official' ? 'официальный' : 'сияющий';
|
||||
|
||||
const confirmed = window.confirm(
|
||||
`Хотите изменить «${title}» на ${toggleText(nextEnabled)}?\n` +
|
||||
'Будет создана запись в блокчейне.',
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileToggle(login, toggleKey, nextEnabled);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить ${toggleKey}: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert(`Ошибка изменения ${toggleKey}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onEditFieldClick(fieldKey) {
|
||||
const field = currentFields.find((item) => item.key === fieldKey);
|
||||
if (!field) return;
|
||||
|
||||
const entered = await openFieldEditModal({
|
||||
label: field.label,
|
||||
value: field.value || '',
|
||||
placeholder: field.placeholder || '',
|
||||
});
|
||||
if (entered === null) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileParamBlock(login, field.key, entered);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить ${field.key}: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert(`Ошибка изменения ${field.key}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onGenderClick() {
|
||||
const nextGender = await openGenderPickerModal(currentGender);
|
||||
if (!nextGender) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileGender(login, nextGender);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить пол: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка изменения пола', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddRelativeClick() {
|
||||
const sessionLogin = String(login || '').trim();
|
||||
if (!sessionLogin) {
|
||||
window.alert('Для добавления связи нужен активный логин.');
|
||||
return;
|
||||
}
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Подготовка окна добавления связи...';
|
||||
|
||||
let contacts = [];
|
||||
try {
|
||||
const payload = await authService.listContacts();
|
||||
contacts = Array.isArray(payload?.contacts) ? payload.contacts : [];
|
||||
} catch {
|
||||
contacts = [];
|
||||
}
|
||||
|
||||
const picked = await openAddRelativeModal({ contacts });
|
||||
if (!picked) {
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = 'Добавление связи отменено.';
|
||||
return;
|
||||
}
|
||||
|
||||
const relationType = String(picked.relationType || '').trim().toLowerCase();
|
||||
const inputLogin = String(picked.toLogin || '').trim();
|
||||
if (!relationType || !inputLogin) return;
|
||||
if (inputLogin.toLowerCase() === sessionLogin.toLowerCase()) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = 'Нельзя добавить связь с самим собой.';
|
||||
return;
|
||||
}
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Проверка пользователя...';
|
||||
|
||||
let targetCard;
|
||||
try {
|
||||
targetCard = await loadUserProfileCard(inputLogin);
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Пользователь не найден: ${error.message || 'unknown'}`;
|
||||
showLocalErrorAlert('Ошибка выбора пользователя', error);
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLogin = String(targetCard?.login || inputLogin).trim();
|
||||
const targetGender = normalizeGender(targetCard?.gender || PROFILE_GENDER_UNKNOWN);
|
||||
const relationLabel = relationAccusativeLabel(relationType, targetGender);
|
||||
const confirmed = window.confirm(
|
||||
`Добавить пользователя ${targetLogin} как ${relationLabel}?`,
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение связи...';
|
||||
|
||||
try {
|
||||
if (relationType === 'close_friend') {
|
||||
await authService.addCloseFriend(targetLogin);
|
||||
} else {
|
||||
if (!state.session.storagePwdInMemory) {
|
||||
throw new Error('Нет storagePwd в памяти сессии. Выполните вход заново.');
|
||||
}
|
||||
await authService.setUserRelation({
|
||||
login: sessionLogin,
|
||||
toLogin: targetLogin,
|
||||
kind: relationType,
|
||||
enabled: true,
|
||||
storagePwd: state.session.storagePwdInMemory,
|
||||
});
|
||||
}
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = `Связь добавлена: ${targetLogin} как ${relationLabel}.`;
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось добавить связь: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка добавления связи', error);
|
||||
}
|
||||
}
|
||||
|
||||
listWrap.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
const genderRow = target.closest('[data-edit-gender="true"]');
|
||||
if (genderRow) {
|
||||
onGenderClick();
|
||||
return;
|
||||
}
|
||||
const fieldRow = target.closest('[data-edit-field]');
|
||||
const fieldKey = String(fieldRow?.getAttribute('data-edit-field') || '');
|
||||
if (!fieldKey) return;
|
||||
onEditFieldClick(fieldKey);
|
||||
});
|
||||
|
||||
reloadBtn.addEventListener('click', refreshProfileSnapshot);
|
||||
officialBtn.addEventListener('click', () => onToggleClick('official'));
|
||||
shineBtn.addEventListener('click', () => onToggleClick('shine'));
|
||||
addRelativeBtn?.addEventListener('click', onAddRelativeClick);
|
||||
avatarActionEl?.addEventListener('click', () => { void onChangeAvatarClick(); });
|
||||
|
||||
card.append(topRow, badgesRow, status, listWrap, relativesCard);
|
||||
screen.append(card);
|
||||
|
||||
updateAvatarUi();
|
||||
refreshProfileSnapshot();
|
||||
|
||||
return screen;
|
||||
}
|
||||
@ -1,17 +1,12 @@
|
||||
import { renderHeader } from '../components/header.js';
|
||||
import { profile } from '../mock-data.js';
|
||||
import { authService, state } from '../state.js';
|
||||
import { state } from '../state.js';
|
||||
import {
|
||||
PROFILE_GENDER_FEMALE,
|
||||
PROFILE_GENDER_MALE,
|
||||
PROFILE_GENDER_UNKNOWN,
|
||||
loadProfileSnapshot,
|
||||
saveProfileGender,
|
||||
saveProfileParamBlock,
|
||||
saveProfileToggle,
|
||||
} from '../services/user-profile-params.js';
|
||||
import { buildIdentityLines, loadUserProfileCard } from '../services/user-connections.js';
|
||||
import { openAvatarWizard } from '../components/avatar-wizard.js';
|
||||
import { buildIdentityLines } from '../services/user-connections.js';
|
||||
import { renderUserAvatar } from '../components/avatar-image.js';
|
||||
|
||||
export const pageMeta = { id: 'profile-view', title: 'Профиль' };
|
||||
@ -20,64 +15,12 @@ function toggleText(enabled) {
|
||||
return enabled ? 'Yes' : 'No';
|
||||
}
|
||||
|
||||
function showLocalErrorAlert(prefix, error) {
|
||||
const message = error?.message || 'Неизвестная ошибка';
|
||||
const stack = error?.stack ? `\n\nStack:\n${error.stack}` : '';
|
||||
window.alert(`${prefix}: ${message}${stack}`);
|
||||
}
|
||||
|
||||
function genderLabel(value) {
|
||||
if (value === PROFILE_GENDER_MALE) return 'Мужской';
|
||||
if (value === PROFILE_GENDER_FEMALE) return 'Женский';
|
||||
return 'Не указан';
|
||||
}
|
||||
|
||||
const GENDER_OPTIONS = Object.freeze([
|
||||
{ value: PROFILE_GENDER_MALE, label: 'Мужской' },
|
||||
{ value: PROFILE_GENDER_FEMALE, label: 'Женский' },
|
||||
{ value: PROFILE_GENDER_UNKNOWN, label: 'Не указан' },
|
||||
]);
|
||||
|
||||
const RELATIVE_RELATION_OPTIONS = Object.freeze([
|
||||
{ value: 'parent', label: 'Родитель (мать/отец по полу)' },
|
||||
{ value: 'child', label: 'Ребёнок (сын/дочь по полу)' },
|
||||
{ value: 'spouse', label: 'Жена / Муж (по полу)' },
|
||||
{ value: 'sibling', label: 'Брат или сестра (по полу)' },
|
||||
{ value: 'close_friend', label: 'Близкий друг' },
|
||||
]);
|
||||
|
||||
function normalizeGender(value) {
|
||||
const v = String(value || '').trim().toLowerCase();
|
||||
if (v === PROFILE_GENDER_MALE) return PROFILE_GENDER_MALE;
|
||||
if (v === PROFILE_GENDER_FEMALE) return PROFILE_GENDER_FEMALE;
|
||||
return PROFILE_GENDER_UNKNOWN;
|
||||
}
|
||||
|
||||
function relationAccusativeLabel(type, targetGender) {
|
||||
const gender = normalizeGender(targetGender);
|
||||
if (type === 'parent') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'отца';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'мать';
|
||||
return 'родителя';
|
||||
}
|
||||
if (type === 'child') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'сына';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'дочь';
|
||||
return 'ребёнка';
|
||||
}
|
||||
if (type === 'sibling') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'брата';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'сестру';
|
||||
return 'брата/сестру';
|
||||
}
|
||||
if (type === 'spouse') {
|
||||
if (gender === PROFILE_GENDER_MALE) return 'мужа';
|
||||
if (gender === PROFILE_GENDER_FEMALE) return 'жену';
|
||||
return 'жену/мужа';
|
||||
}
|
||||
return 'близкого друга';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
return String(text || '')
|
||||
.replaceAll('&', '&')
|
||||
@ -93,9 +36,14 @@ export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack profile-screen';
|
||||
|
||||
const status = document.createElement('div');
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Загрузка параметров...';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Профиль',
|
||||
title: '',
|
||||
leftAction: { label: 'Изменить профиль', onClick: () => navigate('profile-edit-view') },
|
||||
rightActions: [
|
||||
{ label: 'Кошелёк', onClick: () => navigate('wallet-view') },
|
||||
{ label: 'Настройки', onClick: () => navigate('settings-view') },
|
||||
@ -110,10 +58,7 @@ export function render({ navigate }) {
|
||||
topRow.className = 'row';
|
||||
topRow.innerHTML = `
|
||||
<div class="row" style="gap:12px; align-items:center;">
|
||||
<div class="profile-avatar-block">
|
||||
<div data-profile-avatar-slot="true"></div>
|
||||
<button class="ghost-btn profile-avatar-change-btn" type="button" data-change-avatar="true">Сменить аватар</button>
|
||||
</div>
|
||||
<div class="profile-identity-lines" data-profile-identity="true">
|
||||
<div class="profile-identity-line profile-identity-login">${String(login || '').trim() || 'unknown'}</div>
|
||||
</div>
|
||||
@ -128,88 +73,19 @@ export function render({ navigate }) {
|
||||
<button class="badge profile-toggle-btn is-no" type="button" data-toggle="shine">Сияющий: No</button>
|
||||
`;
|
||||
|
||||
const status = document.createElement('div');
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Загрузка параметров...';
|
||||
|
||||
const listWrap = document.createElement('div');
|
||||
listWrap.className = 'stack profile-param-list';
|
||||
|
||||
const relativesCard = document.createElement('div');
|
||||
relativesCard.className = 'card stack';
|
||||
relativesCard.innerHTML = `
|
||||
<div class="profile-param-value"><b>Близкие родственники</b></div>
|
||||
<div class="meta-muted">
|
||||
Добавьте связь: родитель, ребёнок, жена/муж, брат/сестра или близкий друг.
|
||||
Формулировка (мать/отец, брат/сестра) определяется по полу выбранного пользователя.
|
||||
</div>
|
||||
<button class="secondary-btn" type="button" data-add-relative="true">Добавить близких родственников</button>
|
||||
`;
|
||||
|
||||
const reloadBtn = topRow.querySelector('[data-reload="true"]');
|
||||
const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
|
||||
const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
|
||||
const addRelativeBtn = relativesCard.querySelector('[data-add-relative="true"]');
|
||||
const changeAvatarBtn = topRow.querySelector('[data-change-avatar="true"]');
|
||||
|
||||
let currentFields = [];
|
||||
let currentToggles = [];
|
||||
let currentGender = PROFILE_GENDER_UNKNOWN;
|
||||
let currentAvatar = { value: '', source: '', txId: '', timeMs: 0 };
|
||||
const identityEl = topRow.querySelector('[data-profile-identity="true"]');
|
||||
const avatarSlotEl = topRow.querySelector('[data-profile-avatar-slot="true"]');
|
||||
|
||||
function openGenderPickerModal(initialGender) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
root.innerHTML = '';
|
||||
|
||||
const selected = GENDER_OPTIONS.some((item) => item.value === initialGender)
|
||||
? initialGender
|
||||
: PROFILE_GENDER_UNKNOWN;
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-gender-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Выбор пола</h3>
|
||||
<p class="meta-muted">Выберите значение профиля из списка:</p>
|
||||
<select class="input profile-gender-select" id="profile-gender-select">
|
||||
${GENDER_OPTIONS.map((item) => (
|
||||
`<option value="${item.value}" ${item.value === selected ? 'selected' : ''}>${item.label}</option>`
|
||||
)).join('')}
|
||||
</select>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-gender-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-gender-save" type="button">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-gender-modal');
|
||||
const selectEl = root.querySelector('#profile-gender-select');
|
||||
const saveEl = root.querySelector('#profile-gender-save');
|
||||
const cancelEl = root.querySelector('#profile-gender-cancel');
|
||||
if (!(modal instanceof HTMLElement) || !(selectEl instanceof HTMLSelectElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const close = (value = null) => {
|
||||
root.innerHTML = '';
|
||||
resolve(value);
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
saveEl?.addEventListener('click', () => close(selectEl.value || PROFILE_GENDER_UNKNOWN));
|
||||
window.setTimeout(() => selectEl.focus(), 0);
|
||||
});
|
||||
}
|
||||
let currentFields = [];
|
||||
let currentToggles = [];
|
||||
let currentGender = 'unknown';
|
||||
let currentAvatar = { value: '', source: '', txId: '', timeMs: 0 };
|
||||
|
||||
function syncIdentity() {
|
||||
if (!identityEl) return;
|
||||
@ -239,17 +115,12 @@ export function render({ navigate }) {
|
||||
function updateToggleButton(button, prefix, enabled) {
|
||||
button.textContent = `${prefix}: ${toggleText(enabled)}`;
|
||||
button.classList.remove('is-no', 'is-yes-official', 'is-yes-shine');
|
||||
|
||||
if (!enabled) {
|
||||
button.classList.add('is-no');
|
||||
return;
|
||||
}
|
||||
|
||||
if (prefix === 'Официальный') {
|
||||
button.classList.add('is-yes-official');
|
||||
} else {
|
||||
button.classList.add('is-yes-shine');
|
||||
}
|
||||
if (prefix === 'Официальный') button.classList.add('is-yes-official');
|
||||
else button.classList.add('is-yes-shine');
|
||||
}
|
||||
|
||||
function updateTogglesUi() {
|
||||
@ -259,556 +130,66 @@ export function render({ navigate }) {
|
||||
updateToggleButton(shineBtn, 'Сияющий', shine.enabled);
|
||||
}
|
||||
|
||||
function updateGenderUi() {
|
||||
const genderValueEl = listWrap.querySelector('[data-gender-value]');
|
||||
if (!genderValueEl) return;
|
||||
genderValueEl.textContent = genderLabel(currentGender);
|
||||
}
|
||||
|
||||
function openFieldEditModal({ label, value, placeholder = '' }) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-field-edit-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Изменить: ${escapeHtml(label)}</h3>
|
||||
<input
|
||||
id="profile-field-edit-input"
|
||||
class="input"
|
||||
type="text"
|
||||
maxlength="300"
|
||||
placeholder="${escapeHtml(placeholder || `Введите ${label.toLowerCase()}`)}"
|
||||
value="${escapeHtml(String(value || ''))}"
|
||||
/>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-field-edit-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-field-edit-save" type="button">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-field-edit-modal');
|
||||
const inputEl = root.querySelector('#profile-field-edit-input');
|
||||
const saveEl = root.querySelector('#profile-field-edit-save');
|
||||
const cancelEl = root.querySelector('#profile-field-edit-cancel');
|
||||
if (!(modal instanceof HTMLElement) || !(inputEl instanceof HTMLInputElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const close = (nextValue = null) => {
|
||||
root.innerHTML = '';
|
||||
resolve(nextValue);
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
saveEl?.addEventListener('click', () => close(inputEl.value));
|
||||
inputEl.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
close(inputEl.value);
|
||||
}
|
||||
});
|
||||
window.setTimeout(() => {
|
||||
inputEl.focus();
|
||||
inputEl.selectionStart = inputEl.value.length;
|
||||
inputEl.selectionEnd = inputEl.value.length;
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
function openAddRelativeModal({ contacts = [] } = {}) {
|
||||
const root = document.getElementById('modal-root');
|
||||
if (!root) return Promise.resolve(null);
|
||||
const preparedContacts = Array.isArray(contacts)
|
||||
? contacts
|
||||
.map((item) => String(item || '').trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const uniqueContacts = Array.from(new Set(preparedContacts.map((item) => item.toLowerCase())))
|
||||
.map((key) => preparedContacts.find((item) => item.toLowerCase() === key))
|
||||
.filter(Boolean);
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="profile-add-relative-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 class="modal-title">Добавить связь</h3>
|
||||
<label class="meta-muted" for="profile-relative-kind">Какой тип связи вы хотите добавить?</label>
|
||||
<select class="input profile-relation-select" id="profile-relative-kind">
|
||||
${RELATIVE_RELATION_OPTIONS.map((item) => (
|
||||
`<option value="${item.value}">${item.label}</option>`
|
||||
)).join('')}
|
||||
</select>
|
||||
<label class="meta-muted" for="profile-relative-login">Логин пользователя</label>
|
||||
<input
|
||||
class="input"
|
||||
id="profile-relative-login"
|
||||
type="text"
|
||||
maxlength="30"
|
||||
placeholder="Введите логин пользователя"
|
||||
/>
|
||||
<div class="meta-muted profile-relative-search-meta" id="profile-relative-search-meta">
|
||||
Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.
|
||||
</div>
|
||||
<div class="profile-relative-search-suggest" id="profile-relative-search-suggest" hidden></div>
|
||||
<div class="meta-muted inline-error" id="profile-relative-error"></div>
|
||||
<div class="form-actions-grid">
|
||||
<button class="secondary-btn" id="profile-relative-cancel" type="button">Отмена</button>
|
||||
<button class="primary-btn" id="profile-relative-submit" type="button">Продолжить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = root.querySelector('#profile-add-relative-modal');
|
||||
const kindEl = root.querySelector('#profile-relative-kind');
|
||||
const loginEl = root.querySelector('#profile-relative-login');
|
||||
const submitEl = root.querySelector('#profile-relative-submit');
|
||||
const cancelEl = root.querySelector('#profile-relative-cancel');
|
||||
const errorEl = root.querySelector('#profile-relative-error');
|
||||
const searchMetaEl = root.querySelector('#profile-relative-search-meta');
|
||||
const suggestEl = root.querySelector('#profile-relative-search-suggest');
|
||||
|
||||
if (!(modal instanceof HTMLElement) || !(kindEl instanceof HTMLSelectElement) || !(loginEl instanceof HTMLInputElement)) {
|
||||
root.innerHTML = '';
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let closed = false;
|
||||
let searchTimerId = 0;
|
||||
let searchSeq = 0;
|
||||
|
||||
const clearSearchTimer = () => {
|
||||
if (!searchTimerId) return;
|
||||
window.clearTimeout(searchTimerId);
|
||||
searchTimerId = 0;
|
||||
};
|
||||
|
||||
const uniqueCaseInsensitive = (list) => {
|
||||
const out = [];
|
||||
const seen = new Set();
|
||||
(Array.isArray(list) ? list : []).forEach((item) => {
|
||||
const value = String(item || '').trim();
|
||||
if (!value) return;
|
||||
const key = value.toLowerCase();
|
||||
if (seen.has(key)) return;
|
||||
seen.add(key);
|
||||
out.push(value);
|
||||
});
|
||||
return out;
|
||||
};
|
||||
|
||||
const renderSuggestions = (list) => {
|
||||
if (!(suggestEl instanceof HTMLElement)) return;
|
||||
const values = uniqueCaseInsensitive(list).slice(0, 5);
|
||||
if (!values.length) {
|
||||
suggestEl.hidden = true;
|
||||
suggestEl.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
suggestEl.hidden = false;
|
||||
suggestEl.innerHTML = values.map((value) => (
|
||||
`<button type="button" class="profile-relative-suggest-item" data-login="${escapeHtml(value)}">${escapeHtml(value)}</button>`
|
||||
)).join('');
|
||||
};
|
||||
|
||||
const searchContactsFallback = (prefix) => {
|
||||
const query = String(prefix || '').trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return uniqueContacts
|
||||
.filter((entry) => entry.toLowerCase().startsWith(query))
|
||||
.slice(0, 5);
|
||||
};
|
||||
|
||||
const runSearch = async ({ withErrorMessage = false } = {}) => {
|
||||
const prefix = String(loginEl.value || '').trim();
|
||||
if (!prefix) {
|
||||
renderSuggestions([]);
|
||||
if (searchMetaEl) {
|
||||
searchMetaEl.textContent = 'Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Поиск пользователей по префиксу «${prefix}»...`;
|
||||
const reqId = ++searchSeq;
|
||||
let found = [];
|
||||
let searchFailed = false;
|
||||
|
||||
try {
|
||||
const payload = await authService.searchUsers(prefix);
|
||||
found = Array.isArray(payload) ? payload : [];
|
||||
} catch {
|
||||
searchFailed = true;
|
||||
found = [];
|
||||
}
|
||||
|
||||
if (closed || reqId !== searchSeq) return;
|
||||
|
||||
const query = prefix.toLowerCase();
|
||||
const candidateList = uniqueCaseInsensitive([
|
||||
...found,
|
||||
...searchContactsFallback(prefix),
|
||||
])
|
||||
.filter((entry) => entry.toLowerCase().startsWith(query))
|
||||
.slice(0, 5);
|
||||
|
||||
renderSuggestions(candidateList);
|
||||
|
||||
if (candidateList.length > 0) {
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Найдено ${candidateList.length} пользователей. Выберите пользователя из списка.`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchFailed) {
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Не удалось получить список пользователей. Уточните логин вручную.';
|
||||
if (withErrorMessage && errorEl) errorEl.textContent = 'Ошибка поиска пользователей.';
|
||||
return;
|
||||
}
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Пользователи с таким префиксом не найдены.';
|
||||
};
|
||||
|
||||
const close = (payload = null) => {
|
||||
closed = true;
|
||||
clearSearchTimer();
|
||||
root.innerHTML = '';
|
||||
resolve(payload);
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const relationType = String(kindEl.value || '').trim();
|
||||
const toLogin = String(loginEl.value || '').trim();
|
||||
if (!relationType) {
|
||||
if (errorEl) errorEl.textContent = 'Выберите тип связи.';
|
||||
return;
|
||||
}
|
||||
if (!toLogin) {
|
||||
if (errorEl) errorEl.textContent = 'Введите логин пользователя.';
|
||||
return;
|
||||
}
|
||||
close({ relationType, toLogin });
|
||||
};
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
if (event.target === modal) close(null);
|
||||
});
|
||||
cancelEl?.addEventListener('click', () => close(null));
|
||||
submitEl?.addEventListener('click', submit);
|
||||
suggestEl?.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
const button = target.closest('[data-login]');
|
||||
if (!(button instanceof HTMLElement)) return;
|
||||
const pickedLogin = String(button.dataset.login || '').trim();
|
||||
if (!pickedLogin) return;
|
||||
loginEl.value = pickedLogin;
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
if (searchMetaEl) searchMetaEl.textContent = `Выбран пользователь «${pickedLogin}». Нажмите «Продолжить».`;
|
||||
renderSuggestions([]);
|
||||
});
|
||||
loginEl.addEventListener('input', () => {
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
clearSearchTimer();
|
||||
const value = String(loginEl.value || '').trim();
|
||||
if (!value) {
|
||||
renderSuggestions([]);
|
||||
if (searchMetaEl) {
|
||||
searchMetaEl.textContent = 'Начните вводить логин. Поиск запустится через 2 секунды паузы или по Enter.';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (searchMetaEl) searchMetaEl.textContent = 'Ожидание паузы 2 секунды для поиска...';
|
||||
searchTimerId = window.setTimeout(() => {
|
||||
runSearch({ withErrorMessage: false });
|
||||
}, 2000);
|
||||
});
|
||||
loginEl.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
clearSearchTimer();
|
||||
runSearch({ withErrorMessage: true });
|
||||
}
|
||||
});
|
||||
window.setTimeout(() => loginEl.focus(), 0);
|
||||
});
|
||||
}
|
||||
|
||||
function renderFields(fields) {
|
||||
listWrap.innerHTML = '';
|
||||
fields.forEach((field) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'card profile-param-item row';
|
||||
const value = String(field.value || '').trim() || 'не заполнено';
|
||||
const isNameField = field.key === 'first_name' || field.key === 'last_name';
|
||||
const valueClass = isNameField ? 'profile-param-value profile-param-value-small' : 'profile-param-value';
|
||||
row.innerHTML = `
|
||||
<div class="${valueClass}"><b>${field.label}</b>: ${escapeHtml(value)}</div>
|
||||
<button class="ghost-btn" type="button" data-edit-field="${field.key}">Изменить</button>
|
||||
`;
|
||||
row.innerHTML = `<div class="profile-param-value"><b>${field.label}</b>: ${escapeHtml(value)}</div>`;
|
||||
listWrap.append(row);
|
||||
|
||||
if (field.key === 'last_name') {
|
||||
const genderRow = document.createElement('div');
|
||||
genderRow.className = 'card profile-param-item row';
|
||||
genderRow.innerHTML = `
|
||||
<div class="profile-param-value"><b>Пол</b>: <span data-gender-value>${escapeHtml(genderLabel(currentGender))}</span></div>
|
||||
<button class="ghost-btn" type="button" data-edit-gender="true">Изменить</button>
|
||||
`;
|
||||
genderRow.innerHTML = `<div class="profile-param-value"><b>Пол</b>: ${escapeHtml(genderLabel(currentGender))}</div>`;
|
||||
listWrap.append(genderRow);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshProfileSnapshot() {
|
||||
try {
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Загрузка параметров...';
|
||||
reloadBtn.disabled = true;
|
||||
officialBtn.disabled = true;
|
||||
shineBtn.disabled = true;
|
||||
if (addRelativeBtn instanceof HTMLButtonElement) addRelativeBtn.disabled = true;
|
||||
if (changeAvatarBtn instanceof HTMLButtonElement) changeAvatarBtn.disabled = true;
|
||||
const genderActionBtn = listWrap.querySelector('[data-edit-gender="true"]');
|
||||
if (genderActionBtn instanceof HTMLButtonElement) {
|
||||
genderActionBtn.disabled = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const snapshot = await loadProfileSnapshot(login);
|
||||
currentFields = snapshot.fields;
|
||||
currentToggles = snapshot.toggles;
|
||||
currentGender = snapshot.gender || PROFILE_GENDER_UNKNOWN;
|
||||
currentFields = Array.isArray(snapshot.fields) ? snapshot.fields : [];
|
||||
currentToggles = Array.isArray(snapshot.toggles) ? snapshot.toggles : [];
|
||||
currentGender = snapshot.gender || 'unknown';
|
||||
currentAvatar = snapshot.avatar || { value: '', source: '', txId: '', timeMs: 0 };
|
||||
|
||||
syncIdentity();
|
||||
renderFields(currentFields);
|
||||
updateTogglesUi();
|
||||
updateGenderUi();
|
||||
updateAvatarUi();
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = '';
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось загрузить параметры: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка загрузки параметров профиля', error);
|
||||
} finally {
|
||||
reloadBtn.disabled = false;
|
||||
officialBtn.disabled = false;
|
||||
shineBtn.disabled = false;
|
||||
if (addRelativeBtn instanceof HTMLButtonElement) addRelativeBtn.disabled = false;
|
||||
if (changeAvatarBtn instanceof HTMLButtonElement) changeAvatarBtn.disabled = false;
|
||||
const genderActionBtnAfter = listWrap.querySelector('[data-edit-gender="true"]');
|
||||
if (genderActionBtnAfter instanceof HTMLButtonElement) {
|
||||
genderActionBtnAfter.disabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function onChangeAvatarClick() {
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Открываем мастер аватара...';
|
||||
|
||||
try {
|
||||
await openAvatarWizard({
|
||||
login,
|
||||
storagePwd: state.session.storagePwdInMemory,
|
||||
gateway: state.entrySettings.arweaveServer,
|
||||
navigate,
|
||||
onStatus: (message) => {
|
||||
status.className = 'status-line';
|
||||
status.textContent = String(message || '');
|
||||
},
|
||||
onAvatarSaved: async () => {
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохраняем аватар в профиль...';
|
||||
await refreshProfileSnapshot();
|
||||
updateTogglesUi();
|
||||
renderFields(currentFields);
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = 'Аватар обновлён.';
|
||||
},
|
||||
});
|
||||
if (!status.textContent) {
|
||||
status.className = 'status-line';
|
||||
}
|
||||
status.textContent = 'Профиль обновлён.';
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = error?.message || 'Не удалось открыть мастер аватара.';
|
||||
status.textContent = `Ошибка загрузки профиля: ${error?.message || 'unknown'}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function onToggleClick(toggleKey) {
|
||||
const toggle = currentToggles.find((item) => item.key === toggleKey) || { enabled: false };
|
||||
const nextEnabled = !toggle.enabled;
|
||||
const title = toggleKey === 'official' ? 'официальный' : 'сияющий';
|
||||
|
||||
const confirmed = window.confirm(
|
||||
`Хотите изменить «${title}» на ${toggleText(nextEnabled)}?\n` +
|
||||
'Будет создана запись в блокчейне.',
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileToggle(login, toggleKey, nextEnabled);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить ${toggleKey}: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert(`Ошибка изменения ${toggleKey}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onEditFieldClick(fieldKey) {
|
||||
const field = currentFields.find((item) => item.key === fieldKey);
|
||||
if (!field) return;
|
||||
|
||||
const entered = await openFieldEditModal({
|
||||
label: field.label,
|
||||
value: field.value || '',
|
||||
placeholder: field.placeholder || '',
|
||||
});
|
||||
if (entered === null) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileParamBlock(login, field.key, entered);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить ${field.key}: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert(`Ошибка изменения ${field.key}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onGenderClick() {
|
||||
const nextGender = await openGenderPickerModal(currentGender);
|
||||
if (!nextGender) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение в блокчейн...';
|
||||
|
||||
try {
|
||||
await saveProfileGender(login, nextGender);
|
||||
await refreshProfileSnapshot();
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось изменить пол: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка изменения пола', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddRelativeClick() {
|
||||
const sessionLogin = String(login || '').trim();
|
||||
if (!sessionLogin) {
|
||||
window.alert('Для добавления связи нужен активный логин.');
|
||||
return;
|
||||
}
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Подготовка окна добавления связи...';
|
||||
|
||||
let contacts = [];
|
||||
try {
|
||||
const payload = await authService.listContacts();
|
||||
contacts = Array.isArray(payload?.contacts) ? payload.contacts : [];
|
||||
} catch {
|
||||
contacts = [];
|
||||
}
|
||||
|
||||
const picked = await openAddRelativeModal({ contacts });
|
||||
if (!picked) {
|
||||
const showToggleInfo = (toggleKey) => {
|
||||
const item = currentToggles.find((entry) => entry.key === toggleKey);
|
||||
const isEnabled = Boolean(item?.enabled);
|
||||
if (toggleKey === 'official') {
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = 'Добавление связи отменено.';
|
||||
status.textContent = isEnabled
|
||||
? 'Аккаунт является официальным.'
|
||||
: 'Аккаунт не является официальным.';
|
||||
return;
|
||||
}
|
||||
|
||||
const relationType = String(picked.relationType || '').trim().toLowerCase();
|
||||
const inputLogin = String(picked.toLogin || '').trim();
|
||||
if (!relationType || !inputLogin) return;
|
||||
if (inputLogin.toLowerCase() === sessionLogin.toLowerCase()) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = 'Нельзя добавить связь с самим собой.';
|
||||
return;
|
||||
}
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Проверка пользователя...';
|
||||
|
||||
let targetCard;
|
||||
try {
|
||||
targetCard = await loadUserProfileCard(inputLogin);
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Пользователь не найден: ${error.message || 'unknown'}`;
|
||||
showLocalErrorAlert('Ошибка выбора пользователя', error);
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLogin = String(targetCard?.login || inputLogin).trim();
|
||||
const targetGender = normalizeGender(targetCard?.gender || PROFILE_GENDER_UNKNOWN);
|
||||
const relationLabel = relationAccusativeLabel(relationType, targetGender);
|
||||
const confirmed = window.confirm(
|
||||
`Добавить пользователя ${targetLogin} как ${relationLabel}?`,
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
status.className = 'status-line';
|
||||
status.textContent = 'Сохранение связи...';
|
||||
|
||||
try {
|
||||
if (relationType === 'close_friend') {
|
||||
await authService.addCloseFriend(targetLogin);
|
||||
} else {
|
||||
if (!state.session.storagePwdInMemory) {
|
||||
throw new Error('Нет storagePwd в памяти сессии. Выполните вход заново.');
|
||||
}
|
||||
await authService.setUserRelation({
|
||||
login: sessionLogin,
|
||||
toLogin: targetLogin,
|
||||
kind: relationType,
|
||||
enabled: true,
|
||||
storagePwd: state.session.storagePwdInMemory,
|
||||
});
|
||||
}
|
||||
status.className = 'status-line is-available';
|
||||
status.textContent = `Связь добавлена: ${targetLogin} как ${relationLabel}.`;
|
||||
} catch (error) {
|
||||
status.className = 'status-line is-unavailable';
|
||||
status.textContent = `Не удалось добавить связь: ${error.message || 'ошибка сети'}`;
|
||||
showLocalErrorAlert('Ошибка добавления связи', error);
|
||||
}
|
||||
}
|
||||
status.textContent = isEnabled
|
||||
? 'Аккаунт является сияющим.'
|
||||
: 'Аккаунт не является сияющим.';
|
||||
};
|
||||
|
||||
listWrap.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
if (target.dataset.editGender === 'true') {
|
||||
onGenderClick();
|
||||
return;
|
||||
}
|
||||
const fieldKey = target.dataset.editField;
|
||||
if (!fieldKey) return;
|
||||
onEditFieldClick(fieldKey);
|
||||
});
|
||||
reloadBtn?.addEventListener('click', refreshProfileSnapshot);
|
||||
officialBtn?.addEventListener('click', () => showToggleInfo('official'));
|
||||
shineBtn?.addEventListener('click', () => showToggleInfo('shine'));
|
||||
|
||||
reloadBtn.addEventListener('click', refreshProfileSnapshot);
|
||||
officialBtn.addEventListener('click', () => onToggleClick('official'));
|
||||
shineBtn.addEventListener('click', () => onToggleClick('shine'));
|
||||
addRelativeBtn?.addEventListener('click', onAddRelativeClick);
|
||||
changeAvatarBtn?.addEventListener('click', () => { void onChangeAvatarClick(); });
|
||||
|
||||
card.append(topRow, badgesRow, status, listWrap, relativesCard);
|
||||
card.append(topRow, badgesRow, status, listWrap);
|
||||
screen.append(card);
|
||||
|
||||
updateAvatarUi();
|
||||
|
||||
@ -88,6 +88,7 @@ export function navigate(path) {
|
||||
export function resolveToolbarActive(pageId) {
|
||||
if (ROOT_PAGES.includes(pageId)) return pageId;
|
||||
if (
|
||||
pageId === 'profile-edit-view' ||
|
||||
pageId === 'wallet-view' ||
|
||||
pageId === 'settings-view' ||
|
||||
pageId === 'server-settings-view' ||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user