From 2cd374bb9fa941d7e2a6fd8aa5079893a158c98f Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 8 May 2022 13:16:57 -0700 Subject: Reorganize remaining files --- modern/src/other/EventPage.js | 77 +++++++++++++ modern/src/other/GeofencesList.js | 56 ++++++++++ modern/src/other/GeofencesPage.js | 87 +++++++++++++++ modern/src/other/ReplayPage.js | 220 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 440 insertions(+) create mode 100644 modern/src/other/EventPage.js create mode 100644 modern/src/other/GeofencesList.js create mode 100644 modern/src/other/GeofencesPage.js create mode 100644 modern/src/other/ReplayPage.js (limited to 'modern/src/other') diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js new file mode 100644 index 00000000..46f5e67c --- /dev/null +++ b/modern/src/other/EventPage.js @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; + +import { + makeStyles, Typography, AppBar, Toolbar, IconButton, +} from '@material-ui/core'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import { useHistory, useParams } from 'react-router-dom'; +import ContainerDimensions from 'react-container-dimensions'; +import { useEffectAsync } from '../reactHelper'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import Map from '../map/core/Map'; +import PositionsMap from '../map/PositionsMap'; + +const useStyles = makeStyles(() => ({ + root: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + mapContainer: { + flexGrow: 1, + }, +})); + +const EventPage = () => { + const classes = useStyles(); + const history = useHistory(); + const t = useTranslation(); + + const { id } = useParams(); + + const [event, setEvent] = useState(); + const [position, setPosition] = useState(); + + useEffectAsync(async () => { + if (id) { + const response = await fetch(`/api/events/${id}`); + if (response.ok) { + setEvent(await response.json()); + } + } + }, [id]); + + useEffectAsync(async () => { + if (event && event.positionId) { + const response = await fetch(`/api/positions?id=${event.positionId}`); + if (response.ok) { + const positions = await response.json(); + if (positions.length > 0) { + setPosition(positions[0]); + } + } + } + }, [event]); + + return ( +
+ + + history.push('/')}> + + + {t('positionEvent')} + + +
+ + + {position && } + + +
+
+ ); +}; + +export default EventPage; diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js new file mode 100644 index 00000000..b4fde749 --- /dev/null +++ b/modern/src/other/GeofencesList.js @@ -0,0 +1,56 @@ +import React, { Fragment } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { makeStyles } from '@material-ui/core/styles'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; + +import { devicesActions } from '../store'; +import EditCollectionView from '../settings/components/EditCollectionView'; + +const useStyles = makeStyles(() => ({ + list: { + maxHeight: '100%', + overflow: 'auto', + }, + icon: { + width: '25px', + height: '25px', + filter: 'brightness(0) invert(1)', + }, +})); + +const GeofenceView = ({ onMenuClick }) => { + const classes = useStyles(); + const dispatch = useDispatch(); + + const items = useSelector((state) => state.geofences.items); + + return ( + + {Object.values(items).map((item, index, list) => ( + + dispatch(devicesActions.select(item.id))}> + + + onMenuClick(event.currentTarget, item.id)}> + + + + + {index < list.length - 1 ? : null} + + ))} + + ); +}; + +const GeofencesList = () => ( + +); + +export default GeofencesList; diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js new file mode 100644 index 00000000..79eed22a --- /dev/null +++ b/modern/src/other/GeofencesPage.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { + Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton, +} from '@material-ui/core'; +import Drawer from '@material-ui/core/Drawer'; +import ContainerDimensions from 'react-container-dimensions'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import { useHistory } from 'react-router-dom'; +import Map from '../map/core/Map'; +import CurrentLocationMap from '../map/CurrentLocationMap'; +import GeofenceEditMap from '../map/GeofenceEditMap'; +import GeofencesList from './GeofencesList'; +import { useTranslation } from '../common/components/LocalizationProvider'; + +const useStyles = makeStyles((theme) => ({ + root: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + content: { + flexGrow: 1, + overflow: 'hidden', + display: 'flex', + flexDirection: 'row', + [theme.breakpoints.down('xs')]: { + flexDirection: 'column-reverse', + }, + }, + drawerPaper: { + position: 'relative', + [theme.breakpoints.up('sm')]: { + width: 350, + }, + [theme.breakpoints.down('xs')]: { + height: 250, + }, + }, + drawerHeader: { + ...theme.mixins.toolbar, + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0, 1), + }, + mapContainer: { + flexGrow: 1, + }, +})); + +const GeofencesPage = ({ width }) => { + const classes = useStyles(); + const history = useHistory(); + const t = useTranslation(); + + return ( +
+
+ +
+ history.goBack()}> + + + + {t('sharedGeofences')} + +
+ + + +
+ + + + + + +
+
+
+ ); +}; + +export default withWidth()(GeofencesPage); diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js new file mode 100644 index 00000000..9b66853d --- /dev/null +++ b/modern/src/other/ReplayPage.js @@ -0,0 +1,220 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { + Grid, FormControlLabel, Switch, IconButton, TextField, makeStyles, Paper, Slider, Toolbar, Tooltip, Typography, +} from '@material-ui/core'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import SettingsIcon from '@material-ui/icons/Settings'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import PauseIcon from '@material-ui/icons/Pause'; +import FastForwardIcon from '@material-ui/icons/FastForward'; +import FastRewindIcon from '@material-ui/icons/FastRewind'; +import { useHistory } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import Map from '../map/core/Map'; +import ReplayPathMap from '../map/ReplayPathMap'; +import PositionsMap from '../map/PositionsMap'; +import { formatTime } from '../common/util/formatter'; +import ReportFilter from '../reports/components/ReportFilter'; +import { useTranslation } from '../common/components/LocalizationProvider'; + +const useStyles = makeStyles((theme) => ({ + root: { + height: '100%', + }, + sidebar: { + position: 'absolute', + left: 0, + top: 0, + margin: theme.spacing(1.5), + width: theme.dimensions.drawerWidthDesktop, + [theme.breakpoints.down('sm')]: { + width: '100%', + margin: 0, + }, + }, + formControlLabel: { + height: '100%', + width: '100%', + paddingRight: theme.spacing(1), + justifyContent: 'space-between', + alignItems: 'center', + }, + reportFilterContainer: { + flex: 1, + padding: theme.spacing(2), + [theme.breakpoints.down('sm')]: { + margin: theme.spacing(1), + }, + }, + sliderContainer: { + padding: theme.spacing(2), + }, +})); + +const TimeLabel = ({ children, open, value }) => ( + + {children} + +); + +const ReplayPage = () => { + const t = useTranslation(); + const classes = useStyles(); + const history = useHistory(); + const timerRef = useRef(); + + const [positions, setPositions] = useState([]); + const [index, setIndex] = useState(0); + const [selectedDeviceId, setSelectedDeviceId] = useState(); + const [playbackSpeed, setPlaybackSpeed] = useState(''); + const [expanded, setExpanded] = useState(true); + const [isPlaying, setIsPlaying] = useState(false); + + const deviceName = useSelector((state) => { + if (selectedDeviceId) { + const device = state.devices.items[selectedDeviceId]; + if (device) { + return device.name; + } + } + return null; + }); + + useEffect(() => { + if (isPlaying && positions.length > 0) { + timerRef.current = setInterval(() => { + setIndex((index) => index + 1); + }, 500); + } else { + clearInterval(timerRef.current); + } + + return () => clearInterval(timerRef.current); + }, [isPlaying, positions]); + + useEffect(() => { + if (index >= positions.length) { + clearInterval(timerRef.current); + } + }, [index, positions]); + + const handleSubmit = async (deviceId, from, to, _, headers) => { + setSelectedDeviceId(deviceId); + const query = new URLSearchParams({ deviceId, from, to }); + const response = await fetch(`/api/positions?${query.toString()}`, { headers }); + if (response.ok) { + setIndex(0); + setPositions(await response.json()); + setExpanded(false); + } + }; + + return ( +
+ + + {index < positions.length && } + +
+ + + + + + + history.push('/')}> + + + + + {t('reportReplay')} + + {!expanded && ( + + setExpanded(true)}> + + + + )} + + + + + + {!expanded ? ( + + + + {deviceName} + + + ({ value: index }))} + value={index} + onChange={(_, index) => setIndex(index)} + valueLabelDisplay="auto" + valueLabelFormat={(i) => (i < positions.length ? formatTime(positions[i]) : '')} + ValueLabelComponent={TimeLabel} + /> + + + {`${index}/${positions.length}`} + + setIndex((index) => index - 1)} disabled={isPlaying}> + + + + + setIsPlaying(!isPlaying)}> + {isPlaying ? : } + + + + setIndex((index) => index + 1)} disabled={isPlaying}> + + + + {formatTime(positions[index])} + + + + ) : ( + + + + setPlaybackSpeed(e.target.value)} + variant="filled" + /> + + + setIsPlaying(e.target.checked)} + color="primary" + edge="start" + /> + )} + label={t('reportAutoPlay')} + labelPlacement="start" + /> + + + + )} + + +
+
+ ); +}; + +export default ReplayPage; -- cgit v1.2.3