Added back header to ann add and auth pages
Unified card layout
This commit is contained in:
parent
85472233a3
commit
6338e86a33
GPG Key ID:
027994B0AA357688
23
front/src/components/CardLayout.tsx
Normal file
23
front/src/components/CardLayout.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { PropsWithChildren } from 'react'
|
||||||
|
import { Card } from 'react-bootstrap'
|
||||||
|
|
||||||
|
import { BackHeader } from '.'
|
||||||
|
|
||||||
|
type CardLayoutProps = {
|
||||||
|
text: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CardLayout = ({ text, children }: PropsWithChildren<CardLayoutProps>) => (
|
||||||
|
<>
|
||||||
|
<div className='mx-4 px-3'>
|
||||||
|
<BackHeader text={text} />
|
||||||
|
</div>
|
||||||
|
<Card className='m-4 mt-0'>
|
||||||
|
<Card.Body>
|
||||||
|
{children}
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default CardLayout
|
||||||
@ -3,20 +3,15 @@ import { Form, Button, Card } from 'react-bootstrap'
|
|||||||
import { MapContainer, TileLayer } from 'react-leaflet'
|
import { MapContainer, TileLayer } from 'react-leaflet'
|
||||||
import { latLng } from 'leaflet'
|
import { latLng } from 'leaflet'
|
||||||
|
|
||||||
import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
|
import { BackHeader, ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
|
||||||
import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
|
import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
|
||||||
import { categories, categoryNames } from '../assets/category'
|
import { categories, categoryNames } from '../assets/category'
|
||||||
import { stations, lines, lineNames } from '../assets/metro'
|
import { stations, lines, lineNames } from '../assets/metro'
|
||||||
import { fallbackError, gotError } from '../hooks/useFetch'
|
import { fallbackError, gotError } from '../hooks/useFetch'
|
||||||
import { useOsmAddresses } from '../hooks/api'
|
import { useOsmAddresses } from '../hooks/api'
|
||||||
|
import CardLayout from '../components/CardLayout'
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
modal: {
|
|
||||||
height: 'calc(100vh - 3rem)',
|
|
||||||
} as CSSProperties,
|
|
||||||
body: {
|
|
||||||
overflowY: 'auto',
|
|
||||||
} as CSSProperties,
|
|
||||||
map: {
|
map: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: 400,
|
height: 400,
|
||||||
@ -48,138 +43,136 @@ function AddPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className='m-4' style={styles.modal}>
|
<CardLayout text='Опубликовать объявление'>
|
||||||
<Card.Body style={styles.body} >
|
<Form onSubmit={handleSubmit}>
|
||||||
<Form onSubmit={handleSubmit}>
|
<Form.Group className='mb-3' controlId='name'>
|
||||||
<Form.Group className='mb-3' controlId='name'>
|
<Form.Label>Заголовок объявления</Form.Label>
|
||||||
<Form.Label>Заголовок объявления</Form.Label>
|
<Form.Control type='text' required name='name' />
|
||||||
<Form.Control type='text' required name='name' />
|
</Form.Group>
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='category'>
|
<Form.Group className='mb-3' controlId='category'>
|
||||||
<Form.Label>Категория</Form.Label>
|
<Form.Label>Категория</Form.Label>
|
||||||
<Form.Select required name='category'>
|
<Form.Select required name='category'>
|
||||||
<option value='' hidden>
|
<option value='' hidden>
|
||||||
Выберите категорию
|
Выберите категорию
|
||||||
</option>
|
</option>
|
||||||
{categories.map(category =>
|
{categories.map(category =>
|
||||||
<option key={category} value={category}>{categoryNames[category]}</option>
|
<option key={category} value={category}>{categoryNames[category]}</option>
|
||||||
)}
|
|
||||||
</Form.Select>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='bestBy'>
|
|
||||||
<Form.Label>Срок годности</Form.Label>
|
|
||||||
<Form.Control type='date' required name='bestBy' />
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='address'>
|
|
||||||
<Form.Label>Адрес выдачи</Form.Label>
|
|
||||||
<div className='mb-3'>
|
|
||||||
<MapContainer
|
|
||||||
scrollWheelZoom={false}
|
|
||||||
style={styles.map}
|
|
||||||
center={addressPosition}
|
|
||||||
zoom={13}
|
|
||||||
>
|
|
||||||
<TileLayer
|
|
||||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
||||||
/>
|
|
||||||
<LocationMarker
|
|
||||||
address={fallbackError(address)}
|
|
||||||
position={addressPosition}
|
|
||||||
setPosition={setAddressPosition}
|
|
||||||
/>
|
|
||||||
<ClickHandler
|
|
||||||
setPosition={setAddressPosition}
|
|
||||||
/>
|
|
||||||
</MapContainer>
|
|
||||||
</div>
|
|
||||||
<p>Адрес: {fallbackError(address)}</p>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='description'>
|
|
||||||
<Form.Label>Описание</Form.Label>
|
|
||||||
<Form.Control as='textarea' name='description' rows={3} placeholder='Укажите свои контакты, а так же, когда вам будет удобно передать продукт' />
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='src'>
|
|
||||||
<Form.Label>Иллюстрация (фото или видео)</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type='file'
|
|
||||||
name='src'
|
|
||||||
accept='video/mp4,video/mkv, video/x-m4v,video/*, image/*'
|
|
||||||
capture='environment'
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className='mb-3' controlId='metro'>
|
|
||||||
<Form.Label>
|
|
||||||
Станция метро
|
|
||||||
</Form.Label>
|
|
||||||
<Form.Select name='metro'>
|
|
||||||
<option value=''>
|
|
||||||
Укажите ближайщую станцию метро
|
|
||||||
</option>
|
|
||||||
{lines.map(
|
|
||||||
line =>
|
|
||||||
<optgroup key={line} label={lineNames[line]}>
|
|
||||||
{Array.from(stations[line]).map(metro =>
|
|
||||||
<option key={metro} value={metro}>{metro}</option>
|
|
||||||
)}
|
|
||||||
</optgroup>
|
|
||||||
)}
|
|
||||||
</Form.Select>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className='mb-3' controlId='trashbox'>
|
|
||||||
<Form.Label>Пункт сбора мусора</Form.Label>
|
|
||||||
<div className='mb-3'>
|
|
||||||
{trashboxes.loading
|
|
||||||
? (
|
|
||||||
<div style={styles.map}>
|
|
||||||
<p>Загрузка...</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
gotError(trashboxes) ? (
|
|
||||||
<p
|
|
||||||
style={styles.map}
|
|
||||||
className='text-danger'
|
|
||||||
>{trashboxes.error}</p>
|
|
||||||
) : (
|
|
||||||
<MapContainer
|
|
||||||
scrollWheelZoom={false}
|
|
||||||
style={styles.map}
|
|
||||||
center={addressPosition}
|
|
||||||
zoom={13}
|
|
||||||
className=''
|
|
||||||
>
|
|
||||||
<TileLayer
|
|
||||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
||||||
/>
|
|
||||||
<TrashboxMarkers
|
|
||||||
trashboxes={trashboxes.data}
|
|
||||||
selectTrashbox={setSelectedTrashbox}
|
|
||||||
/>
|
|
||||||
</MapContainer>
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
{!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
|
|
||||||
<p>Выбран пункт сбора мусора на {
|
|
||||||
trashboxes.data[selectedTrashbox.index].Address
|
|
||||||
} с категорией {selectedTrashbox.category}</p>
|
|
||||||
) : (
|
|
||||||
<p>Выберите пунк сбора мусора и категорию</p>
|
|
||||||
)}
|
)}
|
||||||
</Form.Group>
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
<Button variant='success' type='submit' {...addButton} />
|
<Form.Group className='mb-3' controlId='bestBy'>
|
||||||
</Form>
|
<Form.Label>Срок годности</Form.Label>
|
||||||
</Card.Body>
|
<Form.Control type='date' required name='bestBy' />
|
||||||
</Card>
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className='mb-3' controlId='address'>
|
||||||
|
<Form.Label>Адрес выдачи</Form.Label>
|
||||||
|
<div className='mb-3'>
|
||||||
|
<MapContainer
|
||||||
|
scrollWheelZoom={false}
|
||||||
|
style={styles.map}
|
||||||
|
center={addressPosition}
|
||||||
|
zoom={13}
|
||||||
|
>
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||||
|
/>
|
||||||
|
<LocationMarker
|
||||||
|
address={fallbackError(address)}
|
||||||
|
position={addressPosition}
|
||||||
|
setPosition={setAddressPosition}
|
||||||
|
/>
|
||||||
|
<ClickHandler
|
||||||
|
setPosition={setAddressPosition}
|
||||||
|
/>
|
||||||
|
</MapContainer>
|
||||||
|
</div>
|
||||||
|
<p>Адрес: {fallbackError(address)}</p>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className='mb-3' controlId='description'>
|
||||||
|
<Form.Label>Описание</Form.Label>
|
||||||
|
<Form.Control as='textarea' name='description' rows={3} placeholder='Укажите свои контакты, а так же, когда вам будет удобно передать продукт' />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className='mb-3' controlId='src'>
|
||||||
|
<Form.Label>Иллюстрация (фото или видео)</Form.Label>
|
||||||
|
<Form.Control
|
||||||
|
type='file'
|
||||||
|
name='src'
|
||||||
|
accept='video/mp4,video/mkv, video/x-m4v,video/*, image/*'
|
||||||
|
capture='environment'
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className='mb-3' controlId='metro'>
|
||||||
|
<Form.Label>
|
||||||
|
Станция метро
|
||||||
|
</Form.Label>
|
||||||
|
<Form.Select name='metro'>
|
||||||
|
<option value=''>
|
||||||
|
Укажите ближайщую станцию метро
|
||||||
|
</option>
|
||||||
|
{lines.map(
|
||||||
|
line =>
|
||||||
|
<optgroup key={line} label={lineNames[line]}>
|
||||||
|
{Array.from(stations[line]).map(metro =>
|
||||||
|
<option key={metro} value={metro}>{metro}</option>
|
||||||
|
)}
|
||||||
|
</optgroup>
|
||||||
|
)}
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className='mb-3' controlId='trashbox'>
|
||||||
|
<Form.Label>Пункт сбора мусора</Form.Label>
|
||||||
|
<div className='mb-3'>
|
||||||
|
{trashboxes.loading
|
||||||
|
? (
|
||||||
|
<div style={styles.map}>
|
||||||
|
<p>Загрузка...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
gotError(trashboxes) ? (
|
||||||
|
<p
|
||||||
|
style={styles.map}
|
||||||
|
className='text-danger'
|
||||||
|
>{trashboxes.error}</p>
|
||||||
|
) : (
|
||||||
|
<MapContainer
|
||||||
|
scrollWheelZoom={false}
|
||||||
|
style={styles.map}
|
||||||
|
center={addressPosition}
|
||||||
|
zoom={13}
|
||||||
|
className=''
|
||||||
|
>
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||||
|
/>
|
||||||
|
<TrashboxMarkers
|
||||||
|
trashboxes={trashboxes.data}
|
||||||
|
selectTrashbox={setSelectedTrashbox}
|
||||||
|
/>
|
||||||
|
</MapContainer>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
{!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
|
||||||
|
<p>Выбран пункт сбора мусора на {
|
||||||
|
trashboxes.data[selectedTrashbox.index].Address
|
||||||
|
} с категорией {selectedTrashbox.category}</p>
|
||||||
|
) : (
|
||||||
|
<p>Выберите пунк сбора мусора и категорию</p>
|
||||||
|
)}
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Button variant='success' type='submit' {...addButton} />
|
||||||
|
</Form>
|
||||||
|
</CardLayout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
import { useCallback, useState } from 'react'
|
import { useCallback, useState } from 'react'
|
||||||
import { Card, Tabs, Tab } from 'react-bootstrap'
|
import { Tabs, Tab } from 'react-bootstrap'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
|
||||||
import { AuthForm } from '../components'
|
import { AuthForm } from '../components'
|
||||||
import { isLiteralUnion } from '../utils/types'
|
import { isLiteralUnion } from '../utils/types'
|
||||||
|
import CardLayout from '../components/CardLayout'
|
||||||
|
|
||||||
const tabKeys = ['register', 'login'] as const
|
const tabKeys = ['register', 'login'] as const
|
||||||
type TabKeys = typeof tabKeys[number]
|
type TabKeys = typeof tabKeys[number]
|
||||||
@ -22,23 +23,21 @@ function LoginPage() {
|
|||||||
), [navigate])
|
), [navigate])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className='m-4'>
|
<CardLayout text='Представьтесь'>
|
||||||
<Card.Body>
|
<Tabs
|
||||||
<Tabs
|
activeKey={tab}
|
||||||
activeKey={tab}
|
onSelect={(k) => isTabKeys(k) && setTab(k)}
|
||||||
onSelect={(k) => isTabKeys(k) && setTab(k)}
|
fill justify
|
||||||
fill justify
|
className='mb-3'
|
||||||
className='mb-3'
|
>
|
||||||
>
|
<Tab eventKey='register' title='Регистрация'>
|
||||||
<Tab eventKey='register' title='Регистрация'>
|
<AuthForm goBack={goBack} register={true} />
|
||||||
<AuthForm goBack={goBack} register={true} />
|
</Tab>
|
||||||
</Tab>
|
<Tab eventKey='login' title='Вход'>
|
||||||
<Tab eventKey='login' title='Вход'>
|
<AuthForm goBack={goBack} register={false} />
|
||||||
<AuthForm goBack={goBack} register={false} />
|
</Tab>
|
||||||
</Tab>
|
</Tabs>
|
||||||
</Tabs>
|
</CardLayout>
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user