feat: Добавлена поддержка AS и рефакторинг UI на вкладки
Publish Docker image / build-and-push (push) Successful in 1m38s
Publish Docker image / build-and-push (push) Successful in 1m38s
This commit is contained in:
@@ -76,6 +76,56 @@ app.post('/api/domains', async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// --- ASNs Routes ---
|
||||||
|
|
||||||
|
// Get ASNs from S3
|
||||||
|
app.get('/api/asns', async (req, res) => {
|
||||||
|
const params = {
|
||||||
|
Bucket: BUCKET_NAME,
|
||||||
|
Key: 'asns.txt',
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await s3.getObject(params).promise();
|
||||||
|
const fileContent = data.Body.toString('utf-8');
|
||||||
|
const asns = fileContent.split('\n').filter(line => line).map(line => {
|
||||||
|
const parts = line.trim().split(/\s+/);
|
||||||
|
const domain = parts[0] || ''; // Keep name 'domain' for consistency in component
|
||||||
|
const type = parts[1] || '';
|
||||||
|
return { domain, type };
|
||||||
|
});
|
||||||
|
res.json(asns);
|
||||||
|
} catch (error) {
|
||||||
|
if (error.code === 'NoSuchKey') {
|
||||||
|
res.json([]);
|
||||||
|
} else {
|
||||||
|
console.error(error);
|
||||||
|
res.status(500).send('Error reading from S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update ASNs in S3
|
||||||
|
app.post('/api/asns', async (req, res) => {
|
||||||
|
const { domains: asns } = req.body; // Keep name 'domains' for consistency
|
||||||
|
const fileContent = asns.map(a => `${a.domain} ${a.type}`).join('\n');
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
Bucket: BUCKET_NAME,
|
||||||
|
Key: 'asns.txt',
|
||||||
|
Body: fileContent,
|
||||||
|
ContentType: 'text/plain',
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
await s3.putObject(params).promise();
|
||||||
|
res.send('File updated successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
res.status(500).send('Error writing to S3');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// The "catchall" handler: for any request that doesn't
|
// The "catchall" handler: for any request that doesn't
|
||||||
// match one above, send back React's index.html file.
|
// match one above, send back React's index.html file.
|
||||||
app.get('*', (req, res) => {
|
app.get('*', (req, res) => {
|
||||||
|
|||||||
+20
-228
@@ -1,97 +1,7 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { Container, Navbar, Tabs, Tab } from 'react-bootstrap';
|
||||||
import axios from 'axios'
|
import DataManager from './DataManager';
|
||||||
import {
|
|
||||||
Container, Navbar, Table, Button, Form, InputGroup, Row, Col, Card, Alert
|
|
||||||
} from 'react-bootstrap'
|
|
||||||
|
|
||||||
const API_URL = '/api'
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [domains, setDomains] = useState([])
|
|
||||||
const [newDomain, setNewDomain] = useState({ domain: '', type: 'SharkFIN' })
|
|
||||||
const [error, setError] = useState('')
|
|
||||||
const [success, setSuccess] = useState('')
|
|
||||||
const [searchTerm, setSearchTerm] = useState('')
|
|
||||||
const [editingDomain, setEditingDomain] = useState(null)
|
|
||||||
const [editingValue, setEditingValue] = useState('')
|
|
||||||
const [bulkFrom, setBulkFrom] = useState('SharkFIN')
|
|
||||||
const [bulkTo, setBulkTo] = useState('SharkAM')
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchDomains()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const fetchDomains = async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.get(`${API_URL}/domains`)
|
|
||||||
setDomains(response.data)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching domains:', error)
|
|
||||||
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddDomain = () => {
|
|
||||||
if (newDomain.domain.trim() === '') {
|
|
||||||
setError('Имя домена не может быть пустым.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setError('')
|
|
||||||
setDomains([...domains, newDomain])
|
|
||||||
setNewDomain({ domain: '', type: 'SharkFIN' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleEdit = (domain) => {
|
|
||||||
setEditingDomain(domain.domain)
|
|
||||||
setEditingValue(domain.type)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSaveEdit = (domainName) => {
|
|
||||||
const updatedDomains = domains.map(d =>
|
|
||||||
d.domain === domainName ? { ...d, type: editingValue } : d
|
|
||||||
)
|
|
||||||
setDomains(updatedDomains)
|
|
||||||
setEditingDomain(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCancelEdit = () => {
|
|
||||||
setEditingDomain(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeleteDomain = (domainNameToDelete) => {
|
|
||||||
setDomains(domains.filter(d => d.domain !== domainNameToDelete))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSaveChanges = async () => {
|
|
||||||
try {
|
|
||||||
await axios.post(`${API_URL}/domains`, { domains })
|
|
||||||
setSuccess('Изменения успешно сохранены!')
|
|
||||||
setTimeout(() => setSuccess(''), 3000)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error saving changes:', error)
|
|
||||||
setError('Не удалось сохранить изменения.')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleBulkUpdate = () => {
|
|
||||||
if (!bulkFrom || !bulkTo) {
|
|
||||||
setError('Оба поля для массового обновления должны быть заполнены.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`)
|
|
||||||
if (confirm) {
|
|
||||||
const updatedDomains = domains.map(d =>
|
|
||||||
d.type === bulkFrom ? { ...d, type: bulkTo } : d
|
|
||||||
)
|
|
||||||
setDomains(updatedDomains)
|
|
||||||
setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredDomains = domains.filter(d =>
|
|
||||||
d.domain.toLowerCase().includes(searchTerm.toLowerCase())
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Navbar bg="dark" variant="dark" expand="lg">
|
<Navbar bg="dark" variant="dark" expand="lg">
|
||||||
@@ -101,149 +11,31 @@ function App() {
|
|||||||
<path d="M4.928 1.428a.5.5 0 0 0-.01.02H2.5A1.5 1.5 0 0 0 1 3v1.5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h2.418a.5.5 0 0 0 .01-.02zM7.5 2.5a.5.5 0 0 1 .5-.5h3.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1h-3a.5.5 0 0 1-.5-.5zM.5 5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zM2 7.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
<path d="M4.928 1.428a.5.5 0 0 0-.01.02H2.5A1.5 1.5 0 0 0 1 3v1.5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h2.418a.5.5 0 0 0 .01-.02zM7.5 2.5a.5.5 0 0 1 .5-.5h3.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1h-3a.5.5 0 0 1-.5-.5zM.5 5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zM2 7.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
||||||
<path d="M1.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM3 14.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM13.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/>
|
<path d="M1.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM3 14.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM13.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/>
|
||||||
</svg>
|
</svg>
|
||||||
S3 Менеджер Доменов
|
S3 Lists Manager
|
||||||
</Navbar.Brand>
|
</Navbar.Brand>
|
||||||
</Container>
|
</Container>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
|
||||||
<Container className="mt-4">
|
<Container className="mt-4">
|
||||||
{error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
|
<Tabs defaultActiveKey="domains" id="main-tabs" className="mb-3" fill>
|
||||||
{success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
|
<Tab eventKey="domains" title="Домены">
|
||||||
|
<DataManager
|
||||||
<Card className="mb-4">
|
entityName="домен"
|
||||||
<Card.Header as="h5">Добавить новый домен</Card.Header>
|
entityKey="domains"
|
||||||
<Card.Body>
|
placeholder="example.com"
|
||||||
<Form onSubmit={(e) => { e.preventDefault(); handleAddDomain(); }}>
|
|
||||||
<Row className="align-items-end">
|
|
||||||
<Col md={7}>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Имя домена</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
placeholder="example.com"
|
|
||||||
value={newDomain.domain}
|
|
||||||
onChange={(e) => setNewDomain({ ...newDomain, domain: e.target.value })}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
</Col>
|
|
||||||
<Col md={3}>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Шлюз</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
value={newDomain.type}
|
|
||||||
onChange={(e) => setNewDomain({ ...newDomain, type: e.target.value })}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
</Col>
|
|
||||||
<Col md={2}>
|
|
||||||
<Button variant="primary" type="submit" className="w-100">Добавить</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="mb-4">
|
|
||||||
<Card.Header as="h5">Массовое обновление шлюзов</Card.Header>
|
|
||||||
<Card.Body>
|
|
||||||
<Row className="align-items-end">
|
|
||||||
<Col>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Заменить с</Form.Label>
|
|
||||||
<Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
|
|
||||||
</Form.Group>
|
|
||||||
</Col>
|
|
||||||
<Col>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Заменить на</Form.Label>
|
|
||||||
<Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
|
|
||||||
</Form.Group>
|
|
||||||
</Col>
|
|
||||||
<Col md={3}>
|
|
||||||
<Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<Card.Header>
|
|
||||||
<div className="d-flex justify-content-between align-items-center">
|
|
||||||
<h5 className="mb-0">Список доменов</h5>
|
|
||||||
<Button variant="success" onClick={handleSaveChanges} disabled={domains.length === 0}>
|
|
||||||
Сохранить все изменения в S3
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card.Header>
|
|
||||||
<Card.Body>
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
placeholder="Поиск по домену..."
|
|
||||||
className="mb-3"
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
/>
|
/>
|
||||||
<Table striped bordered hover responsive>
|
</Tab>
|
||||||
<thead>
|
<Tab eventKey="asns" title="AS">
|
||||||
<tr>
|
<DataManager
|
||||||
<th>#</th>
|
entityName="AS"
|
||||||
<th>Домен</th>
|
entityKey="asns"
|
||||||
<th>Шлюз</th>
|
placeholder="AS12345"
|
||||||
<th className="text-center">Действия</th>
|
/>
|
||||||
</tr>
|
</Tab>
|
||||||
</thead>
|
</Tabs>
|
||||||
<tbody>
|
|
||||||
{filteredDomains.map((d, index) => (
|
|
||||||
<tr key={d.domain}>
|
|
||||||
<td>{index + 1}</td>
|
|
||||||
<td>{d.domain}</td>
|
|
||||||
<td>
|
|
||||||
{editingDomain === d.domain ? (
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
value={editingValue}
|
|
||||||
onChange={(e) => setEditingValue(e.target.value)}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
d.type
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
{editingDomain === d.domain ? (
|
|
||||||
<>
|
|
||||||
<Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(d.domain)}>
|
|
||||||
Сохранить
|
|
||||||
</Button>
|
|
||||||
<Button variant="secondary" size="sm" onClick={handleCancelEdit}>
|
|
||||||
Отмена
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(d)}>
|
|
||||||
Изменить
|
|
||||||
</Button>
|
|
||||||
<Button variant="danger" size="sm" onClick={() => handleDeleteDomain(d.domain)}>
|
|
||||||
Удалить
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
{domains.length > 0 && filteredDomains.length === 0 && (
|
|
||||||
<p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
|
|
||||||
)}
|
|
||||||
{domains.length === 0 && <p className="text-center text-muted">Домены не найдены. Добавьте новый домен в форме выше.</p>}
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
</Container>
|
</Container>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|||||||
@@ -0,0 +1,224 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { Table, Button, Form, Row, Col, Card, Alert } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const API_URL = '/api';
|
||||||
|
|
||||||
|
function DataManager({ entityName, entityKey, placeholder }) {
|
||||||
|
const [items, setItems] = useState([]);
|
||||||
|
const [newItem, setNewItem] = useState({ domain: '', type: 'SharkFIN' });
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [editingDomain, setEditingDomain] = useState(null);
|
||||||
|
const [editingValue, setEditingValue] = useState('');
|
||||||
|
const [bulkFrom, setBulkFrom] = useState('SharkFIN');
|
||||||
|
const [bulkTo, setBulkTo] = useState('SharkAM');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchItems();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchItems = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${API_URL}/${entityKey}`);
|
||||||
|
setItems(response.data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching ${entityKey}:`, error);
|
||||||
|
setError(`Не удалось загрузить ${entityName}. Проверьте, запущен ли бэкенд.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddItem = () => {
|
||||||
|
if (newItem.domain.trim() === '') {
|
||||||
|
setError(`Имя ${entityName} не может быть пустым.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setError('');
|
||||||
|
setItems([...items, newItem]);
|
||||||
|
setNewItem({ domain: '', type: 'SharkFIN' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (item) => {
|
||||||
|
setEditingDomain(item.domain);
|
||||||
|
setEditingValue(item.type);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveEdit = (domainName) => {
|
||||||
|
const updatedItems = items.map(i =>
|
||||||
|
i.domain === domainName ? { ...i, type: editingValue } : i
|
||||||
|
);
|
||||||
|
setItems(updatedItems);
|
||||||
|
setEditingDomain(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelEdit = () => {
|
||||||
|
setEditingDomain(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteItem = (domainNameToDelete) => {
|
||||||
|
setItems(items.filter(i => i.domain !== domainNameToDelete));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveChanges = async () => {
|
||||||
|
try {
|
||||||
|
// The backend expects a payload with a 'domains' key for both endpoints.
|
||||||
|
await axios.post(`${API_URL}/${entityKey}`, { domains: items });
|
||||||
|
setSuccess('Изменения успешно сохранены!');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving changes:', error);
|
||||||
|
setError('Не удалось сохранить изменения.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkUpdate = () => {
|
||||||
|
if (!bulkFrom || !bulkTo) {
|
||||||
|
setError('Оба поля для массового обновления должны быть заполнены.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`);
|
||||||
|
if (confirm) {
|
||||||
|
const updatedItems = items.map(i =>
|
||||||
|
i.type === bulkFrom ? { ...i, type: bulkTo } : i
|
||||||
|
);
|
||||||
|
setItems(updatedItems);
|
||||||
|
setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredItems = items.filter(i =>
|
||||||
|
i.domain.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
|
||||||
|
{success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col lg={4}>
|
||||||
|
<Card className="mb-4">
|
||||||
|
<Card.Header as="h5">Добавить новый {entityName}</Card.Header>
|
||||||
|
<Card.Body>
|
||||||
|
<Form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Имя {entityName}</Form.Label>
|
||||||
|
<Form.Control
|
||||||
|
type="text"
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={newItem.domain}
|
||||||
|
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Шлюз</Form.Label>
|
||||||
|
<Form.Control
|
||||||
|
type="text"
|
||||||
|
value={newItem.type}
|
||||||
|
onChange={(e) => setNewItem({ ...newItem, type: e.target.value })}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
<Button variant="primary" type="submit" className="w-100">Добавить</Button>
|
||||||
|
</Form>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="mb-4">
|
||||||
|
<Card.Header as="h5">Массовое обновление</Card.Header>
|
||||||
|
<Card.Body>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Заменить с</Form.Label>
|
||||||
|
<Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Заменить на</Form.Label>
|
||||||
|
<Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
|
||||||
|
</Form.Group>
|
||||||
|
<Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col lg={8}>
|
||||||
|
<Card>
|
||||||
|
<Card.Header>
|
||||||
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
|
<h5 className="mb-0">Список: {entityName}</h5>
|
||||||
|
<Button variant="success" onClick={handleSaveChanges} disabled={items.length === 0}>
|
||||||
|
Сохранить все изменения в S3
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card.Header>
|
||||||
|
<Card.Body>
|
||||||
|
<Form.Control
|
||||||
|
type="text"
|
||||||
|
placeholder={`Поиск по ${entityName}...`}
|
||||||
|
className="mb-3"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Table striped bordered hover responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>{entityName}</th>
|
||||||
|
<th>Шлюз</th>
|
||||||
|
<th className="text-center">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filteredItems.map((item, index) => (
|
||||||
|
<tr key={item.domain}>
|
||||||
|
<td>{index + 1}</td>
|
||||||
|
<td>{item.domain}</td>
|
||||||
|
<td>
|
||||||
|
{editingDomain === item.domain ? (
|
||||||
|
<Form.Control
|
||||||
|
type="text"
|
||||||
|
value={editingValue}
|
||||||
|
onChange={(e) => setEditingValue(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
item.type
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="text-center">
|
||||||
|
{editingDomain === item.domain ? (
|
||||||
|
<>
|
||||||
|
<Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(item.domain)}>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" size="sm" onClick={handleCancelEdit}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(item)}>
|
||||||
|
Изменить
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="sm" onClick={() => handleDeleteItem(item.domain)}>
|
||||||
|
Удалить
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
{items.length > 0 && filteredItems.length === 0 && (
|
||||||
|
<p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
|
||||||
|
)}
|
||||||
|
{items.length === 0 && <p className="text-center text-muted">Список пуст. Добавьте новый элемент.</p>}
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataManager;
|
||||||
Reference in New Issue
Block a user