Skip to content

Commit

Permalink
Parsing multiple gpx or json files
Browse files Browse the repository at this point in the history
  • Loading branch information
@PabloCanalSuarez
PabloCanalSuarez committed Apr 24, 2020
1 parent 9a1ef3a commit dcd4f83
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 23 deletions.
1 change: 1 addition & 0 deletions src/components/btns/import-route/ImportRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
79 changes: 72 additions & 7 deletions src/components/containers/importrouteform/ImportRouteForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,85 @@ 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 {

constructor(props) {
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 (
<div>
<NavBar />
Expand All @@ -41,8 +103,10 @@ export class ImportRouteForm extends Component {
Please, review your routes
</Typography>

{routes.map((each) => (
<ImportRouteCard route={each} />
{routes.map((each, index) => (
<div key={index}>
<ImportRouteCard route={each} />
</div>
))}

<div className={classes.btnArea} >
Expand All @@ -63,7 +127,7 @@ export class ImportRouteForm extends Component {
<Footer />
</Grid>
</Grid>
</div>
</div >
)
}
}
Expand Down Expand Up @@ -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],
Expand Down
1 change: 0 additions & 1 deletion src/components/map/DetailsMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export default class DetailsMap extends Component {
key={point.getLatitude()+','+point.getLongitude()}
position={[point.getLatitude(), point.getLongitude()]}>
<Popup>
<p>{point.getName()}</p>
<p>Latitude: {point.getLatitude()}</p>
<p>Longitude: {point.getLongitude()}</p>
<p>Elevation: {point.getElevation()}</p>
Expand Down
20 changes: 14 additions & 6 deletions src/components/ui/ImportRouteCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,20 @@ function ImportRouteCard(props) {
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent >
<Box fontSize="h6.fontSize" fontWeight="fontWeightBold">
Description:
</Box>
<Box display="block" fontWeight="fontWeightRegular">
{route.getDescription()}
</Box>
{(route.getDescription()) ? (
<div>
<Box fontSize="h6.fontSize" fontWeight="fontWeightBold">
Description:
</Box>
<Box fontWeight="fontWeightRegular">
{route.getDescription()}
</Box>
</div>
) : (
<Box fontWeight="fontWeightRegular">
No description provided.
</Box>
)}
</CardContent>
</Collapse>
</div>
Expand Down
13 changes: 7 additions & 6 deletions src/components/ui/RouteDetailsCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
},
Expand Down Expand Up @@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
marginRight: theme.spacing(1),
},
carouselTitle: {
marginTop: theme.spacing(15),
marginTop: theme.spacing(17),
},
carousel: {
height: '23rem',
Expand Down Expand Up @@ -112,6 +112,7 @@ export default function RouteDetailsCard(props) {
<ArrowBackIcon />
</Fab>
</Tooltip>

<Grid
container
className={classes.root}
Expand All @@ -122,7 +123,7 @@ export default function RouteDetailsCard(props) {

{/* ##### ROUTE NAME ##### */}
<Grid item className={classes.title}>
<Box fontStyle="italic" fontSize="h4.fontSize" fontWeight="fontWeightBold">
<Box fontStyle="italic" fontSize="h3.fontSize" fontWeight="fontWeightBold">
{name}
</Box>
<Typography color="textSecondary" variant="h6">
Expand Down Expand Up @@ -194,7 +195,7 @@ export default function RouteDetailsCard(props) {
<Box fontSize="h6.fontSize" fontWeight="fontWeightBold">
Date
</Box>
<Box fontSize="fontSize" fontWeight="fontWeightMedium">
<Box fontSize="fontSize" fontWeight="fontWeightRegular">
{date}
</Box>
</Grid>
Expand All @@ -203,7 +204,7 @@ export default function RouteDetailsCard(props) {
<Box fontSize="h6.fontSize" fontWeight="fontWeightBold">
Distance
</Box>
<Box fontSize="fontSize" fontWeight="fontWeightMedium">
<Box fontSize="fontSize" fontWeight="fontWeightRegular">
{distance}
</Box>
</Grid>
Expand All @@ -214,7 +215,7 @@ export default function RouteDetailsCard(props) {
<Box fontSize="h6.fontSize" fontWeight="fontWeightBold">
Description
</Box>
<Box fontSize="fontSize" fontWeight="fontWeightMedium">
<Box fontSize="fontSize" fontWeight="fontWeightRegular">
{description}
</Box>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions src/parser/ParserGpxToRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
3 changes: 2 additions & 1 deletion src/parser/ParserJsonLdToRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit dcd4f83

Please sign in to comment.