\n
\n );\n}\n","import React from 'react';\nimport useT from '../utility/useT';\nimport AsyncDataWrapper from '../ui-elements/AsyncDataWrapper';\n\nexport default function RiverDetailWrapper({ riverDetail, children }) {\n const t = useT();\n return (\n \n {name}: \n {Math.round(coordinates.latitude * 10000) / 10000}, {Math.round(coordinates.longitude * 10000) / 10000}\n
\n \n 
}\n
\n \n {gauge.od} {difficulties ? `(${difficulties})` : ''}\n
\n \n {`${gauge.prutok} m3/s, ${gauge.vyska} cm`}{' '}\n {gauge.limit && (\n <>\n ({t('gaugeLimit')} {gauge.limit['#text']} {gauge.limit['@jednotka']}; {t('gauge')} {gauge?.vodocet})\n \n )}\n
\n {`${gauge.datum} ${gauge.cas}:00`}
\n {showChart && gauge.graf && \n
\n );\n}\n","import React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n borderBottom: `1px solid ${theme.palette.divider}`,\n margin: 0,\n padding: theme.spacing(2),\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n buttonsWrapper: {\n // position: 'absolute',\n // right: theme.spacing(),\n // top: theme.spacing(),\n },\n closeButton: {\n color: theme.palette.grey[500],\n },\n}));\n\nexport default function CloseButtonDialogTitle({ children, onClose, headerButtons = null, id }) {\n const classes = useStyles();\n const handleClose = (e) => {\n e.stopPropagation();\n if (onClose) onClose();\n };\n return (\n \n
\n {gauge.od}
\n \n {headerButtons}\n {onClose ? (\n \n \n ) : null}\n
\n {extractRkmKm(rkmDetail)}
\n\n \n
\n 
\n \n \n ))}\n
- \n {guide.map((item) => (\n
{children}
;\n}\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Avatar from '@material-ui/core/Avatar';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n marginLeft: '5px',\n marginRight: '5px',\n },\n}));\n\nexport default function AvatarButton({ Icon, onClick, color = undefined }) {\n const classes = useStyles();\n return (\n \n \n \n
\n );\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport AppLayout from '../layout/AppLayout';\nimport useReactRouter from 'use-react-router';\nimport { useRiverDetail, useCountryGauges } from '../datalayer/api';\nimport {\n extractRiverName,\n extractFullRiverSection,\n extractRiverBegins,\n extractRiverEnds,\n extractDifficultyCoverage,\n extractRiverSemaphoreByRiver,\n extractIdZeme,\n extractRiverSectionsBySemaphore,\n extractArticleCount,\n extractLogCount,\n extractCommentCount,\n extractRiverArticles,\n extractRiverLogs,\n extractRiverComments,\n extractRiverGuide,\n extractMapPointsFromGuide,\n extractRkmKm,\n extractRiverImage,\n extractKnownSections,\n parseGauges,\n} from '../datalayer/extractors';\nimport { useSelectedSection, useSetSelectedSection } from '../utility/globalState';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport KmSelector from '../ui-elements/KmSelector';\nimport NameValueView from '../ui-elements/NameValueView';\nimport { roundKm } from '../utility/mathutil';\nimport MapIcon from '@material-ui/icons/Map';\nimport EditIcon from '@material-ui/icons/Edit';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport CommentIcon from '@material-ui/icons/Comment';\nimport CreateIcon from '@material-ui/icons/Create';\nimport ListIcon from '@material-ui/icons/List';\nimport TextFieldsIcon from '@material-ui/icons/TextFields';\nimport KeyboardTabIcon from '@material-ui/icons/KeyboardTab';\nimport DirectionsBoatIcon from '@material-ui/icons/DirectionsBoat';\nimport InfoIcon from '@material-ui/icons/Info';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport { findNearestCoordinates } from '../datalayer/guideGps';\nimport { DriveToButton } from '../rkmdetail/GpsView';\nimport localforage from 'localforage';\nimport RiverDetailWrapper from './RiverDetailWrapper';\nimport useT from '../utility/useT';\nimport { GaugeAvatar } from './GaugeListItem';\nimport Chip from '@material-ui/core/Chip';\nimport { Trans } from 'react-i18next';\nimport FeedbackDialog from '../feedback/FeedbackDialog';\nimport useRouterDialog from '../utility/useRouterDialog';\nimport RiverGuideDialog from './RiverGuideDialog';\nimport AvatarBar from '../ui-elements/AvatarBar';\nimport AvatarButton from '../ui-elements/AvatarButton';\nimport { useSnackbar } from 'notistack';\nimport useOnlineStatus from '../utility/useOnlineStatus';\nimport { drawerWidth } from '../utility/useViewportWidth';\n\nconst useStyles = makeStyles((theme) => ({\n wrapper: {\n margin: theme.spacing(2),\n // backgroundColor: theme.palette.background.paper,\n },\n header: {\n //padding: theme.spacing(2),\n fontSize: '1.3rem',\n // backgroundColor: theme.palette.background.paper,\n },\n root: {\n position: 'relative',\n },\n paper: {\n backgroundColor: '#CCD',\n paddingTop: '5px',\n // paddingTop: theme.spacing(1),\n },\n paperInner: {\n backgroundColor: '#EEE',\n display: 'flex',\n padding: '10px 0',\n },\n paperInnerButton: {\n backgroundColor: '#EEE',\n display: 'flex',\n padding: '10px 0',\n\n cursor: 'pointer',\n '&:hover': {\n // @ts-ignore\n backgroundColor: '#DDD',\n },\n // paddingTop: theme.spacing(1),\n },\n iconWrapper: {\n marginLeft: theme.spacing(2),\n marginTop: 'auto',\n marginBottom: 'auto',\n // margin: 'auto 10px',\n // marginRight: '20px',\n },\n itemBodyWrapper: {\n marginLeft: theme.spacing(2),\n },\n selectedSectionBody: {\n marginTop: theme.spacing(2),\n },\n kmSelectorWrap: {\n display: 'flex',\n marginBottom: theme.spacing(2),\n\n // justifyContent: 'space-between',\n // [theme.breakpoints.up('sm')]: {\n // width: `calc(90vw - ${drawerWidth}px)`,\n // },\n // [theme.breakpoints.down('xs')]: {\n // width: '90vw',\n // },\n },\n driveToButton: {\n marginLeft: '10px',\n },\n sectionList: {\n display: 'flex',\n // border: '1px solid #aaa',\n paddingTop: '5px',\n // paddingLeft: 0,\n },\n bold: {\n fontWeight: 'bold',\n },\n headerImage: {\n backgroundImage: `url(\"${process.env.REACT_APP_ROUTE_BASE}/images/feature.jpg\")`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n width: '100%',\n height: '160px',\n },\n}));\n\nfunction enrichKmOptions(options, km) {\n if (!_.find(options, (x) => x.km == km)) {\n return _.sortBy([...options, { km, name: '' }], (x) => -x.km);\n }\n return options;\n}\n\nfunction OverviewSectionDesign({\n title,\n children = undefined,\n pathBase = undefined,\n page = undefined,\n Icon = undefined,\n button = false,\n}) {\n const classes = useStyles();\n const { history } = useReactRouter();\n const handleClick = () => {\n if (page) {\n history.push(`${pathBase}/${page}`);\n }\n };\n return (\n // \n
\n );\n}\n\nfunction SelectedSectionOverview({ ID_reky, riverDetail }) {\n const classes = useStyles();\n const t = useT();\n const begins = extractRiverBegins(riverDetail, t);\n const ends = extractRiverEnds(riverDetail, t);\n const section = useSelectedSection(ID_reky);\n const setSection = useSetSelectedSection(ID_reky);\n const coverage = extractDifficultyCoverage(riverDetail, section);\n const [openGuideDialog, guideDialogProps] = useRouterDialog('guideDialog');\n const [openedGuide, setOpenedGuide] = React.useState(null);\n const [chooseGuideField, setChooseGuideField] = React.useState(null);\n\n const wholeRiver = React.useMemo(() => extractFullRiverSection(riverDetail), [riverDetail]);\n\n React.useEffect(() => {\n // @ts-ignore\n if (section.begin == 0 && section.end == 0) {\n setSection(extractFullRiverSection(riverDetail));\n }\n }, [riverDetail]);\n\n const beginCoordinates = React.useMemo(() => findNearestCoordinates(riverDetail, section.begin, 'zacatek'), [\n riverDetail,\n section.begin,\n ]);\n const endCoordinates = React.useMemo(() => findNearestCoordinates(riverDetail, section.end, 'konec'), [\n riverDetail,\n section.end,\n ]);\n\n return (\n \n {Icon && (\n
\n \n
\n )}\n \n
\n {title}
\n {children}\n \n
\n \n x.km == null || x.km > section.end),\n section.begin\n )}\n label={t('Begin')}\n section={section}\n setSection={setSection}\n field=\"begin\"\n onChoose={() => {\n const guide = extractRiverGuide(riverDetail).filter((x) => extractRkmKm(x) > section.end);\n setOpenedGuide(guide);\n setChooseGuideField('begin');\n // @ts-ignore\n openGuideDialog();\n }}\n />\n
\n \n x.km == null || x.km < section.begin),\n section.end\n )}\n label={t('End')}\n section={section}\n setSection={setSection}\n field=\"end\"\n onChoose={() => {\n const guide = extractRiverGuide(riverDetail).filter((x) => extractRkmKm(x) < section.begin);\n setOpenedGuide(guide);\n setChooseGuideField('end');\n // @ts-ignore\n openGuideDialog();\n }}\n />\n
\n\n \n \n {online && \n\n {isGuide && (\n \n {sectionTitle}\n \n )}\n {mapPoints.length > 0 && (\n \n {sectionTitle}\n \n )}\n \n \n {sectionsBySemaphore.length > 0 && (\n \n \n )}\n {isGuide && \n \n
\n );\n}\n\nexport default function RiverDetailPage() {\n const { history, match } = useReactRouter();\n const { ID_reky } = match.params;\n const t = useT();\n const [openFeedback, feedbackDialogProps] = useRouterDialog('feedbackDetail');\n const { enqueueSnackbar } = useSnackbar();\n const online = useOnlineStatus();\n\n const riverDetail = useRiverDetail(ID_reky);\n const pathBase = `/river/${ID_reky}`;\n const name = extractRiverName(riverDetail);\n\n const handleRemoveFromOffline = async () => {\n const keys = await localforage.keys();\n for (const key of keys) {\n const m = key.match(/(river|gauge)-..-(\\d+)/);\n if (m && m[2] == ID_reky) await localforage.removeItem(key);\n }\n enqueueSnackbar(t('RiverRemovedFromOffline'), { variant: 'warning' });\n // await localforage.removeItem(`river-${ID_reky}`);\n // await localforage.removeItem(`gauge-${ID_reky}`);\n history.goBack();\n };\n\n const subMenuItems = [];\n\n if (online) {\n subMenuItems.push(\n {\n label: t('RemoveFromOffline'),\n handler: handleRemoveFromOffline,\n },\n {\n label: t('SendFeedback'),\n handler: openFeedback,\n }\n );\n }\n\n return (\n \n
\n\n {t('ByDifficulty')}
\n {section && section.difficultySectionName && (\n {section.difficultySectionName}
\n )}\n {t('ByWaterLevel')}
\n {\n \n {sectionsBySemaphore.map((gauge) => (\n
\n }\n \n \n {title} \n {message}\n \n
\n );\n}\n","import React from 'react';\nimport AppLayout from '../layout/AppLayout';\nimport Grid from '@material-ui/core/Grid';\nimport useReactRouter from 'use-react-router';\nimport _ from 'lodash';\nimport { useRiverDb } from '../datalayer/api';\nimport LoadingInfo from '../ui-elements/LoadingInfo';\nimport ErrorInfo, { extractErrorMessage } from '../ui-elements/ErrorInfo';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Flag from '../icons/Flag';\nimport NativeRouterSearchField from '../ui-elements/NativeRouterSearchField';\nimport { getSearchValue } from '../ui-elements/SearchField';\nimport RiverList from '../riverlist/RiverList';\nimport containsText from '../utility/containsText';\nimport useT from '../utility/useT';\nimport InfoBox from '../ui-elements/InfoBox';\nimport { useSetWarrantyClosed, useWarrantyClosed } from '../utility/globalState';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundImage: `url(\"${process.env.REACT_APP_ROUTE_BASE}/images/homebg.jpg\")`,\n backgroundRepeat: 'no-repeat',\n backgroundAttachment: 'fixed',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n minHeight: '100vh',\n },\n tileWrapper: {\n position: 'relative',\n height: '120px',\n },\n tileBackground: {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n // color: 'white',\n margin: '2px',\n // @ts-ignore\n backgroundColor: theme.tileBackgroundColor,\n // @ts-ignore\n opacity: theme.tileBackgroundOpacity,\n // backgroundColor: '#22223377',\n\n // border: '1px solid #555'\n },\n tileContent: {\n position: 'absolute',\n display: 'flex',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n cursor: 'pointer',\n '&:hover': {\n // @ts-ignore\n backgroundColor: theme.tileBackgroundColor,\n },\n },\n tileInner: {\n margin: 'auto',\n textAlign: 'center',\n flex: 1,\n },\n searchbox: {\n fontSize: '1rem',\n padding: '15px',\n backgroundColor: '#FFFFFFCC',\n width: '70vw',\n // margin: '0 15vw',\n outline: 'none',\n border: '0px solid',\n borderRadius: '10px',\n },\n searchboxWrapper: {\n padding: '5vh 0px',\n display: 'flex',\n justifyContent: 'space-around',\n },\n searchResultWrapper: {\n // @ts-ignore\n backgroundColor: theme.tileBackgroundColor,\n // @ts-ignore\n opacity: theme.tileBackgroundOpacity,\n },\n counts: {\n // whiteSpace: 'nowrap',\n // overflow: 'hidden',\n // textOverflow: 'ellipsis',\n // margin: '0px 5px',\n }\n}));\n\nfunction CountryTile({ country }) {\n const classes = useStyles();\n const { history } = useReactRouter();\n const t = useT();\n\n return (\n \n \n
\n \n
\n \n
\n {country.Nazev}
\n {/* \n {_.compact([\n country.riverCount > 0 ? `${t('rivers')}: ${country.riverCount}` : null,\n country.creekCount > 0 ? `${t('creeks')}: ${country.creekCount}` : null,\n // country.channelCount > 0 ? `${t('channels')}: ${country.channelCount}` : null,\n ]).join(', ')}\n
\n \n setWarrantyClosed('true')} />\n )}\n {filter ? (\n \n {countries.map((country) => (\n \n )}\n
\n )}\n \n
\n {warrantyClosed == 'false' && (\n \n containsText(filter, river.Nazev))} countries={Staty} />\n
\n ) : (\n 
;\n}\n\nfunction Item({ title, name, shownObjects, setShownObjects }) {\n const handleClick = () => {\n setShownObjects({\n ...shownObjects,\n [name]: !shownObjects[name],\n });\n };\n\n return (\n - \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
\n {image ? (\n 
\n ) : (\n
\n );\n}\n\nexport function CurrentPositionMarker({ anchor = undefined, left = undefined, top = undefined }) {\n const classes = useStyles();\n\n const style = {\n left,\n top,\n };\n\n return (\n // @ts-ignore\n \n ) : (\n \n
\n );\n}\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport useDimensions from '../utility/useDimensions';\n\nconst useStyles = makeStyles((them) => ({\n root: {\n visibility: 'hidden',\n position: 'fixed',\n },\n}));\n\nexport default function AppBarMeasure({ onChangeHeight }) {\n const classes = useStyles();\n const [containerRef, { height }] = useDimensions();\n React.useEffect(() => {\n if (height > 0) {\n onChangeHeight(height);\n }\n }, [height]);\n\n return (\n \n \n \n
\n );\n}\n","import { useLayoutEffect, useState, useCallback } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\n// Export hook\nexport default function useDimensions(dependencies = []) {\n const [node, setNode] = useState(null);\n const ref = useCallback(newNode => {\n setNode(newNode);\n }, []);\n\n // Keep track of measurements\n const [dimensions, setDimensions] = useState({\n x: 0,\n y: 0,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n\n // Define measure function\n const measure = useCallback(innerNode => {\n const rect = innerNode.getBoundingClientRect();\n setDimensions({\n x: rect.left,\n y: rect.top,\n left: rect.left,\n top: rect.top,\n right: rect.right,\n bottom: rect.bottom,\n width: rect.width,\n height: rect.height,\n });\n }, []);\n\n useLayoutEffect(() => {\n if (!node) {\n return;\n }\n\n // Set initial measurements\n measure(node);\n\n // Observe resizing of element\n const resizeObserver = new ResizeObserver(() => {\n measure(node);\n });\n\n resizeObserver.observe(node);\n\n // Cleanup\n return () => {\n resizeObserver.disconnect();\n };\n }, [node, measure, ...dependencies]);\n\n return [ref, dimensions, node];\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Fab from '@material-ui/core/Fab';\nimport MyLocationIcon from '@material-ui/icons/MyLocation';\nimport LocationSearchingIcon from '@material-ui/icons/LocationSearching';\nimport LocationDisabledIcon from '@material-ui/icons/LocationDisabled';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useWatchPosition, useSetWatchPosition } from '../utility/globalState';\n\nconst useStyles = makeStyles((theme) => ({\n fab: {\n margin: theme.spacing(1),\n position: 'fixed',\n right: '1rem',\n bottom: '1rem',\n },\n})); \n\nexport default function LocationFab({ onClickLocation, hasGps }) {\n const classes = useStyles();\n const watchPosition = useWatchPosition();\n const setWatchPosition = useSetWatchPosition();\n\n return (\n <>\n {' '}\n {hasGps && (\n \n
\n );\n}\n\nexport default PointsMap;\n","import React from 'react';\n\nexport default function Camp({ size = 30, color = 'black' }) {\n return (\n \n );\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Map from 'pigeon-maps';\nimport Marker from '../maps/Marker';\nimport useViewportWidth from '../utility/useViewportWidth';\nimport { mapProviders, mapAttribution } from '../maps/PointsMap';\nimport { extractMapPoints } from '../datalayer/extractors';\nimport useStateDialog from '../utility/useStateDialog';\nimport GpsDetailDialog from './GpsDetailDialog';\nimport useOnlineStatus from '../utility/useOnlineStatus';\nimport { useDetailMapType } from '../utility/globalState';\nimport { distance } from '../utility/mathutil';\n\nconst useStyles = makeStyles((theme) => ({\n headerImage: {\n backgroundImage: `url(\"${process.env.REACT_APP_ROUTE_BASE}/images/feature.jpg\")`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n width: '100vw',\n height: '160px',\n },\n}));\n\nfunction getDefaultZoom(points, diam) {\n if (points.length == 1) return 18;\n if (points.length == 0) return 15;\n if (diam > 1) return 13;\n if (diam > 0.3) return 14;\n if (diam > 0.1) return 15;\n return 16;\n}\n\nexport default function RkmDetailMap({ rkmDetail }) {\n const { gps } = rkmDetail || {};\n const classes = useStyles();\n\n const [selectedGps, setSelectedGps] = React.useState(null);\n const [openDialog, dialogProps] = useStateDialog();\n const online = useOnlineStatus();\n const mapType = useDetailMapType();\n\n const width = useViewportWidth();\n\n const points = React.useMemo(() => extractMapPoints(rkmDetail), [rkmDetail]);\n const [center, zoom] = React.useMemo(() => {\n if (!points || points.length == 0) return [gps, 15];\n const minlat = _.minBy(points, 'gps.latitude').gps.latitude;\n const minlon = _.minBy(points, 'gps.longitude').gps.longitude;\n const maxlat = _.maxBy(points, 'gps.latitude').gps.latitude;\n const maxlon = _.maxBy(points, 'gps.longitude').gps.longitude;\n const diam = distance(minlat, minlon, maxlat, maxlon);\n return [\n {\n latitude: (minlat + maxlat) / 2,\n longitude: (minlon + maxlon) / 2,\n },\n getDefaultZoom(points, diam),\n ];\n }, [points, gps]);\n\n if (!center || !online) return ;\n if (!width) return null;\n\n return (\n <>\n \n \n \n
\n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Avatar from '@material-ui/core/Avatar';\nimport StreetviewIcon from '@material-ui/icons/Streetview';\nimport YoutubeIcon from '@material-ui/icons/YouTube';\nimport EditIcon from '@material-ui/icons/Edit';\nimport useReactRouter from 'use-react-router';\nimport CloseIcon from '@material-ui/icons/Close';\nimport NavigateNextIcon from '@material-ui/icons/NavigateNext';\nimport NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';\nimport NameValueView from '../ui-elements/NameValueView';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport { formatDistance } from '../utility/mathutil';\nimport CampIcon from '../icons/Camp';\nimport LayersIcon from '@material-ui/icons/Layers';\n\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport CloseButtonDialogTitle from '../ui-elements/CloseButtonDialogTitle';\nimport useT from '../utility/useT';\nimport {\n extractRkmDescription,\n extractPhotos,\n extractRkmKm,\n extractMapPoints,\n extractRiverName,\n extractRkmTitle,\n extractRiverGuide,\n extractNextRkmDetail,\n extractBeforeRkmDetail,\n extractRkmLinks,\n} from '../datalayer/extractors';\n// import CampInfoView from './CampInfoView';\nimport GpsView from './GpsView';\nimport useRouterDialog from '../utility/useRouterDialog';\nimport FeedbackDialog from '../feedback/FeedbackDialog';\nimport { Button } from '@material-ui/core';\nimport { Trans } from 'react-i18next';\nimport AppLayout from '../layout/AppLayout';\nimport RkmDetailMap from './RkmDetailMap';\nimport RkmListItem from '../riverdetail/RkmListItem';\nimport { findByLabelText } from '@testing-library/react';\nimport AvatarBar from '../ui-elements/AvatarBar';\nimport AvatarButton from '../ui-elements/AvatarButton';\nimport Panel from '../ui-elements/Panel';\nimport useOnlineStatus from '../utility/useOnlineStatus';\nimport { useSetDetailMapType } from '../utility/globalState';\n\nconst useStyles = makeStyles((theme) => ({\n wrapper: {\n margin: theme.spacing(2),\n // backgroundColor: theme.palette.background.paper,\n },\n image: {\n maxWidth: '100%',\n },\n iframe: {\n width: '100%',\n height: '100%',\n },\n closeButton: {\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n },\n streetviewButton: {\n color: 'gold',\n },\n rkmSeparator: {\n color: 'gray',\n backgroundColor: '#EEE',\n marginTop: '20px',\n },\n campIconWrapper: {\n marginRight: '10px',\n },\n}));\n\nexport function CampInfoView({\n nazev,\n adresa,\n web,\n telefon,\n provoz,\n dalsi_moznosti,\n prijezd,\n gps,\n aktivity,\n ikonky_tab,\n}) {\n const classes = useStyles();\n const t = useT();\n\n if (!nazev) return null;\n\n return (\n <>\n {children}
\n \n
\n \n
\n\n \n - */}\n
\n {pointsAll.map((point) => (\n
\n \n )}\n\n {online &&\n (photos || []).map((photo) => (\n <>\n - \n {_.flatten(\n guideShown.map((item, index) => {\n const rkm1 = extractRkmKm(item);\n const rkm2 = index < guideShown.length - 1 ? extractRkmKm(guideShown[index + 1]) : undefined;\n const rkmMiddle = rkm2 != null ? (rkm1 + rkm2) / 2 : undefined;\n const difficultySection = knownSections.find((x) => rkmMiddle <= x.range.begin && rkmMiddle >= x.range.end);\n const { difficulty } = difficultySection || {};\n return [\n item.currentLocation ? (\n
\n
\n + {formatDistance(rkm1, rkm2)}
\n \n {difficulty}\n rkmMiddle <= x.range.begin && rkmMiddle >= x.range.end)}\n size={15}\n className={classes.semaphore}\n />\n
\n - \n {gauges.map((x) => (\n
- \n {gauges.map((x, index) => (\n
\n {limit && (\n \n \n
\n )}\n\n {grafUrl && 
}\n\n \n \n
\n
\n )}\n | \n {t('Gauge')}\n | \n||
|---|---|---|
| \n {vodocet}\n | \n||
| \n {t('WaterLevelLimits')}\n | \n||
| {t('Minimum')} | \n{t('Optimum')} | \n{t('Maximum')} | \n
| {limit.minimum ? `${limit.minimum} ${jednotka}` : ''} | \n{limit.optimum ? `${limit.optimum} ${jednotka}` : ''} | \n{limit.maximum ? `${limit.maximum} ${jednotka}` : ''} | \n
| \n {t('CurrentValue')}\n | \n||
| {t('Passability')} | \n{t('Flow')} | \n{t('Height')} | \n
| \n | \n {section.prutok ? `${section.prutok} m3/s` : ''} | \n{section.vyska ? `${section.vyska} cm` : ''} | \n
| {t('Date')} | \n{t('Flow')} | \n{t('Height')} | \n
|---|---|---|
| {row.Datum} | \n{row.Prutok} | \n{row.Vyska} | \n
- \n {knownSections.map((x) => (\n
\n
\n \n
\n \n \n
\n \n
\n );\n}\n\nfunction RiverAdditionalInfoPage({\n extractor,\n title,\n ItemComponent,\n extractItemLink = undefined,\n extractAllLink,\n extractCount,\n nextDataTitle,\n}) {\n const { history, match } = useReactRouter();\n const { ID_reky } = match.params;\n const riverDetail = useRiverDetail(ID_reky);\n const items = extractor(riverDetail);\n const classes = useStyles();\n const t = useT();\n\n return (\n \n {item.Autor} - {item.Datum}\n
\n {item.Vodocet}
\n \n {item.Trasa} {item.Delka && ({item.Delka} km)}\n
\n {item.Popis}
\n - \n {items.map((item, index) => {\n const link = extractItemLink ? extractItemLink(riverDetail, item) : null;\n return (\n
\n \n
\n www.raft.cz
\n \n {nextDataTitle} ({extractCount(riverDetail)})\n
\n Limity sjízdnosti
\n\nLimity sjízdnosti jsou definovány pro plastové kánoe se středně zkušenou\nposádkou, která si dokáže i za nižších stavů najít proudnici s dostatkem\nvody. Pro majitele kajaků, zkušené vodáky nebo pro vodáky, kterým nevadí\nobčasné přetahování, může být limit nižší. Naopak pro rafty, laminátky\nnebo začínající vodáky je obvykle nutné vody více o minimálně 10 cm.\nZároveň pozor při zvýšeném průtoku nebo povodňových stavech, kdy\nobtížnost se může zvýšit o několik stupňů a úsek již nemusí být vhodný\npro začínající vodáky nebo posádky bez adekvátního vybavení.\n
\n\nObtížnosti
\n\n| \n Charakter toku | \n\n\n Nároky na vodáka\n a jeho vybavení | \n\n Příklad úseku | \n
|---|---|---|
| Obtížnost: ZW | \n||
| Klidný, mírně proudící\n tok bez překážek a peřejí. | \nZákladní znalost ovládání\n lodě, loď zajištěná proti potopení,\n děti a neplavci vesty. | \nBerounka při průtoku\n 10 m3/s v Plzni. | \n
| Obtížnost: WW I | \n||
| Lehký tok s občasnými\n peřejemi. | \nZnalost ovládání lodě, loď\n zajištěná proti potopení,\n vhodné vesty a helmy, znalost\n sebezáchrany. | \nLužnice z Tábora\n do Dobronice při průtoku\n 10 m3/s v Bechyni. | \n
| Obtížnost: WW II | \n||
| Řeka s peřejemi a vlnami,\n dobře čitelné a viditelné;\n úzké toky s rychlejším\n proudem a občasnými\n návaly proudu na břeh\n a s možností překážek\n dobře viditelných. | \nDobrá znalost ovládání lodi,\n umění rychle zastavit, trénovanost\n a zkušenosti vhodné;\n lodě zajištěné proti potopení,\n vhodné uzavřené nebo samovylévací\n lodě, vesta a helma,\n znalost sebezáchrany, doporučená\n znalost záchrany jiných. | \nSázava z Krhanic\n při průtoku 15 m3/s\n v Nespekách. | \n
| Obtížnost: WW III | \n||
| Těžký tok s nepravidelnými\n vlnami a občasným válcem,\n někdy zablokované, nečekané\n překážky; u úzkých\n toků nepřehledná místa\n s peřejemi v meandrech\n s náhlými překážkami. | \nVelmi dobrá znalost ovládání\n lodě a taktiky jízdy na rychlé\n a divoké vodě, uzavřené lodě\n nebo rafty, znalost sebezáchrany\n a záchrany jiných, vesta,\n helma, neopren, záchranné\n vybavení, je možná jízda bez\n prohlížení celého úseku. | \nLabe od přehrady\n po Kukačku při průtoku\n 20 m3/s. | \n
| Obtížnost: WW IV | \n||
| Velmi těžký tok s velkými\n peřejemi, válce, silná rozhraní,\n návaly vody, zablokované\n s úzkými průjezdy a stupni.\n | \ndtto. WW III, velmi dobré\n znalosti záchrany, psychická\n odolnost a trénovanost,\n rychlá rozhodnutí, úsek\n předem prohlédnout. | \nKamenice z Plavů\n do Návarova při průtoku\n 10 m3/s. | \n
| Obtížnost: WW V | \n||
| Extrémně těžký tok, velmi\n zablokované a nepřehledné,\n neustálé peřeje s málo místy\n na zastavení, vysoké kaskády\n a stupně, rychlý proud. | \nVelmi rychlá rozhodnutí pod\n psychickým tlakem, velká zkušenost,\n velmi dobře sehrané\n skupinky s praxí v záchraně\n a velmi dobrým vybavením. | \nJizera z Mýta při průtoku\n nad 40 m3/s v Jablonci. | \n
| Obtížnost: WW VI | \n||
| Hranice sjízdnosti, kdy tok\n může být sjízdný v kombinaci\n s vhodným stavem vody\n a dalšími podmínkami. | \ndtto. WW V | \nVydra za velké vody. | \n
\nVelmi významný vliv na obtížnost toku má jeho charakter, spád a aktuální\nprůtok. Je třeba si uvědomit, že obtížnost bývá stanovována při běžném\noptimálním průtoku. Jeho zvýšení, například během povodně, může způsobit\nnárůst obtížnosti nebo až nesjízdnost! Charakter toku je taktéž\ndůležitý, jelikož u nepřehledného úzkého potoka s obtížností WW II a\nmožností překážek (padlých stromů, nízkých lávek), je sjezd technicky\nnáročnější než na přehledné, široké a peřejnaté řece s obtížností taktéž\nWW II.\n
\n\n\nZvolený typ řeky, a tím pádem i obtížnost, se promítá do potřebného\nvybavení. Například vesta s helmou by se měla používat již od obtížnosti\nWW I. Helma by se měla používat i na mírně tekoucích řekách s malým\nmnožstvím vody a zvláště u uzavřených lodí. V případě překlopení asi\nnebude hrozit utonutí, když je vody v řece po kolena, ale spíše hrozí\nnáraz hlavou o kámen. Proto je helma důležitá i na jednoduché vodě jako\nprevence před úrazem. Pozor také na odlišnosti zahraničních řek.\n
\n\n`;\n","export default `\nWater limits
\n\nThe limits are defined almost for canoe. For kayaks can limit a few cm less, for rafts higher.\n
\n\nDifficulty of rivers
\n\n\nDifficulty of Czech and Slovak rivers is group to a couple of categories. In this country, we are using Alpen categories with 9 groups. Calm water has from ZWA (lake, dam), ZWB (a little running) to ZWC (soft running). You can find only one category ZW what is junction of all categories with calm water.\n
\n\n\nWhitewater has 6 groups: WW I (easy), WW II (a little hard), WW III (hard), WW IV (very hard), WW V (extreme hard), WW VI (very extreme hard). there is used for better adjustment sign + (high difficult) and - (less difficult).\n
\n\n\nCzech rivers are dependent on the water level. In the spring, we have a high water from snow, but we are dependent only on a rain during next mounths. You can mostly ship a upper part of the rivers only in spring or after heavy rain. It is recommended to concult with actual water level. Czech rivers have usually a narrow stone river-basin with amount rapids and sluices. \n
\n\n| \n Difficulty\n | \n\n Knowledge about control of boat | \n\n Equipment\n | \n
|---|---|---|
| ZWA\n | \nnothing\n | \nfor all types of boats\n | \n
| ZWB\n | \nnothing\n | \nfor all types of boats\n | \n
| ZWC\n | \nbasic knowledge about control of boat | \nfor all types of boats | \n
| WW I\n | \nbasic knowledge about control of boat\n | \nfor all types of boats, jacket, helmet\n | \n
| WW II\n | \ngood control of boat and knowledge about \"reading of river\"\n | \nclose boat to harder river, jacket, helmet\n | \n
| WW III\n | \nvery good control | \nraft or close boat, neopen, jacket, helmet\n | \n
| WW IV\n | \nvery good control, traning | \nraft or close boat, neopen, jacket, helmet\n | \n
| WW V\n | \nvery good control, thews, training\n | \nrraft or close boat, neopen, jacket, helmet | \n
| WW VI | \nvery good control, thews, training\n | \nraft or close boat, neopen, jacket, helmet\n | \n