[WEB] PR #101 dropdown

src/website/package.json

@@ -8,9 +8,10 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.12",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.12",
     "@react-google-maps/api": "^2.19.2",
     "@reduxjs/toolkit": "^1.9.5",
     "dotenv": "^16.3.1",

src/website/pages/Polaris/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import PolarisContainer from '@/views/PolarisContainer';
+
+export default function DataSets() {
+  return <PolarisContainer />;
+}

src/website/pages/index.tsx

@@ -1,5 +1,6 @@
 import dynamic from 'next/dynamic';
 import { CircularProgress } from '@mui/material';
+import DashboardContainer from '@/views/DashboardContainer';
 import Header from '@/views/components/Header/Header';
 import styles from './style.module.css';
 
@@ -21,10 +22,6 @@ const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
   ssr: false,
 });
 
-const DashboardContainer = dynamic(() => import('@/views/DashboardContainer'), {
-  ssr: false,
-});
-
 export default function Home() {
   return (
     <>

src/website/views/DashboardContainer.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import UPlotLineChartComponent from './components/LineChart/UPlotLineChart';
-import { GPSState } from '@/stores/GPS/GPSTypes';
-import { BatteriesState } from '@/stores/Batteries/BatteriesTypes';
-import { WindSensorsState } from '@/stores/WindSensors/WindSensorsTypes';
+import { GPS } from '@/stores/GPS/GPSTypes';
+import { Batteries } from '@/stores/Batteries/BatteriesTypes';
+import { WindSensors } from '@/stores/WindSensors/WindSensorsTypes';
 import UPlotMultiLineChartComponent from './components/LineChart/UPlotMultiLineChart';
-import SingleValueChart from './components/SingleValueChart/SingleValueChart';
-import { Grid } from '@mui/material';
 
 export interface DashboardContainerProps {
-  gps: GPSState;
-  batteries: BatteriesState;
-  windSensors: WindSensorsState;
+  gps: GPS[];
+  batteries: Batteries[];
+  windSensors: WindSensors[];
 }
 
 class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
@@ -23,11 +21,6 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
       gps.data.map((data) => data.speed),
     ];
 
-    const gpsDistanceData = [
-      gps.data.map((data) => data.latitude),
-      gps.data.map((data) => data.longitude)
-    ];
-
     const batteriesVoltageData = [
       batteries.data.map((data) => this._parseISOString(data.timestamp)),
       batteries.data.map((data) => data.batteries[0].voltage),
@@ -46,29 +39,8 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
       windSensors.data.map((data) => data.windSensors[1].speed),
     ];
 
-    const totalTripDistance = this._computeTotalTripDistance(gpsDistanceData[0], gpsDistanceData[1])
-
     return (
       <div>
-        {/* <Grid
-          container spacing={0}
-          direction={"row"}
-          justifyContent={"center"}
-          alignItems={"center"}
-          >
-          <Grid container justifyContent="center" item xs={3}>
-            <SingleValueChart title="Distance" data={totalTripDistance} unit="km" />
-          </Grid>
-          <Grid container justifyContent="center" item xs={3}>
-            <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(2)} unit="°"/>
-          </Grid>
-          <Grid container justifyContent="center" item xs={3}>
-            <SingleValueChart title="Longitude" data={this.props.gps.data.at(-1)?.longitude.toFixed(2)} unit="°"/>
-          </Grid>
-        </Grid> */}
         <UPlotLineChartComponent
           data={gpsChartData}
           label='Boat Speed'
@@ -99,44 +71,6 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
   _parseISOString(s: string) {
     return Math.floor(Date.parse(s) / 1000); // Converts to seconds
   }
-
-  _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) => ({

src/website/views/MapsContainer.tsx

@@ -5,9 +5,6 @@ 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'
-import BoatCompass from './components/BoatCompass/BoatCompass';
 
 export interface MapsContainerProps {
   gps: GPSState;
@@ -18,77 +15,22 @@ export interface MapsContainerProps {
 
 class MapsContainer extends React.PureComponent<MapsContainerProps> {
   render() {
-    const { gps } = 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 (
-      <div className={styles.parent}>
-        <div className={styles.topRight}>
-          <SingleValueLine title="Distance" data={totalTripDistance} unit="km" />
-        </div>
-        <div className={styles.bottomRight}>
-          <BoatCompass angle={this.props.gps.data.at(-1)?.heading} />
-        </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>
+      <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),
+        )}
+      />
     );
   }
-
-  _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) => ({

src/website/views/PolarisContainer.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import CustomAccordion from './components/DropDown/DropDown';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
+
+const Container = styled('div')(({ theme }) => ({
+  flexGrow: 1,
+  padding: theme.spacing(2),
+  backgroundColor: '#ecf0f1',
+}));
+
+const TopHeader = styled('div')(({ theme }) => ({
+  backgroundColor: '#2c3e50',
+  color: 'white',
+  padding: theme.spacing(13),
+  display: 'flex',
+  justifyContent: 'flex-start',
+}));
+
+const Title = styled('span')(({ theme }) => ({
+  marginLeft: '700px',
+  fontWeight: 'bold',
+  fontSize: '3.5em',
+}));
+
+const DataSetHeader = styled('div')(({ theme }) => ({
+    marginTop: theme.spacing(2.5),
+    marginBottom: theme.spacing(0),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '2em',
+    fontWeight: 'bold',
+    color: 'white',
+    backgroundColor: '#2c3e50',
+    width: '100%',
+    padding: `${theme.spacing(50)}px 0`,
+  }));
+
+class PolarisContainer extends React.Component {
+    render() {
+        const voyageInfo = {
+            image: "./Polaris.png",
+            header: "Polaris",
+            desc: "Long description here...",
+        };
+
+        return (
+            <Container>
+                <Grid container spacing={3} justifyContent="center"> {/* Center the grid items */}
+                    <Grid item xs={12}>
+                        <TopHeader>
+                            <Title>{voyageInfo.header}</Title>
+                        </TopHeader>
+                    </Grid>
+
+                    <Grid item xs={12} style={{ transform: 'translate(400px, -200px)' }}>
+                        <img
+                            src={voyageInfo.image}
+                            alt={voyageInfo.header}
+                            style={{
+                                width: '22.5%',
+                                objectFit: 'cover'
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={12}>
+                        <p style={{ textAlign: 'center' }}>{voyageInfo.desc}</p>
+                    </Grid>
+                    <Grid item xs={7} style={{ padding: '0px', margin: '0px' }}>
+                        <DataSetHeader>Downloadable Data Sets</DataSetHeader>
+                    </Grid>
+                    <Grid item xs={7} style={{ padding: '0px', margin: '0px' }}>
+                        <CustomAccordion title="Download Data Set 1" style={{ marginBottom: '0px', marginTop: '0px' }}>
+                            Insert Data sets here
+                        </CustomAccordion>
+                    </Grid>
+                    <Grid item xs={7} style={{ padding: '0px', margin: '0px' }}>
+                        <CustomAccordion title="Download Data Set 2" style={{ marginBottom: '0px', marginTop: '0px' }}>
+                            Insert Data sets here
+                        </CustomAccordion>
+                    </Grid>
+                    <Grid item xs={7} style={{ padding: '0px', margin: '0px' }}>
+                        <CustomAccordion title="Download Data Set 3" style={{ marginBottom: '0px', marginTop: '0px' }}>
+                            Insert Data sets here
+                        </CustomAccordion>
+                    </Grid>
+                    <Grid item xs={7} style={{ padding: '0px', margin: '0px' }}>
+                        <CustomAccordion title="Download Data Set 4" style={{ marginBottom: '0px', marginTop: '0px' }}>
+                            Insert Data sets here
+                        </CustomAccordion>
+                    </Grid>
+                </Grid>
+            </Container>
+        );
+    }
+}
+
+export default connect()(PolarisContainer);