frontend/src/components/Modals/EditNodeModal.js - master - Krams/nodemon

frontend/src/components/Modals/EditNodeModal.js
116 строк4 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
import React, { useEffect, useState } from 'react';
import { Modal, Form, Button, Dropdown } from 'react-bootstrap';
import stateColors from '../../utils/stateFormatter';
import ColorDot from '../ColorDot';

function capitalizeFirstLetter(str) {
  if (!str) return "";
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const EditNodeModal = ({ show, onClose, onSave, editState, editComment, editMac, editGuid, onChange }) => {
  // Локальное состояние для хранения данных узла
  const [localState, setLocalState] = useState(editState || '');     // Состояние узла
  const [localComment, setLocalComment] = useState(editComment || ''); // Комментарий
  const [localMac, setLocalMac] = useState(editMac || '');          // MAC-адрес
  const [localGuid, setLocalGuid] = useState(editGuid || '');       // Уникальный идентификатор

  // Обновляем локальный стейт при открытии модалки
  useEffect(() => {
    setLocalState(editState || '');
    setLocalComment(editComment || '');
    setLocalMac(editMac || '');
    setLocalGuid(editGuid || '');
  }, [editState, editComment, editMac, editGuid, show]);

  const handleSaveClick = () => {
    onSave({
      state: localState,
      comment: localComment,
      mac: localMac,
      guid: localGuid,
    });
  };

  return (
    <Modal data-bs-theme="dark" show={show} onHide={onClose} centered>
      <Modal.Header closeButton>
        <Modal.Title>Редактировать профиль</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
          <Form.Group className="mb-3">
            <Form.Label>Состояние</Form.Label>
            <Dropdown>
              <Dropdown.Toggle
                variant="secondary"
                id="dropdown-state"
                style={{
                  backgroundColor: '#343a40',
                  borderColor: '#6c757d',
                  color: localState ? '#fff' : '#aaa',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px',
                }}
              >
                {localState && <ColorDot color={stateColors[localState]} />}
                {localState || "Выберите состояние"}
              </Dropdown.Toggle>

              <Dropdown.Menu style={{ backgroundColor: '#343a40' }}>
                {Object.entries(stateColors).map(([stateKey, color]) => (
                  <Dropdown.Item
                    key={stateKey}
                    onClick={() => setLocalState(stateKey)}
                    active={localState === stateKey}
                    style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff' }}
                  >
                    <ColorDot color={color} />
                    {capitalizeFirstLetter(stateKey)}
                  </Dropdown.Item>
                ))}
              </Dropdown.Menu>
            </Dropdown>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Комментарий</Form.Label>
            <Form.Control
              type="text"
              value={localComment}
              onChange={(e) => setLocalComment(e.target.value)}
              className="bg-dark text-light border-secondary"
            />
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>MAC</Form.Label>
            <Form.Control
              type="text"
              value={localMac}
              onChange={(e) => setLocalMac(e.target.value)}
              className="bg-dark text-light border-secondary"
            />
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>GUID</Form.Label>
            <Form.Control
              type="text"
              value={localGuid}
              onChange={(e) => setLocalGuid(e.target.value)}
              className="bg-dark text-light border-secondary"
            />
          </Form.Group>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onClose}>Отмена</Button>
        <Button variant="primary" onClick={handleSaveClick}>Сохранить</Button>
      </Modal.Footer>
    </Modal>
  );
};

export default EditNodeModal;