SHA256
UI: создание канала и ошибки Solana
This commit is contained in:
AidarKC
@@ -8,8 +8,9 @@ import {
|
||||
} from '../services/channel-name-rules.js';
|
||||
import { openArweaveAttachmentManager, markArweaveAttachmentPlaced } from '../components/arweave-attachment-manager.js';
|
||||
import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
|
||||
import { makeShineChannelRoute } from '../services/shine-routes.js';
|
||||
|
||||
export const pageMeta = { id: 'add-channel-view', title: 'Создать канал' };
|
||||
export const pageMeta = { id: 'add-channel-view', title: 'Создание канала' };
|
||||
|
||||
const CREATE_CHANNEL_FLASH_KEY = 'shine-channels-create-success';
|
||||
const CHANNEL_TYPE_PUBLIC = 1;
|
||||
@@ -48,13 +49,23 @@ function renderAvatarPreview(slot, avatar, title) {
|
||||
slot.append(wrap);
|
||||
}
|
||||
|
||||
function buildAbsoluteChannelUrl({ ownerBlockchainName = '', channelName = '' } = {}) {
|
||||
const route = makeShineChannelRoute({ ownerBlockchainName, channelName });
|
||||
if (!route) return '';
|
||||
try {
|
||||
return new URL(`/${route}`, window.location.origin).toString();
|
||||
} catch {
|
||||
return `${window.location.origin}/${route}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack channels-screen channels-screen--add';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Создать канал',
|
||||
title: 'Создание канала',
|
||||
leftAction: { label: '<', onClick: () => navigate('channels-list') },
|
||||
}),
|
||||
);
|
||||
@@ -63,23 +74,31 @@ export function render({ navigate }) {
|
||||
form.className = 'card stack';
|
||||
form.innerHTML = `
|
||||
<strong class="channel-head-title">Создание канала</strong>
|
||||
<p class="channel-head-meta">Разрешены только латинские буквы, цифры, _ и -.</p>
|
||||
<p class="channel-head-meta">Длина названия: от 3 до 32 символов. Название не должно состоять только из цифр.</p>
|
||||
<p class="channel-head-meta">Можно использовать большие и маленькие буквы, но уникальность проверяется без учёта регистра.</p>
|
||||
<div class="meta-muted">Тип канала фиксирован: публичный (1).</div>
|
||||
|
||||
<div class="channel-create-avatar-head">
|
||||
<div id="channel-avatar-preview"></div>
|
||||
<div class="channel-create-avatar-side">
|
||||
<div class="channel-create-avatar-status-row">
|
||||
<div class="channel-create-avatar-status" id="channel-avatar-status"></div>
|
||||
<button type="button" class="channel-avatar-remove-btn" id="channel-avatar-remove" title="Убрать аватар" aria-label="Убрать аватар">✕</button>
|
||||
</div>
|
||||
<button type="button" class="secondary-btn" id="channel-avatar-btn">Выбрать аватар</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="channel-name">Техническое имя канала</label>
|
||||
<input id="channel-name" class="input" maxlength="32" placeholder="Например: My-Channel_1" required />
|
||||
<div class="meta-muted">Используется в прямой ссылке на канал.</div>
|
||||
<div class="meta-muted" id="channel-link-preview"></div>
|
||||
<div class="meta-muted">Разрешены латинские буквы, цифры, _ и -. Длина: от 3 до 32 символов. Название не должно состоять только из цифр.</div>
|
||||
<div id="channel-name-error" class="meta-muted inline-error"></div>
|
||||
|
||||
<label for="channel-title">Человекочитаемое имя</label>
|
||||
<label for="channel-title">Красивое имя (то, как канал будет виден пользователям)</label>
|
||||
<input id="channel-title" class="input" maxlength="50" placeholder="Например: Мой красивый канал" />
|
||||
<div class="meta-muted" id="channel-title-counter">0 / 50 символов</div>
|
||||
<div id="channel-title-error" class="meta-muted inline-error"></div>
|
||||
|
||||
<div id="channel-avatar-preview"></div>
|
||||
<button type="button" class="secondary-btn" id="channel-avatar-btn">Выбрать аватар</button>
|
||||
|
||||
<label for="channel-description">Описание канала (необязательно)</label>
|
||||
<textarea id="channel-description" class="input" rows="4" maxlength="250" placeholder="Коротко о канале, до 250 символов"></textarea>
|
||||
<div class="meta-muted" id="channel-description-counter">0 / 250 символов</div>
|
||||
@@ -96,7 +115,10 @@ export function render({ navigate }) {
|
||||
const titleEl = form.querySelector('#channel-title');
|
||||
const descriptionEl = form.querySelector('#channel-description');
|
||||
const avatarPreviewEl = form.querySelector('#channel-avatar-preview');
|
||||
const avatarStatusEl = form.querySelector('#channel-avatar-status');
|
||||
const avatarBtn = form.querySelector('#channel-avatar-btn');
|
||||
const avatarRemoveBtn = form.querySelector('#channel-avatar-remove');
|
||||
const linkPreviewEl = form.querySelector('#channel-link-preview');
|
||||
const nameErrorEl = form.querySelector('#channel-name-error');
|
||||
const titleErrorEl = form.querySelector('#channel-title-error');
|
||||
const titleCounterEl = form.querySelector('#channel-title-counter');
|
||||
@@ -108,6 +130,36 @@ export function render({ navigate }) {
|
||||
|
||||
let submitInFlight = false;
|
||||
let selectedAvatar = null;
|
||||
let ownerBlockchainName = '';
|
||||
|
||||
const renderAvatarStatus = (nameValue, titleValue) => {
|
||||
renderAvatarPreview(avatarPreviewEl, selectedAvatar, titleValue || nameValue);
|
||||
avatarRemoveBtn.hidden = !selectedAvatar?.ar;
|
||||
if (!selectedAvatar?.ar) {
|
||||
avatarStatusEl.innerHTML = '<p class="meta-muted">Аватар не установлен.</p>';
|
||||
return;
|
||||
}
|
||||
const txId = String(selectedAvatar.ar || '').trim();
|
||||
const isPending = true;
|
||||
avatarStatusEl.innerHTML = `
|
||||
<p class="channel-avatar-status-text">${isPending ? 'Аватар выбран и ещё не сохранён.' : 'Аватар установлен.'}</p>
|
||||
<p class="meta-muted">Адрес в Arweave:</p>
|
||||
<p class="channel-avatar-txid">${txId}</p>
|
||||
`;
|
||||
};
|
||||
|
||||
const renderChannelLinkPreview = (nameValue) => {
|
||||
const normalizedChannelName = normalizeChannelDisplayName(nameValue);
|
||||
if (!ownerBlockchainName || !normalizedChannelName) {
|
||||
linkPreviewEl.textContent = 'Прямая ссылка появится после ввода технического имени канала.';
|
||||
return;
|
||||
}
|
||||
const directUrl = buildAbsoluteChannelUrl({
|
||||
ownerBlockchainName,
|
||||
channelName: normalizedChannelName,
|
||||
});
|
||||
linkPreviewEl.innerHTML = `Прямая ссылка: <a href="${directUrl}" target="_blank" rel="noopener noreferrer">${directUrl}</a>`;
|
||||
};
|
||||
|
||||
const setBusy = (busy) => {
|
||||
submitInFlight = !!busy;
|
||||
@@ -134,7 +186,8 @@ export function render({ navigate }) {
|
||||
|
||||
const ok = nameCheck.ok && titleCheck.ok && descriptionCheck.ok;
|
||||
submitEl.disabled = submitInFlight || !ok;
|
||||
renderAvatarPreview(avatarPreviewEl, selectedAvatar, titleCheck.normalized || nameCheck.normalized);
|
||||
renderAvatarStatus(nameCheck.normalized, titleCheck.normalized);
|
||||
renderChannelLinkPreview(nameCheck.normalized);
|
||||
|
||||
return {
|
||||
ok,
|
||||
@@ -149,19 +202,28 @@ export function render({ navigate }) {
|
||||
descriptionEl.addEventListener('input', updateValidation);
|
||||
avatarBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
selectedAvatar = await openArweaveAttachmentManager({
|
||||
const nextAvatar = await openArweaveAttachmentManager({
|
||||
login: state.session.login,
|
||||
storagePwd: state.session.storagePwdInMemory,
|
||||
gateway: state.entrySettings.arweaveServer,
|
||||
mode: 'avatar',
|
||||
historyPurpose: 'avatar',
|
||||
});
|
||||
if (nextAvatar?.ar) selectedAvatar = nextAvatar;
|
||||
updateValidation();
|
||||
} catch (error) {
|
||||
errorEl.textContent = toUserMessage(error, 'Не удалось выбрать аватар.');
|
||||
}
|
||||
});
|
||||
|
||||
avatarRemoveBtn.addEventListener('click', () => {
|
||||
if (!selectedAvatar?.ar) return;
|
||||
const confirmed = window.confirm('Убрать аватар и сделать канал без аватара?');
|
||||
if (!confirmed) return;
|
||||
selectedAvatar = null;
|
||||
updateValidation();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
if (submitInFlight) return;
|
||||
@@ -206,5 +268,14 @@ export function render({ navigate }) {
|
||||
screen.append(form);
|
||||
nameEl.focus();
|
||||
updateValidation();
|
||||
void authService.getUser(String(state.session.login || '').trim())
|
||||
.then((user) => {
|
||||
ownerBlockchainName = String(user?.blockchainName || '').trim();
|
||||
renderChannelLinkPreview(nameEl.value);
|
||||
})
|
||||
.catch(() => {
|
||||
ownerBlockchainName = '';
|
||||
renderChannelLinkPreview(nameEl.value);
|
||||
});
|
||||
return screen;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user