From 94e20e664a2f2594aa63aef82bddec71f6b102aa Mon Sep 17 00:00:00 2001 From: Johannes Schmidt Date: Wed, 22 May 2024 22:26:27 +0200 Subject: [PATCH 01/21] docs(readme): add release badge --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index ae9e557..b290b49 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +

+ + +

+ # Frontend of GPS-Tools based on React and Vite This is the frontend of [GPS-Tools Backend](https://github.com/devshred/gps-tools-backend) @@ -5,6 +10,11 @@ This is the frontend of [GPS-Tools Backend](https://github.com/devshred/gps-tool [GPS-Tools](https://gps-tools.pages.dev/) # How-to start locally +## start backend +```sh +docker run -p 7001:7001 devshred/gps-tools-backend +``` +## start frontend ```sh npm run dev ``` From cbe9c8a5e3c2f1df42044cdf20f49011fcba555e Mon Sep 17 00:00:00 2001 From: Johannes Schmidt Date: Wed, 22 May 2024 22:29:18 +0200 Subject: [PATCH 02/21] feat(layout): adjust flex-layout to optimize display of map --- src/App.tsx | 4 +- src/components/track/DownloadLink.tsx | 32 ++--- src/components/track/TrackHeader.tsx | 124 ++++++++++--------- src/components/track/VisualizeTrack.tsx | 156 ++++++++---------------- src/index.css | 5 - src/pages/TrackScreen.tsx | 57 +++++++-- 6 files changed, 186 insertions(+), 192 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4748b42..c517709 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,9 +11,9 @@ import Providers from './components/services/providers' const App = () => ( -
+
-
+
} /> diff --git a/src/components/track/DownloadLink.tsx b/src/components/track/DownloadLink.tsx index c1dc803..69d9ef3 100644 --- a/src/components/track/DownloadLink.tsx +++ b/src/components/track/DownloadLink.tsx @@ -22,21 +22,23 @@ const DownloadLink: React.FC = ({ const { getMessage } = useLanguage() const baseUrl = import.meta.env.VITE_BACKEND_BASE_URL return ( - 0 ? `&name=${encodeToBase64(trackname)}` : '') + - (geoJson != null ? `&wp=${encodeToBase64(JSON.stringify(geoJson))}` : '') - } - > - - {getMessage('download_as')} {type.toUpperCase()} - + ) } diff --git a/src/components/track/TrackHeader.tsx b/src/components/track/TrackHeader.tsx index 5738bd0..757d9a1 100644 --- a/src/components/track/TrackHeader.tsx +++ b/src/components/track/TrackHeader.tsx @@ -1,10 +1,9 @@ import DownloadLink from './DownloadLink' -import { FaCircleInfo, FaPenToSquare } from 'react-icons/fa6' +import { FaCircleInfo, FaEye, FaEyeSlash, FaPenToSquare } from 'react-icons/fa6' import ContentEditable, { ContentEditableEvent } from 'react-contenteditable' import React, { useMemo, useRef, useState } from 'react' import { WayPoint } from '../../@types/gps' import { generateGeoJson, sanitizeFilename } from '../../utils/tools' -import ResetButton from './ResetButton' import useLanguage from '../../hooks/useLanguage' type TrackHeaderProps = { @@ -12,6 +11,8 @@ type TrackHeaderProps = { markerPositions: WayPoint[] trackname: string setTrackname: React.Dispatch> + showPolyline: boolean + setShowPolyline: React.Dispatch> } const TrackHeader: React.FC = ({ @@ -19,6 +20,8 @@ const TrackHeader: React.FC = ({ markerPositions, trackname, setTrackname, + showPolyline, + setShowPolyline, }) => { const [optimizeWaypoints, setOptimizeWaypoints] = useState(false) const tracknameInputFieldRef: React.RefObject = useRef(null) @@ -41,68 +44,71 @@ const TrackHeader: React.FC = ({ } return ( - <> -
- -
-
- -
- -
-
- setOptimizeWaypoints(e.target.checked)} - value="" - className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" - /> - -   -
- -
-
+
+
+
Trackname
+
+ +   + { + tracknameInputFieldRef?.current?.focus() + }} + />
-
-
-
-
Trackname
-
- -   - { - tracknameInputFieldRef?.current?.focus() - }} - /> +
+ {showPolyline ? ( + setShowPolyline(false)} /> + ) : ( + setShowPolyline(true)} /> + )} +
+
+
+ + +
+
+ setOptimizeWaypoints(e.target.checked)} + value="" + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +   +
+
- +
) } diff --git a/src/components/track/VisualizeTrack.tsx b/src/components/track/VisualizeTrack.tsx index 7bedbba..def5333 100644 --- a/src/components/track/VisualizeTrack.tsx +++ b/src/components/track/VisualizeTrack.tsx @@ -1,4 +1,4 @@ -import React, { createRef, useCallback, useEffect, useState } from 'react' +import React, { createRef, useCallback } from 'react' import { LayersControl, MapContainer, Polyline, TileLayer, ZoomControl } from 'react-leaflet' import { LatLng, @@ -8,19 +8,18 @@ import { } from 'leaflet' import 'leaflet/dist/leaflet.css' import Control from 'react-leaflet-custom-control' -import { FaEye, FaEyeSlash } from 'react-icons/fa6' import { PoiType, WayPoint } from '../../@types/gps' import DraggableMarker from './DraggableMarker' import FitBoundsButton from './FitBoundsButton' import NewMarkerButton from './NewMarkerButton' import MarkerSearch from './MarkerSearch' -import useLanguage from '../../hooks/useLanguage' type VisualizeTrackProps = { bounds: LatLngBoundsExpression positions: LatLngExpression[] markerPositions: WayPoint[] setMarkerPositions: React.Dispatch> + showPolyline: boolean } const VisualizeTrack: React.FC = ({ @@ -28,10 +27,9 @@ const VisualizeTrack: React.FC = ({ positions, markerPositions, setMarkerPositions, + showPolyline, }) => { - const [showPolyline, setShowPolyline] = useState(true) const polylineRef = createRef() - const { getMessage } = useLanguage() const changeMarkerPosition = useCallback((markerId: string, newPosition: LatLng) => { setMarkerPositions((prevState) => @@ -76,106 +74,60 @@ const VisualizeTrack: React.FC = ({ setMarkerPositions((prevState) => prevState.filter((wp) => wp.id !== id)) }, []) - useEffect(() => { - const handleKeyPress = (event: KeyboardEvent) => { - if ( - document.activeElement?.id === 'editTrackname' || - document.activeElement?.id === 'markerSearchInput' - ) { - return null - } - if (event.key === 'm') { - setShowPolyline(false) - } - } - - const handleKeyUp = (event: KeyboardEvent) => { - if ( - document.activeElement?.id === 'editTrackname' || - document.activeElement?.id === 'markerSearchInput' - ) { - return null - } - if (event.key === 'm') { - setShowPolyline(true) - } - } - - document.addEventListener('keypress', handleKeyPress) - document.addEventListener('keyup', handleKeyUp) - - return () => { - document.removeEventListener('keypress', handleKeyPress) - document.removeEventListener('keyup', handleKeyPress) - } - }, []) - return ( - <> -
-
- {showPolyline ? ( - setShowPolyline(false)} /> - ) : ( - setShowPolyline(true)} /> - )} -
-
- - - - - - - - - - - - - - - - - - {showPolyline && ( - + + + + + + + + + + - )} - {markerPositions.map((waypoint) => ( - + + - ))} - - -
- - -
- - - + + + {showPolyline && ( + + )} + {markerPositions.map((waypoint) => ( + + ))} + + +
+ + +
+ + ) } diff --git a/src/index.css b/src/index.css index 56fecb0..0265fc9 100644 --- a/src/index.css +++ b/src/index.css @@ -14,11 +14,6 @@ } } -.leaflet-container { - height: 100vh; - width: 90vw; -} - #controlButton { display: flex; align-items: center; diff --git a/src/pages/TrackScreen.tsx b/src/pages/TrackScreen.tsx index 03bde38..835b7b0 100644 --- a/src/pages/TrackScreen.tsx +++ b/src/pages/TrackScreen.tsx @@ -20,6 +20,7 @@ const TrackScreen = () => { const [isLoading, setIsLoading] = useState(true) const [trackname, setTrackname] = useState('') + const [showPolyline, setShowPolyline] = useState(true) const [positions, setPositions] = useState([]) const [markerPositions, setMarkerPositions] = useState([]) const [bounds, setBounds] = useState([ @@ -27,6 +28,40 @@ const TrackScreen = () => { [0, 0], ]) + useEffect(() => { + const handleKeyPress = (event: KeyboardEvent) => { + if ( + document.activeElement?.id === 'editTrackname' || + document.activeElement?.id === 'markerSearchInput' + ) { + return null + } + if (event.key === 'm') { + setShowPolyline(false) + } + } + + const handleKeyUp = (event: KeyboardEvent) => { + if ( + document.activeElement?.id === 'editTrackname' || + document.activeElement?.id === 'markerSearchInput' + ) { + return null + } + if (event.key === 'm') { + setShowPolyline(true) + } + } + + document.addEventListener('keypress', handleKeyPress) + document.addEventListener('keyup', handleKeyUp) + + return () => { + document.removeEventListener('keypress', handleKeyPress) + document.removeEventListener('keyup', handleKeyPress) + } + }, []) + useEffect(() => { setIsLoading(true) const config = { @@ -100,24 +135,28 @@ const TrackScreen = () => { return ( <> -

GPS-Tools

{isLoading ? (

{getMessage('loading')}

) : positions.length > 0 && trackId !== undefined ? ( - <> +
- - +
+ +
+
) : ( <>

{getMessage('error_track_not_found')}

From 420536dc971ef57e949c4f94c7cc3ac298467314 Mon Sep 17 00:00:00 2001 From: Johannes Schmidt Date: Thu, 23 May 2024 07:37:55 +0200 Subject: [PATCH 03/21] fix(layout): don't use container and viewport --- src/components/layout/Navbar.tsx | 36 ++++++++++++++------------------ 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 5458a64..ed672ac 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -15,27 +15,23 @@ const Navbar: React.FC = ({ title = DEFAULT_TITLE }) => { const { getMessage } = useLanguage() return ( -