diff options
author | Iván Ávalos <avalos@disroot.org> | 2022-06-16 14:02:13 -0500 |
---|---|---|
committer | Iván Ávalos <avalos@disroot.org> | 2022-06-16 14:02:13 -0500 |
commit | 0b212dd38fb362c9d433ad91840c3cfc5a50ade8 (patch) | |
tree | 15d0722d35ab7633da7fce23da97669ce6cafb9b | |
parent | a57390425913896128b2472ae95e1504c521422f (diff) | |
download | etbsa-traccar-web-0b212dd38fb362c9d433ad91840c3cfc5a50ade8.tar.gz etbsa-traccar-web-0b212dd38fb362c9d433ad91840c3cfc5a50ade8.tar.bz2 etbsa-traccar-web-0b212dd38fb362c9d433ad91840c3cfc5a50ade8.zip |
Removed TLS from proxy and added automatic playback on replay page
-rw-r--r-- | modern/src/reactHelper.js | 24 | ||||
-rw-r--r-- | modern/src/reports/ReplayPage.js | 29 | ||||
-rw-r--r-- | modern/src/setupProxy.js | 4 |
3 files changed, 50 insertions, 7 deletions
diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js index 7503360..0e80596 100644 --- a/modern/src/reactHelper.js +++ b/modern/src/reactHelper.js @@ -20,3 +20,27 @@ export const useEffectAsync = (effect, deps) => { }; }, deps); }; + +// Source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/ +export const useInterval = (callback, delay) => { + const ref = useRef(); + let id = null; + + // Remember the latest callback. + useEffect(() => { + ref.current = callback; + }, [callback]); + + // Set up the interval. + useEffect(() => { + function tick() { + ref.current(); + } + if (delay !== null) { + id = setInterval(tick, delay); + return () => clearInterval(id); + } + }, [delay]); + + return id; +} diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index fa94a06..b762e58 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box @@ -7,6 +7,8 @@ import { import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import SkipNextIcon from '@material-ui/icons/SkipNext'; import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import PauseIcon from '@material-ui/icons/Pause'; import MainToolbar from '../MainToolbar'; import Map from '../map/Map'; @@ -16,6 +18,7 @@ import { formatPosition, formatSpeed } from '../common/formatter'; import ReportFilter from './ReportFilter'; import { useTranslation } from '../LocalizationProvider'; import { useAttributePreference } from '../common/preferences'; +import { useInterval } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ root: { @@ -52,6 +55,7 @@ const ReplayPage = () => { const speedUnit = useAttributePreference('speedUnit'); + const [playback, setPlayback] = useState(false); const [expanded, setExpanded] = useState(true); const [positions, setPositions] = useState([]); const [index, setIndex] = useState(0); @@ -66,6 +70,13 @@ const ReplayPage = () => { } }; + useInterval(() => { + if (playback && index < positions.length - 1) { + console.log(`Index: ${index}`); + setIndex(index + 1); + } + }, 1000); + return ( <div className={classes.root}> <MainToolbar /> @@ -80,8 +91,8 @@ const ReplayPage = () => { <Paper className={classes.controlContent}> <Box maxWidth="sm" display="flex"> {/* Previous position button */} - <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}> - <SkipPreviousIcon /> + <IconButton color="primary" onClick={() => setPlayback(!playback)}> + { playback ? <PauseIcon /> : <PlayArrowIcon /> } </IconButton> <Box flexGrow={1} textAlign="center"> @@ -90,10 +101,18 @@ const ReplayPage = () => { {/* Speed */} {positions[index].speed != undefined && <> - <br/><Typography variant="secondary">{formatSpeed(positions[index].speed, speedUnit, t)}</Typography> + <br/> + <Typography variant="secondary"> + {formatSpeed(positions[index].speed, speedUnit, t)} + </Typography> </>} </Box> - {/* Speed */} + + {/* Previous position button */} + <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}> + <SkipPreviousIcon /> + </IconButton> + {/* Next position button*/} <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}> <SkipNextIcon /> diff --git a/modern/src/setupProxy.js b/modern/src/setupProxy.js index 96ffb95..d6b4158 100644 --- a/modern/src/setupProxy.js +++ b/modern/src/setupProxy.js @@ -4,9 +4,9 @@ const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (app) => { - const proxy = createProxyMiddleware('/api/socket', { target: `wss://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true, logLevel: 'debug' }); + const proxy = createProxyMiddleware('/api/socket', { target: `ws://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true, logLevel: 'debug' }); const server = app.listen(3000); server.on('upgrade', proxy.upgrade); - app.use('/api', createProxyMiddleware(`https://${process.env.REACT_APP_URL_NAME}/api`, { changeOrigin: true, headers: { "Connection": "keep-alive" }, logLevel: 'debug' })); + app.use('/api', createProxyMiddleware(`http://${process.env.REACT_APP_URL_NAME}/api`, { changeOrigin: true, headers: { "Connection": "keep-alive" }, logLevel: 'debug' })); }; |