76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import { renderHeader } from '../components/header.js?v=20260403081123';
|
|
import { authService, state } from '../state.js?v=20260403081123';
|
|
|
|
export const pageMeta = { id: 'network-view', title: 'Связи' };
|
|
|
|
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 board = document.createElement('div');
|
|
board.className = 'network-board';
|
|
board.style.height = 'calc(100dvh - 170px)';
|
|
|
|
const note = document.createElement('p');
|
|
note.className = 'meta-muted';
|
|
note.textContent = 'Загрузка связей...';
|
|
|
|
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;
|
|
}
|