diff --git a/src/components/btns/import-route/ImportRoute.js b/src/components/btns/import-route/ImportRoute.js index 4827337..a4e46f5 100644 --- a/src/components/btns/import-route/ImportRoute.js +++ b/src/components/btns/import-route/ImportRoute.js @@ -50,6 +50,7 @@ export class ImportRoute extends Component { showPreviews={true} showPreviewsInDropzone={false} maxFileSize={5000000} + filesLimit={10} clearOnUnmount={true} onSave={(files) => this.handleSave(files)} onClose={this.handleClose.bind(this)} diff --git a/src/components/containers/importrouteform/ImportRouteForm.js b/src/components/containers/importrouteform/ImportRouteForm.js index 6bb408d..d4b2bd8 100644 --- a/src/components/containers/importrouteform/ImportRouteForm.js +++ b/src/components/containers/importrouteform/ImportRouteForm.js @@ -5,6 +5,8 @@ import { withStyles, Typography, Paper, Grid, Button } from '@material-ui/core'; import Route from '../../../entities/Route'; import TrackPoint from '../../../entities/TrackPoint'; import ImportRouteCard from '../../ui/ImportRouteCard'; +import { parseGpxToRoutes } from '../../../parser/ParserGpxToRoute'; +import ParserJsonLdToRoute from '../../../parser/ParserJsonLdToRoute'; export class ImportRouteForm extends Component { @@ -12,16 +14,76 @@ export class ImportRouteForm extends Component { super(props); // console.log(this.props.location.routes); this.state = { - // routes: this.props.location.routes, - routes: [new Route("San Silvestre", "Esto es una ruta de prueba", [new TrackPoint(43, 5, 10), new TrackPoint(47, 8, 10)], null, null, null, null, null), - new Route("Recorrido por Oviedo", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", [new TrackPoint(41, 5, 10), new TrackPoint(43, 8, 10)], null, null, null, null, null)] + files: this.props.location.routes, + routes: [] + // routes: [new Route("San Silvestre", "Esto es una ruta de prueba", [new TrackPoint(43, 5, 10), new TrackPoint(47, 8, 10)], null, null, null, null, null), + // new Route("Recorrido por Oviedo", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", [new TrackPoint(41, 5, 10), new TrackPoint(43, 8, 10)], null, null, null, null, null)] } + } + } + componentDidMount() { + if (!this.state.files) { + this.props.history.push('/404'); + return; } + this.handleFiles(); + } + + handleFiles() { + let re = /(?:\.([^.]+))?$/; + + this.state.files.forEach((file) => { + + const fileReader = new FileReader(); + + fileReader.onerror = () => alert("ERROR IMPORTING ROUTE"); + fileReader.onabort = () => alert("ABORT IMPORTING ROUTE"); + fileReader.onload = () => { + const content = fileReader.result; + try { + let ext = re.exec(file.name)[0]; + if (ext === '.gpx') { + this.handleGPX(content); + } else if (ext === '.jsonld' || ext === '.json') { + this.handleJSON(content); + } + } catch (error) { + alert(error); + } + }; + fileReader.readAsText(file); + }); + } + + handleGPX(file) { + let routesList = []; + parseGpxToRoutes(file, function (routeArray) { + routeArray.forEach((route) => { + routesList.push(route); + }); + }); + + routesList.forEach((r) => { + this.state.routes.push(r); + }); + + const { routes } = this.state; + this.setState({ routes: routes.slice() }); + } + + handleJSON(file) { + let parser = new ParserJsonLdToRoute(); + let route = parser.parse(file); + this.state.routes.push(route); + const { routes } = this.state; + this.setState({ routes: routes.slice() }); } render() { const { classes } = this.props; + const { files } = this.state; const { routes } = this.state; + return (
@@ -41,8 +103,10 @@ export class ImportRouteForm extends Component { Please, review your routes - {routes.map((each) => ( - + {routes.map((each, index) => ( +
+ +
))}
@@ -63,7 +127,7 @@ export class ImportRouteForm extends Component {
+
) } } @@ -97,7 +161,8 @@ const useStyles = (theme) => ({ textAlign: 'center' }, image: { - backgroundImage: `url(https://source.unsplash.com/collection/9992041/1600x900)`, + // backgroundImage: `url(https://source.unsplash.com/collection/9992041/1600x900)`,9847024 + backgroundImage: `url(https://source.unsplash.com/collection/9847024/1600x900)`, backgroundRepeat: 'no-repeat', backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900], diff --git a/src/components/map/DetailsMap.js b/src/components/map/DetailsMap.js index 1e45a2f..c5754df 100644 --- a/src/components/map/DetailsMap.js +++ b/src/components/map/DetailsMap.js @@ -27,7 +27,6 @@ export default class DetailsMap extends Component { key={point.getLatitude()+','+point.getLongitude()} position={[point.getLatitude(), point.getLongitude()]}> -

{point.getName()}

Latitude: {point.getLatitude()}

Longitude: {point.getLongitude()}

Elevation: {point.getElevation()}

diff --git a/src/components/ui/ImportRouteCard.js b/src/components/ui/ImportRouteCard.js index 357677a..c456e53 100644 --- a/src/components/ui/ImportRouteCard.js +++ b/src/components/ui/ImportRouteCard.js @@ -38,12 +38,20 @@ function ImportRouteCard(props) { - - Description: - - - {route.getDescription()} - + {(route.getDescription()) ? ( +
+ + Description: + + + {route.getDescription()} + +
+ ) : ( + + No description provided. + + )} diff --git a/src/components/ui/RouteDetailsCard.js b/src/components/ui/RouteDetailsCard.js index a9fcb6b..3b54e2f 100644 --- a/src/components/ui/RouteDetailsCard.js +++ b/src/components/ui/RouteDetailsCard.js @@ -20,7 +20,7 @@ import svgIconArrows from '../../assets/img/logo/arrows.svg'; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, - marginTop: theme.spacing(1), + marginTop: theme.spacing(-6), // marginLeft: theme.spacing(10), // marginRight: theme.spacing(10), }, @@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({ marginRight: theme.spacing(1), }, carouselTitle: { - marginTop: theme.spacing(15), + marginTop: theme.spacing(17), }, carousel: { height: '23rem', @@ -112,6 +112,7 @@ export default function RouteDetailsCard(props) { + - + {name} @@ -194,7 +195,7 @@ export default function RouteDetailsCard(props) { Date - + {date} @@ -203,7 +204,7 @@ export default function RouteDetailsCard(props) { Distance - + {distance} @@ -214,7 +215,7 @@ export default function RouteDetailsCard(props) { Description - + {description} diff --git a/src/parser/ParserGpxToRoute.js b/src/parser/ParserGpxToRoute.js index d87371b..0d0961b 100644 --- a/src/parser/ParserGpxToRoute.js +++ b/src/parser/ParserGpxToRoute.js @@ -6,9 +6,9 @@ export function parseGpxToRoutes(gpxString, callback) { parseGpx(gpxString, ((error, gpxData) => { var routes = []; - var routeWaypoints = []; + // var routeWaypoints = []; - var waypoints = gpxData.waypoints; + // var waypoints = gpxData.waypoints; var tracks = gpxData.tracks; tracks.forEach(track => { diff --git a/src/parser/ParserJsonLdToRoute.js b/src/parser/ParserJsonLdToRoute.js index df9ac7e..bd2e227 100644 --- a/src/parser/ParserJsonLdToRoute.js +++ b/src/parser/ParserJsonLdToRoute.js @@ -3,7 +3,8 @@ import TrackPoint from '../entities/TrackPoint.js'; class ParserJsonLdToRoute { - parse(file){ + parse(file){ + var route = JSON.parse( file ); var name = route.name;