added SingleValueLine

UBCSailbot · Feb 18, 2024 · 49db464 · 49db464
1 parent 2f0f31e
commit 49db464
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 32 deletions.
diff --git a/views/DashboardContainer.tsx b/views/DashboardContainer.tsx
@@ -63,10 +63,10 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
             <SingleValueChart title="Heading" data={this.props.gps.data.at(-1)?.heading} unit="°"/>
           </Grid>
           <Grid container justifyContent="center" item xs={3}>
-            <SingleValueChart title="Latitude" data={this.props.gps.data.at(-1)?.latitude.toFixed(4)} unit="°"/>
+            <SingleValueChart title="Latitude" data={this.props.gps.data.at(-1)?.latitude.toFixed(2)} unit="°"/>
           </Grid>
           <Grid container justifyContent="center" item xs={3}>
-            <SingleValueChart title="Longitude" data={this.props.gps.data.at(-1)?.longitude.toFixed(4)} unit="°"/>
+            <SingleValueChart title="Longitude" data={this.props.gps.data.at(-1)?.longitude.toFixed(2)} unit="°"/>
           </Grid>
         </Grid>
         <UPlotLineChartComponent
@@ -106,20 +106,20 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
       return angle * Math.PI / 180
     }
 
-    const earthRadius = 6571 // in km
+    const EARTH_RADIUS = 6571 // in km
 
-    var delta_lat = lat2-lat1
-    var delta_lat_rad = toRadians(delta_lat)
-    var delta_long = long2-long1
-    var delta_long_rad = toRadians(delta_long)
+    let delta_lat = lat2-lat1
+    let delta_lat_rad = toRadians(delta_lat)
+    let delta_long = long2-long1
+    let delta_long_rad = toRadians(delta_long)
 
-    var a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2))
+    let a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2))
     + (Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2))
     * Math.sin(delta_long_rad/2)
     * Math.sin(delta_long_rad/2))
-    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 
-    var distance = earthRadius * c;
+    let distance = EARTH_RADIUS * c;
 
     return distance
   }
@@ -129,7 +129,7 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
       return -1;
     }
 
-    var totalDistance = 0;
+    let totalDistance = 0;
 
     for(let i = 1; i < latitude.length; i++){
         totalDistance += this._haversineDistance(latitude[i-1], longitude[i-1], latitude[i], longitude[i]);

diff --git a/views/MapsContainer.tsx b/views/MapsContainer.tsx
@@ -5,6 +5,8 @@ import { GlobalPathState } from '@/stores/GlobalPath/GlobalPathTypes';
 import { AISShipsState } from '@/stores/AISShips/AISShipsTypes';
 import { WayPoint, LocalPathState } from '@/stores/LocalPath/LocalPathTypes';
 import Maps, { convertToLatLng } from './components/Maps/Maps';
+import SingleValueLine from './components/SingleValueLine/SingleValueLine';
+import styles from './components/SingleValueLine/singlevalueline.module.css'
 
 export interface MapsContainerProps {
   gps: GPSState;
@@ -15,22 +17,74 @@ export interface MapsContainerProps {
 
 class MapsContainer extends React.PureComponent<MapsContainerProps> {
   render() {
+    const { gps, batteries, windSensors } = this.props;
+
+    const gpsDistanceData = [
+      gps.data.map((data) => data.latitude),
+      gps.data.map((data) => data.longitude)
+    ];
+
+    const totalTripDistance = this._computeTotalTripDistance(gpsDistanceData[0], gpsDistanceData[1])
+
     return (
-      <Maps
-        gpsLocation={this.props.gps.data.at(-1)} 
-        gpsPath={this.props.gps.data.map((gpsPoint: GPS) =>
-          convertToLatLng(gpsPoint),
-        )}
-        globalPath={this.props.globalPath.data.waypoints.map(
-          (waypoint: WayPoint) => convertToLatLng(waypoint),
-        )}
-        aisShips={this.props.aisShips.data.ships}
-        localPath={this.props.localPath.data.waypoints.map(
-          (waypoint: WayPoint) => convertToLatLng(waypoint),
-        )}
-      />
+      <div className={styles.parent}>
+        <div className={styles.topRight}>
+          <SingleValueLine title="Distance" data={totalTripDistance} unit="km" />
+        </div>
+        <Maps
+          gpsLocation={this.props.gps.data.at(-1)}
+          gpsPath={this.props.gps.data.map((gpsPoint: GPS) =>
+            convertToLatLng(gpsPoint),
+          )}
+          globalPath={this.props.globalPath.data.waypoints.map(
+            (waypoint: WayPoint) => convertToLatLng(waypoint),
+          )}
+          aisShips={this.props.aisShips.data.ships}
+          localPath={this.props.localPath.data.waypoints.map(
+            (waypoint: WayPoint) => convertToLatLng(waypoint),
+          )}
+        />
+      </div>
     );
   }
+
+  _haversineDistance(lat1: number, long1: number, lat2: number, long2: number) {
+
+    function toRadians(angle: number): number{
+      return angle * Math.PI / 180
+    }
+
+    const EARTH_RADIUS = 6571 // in km
+
+    let delta_lat = lat2-lat1
+    let delta_lat_rad = toRadians(delta_lat)
+    let delta_long = long2-long1
+    let delta_long_rad = toRadians(delta_long)
+
+    let a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2))
+    + (Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2))
+    * Math.sin(delta_long_rad/2)
+    * Math.sin(delta_long_rad/2))
+    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+
+    let distance = EARTH_RADIUS * c;
+
+    return distance
+  }
+
+  _computeTotalTripDistance(latitude: number[], longitude: number[]) {
+    if(latitude.length != longitude.length){
+      return -1;
+    }
+
+    let totalDistance = 0;
+
+    for(let i = 1; i < latitude.length; i++){
+        totalDistance += this._haversineDistance(latitude[i-1], longitude[i-1], latitude[i], longitude[i]);
+    }
+
+    return Number(totalDistance.toFixed(2));
+  }
 }
 
 const mapStateToProps = (state: any) => ({

diff --git a/views/components/SingleValueChart/SingleValueChart.tsx b/views/components/SingleValueChart/SingleValueChart.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { CardHeader, Container, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import styles from './singlevaluechart.module.css'
 
 
 interface SingleValueChartProps {
@@ -14,14 +15,8 @@ class SingleValueChart extends React.Component<SingleValueChartProps> {
   render() {
     const { title, data, unit } = this.props;
 
-    var cardStyle = {
-      display: 'block',
-      width: '15vw',
-      height: '8vw'
-    }
-
     return (
-      <Card style={cardStyle} variant="outlined">
+      <Card className={styles.card} variant="outlined">
         <CardContent>
           <Typography align="center" variant="h6">
             {`${title}`}

diff --git a/views/components/SingleValueChart/singlevaluechart.module.css b/views/components/SingleValueChart/singlevaluechart.module.css
@@ -0,0 +1,5 @@
+.card{
+    display: block;
+      width: 15vw;
+      height: 8vw;
+}
diff --git a/views/components/SingleValueLine/SingleValueLine.tsx b/views/components/SingleValueLine/SingleValueLine.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import styles from './singlevalueline.module.css'
+
+
+interface SingleValueLineProps {
+  title: string;
+  data: number | string | undefined;
+  unit: string;
+}
+
+class SingleValueLine extends React.Component<SingleValueLineProps> {
+  render() {
+    const { title, data, unit } = this.props;
+
+    return (
+      <Card className={styles.card} variant="outlined">
+        <CardContent>
+          <Typography align="center" variant="subtitle2">
+            {(data) ? `${title}: ${data} ${unit}` : `-- ${unit}`}
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+}
+
+export default SingleValueLine;
diff --git a/views/components/SingleValueLine/singlevalueline.module.css b/views/components/SingleValueLine/singlevalueline.module.css
@@ -0,0 +1,17 @@
+.card{
+    display: block;
+      width: 11.9vw;
+      height: 4vw;
+}
+
+.parent {
+    position: relative;
+}
+
+.topRight {
+    position: absolute;
+    z-index: 10000000000;
+    top: 0vw;
+    right: 0vw;
+
+}