\n {(this.props.popupDetailedData != '{}') ?\n
\n : \n \n {(this.state.activeTab == 1) &&\n
\n : \n \n \n ![]({this.props.popupDetailedData[\"opticalimage\"]})
\n \n
\n \n
\n }\n {(this.state.activeTab == 2) &&\n \n \n \n ![]({this.props.popupDetailedData[\"flirimage\"]})
\n \n
\n \n
\n }\n {(this.state.activeTab == 3) &&\n \n \n \n
\n \n
\n }\n {(this.state.activeTab == 4) &&\n \n \n \n
\n \n
\n }\n No Detailed Data
\n }\n Loading Data...
\n }\n (this.el = ref)} />;\n }\n\n}\n","import React, { Component, useCallback } from 'react';\nimport { Table } from './Table';\nimport { Alert, Col, Modal, ModalBody, Row, Button, Navbar, Container, NavbarBrand, NavbarToggler, Nav, NavItem, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Form, Label, FormGroup, Collapse, ModalHeader, ModalFooter, InputGroup, InputGroupAddon, InputGroupText, Input, FormFeedback, Fade, Card, Spinner, Toast, ToastBody} from 'reactstrap';\nimport DatePicker from 'react-datepicker';\nimport DataGrid from 'react-data-grid';\nimport XLSX from 'xlsx';\nimport PopUp from \"./PopUp\"; \nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { toLatLon } from 'utm';\nimport userIcon from '../assets/person.svg';\nimport { GPSMapContainer } from './GPSMapContainer';\nimport { ThreeWindow_Plane } from './ThreeWindow_Plane';\nimport { Canvas, Page, Text, View, Document, StyleSheet, Image, PDFDownloadLink } from '@react-pdf/renderer';\nimport { toPng } from 'html-to-image';\nimport leafletImage from 'leaflet-image';\nimport Plot from 'react-plotly.js';\nimport Plotly from 'plotly.js';\n\nexport class Home extends Component {\n static displayName = Home.name;\n\n constructor(props) {\n super(props);\n\n //Init\n var dateOffset = (24 * 60 * 60 * 1000) * 30; //30days\n var startDate = new Date();\n startDate.setTime(startDate.getTime() - dateOffset);\n\n //File upload ref\n this.fileInput = React.createRef();\n\n //PDF download ref\n\n this.PDFleafletref = [React.createRef(), React.createRef(), React.createRef(), React.createRef()];\n this.nonPDFleafletref = React.createRef();\n this.PDFtableref = React.createRef();\n this.Extratableref_DiffvsPlan = React.createRef();\n this.Extratableref_Additional = React.createRef();\n this.Extratableref_Missing = React.createRef();\n this.styles = StyleSheet.create({\n page: {\n backgroundColor: \"white\",\n },\n headerTitle: {\n position: \"absolute\",\n left: \"7%\",\n top: \"12%\",\n fontSize: 47,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"bold\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n headerText: {\n position: \"absolute\",\n top: \"15%\",\n right: \"20%\",\n fontSize: 25,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"bold\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n headerGenerated: {\n position: \"absolute\",\n bottom: \"2%\",\n fontSize: 10,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"normal\", //normal, bold, bolder\n textAlign: \"center\",\n color: \"#939a9e\", //Light Grey\n },\n headerCustomField: {\n position: \"absolute\",\n left: \"7%\",\n bottom: \"15%\",\n fontSize: 20,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"normal\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n headerLogo: {\n position: \"absolute\",\n height: \"auto\",\n width: \"30%\",\n right: \"10%\",\n bottom: \"10%\",\n },\n headerImage: {\n borderWidth: 2,\n borderStyle: \"solid\",\n borderColor: \"#0E2836\",\n position: \"absolute\",\n height: \"40%\",\n left: \"-1%\",\n right: \"-1%\",\n bottom: \"30%\",\n },\n footerLogo: {\n position: \"absolute\",\n height: \"10%\",\n width: \"20%\",\n left: \"2%\",\n bottom: \"2%\",\n },\n footerText: {\n position: \"absolute\",\n left: \"28%\",\n bottom: \"6.5%\",\n fontSize: 16,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"bold\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n footerBreak: {\n position: \"absolute\",\n height: \"0.2%\",\n width: \"96%\",\n left: \"2%\",\n bottom: \"14%\",\n color: \"#0E2836\", //Diptek Blue\n },\n pageTitle: {\n position: \"absolute\",\n left: \"2%\",\n top: \"2%\",\n fontSize: 20,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"bolder\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n textDecoration: \"underline\",\n },\n pageSummary: {\n position: \"absolute\",\n left: \"2%\",\n top: \"7%\",\n fontSize: 16,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"normal\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n pageKey: {\n position: \"absolute\",\n right: \"10%\",\n bottom: \"0%\",\n fontSize: 10,\n fontStyle: \"normal\", //normal, italic\n fontWeight: \"bolder\", //normal, bold, bolder\n color: \"#0E2836\", //Diptek Blue\n },\n imageTable: {\n backgroundColor: \"white\",\n margin: 0,\n },\n imageLeaflet: {\n position: \"absolute\",\n height: \"auto\",\n width: \"100%\",\n left: \"0%\",\n top: \"0%\",\n backgroundColor: \"white\",\n margin: 0,\n },\n imagePlotly: {\n position: \"absolute\",\n height: \"auto\",\n width: \"60%\",\n left: \"20%\",\n top: \"0%\",\n backgroundColor: \"white\",\n margin: 0,\n },\n });\n\n this.state = {\n //Init - config\n pagePreload: false,\n pageDataSummary: true,\n\n //General\n captureData: [],\n loading: true,\n startDate: startDate,\n endDate: new Date(),\n\n //AnyPageDataLoading\n anyPageDataLoading: 0,\n anyPageDataLoadingDetails: \"\",\n\n //AnyPageDataLoading\n anyPageError: false,\n anyPageErrorDetails: \"\",\n\n //Popup\n seen: false,\n showDetailedWindow: false,\n popupDetailedData: {},\n\n //User Data\n name: \"User\",\n organisationName: \"Company\",\n\n //locations\n location: [],\n loadinglocation: true,\n selectedlocationID: \"0\",\n\n //sublocations\n sublocation: [],\n loadingsublocation: true,\n selectedsublocationID: \"0\",\n createsublocationName: \"\",\n\n //sequence\n sequence: [],\n loadingsequence: true,\n selectedsequenceID: \"0\",\n createsequenceName: \"\",\n\n //subsequence\n subsequence: [],\n loadingsubsequence: true,\n selectedsubsequenceID: \"0\",\n createsubsequenceName: \"\",\n\n //plan\n plan: [],\n loadingplan: true,\n selectedplanID: \"0\",\n createplanVersion: 0,\n createplanStartTime: new Date(),\n createplanEndTime: new Date(),\n createplanData: { 'Name': \"\" },\n\n //plandetails\n plandetails: [],\n loadingplandetails: true,\n\n //dispatch\n dispatch: [],\n loadingdispatch: true,\n selecteddispatchID: \"0\",\n createdispatchName: \"\",\n createdispatchTime: new Date(0), //deafult to epoch 1970, used to show actual dispatch datetime\n\n dispatchPlanDetailsSelected: false,\n dispatchPlanDetailsShow: false,\n selectedDispatchPlanDetailsID: \"0\",\n selectedDispatchPlanID: [],\n selectedDispatchPlanIDRequested: [],\n dispatchPlanDetailsAll: [],\n dispatchPlanDetails: [],\n dispatchPlanDetailsNot: [],\n\n dispatchCheckboxIncludeRefSelected: true,\n dispatchToDeviceLoading: false,\n\n //review\n review: [],\n loadedreview: false,\n reviewSelectionMode: false,\n reviewSelections: [],\n\n\n //report\n report: [],\n loadedreport: false,\n optionsIncludePageSelected: [true,true,true,true,true,true,true,true,true,true],\n reportHeaderCustomField: [\"\", \"\", \"\", \"\", \"\", \"ToeRL\", \"ToeRL\", \"\", \"\", \"\"],\n\n //hardware\n hardware: [],\n loadinghardware: true,\n selectedhardwareID: \"0\",\n\n //Dropdown Open\n dropdownOpen: false,\n\n //NavBarCollapse\n navOpen: false,\n\n //Filter Collapse Toggle\n filterOpen: false,\n planOpen: false,\n dispatchOpen: false,\n configOpen: false,\n captureOpen: false,\n reviewOpen: false,\n reportOpen: false,\n\n //Fileupload open\n isOpen: false,\n dataLoaded: false,\n isFormInvalid: false,\n checkValidation: true,\n validationErrors: [],\n rows: [],\n cols: [],\n extra: [],\n extra_line: [],\n filePlanData: [],\n\n //PDF\n leafletPDFcanvas0: null,\n leafletPDFcanvas1: null,\n leafletPDFcanvas2: null,\n leafletPDFcanvas3: null,\n plotlyPDFcanvas0: null,\n plotlyPDFcanvas1: null,\n plotlyPDFcanvas2: null,\n PDFgenerated: false,\n PDFloading: false,\n PDFplotDivId: [\"PDFplotDivId0\", \"PDFplotDivId1\", \"PDFplotDivId2\"], //Unique name/numbers\n ExtraDataLoading: false,\n };\n }\n\n componentDidMount() {\n const accessToken = this.props.auth.getAccessToken();\n\n //Get user info meta data\n this.props.auth.getUserInfo(accessToken, this.setUserData)\n }\n\n setUserData = user => {\n this.setState({\n name: user.name,\n organisationName: user.organisationName\n });\n\n //First we run\n this.getLocationAll();\n }\n\n togglePop = () => {\n this.setState({\n seen: !this.state.seen\n });\n\n //reset three window when closed\n if (this.state.seen) {\n this.setState({\n showDetailedWindow: false\n });\n }\n };\n\n toggleDropdown = () => {\n this.setState({\n dropdownOpen: !this.state.dropdownOpen\n });\n\n };\n\n toggleNavCollapse = () => {\n this.setState({\n navOpen: !this.state.navOpen\n });\n };\n\n toggleFilter() {\n this.setState({\n filterOpen: !this.state.filterOpen\n });\n };\n\n toggleValidation = () => {\n this.setState({\n checkValidation: !this.state.checkValidation\n });\n };\n\n\n\n toggleFilterHome = () => {\n this.setState({\n filterOpen: !this.state.filterOpen\n });\n };\n\n togglePlan() {\n if (!this.state.pagePreload) {\n if (!this.state.planOpen) {\n if (this.state.loadingplan) {\n var value = this.state.selectedsubsequenceID;\n if (value !== \"0\") {\n this.getPlanAll(value);\n }\n }\n }\n }\n if (this.state.planOpen) {\n this.setState({\n //Only on close\n dataLoaded: false,\n });\n }\n this.setState({\n planOpen: !this.state.planOpen\n });\n };\n\n togglePlanHome = () => {\n if (this.state.planOpen) {\n this.setState({\n //Only on close\n dataLoaded: false,\n });\n }\n this.setState({\n planOpen: !this.state.planOpen\n });\n };\n\n toggleDispatch() {\n if (!this.state.pagePreload) {\n if (!this.state.dispatchOpen) {\n if (this.state.loadingdispatch) {\n var value = this.state.selectedlocationID;\n var value2 = this.state.selectedhardwareID;\n if ((value !== \"0\") && (value2 !== \"0\")) {\n this.getDispatchByHardware(value, value2);\n }\n }\n }\n }\n if (this.state.dispatchOpen) {\n this.setState({\n //Only on close\n createdispatchName: \"\",\n dataLoaded: false,\n });\n }\n this.setState({\n dispatchOpen: !this.state.dispatchOpen\n });\n };\n\n toggleDispatchHome = () => {\n if (this.state.dispatchOpen) {\n this.setState({\n //Only on close\n createdispatchName: \"\",\n dataLoaded: false,\n });\n }\n this.setState({\n dispatchOpen: !this.state.dispatchOpen\n });\n };\n\n toggleDispatchCheckboxIncludeRef = () => {\n this.setState({\n dispatchCheckboxIncludeRefSelected: !this.state.dispatchCheckboxIncludeRefSelected\n });\n };\n\n toggleConfig() {\n if (!this.state.pagePreload) {\n if (!this.state.configOpen) {\n if (this.state.loadingsublocation) {\n var value = this.state.selectedlocationID;\n if (value !== \"0\") {\n this.getSubLocationAll(value);\n }\n }\n }\n }\n this.setState({\n configOpen: !this.state.configOpen\n });\n };\n\n toggleConfigHome = () => {\n this.setState({\n configOpen: !this.state.configOpen\n });\n };\n\n toggleCapture() {\n this.setState({\n captureOpen: !this.state.captureOpen\n });\n };\n\n toggleCaptureHome = () => {\n this.setState({\n captureOpen: !this.state.captureOpen\n });\n };\n\n toggleReview() {\n if (!this.state.pagePreload) {\n if (!this.state.reviewOpen) {\n if (this.state.loadingdispatch) {\n var value = this.state.selectedlocationID;\n var value2 = this.state.selectedhardwareID;\n if ((value !== \"0\") && (value2 !== \"0\")) {\n this.getDispatchByHardware(value, value2);\n }\n }\n }\n }\n this.setState({\n reviewOpen: !this.state.reviewOpen,\n });\n };\n\n toggleReviewHome = () => {\n this.setState({\n reviewOpen: !this.state.reviewOpen,\n });\n };\n\n toggleReport() {\n if (!this.state.pagePreload) {\n if (!this.state.reportOpen) {\n if (this.state.loadingplan) {\n var value = this.state.selectedsubsequenceID;\n if (value !== \"0\") {\n this.getPlanAll(value);\n }\n }\n }\n }\n this.setState({\n reportOpen: !this.state.reportOpen,\n\n loadedreport: false,\n PDFgenerated: false,\n PDFloading: false\n });\n };\n\n toggleReportHome = () => {\n this.setState({\n reportOpen: !this.state.reportOpen,\n\n loadedreport: false,\n PDFgenerated: false,\n PDFloading: false\n });\n };\n\n closeErrorAlert = () => {\n this.setState({\n anyPageError: false,\n anyPageErrorDetails: \"\"\n });\n };\n\n toggleReportOptionsIncludePage(e, index) {\n //Turn off report loaded\n this.setState({\n loadedreport: false,\n PDFgenerated: false,\n PDFloading: false\n });\n\n var array = this.state.optionsIncludePageSelected\n array[index] = !array[index]\n this.setState({\n optionsIncludePageSelected: array\n });\n };\n\n toggleDispatchPlanDetails() {\n //Store results\n this.setState({\n dispatchPlanDetailsShow: !this.state.dispatchPlanDetailsShow,\n dispatchPlanDetailsSelected: false,\n selectedDispatchPlanDetailsID: \"0\",\n dispatchPlanDetailsAll: [], //Reset\n dispatchPlanDetails: [], //Reset\n dispatchPlanDetailsNot: [], //Reset\n selectedDispatchPlanID: [], //Reset\n selectedDispatchPlanIDRequested: [], //Reset\n });\n };\n\n setStartDate = date => {\n this.setState({\n startDate: date\n });\n //console.log(new Date(date + \" UTC\").toISOString());\n };\n\n setEndDate = date => {\n this.setState({\n endDate: date\n });\n };\n\n setSelectedHardware = (e) => {\n var value = e.target.value;\n this.setState({\n selectedhardwareID: value\n });\n if (this.state.pagePreload) {\n if (value !== \"0\") {\n\n //Request for the Dispatch for this location\n var value2 = this.state.selectedlocationID;\n if (value2 !== \"0\") {\n this.getDispatchByHardware(value2, value);\n }\n };\n } else {\n this.setState({\n loadingdispatch: true,\n selecteddispatchID: \"0\",\n });\n var value2 = this.state.selectedlocationID;\n if ((value !== \"0\") && (value2 !== \"0\")) {\n this.getDispatchByHardware(value2, value);\n };\n };\n };\n\n setSelectedLocation = (e) => {\n var value = e.target.value;\n this.setState({\n selectedlocationID: value\n });\n\n if (this.state.pagePreload) {\n if (value !== \"0\") {\n //Request for the hardware for this location\n this.getHardwareAll(value);\n\n //Request for the hardware for this location\n this.getSubLocationAll(value);\n\n //Request for the Dispatch for this location\n var value2 = this.state.selectedhardwareID;\n if (value2 !== \"0\") {\n this.getDispatchByHardware(value, value2);\n }\n };\n } else {\n this.setState({\n loadinghardware: true,\n selectedhardwareID: \"0\",\n loadingsublocation: true,\n selectedsublocationID: \"0\",\n loadingsequence: true,\n selectedsequenceID: \"0\",\n loadingsubsequence: true,\n selectedsubsequenceID: \"0\",\n loadingplan: true,\n selectedplanID: \"0\",\n loadingdispatch: true,\n selecteddispatchID: \"0\",\n });\n if (value !== \"0\") {\n this.getHardwareAll(value);\n };\n };\n };\n\n setSelectedSubLocation = (e) => {\n var value = e.target.value;\n this.setState({\n selectedsublocationID: value\n });\n\n if (this.state.pagePreload) {\n //Request for the sequence for this sublocation\n if (value !== \"0\") {\n this.getSequenceAll(value);\n };\n } else {\n this.setState({\n loadingsequence: true,\n selectedsequenceID: \"0\",\n loadingsubsequence: true,\n selectedsubsequenceID: \"0\",\n });\n if (value !== \"0\") {\n this.getSequenceAll(value);\n };\n };\n };\n\n setCreateSubLocationName = (e) => {\n var value = e.target.value;\n this.setState({\n createsublocationName: value\n });\n };\n\n setSelectedSequence = (e) => {\n var value = e.target.value;\n this.setState({\n selectedsequenceID: value\n });\n\n if (this.state.pagePreload) {\n //Request for the subsequence for this sequence\n if (value !== \"0\") {\n this.getSubSequenceAll(value);\n };\n } else {\n this.setState({\n loadingsubsequence: true,\n selectedsubsequenceID: \"0\",\n });\n if (value !== \"0\") {\n this.getSubSequenceAll(value);\n };\n };\n };\n\n setCreateSequenceName = (e) => {\n var value = e.target.value;\n this.setState({\n createsequenceName: value\n });\n };\n\n setSelectedSubSequence = (e) => {\n var value = e.target.value;\n this.setState({\n selectedsubsequenceID: value\n });\n\n if (this.state.pagePreload) {\n //Request for the Plan for this sub-sequence\n if (value !== \"0\") {\n this.getPlanAll(value);\n };\n } else {\n this.setState({\n loadingplan: true,\n selectedplanID: \"0\",\n });\n if (value !== \"0\") {\n this.getPlanAll(value);\n };\n };\n };\n\n setCreateSubSequenceName = (e) => {\n var value = e.target.value;\n this.setState({\n createsubsequenceName: value\n });\n };\n\n setSelectedPlan = (e) => {\n var value = e.target.value;\n this.setState({\n selectedplanID: value\n });\n\n if (this.state.pagePreload) {\n //Request for the PlanDetails for this Plan\n if (value !== \"0\") {\n this.getPlanDetailsAll(value);\n };\n } else {\n this.setState({\n loadingplandetails: true,\n });\n if (value !== \"0\") {\n this.getPlanDetailsAll(value);\n };\n };\n };\n\n setCreatePlanVersion = (e) => {\n var value = e.target.value;\n this.setState({\n createplanVersion: parseInt(value)\n });\n };\n\n setCreatePlanStartTime = (e) => {\n var value = e.target.value;\n this.setState({\n createplanStartTime: value\n });\n };\n\n setCreatePlanEndTime = (e) => {\n var value = e.target.value;\n this.setState({\n createplanEndTime: value\n });\n };\n\n setCreatePlanData = (e) => {\n var value = e.target.value;\n this.setState({\n createplanData: { 'Name': value },\n });\n };\n\n setSelectedDispatch = (e) => {\n var value = e.target.value;\n this.setState({\n selecteddispatchID: value\n });\n };\n\n setCreateDispatchName = (e) => {\n var value = e.target.value;\n this.setState({\n createdispatchName: value\n });\n };\n\n setSelectedDispatchPlan = (e) => {\n var opts = [], opt;\n for (var i = 0; i < e.target.options.length; i++) {\n opt = e.target.options[i];\n if (opt.selected) {\n opts.push(opt.value);\n\n //Get detailed plan request\n if (this.state.selectedDispatchPlanIDRequested[i] !== opt.value) {\n this.getPlanDetailsAllForDispatch(opt.value);\n }\n }\n }\n this.setState({\n selectedDispatchPlanID: opts,\n selectedDispatchPlanIDRequested: e.target.options,\n\n //clear Dispatchdetails select list\n dispatchPlanDetailsSelected: false, //turns off the map\n selectedDispatchPlanDetailsID: \"0\",\n dispatchPlanDetailsAll: [], //Reset\n dispatchPlanDetails: [], //Reset\n dispatchPlanDetailsNot: [], //Reset\n\n });\n }\n\n setSelectedDispatchPlanDetails = (e) => {\n var opts = [], opt;\n var data = [], datanot = [];\n for (var i = 0; i < e.target.options.length; i++) {\n opt = e.target.options[i];\n if (opt.selected) {\n opts.push(opt.value);\n data.push(this.state.dispatchPlanDetailsAll[i]);\n } else {\n //Not selected but kept incase needed for reference\n datanot.push(this.state.dispatchPlanDetailsAll[i]);\n }\n }\n this.setState({\n selectedDispatchPlanDetailsID: opts,\n dispatchPlanDetails: data,\n dispatchPlanDetailsNot: datanot,\n });\n\n //Store results\n var selected = false;\n if (data.length > 0) {\n selected = true;\n }\n this.setState({\n dispatchPlanDetailsSelected: selected,\n });\n }\n\n setReportHeaderCustomField(e, index) {\n //Turn off report loaded\n this.setState({\n loadedreport: false,\n PDFgenerated: false,\n PDFloading: false\n });\n\n var value = e.target.value;\n var array = this.state.reportHeaderCustomField;\n array[index] = value;\n this.setState({\n reportHeaderCustomField: array\n });\n };\n\n createDispatchPlanDetailsForPost() {\n //Add to Dispatch List\n var data2 = this.state.dispatchPlanDetails;\n if (this.state.dispatchCheckboxIncludeRefSelected) {\n //Include Not details for reference\n var locationIndex = this.state.location.findIndex(x => x.id == this.state.selectedlocationID);\n var locationUTMZoneNum = parseInt(this.state.location[locationIndex].data[\"UTMZoneNum\"]);\n var locationUTMZoneLet = this.state.location[locationIndex].data[\"UTMZoneLet\"];\n\n for (var i = 0; i < this.state.dispatchPlanDetailsNot.length; i++) {\n var tempPlanDetailsNot = this.state.dispatchPlanDetailsNot[i];\n //manage for -ve numbers (react-leaflet cant handle)\n var tempLatLon = toLatLon(tempPlanDetailsNot.data[\"Easting\"], tempPlanDetailsNot.data[\"Northing\"], locationUTMZoneNum, locationUTMZoneLet); //Easting, Northing\n tempPlanDetailsNot[\"Latitude\"] = tempLatLon.latitude;\n tempPlanDetailsNot[\"Longitude\"] = tempLatLon.longitude;\n tempPlanDetailsNot[\"AssocCaptureId\"] = 0;\n tempPlanDetailsNot[\"AssocCaptureDistDiff\"] = 0;\n\n //Override\n tempPlanDetailsNot[\"dispatchOrder\"] = -1; //Flag as only for reference\n\n data2.push(tempPlanDetailsNot);\n }\n }\n return data2;\n }\n\n selectionModeUpdate(object) {\n var tempreview = this.state.reviewSelections;\n tempreview.push(object);\n this.setState({\n reviewSelections: tempreview\n });\n };\n\n openFileBrowser = () => {\n this.fileInput.current.click();\n }\n\n renderFile = (fileObj) => {\n\n // Pass file object as param\n const fileReader = new FileReader();\n fileReader.readAsArrayBuffer(fileObj);\n fileReader.onload = e => {\n\n var locationIndex = this.state.location.findIndex(x => x.id == this.state.selectedlocationID);\n var locationUTMZoneNum = parseInt(this.state.location[locationIndex].data[\"UTMZoneNum\"]);\n var locationUTMZoneLet = this.state.location[locationIndex].data[\"UTMZoneLet\"];\n \n var bstr = e.target.result;\n var wb = XLSX.read(bstr, { type: \"array\" });\n\n // Get first worksheet \n var wsname = wb.SheetNames[0];\n var ws = wb.Sheets[wsname];\n // Parse excel plan \n var json = XLSX.utils.sheet_to_json(ws, { header: 1 });\n var planHeaders = json.shift();\n // Validate Headers are as expected\n this.validateExcelPlanHeaders(planHeaders);\n var originalDataHeaders = []\n var originalDataRows = JSON.parse(JSON.stringify(json));\n\n if (planHeaders != null) {\n if (planHeaders.length > 0) {\n // Get Sheet Headers 'as is' to display in Table\n originalDataHeaders[0] = { name: \"Row#\", key: 0 }\n for (var i = 0; i < planHeaders.length; i++) {\n originalDataHeaders[i + 1] = { name: planHeaders[i], key: (i + 1) };\n }\n // Table Data 'as is'\n for (var i = 0; i < originalDataRows.length; i++) {\n originalDataRows[i].splice(0, 0, i);\n }\n }\n }\n\n this.setState({\n cols: originalDataHeaders,\n rows: originalDataRows\n });\n\n\n var planData = {\n holeIDArr: new Array(),\n holeCoords: {\n eastingArr: new Array(),\n northingArr: new Array()\n },\n rlArr: new Array(),\n depthArr: new Array(),\n diamArr: new Array()\n }\n\n var extradata = [];\n var extradata_line = [];\n\n if (this.state.validationErrors.length == 0) {\n for (var i = 0; i < json.length; i++) {\n var tempHoleID = this.validateHoleID(json[i][0], i)\n var tempCoordsEast = this.validateCoord(json[i][1], i)\n var tempCoordsNorth = this.validateCoord(json[i][2], i)\n var tempRL = this.validateRL(json[i][3], i)\n var tempDepth = this.validateDepth(json[i][4], i)\n var tempDiam = this.validateDiam(json[i][5], i)\n\n planData.holeIDArr[i] = tempHoleID\n planData.holeCoords.eastingArr[i] = tempCoordsEast\n planData.holeCoords.northingArr[i] = tempCoordsNorth\n planData.rlArr[i] = tempRL\n planData.depthArr[i] = tempDepth\n planData.diamArr[i] = tempDiam\n\n //Store LatLong\n if ((tempCoordsEast != null) && (tempCoordsNorth != null)) {\n var LatLong = toLatLon(tempCoordsEast, tempCoordsNorth, locationUTMZoneNum, locationUTMZoneLet); //Convert Easting, Northing, ZoneNumber (50), Zone Letter (J) to Lat Long\n extradata.push(LatLong); // Store Lat Long\n if (extradata.length > 0) {\n var tempArray = [extradata[i - 1], extradata[i]];\n extradata_line.push(tempArray);\n }\n }\n }\n\n // Validates for Duplicate HoleID's & Coordinates\n this.validatePlan(planData)\n\n // If no errors set data as expected\n if (this.state.validationErrors.length == 0) {\n //Set state\n this.setState({\n dataLoaded: true,\n filePlanData: planData,\n extra: extradata,\n extra_line: extradata_line\n });\n }\n }\n }\n }\n\n renderFileXML = (fileObj) => {\n\n // Pass file object as param\n const fileReader = new FileReader();\n fileReader.readAsText(fileObj, \"UTF-8\");\n fileReader.onload = e => {\n // once file opened, parse\n const parser = new DOMParser();\n const xmlFile = parser.parseFromString(e.target.result, \"application/xml\");\n const holeData = this.validatePlanHoleData(xmlFile.getElementsByTagName(\"Hole\"));\n\n var originalDataHeaders = [\n {\n \"name\": \"Row#\",\n \"key\": 0\n },\n {\n \"name\": \"Hole ID#\",\n \"key\": 1\n },\n {\n \"name\": \"Easting\",\n \"key\": 2\n },\n {\n \"name\": \"Northing\",\n \"key\": 3\n },\n {\n \"name\": \"RL (m)\",\n \"key\": 4\n },\n {\n \"name\": \"Design Depth (m)\",\n \"key\": 5\n },\n {\n \"name\": \"Diameter (mm)\",\n \"key\": 6\n }\n ]\n\n // i starts at 1 to get first hole, 0'th element is NumberOfHoles. Finishes at -1 length as the last child is EquipmentData\n // HoleID: holeData[i].children[0].innerHTML \n // Easting: holeData[i].children[2].children[1].innerHTML\n // Northing: holeData[i].children[2].children[0].innerHTML\n // RL (End Z): holeData[i].children[3].children[2].innerHTML\n // Depth (Start Z - End Z): holeData[i].children[2].children[2].innerHTML - holeData[i].children[3].children[2].innerHTML\n // Diameter: holeData[i].children[5].innerHTML\n\n var planData = {\n holeIDArr: new Array(),\n holeCoords: {\n eastingArr: new Array(),\n northingArr: new Array()\n },\n rlArr: new Array(),\n depthArr: new Array(),\n diamArr: new Array()\n }\n\n var extradata = [];\n var extradata_line = [];\n var originalDataRows = [];\n\n var locationIndex = this.state.location.findIndex(x => x.id == this.state.selectedlocationID);\n var locationUTMZoneNum = parseInt(this.state.location[locationIndex].data[\"UTMZoneNum\"]);\n var locationUTMZoneLet = this.state.location[locationIndex].data[\"UTMZoneLet\"];\n\n if (this.state.validationErrors.length == 0) { \n for (var i = 0; i < holeData.length; i++) {\n // * 1 to convert str to value\n var tempHoleID = this.validateHoleID(holeData[i].getElementsByTagName(\"HoleId\")[0].innerHTML, i)\n var tempCoordsEast = this.validateCoord(holeData[i].getElementsByTagName(\"IR:PointY\")[0].innerHTML * 1, i)\n var tempCoordsNorth = this.validateCoord(holeData[i].getElementsByTagName(\"IR:PointX\")[0].innerHTML * 1, i)\n var tempRL = this.validateRL(holeData[i].getElementsByTagName(\"IR:PointZ\")[1].innerHTML * 1, i) // [1] for the end Z value\n var tempDepth = this.validateDepth((holeData[i].getElementsByTagName(\"IR:PointZ\")[0].innerHTML - holeData[i].getElementsByTagName(\"IR:PointZ\")[1].innerHTML), i) // Start Z minus End Z\n var tempDiam = this.validateDiam(holeData[i].getElementsByTagName(\"DrillBitDia\")[0].innerHTML * 1, i)\n\n planData.holeIDArr[i] = tempHoleID\n planData.holeCoords.eastingArr[i] = tempCoordsEast\n planData.holeCoords.northingArr[i] = tempCoordsNorth\n planData.rlArr[i] = tempRL\n planData.depthArr[i] = tempDepth\n planData.diamArr[i] = tempDiam\n\n //Store LatLong\n if ((tempCoordsEast != null) && (tempCoordsNorth != null)) {\n var LatLong = toLatLon(tempCoordsEast, tempCoordsNorth, locationUTMZoneNum, locationUTMZoneLet); //Convert Easting, Northing, ZoneNumber (50), Zone Letter (J) to Lat Long\n extradata.push(LatLong); // Store Lat Long\n if (extradata.length > 0) {\n var tempArray = [extradata[i - 1], extradata[i]];\n extradata_line.push(tempArray);\n }\n\n // Rows required for gps map \n originalDataRows[i] = [\n i,\n tempHoleID,\n tempCoordsEast,\n tempCoordsNorth,\n tempRL,\n tempDepth,\n tempDiam\n ]\n }\n }\n \n //Validate Duplicates\n this.validatePlan(planData)\n\n if (this.state.validationErrors.length == 0) {\n //Set state\n this.setState({\n dataLoaded: true,\n cols: originalDataHeaders,\n rows: originalDataRows,\n filePlanData: planData,\n extra: extradata,\n extra_line: extradata_line\n });\n }\n else {\n this.setState({\n cols: originalDataHeaders,\n rows: originalDataRows\n });\n }\n }\n }\n }\n\n validateExcelPlanHeaders = (excelPlanHeaders) => {\n var tempArr = this.state.validationErrors\n if (this.state.checkValidation) {\n if (excelPlanHeaders == null) {\n tempArr.push(\"Error: No plan data found\");\n }\n else if (excelPlanHeaders.length == 6){\n if (excelPlanHeaders[0] !== \"Hole ID#\") {\n tempArr.push(\"Incorrect Plan Header at column 2. Expected 'Hole ID#'\");\n }\n if (excelPlanHeaders[1] !== \"Easting\") {\n tempArr.push(\"Incorrect Plan Header at column 3. Expected 'Easting'\");\n }\n if (excelPlanHeaders[2] !== \"Northing\") {\n tempArr.push(\"Incorrect Plan Header at column 4. Expected 'Northing'\");\n }\n if (excelPlanHeaders[3] !== \"RL (m)\") {\n tempArr.push(\"Incorrect Plan Header at column 5. Expected 'RL (m)'\");\n }\n if (excelPlanHeaders[4] !== \"Design Depth (m)\") {\n tempArr.push(\"Incorrect Plan Header at column 6. Expected 'Design Depth (m)'\");\n }\n if (excelPlanHeaders[5] !== \"Diameter (mm)\") {\n tempArr.push(\"Incorrect Plan Header at column 7. Expected 'Diameter (mm)'\");\n }\n }\n else {\n if (excelPlanHeaders.length > 6) {\n tempArr.push(\"Found more Plan Headers expected. Only expected 7 Headers. Found: \" + (excelPlanHeaders.length+1));\n }\n else {\n tempArr.push(\"Found less Plan Headers expected. Expected 7 Headers. Found: \" + (excelPlanHeaders.length+1));\n }\n }\n this.setState({\n validationErrors: tempArr\n });\n } \n }\n\n validatePlanHoleData = (planHoleData) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n if (planHoleData == null) {\n tempArr.push(\"No hole data found in plan.\")\n this.setState({\n validationErrors: tempArr\n });\n }\n }\n return planHoleData;\n }\n\n validateDiam = (diam, row) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n if ((diam == null) || (diam < 0)) {\n // Invalid Diam\n tempArr.push(\"Negative or missing diameter value for row: \" + row)\n this.setState({\n validationErrors: tempArr\n });\n }\n }\n return diam;\n }\n\n validateDepth = (depth, row) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n var NewDepth = depth;\n if ((depth == null) || (depth < 0)) {\n // Invalid depth\n tempArr.push(\"Negative or missing depth value for row: \" + row)\n this.setState({\n validationErrors: tempArr\n });\n }\n else {\n NewDepth = depth.toFixed(3)\n }\n }\n return NewDepth;\n }\n\n validateRL = (rl, row) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n if ((rl == null) || (rl < 0)) {\n // Invalid RL\n tempArr.push(\"Negative or missing RL value for row: \" + row)\n this.setState({\n validationErrors: tempArr\n });\n }\n }\n return rl;\n }\n\n validateCoord = (coord, row) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n if (coord == null) {\n // Invalid Coordinate\n tempArr.push(\"No coordinate found on row: \" + row)\n this.setState({\n validationErrors: tempArr\n });\n }\n }\n return coord;\n }\n\n validateHoleID = (holeID, row) => {\n if (this.state.checkValidation) {\n var tempArr = this.state.validationErrors\n if ((holeID == null) || (holeID == \"\")) {\n // Invalid HoleID\n tempArr.push(\"No holeID found on row: \" + row)\n this.setState({\n validationErrors: tempArr\n });\n }\n }\n return holeID;\n }\n\n //Input Array \n validatePlan = (planData) => { \n if (this.state.checkValidation) {\n // Validate for duplicate Hole ID's\n var dupeHoleID = this.findDuplicates(planData.holeIDArr)\n if (dupeHoleID.length > 0) { // Duplicate found\n var dupeHoleArr = this.state.validationErrors\n for (var i = 0; i < dupeHoleID.length; i++) { // Find the index where that duplicate is\n dupeHoleArr.push(\"Duplicate HoleID's found at rows: \" + this.getAllIndexes(planData.holeIDArr, dupeHoleID[i]))\n }\n this.setState({\n validationErrors: dupeHoleArr\n });\n }\n\n // Validate for duplicate Hole Coords\n // Check if a duplicate exists only in the Easting\n // If a duplicate exists, compare the northing with the other northing pairs (only east duplicate pairs)\n // If a northing duplicate exists then \n var eastDupe = this.findDuplicates(planData.holeCoords.eastingArr)\n if (eastDupe.length > 0) // At least 1 dupe in Easting array found\n {\n var eastIndexArr = [];\n for (var i = 0; i < eastDupe.length; i++) { // Find the index where that duplicate is\n eastIndexArr.push(this.getAllIndexes(planData.holeCoords.eastingArr, eastDupe[i]))\n }\n if (eastIndexArr.length > 0) // At least 1 dupe index found (Sanity Check)\n {\n this.findNorthDuplicates(planData.holeCoords.northingArr, eastIndexArr)\n }\n }\n }\n }\n\n // Find North Duplicates only concerned with the east duplicates\n findNorthDuplicates = (northArr, eastIndexArr) => {\n var duplicateCoords = this.state.validationErrors;\n var dupeCoords = false;\n for (var y = 0; y < eastIndexArr.length; y++) { // Loop through for each Duplicate Value\n for (var i = 0; i < eastIndexArr[y].length; i++) { // Loop through for each duplicate per value\n for (var n = i; n < eastIndexArr[y].length; n++) { //Check yourself and ahead in array (dont check again for past duplicates)\n if (i != n) { // Dont comapre the same index as it will always return a duplicate (ie checking yourself with yourself)\n if (northArr[eastIndexArr[y][i]] == northArr[eastIndexArr[y][n]]) {//Duplicate North & East Pair found\n duplicateCoords.push(\"Duplicate Coordinates found at row: \" + eastIndexArr[y][i] + \" and row: \" + eastIndexArr[y][n])\n dupeCoords = true;\n }\n }\n }\n }\n }\n if (dupeCoords) {\n this.setState({\n validationErrors: duplicateCoords\n });\n }\n return duplicateCoords\n }\n\n // Find duplicate elements in an array\n findDuplicates = (validateArr) => {\n const distinct = new Set(validateArr); // Sets to improve performance\n const filtered = validateArr.filter(item => {\n if (distinct.has(item)) { // Remove the element from the set on very first encounter\n distinct.delete(item);\n }\n else {\n return item; // return the element on subsequent encounters\n }\n });\n return [...new Set(filtered)] // Use set as there could be duplicate dupes...\n }\n\n // Find index of all occurances where val is in arr\n getAllIndexes = (arr, val) => { \n var indexes = [];\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] === val) {\n indexes.push(i);\n }\n }\n return indexes;\n }\n\n planFileHandler = (event) => {\n if (event.target.files.length) {\n let fileObj = event.target.files[0];\n let fileName = fileObj.name;\n\n //check for file extension and pass only if it is .xlsx or .xml and display error message otherwise\n if (fileName.slice(fileName.lastIndexOf('.') + 1) === \"xlsx\") {\n this.setState({\n uploadedFileName: fileName,\n isFormInvalid: false\n });\n this.renderFile(fileObj)\n }\n else if (fileName.slice(fileName.lastIndexOf('.') + 1) === \"xml\") {\n this.setState({\n uploadedFileName: fileName,\n isFormInvalid: false\n });\n this.renderFileXML(fileObj)\n }\n else {\n this.setState({\n isFormInvalid: true,\n uploadedFileName: \"\"\n })\n }\n }\n }\n\n captureFileHandler = (event) => {\n if (event.target.files.length) {\n //For loop through multiple files\n for (var i = 0; i < event.target.files.length; i++) {\n let fileObj = event.target.files[i];\n let fileName = fileObj.name;\n\n //check for file extension and pass only if it is .json and display error message otherwise\n if (fileName.slice(fileName.lastIndexOf('.') + 1) === \"json\") {\n this.setState({\n uploadedFileName: fileName,\n isFormInvalid: false\n });\n\n //Send the file\n const fileReader = new FileReader();\n fileReader.readAsText(fileObj, \"UTF-8\");\n fileReader.onload = e => {\n //Send to API\n this.postDataCaptureInsert(e.target.result);\n }\n }\n else {\n this.setState({\n isFormInvalid: true,\n uploadedFileName: \"\"\n })\n }\n }\n }\n }\n\n //PDF\n PDFgenerate = () => {\n\n if ((this.PDFleafletref === null) || (this.PDFtableref === null)) {\n return\n }\n for (var i = 0; i < this.PDFleafletref.length; i++) {\n if (this.PDFleafletref[i] === null) {\n return\n }\n }\n\n //Set Loading\n this.setState({\n PDFloading: true\n })\n\n //Generate Images - Plot\n Plotly.toImage(this.state.PDFplotDivId[0], { format: 'png', width: 720, height: 720, filename: \"plot\" }).then(dataURL0 => {\n this.setState({\n plotlyPDFcanvas0: dataURL0\n })\n\n Plotly.toImage(this.state.PDFplotDivId[1], { format: 'png', width: 800, height: 400, filename: \"plot\" }).then(dataURL1 => {\n this.setState({\n plotlyPDFcanvas1: dataURL1\n })\n\n Plotly.toImage(this.state.PDFplotDivId[2], { format: 'png', width: 800, height: 400, filename: \"plot\" }).then(dataURL2 => {\n this.setState({\n plotlyPDFcanvas2: dataURL2\n })\n\n //Generate Images - Leaflet\n leafletImage(this.PDFleafletref[0].current, (err, canvas0) => {\n this.setState({\n leafletPDFcanvas0: canvas0.toDataURL('image/png', 1.0), //Full Quality\n })\n\n leafletImage(this.PDFleafletref[1].current, (err, canvas1) => {\n this.setState({\n leafletPDFcanvas1: canvas1.toDataURL('image/png', 1.0), //Full Quality\n })\n\n leafletImage(this.PDFleafletref[2].current, (err, canvas2) => {\n this.setState({\n leafletPDFcanvas2: canvas2.toDataURL('image/png', 1.0), //Full Quality\n })\n\n leafletImage(this.PDFleafletref[3].current, (err, canvas3) => {\n this.setState({\n leafletPDFcanvas3: canvas3.toDataURL('image/png', 1.0), //Full Quality\n })\n\n //Flag as finished\n this.setState({\n PDFgenerated: true,\n })\n\n });\n\n });\n\n });\n\n });\n\n });\n });\n });\n\n }\n\n ExportExtraData = () => {\n if ((this.Extratableref_DiffvsPlan === null) || (this.Extratableref_Additional === null) || (this.Extratableref_Missing === null)) {\n return\n }\n\n //Set Loading\n this.setState({\n ExtraDataLoading: true\n })\n\n /* build new workbook */\n const wb = XLSX.utils.book_new();\n\n const ws = XLSX.utils.table_to_sheet(this.Extratableref_DiffvsPlan.current); /*convert table to worksheet - refes to DOM element*/\n XLSX.utils.book_append_sheet(wb, ws, \"DiffVsPlan (\" + this.state.report.data.ReportDetails.Summary.TotalCountDiffvsPlan.toString() + \")\");\n\n const ws2 = XLSX.utils.table_to_sheet(this.Extratableref_Additional.current); /*convert table to worksheet - refes to DOM element*/\n XLSX.utils.book_append_sheet(wb, ws2, \"Additional (\" + this.state.report.data.ReportDetails.Summary.TotalCountAdditional.toString() + \")\");\n\n const ws3 = XLSX.utils.table_to_sheet(this.Extratableref_Missing.current); /*convert table to worksheet - refes to DOM element*/\n XLSX.utils.book_append_sheet(wb, ws3, \"Missing (\" + this.state.report.data.ReportDetails.Summary.TotalCountMissing.toString() + \")\");\n\n /* write file */\n var currDate = new Date();\n const datestring = currDate.getFullYear() + \"-\" + (currDate.getMonth() + 1) + \"-\" + currDate.getDate() + \"_\" + currDate.getHours() + currDate.getMinutes();\n XLSX.writeFile(wb, \"Dipstick-ExtraData\" + this.state.selectedplanID + \"_\" + datestring + '.xlsx');\n\n //Set Loading\n this.setState({\n ExtraDataLoading: false\n })\n }\n\n\n\n render() {\n return (\n \n this.renderHome()} />\n this.startSession(history)} />\n \n );\n }\n}\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register () {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW (swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker (swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister () {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\nimport \"./assets/css/bootstrap.min.css\";\n//import \"./assets/css/paper-kit.css\";\nimport \"./custom.css\"\n\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\nconst rootElement = document.getElementById('root');\n\nReactDOM.render(\n \n ,\n rootElement);\n\nregisterServiceWorker();\n\n"],"sourceRoot":""}
\n \n Page Error - {this.state.anyPageErrorDetails}\n \n\n {(this.state.anyPageDataLoading > 0) &&\n
\n\n );\n }\n\n manipulateCaptureDataForFrontEnd(data) {\n for (let i in data) {\n //******************fix for uppercase on first letter sometimes*********************** TEMP\n if (data[i][\"dateTime\"] == null) {\n data[i][\"dateTime\"] = data[i][\"DateTime\"];\n }\n if (data[i][\"data\"] == null) {\n data[i][\"data\"] = data[i][\"Data\"];\n }\n if (data[i][\"detailedData\"] == null) {\n data[i][\"detailedData\"] = data[i][\"DetailedData\"];\n }\n if (data[i][\"detailedDataAvailable\"] == null) {\n data[i][\"detailedDataAvailable\"] = data[i][\"DetailedDataAvailable\"];\n }\n if (data[i][\"dispatchId\"] == null) {\n data[i][\"dispatchId\"] = data[i][\"DispatchId\"];\n }\n if (data[i][\"hardwareId\"] == null) {\n data[i][\"hardwareId\"] = data[i][\"HardwareId\"];\n }\n if (data[i][\"id\"] == null) {\n data[i][\"id\"] = data[i][\"Id\"];\n }\n\n //manage for -ve numbers (react-leaflet cant handle)\n data[i][\"Latitude\"] = JSON.parse(data[i][\"data\"]).rovergpslat;\n if (data[i][\"Latitude\"] == -1) {\n data[i][\"Latitude\"] = 0;\n }\n data[i][\"Longitude\"] = JSON.parse(data[i][\"data\"]).rovergpslong;\n if (data[i][\"Longitude\"] == -1) {\n data[i][\"Longitude\"] = 0;\n }\n\n //generate dates to local\n var date = new Date(data[i][\"dateTime\"] + \"Z\");\n var datestring = ('0' + date.getDate()).slice(-2) + \"/\" + ('0' + (date.getMonth()+1)).slice(-2) + \"/\" + date.getFullYear(); //Month is 0-11\n var timestring = ('0' + date.getHours()).slice(-2) + \":\" + ('0' + date.getMinutes()).slice(-2) + \":\" + ('0' + date.getSeconds()).slice(-2);\n\n data[i][\"dateTimeLocalDateString\"] = datestring;\n data[i][\"dateTimeLocalTimeString\"] = timestring;\n data[i][\"dateTimeLocalString\"] = datestring + \" \" + timestring;\n\n //Round depthhole\n data[i][\"depthhole_rounded\"] = Math.round(JSON.parse(data[i][\"data\"]).depthhole); \n\n //Calculate Reflectivity\n var reflectivity = JSON.parse(data[i][\"data\"]).reflecthole;\n var reflectivitystring = \"n/a\";\n if (reflectivity != null) {\n if (reflectivity > 8) {\n reflectivitystring = \"Wet\"\n } else {\n reflectivitystring = \"Dry\"\n }\n }\n data[i][\"reflecthole_data\"] = reflectivity;\n data[i][\"wetness_data\"] = reflectivitystring;\n\n //Calculate CaptureType\n var capturetype = JSON.parse(data[i][\"data\"]).capturetype;\n var capturtypestring = \"n/a\";\n if (capturetype != null) {\n capturtypestring = capturetype\n }\n data[i][\"capturetype_data\"] = capturtypestring;\n\n //Calculate Deleted\n var deletedflag = JSON.parse(data[i][\"data\"]).deleted;\n var deletedstring = \"False\";\n if (deletedflag != null) {\n if (deletedflag > 0) {\n deletedstring = \"True\";\n }\n }\n data[i][\"deletedString\"] = deletedstring;\n\n //Calculate Comment\n var comment = JSON.parse(data[i][\"data\"]).comment;\n var commentstring = \"-\";\n if (comment != null) {\n if (comment != \"\") {\n commentstring = comment;\n }\n }\n data[i][\"commentString\"] = commentstring;\n };\n return data;\n }\n\n manipulatePlanDataForFrontEnd(data) {\n for (let i in data) {\n //manage for -ve numbers (react-leaflet cant handle)\n if (data[i][\"Latitude\"] == -1) {\n data[i][\"Latitude\"] = 0;\n }\n if (data[i][\"Longitude\"] == -1) {\n data[i][\"Longitude\"] = 0;\n }\n };\n return data;\n }\n\n manipulateUploadPlanDataForMapView(data,extra) {\n for (let i in data) {\n //Add additional data\n data[i][\"Latitude\"] = extra[i].latitude;\n data[i][\"Longitude\"] = extra[i].longitude;\n data[i][\"AssocCaptureId\"] = 0;\n data[i][\"AssocCaptureDistDiff\"] = 0;\n };\n return data;\n }\n\n manipulateDispatchDetailsDataForMapView(data) {\n var locationIndex = this.state.location.findIndex(x => x.id == this.state.selectedlocationID);\n var locationUTMZoneNum = parseInt(this.state.location[locationIndex].data[\"UTMZoneNum\"]);\n var locationUTMZoneLet = this.state.location[locationIndex].data[\"UTMZoneLet\"];\n for (let i in data) {\n //manage for -ve numbers (react-leaflet cant handle)\n var tempLatLon = toLatLon(data[i].data[\"Easting\"], data[i].data[\"Northing\"], locationUTMZoneNum, locationUTMZoneLet); //Easting, Northing\n data[i][\"Latitude\"] = tempLatLon.latitude;\n data[i][\"Longitude\"] = tempLatLon.longitude;\n data[i][\"AssocCaptureId\"] = 0;\n data[i][\"AssocCaptureDistDiff\"] = 0;\n };\n return data;\n }\n\n manipulateSummaryForFrontEnd(data) {\n for (var i = data[\"Missing\"].length - 1; i >= 0; --i) {\n //Remvoe Nulls from summary data\n if ((data[\"Missing\"][i][\"PlanDetailsId\"] == null) || (data[\"Missing\"][i][\"PlanDetailsId\"] == -1)) {\n //Remove 0 element of length 1\n data[\"Missing\"].splice(i, 1);\n }\n };\n for (var i = data[\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n //Remvoe Nulls from summary data\n if ((data[\"DiffvsPlan\"][i][\"PlanDetailsId\"] == null) || (data[\"DiffvsPlan\"][i][\"PlanDetailsId\"] == -1)) {\n //Remove 0 element of length 1\n data[\"DiffvsPlan\"].splice(i, 1);\n }\n };\n for (var i = data[\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n //manage for -ve numbers (react-leaflet cant handle)\n if (data[\"DiffvsPlan\"][i][\"Latitude_Plan\"] == -1) {\n data[\"DiffvsPlan\"][i][\"Latitude_Plan\"] = 0;\n }\n if (data[\"DiffvsPlan\"][i][\"Longitude_Plan\"] == -1) {\n data[\"DiffvsPlan\"][i][\"Longitude_Plan\"] = 0;\n }\n if (data[\"DiffvsPlan\"][i][\"Latitude_Capture\"] == -1) {\n data[\"DiffvsPlan\"][i][\"Latitude_Capture\"] = 0;\n }\n if (data[\"DiffvsPlan\"][i][\"Longitude_Capture\"] == -1) {\n data[\"DiffvsPlan\"][i][\"Longitude_Capture\"] = 0;\n }\n };\n //Unpack data section (if available)\n for (var i = data[\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n if (data[\"DiffvsPlan\"][i][\"Data_Capture\"] != null) {\n\n //Calculate Reflectivity\n var reflectivity = JSON.parse(data[\"DiffvsPlan\"][i][\"Data_Capture\"]).reflecthole;\n var reflectivitystring = \"n/a\";\n if (reflectivity != null) {\n if (reflectivity > 8) {\n reflectivitystring = \"Wet\"\n } else {\n reflectivitystring = \"Dry\"\n }\n }\n data[\"DiffvsPlan\"][i][\"reflecthole_Capture\"] = reflectivity;\n data[\"DiffvsPlan\"][i][\"wetness_Capture\"] = reflectivitystring;\n\n //Calculate CaptureType\n var capturetype = JSON.parse(data[\"DiffvsPlan\"][i][\"Data_Capture\"]).capturetype;\n var capturtypestring = \"n/a\";\n if (capturetype != null) {\n capturtypestring = capturetype\n }\n data[\"DiffvsPlan\"][i][\"capturetype_Capture\"] = capturtypestring;\n\n //Calculate Deleted\n var deletedflag = JSON.parse(data[\"DiffvsPlan\"][i][\"Data_Capture\"]).deleted;\n var deletedstring = \"False\";\n if (deletedflag != null) {\n if (deletedflag > 0) {\n deletedstring = \"True\";\n }\n }\n data[\"DiffvsPlan\"][i][\"deletedString_Capture\"] = deletedstring;\n\n //Calculate Comment\n var comment = JSON.parse(data[\"DiffvsPlan\"][i][\"Data_Capture\"]).comment;\n var commentstring = \"-\";\n if (comment != null) {\n if (comment != \"\") {\n commentstring = comment;\n }\n }\n data[\"DiffvsPlan\"][i][\"commentString_Capture\"] = commentstring;\n }\n }\n\n //Additional\n if (data[\"Additional\"] != null) {\n for (var i = data[\"Additional\"].length - 1; i >= 0; --i) {\n //Remvoe Nulls from summary data\n if ((data[\"Additional\"][i][\"CaptureId\"] == null) || (data[\"Additional\"][i][\"CaptureId\"] == -1)) {\n //Remove 0 element of length 1\n data[\"Additional\"].splice(i, 1);\n }\n };\n for (var i = data[\"Additional\"].length - 1; i >= 0; --i) {\n //manage for -ve numbers (react-leaflet cant handle)\n if (data[\"Additional\"][i][\"Latitude_Capture\"] == -1) {\n data[\"Additional\"][i][\"Latitude_Capture\"] = 0;\n }\n if (data[\"Additional\"][i][\"Longitude_Capture\"] == -1) {\n data[\"Additional\"][i][\"Longitude_Capture\"] = 0;\n }\n };\n for (var i = data[\"Additional\"].length - 1; i >= 0; --i) {\n if (data[\"Additional\"][i][\"Data_Capture\"] != null) {\n\n //Calculate Reflectivity\n var reflectivity = JSON.parse(data[\"Additional\"][i][\"Data_Capture\"]).reflecthole;\n var reflectivitystring = \"n/a\";\n if (reflectivity != null) {\n if (reflectivity > 8) {\n reflectivitystring = \"Wet\"\n } else {\n reflectivitystring = \"Dry\"\n }\n }\n data[\"Additional\"][i][\"reflecthole_Capture\"] = reflectivity;\n data[\"Additional\"][i][\"wetness_Capture\"] = reflectivitystring;\n\n //Calculate CaptureType\n var capturetype = JSON.parse(data[\"Additional\"][i][\"Data_Capture\"]).capturetype;\n var capturtypestring = \"n/a\";\n if (capturetype != null) {\n capturtypestring = capturetype\n }\n data[\"Additional\"][i][\"capturetype_Capture\"] = capturtypestring;\n\n //Calculate Deleted\n var deletedflag = JSON.parse(data[\"Additional\"][i][\"Data_Capture\"]).deleted;\n var deletedstring = \"False\";\n if (deletedflag != null) {\n if (deletedflag > 0) {\n deletedstring = \"True\";\n }\n }\n data[\"Additional\"][i][\"deletedString_Capture\"] = deletedstring;\n\n //Calculate Comment\n var comment = JSON.parse(data[\"Additional\"][i][\"Data_Capture\"]).comment;\n var commentstring = \"-\";\n if (comment != null) {\n if (comment != \"\") {\n commentstring = comment;\n }\n }\n data[\"Additional\"][i][\"commentString_Capture\"] = commentstring;\n }\n }\n }\n\n return data;\n }\n\n async getLocationAll() {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Location\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/locationall', {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n\n //Unpack data object\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n }\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n \n //Request for the hardware for this location if we have it\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedlocationID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedlocationID: value\n });\n\n this.setState({ loadinghardware: true, selectedhardwareID: \"0\", loadingsublocation: true, selectedsublocationID: \"0\", loadingdispatch: true, selecteddispatchID: \"0\", });\n\n if (this.state.pagePreload) {\n this.getHardwareAll(value); //have to use currnet as state is not snyc\n this.getSubLocationAll(value); //Request for the Sublocation for this location\n var value2 = this.state.selectedhardwareID;\n if (value2 !== 0) {\n this.getDispatchByHardware(value, value2); //request for dispatch\n }\n }\n }\n }\n this.setState({ location: data, loadinglocation: false, });\n\n \n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async getSubLocationAll(locationID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"SubLocation\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/sublocationall/' + locationID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedsublocationID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedsublocationID: value\n });\n }\n this.setState({ loadingsequence: true, selectedsequenceID: \"0\", });\n\n if (this.state.pagePreload) {\n this.getSequenceAll(value); //Request\n }\n }\n }\n }\n this.setState({ sublocation: data, loadingsublocation: false, });\n\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postsublocationInsert(locationID, sublocationName) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({'LocationId': locationID, 'Name': sublocationName, 'Description': sublocationName })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/sublocation', requestOptions)\n .then(response => {\n //Get latest list of\n this.setState({ loadingsublocation: true, });\n this.getSubLocationAll(this.state.selectedlocationID);\n });\n }\n\n async getSequenceAll(sublocationID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Sequence\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/sequenceall/' + sublocationID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedsequenceID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedsequenceID: value\n });\n\n this.setState({ loadingsubsequence: true, selectedsubsequenceID: \"0\", });\n\n if (this.state.pagePreload) {\n this.getSubSequenceAll(value); //Request\n }\n\n }\n }\n }\n }\n this.setState({ sequence: data, loadingsequence: false, });\n\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postsequenceInsert(sublocationID, sequenceName) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ 'SubLocationId': sublocationID, 'Name': sequenceName, 'Description': sequenceName })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/sequence', requestOptions)\n .then(response => {\n //Get latest list of\n this.setState({ loadingsequence: true, selectedsequenceID: \"0\", });\n this.getSequenceAll(this.state.selectedsublocationID);\n });\n }\n\n async getSubSequenceAll(sequenceID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"SubSequence\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/subsequenceall/' + sequenceID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedsubsequenceID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedsubsequenceID: value\n });\n\n this.setState({ loadingplan: true, selectedplanID: \"0\", });\n\n if (this.state.pagePreload) {\n this.getPlanAll(value); //Request\n }\n \n }\n }\n }\n }\n this.setState({ subsequence: data, loadingsubsequence: false, });\n\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postsubsequenceInsert(sequenceID, subsequenceName) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ 'SequenceId': sequenceID, 'Name': subsequenceName, 'Description': subsequenceName })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/subsequence', requestOptions)\n .then(response => {\n //Get latest list of\n this.setState({ loadingsubsequence: true, selectedsubsequenceID: \"0\", });\n this.getSubSequenceAll(this.state.selectedsequenceID);\n });\n }\n\n async getPlanAll(subsequenceID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Plan\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/planall/' + subsequenceID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n\n //Insert blank\n data.unshift({\n id: '0',\n data: {\n Name: '---Select---'\n },\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedplanID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedplanID: value\n });\n\n this.setState({ loadingplandetails: true, });\n\n if (this.state.pagePreload) {\n this.getPlanDetailsAll(value); //Request\n }\n }\n }\n }\n }\n\n //Set greatest Verno for create\n var greatestVerNo = 0;\n var greatestVerIndex = 0;\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (data[i].subSequenceId = this.state.selectedsubsequenceID) {\n if (data[i].version > greatestVerNo) {\n greatestVerNo = data[i].version;\n greatestVerIndex = i;\n }\n }\n }\n }\n data[greatestVerIndex].data[\"Name\"] = data[greatestVerIndex].data[\"Name\"] + \" [Latest]\";\n this.setState({\n createplanVersion: greatestVerNo + 1\n });\n\n this.setState({ plan: data, loadingplan: false, });\n\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postplanInsert(subsequenceID, version, starttime, endtime, data) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ 'SubSequenceId': subsequenceID, 'Version': version, 'StartTime': starttime, 'EndTime': endtime, 'Data': JSON.stringify(data) })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/plan', requestOptions)\n .then(response => {\n //Get latest list of\n this.setState({ loadingplan: true, selectedplanID: \"0\", });\n this.getPlanAll(this.state.selectedsubsequenceID);\n });\n }\n\n convertPlanRowColsToObject(planID, rows, cols) {\n var sendobject = [];\n var arrayobject = {};\n var tempdataobject = {};\n for (var i = 0; i < rows.length; i++) {\n arrayobject = {};\n arrayobject[\"Id\"] = i; //Not used\n arrayobject[\"PlanId\"] = parseInt(planID);\n arrayobject[\"PlanOrder\"] = i;\n arrayobject[\"DispatchId\"] = -1; //Not used\n arrayobject[\"DispatchOrder\"] = -1; //Not used\n\n //Temp data object from upload information\n tempdataobject = {}\n for (var j = 1; j < cols.length; j++) { //As Row# in first spot and dont want\n tempdataobject[cols[j].name] = rows[i][j];\n }\n arrayobject[\"Data\"] = JSON.stringify(tempdataobject);\n sendobject.push(arrayobject);\n }\n return sendobject;\n }\n\n async postplandetailsInsertArray(planID, sendobject) {\n\n //Remove upload window state\n this.setState({\n dataLoaded: false,\n rows: null,\n cols: null,\n extra: null,\n extra_line: null\n });\n\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify(sendobject)\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/plandetailsarray/' + planID, requestOptions)\n .then(response => {\n //Get Plan details\n this.setState({ loadingplandetails: true, });\n this.getPlanDetailsAll(planID);\n });\n }\n\n async getPlanDetailsAll(planID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"PlanDetails\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/plandetailsall/' + planID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n this.setState({ plandetails: data, loadingplandetails: false, });\n } \n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async getPlanDetailsAllForDispatch(planID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"PlanDetailsForDispatch\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/plandetailsall/' + planID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n this.setState({ plandetails: data, loadingplandetails: false, });\n\n //Add to Dispatch List\n var data2 = this.state.dispatchPlanDetailsAll;\n for (var i = 0; i < data.length; i++) {\n data2.push(data[i]);\n }\n this.setState({ dispatchPlanDetailsAll: data2 });\n }\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async getDispatchByHardware(locationID,hardwareID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Dispatch\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/dispatchbyhardware/' + locationID + '/' + hardwareID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n\n //Set greatest Time for dispatch\n var greatestTimeNo = 0;\n var greatestTimeIndex = 0;\n var temptime;\n if (data !== null) {\n for (var i = 0; i < data.length; i++) {\n temptime = Date.parse(data[i].dispatchTime);\n if (temptime > 0) {\n data[i].name = data[i].name + \" (Dispatched @ \" + data[i].dispatchTime + \")\"; //Show dispatch time\n }\n if (temptime > greatestTimeNo) {\n greatestTimeNo = temptime;\n greatestTimeIndex = i;\n }\n }\n }\n data[greatestTimeIndex].name = data[greatestTimeIndex].name + \" [Device]\"; //Show latest on device\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selecteddispatchID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selecteddispatchID: value\n });\n\n if (this.state.pagePreload) {\n //this.getDispatchDetailsAll(value); //***********************FUTURE\n }\n }\n }\n }\n }\n this.setState({ dispatch: data, loadingdispatch: false, });\n }\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async getDispatchAll(locationID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Dispatch\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/dispatchall/' + locationID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n\n //Set greatest Time for dispatch\n var greatestTimeNo = 0;\n var greatestTimeIndex = 0;\n var temptime;\n if (data !== null) {\n for (var i = 0; i < data.length; i++) {\n temptime = Date.parse(data[i].dispatchTime);\n if (temptime > 0) {\n data[i].name = data[i].name + \" (Dispatched @ \" + data[i].dispatchTime + \")\"; //Show dispatch time\n }\n if (temptime > greatestTimeNo) {\n greatestTimeNo = temptime;\n greatestTimeIndex = i;\n }\n }\n }\n data[greatestTimeIndex].name = data[greatestTimeIndex].name + \" [Device]\"; //Show latest on device\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Match drop down if required\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selecteddispatchID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selecteddispatchID: value\n });\n\n if (this.state.pagePreload) {\n //this.getDispatchDetailsAll(value); //***********************FUTURE\n }\n }\n }\n }\n }\n this.setState({ dispatch: data, loadingdispatch: false, });\n } \n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async getDispatchReview(dispatchID, locationID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"DispatchReview\" }));\n this.setState({ review: [], loadedreview: false, reviewSelectionMode: false, reviewSelections: [] });\n\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/dispatchreview/' + locationID + '/' + dispatchID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n //Not requried expected to be string\n //for (var i = 0; i < data.length; i++) {\n // for (var j = 0; j < data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"].length; j++) {\n // data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"][j][\"Data\"] = JSON.parse(data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"][j][\"Data\"]); //Parse string into object\n // }\n //}\n\n //adjust data for show\n data[0][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"] = this.manipulateCaptureDataForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"]);\n data[0][\"data\"][\"ReviewDetails\"][\"ReviewPlans\"] = this.manipulatePlanDataForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"ReviewPlans\"]);\n data[0][\"data\"][\"ReviewDetails\"][\"Summary\"] = this.manipulateSummaryForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"Summary\"]);\n\n this.setState({ review: data[0], loadedreview: true, });\n } else {\n //Loading error\n this.setState({ reviewOpen: false, anyPageError: true, anyPageErrorDetails: '1: API returned null results for review' });\n }\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postDispatchReviewEdits(dispatchID, locationID, reviewselections) {\n this.setState({ review: [], loadedreview: false, reviewSelectionMode: false, reviewSelections: [] });\n const accessToken = this.props.auth.getAccessToken();\n var manualselections = [];\n var tempobject;\n for (var i = 0; i < reviewselections.length; i++) {\n tempobject = {}\n tempobject[\"CaptureId\"] = reviewselections[i][\"capture_rowData\"]['Id'];\n tempobject[\"PlandetailsId\"] = reviewselections[i][\"missing_rowData\"]['PlanDetailsId'];\n manualselections.push(tempobject);\n }\n const bodystring = JSON.stringify({ 'ManualSelections': manualselections });\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: bodystring\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/dispatchreviewedits/' + locationID + '/' + dispatchID, requestOptions)\n .then(response => {\n //Get dispatch info for drop down\n //this.setState({ review: [], loadedreview: false });\n var data = response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n //Not requried expected to be string\n //for (var i = 0; i < data.length; i++) {\n // for (var j = 0; j < data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"].length; j++) {\n // data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"][j][\"Data\"] = JSON.parse(data[i][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"][j][\"Data\"]); //Parse string into object\n // }\n //}\n\n //adjust data for show\n data[0][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"] = this.manipulateCaptureDataForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"Captures_Raw\"]);\n data[0][\"data\"][\"ReviewDetails\"][\"ReviewPlans\"] = this.manipulatePlanDataForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"ReviewPlans\"]);\n data[0][\"data\"][\"ReviewDetails\"][\"Summary\"] = this.manipulateSummaryForFrontEnd(data[0][\"data\"][\"ReviewDetails\"][\"Summary\"]);\n\n this.setState({ review: data[0], loadedreview: true });\n } else {\n //Loading error\n this.setState({ reviewOpen: false, anyPageError: true, anyPageErrorDetails: '1: API returned null results for review edits' });\n }\n });\n }\n\n async getPlanReport(subsequenceID, planID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"PlanReport\" }));\n this.setState({ report: [], loadedreport: false, PDFgenerated: false, PDFloading: false });\n\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/planreport/' + subsequenceID + '/' + planID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcoding\n if (response.status === 200) {\n var data = await response.json();\n if ((data !== null) && (data.length !== 0)) {\n for (var i = 0; i < data.length; i++) {\n data[i][\"data\"] = JSON.parse(data[i][\"data\"]); //Parse string into object\n }\n\n if ((data[0][\"data\"][\"ReportDetails\"][\"ReviewPlans\"].length > 0) && (data[0][\"data\"][\"ReportDetails\"].hasOwnProperty(\"Summary\"))) {\n //adjust data for show\n data[0][\"data\"][\"ReportDetails\"][\"ReviewPlans\"] = this.manipulatePlanDataForFrontEnd(data[0][\"data\"][\"ReportDetails\"][\"ReviewPlans\"]);\n data[0][\"data\"][\"ReportDetails\"][\"Summary\"] = this.manipulateSummaryForFrontEnd(data[0][\"data\"][\"ReportDetails\"][\"Summary\"]);\n\n\n //Generate Plotly data\n //------------------------------------------\n var Chart = {};\n\n //Percent Diff\n Chart[\"PercentDiffvsPlan\"] = ((data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"TotalCountDiffvsPlan\"] * 100 / data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"TotalCountPlan\"])).toFixed();\n\n //Radar Data\n var RadarData = {};\n var RadarDataNorthArray = [];\n var RadarDataEastArray = [];\n for (var i = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n RadarDataEastArray.push(data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_DistEast\"]);\n RadarDataNorthArray.push(data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_DistNorth\"]);\n };\n RadarData[\"x\"] = RadarDataEastArray;\n RadarData[\"y\"] = RadarDataNorthArray;\n Chart[\"RadarData\"] = RadarData;\n\n //Bar Depth Data \n var BarDepthData = {};\n var BarDepthDataCountArray = [0, 0, 0, 0, 0];\n for (var i = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n //Count\n var SeverityIndex = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_HoleDepth_Severity\"] - 1; //Array offset to 0\n BarDepthDataCountArray[SeverityIndex] = BarDepthDataCountArray[SeverityIndex] + 1;\n };\n BarDepthDataCountArray[3] = BarDepthDataCountArray[3] * -1; //Flip count\n BarDepthDataCountArray[4] = BarDepthDataCountArray[4] * -1; //Flip count\n BarDepthData[\"x\"] = BarDepthDataCountArray;\n Chart[\"BarDepthData\"] = BarDepthData;\n\n //Bar ToelRL Data \n var BarToeRLData = {};\n var BarToeRLDataCountArray = [0, 0, 0, 0, 0];\n for (var i = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"].length - 1; i >= 0; --i) {\n //Count\n var SeverityIndex = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_ToeRL_Severity\"] - 1; //Array offset to 0\n BarToeRLDataCountArray[SeverityIndex] = BarToeRLDataCountArray[SeverityIndex] + 1;\n };\n BarToeRLDataCountArray[3] = BarToeRLDataCountArray[3] * -1; //Flip count\n BarToeRLDataCountArray[4] = BarToeRLDataCountArray[4] * -1; //Flip count\n BarToeRLData[\"x\"] = BarToeRLDataCountArray;\n Chart[\"BarToelRLData\"] = BarToeRLData;\n\n //Generate Redrill Map\n var RedrillMapData = [];\n for (var i = 0; i <= data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"].length - 1; i++) {\n //Count\n if (data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_\" + this.state.reportHeaderCustomField[5] + \"_Severity\"] === 1) { // Underdrill -1m\n //Reformat\n var TempObject = {};\n TempObject[\"Latitude\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Latitude_Plan\"];\n TempObject[\"Longitude\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Longitude_Plan\"];\n TempObject[\"Name\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Name\"];\n TempObject[\"PlanDetailsId\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"PlanDetailsId\"];\n RedrillMapData.push(TempObject);\n }\n };\n Chart[\"RedrillMapData\"] = RedrillMapData;\n\n //Generate Backfill Map\n var BackfillMapData = [];\n for (var i = 0; i <= data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"].length - 1; i++) {\n //Count\n if (data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Diff_\" + this.state.reportHeaderCustomField[6] + \"_Severity\"] === 5) { // Overdrill +1m\n //Reformat\n var TempObject = {};\n TempObject[\"Latitude\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Latitude_Plan\"];\n TempObject[\"Longitude\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Longitude_Plan\"];\n TempObject[\"Name\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"Name\"];\n TempObject[\"PlanDetailsId\"] = data[0][\"data\"][\"ReportDetails\"][\"Summary\"][\"DiffvsPlan\"][i][\"PlanDetailsId\"];\n BackfillMapData.push(TempObject);\n }\n };\n Chart[\"BackfillMapData\"] = BackfillMapData;\n\n data[0][\"data\"][\"Chart\"] = Chart;\n this.setState({ report: data[0], loadedreport: true });\n } else {\n //Loading error\n this.setState({ reportOpen: false, anyPageError: true, anyPageErrorDetails: '1: API returned null results for report' });\n }\n } \n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n }\n\n async postDispatch(name, hardwareID, locationID, dispatchtime, data) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ 'Id': -1, 'Name': name, 'HardwareId': hardwareID, 'LocationId': locationID, 'DispatchTime': dispatchtime, 'Data': JSON.stringify(data) })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/dispatch', requestOptions)\n .then(response => {\n //Get dispatch info for drop down\n this.setState({ loadingdispatch: true, dispatchPlanDetailsShow: false, });\n this.getDispatchByHardware(locationID,hardwareID);\n });\n }\n\n async postDispatchToDevice(dispatchID, locationID) {\n this.setState({ dispatchToDeviceLoading: true });\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ title: 'React POST Request Example' })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/RabbitMQPublish/dispatchtodevice/' + locationID + '/' + dispatchID, requestOptions)\n .then(response => {\n //Nothing\n this.setState({ dispatchToDeviceLoading: false });\n });\n }\n\n\n async getHardwareAll(locationID) {\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"Hardware\" }));\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/hardwareall/' + locationID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcode\n if (response.status === 200) {\n var data = await response.json();\n\n //Insert blank\n data.unshift({\n id: '0',\n name: '---Select---',\n });\n\n //Request for the hardware for this location if we have it\n if (data !== null) {\n var checkMatch = false;\n for (var i = 0; i < data.length; i++) {\n if (this.state.selectedhardwareID == data[i].id) {\n checkMatch = true;\n break;\n }\n }\n if (checkMatch == false) {\n if (typeof data[0] === \"undefined\") {\n } else {\n var value = data[0].id;\n if (value !== null) {\n this.setState({\n selectedhardwareID: value\n });\n //this.getDataCaptureAllFiltered(this.state.selectedlocationID, value); //have to use currnet as state is not snyc\n }\n }\n }\n }\n this.setState({ hardware: data, loadinghardware: false });\n\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n\n }\n\n async getDataCaptureAll(locationID, hardwareID) {\n //reset\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"DataCapture\" }));\n this.setState({ captureData: [], loading: true });\n\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/datacaptureall/' + locationID + '/' + hardwareID, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcode\n if (response.status === 200) {\n var data = await response.json();\n\n if ((data !== null) && (data.length !== 0)) {\n //adjust data for show\n data = this.manipulateCaptureDataForFrontEnd(data);\n this.setState({ captureData: data, loading: false, captureOpen: false });\n console.log(\"Got data: \" + data);\n } else {\n //Loading error\n this.setState({ anyPageError: true, anyPageErrorDetails: '2: API returned no results for selected time period' });\n }\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n\n }\n\n async getDataCaptureAllFiltered(locationID, hardwareID) {\n //reset\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"DataCapture\" }));\n this.setState({ filterOpen: false });\n this.setState({ captureData: [], loading: true });\n\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/datacaptureallfiltered/' + locationID + '/' + hardwareID + '/' + this.state.startDate.toISOString() + '/' + this.state.endDate.toISOString(), {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcode\n if (response.status === 200) {\n var data = await response.json();\n\n if ((data !== null) && (data.length !== 0)) {\n //adjust data for show\n data = this.manipulateCaptureDataForFrontEnd(data);\n this.setState({ captureData: data, loading: false, captureOpen: false });\n console.log(\"Got data: \" + data);\n } else {\n //Loading error\n this.setState({ anyPageError: true, anyPageErrorDetails: '3: API returned no results for selected time period' });\n }\n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n\n }\n\n async getDataCaptureOneDetailed(id) {\n //Popup detailed display - on\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading + 1, anyPageDataLoadingDetails: \"DataCaptureDetailed\" }));\n this.setState({\n seen: true\n });\n\n const accessToken = this.props.auth.getAccessToken();\n const response = await fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/datacaptureonedetailed/' + this.state.selectedlocationID + '/' + this.state.selectedhardwareID + '/' + id, {\n headers: new Headers({\n \"Accept\": \"application/json\",\n \"Authorization\": `Bearer ${accessToken}`\n })\n }); //TODO: Need to change from hardcode\n if (response.status === 200) {\n var data = await response.json();\n\n //Store data and Popup detailed display - on\n var dataobject = JSON.parse(data[0].detailedData);\n\n //unpack hole data if avail\n if (dataobject[\"holedata\"] != null) {\n if (dataobject[\"holedata\"] != \"\") {\n dataobject[\"holedata\"] = JSON.parse(dataobject[\"holedata\"]);\n\n //unpack data for maps\n var referencestring;\n dataobject[\"holedata\"][\"x1\"] = [];\n dataobject[\"holedata\"][\"y1\"] = [];\n dataobject[\"holedata\"][\"z1\"] = [];\n dataobject[\"holedata\"][\"x2\"] = [];\n dataobject[\"holedata\"][\"y2\"] = [];\n dataobject[\"holedata\"][\"z2\"] = [];\n for (var i = 0; i < dataobject[\"holedata\"][\"utc\"].length; i++) {\n referencestring = \"x\" + dataobject[\"holedata\"][\"sequence\"][i];\n dataobject[\"holedata\"][referencestring].push(dataobject[\"holedata\"][\"x\"][i])\n referencestring = \"y\" + dataobject[\"holedata\"][\"sequence\"][i];\n dataobject[\"holedata\"][referencestring].push(dataobject[\"holedata\"][\"y\"][i])\n referencestring = \"z\" + dataobject[\"holedata\"][\"sequence\"][i];\n dataobject[\"holedata\"][referencestring].push(dataobject[\"holedata\"][\"z\"][i])\n }\n }\n }\n\n //Convert FLIR to rendered\n var canvas = document.createElement('canvas');\n canvas.width = 640;\n canvas.height = 512;\n var context = canvas.getContext('2d');\n var imagesrc = dataobject[\"flirimage\"];\n var img = document.createElement('img');\n img.src = imagesrc;\n img.onload = () => { this.drawflirrender(canvas, dataobject, context, img) };\n \n } else {\n console.log(\"Error in response: \" + response.status);\n }\n this.setState((prevState) => ({ anyPageDataLoading: prevState.anyPageDataLoading - 1 }));\n\n }\n\n drawflirrender(canvas, dataobject, context, img) {\n //const colorstops = [\"#ffffff\", \"#ffd700\", \"#cc0077\", \"#20008c\", \"#000000\"]; // palette\n const colorstops = [\"#000000\", \"#20008c\", \"#cc0077\", \"#ffd700\", \"#ffffff\"]; // palette\n\n context.drawImage(img, 0, 0);\n\n var imageData = context.getImageData(0, 0, img.width, img.height);\n\n for (let i = 0; i < imageData.data.length; i += 4) {\n let avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;\n\n // find the closest color in the custom palette\n let closestColorIndex = 0;\n for (let j = 0; j < colorstops.length - 1; j++) {\n if (avg >= (j * 255 / (colorstops.length - 1)) && avg <= ((j + 1) * 255 / (colorstops.length - 1))) {\n closestColorIndex = j;\n break;\n }\n }\n\n // determine the values for each color channel based on linear interpolation\n let color1 = colorstops[closestColorIndex];\n let color2 = colorstops[closestColorIndex + 1];\n let t = (avg - (closestColorIndex * 255 / (colorstops.length - 1))) / (255 / (colorstops.length - 1));\n\n imageData.data[i] = parseInt(color1.substring(1, 3), 16) + (parseInt(color2.substring(1, 3), 16) - parseInt(color1.substring(1, 3), 16)) * t;\n imageData.data[i + 1] = parseInt(color1.substring(3, 5), 16) + (parseInt(color2.substring(3, 5), 16) - parseInt(color1.substring(3, 5), 16)) * t;\n imageData.data[i + 2] = parseInt(color1.substring(5, 7), 16) + (parseInt(color2.substring(5, 7), 16) - parseInt(color1.substring(5, 7), 16)) * t;\n }\n context.putImageData(imageData, 0, 0);\n\n var renderedimage = canvas.toDataURL(\"image/png\").replace(\"image/png\", \"image/octet-stream\"); // here is the most important part because if you dont replace you will get a DOM 18 exception.\n dataobject[\"flirimage_rendered\"] = renderedimage;\n\n this.setState({\n seen: true,\n showDetailedWindow: true,\n popupDetailedData: dataobject\n });\n\n }\n\n async postDataCaptureInsert(jsonstring) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify(jsonstring)\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/db/insert/datacapture', requestOptions)\n .then(response => {\n //Get latest list of\n this.setState({ loading: true, });\n this.getDataCaptureAllFiltered(this.state.selectedlocationID, this.state.selectedhardwareID); //refresh data on page\n });\n }\n\n async postUploadFull(handsetID, endtime) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ title: 'React POST Request Example' })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/RabbitMQPublish/getuploadfull/' + handsetID + '/' + endtime, requestOptions)\n .then(response => {\n this.setState({ loading: true, });\n this.getDataCaptureAllFiltered(this.state.selectedlocationID, this.state.selectedhardwareID); //refresh data on page\n });\n }\n\n async postReuploadAll(handsetID) {\n const accessToken = this.props.auth.getAccessToken();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', \"Accept\": \"application/json\", \"Authorization\": `Bearer ${accessToken}` },\n body: JSON.stringify({ title: 'React POST Request Example' })\n };\n\n fetch(window._env_.REACT_APP_API_ADDRESS + '/api/RabbitMQPublish/getreuploadall/' + handsetID, requestOptions)\n .then(response => {\n this.setState({ loading: true, });\n this.getDataCaptureAllFiltered(this.state.selectedlocationID, this.state.selectedhardwareID); //refresh data on page\n });\n }\n}\n","export const AUTH_CONFIG = {\n domain: window._env_.REACT_APP_AUTH0_DOMAIN,\n clientID: window._env_.REACT_APP_AUTH0_CLIENTID,\n redirectUri: window._env_.REACT_APP_AUTH0_REDIRECTURI,\n audience: window._env_.REACT_APP_AUTH0_AUDIENCE,\n logoutUri: window._env_.REACT_APP_AUTH0_LOGOUTURI\n};","import auth0 from 'auth0-js';\nimport { AUTH_CONFIG } from './Auth0Config';\n\nexport default class AuthService {\n\n constructor(props) {\n this.state = {\n //User Data\n name: \"User\",\n organisationName: \"Company\"\n };\n }\n\n auth0 = new auth0.WebAuth({\n domain: AUTH_CONFIG.domain,\n clientID: AUTH_CONFIG.clientID,\n redirectUri: AUTH_CONFIG.redirectUri,\n audience: AUTH_CONFIG.audience,\n responseType: 'token id_token',\n scope: 'openid https://athena.com/user_metadata'\n });\n\n login() {\n this.auth0.authorize();\n }\n\n logout() {\n sessionStorage.removeItem('access_token');\n sessionStorage.removeItem('id_token');\n sessionStorage.removeItem('expires_at');\n this.auth0.logout({\n returnTo: AUTH_CONFIG.logoutUri,\n clientID: AUTH_CONFIG.clientID\n });\n }\n\n handleAuthentication(history) {\n this.auth0.parseHash((err, authResult) => {\n if (authResult && authResult.accessToken && authResult.idToken) {\n this.setSession(authResult);\n history.push(\"/\");\n } else if (err) {\n console.log(err);\n }\n });\n }\n\n setSession(authResult) {\n let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());\n sessionStorage.setItem('access_token', authResult.accessToken);\n sessionStorage.setItem('id_token', authResult.idToken);\n sessionStorage.setItem('expires_at', expiresAt);\n }\n\n isAuthenticated() {\n let expiresAt = JSON.parse(sessionStorage.getItem('expires_at')); //Can use localStorage if you dont want to be cleaned on browser closure\n return new Date().getTime() < expiresAt;\n }\n\n getAccessToken() {\n const accessToken = sessionStorage.getItem('access_token');\n if (!accessToken) {\n throw new Error('No access token found');\n }\n return accessToken;\n }\n\n getUserInfo(accessToken, callback) {\n this.auth0.client.userInfo(accessToken, function (err, user) {\n // Now you have the user's information\n callback(user[\"https://athena.com/user_metadata\"]);\n });\n }\n\n}","import React, { Component } from 'react';\nimport { Switch, Route } from 'react-router';\nimport { Home } from './components/Home';\nimport AuthService from './AuthService'; //Auth0\n\nexport default class App extends Component {\n static displayName = App.name;\n\n constructor() {\n super();\n this.authService = new AuthService(); //Auth0\n }\n\n renderHome() {\n let resultComponent = \n \n {window._env_.REACT_APP_CONTENT_TITLE} \n \n \n \n \n
\n\n {this.state.seen ? \n \n Filter Data \n \n \n \n \n
\n\n \n \n Config Data \n \n \n \n \n
\n\n \n \n Plan Data \n \n \n \n \n
\n \n \n \n Dispatch Data \n \n \n \n \n
\n\n \n \n Capture Data \n \n \n \n \n \n \n \n
\n\n \n \n Review Data \n \n \n \n \n \n \n
\n\n \n \n Report Data \n \n \n \n \n \n \n
\n\n \n
\n
\n\n \n \n \n \n \n
\n }\n\n {(this.state.pageDataSummary) &&\n \n \n \n Location: {this.state.loadinglocation ? \"Loading...\" : this.state.location[this.state.location.findIndex(x => x.id == this.state.selectedlocationID)].name}
\n SubLocation: {this.state.loadingsublocation ? \"Loading...\" : this.state.sublocation[this.state.sublocation.findIndex(x => x.id == this.state.selectedsublocationID)].name}
\n Seqeuence: {this.state.loadingsequence ? \"Loading...\" : this.state.sequence[this.state.sequence.findIndex(x => x.id == this.state.selectedsequenceID)].name}
\n SubSequence: {this.state.loadingsubsequence ? \"Loading...\" : this.state.subsequence[this.state.subsequence.findIndex(x => x.id == this.state.selectedsubsequenceID)].name}
\n Plan: {this.state.loadingplan ? \"Loading...\" : this.state.plan[this.state.plan.findIndex(x => x.id == this.state.selectedplanID)].data[\"Name\"]}
\n Hardware: {this.state.loadinghardware ? \"Loading...\" : this.state.hardware[this.state.hardware.findIndex(x => x.id == this.state.selectedhardwareID)].name}
\n Dispatch: {this.state.loadingdispatch ? \"Loading...\" : this.state.dispatch[this.state.dispatch.findIndex(x => x.id == this.state.selecteddispatchID)].name}
\n \n \n
\n }\n \n \n SubLocation: {this.state.loadingsublocation ? \"Loading...\" : this.state.sublocation[this.state.sublocation.findIndex(x => x.id == this.state.selectedsublocationID)].name}
\n Seqeuence: {this.state.loadingsequence ? \"Loading...\" : this.state.sequence[this.state.sequence.findIndex(x => x.id == this.state.selectedsequenceID)].name}
\n SubSequence: {this.state.loadingsubsequence ? \"Loading...\" : this.state.subsequence[this.state.subsequence.findIndex(x => x.id == this.state.selectedsubsequenceID)].name}
\n Plan: {this.state.loadingplan ? \"Loading...\" : this.state.plan[this.state.plan.findIndex(x => x.id == this.state.selectedplanID)].data[\"Name\"]}
\n Hardware: {this.state.loadinghardware ? \"Loading...\" : this.state.hardware[this.state.hardware.findIndex(x => x.id == this.state.selectedhardwareID)].name}
\n Dispatch: {this.state.loadingdispatch ? \"Loading...\" : this.state.dispatch[this.state.dispatch.findIndex(x => x.id == this.state.selecteddispatchID)].name}
\n
\n \n \n
\n\n \n Copyright © 2020 {window._env_.REACT_APP_CONTENT_COMPANY}\n
\n Redirecting to the authentication service...
Starting session...