правки поехавшей разметки
This commit is contained in:
Kayashov.SM
@@ -8,7 +8,7 @@ const CardCompact = ({item}) => {
|
||||
item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
|
||||
) : null;
|
||||
return (
|
||||
<Card className="mb-auto" style={{width: '14rem'}}>
|
||||
<Card className="mb-auto mx-auto" style={{width: '20rem'}}>
|
||||
<Card.Img variant="top" src={image}/>
|
||||
<Card.Body>
|
||||
<Card.Title>{item.title}</Card.Title>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
|
||||
import axios from "axios";
|
||||
import {useToast} from "../hooks/useToast";
|
||||
import {radarr} from "../contexts/client";
|
||||
|
||||
@@ -21,6 +20,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
|
||||
const [monitor, setMonitor] = useState(null)
|
||||
const [film, setFilm] = useState(false)
|
||||
const {addToast} = useToast();
|
||||
const rating = item?.ratings?.imdb?.value ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
radarr().get("api/v3/qualityprofile")
|
||||
@@ -28,6 +28,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
|
||||
setMovieQuality(r.data)
|
||||
})
|
||||
.catch((err) => addToast(err, 'danger'));
|
||||
// eslint-disable-next-lint
|
||||
}, []);
|
||||
|
||||
const handleSubmit = () => {
|
||||
@@ -77,58 +78,63 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{item.title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Container fluid='xl'>
|
||||
<Row>
|
||||
<Col sm={{span: 3}}>
|
||||
<img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/>
|
||||
<Modal.Body className="d-flex flex-column flex-md-row">
|
||||
<Container fluid>
|
||||
<Row className="align-items-start">
|
||||
<Col md={3} className="mb-3">
|
||||
<img width="100%" className='mb-3' src={item.remotePoster} alt={item.title} />
|
||||
</Col>
|
||||
<Col className="col-9 container text-center">
|
||||
<Row>
|
||||
<div className="col">
|
||||
<p>{item.overview}</p>
|
||||
</div>
|
||||
</Row>
|
||||
<Row style={{width: '60%'}}>
|
||||
<Col>
|
||||
<p style={{marginRight: '1rem'}}>Мультик</p>
|
||||
<FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
|
||||
onChange={() => setFilm(!film)}/>
|
||||
<p>Фильм</p>
|
||||
<FormCheck type='checkbox' disabled={!serial}
|
||||
style={{marginBottom: '1rem', marginLeft: '1rem'}}
|
||||
label="Сериал"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
|
||||
<FormSelect onChange={(e) => setMonitor(e.target.value)}>
|
||||
<option selected value={null}>Выберите пункт из меню</option>
|
||||
{movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
|
||||
</FormSelect>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
|
||||
<FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
|
||||
<option selected value={null}>Выберете качество</option>
|
||||
{movieQuality.map((quality) => <option value={quality.id}
|
||||
key={quality.id}>{quality.name}</option>)}
|
||||
</FormSelect>
|
||||
</Col>
|
||||
</Row>
|
||||
<Col md={9} className="d-flex flex-column">
|
||||
<div>
|
||||
<p>{item.overview}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Год выпуска: {item.year}</p>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<p>Рейтинг: {rating}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Row>
|
||||
<Col>
|
||||
<p style={{marginRight: '1rem'}}>Мультик</p>
|
||||
<FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
|
||||
onChange={() => setFilm(!film)}/>
|
||||
<p>Фильм</p>
|
||||
<FormCheck type='checkbox' disabled={!serial}
|
||||
style={{marginBottom: '1rem', marginLeft: '1rem'}}
|
||||
label="Сериал"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
|
||||
<FormSelect onChange={(e) => setMonitor(e.target.value)}>
|
||||
<option selected value={null}>Выберите пункт из меню</option>
|
||||
{movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
|
||||
</FormSelect>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
|
||||
<FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
|
||||
<option selected value={null}>Выберете качество</option>
|
||||
{movieQuality.map((quality) => <option value={quality.id}
|
||||
key={quality.id}>{quality.name}</option>)}
|
||||
</FormSelect>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
|
||||
</Container>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={() => handleClose()}>
|
||||
<Button variant="secondary" onClick={() => handleClose()}>
|
||||
Закрыть
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => handleSubmit()}>Скачать</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import axios from "axios";
|
||||
|
||||
const host = "192.168.1.100:30011";
|
||||
// const host = "tracker.kayashov.keenetic.pro";
|
||||
const host = "tracker.kayashov.keenetic.pro";
|
||||
|
||||
export const radarr = () => {
|
||||
const res = axios;
|
||||
|
||||
@@ -29,16 +29,17 @@ const Home = () => {
|
||||
</Accordion.Header>
|
||||
<Accordion.Body>
|
||||
<Row className='row-cols-auto'>
|
||||
{loading ?
|
||||
(
|
||||
// Отображаем 10 скелетонов
|
||||
Array.from({length: 10}, (_, index) => (
|
||||
<Col key={`skeleton-${index}`}>
|
||||
<SkeletonCompact key={index} width={300} height={400}/>
|
||||
</Col>
|
||||
))
|
||||
)
|
||||
: movies.map(rec => (
|
||||
{/*{loading ?*/}
|
||||
{/* (*/}
|
||||
{/* // Отображаем 10 скелетонов*/}
|
||||
{/* Array.from({length: 10}, (_, index) => (*/}
|
||||
{/* <Col key={`skeleton-${index}`}>*/}
|
||||
{/* <SkeletonCompact key={index} width={300} height={400}/>*/}
|
||||
{/* </Col>*/}
|
||||
{/* ))*/}
|
||||
{/* )*/}
|
||||
{/* :*/}
|
||||
{movies.map(rec => (
|
||||
<Col key={`col-${rec.title}-${rec.year}`}>
|
||||
<CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
|
||||
</Col>
|
||||
|
||||
@@ -19,6 +19,7 @@ export function Recommendation() {
|
||||
.then((r) => setRecommendations(r.data))
|
||||
.catch((err) => addToast(err, 'danger'))
|
||||
.finally(() => setLoading(false));
|
||||
// eslint-disable-next-lint
|
||||
}, []);
|
||||
|
||||
function handleModal(item) {
|
||||
@@ -41,7 +42,7 @@ export function Recommendation() {
|
||||
return (
|
||||
<Container className="text-center">
|
||||
<h2 className="mt-3">Рекомендации</h2>
|
||||
<Row className='row-cols-auto'>
|
||||
<Row>
|
||||
{loading ?
|
||||
(
|
||||
// Отображаем 10 скелетонов
|
||||
|
||||
Reference in New Issue
Block a user