SHA256
Add WS push events, PWA/FCM scaffolding, and direct messaging MVP
This commit is contained in:
ai5590
@@ -1,6 +1,6 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260403081123';
|
||||
import { directMessages } from '../mock-data.js?v=20260403081123';
|
||||
import { addChatMessage, getChatMessages } from '../state.js?v=20260403081123';
|
||||
import { addChatMessage, getChatMessages, authService, state } from '../state.js?v=20260403081123';
|
||||
|
||||
export const pageMeta = { id: 'chat-view', title: 'Чат' };
|
||||
|
||||
@@ -18,7 +18,11 @@ function renderLog(list, chatId) {
|
||||
|
||||
export function render({ navigate, route }) {
|
||||
const chatId = route.params.chatId || 'u1';
|
||||
const contact = directMessages.find((d) => d.id === chatId) || directMessages[0];
|
||||
const contact = directMessages.find((d) => d.id === chatId) || {
|
||||
id: chatId,
|
||||
name: chatId,
|
||||
initials: (chatId[0] || '?').toUpperCase(),
|
||||
};
|
||||
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
@@ -30,6 +34,23 @@ export function render({ navigate, route }) {
|
||||
})
|
||||
);
|
||||
|
||||
const isContact = state.contacts.includes(chatId);
|
||||
if (!isContact) {
|
||||
const warning = document.createElement('div');
|
||||
warning.className = 'card stack';
|
||||
warning.innerHTML = '<p class="meta-muted">Пользователь не в контактах. Можно отвечать, если он уже писал вам.</p>';
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'primary-btn';
|
||||
btn.type = 'button';
|
||||
btn.textContent = 'Добавить в контакты';
|
||||
btn.addEventListener('click', () => {
|
||||
state.contacts = [...state.contacts, chatId];
|
||||
warning.remove();
|
||||
});
|
||||
warning.append(btn);
|
||||
screen.append(warning);
|
||||
}
|
||||
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'chat-wrap';
|
||||
|
||||
@@ -43,12 +64,22 @@ export function render({ navigate, route }) {
|
||||
<button class="primary-btn" type="submit">Отправить</button>
|
||||
`;
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const input = form.elements.message;
|
||||
addChatMessage(chatId, input.value);
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
addChatMessage(chatId, text);
|
||||
input.value = '';
|
||||
renderLog(log, chatId);
|
||||
|
||||
try {
|
||||
await authService.sendDirectMessage(chatId, text);
|
||||
} catch (e) {
|
||||
addChatMessage(chatId, `Ошибка отправки: ${e.message || 'unknown'}`);
|
||||
renderLog(log, chatId);
|
||||
}
|
||||
});
|
||||
|
||||
renderLog(log, chatId);
|
||||
|
||||
@@ -1,18 +1,9 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260403081123';
|
||||
import { contactDirectory, directMessages } from '../mock-data.js?v=20260403081123';
|
||||
import { ensureChat } from '../state.js?v=20260403081123';
|
||||
import { directMessages } from '../mock-data.js?v=20260403081123';
|
||||
import { authService, ensureChat, setContacts, state } from '../state.js?v=20260403081123';
|
||||
|
||||
export const pageMeta = { id: 'contact-search-view', title: 'Поиск контактов' };
|
||||
|
||||
function getMatches(query) {
|
||||
const normalized = query.trim().toLowerCase();
|
||||
if (!normalized) return [];
|
||||
|
||||
return contactDirectory
|
||||
.filter((contact) => contact.name.toLowerCase().startsWith(normalized))
|
||||
.slice(0, 5);
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
@@ -21,7 +12,7 @@ export function render({ navigate }) {
|
||||
input.className = 'input';
|
||||
input.type = 'text';
|
||||
input.name = 'contact';
|
||||
input.placeholder = 'Введите имя контакта';
|
||||
input.placeholder = 'Введите начало логина';
|
||||
input.autocomplete = 'off';
|
||||
input.maxLength = 80;
|
||||
|
||||
@@ -43,7 +34,7 @@ export function render({ navigate }) {
|
||||
resultsCard.hidden = false;
|
||||
|
||||
if (!query.trim()) {
|
||||
status.textContent = 'Введите первые буквы имени, чтобы найти контакт.';
|
||||
status.textContent = 'Введите начало логина пользователя.';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -54,16 +45,16 @@ export function render({ navigate }) {
|
||||
|
||||
status.textContent = `Найдено пользователей: ${matches.length}`;
|
||||
|
||||
matches.forEach((contact) => {
|
||||
matches.forEach((login) => {
|
||||
const row = document.createElement('article');
|
||||
row.className = 'list-item';
|
||||
row.innerHTML = `
|
||||
<div class="avatar">${contact.initials}</div>
|
||||
<div class="avatar">${(login[0] || '?').toUpperCase()}</div>
|
||||
<div>
|
||||
<strong>${contact.name}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">${contact.about}</p>
|
||||
<strong>${login}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">Пользователь сервера</p>
|
||||
</div>
|
||||
<div class="meta-muted">Контакт</div>
|
||||
<div class="meta-muted">Профиль</div>
|
||||
`;
|
||||
resultsList.append(row);
|
||||
});
|
||||
@@ -72,38 +63,48 @@ export function render({ navigate }) {
|
||||
const searchButton = document.createElement('button');
|
||||
searchButton.className = 'primary-btn';
|
||||
searchButton.type = 'button';
|
||||
searchButton.textContent = 'Найти';
|
||||
searchButton.addEventListener('click', () => {
|
||||
renderResults(getMatches(input.value), input.value);
|
||||
searchButton.textContent = 'Поиск';
|
||||
searchButton.addEventListener('click', async () => {
|
||||
try {
|
||||
const logins = await authService.searchUsers(input.value.trim());
|
||||
renderResults(logins, input.value);
|
||||
} catch (e) {
|
||||
status.textContent = `Ошибка поиска: ${e.message || 'unknown'}`;
|
||||
resultsCard.hidden = false;
|
||||
}
|
||||
});
|
||||
|
||||
const addButton = document.createElement('button');
|
||||
addButton.className = 'ghost-btn';
|
||||
addButton.type = 'button';
|
||||
addButton.textContent = 'Добавить';
|
||||
addButton.textContent = 'Открыть чат';
|
||||
addButton.addEventListener('click', () => {
|
||||
if (!latestMatches.length) {
|
||||
status.textContent = 'Сначала выполните поиск, чтобы добавить контакт.';
|
||||
status.textContent = 'Сначала выполните поиск.';
|
||||
resultsCard.hidden = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const contact = latestMatches[0];
|
||||
const exists = directMessages.some((item) => item.id === contact.id);
|
||||
const login = latestMatches[0];
|
||||
const exists = directMessages.some((item) => item.id === login);
|
||||
|
||||
if (!exists) {
|
||||
directMessages.unshift({
|
||||
id: contact.id,
|
||||
name: contact.name,
|
||||
initials: contact.initials,
|
||||
lastMessage: 'Новый контакт добавлен. Можно начинать диалог.',
|
||||
id: login,
|
||||
name: login,
|
||||
initials: (login[0] || '?').toUpperCase(),
|
||||
lastMessage: 'Диалог создан. Пользователь пока не в контактах.',
|
||||
time: 'сейчас',
|
||||
unread: 0,
|
||||
});
|
||||
}
|
||||
|
||||
ensureChat(contact.id);
|
||||
navigate(`chat-view/${contact.id}`);
|
||||
if (!state.contacts.includes(login)) {
|
||||
setContacts([...state.contacts, login]);
|
||||
}
|
||||
|
||||
ensureChat(login);
|
||||
navigate(`chat-view/${login}`);
|
||||
});
|
||||
|
||||
const controls = document.createElement('div');
|
||||
|
||||
@@ -1,77 +1,75 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260403081123';
|
||||
import { networkGraph } from '../mock-data.js?v=20260403081123';
|
||||
import { authService, state } from '../state.js?v=20260403081123';
|
||||
|
||||
export const pageMeta = { id: 'network-view', title: 'Связи' };
|
||||
|
||||
function toPoint(v) {
|
||||
return `${v.x}%`;
|
||||
}
|
||||
|
||||
function showHelpModal() {
|
||||
const root = document.getElementById('modal-root');
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="network-help-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 style="font-size:18px;">Справка по схеме связей</h3>
|
||||
<p class="meta-muted">В центре находишься ты.</p>
|
||||
<p class="meta-muted">Рядом показаны друзья первого уровня.</p>
|
||||
<p class="meta-muted">Далее могут существовать друзья второго уровня.</p>
|
||||
<p class="meta-muted">При одном нажатии на узел можно показать его связи.</p>
|
||||
<p class="meta-muted">При двойном нажатии узел может переместиться в центр.</p>
|
||||
<p class="meta-muted">При долгом удержании может открываться меню действий.</p>
|
||||
<p class="meta-muted">Логика схемы строится на одном запросе связей пользователя, дальше дерево достраивается на его основе.</p>
|
||||
<button class="primary-btn" id="close-network-help">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
root.querySelector('#close-network-help').addEventListener('click', () => {
|
||||
root.innerHTML = '';
|
||||
});
|
||||
function makeNode(name, cls = '') {
|
||||
const n = document.createElement('div');
|
||||
n.className = `node ${cls}`.trim();
|
||||
n.innerHTML = `<div class="node-dot">${(name[0] || '?').toUpperCase()}</div><div class="node-label">${name}</div>`;
|
||||
return n;
|
||||
}
|
||||
|
||||
export function render() {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const header = renderHeader({
|
||||
title: 'Связи',
|
||||
rightActions: [{ label: 'Справка', onClick: showHelpModal }],
|
||||
});
|
||||
|
||||
const board = document.createElement('div');
|
||||
board.className = 'network-board';
|
||||
|
||||
const lines = networkGraph.peers
|
||||
.map(
|
||||
(peer) =>
|
||||
`<line x1="${toPoint(networkGraph.center)}" y1="${networkGraph.center.y}%" x2="${peer.x}%" y2="${peer.y}%" stroke="rgba(125,170,255,0.55)" stroke-width="1.5"/>`
|
||||
)
|
||||
.join('');
|
||||
|
||||
board.innerHTML = `<svg class="network-svg" viewBox="0 0 100 100" preserveAspectRatio="none">${lines}</svg>`;
|
||||
|
||||
const centerNode = document.createElement('div');
|
||||
centerNode.className = 'node center';
|
||||
centerNode.style.left = `${networkGraph.center.x}%`;
|
||||
centerNode.style.top = `${networkGraph.center.y}%`;
|
||||
centerNode.innerHTML = `<div class="node-dot">${networkGraph.center.initials}</div><div class="node-label">${networkGraph.center.name}</div>`;
|
||||
|
||||
board.append(centerNode);
|
||||
|
||||
networkGraph.peers.forEach((peer) => {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'node';
|
||||
node.style.left = `${peer.x}%`;
|
||||
node.style.top = `${peer.y}%`;
|
||||
node.innerHTML = `<div class="node-dot">${peer.initials}</div><div class="node-label">${peer.name}</div>`;
|
||||
board.append(node);
|
||||
});
|
||||
board.style.height = 'calc(100dvh - 170px)';
|
||||
|
||||
const note = document.createElement('p');
|
||||
note.className = 'meta-muted';
|
||||
note.textContent = 'Схема статичная для демо, архитектура подготовлена под дальнейшую интерактивность.';
|
||||
note.textContent = 'Загрузка связей...';
|
||||
|
||||
screen.append(header, board, note);
|
||||
const load = async (centerLogin) => {
|
||||
try {
|
||||
const graph = await authService.getUserConnectionsGraph(centerLogin || state.session.login);
|
||||
board.innerHTML = '';
|
||||
const center = makeNode(graph.login || state.session.login, 'center');
|
||||
center.style.left = '50%';
|
||||
center.style.top = '50%';
|
||||
board.append(center);
|
||||
|
||||
const all = [...new Set([...(graph.outFriends || []), ...(graph.inFriends || [])])];
|
||||
const left = all.slice(0, Math.ceil(all.length / 2));
|
||||
const right = all.slice(Math.ceil(all.length / 2));
|
||||
|
||||
const mk = (name, side, idx, total) => {
|
||||
const node = makeNode(name);
|
||||
const y = 15 + ((idx + 1) * 70) / (Math.max(total, 1) + 1);
|
||||
node.style.left = side === 'left' ? '20%' : '80%';
|
||||
node.style.top = `${y}%`;
|
||||
node.addEventListener('click', () => load(name));
|
||||
board.append(node);
|
||||
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', '50');
|
||||
line.setAttribute('y1', '50');
|
||||
line.setAttribute('x2', side === 'left' ? '20' : '80');
|
||||
line.setAttribute('y2', String(y));
|
||||
line.setAttribute('stroke', 'rgba(125,170,255,0.6)');
|
||||
line.setAttribute('stroke-width', '1.5');
|
||||
return line;
|
||||
};
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('class', 'network-svg');
|
||||
svg.setAttribute('viewBox', '0 0 100 100');
|
||||
svg.setAttribute('preserveAspectRatio', 'none');
|
||||
|
||||
left.forEach((name, i) => svg.append(mk(name, 'left', i, left.length)));
|
||||
right.forEach((name, i) => svg.append(mk(name, 'right', i, right.length)));
|
||||
board.prepend(svg);
|
||||
|
||||
note.textContent = 'Нажмите на любой узел, чтобы построить связи выбранного пользователя.';
|
||||
} catch (e) {
|
||||
note.textContent = `Ошибка загрузки связей: ${e.message || 'unknown'}`;
|
||||
}
|
||||
};
|
||||
|
||||
load();
|
||||
|
||||
screen.append(renderHeader({ title: 'Связи' }), board, note);
|
||||
return screen;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user