This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import {
|
||||
Container, Navbar, Table, Button, Form, InputGroup, Row, Col, Card, Alert
|
||||
} from 'react-bootstrap'
|
||||
|
||||
const API_URL = 'http://localhost:3001/api'
|
||||
|
||||
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('')
|
||||
|
||||
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 handleDeleteDomain = (index) => {
|
||||
setDomains(domains.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
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 filteredDomains = domains.filter(d =>
|
||||
d.domain.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar bg="dark" variant="dark" expand="lg">
|
||||
<Container>
|
||||
<Navbar.Brand href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" className="d-inline-block align-top me-2" viewBox="0 0 16 16">
|
||||
<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"/>
|
||||
</svg>
|
||||
S3 Менеджер Доменов
|
||||
</Navbar.Brand>
|
||||
</Container>
|
||||
</Navbar>
|
||||
|
||||
<Container className="mt-4">
|
||||
{error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
|
||||
{success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
|
||||
|
||||
<Card className="mb-4">
|
||||
<Card.Header as="h5">Добавить новый домен</Card.Header>
|
||||
<Card.Body>
|
||||
<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>
|
||||
<Card.Header as="h5">
|
||||
<Row className="align-items-center">
|
||||
<Col>Список доменов</Col>
|
||||
<Col md={5}>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder="Поиск по домену..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Table striped bordered hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Домен</th>
|
||||
<th>Шлюз</th>
|
||||
<th className="text-center">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredDomains.map((d, index) => (
|
||||
<tr key={index}>
|
||||
<td>{index + 1}</td>
|
||||
<td>{d.domain}</td>
|
||||
<td>{d.type}</td>
|
||||
<td className="text-center">
|
||||
<Button variant="danger" size="sm" onClick={() => handleDeleteDomain(index)}>
|
||||
Удалить
|
||||
</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>
|
||||
|
||||
{domains.length > 0 && (
|
||||
<div className="text-center mt-4">
|
||||
<Button variant="success" size="lg" onClick={handleSaveChanges}>
|
||||
Сохранить все изменения в S3
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Reference in New Issue
Block a user