static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tendrils Network</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: system-ui, sans-serif;
            margin: 0;
            padding: 10px;
            background: #111;
            color: #eee;
        }
        #controls {
            margin-bottom: 10px;
        }
        #stats { margin-left: 10px; }
        #error { color: #f66; padding: 20px; }

        #container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .location {
            background: #222;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 10px;
        }

        .location.top-level {
            width: 100%;
        }

        .location-name {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
            text-align: center;
        }

        .location.anonymous {
            background: transparent;
            border: none;
            padding: 0;
        }

        .location.anonymous > .location-name {
            display: none;
        }

        .node-row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }

        .node-row + .node-row {
            margin-top: 8px;
        }

        .node {
            position: relative;
            width: 120px;
            min-height: 50px;
            background: #a6d;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 11px;
            padding: 4px;
            cursor: pointer;
            overflow: visible;
            word-break: normal;
            overflow-wrap: break-word;
            white-space: pre-line;
            margin-top: 8px;
        }

        .node .switch-port {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9px;
            background: #444;
            color: #ccc;
            padding: 1px 6px;
            border-radius: 8px;
            white-space: nowrap;
        }

        .node .switch-port.external {
            background: #633;
            color: #f99;
        }

        .node:hover {
            filter: brightness(1.2);
        }

        .node.switch {
            background: #2a2;
            border: 2px solid #4f4;
            font-weight: bold;
        }

        .node.copied {
            outline: 2px solid #fff;
        }

        .children {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .children.horizontal {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-evenly;
            width: 100%;
        }

        .children.vertical {
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="controls">
        <strong>Tendrils</strong>
        <span id="stats"></span>
    </div>
    <div id="error"></div>
    <div id="container"></div>

    <script>
        function getLabel(node) {
            if (node.names && node.names.length > 0) return node.names.join('\n');
            if (node.interfaces && node.interfaces.length > 0) {
                const ips = [];
                node.interfaces.forEach(iface => {
                    if (iface.ips) iface.ips.forEach(ip => ips.push(ip));
                });
                if (ips.length > 0) return ips.join('\n');
                const macs = [];
                node.interfaces.forEach(iface => {
                    if (iface.mac) macs.push(iface.mac);
                });
                if (macs.length > 0) return macs.join('\n');
            }
            return '??';
        }

        function getNodeIdentifiers(node) {
            const ids = [];
            if (node.names) {
                node.names.forEach(n => ids.push(n.toLowerCase()));
            }
            if (node.interfaces) {
                node.interfaces.forEach(iface => {
                    if (iface.mac) ids.push(iface.mac.toLowerCase());
                });
            }
            return ids;
        }

        function isSwitch(node) {
            return !!(node.poe_budget);
        }

        let anonCounter = 0;

        function buildLocationTree(locations, parent) {
            if (!locations) return [];
            return locations.map((loc, idx) => {
                let locId;
                let anonymous = false;
                if (loc.name) {
                    locId = 'loc_' + loc.name.replace(/[^a-zA-Z0-9]/g, '_');
                } else {
                    locId = 'loc_anon_' + (anonCounter++);
                    anonymous = true;
                }
                const locObj = {
                    id: locId,
                    name: loc.name || '',
                    anonymous: anonymous,
                    direction: loc.direction || 'horizontal',
                    nodeRefs: (loc.nodes || []).map(n => n.toLowerCase()),
                    parent: parent,
                    children: []
                };
                locObj.children = buildLocationTree(loc.children, locObj);
                return locObj;
            });
        }

        function getSwitchesInLocation(loc, assignedNodes) {
            const switches = [];
            const nodes = assignedNodes.get(loc) || [];
            nodes.forEach(n => {
                if (isSwitch(n)) switches.push(n);
            });
            loc.children.forEach(child => {
                if (child.anonymous) {
                    switches.push(...getSwitchesInLocation(child, assignedNodes));
                }
            });
            return switches;
        }

        function findEffectiveSwitch(loc, assignedNodes) {
            if (!loc) return null;
            const switches = getSwitchesInLocation(loc, assignedNodes);
            if (switches.length === 1) {
                return switches[0];
            }
            if (loc.parent) {
                return findEffectiveSwitch(loc.parent, assignedNodes);
            }
            return null;
        }

        function buildNodeIndex(locations, index) {
            locations.forEach(loc => {
                loc.nodeRefs.forEach(ref => {
                    index.set(ref, loc);
                });
                buildNodeIndex(loc.children, index);
            });
        }

        function findLocationForNode(node, nodeIndex) {
            const identifiers = getNodeIdentifiers(node);
            for (const ident of identifiers) {
                if (nodeIndex.has(ident)) {
                    return nodeIndex.get(ident);
                }
            }
            return null;
        }

        function createNodeElement(node, switchConnection, nodeLocation) {
            const div = document.createElement('div');
            div.className = 'node' + (isSwitch(node) ? ' switch' : '');

            if (!isSwitch(node) && switchConnection) {
                const portEl = document.createElement('div');
                portEl.className = 'switch-port';
                if (switchConnection.external) {
                    portEl.classList.add('external');
                    portEl.textContent = switchConnection.switchName + ':' + switchConnection.port;
                } else {
                    portEl.textContent = switchConnection.port;
                }
                div.appendChild(portEl);
            }

            const labelEl = document.createElement('span');
            labelEl.textContent = getLabel(node);
            div.appendChild(labelEl);

            div.addEventListener('click', () => {
                const json = JSON.stringify(node, null, 2);
                navigator.clipboard.writeText(json).then(() => {
                    div.classList.add('copied');
                    setTimeout(() => div.classList.remove('copied'), 300);
                });
            });
            return div;
        }

        function renderLocation(loc, assignedNodes, isTopLevel, switchConnections) {
            const nodes = assignedNodes.get(loc) || [];
            const hasNodes = nodes.length > 0;

            const childElements = loc.children
                .map(child => renderLocation(child, assignedNodes, false, switchConnections))
                .filter(el => el !== null);

            if (!hasNodes && childElements.length === 0) {
                return null;
            }

            const container = document.createElement('div');
            let classes = 'location';
            if (loc.anonymous) classes += ' anonymous';
            if (isTopLevel) classes += ' top-level';
            container.className = classes;

            const nameEl = document.createElement('div');
            nameEl.className = 'location-name';
            nameEl.textContent = loc.name;
            container.appendChild(nameEl);

            if (hasNodes) {
                const switches = nodes.filter(n => isSwitch(n));
                const nonSwitches = nodes.filter(n => !isSwitch(n));

                if (switches.length > 0) {
                    const switchRow = document.createElement('div');
                    switchRow.className = 'node-row';
                    switches.forEach(node => {
                        switchRow.appendChild(createNodeElement(node, null, loc));
                    });
                    container.appendChild(switchRow);
                }

                if (nonSwitches.length > 0) {
                    const nodeRow = document.createElement('div');
                    nodeRow.className = 'node-row';
                    nonSwitches.forEach(node => {
                        const conn = switchConnections.get(node.typeid);
                        nodeRow.appendChild(createNodeElement(node, conn, loc));
                    });
                    container.appendChild(nodeRow);
                }
            }

            if (childElements.length > 0) {
                const childrenContainer = document.createElement('div');
                childrenContainer.className = 'children ' + loc.direction;
                childElements.forEach(el => childrenContainer.appendChild(el));
                container.appendChild(childrenContainer);
            }

            return container;
        }

        async function init() {
            anonCounter = 0;
            const [statusResp, configResp] = await Promise.all([
                fetch('/api/status'),
                fetch('/api/config')
            ]);
            const data = await statusResp.json();
            const config = await configResp.json();

            const nodes = data.nodes || [];
            const links = data.links || [];

            document.getElementById('stats').textContent =
                `${nodes.length} nodes, ${links.length} links`;

            const locationTree = buildLocationTree(config.locations || [], null);
            const nodeIndex = new Map();
            buildNodeIndex(locationTree, nodeIndex);

            const nodesByTypeId = new Map();
            nodes.forEach(node => {
                nodesByTypeId.set(node.typeid, node);
            });

            const nodeLocations = new Map();
            const assignedNodes = new Map();
            const unassignedNodes = [];

            nodes.forEach(node => {
                const loc = findLocationForNode(node, nodeIndex);
                if (loc) {
                    nodeLocations.set(node.typeid, loc);
                    if (!assignedNodes.has(loc)) {
                        assignedNodes.set(loc, []);
                    }
                    assignedNodes.get(loc).push(node);
                } else {
                    unassignedNodes.push(node);
                }
            });

            const switchConnections = new Map();
            links.forEach(link => {
                const nodeA = nodesByTypeId.get(link.node_a?.typeid);
                const nodeB = nodesByTypeId.get(link.node_b?.typeid);
                if (!nodeA || !nodeB) return;

                const aIsSwitch = isSwitch(nodeA);
                const bIsSwitch = isSwitch(nodeB);

                if (aIsSwitch && !bIsSwitch) {
                    const nodeLoc = nodeLocations.get(nodeB.typeid);
                    const effectiveSwitch = findEffectiveSwitch(nodeLoc, assignedNodes);
                    switchConnections.set(nodeB.typeid, {
                        port: link.interface_a || '?',
                        switchName: getLabel(nodeA),
                        external: !effectiveSwitch || effectiveSwitch.typeid !== nodeA.typeid
                    });
                } else if (bIsSwitch && !aIsSwitch) {
                    const nodeLoc = nodeLocations.get(nodeA.typeid);
                    const effectiveSwitch = findEffectiveSwitch(nodeLoc, assignedNodes);
                    switchConnections.set(nodeA.typeid, {
                        port: link.interface_b || '?',
                        switchName: getLabel(nodeB),
                        external: !effectiveSwitch || effectiveSwitch.typeid !== nodeB.typeid
                    });
                }
            });

            const container = document.getElementById('container');
            container.innerHTML = '';

            locationTree.forEach(loc => {
                const el = renderLocation(loc, assignedNodes, true, switchConnections);
                if (el) container.appendChild(el);
            });

            if (unassignedNodes.length > 0) {
                const unassignedLoc = document.createElement('div');
                unassignedLoc.className = 'location top-level';

                const nameEl = document.createElement('div');
                nameEl.className = 'location-name';
                nameEl.textContent = 'Unassigned';
                unassignedLoc.appendChild(nameEl);

                const switches = unassignedNodes.filter(n => isSwitch(n));
                const nonSwitches = unassignedNodes.filter(n => !isSwitch(n));

                if (switches.length > 0) {
                    const switchRow = document.createElement('div');
                    switchRow.className = 'node-row';
                    switches.forEach(node => {
                        switchRow.appendChild(createNodeElement(node, null, null));
                    });
                    unassignedLoc.appendChild(switchRow);
                }

                if (nonSwitches.length > 0) {
                    const nodeRow = document.createElement('div');
                    nodeRow.className = 'node-row';
                    nonSwitches.forEach(node => {
                        const conn = switchConnections.get(node.typeid);
                        nodeRow.appendChild(createNodeElement(node, conn, null));
                    });
                    unassignedLoc.appendChild(nodeRow);
                }

                container.appendChild(unassignedLoc);
            }
        }

        init().catch(e => {
            document.getElementById('error').textContent = e.message;
        });
    </script>
</body>
</html>