Course creation improvements

OlliV · Oct 29, 2023 · 0abaec1 · 0abaec1
1 parent caa0df5
commit 0abaec1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/components/CreateCourse.tsx b/components/CreateCourse.tsx
@@ -1,12 +1,13 @@
 import { useState, useRef } from 'react';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import InputLabel from '@mui/material/InputLabel';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
 
 export default function CreateCourseDialog({ newCourse }: { newCourse: (name: string, file: File) => void }) {
 	const uploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -30,12 +31,23 @@ export default function CreateCourseDialog({ newCourse }: { newCourse: (name: st
 			<Dialog open={open} onClose={handleCancel}>
 				<DialogTitle>New Course</DialogTitle>
 				<DialogContent>
-					<DialogContentText>To create a new course, please complete this form.</DialogContentText>
-					<TextField autoFocus margin="dense" id="name" label="Course Name" fullWidth variant="standard" />
-					<InputLabel htmlFor="import-file" hidden>
-						<input ref={uploadInputRef} id="import-file" name="import-file" type="file" />
-						GPX
-					</InputLabel>
+					<DialogContentText sx={{ width: '25em' }}>
+						Course name can be read from the imported file by leaving the name field blank.
+					</DialogContentText>
+					<Stack spacing={3}>
+						<TextField
+							autoFocus
+							margin="dense"
+							id="name"
+							label="Course Name"
+							fullWidth
+							variant="standard"
+						/>
+						<InputLabel htmlFor="import-file" hidden>
+							<input ref={uploadInputRef} id="import-file" name="import-file" type="file" />
+							GPX
+						</InputLabel>
+					</Stack>
 				</DialogContent>
 				<DialogActions>
 					<Button color="secondary" onClick={handleCancel}>

diff --git a/pages/ride/map/index.tsx b/pages/ride/map/index.tsx
@@ -40,6 +40,8 @@ const DynamicMapEditCourse = dynamic<MapEditCourseArg>(() => import('../../../co
 	ssr: false,
 });
 
+const DEFAULT_COURSE_NAME = 'Untitled';
+
 function MyLocationButton({ map, setPosition }) {
 	const getMyLocation = () => {
 		if (navigator.geolocation) {
@@ -67,7 +69,7 @@ export default function RideMap() {
 	const [editMode, setEditMode] = useState(false);
 	const [coord, setCoord] = useState<[number, number]>([51.505, -0.09]);
 	const [course, setCourse] = useState<CourseData | null>(null);
-	const [courseName, setCourseName] = useState<string>();
+	const [courseName, setCourseName] = useState<string>(DEFAULT_COURSE_NAME);
 	const bounds = useMemo(() => course && getMapBounds(course), [course]);
 	const mapSize = {
 		width: '70vw',
@@ -87,6 +89,7 @@ export default function RideMap() {
 		}
 	}, [map, bounds]);
 
+	const clearCourseName = () => setCourseName(DEFAULT_COURSE_NAME);
 	const importGpx = async (file: File) => {
 		let data: CourseData | null;
 
@@ -115,7 +118,7 @@ export default function RideMap() {
 			} else if (data && data.tracks.length && data.tracks[0].name) {
 				setCourseName(data.tracks[0].name);
 			} else {
-				setCourseName('Untitled');
+				clearCourseName();
 			}
 		})();
 	};
@@ -141,7 +144,10 @@ export default function RideMap() {
 							<Button
 								variant="contained"
 								color="secondary"
-								onClick={() => setCourse(null)}
+								onClick={() => {
+									setCourse(null);
+									clearCourseName();
+								}}
 								disabled={editMode}
 							>
 								Clear Map