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 { latLng } from 'leaflet'
|
||||
|
||||
import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
|
||||
import { BackHeader, ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
|
||||
import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
|
||||
import { categories, categoryNames } from '../assets/category'
|
||||
import { stations, lines, lineNames } from '../assets/metro'
|
||||
import { fallbackError, gotError } from '../hooks/useFetch'
|
||||
import { useOsmAddresses } from '../hooks/api'
|
||||
import CardLayout from '../components/CardLayout'
|
||||
|
||||
const styles = {
|
||||
modal: {
|
||||
height: 'calc(100vh - 3rem)',
|
||||
} as CSSProperties,
|
||||
body: {
|
||||
overflowY: 'auto',
|
||||
} as CSSProperties,
|
||||
map: {
|
||||
width: '100%',
|
||||
height: 400,
|
||||
@ -48,138 +43,136 @@ function AddPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='m-4' style={styles.modal}>
|
||||
<Card.Body style={styles.body} >
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className='mb-3' controlId='name'>
|
||||
<Form.Label>Заголовок объявления</Form.Label>
|
||||
<Form.Control type='text' required name='name' />
|
||||
</Form.Group>
|
||||
<CardLayout text='Опубликовать объявление'>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className='mb-3' controlId='name'>
|
||||
<Form.Label>Заголовок объявления</Form.Label>
|
||||
<Form.Control type='text' required name='name' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className='mb-3' controlId='category'>
|
||||
<Form.Label>Категория</Form.Label>
|
||||
<Form.Select required name='category'>
|
||||
<option value='' hidden>
|
||||
Выберите категорию
|
||||
</option>
|
||||
{categories.map(category =>
|
||||
<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 className='mb-3' controlId='category'>
|
||||
<Form.Label>Категория</Form.Label>
|
||||
<Form.Select required name='category'>
|
||||
<option value='' hidden>
|
||||
Выберите категорию
|
||||
</option>
|
||||
{categories.map(category =>
|
||||
<option key={category} value={category}>{categoryNames[category]}</option>
|
||||
)}
|
||||
</Form.Group>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
|
||||
<Button variant='success' type='submit' {...addButton} />
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<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>
|
||||
|
||||
<Button variant='success' type='submit' {...addButton} />
|
||||
</Form>
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
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 { AuthForm } from '../components'
|
||||
import { isLiteralUnion } from '../utils/types'
|
||||
import CardLayout from '../components/CardLayout'
|
||||
|
||||
const tabKeys = ['register', 'login'] as const
|
||||
type TabKeys = typeof tabKeys[number]
|
||||
@ -22,23 +23,21 @@ function LoginPage() {
|
||||
), [navigate])
|
||||
|
||||
return (
|
||||
<Card className='m-4'>
|
||||
<Card.Body>
|
||||
<Tabs
|
||||
activeKey={tab}
|
||||
onSelect={(k) => isTabKeys(k) && setTab(k)}
|
||||
fill justify
|
||||
className='mb-3'
|
||||
>
|
||||
<Tab eventKey='register' title='Регистрация'>
|
||||
<AuthForm goBack={goBack} register={true} />
|
||||
</Tab>
|
||||
<Tab eventKey='login' title='Вход'>
|
||||
<AuthForm goBack={goBack} register={false} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<CardLayout text='Представьтесь'>
|
||||
<Tabs
|
||||
activeKey={tab}
|
||||
onSelect={(k) => isTabKeys(k) && setTab(k)}
|
||||
fill justify
|
||||
className='mb-3'
|
||||
>
|
||||
<Tab eventKey='register' title='Регистрация'>
|
||||
<AuthForm goBack={goBack} register={true} />
|
||||
</Tab>
|
||||
<Tab eventKey='login' title='Вход'>
|
||||
<AuthForm goBack={goBack} register={false} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user