- {/*
-
-
-
-
-
-
-
-
- */}
{
_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) => ({
diff --git a/src/website/views/MapsContainer.tsx b/src/website/views/MapsContainer.tsx
index d1d88006b..9cfb561de 100644
--- a/src/website/views/MapsContainer.tsx
+++ b/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 {
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 (
-
+ 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) => ({
diff --git a/src/website/views/PolarisContainer.tsx b/src/website/views/PolarisContainer.tsx
new file mode 100644
index 000000000..3ebd0e3c3
--- /dev/null
+++ b/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 (
+
+ {/* Center the grid items */}
+
+
+ {voyageInfo.header}
+
+
+
+
+ 
+
+
+
+
+
+ Downloadable Data Sets
+
+
+
+ Insert Data sets here
+
+
+
+
+ Insert Data sets here
+
+
+
+
+ Insert Data sets here
+
+
+
+
+ Insert Data sets here
+
+
+
+
+ );
+ }
+}
+
+export default connect()(PolarisContainer);
diff --git a/src/website/views/components/BoatCompass/BoatCompass.tsx b/src/website/views/components/BoatCompass/BoatCompass.tsx
deleted file mode 100644
index 0c864681a..000000000
--- a/src/website/views/components/BoatCompass/BoatCompass.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import { Grid, Paper, Typography } from "@mui/material";
-import SingleValueLine from "../SingleValueLine/SingleValueLine";
-import styles from "./boatcompass.module.css"
-
-interface BoatCompassProps {
- angle: number;
-}
-
-class BoatCompass extends React.Component {
- render() {
- const { angle } = this.props;
-
- return (
-
-
-
- {`${this._rotateBoat(angle).toFixed()}°`}
-
-
-
- );
- }
-
- _rotateBoat(boatAngle: number) {
- return (boatAngle < 0) ? boatAngle + 360 : boatAngle;
- }
-
- _rotateBoatString(boatAngle: number) {
- return `rotate(${this._rotateBoat(boatAngle)}deg)`;
- }
-}
-
-export default BoatCompass;
diff --git a/src/website/views/components/BoatCompass/boatcompass.module.css b/src/website/views/components/BoatCompass/boatcompass.module.css
deleted file mode 100644
index 2aaa86b21..000000000
--- a/src/website/views/components/BoatCompass/boatcompass.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.bottom {
- position: absolute;
-}
-
-.middle {
- position: absolute;
- z-index: 1;
-}
-
-.top {
- position: relative;
- z-index: 1000000000;
-}
diff --git a/src/website/views/components/DropDown/DropDown.tsx b/src/website/views/components/DropDown/DropDown.tsx
new file mode 100644
index 000000000..3fc240419
--- /dev/null
+++ b/src/website/views/components/DropDown/DropDown.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+function CustomAccordion({ title, children }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export default CustomAccordion;
diff --git a/src/website/views/components/LineChart/UPlotLineChart.tsx b/src/website/views/components/LineChart/UPlotLineChart.tsx
index 7364d0552..9cd60f5db 100644
--- a/src/website/views/components/LineChart/UPlotLineChart.tsx
+++ b/src/website/views/components/LineChart/UPlotLineChart.tsx
@@ -14,9 +14,6 @@ export interface IUPlotLineChartState {
options: uPlot.Options;
}
-const fmtDate = uPlot.fmtDate("{YYYY}-{MM}-{DD} {h}:{mm}:{ss}{aa}");
-const localTz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
-const tzDate = ts => uPlot.tzDate(new Date(ts * 1e3), localTz);
export default class UPlotLineChartComponent extends React.Component<
IUPlotLineChartProps,
IUPlotLineChartState
@@ -27,36 +24,21 @@ export default class UPlotLineChartComponent extends React.Component<
width: 0,
height: 250,
scales: {
- x: {},
+ x: {
+ time: true,
+ },
y: {},
},
axes: [{}],
series: [
- {
- show: true,
- spanGaps: false,
- label: "Time",
- value: (self, rawValue, xValuesIndex, currentVal) => {
- if (currentVal == null) {
- let xValues = self.data[xValuesIndex];
- let xValue = fmtDate(tzDate(xValues[xValues.length - 1]));
- return `${xValue}`;
- }
- return fmtDate(tzDate(rawValue));
- },
- stroke: 'red',
- width: 1,
- band: true,
- },
+ {},
{
show: true,
spanGaps: false,
label: this.props.label,
- value: (self, rawValue, yValuesIndex, currentVal) => {
- if (currentVal == null) {
- let yValues = self.data[yValuesIndex];
- let yValue = (yValues[yValues.length - 1])?.toFixed(2);
- return `${yValue} ${this.props.unit}`;
+ value: (self, rawValue) => {
+ if (!rawValue) {
+ return `-- ${this.props.unit}`;
}
return rawValue?.toFixed(2) + ` ${this.props.unit}`;
},
diff --git a/src/website/views/components/LineChart/UPlotMultiLineChart.tsx b/src/website/views/components/LineChart/UPlotMultiLineChart.tsx
index f666147d4..37140595f 100644
--- a/src/website/views/components/LineChart/UPlotMultiLineChart.tsx
+++ b/src/website/views/components/LineChart/UPlotMultiLineChart.tsx
@@ -15,9 +15,6 @@ export interface IUPlotMultiLineChartState {
options: uPlot.Options;
}
-const fmtDate = uPlot.fmtDate("{YYYY}-{MM}-{DD} {h}:{mm}:{ss}{aa}");
-const localTz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
-const tzDate = ts => uPlot.tzDate(new Date(ts * 1e3), localTz);
export default class UPlotMultiLineChartComponent extends React.Component<
IUPlotMultiLineChartProps,
IUPlotMultiLineChartState
@@ -28,36 +25,21 @@ export default class UPlotMultiLineChartComponent extends React.Component<
width: 0,
height: 250,
scales: {
- x: {},
+ x: {
+ time: true,
+ },
y: {},
},
axes: [{}],
series: [
- {
- show: true,
- spanGaps: false,
- label: "Time",
- value: (self, rawValue, xValuesIndex, currentVal) => {
- if (currentVal == null) {
- let xValues = self.data[xValuesIndex];
- let xValue = fmtDate(tzDate(xValues[xValues.length - 1]));
- return `${xValue}`;
- }
- return fmtDate(tzDate(rawValue));
- },
- stroke: 'red',
- width: 1,
- band: true,
- },
+ {},
{
show: true,
spanGaps: false,
label: this.props.labelOne,
- value: (self, rawValue, yValuesIndex, currentVal) => {
- if (currentVal == null) {
- let yValues = self.data[yValuesIndex]
- let yValue = (yValues[yValues.length - 1])?.toFixed(2)
- return `${yValue} ${this.props.unit}`
+ value: (self, rawValue) => {
+ if (!rawValue) {
+ return `-- ${this.props.unit}`;
}
return rawValue?.toFixed(2) + ` ${this.props.unit}`;
},
@@ -69,11 +51,9 @@ export default class UPlotMultiLineChartComponent extends React.Component<
show: true,
spanGaps: false,
label: this.props.labelTwo,
- value: (self, rawValue, yValuesIndex, currentVal) => {
- if (currentVal == null) {
- let yValues = self.data[yValuesIndex]
- let yValue = (yValues[yValues.length - 1])?.toFixed(2)
- return `${yValue} ${this.props.unit}`
+ value: (self, rawValue) => {
+ if (!rawValue) {
+ return `-- ${this.props.unit}`;
}
return rawValue?.toFixed(2) + ` ${this.props.unit}`;
},
diff --git a/src/website/views/components/SingleValueChart/SingleValueChart.tsx b/src/website/views/components/SingleValueChart/SingleValueChart.tsx
deleted file mode 100644
index 83f1803b5..000000000
--- a/src/website/views/components/SingleValueChart/SingleValueChart.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-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 {
- title: string;
- data: number | string | undefined;
- unit: string;
-}
-
-class SingleValueChart extends React.Component {
- render() {
- const { title, data, unit } = this.props;
-
- return (
-
-
-
- {`${title}`}
-
-
- {(data) ? `${data} ${unit}` : `-- ${unit}`}
-
-
-
- );
- }
-}
-
-export default SingleValueChart;
diff --git a/src/website/views/components/SingleValueChart/singlevaluechart.module.css b/src/website/views/components/SingleValueChart/singlevaluechart.module.css
deleted file mode 100644
index a88cd0719..000000000
--- a/src/website/views/components/SingleValueChart/singlevaluechart.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.card{
- display: block;
- width: 15vw;
- height: 13vh;
-}
diff --git a/src/website/views/components/SingleValueLine/SingleValueLine.tsx b/src/website/views/components/SingleValueLine/SingleValueLine.tsx
deleted file mode 100644
index 85c825c5b..000000000
--- a/src/website/views/components/SingleValueLine/SingleValueLine.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Grid, Paper, Typography } from '@mui/material';
-
-
-interface SingleValueLineProps {
- title: string;
- data: number | string | undefined;
- unit: string;
-}
-
-class SingleValueLine extends React.Component {
- render() {
- const { title, data, unit } = this.props;
-
- return (
-
-
-
-
- {(data) ? `${title}: ${data} ${unit}` : `-- ${unit}`}
-
-
-
-
- );
- }
-}
-
-export default SingleValueLine;
diff --git a/src/website/views/components/SingleValueLine/singlevalueline.module.css b/src/website/views/components/SingleValueLine/singlevalueline.module.css
deleted file mode 100644
index 99b7ad42c..000000000
--- a/src/website/views/components/SingleValueLine/singlevalueline.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.parent {
- position: relative;
-}
-
-.topRight {
- position: absolute;
- z-index: 10000000000;
- top: 0.6vh;
- right: 0.3vw;
-}
-
-.bottomRight {
- position: absolute;
- z-index: 10000000000;
- bottom: 3.1vh;
- right: 0.5vw;
-}
diff --git a/src/website/views/components/VoyagePageTemplate/VoyagePageTemplate.tsx b/src/website/views/components/VoyagePageTemplate/VoyagePageTemplate.tsx
new file mode 100644
index 000000000..d3ad68bba
--- /dev/null
+++ b/src/website/views/components/VoyagePageTemplate/VoyagePageTemplate.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+function VoyagePageTemplate({ image, header, desc }) {
+ const containerStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ backgroundColor: '#3498db',
+ color: 'white',
+ fontFamily: 'Verdana, Geneva, sans-serif',
+ width: '100%',
+ height: '100%',
+ boxSizing: 'border-box',
+ position: 'relative',
+ };
+
+ const headerStyle = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '20px',
+ width: 'auto',
+ backgroundColor: '#2c3e50',
+ minHeight: '300px',
+ position: 'relative'
+ };
+
+ const imageStyle = {
+ width: '40%',
+ height: '200%',
+ position: 'absolute',
+ top: '20%',
+ left: '25%',
+ transform: 'translateX(-50%)',
+ };
+
+ const headerTextStyle = {
+ fontSize: '2.5em',
+ fontWeight: 'bold',
+ margin: 1,
+ zIndex: 1,
+ position: 'relative',
+ right: '-10%'
+ };
+
+ const descBoxStyle = {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '20px',
+ backgroundColor: '#ecf0f1',
+ color: '#2c3e50',
+ fontSize: '1em',
+ width: '65%',
+ boxSizing: 'border-box',
+ marginTop: '20px',
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ };
+
+ const descStyle = {
+ textAlign: 'center',
+ width: '100%',
+ fontSize: '0.9em',
+ wordBreak: 'break-word',
+ };
+ return (
+
+
-
- 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),
- )}
- />
-
+
-
-
-
- {voyageInfo.desc}
+
+
+ );
+}
+
+export default VoyagePageTemplate;
+ 
+
+
+ {header}
+
+
+ {desc}
+