frontend/src/components/RackView.js - master - Krams/nodemon

frontend/src/components/RackView.js
108 строк4 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Компонент для отображения шкафа с узлами и блоками
import React from 'react';
import { Card } from 'react-bootstrap';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import stateColors from '../utils/stateFormatter';
import { useNavigate } from 'react-router-dom';
import './MapView.css';
import NodeCard from './NodeCard';

const RackView = ({ 
  rackNum,        // Номер шкафа
  nodes,          // Массив узлов
  blocks,         // Массив блоков
  selectionMode = false,  // Режим выбора узлов
  selectedNodes = [],     // Выбранные узлы
  toggleNodeSelection,    // Функция переключения выбора узла
  currentNode = ""       // Текущий выбранный узел
}) => {
  const navigate = useNavigate();

  // Создает двумерный массив полок с узлами
  const generateShelves = (nodes) => {
    const shelves = Array.from({ length: 8 }, () => Array(6).fill(null));
    nodes.forEach(node => {
      const shelf = node.shelf - 1;
      const pos = node.position - 1;
      if (shelf >= 0 && pos >= 0) {
        shelves[shelf][pos] = node;
      }
    });
    return shelves;
  };

  // Обработчик клика по узлу
  const handleNodeClick = (node) => {
    if (selectionMode) {
      toggleNodeSelection(node);
    } else {
      navigate(`/node/${node.id}`);
    }
  };

  // Проверяет, выбран ли узел
  const isNodeSelected = (node) => selectedNodes.includes(node?.id);

  // Формирует содержимое всплывающей подсказки
  const renderTooltipContent = (item) => (
    <div style={{ textAlign: 'left' }}>
      <strong>{item?.name.replace(/block|node/, "") || "—"}</strong> 
      {item ? `(${item.rack || "-"}${item.shelf ? "." + item.shelf : ""}${item.position ? "." + item.position : ""})` : '—'}<br />
      <u>{item?.state || "—"}</u><br />
      <small>{item?.comment || "—"}</small>
    </div>
  );

  const shelves = generateShelves(nodes);

  return (
    <div className="rack">
      <h5 className="rack-title">Шкаф {rackNum}</h5>
      <div className="rack-body">
        {/* Секция блоков */}
        <div className="blocks">
          {blocks.map((block, i) => (
            <Tippy 
              key={i} 
              content={renderTooltipContent(block)} 
              interactive={false} 
              hideOnClick={false}
            >
              <Card
                onClick={() => navigate(`/block/${block.id}`)}
                className="block-card"
                style={{ 
                  backgroundColor: stateColors[block?.state] || "#444", 
                  cursor: "pointer" 
                }}
              >
                <Card.Body className="p-1 text-start">
                  <small>{block?.name.replace("block", "") || '—'}</small>
                </Card.Body>
              </Card>
            </Tippy>
          ))}
        </div>

        {/* Секция полок с узлами */}
        <div className="shelves">
          {shelves.map((shelf, shelfIndex) => (
            <div className="shelf-row" key={shelfIndex}>
              {shelf.map((node, posIndex) => (
                <NodeCard
                  key={posIndex}
                  node={node}
                  isSelected={isNodeSelected(node) || currentNode === node?.name}
                  onClick={handleNodeClick}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default RackView;