\" <<=== alternative method by the use of an image instead of a Unicode symbol.\r\n html:\r\n \"- \r\n
- \r\n \r\n
- \r\n
- \r\n
\r\n \r\n \r\n \r\n \r\n {sideList(\"left\")}\r\n
\r\n { \r\n \r\n \r\n {profileState.firstName} {profileState.lastName}
\r\n {profileState.company} \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nconst MenuList = props => {\r\n const [open, setOpen] = React.useState(false);\r\n\r\n const handleClick = () => {\r\n setOpen(!open);\r\n };\r\n const classes = useStyles();\r\n\r\n const subMenuItems = props.subMenus;\r\n// console.log(\"Sub Menu Items: \", subMenuItems, \"\\n Main Menu Items: \", props.mainMenuItem);\r\n if(subMenuItems){\r\n return (\r\n \r\n {
\r\n {profileState.company} \r\n
- \r\n
- \r\n {subMenuItems.map(subMenuItem => (\r\n \r\n
- \r\n \r\n
- \r\n {\r\n popupInfo.lines.map(line => {\r\n return (\r\n
- \r\n {\r\n popupInfo.lines.map(line => {\r\n\r\n let classNameValidation = \"\";\r\n if (line.validationID === 1)\r\n classNameValidation = \"statusGreen\"\r\n else if (line.validationID === 2)\r\n classNameValidation = \"statusRed\"\r\n\r\n\r\n return (\r\n
- \r\n {\r\n popupInfo.lines.map(line => {\r\n return (\r\n
- \r\n *
- trackId: The unique id of the symbol (default: 0). \r\n *
- size: Static size of the symbol in pixels (default:24). \r\n *
- heading: Initial heading of the symbol (default: undefined). \r\n *
- course: Initial course of the symbol (default: undefined). \r\n *
- speed: Initial speed of the symbol-leader (default: undefined). \r\n *
- leaderTime: The length of the leader (speed * leaderTime) (default:60s). \r\n *
- minSilouetteZoom: The zoomlevel to switch from triangle to silouette (default:14). \r\n *
- gpsRefPos: Initial GPS offset of the symbol (default: undefined). \r\n *
- defaultSymbol: The triangular track symbol. Contains an array of n numbers. [x1,y1,x2,y2,...] \r\n *
- noHeadingSymbol: The diamond track symbol. Contains an array of n numbers. [x1,y1,x2,y2,...] \r\n *
- silouetteSymbol: The ship track symbol. Contains an array of n numbers. [x1,y1,x2,y2,...] \r\n *
Lat: ${ev.latlng.lat.toFixed(4)} Lng: ${ev.latlng.lng.toFixed(4)}
`;\r\n // console.log(this.panelDiv.innerHTML);\r\n // });\r\n // props.leaflet.map.addEventListener(\"mousemove\", this.displayInfo);\r\n\r\n // const map = props.leaflet.map;\r\n\r\n // map.on(\"zoomend\", (ev) => {\r\n\r\n // var currZoom = map.getZoom();\r\n // console.log('zoomend', currZoom);\r\n // console.log('this.leafletElement', this.leafletElement)\r\n // });\r\n\r\n // const { vessel, vesselPosition } = props;\r\n\r\n // console.log('Vessel', vessel);\r\n // console.log('VesselPosition', vesselPosition);\r\n //}\r\n\r\n // displayInfo = (ev) => {\r\n // this.panelDiv.innerHTML = `Lat: ${ev.latlng.lat.toFixed(4)} Lng: ${ev.latlng.lng.toFixed(4)}
`;\r\n // // console.log(this.panelDiv.innerHTML);\r\n // }\r\n\r\n createLeafletElement(opts) {\r\n // console.log('opts', opts);\r\n const { vesselPosition } = opts;\r\n\r\n // if(!vesselPosition) return null;\r\n\r\n const { lat, long, speed, course, vesselID, vesselLocationID } = vesselPosition;\r\n\r\n const latlng = L.latLng(parseFloat(lat), parseFloat(long));\r\n\r\n\r\n //const courseRnd = Math.floor(Math.random() * 360);\r\n const courseMarker = course * Math.PI / 180.0; // Radians from north\r\n const headingMarker = course * Math.PI / 180.0; // Radians from north\r\n //const speed = 10.0; // In m/s\r\n // const course = 45.0 * Math.PI / 180.0; // Radians from north\r\n // const heading = 45.0 * Math.PI / 180.0; // Radians from north\r\n\r\n // this.contextValue = { ...opts.leaflet };\r\n\r\n // this.leafletElement = \r\n\r\n //return new L.Circle(latlng);\r\n\r\n // return new L.TestSymbol(latlng, {\r\n // // return new L.Circle(latlng, {\r\n // trackId: vesselID,\r\n // fill: true,\r\n // fillColor: '#0000ff',\r\n // fillOpacity: 1.0,\r\n // stroke: true,\r\n // color: '#000000',\r\n // opacity: 1.0,\r\n // weight: 1.0,\r\n // minSilouetteZoom: 14,\r\n // speed: speed,\r\n // course: courseMarker,\r\n // heading: headingMarker,\r\n // gpsRefPos: [30, 30, 10, 10],\r\n // });\r\n\r\n const el = new L.TrackSymbol(latlng, {\r\n //const el = new L.Circle(latlng, {\r\n //trackId: vesselID,\r\n //trackId: `VP${vesselID}`,\r\n trackId: `VP${vesselLocationID}`,\r\n //trackId: vesselLocationID,\r\n fill: true,\r\n fillColor: '#0000ff',\r\n fillOpacity: 1.0,\r\n stroke: true,\r\n color: '#000000',\r\n opacity: 1.0,\r\n weight: 1.0,\r\n minSilouetteZoom: 14,\r\n speed: speed,\r\n course: courseMarker,\r\n heading: headingMarker,\r\n gpsRefPos: [30, 30, 10, 10],\r\n });\r\n\r\n // this.leafletElement = el;\r\n return el;\r\n }\r\n\r\n // updateLeafletElement(fromProps, toProps) {\r\n\r\n // }\r\n // componentDidMount() {\r\n // // // const { map } = this.props.leaflet;\r\n\r\n // // // console.log('map', map);\r\n\r\n // // // this.leafletElement.addTo(map);\r\n // // // map.addEventListener(\"mousemove\", this.displayInfo);\r\n // // // map.on(\"zoomend\", (ev) => {\r\n\r\n // // // var currZoom = map.getZoom();\r\n // // // console.log('zoomend', currZoom);\r\n // // // });\r\n // }\r\n\r\n // componentWillUnmount() {\r\n // //this.props.leaflet.map.removeEventListener(\"mousemove\", this.displayInfo);\r\n\r\n // console.log(\"TrackMarker Unmount\");\r\n // }\r\n\r\n\r\n}\r\n\r\nexport default withLeaflet(TrackMarker);","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { FeatureGroup, Popup, Tooltip } from 'react-leaflet'\r\nimport { Table, TableBody, TableRow, TableCell, Typography } from '@material-ui/core';\r\nimport { useFleetStore } from '../../../Global/Stores/fleetStore';\r\nimport { useGlobalStore } from '../../../Global/Stores/globalStore';\r\nimport TrackMarker from '../Markers/TrackMarker';\r\nimport Moment from 'react-moment';\r\nimport { useParams } from 'react-router-dom';\r\n\r\n\r\nconst FleetPositionsLayer = ({ Visible, mapActions }) => {\r\n\r\n // const { map } = useLeaflet();\r\n\r\n // let params = useParams();\r\n // console.log('FleetPositionsLayer Params', params);\r\n\r\n // let pars = useParams();\r\n // let location = useLocation();\r\n // let history = useHistory();\r\n // let routeMatch = useRouteMatch();\r\n\r\n // console.log('useParams', pars);\r\n // console.log('useLocation', location);\r\n // console.log('useHistory', history);\r\n // console.log('routeMatch', routeMatch);\r\n\r\n const [globalState] = useGlobalStore();\r\n const [fleetState, fleetActions] = useFleetStore();\r\n\r\n // const selectedVesselID = +match.params.vesselID || 0;\r\n const selectedVesselID = 0;\r\n\r\n const [popup, setPopup] = useState({\r\n key: 0,\r\n position: null,\r\n lines: []\r\n });\r\n\r\n const vessels = globalState.vessels || [];\r\n const loaded = Boolean(fleetState.fleetPositions) && Boolean(globalState.vessels);\r\n\r\n // console.table(fleetState.fleetPositions);\r\n // console.table(globalState.vessels);\r\n\r\n // const positions = fleetState.fleetPositions;\r\n const positions = fleetState.fleetPositions;\r\n\r\n useEffect(() => {\r\n\r\n fleetActions.getFleetPositions();\r\n\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (loaded && selectedVesselID > 0) {\r\n const pos = fleetState.fleetPositions.find(X => X.vesselID === selectedVesselID);\r\n\r\n if (pos) {\r\n mapActions.zoomToPoint(pos.long, pos.lat);\r\n }\r\n }\r\n }, [selectedVesselID]);\r\n\r\n\r\n // useEffect(() => {\r\n\r\n // console.warn(\"Track\", L);\r\n // // const ts3 = new L.aisTrackSymbol({ \"latitude\": 54.3, \"longitude\": 8.1 }).addTo(map);\r\n // return () => {\r\n\r\n // };\r\n // }, [])\r\n\r\n\r\n\r\n return useMemo(() => {\r\n //console.log('FleetPositionsLayer', positions);\r\n\r\n // console.log('useMemo');\r\n\r\n // if (!loaded || !Visible)\r\n // return null;\r\n\r\n const showVessels = loaded && Visible;\r\n //const showVessels = false;\r\n\r\n // return null;\r\n\r\n\r\n const handleVesselClick = (e) => {\r\n\r\n setPopup(prev => {\r\n return {\r\n key: prev.key + 1,\r\n position: e.latlng,\r\n lines: e.layer\r\n }\r\n });\r\n }\r\n\r\n return (\r\n- \r\n {\r\n popupInfo.lines.map(line => {\r\n return (\r\n
- \r\n {\r\n popupInfo.lines.map(line => {\r\n return (\r\n
{X.description}
);\r\n\r\n return (\r\n - \r\n {\r\n features.map(F => (
\r\n {parameters}\r\n {groups}\r\n
\r\n );\r\n};\r\n\r\n// 1\r\nexport const AVCSO_LayerOptionsContainer = () => {\r\n\r\n const [mapState] = useMapStore();\r\n const activeLayers = mapState.AVCSO.layers.value;\r\n\r\n return (\r\n \r\n \r\n {name} \r\n \r\n {\r\n\r\n ExpectedInput.map(X => (\r\n \r\n \r\n {/*
\r\n );\r\n\r\n }, [value, ActiveLayers]);\r\n\r\n}\r\n\r\nexport default AvcsOLayerOptions;\r\n","\r\nexport const DisplayParameters =\r\n{\r\n \"DisplayParameters\": {\r\n \"ECDISParameters\": {\r\n \"version\": \"10.6.1\",\r\n \"DynamicParameters\": {\r\n \"Parameter\": [\r\n {\r\n \"name\": \"AreaSymbolizationType\",\r\n \"caption\": \"Area symbolization\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 2,\r\n \"Description\": \"Area symbolization: Sets type of symbology for area boundaries.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"Plain boundaries\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Symbolized boundaries\"\r\n }\r\n ]\r\n },\r\n // {\r\n // \"name\": \"AttDesc\",\r\n // \"caption\": \"Attribute description\",\r\n // \"type\": \"E\",\r\n // \"default\": 1,\r\n // \"value\": 1,\r\n // \"Description\": \"Attribute description: Display attribute acronym or description name.\",\r\n // \"ExpectedInput\": [\r\n // {\r\n // \"code\": 1,\r\n // \"value\": \"Acronym\"\r\n // },\r\n // {\r\n // \"code\": 2,\r\n // \"value\": \"Description\"\r\n // }\r\n // ]\r\n // },\r\n {\r\n \"name\": \"ColorScheme\",\r\n \"caption\": \"Color Scheme\",\r\n \"type\": \"E\",\r\n \"default\": 0,\r\n \"value\": 0,\r\n \"Description\": \"Colour schemes.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 0,\r\n \"value\": \"DAY\"\r\n },\r\n {\r\n \"code\": 1,\r\n \"value\": \"DAY_BRIGHT\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"DAY_BLACKBACK\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"DAY_WHITEBACK\"\r\n },\r\n {\r\n \"code\": 4,\r\n \"value\": \"DUSK\"\r\n },\r\n {\r\n \"code\": 5,\r\n \"value\": \"NIGHT\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"CompassRose\",\r\n \"caption\": \"Compass Rose\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Display Compass Rose.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DataQuality\",\r\n \"caption\": \"Quality of Data Symbology\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Data quality: M_QUAL symbology.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DeepContour\",\r\n \"caption\": \"Depth Contour (meters)\",\r\n \"type\": \"F\",\r\n \"default\": 30,\r\n \"value\": 30,\r\n \"Description\": \"Deep Contour: Set depth of the deep contour value in meters.\"\r\n },\r\n {\r\n \"name\": \"DisplayAIOFeatures\",\r\n \"caption\": \"Display AIO features.\",\r\n \"type\": \"L\",\r\n \"default\": \"1,2,3,4,5,6,7\",\r\n \"value\": \"1,2,3,4,5,6,7\",\r\n \"Description\": \"Display AIO features.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"Temporary notice\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Preliminary notice\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"ENC Preliminary notice\"\r\n },\r\n {\r\n \"code\": 4,\r\n \"value\": \"No information\"\r\n },\r\n {\r\n \"code\": 5,\r\n \"value\": \"Text\"\r\n },\r\n {\r\n \"code\": 6,\r\n \"value\": \"Bounding box\"\r\n },\r\n {\r\n \"code\": 7,\r\n \"value\": \"Area pattern\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayCategory\",\r\n \"type\": \"L\",\r\n \"default\": \"1,2,4\",\r\n \"value\": \"1,2,4\",\r\n \"Description\": \"Display categories.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"DISPLAYBASE\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"STANDARD\"\r\n },\r\n {\r\n \"code\": 4,\r\n \"value\": \"OTHER\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayDepthUnits\",\r\n \"caption\": \"Depth unit\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Depth units: Display depth units in different values.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"Meters\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Feet\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"Fathoms\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayFrames\",\r\n \"caption\": \"Frame Visibility\",\r\n \"type\": \"E\",\r\n \"default\": 3,\r\n \"value\": 1,\r\n \"Description\": \"Display frames: Sets dataset extent visability.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"On\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Off\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"Automatic\"\r\n },\r\n {\r\n \"code\": 4,\r\n \"value\": \"Visible Only\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayFrameText\",\r\n \"caption\": \"Frame Text\",\r\n \"type\": \"E\",\r\n \"default\": 0,\r\n \"value\": 1,\r\n \"Description\": \"Display dataset information on dataset frames.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 0,\r\n \"value\": \"Off\"\r\n },\r\n {\r\n \"code\": 1,\r\n \"value\": \"DSNM\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"CSCL\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"DSNM over CSCL\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayFrameTextPlacement\",\r\n \"caption\": \"Frame Text Placement\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Display frame text placement.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"Upper left\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Centroid\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayLightSectors\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 1,\r\n \"Description\": \"Display light sectors.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplayNOBJNM\",\r\n \"caption\": \" National Object Naming (local language)\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 2,\r\n \"Description\": \"Display national object name: NOBJNM when available.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DisplaySafeSoundings\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Display safe soundings.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"HonorScamin\",\r\n \"caption\": \"Enable Scale Minimum Feature Attribution\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Honor SCAMIN value when displaying features.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"IntendedUsage\",\r\n \"type\": \"L\",\r\n \"default\": \"0\",\r\n \"value\": \"0\",\r\n \"Description\": \"Intended usage: Enables the display of S-57 datasets based on intended usage.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 0,\r\n \"value\": \"All Datasets\"\r\n },\r\n {\r\n \"code\": 1,\r\n \"value\": \"Overview\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"General\"\r\n },\r\n {\r\n \"code\": 3,\r\n \"value\": \"Coastal\"\r\n },\r\n {\r\n \"code\": 4,\r\n \"value\": \"Approach\"\r\n },\r\n {\r\n \"code\": 5,\r\n \"value\": \"Harbour\"\r\n },\r\n {\r\n \"code\": 6,\r\n \"value\": \"Berthing\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"IsolatedDangers\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Isolated dangers in shallow water.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"IsolatedDangersOff\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Turn off all isolated dangers.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"LabelContours\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Label contours.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"LabelSafetyContours\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Label safety contours.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"OptionalDeepSoundings\",\r\n \"caption\": \"Deep Soundings\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Optional deep soundings: Do not show safe water soundings in conflict with other features.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"PointSymbolizationType\",\r\n \"caption\": \"Point Symbolization\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Point symbolization: Sets type of symbology for point features.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"Simplified\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Paper chart\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"RemoveDuplicateText\",\r\n \"caption\": \"Remove Duplicate Text\",\r\n \"type\": \"E\",\r\n \"default\": 1,\r\n \"value\": 2,\r\n \"Description\": \"Remove duplicate text for text group 21 features.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"SafetyContour\",\r\n \"caption\": \"Safety Contour (meters)\",\r\n \"type\": \"F\",\r\n \"default\": 30,\r\n \"value\": 30,\r\n \"Description\": \"Safety contour: Depth of the safety contour in meters.\"\r\n },\r\n {\r\n \"name\": \"SafetyDepth\",\r\n \"caption\": \"Safety Depth (meters)\",\r\n \"type\": \"F\",\r\n \"default\": 30,\r\n \"value\": 30,\r\n \"Description\": \"Safety depth: Depth of the safety depth in meters.\"\r\n },\r\n {\r\n \"name\": \"ShallowContour\",\r\n \"caption\": \"Shallow Contour (meters)\",\r\n \"type\": \"F\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Shallow contour: Depth of the shallow contour in meters.\"\r\n },\r\n {\r\n \"name\": \"TextHalo\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Display text halo.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"On\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"Off\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"TwoDepthShades\",\r\n \"caption\": \"2 Depth Shades\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 1,\r\n \"Description\": \"Depth shades: Two depth area shades or four.\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n }\r\n ],\r\n \"ParameterGroup\": [\r\n {\r\n \"name\": \"AreaSymbolSize\",\r\n \"caption\": \"Area Symbol Size\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"scaleFactor\",\r\n \"type\": \"F\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"caption\": \"Scale_factor\",\r\n \"Description\": \"Scale factor\"\r\n },\r\n {\r\n \"name\": \"minZoom\",\r\n \"type\": \"F\",\r\n \"default\": 0.01,\r\n \"value\": 0.01,\r\n \"caption\": \"Minimum_zoom\",\r\n \"Description\": \"Minimum zoom\"\r\n },\r\n {\r\n \"name\": \"maxZoom\",\r\n \"type\": \"F\",\r\n \"default\": 1.2,\r\n \"value\": 1.2,\r\n \"caption\": \"Maximum_zoom\",\r\n \"Description\": \"Maximum zoom\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"DatasetDisplayRange\",\r\n \"caption\": \"Display Range\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"minZoom\",\r\n \"type\": \"F\",\r\n \"default\": 0.01,\r\n \"value\": 0.01,\r\n \"caption\": \"Minimum_zoom\",\r\n \"Description\": \"Minimum dataset display value.\"\r\n },\r\n {\r\n \"name\": \"maxZoom\",\r\n \"type\": \"F\",\r\n \"default\": 1.2,\r\n \"value\": 1.2,\r\n \"caption\": \"Maximum_zoom\",\r\n \"Description\": \"Maximum dataset display value.\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"LineSymbolSize\",\r\n \"caption\": \"Line Symbol Size\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"scaleFactor\",\r\n \"type\": \"F\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"caption\": \"Scale_factor\",\r\n \"Description\": \"Scale factor.\"\r\n },\r\n {\r\n \"name\": \"minZoom\",\r\n \"type\": \"F\",\r\n \"default\": 0.1,\r\n \"value\": 0.1,\r\n \"caption\": \"Minimum_zoom\",\r\n \"Description\": \"Minimum zoom.\"\r\n },\r\n {\r\n \"name\": \"maxZoom\",\r\n \"type\": \"F\",\r\n \"default\": 1.2,\r\n \"value\": 1.2,\r\n \"caption\": \"Maximum_zoom\",\r\n \"Description\": \"Maximum zoom.\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"PointSymbolSize\",\r\n \"caption\": \"Point Symbol Size\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"scaleFactor\",\r\n \"type\": \"F\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"Description\": \"Scale_factor.\"\r\n },\r\n {\r\n \"name\": \"minZoom\",\r\n \"type\": \"F\",\r\n \"default\": 0.1,\r\n \"value\": 0.1,\r\n \"caption\": \"Minimum_zoom\",\r\n \"Description\": \"Minimum zoom.\"\r\n },\r\n {\r\n \"name\": \"maxZoom\",\r\n \"type\": \"F\",\r\n \"default\": 1.2,\r\n \"value\": 1.2,\r\n \"caption\": \"Maximum_zoom\",\r\n \"Description\": \"Maximum zoom.\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"TextGroups\",\r\n \"caption\": \"Text Groups\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"11\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Important text\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"21\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Names for position reporting\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"23\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Light description string\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"24\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Note on chart data\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"25\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Nature of seabed\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"26\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Geographic names\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"27\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Magnetic variation and swept depth\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"28\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Height of islet or land feature\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"29\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Berth number\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"30\",\r\n \"type\": \"E\",\r\n \"default\": 2,\r\n \"value\": 2,\r\n \"Description\": \"Current Velocity\",\r\n \"ExpectedInput\": [\r\n {\r\n \"code\": 1,\r\n \"value\": \"False\"\r\n },\r\n {\r\n \"code\": 2,\r\n \"value\": \"True\"\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n \"name\": \"TextSize\",\r\n \"caption\": \"Text Size\",\r\n \"Parameter\": [\r\n {\r\n \"name\": \"scaleFactor\",\r\n \"type\": \"F\",\r\n \"default\": 1,\r\n \"value\": 1,\r\n \"caption\": \"Scale_factor\",\r\n \"Description\": \"Scale factor.\"\r\n },\r\n {\r\n \"name\": \"minZoom\",\r\n \"type\": \"F\",\r\n \"default\": 0.1,\r\n \"value\": 0.1,\r\n \"caption\": \"Minimum_zoom\",\r\n \"Description\": \"Minimum zoom.\"\r\n },\r\n {\r\n \"name\": \"maxZoom\",\r\n \"type\": \"F\",\r\n \"default\": 1.2,\r\n \"value\": 1.2,\r\n \"caption\": \"Maximum_zoom\",\r\n \"Description\": \"Maximum zoom.\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n },\r\n \"ServerParameters\": {\r\n \"defaultVisibility\": true,\r\n \"framesOn\": false\r\n }\r\n};","import React, { useState } from 'react';\r\nimport { Paper, InputBase, IconButton, Divider, TextField, InputAdornment } from '@material-ui/core';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\n//import FilterIcon from '@material-ui/icons/FilterList';\r\nimport SwapVertIcon from '@material-ui/icons/SwapVert';\r\nimport _ from 'lodash';\r\n\r\nconst SearchFilter = ({ placeholder, onSearch, onSort }) => {\r\n\r\n const [, setState] = useState('');\r\n const [sort, setSort] = useState(1);\r\n\r\n const hasSorting = !!onSort;\r\n\r\n\r\n const handleOnSearch = (e) => {\r\n // console.log('e', e.target.value);\r\n const val = e.target.value;\r\n setState(() => setState(val));\r\n onSearch(val);\r\n }\r\n\r\n const handleOnSort = () => {\r\n // const val = e.target.value;\r\n setSort((prev) => {\r\n\r\n const val = prev * -1;\r\n // console.log('sort', val);\r\n if (!!onSort)\r\n onSort(val);\r\n\r\n return val;\r\n });\r\n }\r\n\r\n\r\n return (\r\n - \r\n {\r\n (loaded) && (routes.length > 0) &&\r\n (\r\n filterRoutes.map(route => {\r\n return (\r\n
\r\n {\r\n (loaded) && (routes.length === 0) &&\r\n (\r\n \r\n \r\n click to add new route\r\n \r\n \r\n )\r\n }\r\n {\r\n (!loaded) && \r\n (\r\n
\r\n \r\n
\r\n )\r\n }\r\n Lat: ${ev.latlng.lat.toFixed(4)} Lng: ${lng.toFixed(4)}
`;\r\n // console.log(this.panelDiv.innerHTML);\r\n }\r\n\r\n createLeafletElement(opts) {\r\n const MapInfo = L.Control.extend({\r\n onAdd: map => {\r\n this.panelDiv = L.DomUtil.create(\"div\", \"leaflet-positionInfo\");\r\n this.panelDiv.innerHTML = `Lat: _ Lng: _
`;\r\n return this.panelDiv;\r\n },\r\n onRemove: map => {\r\n this.panelDiv = L.DomUtil.create(\"div\", \"leaflet-positionInfo\");\r\n return this.panelDiv;\r\n },\r\n });\r\n return new MapInfo({ position: (this.props.position || \"bottomleft\") });\r\n }\r\n\r\n componentDidMount() {\r\n const { map } = this.props.leaflet;\r\n this.leafletElement.addTo(map);\r\n map.addEventListener(\"mousemove\", this.displayInfo);\r\n }\r\n\r\n componentWillUnmount() {\r\n const { map } = this.props.leaflet;\r\n this.leafletElement.remove();\r\n map.removeEventListener(\"mousemove\", this.displayInfo);\r\n }\r\n}\r\n\r\nexport default withLeaflet(MapInfo);","import React, { useState, useMemo } from 'react';\r\nimport { Popup } from 'react-leaflet';\r\nimport { List, ListItem, ListItemText, Link, ListItemIcon, Checkbox } from '@material-ui/core';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\n\r\nconst CatalogueMapPopup = ({ popupInfo, selectedItemID, selectedItemIDs, canAddItems = false }) => {\r\n // const [basketState] = useBasketStore();\r\n const [closeKey, setCloseKey] = useState(0);\r\n\r\n const showPopup = (popupInfo.position) && (closeKey !== popupInfo.key);\r\n\r\n return useMemo(() => {\r\n\r\n // console.log('popupInfo.lines', popupInfo.lines);\r\n // console.log('selectedItemIDs 2', selectedItemIDs);\r\n\r\n const closePopup = () => {\r\n setCloseKey(popupInfo.key);\r\n }\r\n\r\n return showPopup === true ? (\r\n - \r\n {\r\n popupInfo.lines.map(X =>
\r\n \r\n {name}\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AvcsoFeaturePopup;\r\n","import React, { useState } from 'react'\r\nimport { Table, TableHead, TableRow, TableCell, TableBody, Paper, Typography } from '@material-ui/core'\r\nimport { useMapStore } from '../../../../Global/Stores/mapStore';\r\nimport { getAvcsoImageLink } from '../../../../Global/Services/httpService';\r\nimport AvcsoFeaturePopup from './AvcsoFeaturePopup';\r\n\r\nconst AvcsoFeatureContainer = () => {\r\n const [mapState] = useMapStore();\r\n\r\n const [selectedRcid, setSelectedRcid] = useState(0)\r\n\r\n\r\n const featureInfo = mapState.AVCSO.featureInfo;\r\n\r\n if (!featureInfo)\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst MapMenuLayers = ({menuOrientation}) => {\r\n\r\n const [mapState, mapActions] = useMapStore();\r\n const { activeLayer } = mapState;\r\n const activeMenu = mapState.drawerMenu.activeMenu;\r\n const EULA = mapState.AVCSO.EULA;\r\n\r\n const onLayerClick = (layerID) => {\r\n // console.log('onLayerClick', layerID);\r\n mapActions.setActiveLayer(layerID);\r\n }\r\n\r\n const onToggleMapMenu = (drawerMenu) => {\r\n // console.log('onLayerClick', layerID);\r\n mapActions.setActiveDrawerMenu(drawerMenu);\r\n }\r\n\r\n // OSM\r\n // AVCSO -> Features + FeatureGroups + Layers\r\n if(menuOrientation === \"ver\"){\r\n return (\r\n \r\n {\r\n menuContainer\r\n }\r\n
\r\n )\r\n } else if(menuOrientation === \"hor\"){\r\n return(\r\n \r\n {\r\n menuContainer\r\n }\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst MapMenuItemAVCSO = ({ Selected, onSelect, ToggleMapMenu, ActiveMenu, EULA, menuOrientation }) => {\r\n // console.log('ActiveMenu', ActiveMenu);\r\n const [, userActions] = useUserStore();\r\n const hasAVCSO = userActions.hasFeatureID(6, false) && userActions.hasAppModuleID(7, false);\r\n\r\n\r\n const disabled = !hasAVCSO;// || EULA === false;\r\n if(menuOrientation === \"ver\"){\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {\r\n Selected === true && EULA === true ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : null\r\n }\r\n {/* \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst MapMenuBarItemAvcsoReadme = () => {\r\n\r\n const onSelect = () => {\r\n const to = `${http.endpoint}/api/file/avcso/readme?access_token=${getToken()}`;\r\n window.open(to, \"_blank\");\r\n }\r\n\r\n return (\r\n \r\n {Icon}\r\n
\r\n {divider === true ? \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default FloatingMenuButton","import React from 'react'\r\nimport { Link } from \"react-router-dom\";\r\n\r\n////// Matrial UI support files\r\nimport { ListItem, ListItemText, Divider, Card, List, Button } from \"@material-ui/core\";\r\n\r\n////// Global Support Files\r\nimport Menu from '../../../Global/Data/Menu';\r\n\r\n////// CSS Files\r\nimport homeStyles from '../CSS/HomeStyles.module.css';\r\nimport menuStyles from '../CSS/MenuStyles.module.css';\r\n\r\n\r\nconst MyHome = () => {\r\n return(\r\n \r\n \r\n
\r\n\r\n \r\n \r\n location_on \r\n \r\n
\r\n \r\n {Menu.map(mainMenu => {\r\n if (mainMenu.subItems){\r\n if (mainMenu.to === window.location.pathname){\r\n return (
\r\n \r\n \r\n \r\n \r\n {mainMenu.subItems.map(subMenu => {\r\n return (
\r\n
\r\n )};\r\n }})}\r\n\r\n - \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Loading;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { Box } from '@material-ui/core';\r\nimport Loading from '../Misc/Loading';\r\nimport { useColumnStore } from '../../../Global/Stores/columnStore';\r\nimport { useUserStore } from '../../../Global/Stores/userStore';\r\n\r\nconst ContentColumn = ({ children, loaded, selectedID = null, access = false, disablePadding = false }) => {\r\n\r\n const [, columnActions] = useColumnStore();\r\n const [, userActions] = useUserStore();\r\n\r\n const [featureAccess, setFeatureAccess] = useState(false);\r\n\r\n const location = window.location.pathname;\r\n\r\n const id = selectedID === null ? new Date() : selectedID;\r\n\r\n useEffect(() => {\r\n const hasAccess = access || userActions.canAccessPath(window.location.pathname);\r\n setFeatureAccess(() => hasAccess);\r\n }, [])\r\n\r\n useEffect(() => {\r\n columnActions.addColumn(1);\r\n return () => {\r\n columnActions.addColumn(-1);\r\n };\r\n }, []);\r\n\r\n\r\n // console.log('location', window.location.pathname);\r\n\r\n const paddingClass = disablePadding === true ? 'disablePadding' : '';\r\n\r\n return useMemo(() => {\r\n // console.log('location', location);\r\n\r\n return featureAccess === true ? (\r\n \r\n {Module} | {currentPage}\r\n
\r\n )\r\n}\r\n\r\nexport default Breadcrumb","import React, { useEffect, useState, useMemo } from 'react'\r\nimport { Box, Typography, Grid, TextField, Button } from '@material-ui/core';\r\nimport { useUserStore } from '../../../../Global/Stores/userStore';\r\nimport { isValidateEmail } from '../../../../Global/Data/Methods';\r\nimport http from '../../../../Global/Services/httpService';\r\nimport ContentColumn from '../../Custom/ContentColumn';\r\nimport ProtectedArea from '../../../Custom/ProtectedArea';\r\n\r\nimport Breadcrumb from '../../Navigation/Breadcrumb';\r\n\r\nconst Profile = () => {\r\n const [userState, userActions] = useUserStore();\r\n const [loading, setLoading] = useState(false);\r\n const [profileState, setProfileState] = useState();\r\n\r\n useEffect(() => {\r\n setProfileState(() => ({ ...userState.user, password: \"\", password2: \"\" }))\r\n }, []);\r\n\r\n return useMemo(() => {\r\n\r\n if (!profileState)\r\n return null;\r\n\r\n const { firstName, lastName, email, password, password2 } = profileState;\r\n // console.log('profileState', profileState);\r\n\r\n const canSave = (\r\n (firstName.length > 0) &&\r\n (lastName.length > 0) &&\r\n (email.length > 0) &&\r\n (isValidateEmail(email)) &&\r\n (password.length > 5) &&\r\n (password === password2));\r\n\r\n const handleChange = (e) => {\r\n if (!loading) {\r\n const { name, value } = e.target;\r\n setProfileState(() => ({ ...profileState, [name]: value }));\r\n }\r\n };\r\n\r\n const onSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n if (!canSave) return;\r\n\r\n const postData = {\r\n firstName: firstName,\r\n lastName: lastName,\r\n email: email,\r\n password: password,\r\n };\r\n\r\n setLoading(() => true);\r\n\r\n http.post('/api/account/users/change', postData)\r\n .then(result => {\r\n\r\n // console.log('changed Profile', result.data);\r\n userActions.login({ user: result.data.user });\r\n })\r\n .catch(() => {\r\n\r\n setLoading(() => false);\r\n });\r\n }\r\n\r\n return (\r\n \r\n\r\n {/* My Profile */}\r\n
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n First Name\r\n \r\n \r\n {firstName}\r\n \r\n
\r\n\r\n Last Name\r\n \r\n \r\n {lastName}\r\n \r\n
\r\n\r\n Email Address\r\n \r\n \r\n {email}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n Create new user */}\r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n\r\n \r\n\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n\r\n }, [number]);\r\n};\r\n\r\nexport default NumberStatus;\r\n","import React, { useMemo } from 'react';\r\nimport { Link as Link1, withRouter } from 'react-router-dom';\r\nimport { Link, ListItem, ListItemText, ListItemSecondaryAction, Chip } from '@material-ui/core';\r\nimport NumberStatus from '../../Widgets/NumberStatus';\r\n\r\n\r\nconst ListItemLink = ({ text, subText, to, location, number, numberSmall, selected, isHeader = true, divider = false, icon = null }) => {\r\n // console.log('number 1', number);\r\n\r\n const isSelected = selected === true || (location.pathname.startsWith(to));\r\n\r\n const hasIcon = Boolean(icon);\r\n\r\n\r\n return useMemo(() => {\r\n // console.log('ListItemLink number', number);\r\n\r\n return (\r\n \r\n {number}
\r\n\r\n {/*
\r\n );\r\n }, [newsItems]);\r\n}\r\n\r\n\r\nexport const AnnouncementLine = ({ newsItem, selected }) => {\r\n\r\n return useMemo(() => {\r\n\r\n const { chartagentNewsID, title, startDate } = newsItem;\r\n const to = `/news/${chartagentNewsID}`;\r\n const isSelected = selected === true;\r\n // const posted = Date.parse(startDate).toLocaleString();\r\n const posted = (- \r\n\r\n {\r\n newsItems.map(X => (
\r\n {`News & Announcements`} \r\n
*/}\r\n\r\n \r\n {\r\n loaded ? (\r\n
\r\n - \r\n {\r\n newsItems.map(X => (
No news to display
\r\n }\r\n \r\n
\r\n News & Announcements
\r\n\r\n \r\n {/* \r\n
\r\n \r\n
\r\n
\r\n \r\n
What Do You Want To Do?
\r\n\r\n
\r\n\r\n {Menu.map(mainMenu => {\r\n if (mainMenu.subItems){\r\n return (
\r\n
\r\n \r\n\r\n {Menu.map(mainMenu => {\r\n if (mainMenu.subItems){\r\n return (
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
);\r\n }\r\n \r\n })}\r\n \r\n
\r\n
\r\n ChartTrack Application Manual
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n Colour Key
\r\nFollowing colour key is used throughout the ShipManager site:
\r\nGreen: Good\r\n
Yellow: Warning\r\n
Red: Issue\r\n
Grey: Neutral/Not applicable
For more information on the colour key used for a specific section, please go to the Help information of that section.
\r\nHome
\r\nProvides a high-level overview of your account and fleet.\r\n
Shows functions grouped per module and lets you navigate easily.
News & Announcements
\r\nGeneral announcements from your chart agent, system maintenance, product updates, ...\r\n
Click on any item to see full details.
Order Management
\r\nAll order related information and actions.
\r\nQuotations to approve
\r\nProvides the possibility to approve and reject quotes sent to you by your chart agent.
\r\n\r\n ![\"Quote](\"http://www.charttrack.com/Shipmanager/QuoteSTatus.png\")
The status circle in the header shows the total number of items and the status of the items.
Colour key:\r\n
Green: Item has been approved.\r\n
Red: Item has been rejected.\r\n
Grey: Still to approve/reject.
Select the vessel whose quotations you want to approve, and then select the quotation. Click on an item in the list for details and to zoom to the selected item on the map. Once all items have been approved/rejected, click the <Confirm> button. You will be able to change your reference, if necessary, before sending the order through for processing. Please note the order will be processed immediately after confirmation, this can't be undone!
\r\nCreate new order
\r\nAllows you to create new orders. Orders can be created from routes, existing baskets or quotes, the catalogue, and any mix of these.\r\n
Select the vessel fpr which you want to order, select the source for your orders (route, basket, quote, catalogue), review and confirm.\r\n
You can create and save routes, upload basket files, select existing quotes to select items from. Once you add your selected items to the basket, the srouce for your items will reset and you can add more items by selecting another source.\r\n
Durarions and quantities can be set during basket review.\r\n
An order reference must be set before final confirmation.
Please note the order will be processed immediately after confirmation, this can't be undone!
\r\nOrder history
\r\nProvides an overview of the order history for the current and previous year for each vessel.
\r\n\r\n ![\"Order](\"http://www.charttrack.com/Shipmanager/OrderStatus.png\")
Status circle indicates the total number of items in the order and order status for each item.
Colour key:\r\n
Grey: Your chart agent has received your order.\r\n
Red: Item(s) on backorder.\r\n
Yellow: Item(s) shipped.\r\n
Green: Item(s) delivered.
Clicking any order in the list shows the order details and status per item.
\r\nFlat Fee contracts
\r\nProvides an overview of your running flat fee contracts, if you have any.
\r\nSelect the vessel whose flat fee contracts you wish to see. Select a contract to see what orders were placed within the contract. Select an order to see the items in it.
\r\nShipment tracking
\r\nShows status of all your shipments.
\r\nSelect the vessel whose shipments you want to see. Click any shipment to see the items in it. If available, the tracking link \r\n ![\"Track](\"http://www.charttrack.com/Shipmanager/ShipmentTracker.png\"){kind=tracking}
will open the transport company's tracking website showing actual status of your shipment.
AVCS Online
\r\nAllows you to contact your chartagent to activate an AVCS Online subscription.\r\n
If you have an active AVCSO subscription, allows you to order individual AVCSO cells.
Fleet Management
\r\nComplete overview of your fleet with compliance issues & warnings.
\r\nFleet Holdings
\r\nFleet Status
\r\nFleet Tracking
\r\nAllows you to contact your chartagent to activate fleet tracking for all your vessels.\r\n
If you have fleet tracking activated, your vessels can be shown on the map, with tracking details.
Fleet overview
\r\nshows a per-vessel overview of your entire fleet. Selecting any vessel shows you full details.\r\n
Certificate of enrolment and ChartTrack Navigator license can be downloaded and sent to vessel here.
Navigator Updates
\r\nShows last Navigator update for all your vessels.\r\n
Selecting a vessels shows details about their updates.
Colour key:\r\n
Grey: Vessel does not use ChartTrack Navigator.\r\n
Red: Vessel has not updates in over 2 weeks.\r\n
Yellow: Vessel has not updated in over 1 week.\r\n
Green: Vessel has updated within the last week.
Help
\r\nOpens this help page.
\r\nProfile & Users
\r\nManage your profile and your users.
\r\n| Colour key: | \r\n|
| Green | \r\nNo issues or warnings, completely up to date. | \r\n
| Yellow | \r\nPaper products: An edition, correction or updates is out of date, but no more than 1 week.\r\n Digital licenses: Licenses are renewable. | \r\n
| Red | \r\nPaper products: An edition, correction or updates is more than 1 week out of date.\r\n Digital licenses: Licenses have expired but are still in their grace period or have been deprecated. | \r\n
| Update information: | \r\n|
|---|---|
| Overview of the updating behaviour of the vessels in your fleet.\r\n (relevant for vessels using Navigator only) | \r\n |
| Colour key: | \r\n|
| Green | \r\nVessel is updating on a weekly basis. | \r\n
| Yellow | \r\nVessel hasn't updated for a week. | \r\n
| Red | \r\nVessel hasn't updated for more than a week | \r\n
| Grey | \r\nVessel is not using Navigator. | \r\n
\r\n Quotations to approve\r\n | \r\n |
|---|---|
\r\n \r\n Provides the possibility to approve and reject quotes sent to you by your chart agent.\r\n\r\n | \r\n |
| \r\n | |
\r\n ![\"\"](\"/images/help/vessels-status.png\") \r\n The status circle in the header shows the total number of items and the status of the items. \r\n | \r\n |
| Colour key: | \r\n|
| Green | \r\nItem has been approved. | \r\n
| Red | \r\nItem has been rejected. | \r\n
| Grey | \r\nStill to approve/reject. | \r\n
| Click on an item in the list for details and to zoom to the selected item on the map.\r\n \r\n Once all items have been approved/rejected, click the \"Order\" button.\r\n You will be able to change your reference, if necessary, before confirming the order.\r\n | \r\n |
\r\n Please note the order will be processed immediately after confirmation, this can't be undone!\r\n | \r\n
\r\n Create new order\r\n | \r\n |
|---|---|
\r\n \r\n Provides the possibility to create new orders.\r\n\r\n | \r\n |
| \r\n | |
| \r\n \r\n The status circle in the header shows the total number of items and the status of the items. \r\n | \r\n |
| Colour key: | \r\n|
| Green | \r\nItem has been approved. | \r\n
| Red | \r\nItem has been rejected. | \r\n
| Grey | \r\nStill to approve/reject. | \r\n
| Click on an item in the list for details and to zoom to the selected item on the map.\r\n \r\n Once all items have been approved/rejected, click the \"Order\" button.\r\n You will be able to change your reference, if necessary, before confirming the order.\r\n | \r\n |
\r\n Please note the order will be processed immediately after confirmation, this can't be undone!\r\n | \r\n
\r\n Vessels\r\n | \r\n |
|---|---|
\r\n \r\n Provides detailed information about the vessels in your fleet.\r\n\r\n | \r\n |
| \r\n | |
\r\n ![\"\"](\"/images/help/vessels-chart.png\") \r\n Provides inventory and status information for all your vessels.\r\n \r\n The status circles indicate the total number of items in inventory (per vessel or per product) and their status. | \r\n |
| Colour key: | \r\n|
| Green | \r\nItem/Update status are completely up to date. | \r\n
| Yellow | \r\nFor paper products: Item/Update status is out of date, but no more than 1 week.\r\n For Digital licenses: License is renewable or update status is out of date, but no more than 1 week. | \r\n
| Red | \r\nFor paper products: Item/Update status is out of date, for more than 1 week.\r\n For Digital licenses: Licenses have expired but are still in their grace period, have been deprecated or update status is out of date, for more than 1 week. | \r\n
| Click a vessel in the list to get detailed information on the vessel.\r\n Click a product type in the list to see the items in inventory and their status. | \r\n |
\r\n ![\"\"](\"/images/help/vessels-filter.png\") \r\n | \r\n |
| Click on an item in the list for details and to zoom to the selected item on the map. | \r\n
\r\n Order History\r\n | \r\n |
|---|---|
\r\n \r\n Provides an overview of the full order history for each vessel.\r\n\r\n | \r\n |
| \r\n | |
\r\n ![\"\"](\"/images/help/orders-chart.png\") \r\n Status circle indicates the total number of items in the order and order status for each item. \r\n | \r\n |
| Colour key: | \r\n|
| Grey | \r\nYour chart agent has received your order. | \r\n
| Red | \r\nItem(s) on backorder. | \r\n
| Yellow | \r\nItem(s) shipped. | \r\n
| Green | \r\nItem(s) delivered. | \r\n
| Clicking any order in the list shows the order details and status per item. | \r\n|
\r\n ![\"\"](\"/images/help/orders-filter.png\") \r\n | \r\n |
| Click on an item in the list for details and to zoom to the selected item on the map. | \r\n
\r\n Account\r\n | \r\n
|---|
\r\n \r\n Provides a way to manage user accounts.\r\n\r\n | \r\n
| \r\n |
| Profile: Allows you to change your e-mail and password.\r\n Users: Admin users also have the possibility to add and remove other users for your account, and assign Shipmanger modules access. | \r\n
\r\n \r\n {FAQ.Question} \r\n \r\n \r\n \r\n {FAQ.Answer}\r\n \r\n \r\n \r\n ))}\r\n
\r\n Frequently Asked Questions
\r\n {FAQFile.Account.map(FAQ => (\r\n\r\n
\r\n So you still want to contact us?
\r\n \r\n\r\n
\r\n \r\n \r\n We know how important support is to every business. So we have taken time to provide you with a lot of information on our systems and answers to Frequently Asked Questions.\r\n
Please do take your time to go through. Your answer might just there. If its not, feel free to contact us. We are always ready to help and improve on our support.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n We Love to Support!
\r\nPlease do take your time to go through. Your answer might just there. If its not, feel free to contact us. We are always ready to help and improve on our support.
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {\r\n val.map(X => (
\r\n )\r\n\r\n }, [openQuantity, backOrderQuantity, deliveredQuantity, shippedQuantity, totalQuantity])\r\n\r\n\r\n}\r\n\r\nexport default OrderStatus\r\n","import React, { useMemo } from 'react';\r\nimport { ListItem, ListItemText, Chip, Link } from '@material-ui/core';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport NumberStatus from '../../Widgets/NumberStatus';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { useGlobalStore } from '../../../Global/Stores/globalStore';\r\nimport OrderStatus from '../../Widgets/OrderStatus';\r\n// import QuoteStatus from '../../Widgets/QuoteStatus';\r\n\r\nconst useStyles = makeStyles({\r\n link: {\r\n color: 'inherit',\r\n textDecoration: 'none',\r\n },\r\n // listItem: {\r\n // backgroundColor: '#e9edf7',\r\n // textDecoration: 'none',\r\n // },\r\n});\r\n\r\nconst ListItemSub = ({ mainText, subText, number, selected, linkTo, statusComponent }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n 180 ? \"pie-order big\" : \"pie-order\"} data-start={X.start} data-value={X.length}>
))\r\n }\r\n {totalQuantity}
\r\n- \r\n
- \r\n {\r\n // quotes.map(X => (
\r\n setFilter(() => F.toLowerCase())}\r\n onSort={(S) => setSort(() => S)}\r\n />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels.map(X => (
\r\n
Group
\r\n Number
\r\n \r\n Price
\r\n \r\n Total
\r\n Duration
*/}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ValidationWidget;\r\n","import React, { useState } from 'react';\r\nimport { List, ListItem, ListItemText, ListItemIcon, Collapse, ListItemSecondaryAction, Link } from '@material-ui/core';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport ValidationWidget from '../../../Misc/ValidationWidget';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport _ from 'lodash'\r\n\r\nconst QuoteDetailList = ({ selectedLineID, quoteDetail, salesActions }) => {\r\n\r\n //console.log('quoteDetail', quoteDetail)\r\n\r\n const [OpenGroups, setOpenGroups] = useState((quoteDetail ? quoteDetail.productGroups.map(X => X.productGroupID) : []));\r\n\r\n if (!quoteDetail || !quoteDetail.quote) return null;\r\n\r\n\r\n // console.log('quoteDetail', quoteDetail);\r\n\r\n // const quote = quoteDetail.quote;\r\n // const productGroups = quote.productGroups;\r\n\r\n\r\n const toggleProductGroup = (productGroupID) => {\r\n setOpenGroups(prev => prev.includes(productGroupID) ? prev.filter(X => X !== productGroupID) : [...prev, productGroupID])\r\n }\r\n\r\n\r\n const { quote, productGroups } = quoteDetail;\r\n\r\n const lines = _.orderBy(quote.lines, ['item.productGroupID', 'item.itemNumber'], ['asc', 'asc']);\r\n\r\n\r\n\r\n const headers = productGroups.map(X => {\r\n const productgroupItems = lines.filter(I => I.item.productGroupID === X.productGroupID);\r\n const subTotal = _.sumBy(productgroupItems, 'linePrice').toFixed(2);\r\n const subTotalSelected = _.sumBy(productgroupItems.filter(X => X.validationID === 1), 'linePrice').toFixed(2);\r\n\r\n const open = OpenGroups.includes(X.productGroupID);\r\n return productgroupItems.length > 0 ? (\r\n - \r\n {\r\n productgroupItems.map(X =>
- \r\n {headers}\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n Basket Review \r\n
*/}\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n - \r\n {\r\n productGroups.map(PG => (\r\n
\r\n
\r\n {`${X} Months`}
}\r\n onChange={durationChange}\r\n input={}\r\n >\r\n {\r\n allMonths.map(M => (\r\n \r\n ))\r\n }\r\n \r\n - \r\n {/* {console.log(lines)} */}\r\n {\r\n lines.map(X =>
{`${X} Months`}
}\r\n onChange={durationChange}\r\n input={}\r\n >\r\n {\r\n allMonths.map(M => (\r\n \r\n ))\r\n }\r\n \r\n \r\n Select a Vessel \r\n
*/}\r\n \r\n \r\n
\r\n
\r\n - \r\n {\r\n vessels.map(V =>
\r\n
\r\n\r\n//
\r\n// )\r\n// }\r\n\r\n\r\nconst UploadButton = ({ text, FileSelected, accept }) => {\r\n // return (\r\n // \r\n
\r\n );\r\n};\r\n\r\nconst LoadingOne = () => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Loading;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { Box } from '@material-ui/core';\r\nimport Loading from '../Desktop/Misc/Loading';\r\nimport { useColumnStore } from '../../Global/Stores/columnStore';\r\nimport { useUserStore } from '../../Global/Stores/userStore';\r\n\r\nconst ContentColumn = ({ children, loaded, selectedID = null, access = false, disablePadding = false }) => {\r\n\r\n const [, columnActions] = useColumnStore();\r\n const [, userActions] = useUserStore();\r\n\r\n const [featureAccess, setFeatureAccess] = useState(false);\r\n\r\n const location = window.location.pathname;\r\n\r\n const id = selectedID === null ? new Date() : selectedID;\r\n\r\n useEffect(() => {\r\n const hasAccess = access || userActions.canAccessPath(window.location.pathname);\r\n setFeatureAccess(() => hasAccess);\r\n }, [])\r\n\r\n useEffect(() => {\r\n columnActions.addColumn(1);\r\n return () => {\r\n columnActions.addColumn(-1);\r\n };\r\n }, []);\r\n\r\n\r\n // console.log('location', window.location.pathname);\r\n\r\n const paddingClass = disablePadding === true ? 'disablePadding' : '';\r\n\r\n return useMemo(() => {\r\n // console.log('location', location);\r\n\r\n return featureAccess === true ? (\r\n \r\n Create new Route \r\n
\r\n\r\n \r\n\r\n
\r\n \r\n Route Name: \r\n {\r\n const val = X.target.value;\r\n setRouteName(() => val)\r\n }}\r\n margin=\"normal\"\r\n variant=\"outlined\"\r\n />\r\n
\r\n\r\n\r\n \r\n\r\n \r\n Add ports: \r\n X.name}\r\n getOptionValue={(X) => X}\r\n styles={{ width: '100%' }}\r\n className=\"basic-single\"\r\n classNamePrefix=\"select\"\r\n isSearchable={true}\r\n onInputChange={(X) => {\r\n OnPortFilterChange(X);\r\n }}\r\n menuIsOpen={canShowMenu}\r\n name=\"color\"\r\n value={\"\"}\r\n onChange={(X) => { AddPort(X) }}\r\n options={displayPorts}\r\n />\r\n\r\n
\r\n );\r\n\r\n }, [portFilterText, portCount])\r\n\r\n}\r\n\r\n\r\nexport const RoutingList = ({ RoutingPoints, ToggleRoutingPoint }) => {\r\n\r\n const openPoints = RoutingPoints.filter(X => X.open === true).length;\r\n\r\n return useMemo(() => {\r\n // console.log(\"RoutingList\", RoutingPoints);\r\n return (\r\n - \r\n {\r\n selectedPorts.map(P => (\r\n
\r\n Avoid places: \r\n
\r\n );\r\n\r\n }, [RoutingPoints, openPoints])\r\n\r\n}\r\n\r\nexport default RouteCreate;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Button, Dialog, DialogTitle, DialogContent, Typography, DialogActions, Box, TextField } from '@material-ui/core';\r\nimport AddSharpIcon from '@material-ui/icons/AddSharp';\r\nimport { PortList, RoutingList } from '../../Desktop/Sales/Catalogue/RouteCreate/RouteCreate';\r\nimport { useGlobalStore } from '../../../Global/Stores/globalStore';\r\nimport { useParams } from \"react-router\";\r\nimport httpService from '../../../Global/Services/httpService';\r\n\r\nconst CreateRouteButton = () => {\r\n\r\n const [open, setOpen] = React.useState(false);\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n return (\r\n - \r\n {\r\n RoutingPoints.map(P => (\r\n
\r\n Route Name: \r\n {\r\n const val = X.target.value;\r\n setRouteName(() => val)\r\n }}\r\n margin=\"dense\"\r\n variant=\"outlined\"\r\n />\r\n
\r\n\r\n\r\n {/* */}\r\n \r\n Add Items to basket \r\n
*/}\r\n {/* \r\n
*/}\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n ({ width, height }) => (\r\n\r\n \r\n
\r\n );\r\n}\r\n\r\n\r\nconst Row = ({ data, index, style }) => {\r\n const [, catalogueActions] = useCatalogueStore();\r\n\r\n const { listItems, selectedItemIDs, vesselItemIDs, focusedItemID } = data;\r\n\r\n const I = listItems[index];\r\n const itemID = Boolean(I) ? I.itemID : 0;\r\n\r\n const focused = itemID === focusedItemID;\r\n const selected = selectedItemIDs.includes(itemID);\r\n const inInventory = vesselItemIDs.some(Y => Y.itemID === itemID);\r\n\r\n return React.useMemo(() => {\r\n\r\n\r\n const handleItemChecked = (id) => {\r\n catalogueActions.toggleSelectedItem(id);\r\n }\r\n\r\n return (\r\n \r\n - \r\n
\r\n {!catalogueState.sourceRecord || catalogueState.sourceRecord.sourceRouteID?
\r\n \r\n \r\n
\r\n \r\n \r\n Select Product \r\n (PG ? \r\n {/*
\r\n );\r\n}\r\n\r\n// const ProductScaleSelector = ({ ProductGroup, CatalogueActions, catalogue, productItemGroups, selectedIDs }) => {\r\n\r\nconst ProductScaleSelector = () => {\r\n\r\n const [, globalActions] = useGlobalStore();\r\n // const { productGroups, productItemGroups: allItemGroups, catalogue } = globalState;\r\n\r\n const [catalogueState, catalogueActions] = useCatalogueStore();\r\n const { productGroup: PGID, productItemGroups: PGIDS } = catalogueState;\r\n\r\n const productScales = globalActions.getProductItemGroupsLocal(PGID);\r\n\r\n // console.log('productScales', productScales);\r\n\r\n // const selectedScales = selectedIDs;\r\n const disabled = productScales.length === 0;\r\n\r\n // const PGID = productGroup;\r\n const valid = PGID > 0 && productScales.length > 0;\r\n\r\n const inputLabel = React.useRef(null);\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n React.useEffect(() => {\r\n if (inputLabel.current) {\r\n setLabelWidth(inputLabel.current.offsetWidth);\r\n }\r\n }, [PGIDS, valid]);\r\n\r\n\r\n const handleScaleChange = (e) => {\r\n const newScales = e.target.value;\r\n catalogueActions.setProductItemGroups(newScales);\r\n }\r\n\r\n if (!valid)\r\n return null;\r\n\r\n\r\n return (\r\n {PG.code}
: Product)}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n selectableProductGroups ? null : \r\n }\r\n\r\n {\r\n selectableProductGroups && selectableProductGroups.map(PG => {\r\n const valid = catalogue.items.findIndex(X => X.productGroupID === PG.productGroupID) > -1;\r\n\r\n // console.log('ProductGroup', PG.productGroupID, valid, catalogue.items);\r\n\r\n return valid ? (\r\n \r\n ) : null;\r\n })\r\n }\r\n\r\n \r\n Scale [{PGIDS.length}/{productScales.length}]
}\r\n onChange={handleScaleChange}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n productScales && productScales.map(PIG => {\r\n\r\n const count = catalogueActions.getSelectedProductGroupItemCount(PIG.productItemGroupID);\r\n const checked = PGIDS.includes(PIG.productItemGroupID);\r\n\r\n const countText = count > 0 ? ` [${count}]` : \"\";\r\n\r\n return (\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n { catalogueActions.addSelectedItems(listItems); }}>All\r\n\r\n { catalogueActions.removeSelectedItems(listItems); }}>None\r\n\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n Basket Confirmation \r\n
*/}\r\n \r\n \r\n Please Note: once confirmed, the order will be processed immediately and can not be undone\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
*/}\r\n {/* */}
\r\n
\r\n
{showVesselName}
\r\n \r\n );\r\n}\r\n\r\nconst BasketSelectVesselButton = ({ Vessel }) => {\r\n const [basketState,] = useBasketStore();\r\n const vesselID = basketState.vesselID;\r\n const selected = vesselID > 0;\r\n const text = \"Vessels\"; //Vessel ? ` ${Vessel.vesselName}` : `Vessel`;\r\n\r\n return (\r\n\r\n \r\n {Text} \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nconst SaveManagerBasket = () => {\r\n return (\r\n
\r\n 180 ? \"pie-order big\" : \"pie-order\"}\r\n data-start={chartData.open.start}\r\n data-value={chartData.open.length}>
\r\n {orders.length}
\r\n \r\n );\r\n }, [orders.length]);\r\n};\r\n\r\nexport default OrderStatusVessel;\r\n","import React, { useEffect, useMemo } from 'react';\r\nimport { Collapse, List } from '@material-ui/core';\r\nimport _ from 'lodash';\r\n// import storage from 'store';\r\nimport OrderStatusVessel from '../../../Widgets/OrderStatusVessel';\r\nimport ListItemVessel from '../../_StyledComponents/ListItemVessel';\r\nimport { ListItemSubOrder } from '../../_StyledComponents/ListItemSub';\r\n\r\nconst VesselOrders = ({ vesselOrders, selectedSalesOrderID }) => {\r\n\r\n const key = `VOL${vesselOrders.vesselID}`;\r\n const openLoad = JSON.parse(sessionStorage.getItem(key)) || false;\r\n\r\n // console.log('openLoad', openLoad)\r\n\r\n const [open, setOpen] = React.useState(openLoad);\r\n useEffect(() => { sessionStorage.setItem(key, open); }, [open]);\r\n\r\n const orders = _.orderBy(vesselOrders.orders, ['reference'], ['desc']);\r\n\r\n\r\n return (\r\n- \r\n {\r\n orders.map(X => (
\r\n // setOpen(!open)} selected={open}>\r\n // \r\n // \r\n // \r\n // \r\n // \r\n //
\r\n // );\r\n};\r\n\r\n\r\n// const VesselOrder = ({ order, selected }) => {\r\n\r\n\r\n// return useMemo(() => {\r\n// // console.log('Selected', selected);\r\n// const to = `/sales/orders/${order.salesOrderID}`;\r\n\r\n// return ((\r\n// \r\n// - \r\n // {\r\n // orders.map(X => (
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels.map(X => (
\r\n
- \r\n {\r\n productgroupItems.map(X =>
- \r\n {headers}\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n - \r\n {\r\n vesselShipments.map(X => (\r\n
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n loaded ? (\r\n
\r\n
\r\n \r\n {\r\n loaded ? (\r\n
- \r\n {\r\n vessels.map(X => (
\r\n
\r\n
\r\n\r\n {/* \r\n contentColumnFilter\r\n
*/}\r\n\r\n \r\n
\r\n
\r\n
\r\n\r\n {/* \r\n
\r\n
contentColumnFooter
*/}\r\n - \r\n {\r\n globalState.productGroups.map(PG => (\r\n
- \r\n {\r\n lines.map(X =>
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels.map(X => (
\r\n
- \r\n {\r\n vesselFlatFees.map(X => (\r\n
\r\n
\r\n\r\n \r\n
- \r\n {\r\n flatFeeOrderSort.map(X =>
\r\n
\r\n
\r\n\r\n {/* \r\n contentColumnFilter\r\n
*/}\r\n\r\n \r\n
\r\n
contentColumnFooter
*/}\r\n - \r\n {\r\n // globalState.productGroups.map(PG =>
{PG.caption}
)\r\n globalState.productGroups.map(PG => (\r\n - \r\n {\r\n //lines.map(L =>
{L.item.itemNumber}
)\r\n lines.map(X => \r\n
\r\n \r\n Add Licenses \r\n
*/}\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n\r\n \r\n
Scale [{selectedScaleIDs.length}/{productScales.length}]
}\r\n onChange={handleScaleChange}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n productScales && productScales.map(PIG => {\r\n\r\n // const count = catalogueActions.getSelectedProductGroupItemCount(PIG.productItemGroupID);\r\n // const count = 1;\r\n const checked = selectedScaleIDs.includes(PIG.productItemGroupID);\r\n\r\n // const countText = count > 0 ? ` [${count}]` : \"\";\r\n\r\n return (\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n {\r\n ({ width, height }) => (\r\n\r\n \r\n
\r\n );\r\n}\r\n\r\nconst AvcsoItemListRow = ({ data, index, style }) => {\r\n // const history = useHistory();\r\n const [, globalActions] = useGlobalStore();\r\n const [, avcsoActions] = useAvcsoStore();\r\n\r\n const { listItems, selectedItemIDs, vesselItemIDs, focusedItemID } = data;\r\n\r\n const item = listItems[index];\r\n const itemID = item.itemID;\r\n //const item = Boolean(I) ? I.itemID : 0;\r\n\r\n\r\n //console.log('I', item, itemID);\r\n // console.log('I', itemID, focusedItemID);\r\n\r\n // const vesselItemIDs = licenseLines.map(X => X.itemID);\r\n\r\n const focused = itemID === focusedItemID;\r\n const selected = selectedItemIDs.includes(itemID);\r\n const inInventory = vesselItemIDs.includes(itemID);\r\n\r\n return React.useMemo(() => {\r\n\r\n // const item = globalActions.getCatalogueItem(itemID);\r\n //console.log('Row', itemID, item, focused);\r\n\r\n if (itemID <= 0 || !Boolean(item)) {\r\n return null;\r\n }\r\n\r\n const handleItemChecked = (id) => {\r\n avcsoActions.toggleSelectedItem(id);\r\n }\r\n\r\n return (\r\n \r\n - \r\n
\r\n \r\n \r\n \r\n
)\r\n\r\n}\r\n\r\nexport default AVCSO_SelectItems;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { useAvcsoStore } from '../../../../Global/Stores/avcsoStore';\r\nimport ContentColumn from '../../Custom/ContentColumn';\r\nimport { Typography, Select, FormControl, Input, MenuItem, ListItemText, ListItem, ListItemIcon, Chip, List, Link, ListItemSecondaryAction, IconButton, Button, Divider } from '@material-ui/core';\r\nimport { useGlobalStore } from '../../../../Global/Stores/globalStore';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport { useParams } from \"react-router\";\r\nimport _ from 'lodash';\r\n\r\nconst AVCSO_BasketReview = () => {\r\n\r\n const [, globalActions] = useGlobalStore();\r\n const [avcsoState, avcsoActions] = useAvcsoStore();\r\n\r\n // const selectedItemID = +match.params.itemID || 0;\r\n\r\n // console.log('selectedItemID', selectedItemID);\r\n\r\n useEffect(() => {\r\n // const { selectedItems, vesselID } = saleState.catalogue;\r\n // if (vesselID > 0)\r\n avcsoActions.getBasketPrices();\r\n }, []);\r\n\r\n\r\n const itemsLoaded = globalActions.isLoaded();\r\n\r\n // const productGroups = _.get(globalState, 'catalogue.productGroups', []);\r\n // const { basketLines, productItemGroups } = avcsoState;\r\n // const listItems = basketLines || [];\r\n \r\n\r\n if (avcsoState.basketLines.length === 0) {\r\n return \r\n Basket Review
\r\n
*/}\r\n\r\n \r\n
\r\n {/* contentColumnFilter */}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n {`${X} Months`}
}\r\n onChange={durationChange}\r\n input={}\r\n >\r\n {\r\n allMonths.map(M => (\r\n \r\n ))\r\n }\r\n \r\n - \r\n {\r\n basketLines.map(X =>
\r\n AVCSO Confirmation \r\n
*/}\r\n\r\n \r\n Please Note: once confirmed, the order will be processed immediately and can not be undone \r\n
\r\n\r\n \r\n
\r\n \r\n {\r\n hasLicense ?
\r\n {/*
\r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n
- */}\r\n
\r\n AVCS Online \r\n
*/}\r\n\r\n \r\n \r\n With AVCS online you can now view official UKHO ENC’s directly in your web browser.\r\n This allows you to verify the safety of intended routes for your vessels, while looking at the same charts as on board.\r\n
\r\n A standard AVCS Online license grants access to all ENC’s in band 1.\r\n
\r\n Additional ENC coverage can be purchased and added to your AVCS Online license, should this be required.\r\n
\r\n AVCS Online is the easiest way to have updated ENC’s available to you at any time, anywhere you are.\r\n \r\n
\r\n\r\n\r\n -\tIn depth insight for maritime professionals -\r\n \r\n
\r\n\r\n \r\n A standard AVCS Online license grants access to all ENC’s in band 1.\r\n
\r\n Additional ENC coverage can be purchased and added to your AVCS Online license, should this be required.\r\n
\r\n AVCS Online is the easiest way to have updated ENC’s available to you at any time, anywhere you are.\r\n
\r\n\r\n
\r\n
\r\n \r\n Request more information\r\n
\r\n );\r\n}\r\n\r\nexport default AVCSO\r\n","import React from 'react'\r\nimport { Route } from \"react-router-dom\";\r\n\r\n// Breadcrumb\r\nimport Breadcrumb from '../Navigation/Breadcrumb';\r\n\r\n// Support Files\r\nimport AVCSO from './AVCSO/AVCSO';\r\n// import AVCSO_SelectItems from './AVCSO/AVCSO_SelectItems';\r\n// import AVCSO_BasketReview from './AVCSO/AVCSO_BasketReview';\r\n// import AVCSO_BasketConfirm from './AVCSO/AVCSO_BasketConfirm';\r\n\r\nconst AVCSOnline = () => {\r\n\r\n return(\r\n \r\n
\r\n );\r\n }, [productGroupStatus]);\r\n};\r\n\r\n\r\nexport const HoldingStatus = ({ vesselProductGroupStatus }) => {\r\n\r\n // console.log('HoldingStatus', vesselProductGroupStatus);\r\n\r\n const itemCount = _.sumBy(vesselProductGroupStatus, \"itemCount\") || 0;\r\n\r\n return useMemo(() => {\r\n const itemIssueCount = _.sumBy(vesselProductGroupStatus, \"itemIssueCount\") || 0;\r\n const updateIssueCount = _.sumBy(vesselProductGroupStatus, \"updateIssueCount\") || 0;\r\n const itemWarningCount = _.sumBy(vesselProductGroupStatus, \"itemWarningCount\") || 0;\r\n const updateWarningCount = _.sumBy(vesselProductGroupStatus, \"updateWarningCount\") || 0;\r\n\r\n\r\n // console.log('Counts', itemIssueCount, updateIssueCount, itemWarningCount, updateWarningCount);\r\n\r\n // const { itemCount, itemIssueCount, updateIssueCount, itemWarningCount, updateWarningCount } = vesselProductGroupStatus;\r\n const total = itemCount;\r\n const issues = total > 0 ? Math.ceil(((itemIssueCount + updateIssueCount) * (1 / total) * 360)) : 0;\r\n const warnings = total > 0 ? Math.ceil(((itemWarningCount + updateWarningCount) * (1 / total) * 360)) : 0;\r\n const open = Math.max(360 - (issues + warnings), 0);\r\n\r\n const tooltip = `Warnings: ${itemWarningCount + updateWarningCount}\\nIssues: ${itemIssueCount + updateIssueCount}`;\r\n\r\n return (\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={0} data-value={open}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open} data-value={warnings}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings} data-value={issues}>
\r\n {total}
\r\n\r\n
\r\n );\r\n }, [itemCount]);\r\n};\r\n\r\n\r\nexport const HoldingLinesStatus = ({ lines }) => {\r\n // console.log('HoldingStatus', lines);\r\n const itemCount = lines.length;\r\n\r\n return useMemo(() => {\r\n\r\n const inactiveCount = lines.filter(X => !X.active).length;\r\n\r\n const itemIssueCount = lines.filter(X => X.active && X.itemIssue).length;\r\n const updateIssueCount = lines.filter(X => X.active && X.updateIssue).length;\r\n\r\n const itemWarningCount = lines.filter(X => X.active && X.itemWarning).length;\r\n const updateWarningCount = lines.filter(X => X.active && X.updateWarning).length;\r\n\r\n\r\n //console.log('Counts Lines', lines);\r\n // console.log('Counts', { itemCount, inactiveCount, Issues: (itemIssueCount + updateIssueCount), Warnings: (itemWarningCount + updateWarningCount)});\r\n\r\n // const { itemCount, itemIssueCount, updateIssueCount, itemWarningCount, updateWarningCount } = lines;\r\n const total = itemCount;\r\n const issues = Math.ceil(((itemIssueCount + updateIssueCount) * (1 / total) * 360));\r\n const warnings = Math.ceil(((itemWarningCount + updateWarningCount) * (1 / total) * 360));\r\n const inactive = Math.ceil((inactiveCount * (1 / total) * 360));\r\n const open = Math.max(360 - (issues + warnings + inactive), 0);\r\n\r\n \r\n //console.log('Counts', { total, inactiveCount, issues, warnings, inactive, open});\r\n\r\n const tooltip = `Warnings: ${itemWarningCount + updateWarningCount}\\nIssues: ${itemIssueCount + updateIssueCount}\\nInactive: ${inactiveCount}`;\r\n\r\n return (\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={0} data-value={open}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open} data-value={warnings}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings} data-value={issues}>
\r\n {total}
\r\n\r\n
\r\n );\r\n}, [itemCount]);\r\n};\r\n\r\nexport default ProductGroupStatus;\r\n","import React, { useEffect } from 'react';\r\nimport { Box, List, Divider } from '@material-ui/core';\r\nimport SearchFilter from '../../Misc/SearchFilter';\r\nimport { useFleetStore } from '../../../../Global/Stores/fleetStore';\r\nimport Loading from '../../Misc/Loading';\r\nimport _ from 'lodash';\r\nimport VesselProductGroups from './VesselProductGroups';\r\nimport ContentColumn from '../../Custom/ContentColumn';\r\nimport ListItemVessel from '../../_StyledComponents/ListItemVessel';\r\nimport { HoldingStatus } from '../../../Widgets/ProductGroupStatus';\r\n\r\nconst Holdings = ({ match }) => {\r\n\r\n const [fleetState] = useFleetStore();\r\n const [filter, setFilter] = React.useState('');\r\n const [sort, setSort] = React.useState(1);\r\n\r\n\r\n const selectedVesselID = +match.params.vesselID || 0;\r\n // console.log('match', selectedVesselID);\r\n\r\n // const salesOrderID = 0;\r\n\r\n const onSearch = (text) => {\r\n setFilter(() => { return text.toLowerCase(); })\r\n };\r\n\r\n\r\n const loaded = Boolean(fleetState.vessels);\r\n let vessels = loaded ? fleetState.vessels.filter(X => X.vesselName.toLowerCase().indexOf(filter) !== -1) : [];\r\n\r\n vessels = _.orderBy(vessels, ['vesselName'], [sort > 0 ? 'asc' : 'desc']);\r\n\r\n\r\n const counter = selectedVesselID + filter.length + sort;\r\n return (\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={0} data-value={open}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open} data-value={warnings}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings} data-value={issues}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings + issues} data-value={inactive}>
\r\n {total}
\r\n\r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels.map(X => (\r\n
\r\n \r\n
\r\n
\r\n );\r\n }, [detailState, vesselID, item]);\r\n}\r\n\r\nconst CorrectionItemStatus = ({ correctionItem }) => {\r\n\r\n const updateClass = getHoldingStatusClass(correctionItem.issue, correctionItem.warning);\r\n return (\r\n - \r\n {headers}\r\n
- \r\n {\r\n productgroupItems.map(X =>
\r\n {/* OK, Warning, Error */}\r\n
\r\n {/* */}\r\n {/* Scale [{selectedPIGs}/{selectableProductItemGroups.length}]
}\r\n // rowsMax={10}\r\n onChange={scaleChange}\r\n input={}\r\n >\r\n {\r\n selectableProductItemGroups.map(PG => (\r\n \r\n ))\r\n }\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n loaded ? (\r\n
\r\n \r\n {\r\n loaded ? (\r\n
- \r\n {\r\n\r\n vessels\r\n .filter(X => (X.vesselName.toLowerCase().indexOf(filter) !== -1))\r\n .map(X => (\r\n
\r\n
\r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels\r\n .filter(X => (X.vesselName.toLowerCase().indexOf(filter) !== -1))\r\n .map(X => (\r\n
\r\n
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n
\r\n {\r\n
\r\n \r\n {\r\n
- \r\n {\r\n vessels\r\n .map(X => (\r\n
\r\n
\r\n \r\n\r\n \r\n {/*
\r\n );\r\n}\r\n\r\nconst VesselDetailsHeader = ({ VesselID }) => {\r\n const [globalState, globalActions] = useGlobalStore();\r\n\r\n const { vessels } = globalState;\r\n return useMemo(() => {\r\n const vessel = globalActions.findVessel(VesselID) || {};\r\n return (\r\n \r\n \r\n {/* \r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {inputLabel} \r\n \r\n {\r\n countDataResults <= 0 ?\r\n \r\n :\r\n dataList.map(X => (\r\n inputType === \"managers\"?\r\n \r\n :\r\n \r\n ))\r\n }\r\n \r\n \r\n
\r\n );\r\n // }\r\n // else\r\n // {\r\n // return (null);\r\n // }\r\n};\r\n\r\nexport default SelectList;\r\n","import React, { useMemo } from 'react';\r\nimport { ListItem, ListItemText, Chip, Divider, Link, makeStyles } from '@material-ui/core';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport NumberStatus from '../../Widgets/NumberStatus';\r\n// import _ from 'lodash';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n link: {\r\n color: 'inherit',\r\n textDecoration: 'none',\r\n },\r\n listItem: {\r\n // backgroundColor: '#e9edf7',\r\n textDecoration: 'none',\r\n },\r\n});\r\n\r\nconst ListFoilioItems = ({ vessel, subText, number, numberSmall, open, subSelectedID, children, setOpen, onClick, statusComponent, linkTo, selected }) => {\r\n const classes = useStyles();\r\n\r\n // return useMemo(() => {\r\n\r\n const handleClick = () => {\r\n\r\n if (onClick) {\r\n onClick(vessel.vesselID);\r\n }\r\n\r\n\r\n if (children) {\r\n setOpen(!open);\r\n }\r\n\r\n }\r\n //Convert to upper case\r\n const vesselName = vessel.vesselName.toUpperCase();\r\n\r\n const listItem = (\r\n \r\n {companyList.length > 1 ?\r\n
\r\n\r\n \r\n
\r\n :null\r\n }\r\n \r\n {/* Select Folios */}\r\n {selectedManagerID != 0 ?\r\n \r\n
\r\n :null}\r\n\r\n {selectedFolioID != 0 ?\r\n \r\n setSort(() => S)} />\r\n
\r\n :null}\r\n \r\n {\r\n
- \r\n {\r\n selectedFolioID != 0 ?\r\n vessels.map(X => (\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default Folio;\r\n","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport ArrowBack from '@material-ui/icons/ArrowBack';\r\nimport SaveIcon from '@material-ui/icons/SaveAlt';\r\nimport { IconButton, Divider, ListItemText, FormControlLabel } from '@material-ui/core';\r\nimport MailTo, { MailHoldingDetailTo } from '../../../Misc/MailTo';\r\n// import OrderStatus from '../../../Widgets/OrderStatus';\r\nimport { HoldingLinesStatus } from '../../../../Widgets/ProductGroupStatus';\r\nimport { DownloadHoldings } from '../../../Misc/DownloadFile';\r\n\r\nconst FolioItemDetailHeader = ({ managerID, folioID, holdingDetail, history }) => {\r\n\r\n if (!holdingDetail) return null;\r\n\r\n \r\n const handleBack = () => {\r\n //const url = history.location.pathname;\r\n //const uurl = url.substring(-1, url.lastIndexOf(\"/\")); // remove Vessel ID\r\n //const popLink = uurl.substring(-1, uurl.lastIndexOf(\"/\")); // remove /details\r\n history.push(`/folios/status/${managerID}/${folioID}`);\r\n }\r\n\r\n return (\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={0} data-value={open}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open} data-value={warnings}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings} data-value={issues}>
\r\n {itemsMissing}
\r\n */}\r\n \r\n \r\n \r\n\r\n {/* */}\r\n\r\n {/*
*/}\r\n {holdingDetail.vessel.vesselItems.length}
*/}\r\n\r\n\r\n {/* - \r\n {\r\n holdingDetail.map(X => \r\n
- \r\n// {\r\n// lines.map(X =>
- \r\n//
- \r\n// {\r\n// // lines.map(X =>
\r\n
\r\n\r\n {/* \r\n
*/}\r\n\r\n \r\n
\r\n \r\n {`Details`} \r\n
\r\n\r\n \r\n {\r\n newsItem && (\r\n \r\n {newsItem.title} \r\n \r\n {ReactHtmlParser(newsItem.message)}\r\n \r\n \r\n
\r\n Posted on: \r\n \r\n )\r\n }\r\n
\r\n \r\n Posted on:
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default News;\r\n","import React from 'react'\r\n// import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router-dom'\r\nimport { Link, useHistory } from \"react-router-dom\";\r\n\r\n////// Images\r\nimport pageNotFoundBG from './Images/OldShip-Fading.jpg';\r\n\r\n\r\n////// Material UI\r\nimport {Button } from '@material-ui/core';\r\n\r\nconst PageNotFound = () => {\r\n \r\n // let children = \"hey\";\r\n function BackButton() {\r\n let history = useHistory()\r\n // console.log(history.length);\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default PageNotFound","import React from 'react'\r\nimport { BrowserRouter as Router, Switch, Route, Redirect } from \"react-router-dom\";\r\n\r\n// Universal Views\r\nimport BottomNav from './Navigation/BottomNav';\r\nimport TopNav from './Navigation/TopNav';\r\nimport FloatingMenuButton from './Navigation/FloatingMenuButton';\r\nimport MenuCategory from './Navigation/MenuCategory';\r\n\r\n// Content Files\r\n///// Account Management\r\nimport AccountSettings from './AccountManagement/AccountSettings';\r\n\r\n////// Home\r\nimport Home from './Home';\r\n\r\n////// Help\r\nimport Help from './Help';\r\n\r\n/////Order Management\r\nimport QuotationsApprove from './Sales/Order.QuotationsApprove';\r\nimport Catalogue from './Sales/Order.CatalogueSales';\r\nimport OrderHistory from './Sales/Order.History';\r\nimport ShipmentTracking from './Sales/Order.ShipmentTracking';\r\nimport FlatFeeContracts from './Sales/Order.FlatFeeContracts';\r\nimport AVCSO from './Sales/AVCSOnline';\r\n\r\n/////Fleet Management\r\nimport FleetHoldings from './FleetManagement/Fleet.Holdings';\r\nimport FleetStatus from './FleetManagement/Fleet.Status';\r\nimport NavigatorUpdates from './FleetManagement/Fleet.NavigatorUpdates';\r\nimport FleetTracking from './FleetManagement/Fleet.Tracking';\r\nimport FleetOverview from './FleetManagement/Fleet.Overview';\r\n\r\n//////Folio Management\r\nimport Folios from './Folios/Folios';\r\n\r\n\r\n////// News\r\nimport News from './News/News';\r\n\r\n////// Image Imports\r\n// import pageNotFoundBG from './Images/OldShip-Fading.jpg';\r\n\r\n////// CSS Files\r\nimport mainStyles from './CSS/MainStyles.module.css';\r\n\r\n////// Load Config Files\r\nimport MobileConfig from '../../Global/Data/Config';\r\n// import StatusCodes from '../../Global/Data/StatusCodes';\r\n\r\n////// 404 Page\r\nimport PageNotFound404 from './404';\r\n\r\n// let EG200 = \"Hey there\";\r\n\r\n// console.log(window);\r\n// console.log(window.screen.width+\"||\"+window.screen.height);\r\n/*\r\nPROJECT: Chart Track Ship Management System - Mobile Version\r\nPROJECT FILE(S): /Mobile, ../Global\r\nSTART DATE: January 23, 2020 : 12:34:20\r\nMODIFIED: March 26, 2021 : 09:09:10 (Folio Status included)\r\nDEVELOPER(S) Emmanuel Eshun-Davies, \r\n\r\nNOTES:\r\n- Due to floating button, content must always have -> Bottom: 20% for styling in order to allow reading last content\r\n- Navigation data loop when console logged, seems to print at every click. Possible cause to look into should final app run slow\r\n- Updated Menu.js file to include \"to:\" parameters to the subItems. \r\n\r\nKNOWN BUGS:\r\n- on the iphone, the input boxes at the top (example case: folio status); the inputs seem to move when touched and scrolled.\r\n This is unusual because on android, same behavior has not been recorded. might be a Material-UI thing but we will figure out\r\n a solution\r\n\r\nFIXES:\r\n- set the border definitions in Components/Custom/ContentColumn.jsx to 0\r\n- Global/Data/Menu.jsx updated as found from Menu Summary Cards\r\n\r\nTODO NOW:\r\n- Password reset and support page\r\n\r\nTODO FUTURE:\r\n- Add loading feature so with heavy data, user is not forced to watch a blank white painful endless screen\r\n- Setup error codes and definition file\r\n- Make Bottom Menu Dynamic to a config file.\r\n- To prevent several clicks on the tracking information request, disable button after request click\r\n\r\nTODO END OF DEVELOPMENT (Well Development never really ends but end of version :D )\r\n- Detect device and screen size then decide which version of app to show.\r\n\r\nSTATUS MESSAGES\r\nStatus message is a tiny component used to display messages to the user.\r\nStatusMessage is in the Mobile/ Directory with File Name StatusMessage.jsx\r\n\r\nIt is initiated with value props of\r\n- messageTitle: Title of message that appears at the title of the modal/dailog page\r\n- messageBody: Displays intended body or message\r\n- actionLink: takes the intended URL Link to navigate to when user clicks. (It is likely this is upgraded to take an array of buttons in the future should that be required)\r\n- actionTitle: takes the display value of the button. in the likely case where the button is turned to an array, this must be included. they work together\r\n- showActions: takes bolean (true/false) to display title\r\neg:\r\n 404 Error!
\r\n oops! We could not find the page you requested for.
\r\n Where Do you want to sail to?\r\n
\r\n {/*Top Menu: Displays Main Menu, Active User Full Name, Active User Shipment Company*/}\r\n
\r\n \r\n
\r\n {/*Content Area: Will take care of displaying the content area of the view. *May contain other sectors*/}\r\n \r\n
\r\n {/* URL remains /login after successful login so I fixed it with this */}\r\n { (window.location.pathname === \"/login\") ?\r\n \r\n
\r\n
\r\n \r\n {/* URL remains /login after successful login so I fixed it with this */}\r\n { (window.location.pathname === \"/login\") ?
\r\n
\r\n
\r\n {/*Bottom Menu: Holds Bottom Menu with default quick menu items defined per the most likely used menus by users*/} \r\n \r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n {MobileConfig.Shutdown.Header}
\r\nStatus Code\r\n
{MobileConfig.Shutdown.Code}
Event\r\n
[Code {MobileConfig.Shutdown.Code}] {MobileConfig.Shutdown.ShortDescription}
Details:\r\n
{MobileConfig.Shutdown.LongDescription}
Resolve:\r\n
{MobileConfig.Shutdown.Resolve}
{window.navigator.oscpu}
\r\n \r\n \r\n \r\n\r\n {/*
\r\n );\r\n};\r\n\r\n// export const MenuItemLink = (to, caption) => {\r\n// return (\r\n// \r\n// \r\n// );\r\n// }\r\n\r\n\r\nexport default NavIconAccount;\r\n","import React, { useMemo } from 'react';\r\nimport CT_Logo from \"./../../../../src/Images/CT-logo-transparant.png\";\r\nimport { makeStyles } from '@material-ui/core';\r\nimport { withRouter } from \"react-router\";\r\n\r\n\r\nconst useStyles = makeStyles({\r\n logo: {\r\n height: '42px',\r\n '&:hover': {\r\n cursor: 'pointer'\r\n }\r\n }\r\n});\r\n\r\nconst NavBarLogo = ({ history }) => {\r\n const classes = useStyles();\r\n\r\n return useMemo(() => {\r\n\r\n const goHome = () => {\r\n history.push(\"/home\");\r\n }\r\n\r\n return (\r\n
\r\n )\r\n}\r\n\r\nexport default Breadcrumb","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Menu from '../../../Global/Data/Menu';\r\nimport NavMenuItem from './NavMenuItem';\r\nimport NavIconAccount from './NavIconAccount';\r\nimport NavBarLogo from './NavBarLogo';\r\nimport NavIconHelp from './NavIconHelp';\r\nimport NavBreadCrumbs from './NavBarBreadCrumbs';\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n backgroundColor: '#FFFFFF',\r\n color: '#4d4d4d',\r\n fontSize: '1rem',\r\n letterSpacing: '4px',\r\n },\r\n flexFill: {\r\n flex: 1,\r\n }\r\n});\r\n\r\n\r\n\r\n//console.log(Menu);\r\nconst NavBar = ({Module, currentPage}) => {\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n You are here: {newModule} {divider} {newCurrentPage}
\r\n */}\r\n {/* SM */}\r\n {/* 
*/}\r\n {/*
*/}\r\n\r\n - \r\n
- \r\n\r\n
- \r\n\r\n {\r\n newsItems.map(X => (
\r\n
\r\n );\r\n};\r\n\r\n\r\n// Desktop View\r\nconst onMobileView = () => {\r\n // setAnchorEl(null);\r\n localStorage.setItem('isMobile', 'mobile');\r\n window.location.reload(true);\r\n\r\n }\r\n\r\n //Switch to mobile display content\r\nconst SwitchToMobile = () => {\r\n\r\n if (window.screen.width < 700 && window.screen.height < 900 || window.screen.width < 900 && window.screen.height < 700)\r\n {\r\n return (\r\n \r\n
\r\n - \r\n {\r\n orders.map(X => (
\r\n // setOpen(!open)} selected={open}>\r\n // \r\n // \r\n // \r\n // \r\n // \r\n //
\r\n // );\r\n};\r\n\r\n\r\n// const VesselOrder = ({ order, selected }) => {\r\n\r\n\r\n// return useMemo(() => {\r\n// // console.log('Selected', selected);\r\n// const to = `/sales/orders/${order.salesOrderID}`;\r\n\r\n// return ((\r\n// \r\n// - \r\n // {\r\n // orders.map(X => (
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels.map(X => (
\r\n {/* Order Management */}\r\n
\r\n\r\n \r\n
\r\n - \r\n
- \r\n
- \r\n {\r\n // quotes.map(X => (
\r\n setFilter(() => F.toLowerCase())}\r\n onSort={(S) => setSort(() => S)}\r\n />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels.map(X => (
Group
\r\n Number
\r\n \r\n Price
\r\n \r\n Total
\r\n Duration
*/}\r\n \r\n
\r\n\r\n \r\n {/*
\r\n \r\n
\r\n\r\n \r\n
\r\n - \r\n {\r\n productgroupItems.map(X =>
- \r\n {headers}\r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n }, [total, accepted, rejected, open]);\r\n\r\n};\r\n\r\nexport default QuoteStatus;\r\n","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport BackIcon from '@material-ui/icons/ArrowBack';\r\nimport { IconButton, Divider, ListItemText } from '@material-ui/core';\r\nimport { MailQuoteDetailTo } from '../../../Misc/MailTo';\r\nimport QuoteStatus from '../../../../Widgets/QuoteStatus';\r\nimport { DownloadQuote } from '../../../Misc/DownloadFile';\r\n\r\nconst QuoteDetailHeader = ({ quoteDetail, history }) => {\r\n\r\n if (!quoteDetail || !quoteDetail.quote) return null;\r\n\r\n const { quote } = quoteDetail;\r\n\r\n const handleBack = () => {\r\n const url = history.location.pathname;\r\n const popLink = url.substring(0, url.lastIndexOf(\"/\"));\r\n history.push(popLink);\r\n }\r\n\r\n return (\r\n 180 ? \"pie-quote big\" : \"pie-quote\"} data-start={0} data-value={accepted}>
\r\n 180 ? \"pie-quote big\" : \"pie-quote\"} data-start={accepted} data-value={rejected}>
\r\n 180 ? \"pie-quote big\" : \"pie-quote\"} data-start={accepted + rejected} data-value={open}>
\r\n {total}
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default ValidationWidget;\r\n","import React, { useState } from 'react';\r\nimport { List, ListItem, ListItemText, ListItemIcon, Collapse, ListItemSecondaryAction, IconButton, Link } from '@material-ui/core';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport ValidationWidget from '../../../Misc/ValidationWidget';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport _ from 'lodash'\r\n\r\nconst QuoteDetailList = ({ selectedLineID, quoteDetail, salesActions }) => {\r\n\r\n //console.log('quoteDetail', quoteDetail)\r\n\r\n const [OpenGroups, setOpenGroups] = useState((quoteDetail ? quoteDetail.productGroups.map(X => X.productGroupID) : []));\r\n\r\n if (!quoteDetail || !quoteDetail.quote) return null;\r\n\r\n\r\n // console.log('quoteDetail', quoteDetail);\r\n\r\n // const quote = quoteDetail.quote;\r\n // const productGroups = quote.productGroups;\r\n\r\n\r\n const toggleProductGroup = (productGroupID) => {\r\n setOpenGroups(prev => prev.includes(productGroupID) ? prev.filter(X => X !== productGroupID) : [...prev, productGroupID])\r\n }\r\n\r\n\r\n const { quote, productGroups } = quoteDetail;\r\n\r\n const lines = _.orderBy(quote.lines, ['item.productGroupID', 'item.itemNumber'], ['asc', 'asc']);\r\n\r\n\r\n\r\n const headers = productGroups.map(X => {\r\n const productgroupItems = lines.filter(I => I.item.productGroupID === X.productGroupID);\r\n const subTotal = (_.sumBy(productgroupItems, 'linePrice') || 0).toFixed(2);\r\n const subTotalSelected = (_.sumBy(productgroupItems.filter(X => X.validationID === 1), 'linePrice') || 0).toFixed(2);\r\n\r\n const open = OpenGroups.includes(X.productGroupID);\r\n return productgroupItems.length > 0 ? (\r\n - \r\n {\r\n productgroupItems.map(X =>
- \r\n {headers}\r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Create new order \r\n
\r\n\r\n \r\n 1. Select a vessel: \r\n X.vesselName}\r\n getOptionValue={(X) => X}\r\n styles={{ width: '100%' }}\r\n className=\"basic-single\"\r\n classNamePrefix=\"select\"\r\n isSearchable={true}\r\n name=\"color\"\r\n value={vessel}\r\n onChange={(X) => { handleVesselSelect(X) }}\r\n options={vessels}\r\n />\r\n
*/}\r\n\r\n\r\n\r\n {/* 2. Add items to basket */}\r\n {/* \r\n\r\n 2. Add items to basket: \r\n
\r\n\r\n\r\n - \r\n\r\n
\r\n
\r\n - \r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nconst SaveManagerBasket = () => {\r\n return (\r\n Basket Review \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n - \r\n {\r\n productGroups.map(PG => (\r\n
\r\n
\r\n {`${X} Months`}
}\r\n onChange={durationChange}\r\n input={}\r\n >\r\n {\r\n allMonths.map(M => (\r\n \r\n ))\r\n }\r\n \r\n - \r\n {\r\n lines.map(X => \r\n // This was to ensure that existing items are not ordered twice. so it simply takes it out\r\n // Plan was to also include a popup message. but this has been replaced\r\n // with a check at the point of adding items. disables existing items\r\n // holdingItems.some(Y => Y.itemID === X.itemID) ?\r\n // basketActions.removeBasketItems([X.itemID])\r\n // :\r\n
- \r\n {\r\n vesselShipments.map(X => (\r\n
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n loaded ? (\r\n
\r\n - \r\n {\r\n vessels.map(X => (
\r\n
\r\n\r\n {/* \r\n contentColumnFilter\r\n
*/}\r\n\r\n \r\n
\r\n\r\n {/* contentColumnFooter
*/}\r\n - \r\n {\r\n globalState.productGroups.map(PG => (\r\n
- \r\n {\r\n lines.map(X =>
\r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels.map(X => (
- \r\n {\r\n vesselFlatFees.map(X => (\r\n
\r\n
\r\n\r\n \r\n
\r\n - \r\n {\r\n flatFeeOrderSort.map(X =>
\r\n
\r\n\r\n {/* \r\n contentColumnFilter\r\n
*/}\r\n\r\n \r\n
\r\n\r\n {/* contentColumnFooter
*/}\r\n - \r\n {\r\n // globalState.productGroups.map(PG =>
{PG.caption}
)\r\n globalState.productGroups.map(PG => (\r\n - \r\n {\r\n //lines.map(L =>
{L.item.itemNumber}
)\r\n lines.map(X => \r\n
\r\n\r\n \r\n
\r\n \r\n Select a Vessel \r\n
\r\n\r\n \r\n
\r\n - \r\n {\r\n vessels.map(V =>
\r\n Add Items to basket \r\n
*/}\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n ({ width, height }) => (\r\n\r\n \r\n
\r\n - \r\n
{selectedquote}
\r\n\r\n return useMemo(() => {\r\n const quoteID = selectedquote ? selectedquote.salesQuoteID : 0;\r\n\r\n // console.log('QuoteSelector', quoteID)\r\n\r\n const handleChange = event => {\r\n const id = event.target.value;\r\n const quote = vesselQuotes.find(X => X.salesQuoteID === id);\r\n // console.log('New quote: ', quote);\r\n\r\n CatalogueActions.setSourceRecord(quote);\r\n\r\n CatalogueActions.loadSalesQuoteItems(id);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Select Product \r\n (PG ? \r\n {/*
\r\n );\r\n}\r\n\r\n// const ProductScaleSelector = ({ ProductGroup, CatalogueActions, catalogue, productItemGroups, selectedIDs }) => {\r\n\r\nconst ProductScaleSelector = () => {\r\n\r\n const [, globalActions] = useGlobalStore();\r\n // const { productGroups, productItemGroups: allItemGroups, catalogue } = globalState;\r\n\r\n const [catalogueState, catalogueActions] = useCatalogueStore();\r\n const { productGroup: PGID, productItemGroups: PGIDS } = catalogueState;\r\n\r\n const productScales = globalActions.getProductItemGroupsLocal(PGID);\r\n\r\n // console.log('productScales', productScales);\r\n\r\n // const selectedScales = selectedIDs;\r\n const disabled = productScales.length === 0;\r\n\r\n // const PGID = productGroup;\r\n const valid = PGID > 0 && productScales.length > 0;\r\n\r\n const inputLabel = React.useRef(null);\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n React.useEffect(() => {\r\n if (inputLabel.current) {\r\n setLabelWidth(inputLabel.current.offsetWidth);\r\n }\r\n }, [PGIDS, valid]);\r\n\r\n\r\n const handleScaleChange = (e) => {\r\n const newScales = e.target.value;\r\n catalogueActions.setProductItemGroups(newScales);\r\n }\r\n\r\n if (!valid)\r\n return null;\r\n\r\n\r\n return (\r\n {PG.code}
: Product)}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n selectableProductGroups ? null : \r\n }\r\n\r\n {\r\n selectableProductGroups && selectableProductGroups.map(PG => {\r\n const valid = catalogue.items.findIndex(X => X.productGroupID === PG.productGroupID) > -1;\r\n\r\n // console.log('ProductGroup', PG.productGroupID, valid, catalogue.items);\r\n\r\n return valid ? (\r\n \r\n ) : null;\r\n })\r\n }\r\n\r\n \r\n Scale [{PGIDS.length}/{productScales.length}]
}\r\n onChange={handleScaleChange}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n productScales && productScales.map(PIG => {\r\n\r\n const count = catalogueActions.getSelectedProductGroupItemCount(PIG.productItemGroupID);\r\n const checked = PGIDS.includes(PIG.productItemGroupID);\r\n\r\n const countText = count > 0 ? ` [${count}]` : \"\";\r\n\r\n return (\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n { catalogueActions.addSelectedItems(listItems); }}>All\r\n\r\n { catalogueActions.removeSelectedItems(listItems); }}>None\r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n Basket Confirmation \r\n
\r\n\r\n \r\n \r\n Please note the order will be processed immediatly and can not be undone\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n AVCSO Licenses \r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n - \r\n\r\n
\r\n AVCS Online \r\n
\r\n\r\n \r\n \r\n With AVCS online you can now view official UKHO ENC’s directly in your web browser.\r\n This allows you to verify the safety of intended routes for your vessels, while looking at the same charts as on board.\r\n \r\n
\r\n\r\n A standard AVCS Online license grants access to all ENC’s in band 1.\r\n \r\n
\r\n\r\n\r\n Additional ENC coverage can be purchased and added to your AVCS Online license, should this be required.\r\n \r\n
\r\n\r\n\r\n AVCS Online is the easiest way to have updated ENC’s available to you at any time, anywhere you are.\r\n \r\n
\r\n\r\n\r\n -\tIn depth insight for maritime professionals -\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n \r\n Add AVCSO Licenses \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n Scale [{selectedScaleIDs.length}/{productScales.length}]
}\r\n onChange={handleScaleChange}\r\n labelWidth={labelWidth}\r\n >\r\n {\r\n productScales && productScales.map(PIG => {\r\n\r\n // const count = catalogueActions.getSelectedProductGroupItemCount(PIG.productItemGroupID);\r\n // const count = 1;\r\n const checked = selectedScaleIDs.includes(PIG.productItemGroupID);\r\n\r\n // const countText = count > 0 ? ` [${count}]` : \"\";\r\n\r\n return (\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n {\r\n ({ width, height }) => (\r\n\r\n \r\n
\r\n );\r\n}\r\n\r\nconst AvcsoItemListRow = ({ data, index, style }) => {\r\n // const history = useHistory();\r\n const [, globalActions] = useGlobalStore();\r\n const [, avcsoActions] = useAvcsoStore();\r\n\r\n const { listItems, selectedItemIDs, vesselItemIDs, focusedItemID } = data;\r\n\r\n const item = listItems[index];\r\n const itemID = item.itemID;\r\n //const item = Boolean(I) ? I.itemID : 0;\r\n\r\n\r\n //console.log('I', item, itemID);\r\n // console.log('I', itemID, focusedItemID);\r\n\r\n // const vesselItemIDs = licenseLines.map(X => X.itemID);\r\n\r\n const focused = itemID === focusedItemID;\r\n const selected = selectedItemIDs.includes(itemID);\r\n const inInventory = vesselItemIDs.includes(itemID);\r\n\r\n return React.useMemo(() => {\r\n\r\n // const item = globalActions.getCatalogueItem(itemID);\r\n //console.log('Row', itemID, item, focused);\r\n\r\n if (itemID <= 0 || !Boolean(item)) {\r\n return null;\r\n }\r\n\r\n const handleItemChecked = (id) => {\r\n avcsoActions.toggleSelectedItem(id);\r\n }\r\n\r\n return (\r\n \r\n - \r\n
\r\n \r\n \r\n \r\n
)\r\n\r\n}\r\n\r\nexport default AVCSO_SelectItems;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { useAvcsoStore } from '../../../../Global/Stores/avcsoStore';\r\nimport ContentColumn from '../../../Custom/ContentColumn';\r\nimport { Typography, Select, FormControl, Input, MenuItem, ListItemText, ListItem, ListItemIcon, Chip, List, Link, ListItemSecondaryAction, IconButton, Button } from '@material-ui/core';\r\nimport { useGlobalStore } from '../../../../Global/Stores/globalStore';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport { useParams } from \"react-router\";\r\nimport _ from 'lodash';\r\n\r\nconst AVCSO_BasketReview = () => {\r\n\r\n const [, globalActions] = useGlobalStore();\r\n const [avcsoState, avcsoActions] = useAvcsoStore();\r\n\r\n // const selectedItemID = +match.params.itemID || 0;\r\n\r\n // console.log('selectedItemID', selectedItemID);\r\n\r\n useEffect(() => {\r\n // const { selectedItems, vesselID } = saleState.catalogue;\r\n // if (vesselID > 0)\r\n avcsoActions.getBasketPrices();\r\n }, []);\r\n\r\n\r\n const itemsLoaded = globalActions.isLoaded();\r\n\r\n // const productGroups = _.get(globalState, 'catalogue.productGroups', []);\r\n // const { basketLines, productItemGroups } = avcsoState;\r\n // const listItems = basketLines || [];\r\n \r\n\r\n if (avcsoState.basketLines.length === 0) {\r\n return \r\n AVCSO Basket Review \r\n
\r\n\r\n \r\n {/* contentColumnFilter */}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n {`${X} Months`}
}\r\n onChange={durationChange}\r\n input={}\r\n >\r\n {\r\n allMonths.map(M => (\r\n \r\n ))\r\n }\r\n \r\n - \r\n {\r\n basketLines.map(X =>
\r\n AVCSO Confirmation \r\n
\r\n\r\n \r\n Please note the order will be processed immediatly and can not be undone \r\n
\r\n\r\n \r\n
\r\n \r\n\r\n {/* Overview */}\r\n \r\n \r\n \r\n \r\n :null}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default Sales;\r\n","import React from 'react';\r\nimport List from '@material-ui/core/List';\r\nimport ListItemLink from '../Misc/ListItemLink';\r\nimport ContentColumn from '../../Custom/ContentColumn';\r\nimport img from \"./../../../Images/summaries/icon-fleetmanagment.png\";\r\nimport SummaryCardHeader from '../Home/Summaries/SummaryCardHeader';\r\n\r\nconst FleetOverview = () => {\r\n // const [orderState] = useSaleStore();\r\n return (\r\n \r\n {/* Fleet Management */}\r\n
\r\n\r\n \r\n
\r\n - \r\n
\r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels.map(X => (\r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n }, [detailState, vesselID, item]);\r\n}\r\n\r\nconst CorrectionItemStatus = ({ correctionItem }) => {\r\n\r\n const updateClass = getHoldingStatusClass(correctionItem.issue, correctionItem.warning);\r\n\r\n //console.log('CorrectionItemStatus', updateClass, correctionItem);\r\n\r\n return (\r\n */}\r\n \r\n \r\n \r\n\r\n \r\n\r\n
*/}\r\n {holdingDetail.vessel.vesselItems.length}
*/}\r\n\r\n\r\n - \r\n {headers}\r\n
- \r\n {\r\n productgroupItems.map(X =>
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n loaded ? (\r\n
\r\n - \r\n {\r\n\r\n vessels\r\n .filter(X => (X.vesselName.toLowerCase().indexOf(filter) !== -1))\r\n .map(X => (\r\n
\r\n {detail.vessel.vesselName} \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n Navigator Updates \r\n
\r\n\r\n \r\n setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels\r\n .filter(X => (X.vesselName.toLowerCase().indexOf(filter) !== -1))\r\n .map(X => (\r\n
\r\n Update History \r\n
\r\n\r\n \r\n\r\n
\r\n \r\n Fleet Overview \r\n
\r\n\r\n \r\n setFilter(() => F.toLowerCase())} onSort={(S) => setSort(() => S)} />\r\n
\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n vessels\r\n .map(X => (\r\n
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
);\r\n};\r\n\r\nexport default Fleet;\r\n","import React, { useEffect } from 'react';\r\nimport _ from 'lodash';\r\nimport {InputLabel, MenuItem, FormControl, Select } from '@material-ui/core';\r\nimport { useHistory, Link, Redirect } from 'react-router-dom';\r\n//import { useFleetStore } from '../../../Global/Stores/fleetStore';\r\n\r\nconst SelectList = ({ managerID, dataList, inputLabel, inputType, selected }) => {\r\n let history = useHistory();\r\n const [company, setCompany] = React.useState('');\r\n\r\n // Set this so if there is no selecttion, we can \r\n if(selected === 0 || selected === null){selected = ''};\r\n //const [companyID, setCompanyID] = React.useState('');\r\n\r\n //lets count the results so if it's empty we show something nice. \r\n // Am a nice person... no?\r\n let countDataResults = dataList.length;\r\n\r\n //lets define what to show when there is no data in the select box \r\n let noDataMessage = inputType === \"managers\" ? \"No Managers Found\" : \"No Folios Found\";\r\n\r\n\r\n // We are going to count the results and only use it if its a folio. \r\n // When result is one we preselect.\r\n let countData = dataList.length;\r\n let loaded = Boolean(dataList);\r\n\r\n useEffect (\r\n () => {\r\n if(inputType === \"folios\"){\r\n if(dataList.length === 1)\r\n {\r\n //console.log(dataList)\r\n selected = loaded ? dataList[0].folioID : selected;\r\n history.push(`/folios/status/${managerID}/${selected}`)\r\n }\r\n }\r\n }, [dataList]\r\n );\r\n\r\n // const [, fleetActions] = useFleetStore();\r\n // const [fleetState] = useFleetStore();\r\n // const [filter, setFilter] = React.useState('');\r\n // const [sort, setSort] = React.useState(1);\r\n\r\n // useEffect(\r\n // () => {\r\n // //fleetActions.getHoldingsOverview();\r\n // fleetActions.getFolioOverview();\r\n // fleetActions.getFleetPositions();\r\n // }, []\r\n // );\r\n\r\n // const loaded = Boolean(fleetState.folios);\r\n // let companyList = loaded ? fleetState.folios.filter(X => X.vesselName.toLowerCase().indexOf(filter) !== -1) : [];\r\n\r\n //console.log(`Company ID is now: ${companyID}`);\r\n\r\n const handleChange = (event) => {\r\n setCompany(event.target.value);\r\n //setCompanyID(event.target.key);\r\n if(countDataResults >= 1){\r\n if(managerID != '')\r\n {\r\n history.push(`/folios/status/${managerID || 0}/${event.target.value}`);\r\n //console.log(\"Triger folio change\");\r\n }\r\n else\r\n {\r\n history.push(`/folios/status/${event.target.value}`);\r\n //console.log(\"Trigger company\");\r\n }\r\n }\r\n };\r\n\r\n //if(companyID != 0)\r\n //{\r\n return (\r\n \r\n \r\n {inputLabel} \r\n \r\n {\r\n countDataResults <= 0 ?\r\n \r\n :\r\n dataList.map(X => (\r\n inputType === \"managers\"?\r\n \r\n :\r\n \r\n ))\r\n }\r\n \r\n \r\n
\r\n );\r\n // }\r\n // else\r\n // {\r\n // return (null);\r\n // }\r\n};\r\n\r\nexport default SelectList;\r\n","import React, { useMemo } from 'react';\r\nimport { ListItem, ListItemText, Chip, Divider, Link, makeStyles } from '@material-ui/core';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport NumberStatus from '../../Widgets/NumberStatus';\r\n// import _ from 'lodash';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n link: {\r\n color: 'inherit',\r\n textDecoration: 'none',\r\n },\r\n listItem: {\r\n // backgroundColor: '#e9edf7',\r\n textDecoration: 'none',\r\n },\r\n});\r\n\r\nconst ListFoilioItems = ({ vessel, subText, number, numberSmall, open, subSelectedID, children, setOpen, onClick, statusComponent, linkTo, selected }) => {\r\n const classes = useStyles();\r\n\r\n // return useMemo(() => {\r\n\r\n const handleClick = () => {\r\n\r\n if (onClick) {\r\n onClick(vessel.vesselID);\r\n }\r\n\r\n\r\n if (children) {\r\n setOpen(!open);\r\n }\r\n\r\n }\r\n //Convert to upper case\r\n const vesselName = vessel.vesselName.toUpperCase();\r\n\r\n const listItem = (\r\n \r\n
\r\n :null}\r\n \r\n {/* Select Folios */}\r\n {selectedManagerID != 0 ?\r\n \r\n
\r\n :null}\r\n\r\n {selectedFolioID != 0 ?\r\n \r\n setSort(() => S)} />\r\n
\r\n :null}\r\n\r\n \r\n {\r\n
\r\n - \r\n {\r\n selectedFolioID != 0 ?\r\n vessels.map(X => (\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default Folio;\r\n","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport SaveIcon from '@material-ui/icons/SaveAlt';\r\nimport { IconButton, Divider, ListItemText, FormControlLabel } from '@material-ui/core';\r\nimport MailTo, { MailHoldingDetailTo } from '../../../Misc/MailTo';\r\n// import OrderStatus from '../../../Widgets/OrderStatus';\r\nimport { HoldingLinesStatus } from '../../../../Widgets/ProductGroupStatus';\r\nimport { DownloadHoldings } from '../../../Misc/DownloadFile';\r\n\r\nconst FolioItemDetailHeader = ({ managerID, folioID, holdingDetail, history }) => {\r\n\r\n if (!holdingDetail) return null;\r\n\r\n \r\n const handleBack = () => {\r\n //const url = history.location.pathname;\r\n //const uurl = url.substring(-1, url.lastIndexOf(\"/\")); // remove Vessel ID\r\n //const popLink = uurl.substring(-1, uurl.lastIndexOf(\"/\")); // remove /details\r\n history.push(`/folios/status/${managerID}/${folioID}`);\r\n }\r\n\r\n return (\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={0} data-value={open}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open} data-value={warnings}>
\r\n 180 ? \"pie-vesselgroup big\" : \"pie-vesselgroup\"} data-start={open + warnings} data-value={issues}>
\r\n {itemsMissing}
\r\n */}\r\n \r\n \r\n \r\n\r\n \r\n\r\n {/*
*/}\r\n {holdingDetail.vessel.vesselItems.length}
*/}\r\n\r\n\r\n {/* - \r\n {\r\n holdingDetail.map(X => \r\n
- \r\n// {\r\n// lines.map(X =>
- \r\n//
- \r\n// {\r\n// // lines.map(X =>
\r\n
\r\n\r\n {/* \r\n
*/}\r\n\r\n \r\n
\r\n \r\n {/* Folio Management*/}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Folio;\r\n","import React, { useEffect, useState, useMemo } from 'react'\r\nimport { Box, Typography, Grid, TextField, Button } from '@material-ui/core';\r\nimport { useUserStore } from '../../../../Global/Stores/userStore';\r\nimport { isValidateEmail } from '../../../../Global/Data/Methods';\r\nimport http from '../../../../Global/Services/httpService';\r\nimport ContentColumn from '../../../Custom/ContentColumn';\r\nimport ProtectedArea from '../../../Custom/ProtectedArea';\r\n\r\nconst Profile = () => {\r\n const [userState, userActions] = useUserStore();\r\n const [loading, setLoading] = useState(false);\r\n const [profileState, setProfileState] = useState();\r\n\r\n useEffect(() => {\r\n setProfileState(() => ({ ...userState.user, password: \"\", password2: \"\" }))\r\n }, []);\r\n\r\n return useMemo(() => {\r\n\r\n if (!profileState)\r\n return null;\r\n\r\n const { firstName, lastName, email, password, password2 } = profileState;\r\n // console.log('profileState', profileState);\r\n\r\n const canSave = (\r\n (firstName.length > 0) &&\r\n (lastName.length > 0) &&\r\n (email.length > 0) &&\r\n (isValidateEmail(email)) &&\r\n (password.length > 5) &&\r\n (password === password2));\r\n\r\n const handleChange = (e) => {\r\n if (!loading) {\r\n const { name, value } = e.target;\r\n setProfileState(() => ({ ...profileState, [name]: value }));\r\n }\r\n };\r\n\r\n const onSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n if (!canSave) return;\r\n\r\n const postData = {\r\n firstName: firstName,\r\n lastName: lastName,\r\n email: email,\r\n password: password,\r\n };\r\n\r\n setLoading(() => true);\r\n\r\n http.post('/api/account/users/change', postData)\r\n .then(result => {\r\n\r\n // console.log('changed Profile', result.data);\r\n userActions.login({ user: result.data.user });\r\n })\r\n .catch(() => {\r\n\r\n setLoading(() => false);\r\n });\r\n }\r\n\r\n return (\r\n \r\n\r\n My Profile \r\n\r\n \r\n
\r\n \r\n User Management \r\n
\r\n\r\n \r\n
\r\n - \r\n
\r\n\r\n Create new user \r\n\r\n \r\n
\r\n \r\n User Detail \r\n
\r\n\r\n \r\n\r\n\r\n \r\n\r\n
\r\n
\r\n \r\n
);\r\n}\r\n\r\nexport default Account\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Typography, List } from '@material-ui/core';\r\nimport { AnnouncementLine } from '../Home/Summaries/AnnouncementSummary';\r\nimport ContentColumn from '../../Custom/ContentColumn';\r\nimport Loading from '../Misc/Loading';\r\nimport { useGlobalStore } from '../../../Global/Stores/globalStore';\r\n\r\nconst NewsList = ({ match }) => {\r\n const [globalState, globalActions] = useGlobalStore();\r\n const newsItems = globalState.newsItems || [];\r\n const selectedID = +match.params.newsID;\r\n const loaded = Boolean(newsItems.length);\r\n\r\n\r\n useEffect(() => {\r\n globalActions.getAnnouncements();\r\n }, []);\r\n\r\n return (\r\n \r\n {`News & Announcements`} \r\n
\r\n\r\n \r\n {\r\n loaded ? (\r\n
\r\n - \r\n {\r\n newsItems.map(X => (
\r\n {`Details`} \r\n
\r\n\r\n \r\n {\r\n newsItem && (\r\n \r\n {newsItem.title} \r\n \r\n {ReactHtmlParser(newsItem.message)}\r\n \r\n \r\n
\r\n Posted on: \r\n \r\n )\r\n }\r\n
\r\n \r\n Posted on:
\r\n
\r\n );\r\n}\r\n\r\nexport default News;\r\n","import React from 'react';\r\n\r\n////// Call Map\r\nimport MapControl from '../../MapControl/MapControl';\r\n\r\n////// Material UI support Files\r\nimport { Fab, Icon, Dialog, Slide } from '@material-ui/core';\r\n\r\n////// Styling Things\r\nimport menuStyling from './../../Mobile/CSS/MenuStyles.module.css';\r\n\r\n// Modal Window\r\n// const Transition = React.forwardRef(function Transition(props, ref) {\r\n// return \r\n {/*
\r\n \r\n )\r\n }\r\n else \r\n {\r\n return null\r\n }\r\n}\r\n\r\nexport default FloatingMenuButton","import React from 'react'\r\nimport NavBar from './NavBar/NavBar';\r\nimport Home from './Home/Home';\r\nimport { Switch, Route, Redirect, useLocation } from \"react-router-dom\";\r\nimport './../../Styles/Desktop.scss';\r\nimport Sales from './Sales/Sales';\r\nimport Fleet from './Fleet/Fleet';\r\nimport Folios from './Folios/Folios';\r\nimport Account from './Account/Account';\r\nimport News from './News/News';\r\nimport FloatingMenuButton from './NavBar/FloatingMenuButton'\r\nimport Routes from './Routes/Routes';\r\n\r\nconst Desktop = () => {\r\n\r\n const location = useLocation();\r\n const cPage = location.pathname.split(\"/\");\r\n\r\n // Since news items return numbers, we don't want to display numbers in breadcrumbs so we will simply display nothing.\r\n if(cPage[1] == \"news\") // If this spelling changes we are done! :D\r\n {\r\n cPage[2] = null;\r\n }\r\n return (\r\n \r\n \r\n
*/}\r\n\r\n \r\n \r\n smartphone \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Desktop\r\n","import React, {useState} from 'react'\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n\r\n// Material UI support files\r\nimport { CssBaseline, makeStyles, Button, TextField, Link, Grid, Container, InputAdornment, Typography, Paper } from \"@material-ui/core\";\r\n\r\n// Global Support Imports\r\nimport { useUserStore } from \"../../../Global/Stores/userStore\";\r\nimport http from '../../../Global/Services/httpService';\r\n\r\n// Images\r\nimport CT_Logo from \"./../../../../src/Images/CT-logo-transparant.png\";\r\n// theme.palette.secondary.main\r\n\r\n////// CSS\r\nimport loginStyles from '../CSS/LoginStyles.module.css'\r\n\r\n/*\r\nEmmanuel Eshun-Davies, January 23, 2020\r\n\r\nTODO:\r\n*/\r\n\r\n\r\n// Unneccessary required styling \r\n// const useStyles = makeStyles(theme => ({\r\n// forms: {\r\n// marginTop: theme.spacing(0),\r\n// display: 'flex',\r\n// flexDirection: 'column',\r\n// alignItems: 'center',\r\n// fontSize: 10,\r\n// width: '100%',\r\n// },\r\n// logoCenter: {\r\n// marginTop: theme.spacing(8),\r\n// display: 'flex',\r\n// flexDirection: 'column',\r\n// alignItems: 'center',\r\n// },\r\n// leftText: {\r\n// marginTop: theme.spacing(5),\r\n// display: 'flex',\r\n// flexDirection: 'column',\r\n// alignItems: 'left',\r\n// color: '#777',\r\n// },\r\n// bottomLinks: {\r\n// marginTop: theme.spacing(0),\r\n// display: 'flex',\r\n// flexDirection: 'column',\r\n// alignItems: 'center',\r\n// color: '#777',\r\n// },\r\n// form: {\r\n// width: '100%', // Fix IE 11 issue.\r\n// marginTop: theme.spacing(0),\r\n// },\r\n// submit: {\r\n// margin: theme.spacing(3, 0, 2),\r\n// backgroundColor: '#1e89c6',\r\n// color: '#fff',\r\n// fontWeight: '100',\r\n// },\r\n// }));\r\n\r\n\r\nconst ForgotPassword = () => {\r\n const [, actions] = useUserStore();\r\n \r\n // const loginStyles = useStyles();\r\n\r\n // Form Control\r\n const [formState, setFormState] = useState({\r\n email: '',\r\n loading: false,\r\n });\r\n\r\n const handleChange = event => {\r\n const target = event.target;\r\n if (!formState.loading)\r\n setFormState(() => ({ ...formState, [target.name]: (target.type === 'checkbox' ? target.checked : target.value) }));\r\n };\r\n\r\n\r\n const handleForgotPassword = (e) => {\r\n e.preventDefault();\r\n setFormState({ ...formState, loading: true });\r\n // console.log(formState.email);\r\n if(formState.email === \"\"){\r\n setFormState({ ...formState, loading: false });\r\n // We will just do nothing. They will eventually notice and have to enter an email. :D\r\n } else {\r\n const postData = {\r\n email: formState.email,\r\n };\r\n // const email = formState.mail;\r\n\r\n http.post('/api/account/users/resetpassword', postData)\r\n .then(result => {\r\n // actions.login(result.data);\r\n // history.push(\"/account/users\");\r\n window.location.href = \"/home\";\r\n })\r\n .catch(() => {\r\n // setCreating(() => false);\r\n setFormState({ ...formState, loading: false });\r\n });\r\n }\r\n\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {/* Floating button for switching to Mobile */}\r\n \r\n {/* \r\n }\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Password Reset
\r\n 1. Enter your email
\r\n 2. click \"Reset Password\"
\r\n 3. An email will be sent to you
\r\n 4. Follow Instructions in email to reset password
\r\n \r\n \r\n
\r\n \r\n 1. Enter your email
\r\n 2. click \"Reset Password\"
\r\n 3. An email will be sent to you
\r\n 4. Follow Instructions in email to reset password
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Set New Password
\r\n 1. Enter your new password (must be at least 6 characters)
\r\n 2. Enter Your new password again
\r\n 3. Tap Reset Password
\r\n 4. Your new Password is set
\r\n \r\n \r\n
\r\n \r\n 1. Enter your new password (must be at least 6 characters)
\r\n 2. Enter Your new password again
\r\n 3. Tap Reset Password
\r\n 4. Your new Password is set
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n Please sign in to access shipmanager\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n please sign in to access ship manager \r\n\r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n enter your email address to reset passwword \r\n\r\n\r\n \r\n
\r\n Click Me to switch view :)
\r\n//{M}
))\r\n }\r\n \r\n\r\n\r\n \r\n }\r\n action={[\r\n \r\n {/* */}\r\n 0}\r\n autoHideDuration={notificationState.autoHideDuration}\r\n onClose={handleClose}\r\n >\r\n
\r\n );\r\n};\r\n\r\nexport default Notifications;\r\n","import React, { useMemo } from 'react';\r\nimport withRoot from './Global/MUI/withRoot';\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\nimport { useUserStore } from './Global/Stores/userStore';\r\n// import Login from './Components/Authentication/Login';\r\nimport AppAuthenticated from './Components/AppAuthenticated';\r\nimport Analytics from './Components/Helper/Analytics';\r\nimport Notifications from './Components/Helper/Notifications';\r\n// import NewUserPassword from './Components/Authentication/NewUserPassword';\r\n// import ForgotPassword from './Components/Authentication/ForgotPassword';\r\n// import UserInvitation from './Components/Authentication/UserInvitation';\r\n// import '../node_modules/leaflet-ais-tracksymbol/src/'\r\n\r\n// Load Checkscreen to determine which device/view version to load\r\nimport CheckScreen from \"./Components/CheckScreen\";\r\n\r\n/* \r\nNote: Inside the CheckScreen Component contains the condition to switch between mobile and desktop views through out the application\r\n\r\nTODO: In Checkscreen, allow option to switch to desktop view during browse.\r\n*/\r\nfunction App(props) {\r\n const [, userActions] = useUserStore();\r\n const isAuthenticated = userActions.isAuthenticated();\r\n\r\n return useMemo(() => {\r\n\r\n const content = isAuthenticated ?