Base RouteDetails rework

Arquisoft · Apr 23, 2020 · c3fd960 · c3fd960
1 parent 5b35643
commit c3fd960
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 106 deletions.
diff --git a/src/App.css b/src/App.css
@@ -66,6 +66,11 @@
   height: 80vh;
 }
 
+#mapdetails {
+  width: 100%;
+  height: 100%;
+}
+
 .leaflet-container {
   width: 100%;
   height: 17vh;

diff --git a/src/components/elevation-chart/ElevationChart.js b/src/components/elevation-chart/ElevationChart.js
@@ -14,24 +14,24 @@ export class ElevationChart extends Component {
     init(points) {
         let index = 1;
         this.data = {
-            labels: points.map((p) => `Trackpoint ${index++}`),
+            labels: points.map((p) => `Point ${index++}`),
             datasets: [
                 {
                     label: 'Elevation',
                     fill: false,
                     lineTension: 0.1,
                     backgroundColor: 'rgba(75,192,192,0.4)',
-                    borderColor: 'rgba(75,192,192,1)',
+                    borderColor: '#44dba1',
                     borderCapStyle: 'butt',
                     borderDash: [],
                     borderDashOffset: 0.0,
                     borderJoinStyle: 'miter',
-                    pointBorderColor: 'rgba(75,192,192,1)',
-                    pointBackgroundColor: '#fff',
+                    pointBorderColor: '#302c58',
+                    pointBackgroundColor: '#302c58',
                     pointBorderWidth: 1,
                     pointHoverRadius: 5,
                     pointHoverBackgroundColor: 'rgba(75,192,192,1)',
-                    pointHoverBorderColor: 'rgba(220,220,220,1)',
+                    pointHoverBorderColor: '#302c58',
                     pointHoverBorderWidth: 2,
                     pointRadius: 1,
                     pointHitRadius: 15,
@@ -51,12 +51,11 @@ export class ElevationChart extends Component {
 
     render() {
         return (
-            <div style={this.props.style}>
-                <Line
-                    data={this.data}
-                    options={this.lineOptions}
-                />
-            </div>
+            <Line
+                data={this.data}
+                options={this.lineOptions}
+                height={100}
+            />
         );
     }
 }

diff --git a/src/components/map/DetailsMap.js b/src/components/map/DetailsMap.js
@@ -2,22 +2,27 @@ import React, { Component } from 'react';
 import { Map, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
 
 export default class DetailsMap extends Component {
-  points = this.props.route.getTrackPoints().map((point) => (
-    [point.getLatitude(), point.getLongitude()]
-  ));
 
-  setPopup = () => { }
+  constructor(props) {
+    super(props);
+    this.points = this.props.route.getTrackPoints().map((point) => (
+      [point.getLatitude(), point.getLongitude()]
+    ));
+
+    this.list = this.props.route.getTrackPoints();
+    this.markers = [this.list[0], this.list[this.list.length-1]];
+  }
 
   render() {
     return (
-      <Map id="map" bounds={this.points} zoom={16} height={5}>
+      <Map id="mapdetails" bounds={this.points} zoom={16} height={5}>
         <TileLayer
           attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <Polyline positions={this.points} color='blue' />
 
-        {this.props.route.getTrackPoints().map((point) => (
+        {this.markers.map((point) => (
           <Marker 
             key={point.getLatitude()+','+point.getLongitude()} 
             position={[point.getLatitude(), point.getLongitude()]}>

diff --git a/src/components/ui/MyRouteCard.js b/src/components/ui/MyRouteCard.js
@@ -47,18 +47,6 @@ export default function MyRouteCard(props) {
             </Link>
           </Grid>
 
-          {/* <Grid item xs={12} >
-            <Typography className={classes.pos} color="textSecondary">
-              12/3/2020
-            </Typography>
-          </Grid>
-
-          <Grid item xs={12} >
-            <Typography className={classes.pos} color="textSecondary">
-              {distance} m
-            </Typography>
-          </Grid> */}
-
           <Grid item>
             <Button variant='outlined'
               href={"#/RouteDetails/" + props.route.getId()}

diff --git a/src/components/ui/RouteDetailsCard.js b/src/components/ui/RouteDetailsCard.js
@@ -6,99 +6,82 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import DetailsMap from '../map/DetailsMap.js';
 import ElevationChart from '../elevation-chart/ElevationChart.js';
+import { Box } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
     root: {
         flexGrow: 1,
+        marginTop: theme.spacing(10),
+        // marginLeft: theme.spacing(10),
+        // marginRight: theme.spacing(10),
     },
+    map: {
+        height: '20rem',
+        maxWidth: '40rem',
+        marginTop: theme.spacing(3),
+        marginLeft: theme.spacing(10),
+    },
+    chart: {
+        // height: '15rem',
+        marginTop: theme.spacing(3),
+        marginLeft: theme.spacing(10),
+    },
+    title: {
+        marginLeft: theme.spacing(10),
+    }
 }));
 
 export default function RouteDetailsCard(props) {
     const classes = useStyles();
 
-    if(props.route === null) {
+    if (props.route === null) {
         return null;
     }
-
+    const { route } = props;
+
+    var name = route.getName();
+    var author = route.getAuthor() || "Author";
+
     return (
-        <Grid container className={classes.root} spacing={1}>
-            <Grid item xs={6}>
-                <Card elevation={5} className={classes.root}>
-                    <CardContent>
-                        <Typography variant="h5" component="h2">
-                            {props.route.getName()}
-                        </Typography>
+        <Grid
+            container
+            className={classes.root}
+            spacing={5}
+
+        >
+            <Grid item xs sm={6}>
+                <Grid item className={classes.title}>
+                    <Box fontStyle="italic" fontSize="h4.fontSize" fontWeight="fontWeightBold">
+                        {name}
+                    </Box>
+                    <Typography color="textSecondary" variant="h6">
+                        by {author}
+                    </Typography>
+                </Grid>
 
-                        <DetailsMap route={props.route}></DetailsMap>
-                    </CardContent>
-                </Card>
+                <Grid item >
+                    <Card elevation variant="outlined" className={classes.map}>
+                        <DetailsMap route={route} />
+                    </Card>
+                </Grid>
+
+                <Grid item className={classes.map} >
+                    {/* <Card elevation className={classes.map}> */}
+                        <ElevationChart trackpoints={route.getTrackPoints()} />
+                    {/* </Card> */}
+                </Grid>
             </Grid>
-            <Grid item xs={6}>
-                <Grid container direction="column" spacing={1} alignItems="stretch" justify="flex-start">
-                    <Grid item xs={12}>
-                        <Card elevation={5} className={classes.root}>
-                            <CardContent>
-                                <Typography className={classes.pos} >
-                                    {/* Date: {props.route.getDate()} */}
-                                    Date: 22/3/2020
-                                </Typography>
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Card elevation={5} className={classes.root}>
-                            <CardContent>
-                                <Typography className={classes.pos} >
-                                    {/* Distance: {props.route.getTotalDistance()} */}
-                                    Distance: 3.63km
-                                </Typography>
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Card elevation={5} className={classes.root}>
-                            <CardContent>
-                                <Typography className={classes.pos} >
-                                    {/* Time: {props.route.getTime()} */}
-                                    Time: 42 min
-                                </Typography>
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Card elevation={5} className={classes.root}>
-                            <CardContent>
-                                <Typography className={classes.pos} >
-                                    Description:
-                                </Typography>
-                                <Typography className={classes.pos} >
-                                    {props.route.getDescription()}
-                                </Typography>
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                    <ElevationChart trackpoints={props.route.getTrackPoints()} style={{ width: "100%" }} />
-                    {/* <Grid item xs={12}>
-                        <Card elevation={5} className={classes.root}>
-                            <CardContent>
-                                <Typography className={classes.pos} >
-                                    Coments:
-                                </Typography>
-                                {
-                                    Array.isArray(props.route.getComments()) && //is empty??
-                                    props.route.getComments().map((comment) =>
-                                        (
-                                            <Typography className={classes.pos} >
-                                                {comment}
-                                            </Typography>
-                                        )
-                                    )
-                                }
-                            </CardContent>
-                        </Card>
-                    </Grid> */}
+
+            <Grid item xs sm={4}>
+                <Grid item >
+                    <Card elevation variant="outlined" >
+                        <h1>CHECK</h1>
+                    </Card>
                 </Grid>
             </Grid>
+
+
+
         </Grid>
     );
 }
diff --git a/src/entities/Route.js b/src/entities/Route.js
@@ -15,7 +15,7 @@ class Route {
      * @param {Array<Object>} media List of objects of media
      * @param {Date} date Date of the route.
      */
-    constructor(name, description, trackPoints, comments, media, date, id) {
+    constructor(name, description, trackPoints, comments, media, date, id, author = null) {
         this.name = name;
         this.date = date;
         this.description = description;
@@ -31,6 +31,7 @@ class Route {
         this.setComments(comments);
 
         this.totalDistance = this.calculateDistance();
+        this.author = author;
     }
 
     setID(id) {
@@ -114,6 +115,10 @@ class Route {
         return this.totalDistance;
     }
 
+    getAuthor() {
+        return this.author;
+    }
+
     addMedia(media) {
         this.media.push(media);
     }