{currentLocation}
\r\n )}\r\n \r\n );\r\n }\r\n}\r\n","import { faFileAlt, faFileVideo } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport axios from \"axios\";\r\nimport React from \"react\";\r\nimport { assetTypes, contentDefinitionId } from \"./NomadSelect\";\r\nimport { AcceptedGPSTypes } from \"./OpenOrExtractFileDialog\";\r\n\r\nexport const mediaType = {\r\n video: 2,\r\n text: 4,\r\n};\r\n\r\nconst columns = {\r\n name: 1,\r\n duration: 2,\r\n author: 3,\r\n created: 4,\r\n};\r\n\r\nexport async function findAssociatedGps(detail) {\r\n const gpsAsset =\r\n detail.relatedAssets &&\r\n detail.relatedAssets.find((related) => related.metadataType === 88);\r\n return (\r\n gpsAsset && {\r\n url: gpsAsset.fullUrl,\r\n name: gpsAsset.url.substring(gpsAsset.url.lastIndexOf(\"/\") + 1),\r\n }\r\n );\r\n}\r\n\r\nexport default class NomadFileList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n files: [],\r\n selectedFiles: [],\r\n loading: false,\r\n sort: { column: columns.name, ascending: true },\r\n };\r\n\r\n this.toggleColumnSort = this.toggleColumnSort.bind(this);\r\n this.selectFile = this.selectFile.bind(this);\r\n this.selectAll = this.selectAll.bind(this);\r\n this.acceptSelection = this.acceptSelection.bind(this);\r\n\r\n this.disabledActionButton = (\r\n \r\n );\r\n this.actionButton = (\r\n \r\n );\r\n }\r\n\r\n componentDidMount() {\r\n this.refreshFileList();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (\r\n this.props.folderId !== prevProps.folderId ||\r\n this.props.searchTerm !== prevProps.searchTerm ||\r\n this.props.mediaType !== prevProps.mediaType\r\n ) {\r\n this.refreshFileList();\r\n }\r\n }\r\n\r\n setActionButton() {\r\n if (!this.props.multiSelect) {\r\n this.props.setActionButton(null);\r\n } else {\r\n this.props.setActionButton(\r\n this.state.selectedFiles.length > 0\r\n ? this.actionButton\r\n : this.disabledActionButton\r\n );\r\n }\r\n }\r\n\r\n async refreshFileList() {\r\n if (!this.props.folderId) return;\r\n\r\n this.setState({ loading: true, files: [], loadedFileCount: 0 });\r\n await this.getFilesPage(0);\r\n }\r\n\r\n async getFilesPage(pageOffset) {\r\n const filters = [\r\n {\r\n fieldName: \"contentDefinitionId\",\r\n operator: \"Equals\",\r\n values: contentDefinitionId,\r\n },\r\n {\r\n fieldName: \"assetType\",\r\n operator: \"Equals\",\r\n values: assetTypes.file,\r\n },\r\n {\r\n fieldName: \"mediaType\",\r\n operator: \"Equals\",\r\n values: this.props.mediaType ?? mediaType.video,\r\n },\r\n ];\r\n if (!this.props.searchTerm) {\r\n filters.push({\r\n fieldName: \"parentId\",\r\n operator: \"Equals\",\r\n values: this.props.folderId,\r\n });\r\n }\r\n\r\n const postData = {\r\n filters,\r\n returnedFieldNames: [\r\n \"identifiers.createdDate\",\r\n \"identifiers.videoDuration\",\r\n \"identifiers.videoDurationDisplay\",\r\n \"identifiers.ownerName\",\r\n \"identifiers.ownerUsername\",\r\n \"identifiers.url\",\r\n \"identifiers.previewVideoFullUrl\",\r\n \"identifiers.parentId\",\r\n \"identifiers.displayPath\",\r\n ],\r\n pageOffset,\r\n pageSize: 50,\r\n };\r\n if (this.props.searchTerm) {\r\n postData.searchQuery = this.props.searchTerm;\r\n }\r\n\r\n const response = await axios.post(\r\n //\"https://app-api.nomad.mainroads.wa.gov.au/api/portal/search\",\r\n `${this.props.nomadApiUrl}/api/portal/search`,\r\n postData,\r\n {\r\n headers: {\r\n Authorization: `Bearer ${this.props.token}`,\r\n },\r\n }\r\n );\r\n\r\n const fileInfo = response && response.data;\r\n if (fileInfo) {\r\n var validItems =\r\n this.props.mediaType === mediaType.text\r\n ? fileInfo.items.filter((item) =>\r\n AcceptedGPSTypes.some((extension) =>\r\n item.title.toUpperCase().endsWith(extension)\r\n )\r\n )\r\n : fileInfo.items;\r\n this.setState(\r\n {\r\n files: [...this.state.files, ...validItems],\r\n loadedFileCount: this.state.loadedFileCount + fileInfo.items.length,\r\n },\r\n () => {\r\n if (fileInfo.totalItemCount > this.state.loadedFileCount)\r\n this.getFilesPage(pageOffset + 1);\r\n else this.setState({ loading: false });\r\n }\r\n );\r\n } else this.setState({ loading: false });\r\n }\r\n\r\n toggleColumnSort(e) {\r\n const column = parseInt(e.currentTarget.dataset.id);\r\n const ascending =\r\n this.state.sort.column === column ? !this.state.sort.ascending : true;\r\n this.setState({ sort: { column, ascending } });\r\n }\r\n\r\n headingClass(column, sortColumn) {\r\n return sortColumn === column\r\n ? this.state.sort.ascending\r\n ? \"sortAscending\"\r\n : \"sortDescending\"\r\n : null;\r\n }\r\n\r\n selectFile(e) {\r\n const { id, url, name } = e.currentTarget.dataset;\r\n if (this.props.multiSelect) {\r\n if (this.state.selectedFiles.includes(id)) {\r\n this.setState(\r\n {\r\n selectedFiles: this.state.selectedFiles.filter(\r\n (fileId) => fileId !== id\r\n ),\r\n },\r\n () => this.setActionButton()\r\n );\r\n } else {\r\n this.setState(\r\n { selectedFiles: [...this.state.selectedFiles, id] },\r\n () => this.setActionButton()\r\n );\r\n }\r\n } else {\r\n this.props.loadFiles([{ gps: { url, name } }]);\r\n }\r\n }\r\n\r\n selectAll() {\r\n if (this.state.files.length === this.state.selectedFiles.length) {\r\n this.setState({ selectedFiles: [] }, () => this.setActionButton());\r\n } else {\r\n this.setState(\r\n { selectedFiles: this.state.files.map((file) => file.id) },\r\n () => this.setActionButton()\r\n );\r\n }\r\n }\r\n\r\n async findAssociatedGps(fileId) {\r\n const response = await axios.get(\r\n `${this.props.nomadApiUrl}/api/asset/${fileId}/detail`,\r\n {\r\n headers: {\r\n Authorization: `Bearer ${this.props.token}`,\r\n },\r\n }\r\n );\r\n\r\n const detail = response && response.data;\r\n if (detail) {\r\n return findAssociatedGps(detail);\r\n }\r\n }\r\n\r\n async acceptSelection() {\r\n const forVideo =\r\n (this.props.mediaType ?? mediaType.video) === mediaType.video;\r\n if (!forVideo) return;\r\n\r\n const selectedFiles = this.state.files.filter((file) =>\r\n this.state.selectedFiles.includes(file.id)\r\n );\r\n\r\n this.setState({ loading: true, selectedFiles: [] }, () =>\r\n this.setActionButton()\r\n );\r\n const withAttachedGps = await Promise.all(\r\n selectedFiles.map(async (file) => ({\r\n video: {\r\n id: file.id,\r\n url: file.identifiers.previewVideoFullUrl,\r\n name: file.title,\r\n },\r\n gps: await this.findAssociatedGps(file.id),\r\n }))\r\n );\r\n this.setState({ loading: false });\r\n this.props.loadFiles(withAttachedGps);\r\n }\r\n\r\n render() {\r\n const forVideo =\r\n (this.props.mediaType ?? mediaType.video) === mediaType.video;\r\n const sortColumn =\r\n this.state.sort.column === columns.duration && !forVideo\r\n ? columns.name\r\n : this.state.sort.column;\r\n const files = [...this.state.files].map((file) => ({\r\n ...file,\r\n createdDate: new Date(file.identifiers.createdDate),\r\n }));\r\n function textSort(a, b) {\r\n const itemA = (a ?? \"\").toUpperCase();\r\n const itemB = (b ?? \"\").toUpperCase();\r\n if (itemA < itemB) return -1;\r\n if (itemA > itemB) return 1;\r\n return 0;\r\n }\r\n function dateSort(a, b) {\r\n return a - b;\r\n }\r\n files.sort((file1, file2) => {\r\n const f1 = this.state.sort.ascending ? file1 : file2;\r\n const f2 = this.state.sort.ascending ? file2 : file1;\r\n switch (sortColumn) {\r\n case columns.duration:\r\n return textSort(\r\n f1.identifiers.videoDuration,\r\n f2.identifiers.videoDuration\r\n );\r\n case columns.author:\r\n return textSort(\r\n f1.identifiers.ownerName ?? f1.identifiers.ownerUsername,\r\n f2.identifiers.ownerName ?? f2.identifiers.ownerUsername\r\n );\r\n case columns.created:\r\n return dateSort(f1.createdDate, f2.createdDate);\r\n default:\r\n return textSort(f1.title, f2.title);\r\n }\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import { faFolder } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport axios from \"axios\";\r\nimport React from \"react\";\r\nimport { assetTypes, contentDefinitionId } from \"./NomadSelect\";\r\n\r\nexport default class NomadFolderList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { folders: [], loading: false };\r\n }\r\n\r\n componentDidMount() {\r\n this.refreshFolderList();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.folderId !== prevProps.folderId) {\r\n this.refreshFolderList();\r\n }\r\n }\r\n\r\n async refreshFolderList() {\r\n if (!this.props.folderId) return;\r\n\r\n this.setState({ loading: true, folders: [] });\r\n await this.getFolderPage(0);\r\n }\r\n\r\n async getFolderPage(pageOffset) {\r\n const response = await axios.post(\r\n //\"https://app-api.nomad.mainroads.wa.gov.au/api/portal/search\",\r\n `${this.props.nomadApiUrl}/api/portal/search`,\r\n {\r\n filters: [\r\n {\r\n fieldName: \"contentDefinitionId\",\r\n operator: \"Equals\",\r\n values: contentDefinitionId,\r\n },\r\n {\r\n fieldName: \"assetType\",\r\n operator: \"Equals\",\r\n values: assetTypes.folder,\r\n },\r\n {\r\n fieldName: \"parentId\",\r\n operator: \"Equals\",\r\n values: this.props.folderId,\r\n },\r\n ],\r\n pageOffset,\r\n pageSize: 50,\r\n },\r\n {\r\n headers: {\r\n Authorization: `Bearer ${this.props.token}`,\r\n },\r\n }\r\n );\r\n\r\n const folderInfo = response && response.data;\r\n if (folderInfo) {\r\n this.setState(\r\n { folders: [...this.state.folders, ...folderInfo.items] },\r\n () => {\r\n if (folderInfo.totalItemCount > this.state.folders.length)\r\n this.getFolderPage(pageOffset + 1);\r\n else this.setState({ loading: false });\r\n }\r\n );\r\n } else this.setState({ loading: false });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.state.loading || this.state.folders.length > 0) && (\r\n \r\n {this.state.loading ? (\r\n \r\n \r\n
\r\n )}\r\n
\r\n {!this.state.loading && this.state.files.length > 0 ? (\r\n Loading...
\r\n ) : (\r\n | \r\n | \r\n )}\r\n Location | }\r\n\r\n | \r\n )}\r\n \r\n | \r\n {forVideo && (\r\n {file.identifiers.videoDurationDisplay} | \r\n )}\r\n\r\n {file.identifiers.ownerName ??\r\n file.identifiers.ownerUsername}\r\n | \r\n{file.createdDate.toLocaleString()} | \r\n {this.props.searchTerm && (\r\n
|---|
\r\n {this.props.multiSelect\r\n ? `${this.state.selectedFiles.length} selected of ${this.state.files.length} files`\r\n : `${this.state.files.length} files`}\r\n
\r\n ) : null}\r\n \r\n {this.state.loading ? (\r\n \r\n
\r\n ))\r\n )}\r\n \r\n )\r\n );\r\n }\r\n}\r\n","import { faSearch } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n ApplicationMessage,\r\n messageState,\r\n} from \"@mrwa/rime-replacement/esriControls/general/ApplicationMessage\";\r\nimport axios from \"axios\";\r\nimport React from \"react\";\r\nimport { getCorpAuthToken } from \"../Auth\";\r\nimport { CrashContext } from \"../context\";\r\nimport NomadBreadcrumbs from \"./NomadBreadcrumbs\";\r\nimport NomadFileList, { mediaType, findAssociatedGps } from \"./NomadFileList\";\r\nimport NomadFolderList from \"./NomadFolderList\";\r\n\r\nimport \"./nomadSelect.css\";\r\n\r\nexport const contentDefinitionId = \"3ff29f61-bd0b-4c17-b855-49db5a292aeb\";\r\nconst startParentId = \"9dd7145a-7968-4a29-94bb-4e1dc5d8f83c\";\r\nexport const assetTypes = {\r\n folder: 1,\r\n file: 2,\r\n};\r\n\r\nfunction ensureUniqueName(name, existingNames, i = 0, originalName = null) {\r\n if (existingNames.indexOf(name) > -1) {\r\n const workingName = originalName ?? name;\r\n const left = workingName.substring(0, workingName.lastIndexOf(\".\"));\r\n const right = workingName.substring(workingName.lastIndexOf(\".\"));\r\n return ensureUniqueName(\r\n `${left}_${++i}${right}`,\r\n existingNames,\r\n i,\r\n workingName\r\n );\r\n }\r\n return name;\r\n}\r\n\r\nexport default class NomadSelect extends React.Component {\r\n static contextType = CrashContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n mediaType: mediaType.video,\r\n multiSelect: true,\r\n searchValue: \"\", //search box text, as typing\r\n searchTerm: null, //accepted search text\r\n cancelButton: null,\r\n };\r\n\r\n this.props.setTitle(\r\n this.props.loadNomad\r\n ? \"Loading Nomad Video, Please Wait...\"\r\n : \"Select Nomad Video(s)\"\r\n );\r\n\r\n this.cancelFileSelectButton = (\r\n Loading...
\r\n ) : (\r\n this.state.folders.map((folder) => (\r\n Loading...
\r\n ) : this.state.awaitingMapInitialisation ? (\r\n Awaiting Map Initialisation...
\r\n ) : (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {!this.state.searchTerm && (\r\n
\r\n \r\n );\r\n }\r\n}\r\n","export const formatterDate = new Intl.DateTimeFormat(\"en-au\", {\r\n year: \"2-digit\",\r\n month: \"2-digit\",\r\n day: \"2-digit\",\r\n});\r\n\r\nexport const formatterDay = new Intl.DateTimeFormat(\"en-au\", {\r\n weekday: \"short\",\r\n});\r\n\r\nexport const formatterTime = new Intl.DateTimeFormat(\"en-au\", {\r\n hour: \"2-digit\",\r\n minute: \"2-digit\",\r\n second: \"2-digit\",\r\n hour12: true,\r\n});\r\n\r\nexport const formatterTime24 = new Intl.DateTimeFormat(\"en-au\", {\r\n hourCycle: \"h23\",\r\n hour: \"2-digit\",\r\n minute: \"2-digit\",\r\n});\r\n\r\nexport const getSeverityColour = (\r\n displaySettings,\r\n value,\r\n defaultColour = \"transparent\"\r\n) => {\r\n const severitySetting = getSeveritySetting(displaySettings, value);\r\n return (severitySetting && severitySetting.colour) || defaultColour;\r\n};\r\n\r\nconst getSeveritySetting = (displaySettings, value) =>\r\n displaySettings && displaySettings.find((d) => d.value === value);\r\n\r\nexport async function loadFileAsText(fileUnion) {\r\n return new Promise((resolve, reject) => {\r\n fileUnion.case({\r\n FileSystem: (file) => {\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n resolve(reader.result);\r\n };\r\n reader.onerror = reject;\r\n\r\n reader.readAsText(file);\r\n },\r\n Url: async (url) => {\r\n try {\r\n const response = await fetch(url);\r\n const data = await response.text();\r\n resolve(data);\r\n } catch (e) {\r\n reject(e);\r\n }\r\n },\r\n });\r\n });\r\n}\r\n\r\nexport const downloadFile = (data, name) => {\r\n //download file\r\n const element = document.createElement(\"a\");\r\n element.href = data;\r\n element.download = name;\r\n document.body.appendChild(element); // Required for this to work in FireFox\r\n element.click();\r\n URL.revokeObjectURL(element);\r\n document.body.removeChild(element);\r\n};\r\n","import { formatterDate, formatterTime } from \"./misc\";\r\n\r\nexport function formatDate(date) {\r\n return formatterDate.format(date);\r\n}\r\n\r\nexport function formatTime(date) {\r\n return formatterTime.format(date).toUpperCase();\r\n}\r\n\r\n//converts from degrees to radians.\r\nfunction toRadians(degrees) {\r\n return (degrees * Math.PI) / 180;\r\n}\r\n\r\n//converts from radians to degrees.\r\nfunction toDegrees(radians) {\r\n return (radians * 180) / Math.PI;\r\n}\r\n\r\n//adds bearing data to an array\r\nexport function addBearing(gpsArray) {\r\n if (gpsArray.length === 1) return gpsArray;\r\n\r\n for (let i = 0; i < gpsArray.length - 1; i++) {\r\n gpsArray[i].bearingValue = calculateBearing(gpsArray[i], gpsArray[i + 1]);\r\n gpsArray[i].direction = calculateDirection(gpsArray[i]);\r\n }\r\n //setting direction and row of last index to the previous known direction\r\n gpsArray[gpsArray.length - 1].bearingValue =\r\n gpsArray[gpsArray.length - 2].bearingValue;\r\n gpsArray[gpsArray.length - 1].direction =\r\n gpsArray[gpsArray.length - 2].direction;\r\n //if vehicle is not moving then get last bearingValue & direction from when vehicle was moving and cascade through non traveling rows\r\n gpsArray.forEach((row, i) => {\r\n if (i === 0) return; //dont want to set if first index in array is 0 km/h\r\n if (row.speed === \"0 km/h\") {\r\n row.bearingValue = gpsArray[i - 1].bearingValue;\r\n row.direction = gpsArray[i - 1].direction;\r\n }\r\n });\r\n return gpsArray;\r\n}\r\n\r\n//calculates bearing based on a start/end latitude and longitude\r\nfunction calculateBearing(startPoint, endPoint) {\r\n const startLat = toRadians(startPoint.latitude);\r\n const startLng = toRadians(startPoint.longitude);\r\n const destLat = toRadians(endPoint.latitude);\r\n const destLng = toRadians(endPoint.longitude);\r\n\r\n const y = Math.sin(destLng - startLng) * Math.cos(destLat);\r\n const x =\r\n Math.cos(startLat) * Math.sin(destLat) -\r\n Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);\r\n const bearing = toDegrees(Math.atan2(y, x));\r\n\r\n return (bearing + 360) % 360;\r\n}\r\n\r\nfunction calculateDirection(row) {\r\n if (row.bearingValue >= 0 && row.bearingValue <= 360) {\r\n const bearingSlice = 360 / 16;\r\n const slices = [\r\n \"N\",\r\n \"NNE\",\r\n \"NE\",\r\n \"ENE\",\r\n \"E\",\r\n \"ESE\",\r\n \"SE\",\r\n \"SSE\",\r\n \"S\",\r\n \"SSW\",\r\n \"SW\",\r\n \"WSW\",\r\n \"W\",\r\n \"WNW\",\r\n \"NW\",\r\n \"NNW\",\r\n \"N\",\r\n ];\r\n let sliceStart = 0 - bearingSlice / 2;\r\n let index = 0;\r\n while (sliceStart < row.bearingValue) {\r\n if (row.bearingValue <= sliceStart + bearingSlice) return slices[index];\r\n sliceStart += bearingSlice;\r\n index++;\r\n }\r\n } else {\r\n return \"\";\r\n }\r\n}\r\n\r\nexport const exportedForTesting = {\r\n toRadians,\r\n toDegrees,\r\n calculateBearing,\r\n calculateDirection,\r\n};\r\n","import { addBearing, formatDate, formatTime } from \"./baseParser\";\r\n\r\n/**\r\n * $RMC & GGA Rows have been extracted - indexes of arrays correspond to field numbers specified in following link\r\n * https://gpsd.gitlab.io/gpsd/NMEA.html#_rmc_recommended_minimum_navigation_information\r\n *\r\n * returns a time sorted unique array of GPS records\r\n */\r\nexport function parseRawData(fileData) {\r\n const row = fileData.split(\"\\n\");\r\n const splitRows = row.map((x) => x.split(\",\"));\r\n const dataRMC = splitRows.filter((x) => x[0].endsWith(\"RMC\"));\r\n const dataGGA = splitRows.filter((x) => x[0].endsWith(\"GGA\"));\r\n\r\n const rmcArray = dataRMC.map((rmc) => {\r\n const dateTime = new Date(convertGpsDate(rmc[9]) + convertGpsTime(rmc[1]));\r\n const sortingKey = new Date(\"1970-01-01\" + convertGpsTime(rmc[1]));\r\n return {\r\n sortingKey,\r\n dateTime,\r\n latitude: coordinateConvert(rmc[3], true),\r\n longitude: coordinateConvert(rmc[5], false),\r\n date: convertGpsDate(rmc[9]),\r\n speed: convertSpeed(rmc[7]),\r\n time: convertGpsTime(rmc[1]),\r\n dateDisplay: formatDate(dateTime),\r\n timeDisplay: formatTime(dateTime),\r\n dateSet: true,\r\n };\r\n });\r\n const ggaArray = dataGGA.map((gga) => {\r\n const dateString =\r\n rmcArray.length > 0\r\n ? rmcArray[0].dateTime.toISOString().substring(0, 10)\r\n : \"1970-01-01\";\r\n const dateTime = new Date(dateString + convertGpsTime(gga[1]));\r\n const sortingKey = new Date(\"1970-01-01\" + convertGpsTime(gga[1]));\r\n return {\r\n sortingKey,\r\n dateTime,\r\n latitude: coordinateConvert(gga[2], true),\r\n longitude: coordinateConvert(gga[4], false),\r\n speed: \"Unknown\",\r\n time: convertGpsTime(gga[1]),\r\n dateDisplay: formatDate(dateTime),\r\n timeDisplay: formatTime(dateTime),\r\n dateSet: rmcArray.length > 0,\r\n };\r\n });\r\n\r\n const mergedData = [...rmcArray, ...ggaArray];\r\n const uniqueRows = Array.from(new Set(mergedData.map((a) => a.time))).map(\r\n (time) => {\r\n return mergedData.find((a) => a.time === time);\r\n }\r\n );\r\n const sortedRows = uniqueRows.sort((a, b) => a.sortingKey - b.sortingKey);\r\n\r\n return addBearing(sortedRows);\r\n}\r\n\r\n//converting latitude/longitude from the given geometry string\r\nfunction coordinateConvert(geom, latitude) {\r\n const wholepart = latitude ? geom.slice(0, 2) : geom.slice(0, 3);\r\n const fractional = latitude\r\n ? geom.slice(2, 4) + geom.slice(4, 10)\r\n : geom.slice(3, 5) + geom.slice(5, 11);\r\n\r\n const combinedResult = parseInt(wholepart) + parseFloat(fractional) / 60;\r\n const result = latitude ? \"-\" + combinedResult : combinedResult;\r\n\r\n return parseFloat(result).toFixed(6);\r\n}\r\n\r\n//converts speed into a whole number and converts from knots to km/h\r\nfunction convertSpeed(speed) {\r\n return `${(speed = parseInt(speed * 1.852))} km/h`;\r\n}\r\n\r\n//creates a string that can be used to create a date object\r\nfunction convertGpsTime(time) {\r\n const convertHr = time.slice(0, 2) + \":\" + time.slice(2);\r\n const convertMin = convertHr.slice(0, 5) + \":\" + convertHr.slice(5);\r\n const finalTime = \"T\" + convertMin + \"Z\";\r\n\r\n return finalTime;\r\n}\r\n\r\n//creates a date string that can be used to create a date object - appends year with '20' as data row only gives us last two digits\r\nfunction convertGpsDate(date) {\r\n const day = date.slice(0, 2);\r\n const month = date.slice(2, 4);\r\n const year = date.slice(4, 6);\r\n const finalDate = \"20\" + year + \"-\" + month + \"-\" + day;\r\n\r\n return finalDate;\r\n}\r\n\r\nexport const exportedForTesting = {\r\n convertGpsTime,\r\n convertGpsDate,\r\n coordinateConvert,\r\n};\r\n","import goproTelemetry from \"gopro-telemetry\";\r\nimport gpmfExtract from \"gpmf-extract\";\r\nimport { XMLBuilder } from \"fast-xml-parser\";\r\nimport { downloadFile } from \"../data/misc\";\r\nimport { parseRawData as parseRawNmeaData } from \"../data/nmeaParser\";\r\n\r\nconst BlackVueH265StartPoint = 82246;\r\nconst BlackVueH264StartPoint = 82189;\r\n\r\nexport async function extractGoPro(file, onProgress, cancellationToken) {\r\n onProgress({\r\n extractionState: \"Extracting Telemetry\",\r\n extractionPercent: 0,\r\n });\r\n const progress = (percent) => onProgress({ extractionPercent: percent });\r\n let extracted;\r\n try {\r\n extracted = await gpmfExtract(file, {\r\n browserMode: true,\r\n progress,\r\n //if there is an error in extracting while using webworkers that doesn't kill the extraction process, the process can't be cancelled without refreshing the page.\r\n //using the standard thread rather than webWorker enables the error thrown by the extractor to hit the exception handler below\r\n useWorker: false,\r\n cancellationToken,\r\n });\r\n } catch (e) {\r\n if (!(e.startsWith && e.startsWith(\"Canceled\"))) {\r\n throw new Error(e.message ?? e);\r\n }\r\n //extraction process was cancelled\r\n return;\r\n }\r\n\r\n const endDate = new Date(extracted.timing.start);\r\n endDate.setSeconds(endDate.getSeconds() + extracted.timing.videoDuration);\r\n\r\n onProgress({\r\n extractionState: \"Processing Telemetry\",\r\n extractionPercent: 0,\r\n });\r\n //goproTelemetry function expects node's setImmediate function to be defined, which it isn't in the browser. setTimeout 0 is equivalent\r\n if (!window.setImmediate) window.setImmediate = (x) => setTimeout(x, 0);\r\n const telemetry = await goproTelemetry(extracted, {\r\n //see https://github.com/JuanIrache/gopro-telemetry for options\r\n groupTimes: 1, //Sample at 1Hz\r\n disableMerging: true,\r\n disableInterpolaltion: true,\r\n stream: [\"GPS5\"],\r\n GPS5Precision: 625, //using default values from https://goprotelemetryextractor.com/free/\r\n GPS5Fix: 2,\r\n WrongSpeed: 563, //m/s\r\n progress: (percent) => onProgress({ extractionPercent: percent * 100 }),\r\n });\r\n\r\n const samples = telemetry[\"1\"].streams.GPS5.samples;\r\n const recordedPath = samples\r\n .filter((x) => new Date(x.date) < endDate)\r\n .sort((x1, x2) => new Date(x1.date) - new Date(x2.date))\r\n //was sampled at 1Hz above in order to ensure all values were retrieved, now reduce to 1 record per second\r\n .reduce(\r\n (result, item) =>\r\n !result.length ||\r\n item.date.getSeconds() !== result[result.length - 1].date.getSeconds()\r\n ? [...result, item]\r\n : result,\r\n []\r\n )\r\n .map((x) => ({\r\n //see https://www.topografix.com/gpx_manual.asp#trkpt for valid fields\r\n \"@_lat\": x.value[0],\r\n \"@_lon\": x.value[1],\r\n time: x.date.toISOString(),\r\n ele: x.value[2].toFixed(2),\r\n speed: x.value[3].toFixed(2),\r\n }));\r\n\r\n downloadAsGpx(recordedPath, file.name, telemetry[\"1\"][\"device name\"]);\r\n}\r\n\r\nexport async function extractBlackVue(\r\n file,\r\n onProgress,\r\n cancellationToken,\r\n isHEVC = false\r\n) {\r\n const startLocation = isHEVC\r\n ? BlackVueH265StartPoint\r\n : BlackVueH264StartPoint;\r\n\r\n //extracts the NMEA lines from the video file, given startLocation\r\n function getNMEA(progress) {\r\n return new Promise((resolve, _) => {\r\n const reader = new FileReader();\r\n const decoder = new TextDecoder();\r\n const fileSize = file.size;\r\n //not accurate, but from testing should give some semblence of progress\r\n const likelyChunkCount = fileSize / 4925000;\r\n let location = startLocation;\r\n let i = 0;\r\n const results = [];\r\n reader.onload = () => {\r\n progress((++i / likelyChunkCount) * 100);\r\n const textResult = decoder.decode(reader.result);\r\n results.push(textResult);\r\n if (location > fileSize || new Uint8Array(reader.result).includes(0))\r\n resolve(results.join(\"\").replaceAll(\"\\n\\n\", \"\\n\"));\r\n else {\r\n if (cancellationToken && cancellationToken.cancelled) resolve(null);\r\n else {\r\n location += 1000;\r\n reader.readAsArrayBuffer(file.slice(location, location + 1000));\r\n }\r\n }\r\n };\r\n reader.readAsArrayBuffer(file.slice(location, location + 1000));\r\n });\r\n }\r\n\r\n onProgress({\r\n extractionState: \"Extracting GPS Data\",\r\n extractionPercent: 0,\r\n });\r\n\r\n const nmea = await getNMEA((extractionPercent) =>\r\n onProgress({ extractionPercent })\r\n );\r\n if (!nmea)\r\n //cancelled\r\n return;\r\n const recordedPath = parseRawNmeaData(nmea).map((x) => {\r\n const speed = parseInt(x.speed) / 3.6;\r\n return {\r\n //see https://www.topografix.com/gpx_manual.asp#trkpt for valid fields\r\n \"@_lat\": x.latitude,\r\n \"@_lon\": x.longitude,\r\n time: x.dateTime.toISOString(),\r\n speed: isNaN(speed) ? undefined : speed,\r\n };\r\n });\r\n\r\n downloadAsGpx(\r\n recordedPath,\r\n file.name,\r\n isHEVC ? \"BlackVue HEVC\" : \"BlackVue AVC\"\r\n );\r\n}\r\n\r\nfunction downloadAsGpx(recordedPath, fileName, name) {\r\n const xmlAsJson = {\r\n gpx: {\r\n \"@_xmlns\": \"http://www.topografix.com/GPX/1/0\",\r\n \"@_xmlns:xsi\": \"http://www.w3.org/2001/XMLSchema-instance\",\r\n trk: {\r\n name,\r\n trkseg: {\r\n trkpt: recordedPath,\r\n },\r\n },\r\n },\r\n };\r\n const xmlBuilder = new XMLBuilder({\r\n ignoreAttributes: false,\r\n });\r\n const xml = xmlBuilder.build(xmlAsJson);\r\n\r\n //download file\r\n const gpx = new Blob([xml], {\r\n type: \"application/gpx+xml\",\r\n endings: \"native\",\r\n });\r\n downloadFile(\r\n URL.createObjectURL(gpx),\r\n `${fileName.substr(0, fileName.lastIndexOf(\".\"))}.GPX`\r\n );\r\n}\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHdUExURS0tLS4uLjIyMp2dnaCgoHR0dDMzM0FBQVlZWV9fX2ZmZmtra2pqamhoaFxcXDU1NT8/P9fX18/Pz87OzpOTk0NDQ5aWluDg4OHh4d3d3dPT09DQ0GlpaePj48zMzLy8vLS0tJKSkj09PTQ0NIyMjMPDw9/f3+vr6/Dw8PHx8fX19X9/f9bW1tTU1OXl5aGhoURERC8vL6SkpPLy8u7u7unp6dzc3MLCwrm5uXd3d9LS0tra2t7e3ra2tk9PT9jY2OLi4vT09Pn5+T4+Pu/v79HR0cDAwLq6usvLy11dXaampvr6+vb29ujo6MTExLu7u/Pz8+3t7cXFxVpaWr6+vvv7+/39/YCAgOfn59XV1X19fdvb23p6evf398fHx7Gxsbi4uMrKytnZ2ebm5n5+fuzs7Pz8/Jqamjc3N/7+/vj4+M3NzUBAQI6OjsjIyDw8PMHBwf///+Tk5ElJSampqerq6js7O1ZWVpSUlMbGxsnJyb29vaqqqkpKSoeHh4aGhjk5OaioqJGRkXh4eJWVlTo6OrOzszAwMGdnZ7+/v3l5eXV1dVVVVWBgYFRUVDg4OE1NTaOjo0xMTKenp62tra+vr56enjY2NoGBgYSEhLW1tXx8fIqKijExMVFRUbh5t3IAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANuSURBVEhL7ZTrX9JQGMc3MrsnaHk5RKaLbRJQOkBaFDAoqIGQydoiTDDIqWGjpIwuVmL37H6vv7WzcWjWeNGL3tX3DZzf55w9v99zng3718HR759h2tC2sd14ZNPmLVu3bd+xswOtdcyWzq5du38/Yeru6e2zAGDdgwQds21v/76BQbRqQuy3W0mKHnIcQAI03gAzO11uynbw0DASGhAjjMfr6xz1H/65sYmZZIHrSODosWEkaBDdwBUMUWFOr9AkEg0dPxGzs/GT63MQp/hE0jKWSh1Ggk7EGg9E08xp2/gZE5IgxP7YRBdJZ4SzSNCJiBbAskDyibZz7UhTK2QEjnZnpfNI0ENHRG80nOPp7KT/woGfyYmB0amJfGHac9EQepChyK6JqfFgkS9xl2aQSrQxGUGWM7PG0IOkRFIJgafdBcDOdc83VOIUk+yTWAB0S00G+VKazKdS+YIYTScSY2ZNJS6XJdtpmkkYKyywsSuSd1ZQBD7BFCvSyFX1QohrsqLIJc54AF9wCLKQowISgMBe0XMnoUyMLJKwey0s4dVicMx/xdpD0WFOUCC88zqOETcAuQgdccZ7qB7x0SVYv28pzETF4M1abHxuo6njFpRUT8YMVV6WeU/IcuH2nTIoVKJwKSfvLt9LewNOAFzGLlVD+VgtnvWOzXfcz6mWZI6y9D9YWQK9RTqdM4au2hYz6r7Oecy0Irqdk/2xctaTyylqmxTFkAGvqx5yxZ5V+A49fLQ0zWTgWlYTCA4qVDBaqnuyS/7HXYET6o2ZntDqToEvZuO1mN3qS15s7FpH3VKIluAjoSUI/rS3Ik2mUuXCIgfLyLKxrcucWl4R8o0pwp9NiWnNlaq2yIDVeYHzSnb/wYXGevi5TdsJm033Hh/V3zg05vhysJbKk2mhcx4J+Iss7ak4y7XUuOQOnzW8D2v0rFa/kUHj5SvgE9VutbS0BjPIsDEogwr+2ooStDwAR8jtsvvbUAaNyM0MHPdceIg2tnWtj3VlxXBpnSXIoWvqtMN5N3wE8BlHRquvh9aovqHTCV6AlpCAjmHYjHYPcin+SwUMa3+rjaIxwwxXciR9gH0XQUKT+vtEywMfWL/dVfEMTf5WAaZbERT5I1roDH9a/QxZ/bLuQ9nkq3t6B/r7Z3w79v2Xb/p//jIY9gNjo+5PRTGDKgAAAABJRU5ErkJggg==\"","import React from \"react\";\r\nimport { Modal } from \"@mrwa/rime-replacement/esriControls/general/Dialog\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faFolderOpen,\r\n faMapMarkerAlt,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport {\r\n ApplicationMessage,\r\n messageState,\r\n} from \"@mrwa/rime-replacement/esriControls/general/ApplicationMessage\";\r\nimport NomadSelect from \"./NomadSelect\";\r\nimport { extractGoPro, extractBlackVue } from \"./extractions\";\r\nimport nomadImage from \"./Nomad.png\";\r\nimport { FileType } from \"../data/fileType\";\r\nimport { AuthContext } from \"../context\";\r\n\r\nimport \"./openFileDialog.css\";\r\n\r\n// Every manufacturer appears to have an identifying signature in the first few bytes of a video.\r\n// These have been taken from the method used in VideoTripper\r\n// Update the rendered instructions if this list changes\r\nconst ManufacturerSignatures = {\r\n GoPro: \"47 50 52 4f\", //bytes 28 to 31\r\n BlackVue: \"6D 70 34 32 6D 70 34 32 00 04 B1 25 66 72 65 65\", //h.264\r\n};\r\n\r\nconst UnsupportedSignatures = {\r\n BlackVue: \"6d 70 34 32 6d 70 34 32 00 04 b1 25 66 72 65 65\", //h.265\r\n};\r\n\r\n// Update the rendered instructions if this list changes\r\nexport const AcceptedGPSTypes = [\"NMEA\", \"GPX\", \"LOG\"];\r\n\r\nexport default class OpenOrExtractFileDialog extends React.Component {\r\n static contextType = AuthContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n extracting: false,\r\n nomadSelect: props.loadNomad != null,\r\n extractionState: \"\",\r\n extractionPercent: 0,\r\n };\r\n\r\n this.mainFileInputClicked = this.mainFileInputClicked.bind(this);\r\n this.filesSelected = this.filesSelected.bind(this);\r\n this.nomadFilesSelected = this.nomadFilesSelected.bind(this);\r\n\r\n this.extractFileInputClicked = this.extractFileInputClicked.bind(this);\r\n this.validateExtractFile = this.validateExtractFile.bind(this);\r\n this.nomadSelectClicked = this.nomadSelectClicked.bind(this);\r\n\r\n this.mainFileInput = React.createRef();\r\n this.extractFileInput = React.createRef();\r\n }\r\n\r\n mainFileInputClicked() {\r\n this.mainFileInput.current.click();\r\n }\r\n\r\n extractFileInputClicked() {\r\n this.extractFileInput.current.click();\r\n }\r\n\r\n nomadSelectClicked() {\r\n this.setState({ nomadSelect: true });\r\n }\r\n\r\n filesSelected(e) {\r\n const isGps = (type) => {\r\n const result = AcceptedGPSTypes.some((extension) =>\r\n type.toUpperCase().endsWith(extension)\r\n );\r\n return result;\r\n };\r\n const files = Array.from(e.target.files);\r\n const videoFiles = files\r\n .filter((file) => !isGps(file.name))\r\n .map((file) => FileType.FileSystem(file));\r\n const gpsFiles = files\r\n .filter((file) => isGps(file.name))\r\n .map((file) => FileType.FileSystem(file));\r\n\r\n if (gpsFiles.length !== videoFiles.length) {\r\n messageState.message = ApplicationMessage.Error(\r\n \"Video and GPS file counts do not match\"\r\n );\r\n } else {\r\n this.props.filesSelected(videoFiles, gpsFiles);\r\n this.mainFileInput.current.value = null;\r\n }\r\n }\r\n\r\n nomadFilesSelected(files) {\r\n if (files.length > 0) {\r\n this.props.filesSelected(\r\n files.map(({ video }) => FileType.Url(video.url, video.name)),\r\n files.map(({ gps }) => FileType.Url(gps.url, gps.name)),\r\n files.map(({ video, gps }) => ({ video: video.name, gps: gps.name }))\r\n );\r\n }\r\n this.setState({ nomadSelect: false });\r\n }\r\n\r\n validateExtractFile(e) {\r\n if (e.target.files.length !== 1) return;\r\n\r\n const file = e.target.files[0];\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n const fileSignature = [...new Uint8Array(reader.result)]\r\n .map((x) => x.toString(16).padStart(2, \"0\"))\r\n .join(\" \");\r\n const match = Object.entries(ManufacturerSignatures)\r\n .filter(([_, value]) => fileSignature.includes(value))\r\n .map(([_, value]) => value)[0];\r\n\r\n switch (match) {\r\n case ManufacturerSignatures.GoPro:\r\n this.processGoPro(file);\r\n break;\r\n case ManufacturerSignatures.BlackVue:\r\n this.processBlackVue(file);\r\n break;\r\n default:\r\n const matchUnsupported = Object.entries(UnsupportedSignatures)\r\n .filter(([_, value]) => fileSignature.includes(value))\r\n .map(([_, value]) => value)[0];\r\n switch (matchUnsupported) {\r\n case UnsupportedSignatures.BlackVue:\r\n messageState.message = ApplicationMessage.Confirm(\r\n \"The video you have selected is from a BlackVue camera with H.265 (HEVC) enabled. Browsers supported by Road View currently do not support the H.265 (HEVC) codec. Road View can extract GPS data for this video, but the video itself will not be able to be viewed in Road View. If your camera supports recording to H.264 (AVC), enable this codec instead.\",\r\n () => this.processBlackVue(file, true),\r\n \"Invalid Codec Detected\"\r\n );\r\n break;\r\n default:\r\n const validVideoManufactuers = Object.keys(\r\n ManufacturerSignatures\r\n ).join(\"/\");\r\n messageState.message = ApplicationMessage.Error(\r\n `Unrecognised video type. This tool can only extract from ${validVideoManufactuers} videos`\r\n );\r\n break;\r\n }\r\n }\r\n };\r\n reader.readAsArrayBuffer(file.slice(8, 32));\r\n }\r\n\r\n async processGoPro(file) {\r\n this.setState({ extracting: true });\r\n this.cancellationToken = { cancelled: false };\r\n try {\r\n await extractGoPro(\r\n file,\r\n (progress) => this.setState(progress),\r\n this.cancellationToken\r\n );\r\n } catch (e) {\r\n messageState.message = ApplicationMessage.Error(e.message);\r\n } finally {\r\n this.setState({ extracting: false });\r\n }\r\n }\r\n\r\n async processBlackVue(file, isHEVC = false) {\r\n this.setState({ extracting: true });\r\n this.cancellationToken = { cancelled: false };\r\n try {\r\n await extractBlackVue(\r\n file,\r\n (progress) => this.setState(progress),\r\n this.cancellationToken,\r\n isHEVC\r\n );\r\n } catch (e) {\r\n messageState.message = ApplicationMessage.Error(e.message);\r\n } finally {\r\n this.setState({ extracting: false });\r\n }\r\n }\r\n\r\n close() {\r\n if (this.cancellationToken) this.cancellationToken.cancelled = true;\r\n this.setState({ extracting: false, nomadSelect: false });\r\n this.props.onReject();\r\n }\r\n\r\n renderExtract() {\r\n const footerContents = (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Road View can load one or many video files with associated GPS\r\n metadata files. GPS file types that are supported are:\r\n
\r\n- \r\n
- \r\n .NMEA e.g. from Navman cameras\r\n \r\n
- \r\n .GPX e.g. from Garmin cameras\r\n \r\n
- \r\n .LOG containing NMEA data, e.g. from select Sony\r\n cameras\r\n \r\n
\r\n In addition, Road View can extract GPS metadata into a .GPX file\r\n from videos by the following manufacturers:\r\n
\r\n- \r\n
- \r\n GoPro (Hero5 and later)\r\n \r\n
- \r\n BlackVue (Models that support embedding GPS data\r\n and H.264 video encoding)\r\n \r\n
\r\n The .GPX file will be downloaded automatically by your browser once\r\n extraction is complete.\r\n
\r\n\r\n \r\n It is strongly suggested that files for extraction are stored on a\r\n local drive, rather than a network location, for faster processing\r\n speed.\r\n \r\n
\r\n\r\n
\r\n \r\n {/*\r\n Note: \r\n playsInline - allows mobile clients to play the video without going fullscreen\r\n pointerEvents: none - disables the context menu which would allow the user to bring back the controls\r\n controls - absent to remove the default video transport controls\r\n */}\r\n {this.state.videoUrl ? (\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n )}\r\n {this.state.playingName && (\r\n {this.state.playingName}
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { faCog } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport classNames from \"classnames\";\r\n\r\nimport \"./timeSelector.css\";\r\n\r\nexport default class TimeSelector extends React.Component {\r\n #dragDebounceTimer;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showSettings: false,\r\n videoInformation: {},\r\n seconds: null,\r\n playbackRate: 1.0,\r\n };\r\n\r\n this.toggleSettings = this.toggleSettings.bind(this);\r\n this.handleTimeSelection = this.handleTimeSelection.bind(this);\r\n this.handleChangePlaybackRate = this.handleChangePlaybackRate.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.playerContext !== prevProps.playerContext) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n\r\n playerStateChanged(state) {\r\n this.setState({ ...state, seconds: null });\r\n }\r\n\r\n toggleSettings() {\r\n this.setState({ showSettings: !this.state.showSettings });\r\n }\r\n\r\n handleTimeSelection(e) {\r\n //we want to drag without constantly updating the video time, so use a debounce timer and simulate the seconds display\r\n const seconds = e.target.value;\r\n if (this.#dragDebounceTimer) {\r\n clearTimeout(this.#dragDebounceTimer);\r\n this.#dragDebounceTimer = null;\r\n } else {\r\n this.currentlyPlaying = this.props.playerContext.playing;\r\n this.props.playerContext.requestPause();\r\n }\r\n\r\n this.#dragDebounceTimer = setTimeout(() => {\r\n this.props.playerContext.requestTime(seconds);\r\n if (this.currentlyPlaying) {\r\n this.props.playerContext.requestPlay();\r\n }\r\n this.#dragDebounceTimer = null;\r\n }, 500);\r\n this.setState({ seconds });\r\n }\r\n\r\n handleChangePlaybackRate(e) {\r\n this.props.playerContext.requestPlaybackRate(e.target.value);\r\n }\r\n\r\n render() {\r\n if (!this.props.playerContext) return null;\r\n\r\n const seconds =\r\n this.state.seconds ??\r\n this.props.playerContext.videoInformation.videoPosition ??\r\n 0;\r\n const videoLength = this.state.videoInformation.videoLength ?? 0;\r\n const playbackSpeedClass = classNames(\"playbackSpeed\", {\r\n shown: this.state.showSettings,\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport { isMatchingLayer } from \"@mrwa/rime-replacement/esriControls/controls/layer/layerSynchronisationImpl\";\r\n\r\nclass irisRoadData {\r\n constructor() {\r\n this.isInitialised = false;\r\n this.currentRoadData = null;\r\n this.irisRoadFeatures = null;\r\n this.irisDataChanged = [];\r\n }\r\n\r\n initialise(irisRoadLayerConfig, playerContext) {\r\n if (this.isInitialised) return;\r\n this.isInitialised = true;\r\n this.irisRoadLayerConfig = irisRoadLayerConfig;\r\n this.playerContext = playerContext;\r\n\r\n this.playerContext.onGpsDataChanged(this.gpsDataChanged.bind(this));\r\n this.playerContext.onGpsFileChanged(this.gpsFileChanged.bind(this));\r\n }\r\n\r\n onirisDataChanged(callback) {\r\n this.irisDataChanged.push(callback);\r\n }\r\n\r\n notifySubscribers() {\r\n this.irisDataChanged.forEach((callback) => {\r\n callback(this.currentRoadData);\r\n });\r\n }\r\n\r\n async gpsFileChanged() {\r\n this.irisRoadFeatures = null; //ensures irisRoadFeatures is null\r\n try {\r\n //get the layer that we're going to use for IRIS data\r\n const { uniqueIdentifier, subLayerId } = this.irisRoadLayerConfig;\r\n const rimeLayer = mapHelper.layers.find((layer) =>\r\n isMatchingLayer({ uniqueIdentifier, subLayerId }, layer)\r\n );\r\n if (!rimeLayer) return;\r\n\r\n //query IRIS data for the route\r\n const bufferedGeometry = await this.playerContext.gpsInformation\r\n .bufferedGeometry;\r\n const query = {\r\n geometry: bufferedGeometry,\r\n spatialRelationship: \"intersects\",\r\n outFields: [\"*\"],\r\n returnGeometry: true,\r\n returnM: true,\r\n };\r\n this.irisRoadFeatures = (\r\n await rimeLayer.layer.queryFeatures(query)\r\n ).features;\r\n //initialse display for current gps data.\r\n this.gpsDataChanged(this.playerContext.gpsInformation.current);\r\n } catch {\r\n console.log(\"error with getting iris road data\");\r\n }\r\n }\r\n\r\n async gpsDataChanged(gpsData) {\r\n if (!this.irisRoadFeatures) return;\r\n if (!gpsData || !gpsData.isValidGeometry) {\r\n this.currentRoadData = null;\r\n this.notifySubscribers();\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n const closure = this;\r\n async function determineClosestFeature() {\r\n const currentPoint = await gpsData.projectedGeometry;\r\n\r\n const distances = await Promise.all(\r\n closure.irisRoadFeatures.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(currentPoint, feature.geometry)\r\n )\r\n );\r\n const roadFeature =\r\n closure.irisRoadFeatures[distances.indexOf(Math.min(...distances))];\r\n //nearestCoordinate returns the point on the line that's closest to the currentPoint, along with the index of the vertex before that point\r\n const nearestCoordinate = await GeometryEngine.nearestCoordinate(\r\n roadFeature.geometry,\r\n currentPoint\r\n );\r\n\r\n return { roadFeature, nearestCoordinate };\r\n }\r\n\r\n async function determineSlk(roadFeature, nearestCoordinate) {\r\n const roadFeatureVertices = roadFeature.geometry.paths.flat();\r\n const toPoint = (vertexIndex) => {\r\n const vertex = roadFeatureVertices[vertexIndex];\r\n return {\r\n type: \"point\",\r\n x: vertex[0],\r\n y: vertex[1],\r\n m: vertex[2],\r\n spatialReference: mapHelper.mapView.spatialReference,\r\n };\r\n };\r\n const segmentStart = toPoint(nearestCoordinate.vertexIndex);\r\n const segmentEnd = toPoint(nearestCoordinate.vertexIndex + 1);\r\n const segmentLength = await GeometryEngine.distance(\r\n segmentStart,\r\n segmentEnd\r\n );\r\n const pointDistance = await GeometryEngine.distance(\r\n segmentStart,\r\n nearestCoordinate.coordinate\r\n );\r\n return (\r\n (segmentEnd.m - segmentStart.m) * (pointDistance / segmentLength) +\r\n segmentStart.m\r\n );\r\n }\r\n\r\n const { roadFeature, nearestCoordinate } = await determineClosestFeature();\r\n const slk = await determineSlk(roadFeature, nearestCoordinate);\r\n const { roadNoAttribute, roadNameAttribute, cwyAttribute } =\r\n this.irisRoadLayerConfig;\r\n this.currentRoadData = {\r\n roadNo: roadFeature.attributes[roadNoAttribute],\r\n roadName: roadFeature.attributes[roadNameAttribute],\r\n cwy: roadFeature.attributes[cwyAttribute],\r\n slk: slk,\r\n };\r\n this.notifySubscribers();\r\n }\r\n}\r\n\r\nexport default new irisRoadData();\r\n","import React from \"react\";\r\nimport irisRoadData from \"./data/irisRoadData\";\r\n\r\nimport \"./locationInformation.css\";\r\n\r\nexport class GPSInformation extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { offset: 0, hasData: false };\r\n\r\n this.offsetChanged = this.offsetChanged.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.playerContext !== prevProps.playerContext) {\r\n this.props.playerContext.onGpsDataChanged(this.gpsDataChanged.bind(this));\r\n }\r\n }\r\n\r\n gpsDataChanged(gpsData) {\r\n this.setState(gpsData ? { ...gpsData, hasData: true } : { hasData: false });\r\n }\r\n\r\n offsetChanged(e) {\r\n const offsetSeconds = Math.max(Math.min(e.target.value, 5), -5);\r\n this.props.gpsData.setTimeOffset(offsetSeconds);\r\n this.props.playerContext.requestRefresh();\r\n this.setState({ offsetSeconds });\r\n }\r\n\r\n render() {\r\n if (!this.props.playerContext || !this.props.playerContext.gpsInformation)\r\n return null;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class SLKInformation extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n hasData: false,\r\n };\r\n\r\n this.irisDataSet = false;\r\n\r\n this.dataChanged = this.dataChanged.bind(this);\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.irisDataSet) return;\r\n if (this.props.playerContext && this.props.irisRoadLayerConfig) {\r\n irisRoadData.initialise(\r\n this.props.irisRoadLayerConfig,\r\n this.props.playerContext\r\n );\r\n irisRoadData.onirisDataChanged(this.dataChanged.bind(this));\r\n this.irisDataSet = true;\r\n }\r\n }\r\n\r\n dataChanged(roadData) {\r\n if (roadData) {\r\n this.setState({\r\n roadNo: roadData.roadNo,\r\n roadName: roadData.roadName,\r\n cwy: roadData.cwy,\r\n slk: roadData.slk,\r\n hasData: true,\r\n });\r\n } else {\r\n this.setState({\r\n hasData: false,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n if (!this.props.playerContext || !this.props.playerContext.gpsInformation)\r\n return null;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {this.state.hasData && this.state.dateSet && (\r\n {this.state.dateDisplay}\r\n )}\r\n
\r\n \r\n \r\n {this.state.hasData && {this.state.timeDisplay}}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {this.state.hasData && {this.state.speed}}\r\n
\r\n \r\n
\r\n \r\n \r\n {this.state.hasData && {this.state.latitude}}\r\n
\r\n\r\n \r\n \r\n {this.state.hasData && {this.state.longitude}}\r\n
\r\n\r\n \r\n \r\n {this.state.hasData && {this.state.direction}}\r\n
\r\n \r\n {this.state.loading ? (\r\n
\r\n );\r\n }\r\n}\r\n","import SubscriptionProxyHandler from \"@mrwa/rime-replacement/infrastructure/subscriptionProxy\";\r\nimport crashDetailsState from \"@mrwa/crashmap/esriControls/crashmapTools/crashDetailsState\";\r\nimport { getAuthToken } from \"../Auth\";\r\n\r\n/**\r\n * Used for maintaining crash and vehicle detail state\r\n */\r\nclass crashState extends crashDetailsState {\r\n constructor() {\r\n super();\r\n this.accountId = null;\r\n this.roadViewVehicleDetailsUrl = null;\r\n this.initialised = false;\r\n }\r\n\r\n initialise(props) {\r\n this.roadViewVehicleDetailsUrl = props.roadViewVehicleDetailsUrl;\r\n this.accountId = props.accountId;\r\n this.initialised = true;\r\n }\r\n\r\n get vehicleDetailsQueryUrl() {\r\n if (!this.initialised) throw new Error(\"Crash State not initialised.\");\r\n return this.roadViewVehicleDetailsUrl;\r\n }\r\n\r\n async queryHeader() {\r\n if (!this.initialised) throw new Error(\"Crash State not initialised.\");\r\n return {\r\n headers: {\r\n Authorization: `Bearer ${await getAuthToken(this.accountId)}`,\r\n },\r\n };\r\n }\r\n}\r\n\r\nexport default new Proxy(new crashState(), new SubscriptionProxyHandler());\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport crashState from \"./crashState\";\r\nimport { getAuthToken } from \"../Auth\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport { crashDetails } from \"@mrwa/crashmap/esriControls/crashmapTools/query/crashDetails\";\r\nimport filterManager from \"@mrwa/crashmap/esriControls/crashmapTools/query/filterManager\";\r\nimport CrashFilterPanel from \"@mrwa/crashmap/esriControls/crashmapTools/query/CrashFilterPanel\";\r\nimport crashResultMarkup from \"@mrwa/crashmap/esriControls/crashmapTools/query/crashResultMarkup\";\r\nimport crashDetailsDisplayManager from \"@mrwa/crashmap/esriControls/crashmapTools/query/crashDetailsDisplayManager\";\r\nimport CrashResultsButton from \"@mrwa/crashmap/esriControls/crashmapTools/query/CrashResultsButton\";\r\nimport AddCollisionDiagramTool from \"@mrwa/crashmap/esriControls/crashmapTools/collisionDiagrams/AddCollisionDiagram\";\r\nimport { emptyStateObject } from \"@mrwa/crashmap/esriControls/crashmapTools/crashDetailsState\";\r\n\r\nimport { ReactComponent as ACDTButtonIconComponent } from \"@mrwa/rime-replacement/esriControls/tools/point_select.svg\";\r\nimport { ReactComponent as AddCDButtonIconComponent } from \"@mrwa/crashmap/esriControls/crashmapTools/collisionDiagrams/callout_add.svg\";\r\nimport { ReactComponent as RemoveCDButtonIconComponent } from \"@mrwa/crashmap/esriControls/crashmapTools/collisionDiagrams/callout_remove.svg\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faPercentage } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nimport \"@mrwa/rime-replacement/esriControls/general/panel.css\";\r\nimport \"@mrwa/crashmap/esriControls/crashmapTools/query/crashDetailsPopup.css\";\r\nimport \"@mrwa/crashmap/esriControls/crashmapTools/query/crashFilterPanel.css\";\r\nimport \"./crashData.css\";\r\n\r\n/**\r\n * Shows the crash results associated with the loaded video speed survey and optionally allows filtering\r\n */\r\nexport default class CrashData extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.filterManager = null;\r\n this.crashDetailsDisplayManager = null;\r\n this.crashResultMarkup = new crashResultMarkup(\r\n this.props.mapSettings.severityDisplaySettings\r\n );\r\n\r\n this.state = {\r\n filters: null,\r\n crashes: null,\r\n filteredCrashes: null,\r\n };\r\n\r\n this.gpsFileChanged = this.gpsFileChanged.bind(this);\r\n this.getAuthorizationHeader = this.getAuthorizationHeader.bind(this);\r\n this.handleFilterUpdated = this.handleFilterUpdated.bind(this);\r\n this.updateFilteredCrashes = this.updateFilteredCrashes.bind(this);\r\n this.showCollisionDiagrams = this.showCollisionDiagrams.bind(this);\r\n this.handleShowQuerySummary = this.showQuerySummary.bind(this, null);\r\n }\r\n\r\n //create an authorisation header object for queries to the crash data API\r\n async getAuthorizationHeader() {\r\n return {\r\n headers: {\r\n Authorization: `Bearer ${await getAuthToken(this.props.accountId)}`,\r\n },\r\n };\r\n }\r\n\r\n async componentDidMount() {\r\n const filterQuery = await axios.get(\r\n `${this.props.mapSettings.crashDataApiUrl}/CrashFilters`,\r\n await this.getAuthorizationHeader()\r\n );\r\n this.searchResultFilters = JSON.parse(filterQuery.data);\r\n\r\n this.filterManager = new filterManager(\r\n this.searchResultFilters.Groups.filter((group) =>\r\n this.props.mapSettings.crashFilterGroupLookups.includes(\r\n group.LookupDomain\r\n )\r\n )\r\n );\r\n this.crashDetailsDisplayManager = new crashDetailsDisplayManager(\r\n mapHelper.mapView,\r\n this.props.mapSettings.severityDisplaySettings,\r\n this.showCrashPopupContent.bind(this),\r\n () => this.state.filteredCrashes,\r\n crashState.fetchCrashVehicleDetails.bind(crashState)\r\n );\r\n this.setState({ filters: this.filterManager.unfiltered });\r\n this.props.playerContext.onGpsFileChanged(this.gpsFileChanged);\r\n this.props.playerContext.onContextStateChanged(this.hideCrashDisplays);\r\n await this.crashResultMarkup.initialise(mapHelper.mapView);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.playerContext !== prevProps.playerContext) {\r\n this.props.playerContext.onGpsFileChanged(this.gpsFileChanged);\r\n this.props.playerContext.onContextStateChanged(this.hideCrashDisplays);\r\n }\r\n }\r\n\r\n /**\r\n * Reacts to a gps file change by loading all the crash data based on the route followed in the current video\r\n * @param {object} gpsInformation contains all gps rows and also the current gps row, in addition to the buffered line that marks the route\r\n */\r\n async gpsFileChanged(gpsInformation) {\r\n const bufferedGeometry = await gpsInformation.bufferedGeometry;\r\n const projectedGeometry = await mapHelper.projectToView(bufferedGeometry, {\r\n wkid: 4283,\r\n });\r\n //query the crashes within the buffered geometry representing the currently loaded run\r\n const crashQuery = await axios.post(\r\n `${this.props.mapSettings.crashDataApiUrl}/QueryCrashes`,\r\n {\r\n areaParams: projectedGeometry,\r\n extent: projectedGeometry.extent,\r\n },\r\n await this.getAuthorizationHeader()\r\n );\r\n\r\n if (crashQuery.data && crashQuery.data.length > 0) {\r\n //generate geometry and projected geometries required for crashResultMarkup\r\n const queryResults = await Promise.all(\r\n crashQuery.data.map(async (result) => new crashDetails(result))\r\n );\r\n const sortedCrashes = crashDetails.sortBySlk(queryResults);\r\n this.crashResultMarkup.clearResultsMarkup();\r\n this.crashResultMarkup.addResultMarkers(sortedCrashes);\r\n this.setState({\r\n crashes: sortedCrashes,\r\n filteredCrashes: sortedCrashes,\r\n });\r\n }\r\n }\r\n\r\n showCrashPopupContent(content) {\r\n content.crashDetails.ProjectedGeometry.then((geometry) =>\r\n mapHelper.mapView.goTo({ center: geometry })\r\n );\r\n crashState.currentCrashPopupContent = {\r\n hasContent: true,\r\n content,\r\n };\r\n }\r\n\r\n handleFilterUpdated(updatedFilters) {\r\n this.setState({\r\n filters: updatedFilters,\r\n });\r\n this.updateFilteredCrashes(updatedFilters);\r\n }\r\n\r\n updateFilteredCrashes(updatedFilters) {\r\n const filteredCrashes = filterManager.filterCrashes(\r\n this.state.crashes,\r\n updatedFilters\r\n );\r\n this.crashResultMarkup.clearResultsMarkup();\r\n this.crashResultMarkup.addResultMarkers(filteredCrashes);\r\n this.setState({ filteredCrashes });\r\n\r\n if (\r\n crashState.currentQuerySummaryPopupContent &&\r\n crashState.currentQuerySummaryPopupContent.hasContent\r\n ) {\r\n this.showQuerySummary(filteredCrashes);\r\n }\r\n\r\n if (\r\n crashState.crashVehicleDetails &&\r\n crashState.crashVehicleDetails.length === 0\r\n ) {\r\n this.crashDetailsDisplayManager.cacheVehicleDetails(null);\r\n }\r\n\r\n if (crashState.collisionDiagramFeatures) {\r\n crashState.collisionDiagramFeatures =\r\n crashState.collisionDiagramFeatures.filter((crash) =>\r\n filteredCrashes.includes(crash)\r\n );\r\n }\r\n }\r\n\r\n async showCollisionDiagrams() {\r\n const visibleCrashes = [];\r\n for (let crash of this.state.filteredCrashes) {\r\n if (mapHelper.mapView.extent.contains(await crash.ProjectedGeometry))\r\n visibleCrashes.push(crash);\r\n }\r\n crashState.collisionDiagramFeatures = visibleCrashes;\r\n }\r\n\r\n hideCrashDisplays() {\r\n crashState.collisionDiagramFeatures = [];\r\n crashState.currentQuerySummaryPopupContent = emptyStateObject;\r\n crashState.currentCrashPopupContent = emptyStateObject;\r\n }\r\n\r\n showQuerySummary(crashes) {\r\n crashState.currentQuerySummaryPopupContent = {\r\n hasContent: true,\r\n content: {\r\n crashes: crashes || this.state.filteredCrashes,\r\n searchResultFilters: this.searchResultFilters,\r\n displaySettings: this.props.mapSettings.severityDisplaySettings,\r\n },\r\n };\r\n }\r\n\r\n render() {\r\n if (this.state.crashes && this.filterManager) {\r\n return (\r\n <>\r\n Loading Data...
\r\n ) : (\r\n <>\r\n \r\n
\r\n \r\n \r\n {this.state.hasData && this.state.roadNo}\r\n
\r\n \r\n \r\n {this.state.hasData && this.state.roadName}\r\n
\r\n \r\n \r\n {this.state.hasData && this.state.cwy}\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n {this.state.hasData &&\r\n (\r\n parseFloat(this.state.slk) +\r\n (this.state.offset ?? 0) / 100\r\n ).toFixed(2)}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n } else return null;\r\n }\r\n}\r\n","import React from \"react\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\n\r\nimport \"./baseMapSelector.css\";\r\n\r\nexport default class BaseMapSelector extends React.PureComponent {\r\n static componentName = \"tripleBasemapSelector\";\r\n\r\n constructor(props) {\r\n if (!props.basemaps || props.basemaps.length !== 3)\r\n throw new Error(\"Triple BaseMap Selector requires three basemaps\");\r\n\r\n super(props);\r\n\r\n this.state = { active: \"one\" };\r\n\r\n this.selectOne = this.selectItem.bind(this, \"one\");\r\n this.selectTwo = this.selectItem.bind(this, \"two\");\r\n this.selectThree = this.selectItem.bind(this, \"three\");\r\n }\r\n\r\n async componentDidMount() {\r\n const { Basemap } = await requestEsriModules({\r\n Basemap: \"esri/Basemap\",\r\n });\r\n\r\n const mapOne = Basemap.fromId(this.props.basemaps[0].name);\r\n const mapTwo = Basemap.fromId(this.props.basemaps[1].name);\r\n const mapThree = Basemap.fromId(this.props.basemaps[2].name);\r\n\r\n this.setState({ mapOne, mapTwo, mapThree });\r\n }\r\n\r\n selectItem(basemap) {\r\n switch (basemap) {\r\n case \"one\":\r\n this.props.view.map.basemap = this.state.mapOne;\r\n break;\r\n case \"two\":\r\n this.props.view.map.basemap = this.state.mapTwo;\r\n break;\r\n case \"three\":\r\n this.props.view.map.basemap = this.state.mapThree;\r\n break;\r\n default:\r\n throw new Error(\"unknown basemap\");\r\n }\r\n\r\n this.setState({ active: basemap });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n }\r\n}\r\n","import React from \"react\";\r\nimport MapControl from \"@mrwa/rime-replacement/esriControls/Map\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport crashState from \"../roadSafety/crashState\";\r\nimport { formatterDate, formatterDay, formatterTime24 } from \"../data/misc\";\r\nimport {\r\n getMap,\r\n getTools,\r\n getControls,\r\n getBehaviours,\r\n} from \"@mrwa/rime-replacement/infrastructure/configHelper\";\r\nimport classNames from \"classnames\";\r\nimport CrashData from \"../roadSafety/CrashData\";\r\nimport BaseMapSelector from \"./BaseMapSelector\";\r\nimport { ToolStyle } from \"@mrwa/rime-replacement/esriControls/unions\";\r\nimport CrashLayer from \"@mrwa/crashmap/esriControls/crashmapTools/crashLayer\";\r\n/* 2745 - remove functionality that saves the user's visible layers. Leaving the code in case it\r\n is requested to be made configurable in future */\r\n//import { isMatchingLayer } from \"@mrwa/rime-replacement/esriControls/controls/layer/layerSynchronisationImpl\";\r\nimport CrashDetailsPopupControl from \"@mrwa/crashmap/esriControls/crashmapTools/query/CrashDetailsPopupControl\";\r\nimport CollisionDiagramsOverpanel from \"@mrwa/crashmap/esriControls/crashmapTools/collisionDiagrams/CollisionDiagramsOverpanel\";\r\nimport QuerySummaryPanel from \"@mrwa/crashmap/esriControls/crashmapTools/querySummary/querySummaryControl\";\r\nimport CrashDependentComponent from \"./CrashDependentComponent\";\r\nimport { CrashContext } from \"../context\";\r\nimport collisionDiagramImages from \"../roadSafety/collisionDiagramImages\";\r\nimport LayerControl from \"./LayerControl\";\r\nimport AddCustomLayerTool from \"@mrwa/rime-replacement/esriControls/tools/AddCustomLayerTool\";\r\n\r\nimport \"@mrwa/rime-replacement/esriControls/general/tabControl.css\";\r\nimport \"./mapControl.css\";\r\n\r\nfunction initialiseExternalLayer(l, index, severityDisplaySettings) {\r\n switch (l.layerType) {\r\n case CrashLayer.layerType:\r\n return new CrashLayer(\r\n l.uniqueIdentifier,\r\n l.url,\r\n l.overrideVisible,\r\n l.selectionLayerId,\r\n index,\r\n severityDisplaySettings,\r\n l.symbologySwitchScale\r\n );\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\nfunction initialiseExternalControl(\r\n createCrashDependantComponent,\r\n type,\r\n contents\r\n) {\r\n switch (type) {\r\n case BaseMapSelector.componentName:\r\n return ToolStyle.React((view) => ({\r\n reactElement: (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\n\r\nimport \"./speedSign.css\";\r\n\r\nexport default function SpeedSign(props) {\r\n const className = classNames(\"speedSign\", {\r\n threeDigit: props.speedLimit >= 100,\r\n });\r\n return props.loading ? (\r\n \r\n
\r\n Loading Data...
\r\n ) : (\r\n \r\n
\r\n );\r\n}\r\n","export default class BallBankRun {\r\n #roadName;\r\n #vicinity;\r\n #comment;\r\n #date;\r\n #curves;\r\n\r\n constructor(roadName, vicinity, comment, date) {\r\n this.#roadName = roadName;\r\n this.#vicinity = vicinity;\r\n this.#comment = comment;\r\n this.#date = date;\r\n this.#curves = [];\r\n }\r\n\r\n get roadName() {\r\n return this.#roadName;\r\n }\r\n get vicinity() {\r\n return this.#vicinity;\r\n }\r\n get comment() {\r\n return this.#comment;\r\n }\r\n get date() {\r\n return this.#date;\r\n }\r\n get curves() {\r\n return this.#curves;\r\n }\r\n\r\n getFlattenedRun() {\r\n return this.curves.flatMap((c) =>\r\n c.points.map((pt) => ({\r\n coordinates: { latitude: pt.latitude, longitude: pt.longitude },\r\n attributes: {\r\n curve_date: this.#date,\r\n road_name: this.#roadName,\r\n vicinity: this.#vicinity,\r\n comment: this.#vicinity,\r\n LR: c.curveType,\r\n ball_bank: pt.ballBank,\r\n test_speed: pt.testSpeed,\r\n advisory_speed: c.advisorySpeed,\r\n fromFile: true,\r\n },\r\n }))\r\n );\r\n }\r\n}\r\n\r\nexport class Curve {\r\n #curveType;\r\n #points;\r\n constructor(curveType) {\r\n this.#curveType = curveType;\r\n this.#points = [];\r\n }\r\n\r\n get curveType() {\r\n return this.#curveType;\r\n }\r\n get points() {\r\n return this.#points;\r\n }\r\n\r\n /**\r\n * adjusts the output safespeed to the nearest valid speed limit\r\n * eg. 66, 67, 68 => 65km/h, 69 => 70km/h\r\n */\r\n get advisorySpeed() {\r\n let result = this.minSpeedPoint.safeSpeed;\r\n switch (result % 5) {\r\n case 0:\r\n break;\r\n case 1:\r\n case 2:\r\n case 3:\r\n result -= result % 5;\r\n break;\r\n case 4:\r\n result++;\r\n break;\r\n default:\r\n break;\r\n }\r\n return result;\r\n }\r\n\r\n /**\r\n * returns the point data object with the minimum safe speed value on this curve\r\n */\r\n get minSpeedPoint() {\r\n const safeSpeed = Math.min(...this.#points.map((pt) => pt.safeSpeed));\r\n return this.#points.find((minPoint) => minPoint.safeSpeed === safeSpeed);\r\n }\r\n}\r\n\r\nexport class PointData {\r\n #ballBank;\r\n #refDist;\r\n #testSpeed;\r\n #latitude;\r\n #longitude;\r\n constructor(ballBank, refDist, testSpeed, latitude, longitude) {\r\n this.#ballBank = ballBank;\r\n this.#refDist = refDist;\r\n this.#testSpeed = testSpeed;\r\n this.#latitude = latitude;\r\n this.#longitude = longitude;\r\n }\r\n\r\n get ballBank() {\r\n return this.#ballBank;\r\n }\r\n get refDist() {\r\n return this.#refDist;\r\n }\r\n get testSpeed() {\r\n return this.#testSpeed;\r\n }\r\n get latitude() {\r\n return this.#latitude;\r\n }\r\n get longitude() {\r\n return this.#longitude;\r\n }\r\n\r\n /**\r\n * calculates the safe speed at this point\r\n */\r\n get safeSpeed() {\r\n return Math.round(\r\n ((Math.sqrt((this.#ballBank + 3) * 6000 + Math.pow(this.#testSpeed, 2)) -\r\n this.#testSpeed) /\r\n (16 * (this.#ballBank + 3))) *\r\n this.#testSpeed\r\n );\r\n }\r\n}\r\n","import BallBankRun, { Curve, PointData } from \"./ballBankData\";\r\n\r\nconst DividerRowType = { Start: \"START\", End: \"END\", Invalid: \"INVALID\" };\r\nconst BallBankFields = {\r\n divider: \"--\", // differentiate from lines with negative numbers by using doubles dash\r\n road: \"ROAD:\",\r\n vicinity: \"VICINITY:\",\r\n comment: \"COMMENT:\",\r\n date: \"DATE:\",\r\n startTime: \"START TIME:\",\r\n startDistance: \"START DISTANCE:\",\r\n startSpeed: \"START SPEED:\",\r\n startLatitude: \"START LATITUDE:\",\r\n startLongitude: \"START LONGITUDE:\",\r\n degrees: \"DEGREES\",\r\n kilometers: \"KILOMETERS\", // note: US spelling\r\n kmh: \"KMH\",\r\n lat: \"LAT\",\r\n long: \"LONG\",\r\n endDistance: \"END DISTANCE:\",\r\n endSpeed: \"END SPEED:\",\r\n endLatitude: \"END LATITUDE:\",\r\n endLongitude: \"END LONGITUDE:\",\r\n endTime: \"END TIME:\",\r\n};\r\nconst NewCurveDifferential = 0.05;\r\n\r\n/**\r\n * parses the raw BallBank file data into our Run/Curve/Point data\r\n * @param {string} fileData string representation of the ballbank file data\r\n */\r\nexport function parseRawData(fileData) {\r\n try {\r\n const runs = [];\r\n const rows = fileData.split(\"\\n\");\r\n const runExtents = getRunExtents(rows);\r\n\r\n // in the case that there are multiple start and end sections\r\n // in a ballbank file a new run is created for each section\r\n let currentRun = null;\r\n runExtents.forEach((extents, i, arr) => {\r\n const previousEndExtent = i > 0 ? arr[i - 1].endRow : null;\r\n currentRun = createRun(rows, extents.startRow, previousEndExtent);\r\n\r\n let curve = null;\r\n let lastDist = null;\r\n let pointDataStartIndexes = [];\r\n for (var j = extents.startRow; j < extents.endRow; j++) {\r\n if (rows[j].startsWith(\"\\r\")) pointDataStartIndexes.push(j);\r\n }\r\n\r\n pointDataStartIndexes.forEach((startIndex) => {\r\n if (startIndex < extents.endRow - 6) {\r\n const curveType = rows[startIndex + 1].charAt(0);\r\n const ballBank = parseFloat(\r\n removeAndTrim(rows[startIndex + 1], [\r\n BallBankFields.degrees,\r\n \"\\r\",\r\n ]).split(\" \")[1]\r\n );\r\n const refDist = parseFloat(\r\n removeAndTrim(rows[startIndex + 2], [\r\n BallBankFields.kilometers,\r\n \"\\r\",\r\n ])\r\n );\r\n const testSpeed = parseInt(\r\n removeAndTrim(rows[startIndex + 3], [BallBankFields.kmh, \"\\r\"])\r\n );\r\n const latitude = parseFloat(\r\n removeAndTrim(rows[startIndex + 4], [BallBankFields.lat, \"\\r\"])\r\n );\r\n const longitude = parseFloat(\r\n removeAndTrim(rows[startIndex + 5], [BallBankFields.long, \"\\r\"])\r\n );\r\n const point = new PointData(\r\n ballBank,\r\n refDist,\r\n testSpeed,\r\n latitude,\r\n longitude\r\n );\r\n\r\n if (\r\n !curve ||\r\n curveType !== curve.curveType ||\r\n point.refDist > lastDist + NewCurveDifferential\r\n ) {\r\n if (curve) currentRun.curves.push(curve);\r\n curve = new Curve(curveType);\r\n }\r\n curve.points.push(point);\r\n lastDist = point.refDist;\r\n }\r\n });\r\n currentRun.curves.push(curve);\r\n runs.push(currentRun);\r\n });\r\n\r\n return runs;\r\n } catch (err) {\r\n console.log(err);\r\n return null;\r\n }\r\n}\r\n\r\n// create a new run from header data rows bounded by the previous end row\r\n// and current start row. If previous end row is null, use the start of file (row = 0)\r\nfunction createRun(fileRows, startRow, previousEndRow) {\r\n const headerStartRow = previousEndRow ? previousEndRow : 0;\r\n const headerEndRow = startRow;\r\n const headerRows = fileRows.slice(headerStartRow, headerEndRow);\r\n const roadName = removeAndTrim(\r\n headerRows.find((r) => r.indexOf(BallBankFields.road) === 0),\r\n [BallBankFields.road, \"\\r\"]\r\n );\r\n const vicinity = removeAndTrim(\r\n headerRows.find((r) => r.indexOf(BallBankFields.vicinity) === 0),\r\n [BallBankFields.vicinity, \"\\r\"]\r\n );\r\n const comment = removeAndTrim(\r\n headerRows.find((r) => r.indexOf(BallBankFields.comment) === 0),\r\n [BallBankFields.comment, \"\\r\"]\r\n );\r\n const date = convertBallBankDate(\r\n removeAndTrim(\r\n headerRows.find((r) => r.indexOf(BallBankFields.date) === 0),\r\n [BallBankFields.date, \"\\r\"]\r\n )\r\n );\r\n\r\n return new BallBankRun(roadName, vicinity, comment, date);\r\n}\r\n\r\n// remove instances of string values from a given string\r\n// trim start and end spaces. return empty string if null/undefined\r\nfunction removeAndTrim(value, removeValues) {\r\n let outputValue = value ?? \"\";\r\n removeValues.forEach((rem) => {\r\n outputValue = outputValue.replace(rem, \"\");\r\n });\r\n return outputValue.trim();\r\n}\r\n\r\n/**\r\n * calculate the row numbers which contain the divider rows\r\n * indicating the start and and end of the run's point data\r\n * invalid start and end combinations are not returned\r\n */\r\nfunction getRunExtents(rows) {\r\n const curveStartEndRows = [];\r\n\r\n const getAllIndexes = (arr, val) => {\r\n let indexes = [];\r\n for (var i = 0; i < arr.length; i++) {\r\n if (arr[i].indexOf(val) >= 0) indexes.push(i);\r\n }\r\n return indexes;\r\n };\r\n\r\n // retreive all divider rows and determine if they are start or end of a curve\r\n const dividerRows = getAllIndexes(rows, BallBankFields.divider)\r\n .sort((a, b) => a - b)\r\n .map((rowNum) => {\r\n const isPreviousRowStart =\r\n rowNum > 0 && rows[rowNum - 1].indexOf(\"START\") === 0;\r\n const isNextRowEnd =\r\n rowNum < rows.length - 1 && rows[rowNum + 1].indexOf(\"END\") === 0;\r\n const dividerType =\r\n (isPreviousRowStart && isNextRowEnd) ||\r\n (!isPreviousRowStart && !isNextRowEnd)\r\n ? DividerRowType.Invalid\r\n : isPreviousRowStart\r\n ? DividerRowType.Start\r\n : DividerRowType.End;\r\n\r\n return { dividerRowNumber: rowNum, dividerType: dividerType };\r\n });\r\n\r\n // check that the row after a start row is a valid end row\r\n // create objects for each valid start row and end row combo\r\n dividerRows.forEach((divider, i, arr) => {\r\n if (\r\n divider.dividerType === DividerRowType.Start &&\r\n i < arr.length - 1 &&\r\n arr[i + 1].dividerType === DividerRowType.End\r\n ) {\r\n curveStartEndRows.push({\r\n startRow: divider.dividerRowNumber,\r\n endRow: arr[i + 1].dividerRowNumber,\r\n });\r\n }\r\n });\r\n\r\n return curveStartEndRows;\r\n}\r\n\r\n// convert BallBank date format (DD/MM/YYYY) to a format\r\n// able to be converted to a date object later on (YYYY-MM-DD)\r\nfunction convertBallBankDate(ballBankDate) {\r\n const day = ballBankDate.slice(0, 2);\r\n const month = ballBankDate.slice(3, 5);\r\n const year = ballBankDate.slice(6, 10);\r\n return `${year}-${month}-${day}`;\r\n}\r\n\r\nexport const exportedForTesting = {\r\n createRun,\r\n removeAndTrim,\r\n getRunExtents,\r\n convertBallBankDate,\r\n};\r\n","import React from \"react\";\r\nimport { formatterDate } from \"../data/misc\";\r\nimport { parseRawData } from \"../data/ballBankParser\";\r\nimport { faFolderOpen } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n ApplicationMessage,\r\n messageState,\r\n} from \"@mrwa/rime-replacement/esriControls/general/ApplicationMessage\";\r\nimport { loadFileAsText } from \"../data/misc\";\r\n\r\nimport \"./ballBank.css\";\r\nimport { FileType } from \"../data/fileType\";\r\n\r\nconst FeatureSource = { BallBank: \"BB\", CurveSurvey: \"CS\" };\r\n\r\nexport default class BallBank extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.videoSelections = [];\r\n this.ballBankFeatures = [];\r\n this.state = {\r\n selectedRun: null,\r\n curveSpeed: null,\r\n currentBallBankFeatures: [],\r\n };\r\n\r\n this.fileInput = React.createRef();\r\n\r\n this.fileUpload = this.fileUpload.bind(this);\r\n this.handleSelectRun = this.handleSelectRun.bind(this);\r\n this.handleSelectFiles = this.handleSelectFiles.bind(this);\r\n this.updateCurrentBallBankFeatures =\r\n this.updateCurrentBallBankFeatures.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.playerContext) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n async componentDidUpdate(prevProps) {\r\n // re-calculate the curve speed when gps point changes\r\n if (this.props.referencePoint !== prevProps.referencePoint) {\r\n this.calculateCurveSpeed(this.props.referencePoint);\r\n }\r\n\r\n // bind new player context changes to monitor playlist state\r\n if (\r\n this.props.playerContext !== prevProps.playerContext &&\r\n this.props.playerContext\r\n ) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n\r\n if (\r\n this.props.bufferedPoint &&\r\n this.props.bufferedPoint !== prevProps.bufferedPoint\r\n ) {\r\n await this.updateCurrentBallBankFeatures();\r\n }\r\n }\r\n\r\n /**\r\n * listen to any playlist changes to determine if a new playlists\r\n * has been loaded and clear ballbank data if this occurs\r\n */\r\n playerStateChanged(state) {\r\n //check video mappings against existing video mappings to detemine changes\r\n const hasPlaylistChanged =\r\n state.videoToGpsFileMapping.length !== this.videoSelections.length ||\r\n !state.videoToGpsFileMapping.every((mapping) =>\r\n this.videoSelections.some(\r\n (vid) => vid.video === mapping.video && vid.gps === mapping.gps\r\n )\r\n );\r\n if (hasPlaylistChanged) {\r\n this.videoSelections = state.videoToGpsFileMapping;\r\n this.ballBankFeatures = [];\r\n this.setState({\r\n currentBallBankFeatures: [],\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * filter the full list of ballbank features to a current list of\r\n * those features that fall within within the buffered point\r\n */\r\n async updateCurrentBallBankFeatures() {\r\n if (this.ballBankFeatures.length > 0 && this.props.bufferedPoint) {\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n const filterFeaturesNearPoint = await Promise.all(\r\n this.ballBankFeatures.map(async (feature) =>\r\n (await GeometryEngine.within(\r\n feature.geometry,\r\n this.props.bufferedPoint\r\n ))\r\n ? feature\r\n : null\r\n )\r\n );\r\n const featuresNearPoint = filterFeaturesNearPoint.filter(\r\n (feature) => feature\r\n );\r\n\r\n this.setState({\r\n currentBallBankFeatures: featuresNearPoint,\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * determine the curve speed OF the features on the selected run closest to the\r\n * given reference point and interrogating the points safe speed attribute\r\n * @param {object} referencePoint - point at which to get the curve speed\r\n * @param {object} overrideRunId - runId to use, overriding the current selected run id\r\n */\r\n async calculateCurveSpeed(referencePoint, overrideRun) {\r\n const selectedRun = overrideRun\r\n ? JSON.parse(overrideRun)\r\n : this.processRuns().selectedRun;\r\n if (!selectedRun) {\r\n this.setState({ curveSpeed: null });\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n let features =\r\n selectedRun.source === FeatureSource.CurveSurvey\r\n ? this.props.curveSurveyFeatures.filter(\r\n (feature) =>\r\n this.getRunId(feature, FeatureSource.CurveSurvey) ===\r\n selectedRun.id\r\n )\r\n : this.state.currentBallBankFeatures.filter(\r\n (feature) =>\r\n this.getRunId(feature, FeatureSource.BallBank) === selectedRun.id\r\n );\r\n\r\n //determine current curve speed\r\n const featureDistances = await Promise.all(\r\n features.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(referencePoint, feature.geometry)\r\n )\r\n );\r\n const curveFeature =\r\n features[featureDistances.indexOf(Math.min(...featureDistances))];\r\n\r\n const { safeSpeedAttribute } = this.props.curveSurveyLayerConfig;\r\n this.setState({ curveSpeed: curveFeature.attributes[safeSpeedAttribute] });\r\n }\r\n\r\n handleSelectRun(e) {\r\n this.setState({ selectedRun: JSON.parse(e.target.value) });\r\n this.calculateCurveSpeed(this.props.referencePoint, e.target.value);\r\n }\r\n\r\n handleSelectFiles() {\r\n this.fileInput.current.click();\r\n }\r\n\r\n /**\r\n * generate a run identity from the features attributes\r\n * @param {object} feature - feature from which to retreive attributes\r\n * @param {string} suffix - suffix to the run Id representing source of the point\r\n * @returns - string representing the identity of the run\r\n */\r\n getRunId(feature, suffix) {\r\n const { runDateAttribute, runNameAttribute } =\r\n this.props.curveSurveyLayerConfig;\r\n\r\n return `${feature.attributes[runNameAttribute]} ${formatterDate.format(\r\n new Date(feature.attributes[runDateAttribute])\r\n )} [${suffix}]`;\r\n }\r\n\r\n /**\r\n * process any curve survey runs and loaded ball bank runs to determine\r\n * possible runId's to display in the select control for this current point\r\n */\r\n processRuns() {\r\n if (\r\n !this.props.curveSurveyFeatures &&\r\n this.state.currentBallBankFeatures.length === 0\r\n )\r\n return { possibleRuns: [], selectedRun: null };\r\n\r\n const { runDateAttribute } = this.props.curveSurveyLayerConfig;\r\n\r\n // convert feature objects into runid from road_name and curve_date atrributes\r\n const mapFeaturesToRunIds = (features, source) => {\r\n const allRunIds = (features ?? [])\r\n .sort(\r\n (f1, f2) =>\r\n new Date(f2.attributes[runDateAttribute]) -\r\n new Date(f1.attributes[runDateAttribute])\r\n )\r\n .map((sortedFeatures) => this.getRunId(sortedFeatures, source));\r\n const uniqueRunIds = [...new Set(allRunIds)];\r\n return uniqueRunIds.map((id) => ({ id: id, source: source }));\r\n };\r\n\r\n const possibleRuns = [\r\n ...mapFeaturesToRunIds(\r\n this.props.curveSurveyFeatures,\r\n FeatureSource.CurveSurvey\r\n ),\r\n ...mapFeaturesToRunIds(\r\n this.state.currentBallBankFeatures,\r\n FeatureSource.BallBank\r\n ),\r\n ];\r\n\r\n //const possibleRuns = [...new Set(combinedFeaturesRuns)];\r\n const selectedRun =\r\n possibleRuns.find(\r\n (run) =>\r\n this.state.selectedRun &&\r\n run.id === this.state.selectedRun.id &&\r\n run.source === this.state.selectedRun.source\r\n ) ?? (possibleRuns.length ? possibleRuns[0] : null);\r\n\r\n return { possibleRuns, selectedRun };\r\n }\r\n\r\n /**\r\n * upload ballbank files, read and format the file data and store in state\r\n */\r\n async fileUpload(e) {\r\n const isTXT = (type) => {\r\n const result = type.toUpperCase().endsWith(\".TXT\") ? true : false;\r\n return result;\r\n };\r\n\r\n const invalidFiles = [];\r\n\r\n // read ball bank files into features\r\n const ballBankFeatures = await Promise.all(\r\n Array.from(e.target.files).map(async (file, i) => {\r\n if (isTXT(file.name)) {\r\n const fileContents = await loadFileAsText(FileType.FileSystem(file));\r\n const featureData = parseRawData(fileContents);\r\n if (!featureData || featureData.length === 0)\r\n invalidFiles.push(file.name);\r\n return featureData;\r\n } else {\r\n invalidFiles.push(file.name);\r\n }\r\n })\r\n );\r\n\r\n //filter errored features (null)\r\n const validBallBankFeatures = ballBankFeatures.filter(\r\n (feature) => feature && feature.length > 0\r\n );\r\n\r\n // flatten into an array of point features\r\n const flattenedFeatures = validBallBankFeatures\r\n .flat()\r\n .map((run) => run.getFlattenedRun())\r\n .reduce((runPoints, currentRun) => {\r\n return runPoints.concat(currentRun);\r\n }, []);\r\n\r\n // filter out points on a run that already exist in state\r\n const pointFeatures = flattenedFeatures\r\n .map((feature) =>\r\n this.ballBankFeatures.some(\r\n (f) =>\r\n f.coordinates.latitude === feature.coordinates.latitude &&\r\n f.coordinates.longitude === feature.coordinates.longitude &&\r\n f.attributes.curve_date === feature.attributes.curve_date &&\r\n f.attributes.road_name === feature.attributes.road_name\r\n )\r\n ? null\r\n : feature\r\n )\r\n .filter((pt) => pt);\r\n\r\n const { Point } = await requestEsriModules({\r\n Point: \"esri/geometry/Point\",\r\n });\r\n\r\n // generate esri point geometries for each point feature\r\n const ballBankPoints = await Promise.all(\r\n pointFeatures.map(async (pt) => {\r\n return {\r\n geometry: await mapHelper.projectToView(\r\n new Point({\r\n latitude: pt.coordinates.latitude,\r\n longitude: pt.coordinates.longitude,\r\n spatialReference: { wkid: 4326 }, //4326 is WGS84, spatial reference used by GPS systemslongitude,\r\n })\r\n ),\r\n coordinates: pt.coordinates,\r\n attributes: pt.attributes,\r\n };\r\n })\r\n );\r\n\r\n this.ballBankFeatures = this.ballBankFeatures.concat(ballBankPoints);\r\n this.updateCurrentBallBankFeatures();\r\n\r\n if (invalidFiles.length > 0) {\r\n messageState.message = ApplicationMessage.Error(\r\n `Could not read all BallBank files. ${\r\n e.target.files.length - invalidFiles.length\r\n } of ${e.target.files.length} files loaded.`\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n if (!this.props.curveSurveyLayerConfig) return null;\r\n\r\n const { possibleRuns, selectedRun } = this.processRuns();\r\n const highlightUnsafeSpeed =\r\n this.state.curveSpeed != null &&\r\n this.props.speedLimit != null &&\r\n this.props.curveSurveyLayerConfig.speedWarningThresholdKph != null &&\r\n this.props.speedLimit - this.state.curveSpeed >=\r\n this.props.curveSurveyLayerConfig.speedWarningThresholdKph;\r\n return this.props.curveSurveyLoading ? (\r\n {props.speedLimit || 0}
\r\n Loading Data...
\r\n ) : (\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n","import classNames from \"classnames\";\r\nimport React from \"react\";\r\n\r\nimport \"./roadData.css\";\r\n\r\nexport default function RoadData(props) {\r\n const { pavementDetails, hazardRating, alignmentDetails } = props;\r\n const {\r\n leftUnsealed,\r\n leftSealed,\r\n sealWidth,\r\n laneCount,\r\n rightSealed,\r\n rightUnsealed,\r\n } = pavementDetails ?? {};\r\n const { left: leftHazardRating, right: rightHazardRating } =\r\n hazardRating ?? {};\r\n const {\r\n verticalCurveType,\r\n gradePercent,\r\n verticalDesignSpeed,\r\n horizontalProfile,\r\n curveRadius,\r\n calculatedSafeSpeed,\r\n crossfall,\r\n } = alignmentDetails ?? {};\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {possibleRuns.map((run) => (\r\n \r\n {run.id}\r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {this.state.curveSpeed != null\r\n ? `${this.state.curveSpeed}km/h`\r\n : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n","var _g;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgRoadview(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"432.000000pt\",\n height: \"432.000000pt\",\n viewBox: \"0 0 432.000000 432.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,432.000000) scale(0.100000,-0.100000)\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M623 4290 c-107 -22 -179 -73 -222 -155 -21 -39 -21 -47 -21 -782 0 -501 3 -744 10 -748 6 -4 223 -24 483 -46 511 -42 522 -44 559 -104 16 -27 18 -56 18 -300 0 -250 -2 -272 -20 -302 -36 -60 -44 -61 -557 -104 -261 -21 -479 -42 -484 -45 -5 -3 -9 -325 -9 -747 0 -735 0 -743 21 -782 29 -56 75 -101 126 -125 62 -29 262 -29 350 1 71 23 2995 1747 3058 1802 37 32 113 143 104 151 -2 2 -59 -1 -126 -7 -108 -9 -125 -8 -148 7 -25 16 -25 18 -25 151 0 175 -4 171 171 156 68 -6 124 -9 126 -8 9 9 -45 91 -87 133 -74 74 -2981 1790 -3095 1827 -92 30 -172 40 -232 27z m1522 -1835 c287 -23 282 -22 326 -62 l39 -35 0 -202 0 -202 -29 -31 c-38 -42 -69 -49 -319 -68 -268 -22 -322 -19 -362 20 l-30 29 0 251 c0 248 0 252 23 272 54 49 75 51 352 28z m1005 -81 c107 -8 205 -17 217 -20 49 -10 53 -23 53 -204 l0 -169 -27 -15 c-17 -8 -105 -20 -224 -30 -264 -22 -271 -21 -308 10 l-31 26 2 186 3 186 34 23 c40 27 34 27 281 7z\"\n }))));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgRoadview);\nexport default __webpack_public_path__ + \"static/media/roadview.309504a1.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\r\nimport SpeedSign from \"./SpeedSign\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport { isMatchingLayer } from \"@mrwa/rime-replacement/esriControls/controls/layer/layerSynchronisationImpl\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport BallBank from \"./BallBank\";\r\nimport RoadData from \"./RoadData\";\r\nimport { bufferDistanceMetres } from \"../data/gpsData\";\r\nimport irisRoadData from \"../data/irisRoadData\";\r\nimport classNames from \"classnames\";\r\n\r\nimport \"./roadSafetyPanel.css\";\r\n\r\nconst possibleSpeeds = [\"110\", \"50\"];\r\n\r\nexport default class RoadSafetyPanel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.irisDataSet = false;\r\n\r\n this.state = {\r\n speedLimit: \"-\",\r\n loading: false,\r\n curveSurveyFeatures: [],\r\n allowSelection: false,\r\n curveSurveyReferencePoint: null,\r\n pavementDetails: null,\r\n hazardRating: null,\r\n alignmentDetails: null,\r\n speedLimitLoading: false,\r\n curveSurveyLoading: false,\r\n speedLimitSet: false,\r\n pavementDetailsLoading: false,\r\n hazardRatingLoading: false,\r\n alignmentDetailsLoading: false,\r\n };\r\n\r\n this.handleSpeedChange = this.handleSpeedChange.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.playerContext !== prevProps.playerContext) {\r\n this.props.playerContext.onGpsDataChanged(this.gpsDataChanged.bind(this));\r\n this.props.playerContext.onGpsFileChanged(this.gpsFileChanged.bind(this));\r\n }\r\n if (this.irisDataSet) return;\r\n if (this.props.playerContext && this.props.irisRoadLayerConfig) {\r\n irisRoadData.initialise(\r\n this.props.irisRoadLayerConfig,\r\n this.props.playerContext\r\n );\r\n irisRoadData.onirisDataChanged(this.roadDataChanged.bind(this));\r\n this.irisDataSet = true;\r\n }\r\n }\r\n\r\n handleSpeedChange(e) {\r\n this.setState({ speedLimit: e.target.value });\r\n }\r\n\r\n async updateSpeedLimitValue(currentPoint) {\r\n if (!this.speedLimitFeatures) return;\r\n if (!currentPoint) {\r\n this.setState({ speedLimit: \"-\" });\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n //determine current speed limit\r\n const speedLimitDistances = await Promise.all(\r\n this.speedLimitFeatures.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(currentPoint, feature.geometry)\r\n )\r\n );\r\n const speedLimitFeature =\r\n this.speedLimitFeatures[\r\n speedLimitDistances.indexOf(Math.min(...speedLimitDistances))\r\n ];\r\n const speedLimit = parseFloat(\r\n speedLimitFeature.attributes[\r\n this.props.speedLimitLayerConfig.speedLimitAttribute\r\n ]\r\n );\r\n if (speedLimit === 51 && !this.state.speedLimitSet) {\r\n this.setState({\r\n speedLimit: 110,\r\n speedLimitSet: true,\r\n allowSelection: true,\r\n });\r\n } else if (speedLimit !== 51) {\r\n this.setState({\r\n speedLimit: speedLimitFeature && speedLimit,\r\n speedLimitSet: false,\r\n allowSelection: false,\r\n });\r\n }\r\n }\r\n\r\n async updateCurveSurveyValues(currentPoint) {\r\n if (!this.curveSurveyFeatures) return;\r\n if (!currentPoint) {\r\n this.setState({\r\n curveSurveyFeatures: [],\r\n curveSurveyReferencePoint: currentPoint,\r\n });\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n //determine potential curve survey features\r\n const bufferedPoint = await GeometryEngine.buffer(\r\n currentPoint,\r\n bufferDistanceMetres,\r\n \"meters\"\r\n );\r\n const featuresWithinBuffer = (\r\n await Promise.all(\r\n this.curveSurveyFeatures.map(async (feature) =>\r\n (await GeometryEngine.within(feature.geometry, bufferedPoint))\r\n ? feature\r\n : null\r\n )\r\n )\r\n ).filter((feature) => feature);\r\n\r\n this.setState({\r\n curveSurveyFeatures: featuresWithinBuffer,\r\n curveSurveyReferencePoint: currentPoint,\r\n curveSurveyBufferedPoint: bufferedPoint,\r\n });\r\n }\r\n\r\n async updatePavementDetailsValues(currentPoint) {\r\n if (!this.pavementDetailsFeatures) return;\r\n if (!currentPoint) {\r\n this.setState({ pavementDetails: null });\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n const pavementDetailDistances = await Promise.all(\r\n this.pavementDetailsFeatures.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(\r\n currentPoint,\r\n feature.geometry,\r\n \"meters\"\r\n )\r\n )\r\n );\r\n\r\n const minDistance = Math.min(...pavementDetailDistances);\r\n const pavementDetailsFeature =\r\n minDistance <= bufferDistanceMetres &&\r\n this.pavementDetailsFeatures[\r\n pavementDetailDistances.indexOf(minDistance)\r\n ];\r\n\r\n this.setState({\r\n pavementDetails: pavementDetailsFeature && {\r\n leftUnsealed:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.leftUnsealedAttribute\r\n ],\r\n leftSealed:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.leftSealedAttribute\r\n ],\r\n sealWidth:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.sealWidthAttribute\r\n ],\r\n laneCount:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.laneCountAttribute\r\n ],\r\n rightSealed:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.rightSealedAttribute\r\n ],\r\n rightUnsealed:\r\n pavementDetailsFeature.attributes[\r\n this.props.pavementDetailsLayerConfig.rightUnsealedAttribute\r\n ],\r\n },\r\n });\r\n }\r\n\r\n async updateHazardRatingValues(roadData) {\r\n if (!this.hazardRatingFeatures) return;\r\n if (!roadData) {\r\n this.setState({ hazardRating: null });\r\n return;\r\n }\r\n\r\n const {\r\n roadNoAttribute,\r\n startSLKAttribute,\r\n endSLKAttribute,\r\n leftRightAttribute,\r\n hazardRatingAttribute,\r\n } = this.props.roadsideHazardRatingLayerConfig;\r\n //should be maximum one feature each, L and R, for the given SLK\r\n const applicableFeatures = this.hazardRatingFeatures.filter(\r\n (feature) =>\r\n feature.attributes[roadNoAttribute] === roadData.roadNo &&\r\n feature.attributes[startSLKAttribute] <= roadData.slk &&\r\n feature.attributes[endSLKAttribute] >= roadData.slk\r\n );\r\n const leftFeature = applicableFeatures.find(\r\n (feature) => feature.attributes[leftRightAttribute] === \"L\"\r\n );\r\n const rightFeature = applicableFeatures.find(\r\n (feature) => feature.attributes[leftRightAttribute] === \"R\"\r\n );\r\n\r\n this.setState({\r\n hazardRating: {\r\n left: leftFeature && leftFeature.attributes[hazardRatingAttribute],\r\n right: rightFeature && rightFeature.attributes[hazardRatingAttribute],\r\n },\r\n });\r\n }\r\n\r\n async updateAlignmentValues(currentPoint) {\r\n if (!this.alignmentFeatures) return;\r\n if (!currentPoint) {\r\n this.setState({ alignmentDetails: null });\r\n return;\r\n }\r\n\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n const alignmentDistances = await Promise.all(\r\n this.alignmentFeatures.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(\r\n currentPoint,\r\n feature.geometry,\r\n \"meters\"\r\n )\r\n )\r\n );\r\n\r\n const minDistance = Math.min(...alignmentDistances);\r\n const alignmentFeature =\r\n minDistance <= bufferDistanceMetres &&\r\n this.alignmentFeatures[alignmentDistances.indexOf(minDistance)];\r\n\r\n this.setState({\r\n alignmentDetails: alignmentFeature && {\r\n verticalCurveType:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.verticalCurveTypeAttribute\r\n ],\r\n gradePercent:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.gradeAttribute\r\n ],\r\n verticalDesignSpeed:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.verticalDesignSpeedAttribute\r\n ],\r\n horizontalProfile:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.horizontalProfileAttribute\r\n ],\r\n curveRadius:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.curveRadiusAttribute\r\n ],\r\n calculatedSafeSpeed:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.calculatedSafeSpeedAttribute\r\n ],\r\n crossfall:\r\n alignmentFeature.attributes[\r\n this.props.geometryAlignmentLayerConfig.crossfallAttribute\r\n ],\r\n },\r\n });\r\n }\r\n\r\n getCurrentPoint(gpsData) {\r\n return gpsData && gpsData.isValidGeometry && gpsData.projectedGeometry;\r\n }\r\n\r\n async gpsDataChanged(gpsData) {\r\n const currentPoint = await this.getCurrentPoint(gpsData);\r\n\r\n //intentionally not awaiting - want these to run in parallel\r\n this.updateSpeedLimitValue(currentPoint);\r\n this.updateCurveSurveyValues(currentPoint);\r\n this.updatePavementDetailsValues(currentPoint);\r\n this.updateAlignmentValues(currentPoint);\r\n }\r\n\r\n roadDataChanged(roadData) {\r\n this.updateHazardRatingValues(roadData);\r\n }\r\n\r\n /**\r\n * Reacts to a gps file change by loading all data required for the entire video, based on the route followed\r\n * @param {object} gpsInformation contains all gps rows and also the current gps row, in addition to the buffered line that marks the route\r\n */\r\n async gpsFileChanged(gpsInformation) {\r\n this.speedLimitFeatures = null;\r\n this.curveSurveyFeatures = null;\r\n this.pavementDetailsFeatures = null;\r\n this.hazardRatingFeatures = null;\r\n this.alignmentFeatures = null;\r\n this.setState({\r\n speedLimitLoading: true,\r\n curveSurveyLoading: true,\r\n pavementDetailsLoading: true,\r\n hazardRatingLoading: true,\r\n alignmentDetailsLoading: true,\r\n });\r\n\r\n const getLayerData = async ({ uniqueIdentifier, subLayerId }) => {\r\n //get the layer that we're going to use for data\r\n const rimeLayer = mapHelper.layers.find((layer) =>\r\n isMatchingLayer({ uniqueIdentifier, subLayerId }, layer)\r\n );\r\n if (!rimeLayer) return [];\r\n\r\n //query layer data for the route\r\n const bufferedGeometry = await gpsInformation.bufferedGeometry;\r\n const query = {\r\n geometry: bufferedGeometry,\r\n spatialRelationship: \"intersects\",\r\n outFields: [\"*\"],\r\n returnGeometry: true,\r\n };\r\n return (await rimeLayer.layer.queryFeatures(query)).features;\r\n };\r\n\r\n const getCurrentPoint = () =>\r\n this.getCurrentPoint(this.props.playerContext.gpsInformation.current);\r\n getLayerData(this.props.speedLimitLayerConfig)\r\n .then(async (speedLimitFeatures) => {\r\n this.speedLimitFeatures = speedLimitFeatures;\r\n this.updateSpeedLimitValue(await getCurrentPoint());\r\n })\r\n .finally(() => this.setState({ speedLimitLoading: false }));\r\n getLayerData(this.props.curveSurveyLayerConfig)\r\n .then(async (curveSurveyFeatures) => {\r\n this.curveSurveyFeatures = curveSurveyFeatures;\r\n this.updateCurveSurveyValues(await getCurrentPoint());\r\n })\r\n .finally(() => this.setState({ curveSurveyLoading: false }));\r\n getLayerData(this.props.pavementDetailsLayerConfig)\r\n .then(async (pavementDetailsFeatures) => {\r\n this.pavementDetailsFeatures = pavementDetailsFeatures;\r\n this.updatePavementDetailsValues(await getCurrentPoint());\r\n })\r\n .finally(() => this.setState({ pavementDetailsLoading: false }));\r\n getLayerData(this.props.roadsideHazardRatingLayerConfig)\r\n .then(async (hazardRatingFeatures) => {\r\n this.hazardRatingFeatures = hazardRatingFeatures;\r\n this.updateHazardRatingValues(irisRoadData.currentRoadData);\r\n })\r\n .finally(() => this.setState({ hazardRatingLoading: false }));\r\n getLayerData(this.props.geometryAlignmentLayerConfig)\r\n .then(async (alignmentFeatures) => {\r\n this.alignmentFeatures = alignmentFeatures;\r\n this.updateAlignmentValues(await getCurrentPoint());\r\n })\r\n .finally(() => this.setState({ alignmentDetailsLoading: false }));\r\n }\r\n\r\n render() {\r\n const className = classNames(\"speedSelectionContainer\", {\r\n speedSelection: this.state.allowSelection,\r\n });\r\n return (\r\n \r\n {props.pavementDetailsLoading ? (\r\n
\r\n Loading Data...
\r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {leftUnsealed != null ? `${leftUnsealed}m` : null}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {leftSealed != null ? `${leftSealed}m` : null}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {sealWidth != null ? `${sealWidth}m` : null}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {laneCount}\r\n
\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {rightSealed != null ? `${rightSealed}m` : null}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {rightUnsealed != null ? `${rightUnsealed}m` : null}\r\n \r\n
\r\n \r\n {props.hazardRatingLoading ? (\r\n
\r\n Loading Data...
\r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {leftHazardRating}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {rightHazardRating}\r\n
\r\n \r\n {props.alignmentDetailsLoading ? (\r\n
\r\n Loading Data...
\r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {verticalCurveType}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {gradePercent != null ? `${gradePercent}%` : null}\r\n \r\n
\r\n \r\n verticalDesignSpeed,\r\n })}\r\n >\r\n \r\n {verticalDesignSpeed != null\r\n ? `${verticalDesignSpeed}km/h`\r\n : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {horizontalProfile}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {curveRadius != null ? `${curveRadius}m` : null}\r\n \r\n
\r\n \r\n calculatedSafeSpeed,\r\n })}\r\n >\r\n \r\n {calculatedSafeSpeed != null\r\n ? `${calculatedSafeSpeed}km/h`\r\n : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {crossfall}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","var _g;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgPinLeft(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"100.000000pt\",\n height: \"100.000000pt\",\n viewBox: \"0 0 100.000000 100.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,100.000000) scale(0.100000,-0.100000)\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M625 977 c-85 -34 -146 -97 -173 -176 -33 -94 -2 -221 69 -288 60 -56 115 -78 194 -78 85 1 144 25 200 81 131 134 96 360 -70 447 -48 25 -174 33 -220 14z m113 -108 c2 -12 -10 -20 -43 -28 -59 -15 -91 -47 -106 -105 -18 -73 -59 -56 -45 19 8 42 58 103 101 121 39 18 89 14 93 -7z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M119 613 c-63 -61 -99 -104 -99 -118 0 -27 188 -215 216 -215 32 0 44 20 44 77 l0 53 74 0 c89 0 106 12 106 73 0 86 -2 87 -96 87 l-84 0 0 53 c0 55 -19 87 -50 87 -7 0 -57 -44 -111 -97z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M650 222 c0 -141 1 -149 25 -185 32 -46 54 -47 83 -2 20 32 22 46 22 185 l0 150 -65 0 -65 0 0 -148z\"\n }))));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgPinLeft);\nexport default __webpack_public_path__ + \"static/media/pin-left.bff04bd0.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faChevronUp, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nimport \"./collapseLayerPanel.css\";\r\n\r\nexport default class CollapseLayer extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { collapsed: false };\r\n this.togglePanelCollapse = this.togglePanelCollapse.bind(this);\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.props.fileChanged) {\r\n this.togglePanelExpand();\r\n }\r\n }\r\n\r\n togglePanelCollapse() {\r\n this.setState({ collapsed: !this.state.collapsed });\r\n }\r\n\r\n togglePanelExpand() {\r\n this.setState({ collapsed: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.allowSelection && (\r\n
\r\n \r\n \r\n \r\n {possibleSpeeds.map((speed, i) => (\r\n \r\n ))}\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport { bufferDistanceMetres } from \"../data/gpsData\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\n\r\nimport \"./layerDetails.css\";\r\n\r\nexport class LayerDetails extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { attributeTitles: [], attributeValues: [] };\r\n\r\n this.layerFeatures = [];\r\n\r\n this.gpsDataChanged = this.gpsDataChanged.bind(this);\r\n this.getNameToAliasMap = this.getNameToAliasMap.bind(this);\r\n this.determineClosestFeature = this.determineClosestFeature.bind(this);\r\n }\r\n\r\n async componentDidMount() {\r\n if (!this.props.playerContext.gpsInformation.allData.length > 0) return;\r\n this.props.playerContext.onGpsDataChanged(this.gpsDataChanged);\r\n const getLayerData = async (rimeLayer) => {\r\n //query layer data for the route\r\n const bufferedGeometry = await this.props.playerContext.gpsInformation\r\n .bufferedGeometry;\r\n if (!bufferedGeometry) return;\r\n const query = {\r\n geometry: bufferedGeometry,\r\n spatialRelationship: \"intersects\",\r\n outFields: [\"*\"],\r\n returnGeometry: true,\r\n };\r\n return (await rimeLayer.layer.queryFeatures(query)).features;\r\n };\r\n this.layerFeatures = await getLayerData(this.props.layer);\r\n this.gpsDataChanged(this.props.playerContext.gpsInformation.current);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.playerContext.removeOnGpsDataChanged(this.gpsDataChanged);\r\n }\r\n\r\n async gpsDataChanged(gpsData) {\r\n const closestFeature = await this.determineClosestFeature(gpsData);\r\n const mapTitles = this.getNameToAliasMap(closestFeature);\r\n if (!closestFeature) {\r\n this.setState({\r\n attributeValues: [],\r\n attributeTitles: [],\r\n });\r\n return;\r\n }\r\n\r\n this.setState({\r\n attributeTitles:\r\n mapTitles.length === 0 //will default to keys if getNameToAliasMap fails\r\n ? Object.keys(closestFeature.attributes).slice(1) //removing objectId attribute with slice\r\n : Object.values(mapTitles).slice(1),\r\n attributeValues: Object.values(closestFeature.attributes).slice(1),\r\n });\r\n }\r\n\r\n getNameToAliasMap(feature) {\r\n if (!feature) return;\r\n const layer =\r\n feature.sourceLayer && mapHelper.esriLayerToLayer(feature.sourceLayer);\r\n return layer ? layer.nameToAliasMap : null;\r\n }\r\n\r\n async determineClosestFeature(gpsData) {\r\n if (!this.layerFeatures.length > 0 || !gpsData) return;\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n const currentPoint = await gpsData.projectedGeometry;\r\n const distances = await Promise.all(\r\n this.layerFeatures.map(\r\n async (feature) =>\r\n await GeometryEngine.distance(\r\n currentPoint,\r\n feature.geometry,\r\n \"meters\"\r\n )\r\n )\r\n );\r\n\r\n const minDistance = Math.min(...distances);\r\n return (\r\n minDistance <= bufferDistanceMetres &&\r\n this.layerFeatures[distances.indexOf(minDistance)]\r\n );\r\n }\r\n\r\n render() {\r\n const hasData =\r\n this.state.attributeTitles.length + this.state.attributeValues.length > 0;\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {this.state.collapsed ? (\r\n
\r\n \r\n {this.props.children}\r\n
\r\n \r\n \r\n {hasData ? (\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport CollapseLayer from \"./CollapseLayerPanel\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport { ServerSubLayer } from \"@mrwa/rime-replacement/esriControls/layers/server\";\r\nimport { CustomFileLayer } from \"@mrwa/rime-replacement/esriControls/layers/customFileLayer\";\r\nimport { isMatchingLayer } from \"@mrwa/rime-replacement/esriControls/controls/layer/layerSynchronisationImpl\";\r\nimport { LayerDetails } from \"./LayerDetails\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nexport class LayerPanel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n uniqueIdentifier: null,\r\n expand: false,\r\n filteredGeometries: [],\r\n };\r\n\r\n this.gpsFileChanged = this.gpsFileChanged.bind(this);\r\n this.setLayers = this.setLayers.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n mapHelper.subscribe(\"layers\", this.setLayers);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.playerContext !== prevProps.playerContext) {\r\n this.props.playerContext.onGpsFileChanged(this.gpsFileChanged);\r\n }\r\n }\r\n\r\n setLayers() {\r\n const excludedLayers = [];\r\n this.props.excludedLayers.forEach((excludedLayer) => {\r\n const { uniqueIdentifier, subLayerId } = excludedLayer;\r\n const rimeLayer = mapHelper.layers.find((layer) =>\r\n isMatchingLayer({ uniqueIdentifier, subLayerId }, layer)\r\n );\r\n excludedLayers.push(rimeLayer);\r\n });\r\n\r\n if (mapHelper.layers) {\r\n const layers = mapHelper.layers;\r\n const serverLayers = layers.filter(\r\n (rimeLayer) =>\r\n rimeLayer instanceof ServerSubLayer &&\r\n rimeLayer.layer.sourceJSON.geometryType === \"esriGeometryPolyline\" &&\r\n rimeLayer.visible &&\r\n !excludedLayers.includes(rimeLayer)\r\n );\r\n const customLayers = layers.filter(\r\n (rimeLayer) =>\r\n rimeLayer instanceof CustomFileLayer &&\r\n rimeLayer.layer.geometryType === \"polyline\" &&\r\n rimeLayer.visible\r\n );\r\n this.setState({\r\n filteredGeometries: [...serverLayers, ...customLayers],\r\n });\r\n }\r\n }\r\n\r\n gpsFileChanged() {\r\n this.setState({ uniqueIdentifier: uuidv4(), expand: true }, () => {\r\n this.setState({ expand: false });\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n | {title} | \r\n ))}\r\n
|---|
| {value} | \r\n ))}\r\n
| No current data for this layer | \r\n
\r\n {this.state.filteredGeometries.map((layer) => (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","var _g;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgPinRight(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"100.000000pt\",\n height: \"100.000000pt\",\n viewBox: \"0 0 100.000000 100.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,100.000000) scale(0.100000,-0.100000)\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M195 977 c-85 -34 -146 -97 -173 -176 -33 -94 -2 -221 69 -288 60 -56 115 -78 194 -78 85 1 144 25 200 81 131 134 96 360 -70 447 -48 25 -174 33 -220 14z m113 -108 c2 -12 -10 -20 -43 -28 -59 -15 -91 -47 -106 -105 -18 -73 -59 -56 -45 19 8 42 58 103 101 121 39 18 89 14 93 -7z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M737 692 c-11 -12 -17 -36 -17 -70 l0 -52 -84 0 c-94 0 -96 -1 -96 -87 0 -61 17 -73 106 -73 l74 0 0 -53 c0 -57 12 -77 45 -77 27 0 215 188 215 216 0 23 -189 214 -212 214 -8 0 -22 -8 -31 -18z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M220 222 c0 -141 1 -149 25 -185 32 -46 54 -47 83 -2 20 32 22 46 22 185 l0 150 -65 0 -65 0 0 -148z\"\n }))));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgPinRight);\nexport default __webpack_public_path__ + \"static/media/pin-right.4f223b0d.svg\";\nexport { ForwardRef as ReactComponent };","import SubscriptionProxyHandler from \"@mrwa/rime-replacement/infrastructure/subscriptionProxy\";\r\n\r\nclass CoordinateListState {\r\n constructor() {\r\n this._savedCoordinates = [];\r\n }\r\n\r\n get savedCoordinates() {\r\n return this._savedCoordinates;\r\n }\r\n set savedCoordinates(value) {\r\n this._savedCoordinates = value;\r\n }\r\n}\r\n\r\nexport default new Proxy(\r\n new CoordinateListState(),\r\n new SubscriptionProxyHandler()\r\n);\r\n","import React from \"react\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport requestEsriModules from \"@mrwa/rime-replacement/infrastructure/esriModules\";\r\nimport irisRoadData from \"../data/irisRoadData\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMapPin } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { ReactComponent as PinLeft } from \"./pin-left.svg\";\r\nimport { ReactComponent as PinRight } from \"./pin-right.svg\";\r\nimport coordinateListState from \"./coordinateListState\";\r\nimport {\r\n ApplicationMessage,\r\n messageState,\r\n} from \"@mrwa/rime-replacement/esriControls/general/ApplicationMessage\";\r\n\r\nimport \"./addCoordinateToolBar.css\";\r\n\r\nexport const geometryType = {\r\n POLYLINE: \"polyline\",\r\n POINT: \"point\",\r\n};\r\n\r\nexport default class AddCoordinateToolBar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { isRecording: false };\r\n\r\n this.startCoordinates = null;\r\n this.irisDataSet = false;\r\n\r\n this.handleAddPoint = this.handleAddPoint.bind(this);\r\n this.startCapture = this.handleCapture.bind(this, true);\r\n this.endCapture = this.handleCapture.bind(this, false);\r\n this.gpsFileChanged = this.gpsFileChanged.bind(this);\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.irisDataSet) return;\r\n if (this.props.playerContext && this.props.irisRoadLayerConfig) {\r\n irisRoadData.initialise(\r\n this.props.irisRoadLayerConfig,\r\n this.props.playerContext\r\n );\r\n this.props.playerContext.onGpsFileChanged(this.gpsFileChanged.bind(this));\r\n this.irisDataSet = true;\r\n }\r\n }\r\n\r\n gpsFileChanged() {\r\n this.startCoordinates = null;\r\n this.setState({ isRecording: false });\r\n }\r\n\r\n //returns a point geometry from a given latitude and longitude\r\n async toPointGeometry(pointGeometry) {\r\n const { latitude, longitude } = pointGeometry;\r\n if (isNaN(latitude) || isNaN(longitude)) return;\r\n const { Point } = await requestEsriModules({\r\n Point: \"esri/geometry/Point\",\r\n });\r\n const geometry = new Point({\r\n latitude,\r\n longitude,\r\n spatialReference: { wkid: 4326 }, //4326 is WGS84, spatial reference used by GPS systems\r\n });\r\n return geometry;\r\n }\r\n\r\n //returns a polyline geometry from a given latitude and longitude\r\n async toPolylineGeometry(lineGeometry) {\r\n if (\r\n isNaN(lineGeometry.startLatitude) ||\r\n isNaN(lineGeometry.startLongitude) ||\r\n !lineGeometry.endIndex ||\r\n lineGeometry.startIndex === null //have to compare to null due a 0 index being false and possible.\r\n )\r\n return;\r\n const recordedPath = [];\r\n for (let i = lineGeometry.startIndex; i < lineGeometry.endIndex; i++) {\r\n const point = [\r\n this.props.playerContext.gpsInformation.allData[i].longitude,\r\n this.props.playerContext.gpsInformation.allData[i].latitude,\r\n ];\r\n recordedPath.push(point);\r\n }\r\n const { Polyline } = await requestEsriModules({\r\n Polyline: \"esri/geometry/Polyline\",\r\n });\r\n const path = [recordedPath];\r\n const geometry = new Polyline({\r\n paths: path,\r\n spatialReference: { wkid: 4326 }, //4326 is WGS84, spatial reference used by GPS systems\r\n });\r\n return geometry;\r\n }\r\n\r\n async handleAddPoint() {\r\n if (\r\n irisRoadData.currentRoadData &&\r\n ((irisRoadData.currentRoadData.latitude &&\r\n irisRoadData.currentRoadData.longitude) ||\r\n irisRoadData.currentRoadData.slk)\r\n ) {\r\n const pointCoordinate = {\r\n roadNo: irisRoadData.currentRoadData.roadNo || \"\",\r\n roadName: irisRoadData.currentRoadData.roadName || \"\",\r\n slk: irisRoadData.currentRoadData.slk\r\n ? irisRoadData.currentRoadData.slk.toFixed(2)\r\n : \"\",\r\n latitude:\r\n irisRoadData.playerContext.gpsInformation.current.latitude || \"\",\r\n longitude:\r\n irisRoadData.playerContext.gpsInformation.current.longitude || \"\",\r\n note: \"\",\r\n type: geometryType.POINT,\r\n };\r\n const pointCoord = {\r\n ...pointCoordinate,\r\n geometry: await this.toPointGeometry(pointCoordinate),\r\n };\r\n coordinateListState.savedCoordinates = [\r\n ...coordinateListState.savedCoordinates,\r\n pointCoord,\r\n ];\r\n } else {\r\n messageState.message = ApplicationMessage.Error(\r\n \"No data is available for the current position\"\r\n );\r\n }\r\n }\r\n\r\n async calculateStraightLineDistance(coordinate) {\r\n if (\r\n !coordinate.startLatitude ||\r\n !coordinate.startLongitude ||\r\n !coordinate.endLatitude ||\r\n !coordinate.endLongitude\r\n )\r\n return;\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n const startData = {\r\n latitude: coordinate.startLatitude,\r\n longitude: coordinate.startLongitude,\r\n };\r\n const endData = {\r\n latitude: coordinate.endLatitude,\r\n longitude: coordinate.endLongitude,\r\n };\r\n\r\n const convertedStartPoint = await mapHelper.projectToView(\r\n await this.toPointGeometry(startData)\r\n );\r\n const convertedEndPoint = await mapHelper.projectToView(\r\n await this.toPointGeometry(endData)\r\n );\r\n\r\n return await GeometryEngine.distance(\r\n convertedStartPoint,\r\n convertedEndPoint,\r\n \"meters\"\r\n );\r\n }\r\n\r\n async calculateDistance(geometry) {\r\n const { GeometryEngine } = await requestEsriModules({\r\n GeometryEngine: \"esri/geometry/geometryEngineAsync\",\r\n });\r\n\r\n return await GeometryEngine.geodesicLength(geometry, \"meters\");\r\n }\r\n\r\n async handleCapture(isRecording) {\r\n if (\r\n irisRoadData.currentRoadData &&\r\n ((irisRoadData.currentRoadData.latitude &&\r\n irisRoadData.currentRoadData.longitude) ||\r\n irisRoadData.currentRoadData.slk)\r\n ) {\r\n let endCoordinate = null;\r\n const gpsInformation = this.props.playerContext.gpsInformation;\r\n this.setState({ isRecording: isRecording });\r\n if (isRecording) {\r\n const startIndex = gpsInformation.allData.findIndex(\r\n (x) => x.sortingKey === gpsInformation.current.sortingKey\r\n );\r\n this.startCoordinates = {\r\n startIndex: startIndex >= 0 ? startIndex : null,\r\n startRoadNo: irisRoadData.currentRoadData.roadNo || \"\",\r\n startRoadName: irisRoadData.currentRoadData.roadName || \"\",\r\n startSLK: irisRoadData.currentRoadData.slk\r\n ? irisRoadData.currentRoadData.slk.toFixed(2)\r\n : \"\",\r\n startLatitude: gpsInformation.current.latitude || \"\",\r\n startLongitude: gpsInformation.current.longitude || \"\",\r\n };\r\n } else {\r\n endCoordinate = {\r\n endIndex:\r\n gpsInformation.allData.findIndex(\r\n (x) => x.sortingKey === gpsInformation.current.sortingKey\r\n ) || null,\r\n endRoadNo: irisRoadData.currentRoadData.roadNo || \"\",\r\n endRoadName: irisRoadData.currentRoadData.roadName || \"\",\r\n endSLK: irisRoadData.currentRoadData.slk\r\n ? irisRoadData.currentRoadData.slk.toFixed(2)\r\n : \"\",\r\n endLatitude: gpsInformation.current.latitude || \"\",\r\n endLongitude: gpsInformation.current.longitude || \"\",\r\n };\r\n }\r\n const combinedCoordinate = {\r\n ...this.startCoordinates,\r\n ...endCoordinate,\r\n note: \"\",\r\n type: geometryType.POLYLINE,\r\n };\r\n if (endCoordinate) {\r\n const geometry = await this.toPolylineGeometry(combinedCoordinate);\r\n const resultCoordinate = {\r\n ...combinedCoordinate,\r\n geometry,\r\n straightLineDistance: await this.calculateStraightLineDistance(\r\n combinedCoordinate\r\n ),\r\n alongRoadDistance: await this.calculateDistance(geometry),\r\n };\r\n\r\n coordinateListState.savedCoordinates = [\r\n ...coordinateListState.savedCoordinates,\r\n resultCoordinate,\r\n ];\r\n //reset start and end coordinates\r\n this.startCoordinates = null;\r\n endCoordinate = null;\r\n } else return;\r\n } else {\r\n messageState.message = ApplicationMessage.Error(\r\n \"No data is available for the current position\"\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n if (!this.props.playerContext || !this.props.playerContext.hasData)\r\n return null;\r\n\r\n //use esri styles to look the same as the map buttons\r\n const buttonClass = \"esri-widget--button\";\r\n const buttonClassDisabled = \"esri-widget--button esri-button--disabled\";\r\n return (\r\n \r\n \r\n
\r\n \r\n {this.state.savedCoordinates.length > 0 ? (\r\n <>\r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\r\nimport { faPause, faPlay } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\nimport \"./playlist.css\";\r\n\r\nexport default class Playlist extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n videoSelections: [],\r\n };\r\n\r\n this.handleOnDragEnd = this.handleOnDragEnd.bind(this);\r\n this.changePlayingItem = this.changePlayingItem.bind(this);\r\n this.playPauseCurrentItem = this.playPauseCurrentItem.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.playerContext) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (\r\n this.props.playerContext !== prevProps.playerContext &&\r\n this.props.playerContext\r\n ) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n\r\n playerStateChanged(state) {\r\n this.setState({ videoSelections: state.videoToGpsFileMapping });\r\n if (this.awaitPlay) {\r\n //await play is used when requesting a change of playlist index - requestPlay can't be called until the video track has changed\r\n this.awaitPlay = false;\r\n this.props.playerContext.requestPlay();\r\n }\r\n }\r\n\r\n handleOnDragEnd(result) {\r\n if (!result.destination || result.source.index === result.destination.index)\r\n return;\r\n const items = [...this.state.videoSelections];\r\n const playingItem = items[this.props.playerContext.playlistIndex];\r\n const [reorderItems] = items.splice(result.source.index, 1);\r\n items.splice(result.destination.index, 0, reorderItems);\r\n\r\n this.setState({ videoSelections: items });\r\n this.props.playerContext.setPlayerFiles(\r\n items,\r\n items.indexOf(playingItem),\r\n false\r\n );\r\n }\r\n\r\n changePlayingItem(e) {\r\n this.props.playerContext.setPlaylistIndex(\r\n parseInt(e.currentTarget.dataset.id)\r\n );\r\n this.awaitPlay = true;\r\n }\r\n\r\n playPauseCurrentItem() {\r\n this.props.playerContext.playing\r\n ? this.props.playerContext.requestPause()\r\n : this.props.playerContext.requestPlay();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {/* Commenting this out rather than removing, since it may be desired again in future. \r\n If it is used the the CSV export should use faFileExcel from the @fortawesome/free-regular-svg-icons library\r\n \r\n Export to Text \r\n Export to CSV
\r\n {this.state.savedCoordinates.map((coord, i) => (\r\n \r\n this.zoomToGeometry(coord.geometry)}\r\n >\r\n \r\n this.removeCoordinate(i)}\r\n >\r\n
\r\n ))}\r\n \r\n ) : (\r\n <>\r\n {importButton}
\r\n Coordinate(s) not yet added
\r\n \r\n )}\r\n \r\n {this.state.videoSelections.length > 0 ? (\r\n \r\n \r\n {(provided) => (\r\n \r\n {this.state.videoSelections.map(({ video, gps }, index) => {\r\n return (\r\n \r\n {(provided) => (\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n {provided.placeholder}\r\n \r\n )}\r\n \r\n \r\n ) : (\r\n
\r\n );\r\n }\r\n}\r\n","import { faCamera } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport React from \"react\";\r\nimport { downloadFile } from \"../data/misc\";\r\n\r\nimport \"./screenshotTool.css\";\r\n\r\nexport default class ScreenshotTool extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { canScreenshot: true };\r\n\r\n this.takeScreenshot = this.takeScreenshot.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.playerContext) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (\r\n this.props.playerContext !== prevProps.playerContext &&\r\n this.props.playerContext\r\n ) {\r\n this.props.playerContext.onContextStateChanged(\r\n this.playerStateChanged.bind(this)\r\n );\r\n }\r\n }\r\n\r\n playerStateChanged(state) {\r\n this.setState({ canScreenshot: !state.playing });\r\n }\r\n\r\n takeScreenshot() {\r\n const video = this.props.videoRef.current;\r\n const playerContext = this.props.playerContext;\r\n if (!video || !playerContext) return;\r\n\r\n const canvas = document.createElement(\"canvas\");\r\n canvas.width = video.videoWidth;\r\n canvas.height = video.videoHeight;\r\n const ctx = canvas.getContext(\"2d\");\r\n ctx.drawImage(video, 0, 0);\r\n\r\n downloadFile(\r\n canvas\r\n .toDataURL(\"image/jpeg\")\r\n .replace(\"image/jpeg\", \"image/octet-stream\"),\r\n `${playerContext.playingName}.jpg`\r\n );\r\n }\r\n\r\n render() {\r\n //use esri styles to look the same as the map buttons\r\n const buttonClass = \"esri-widget--button\";\r\n const buttonClassDisabled = \"esri-widget--button esri-button--disabled\";\r\n if (!this.props.playerContext || !this.props.playerContext.hasData)\r\n return null;\r\n\r\n return (\r\n \r\n
\r\n {index !==\r\n this.props.playerContext.playlistIndex ? (\r\n {`Video: '${video}'`}
\r\n{`GPS: '${gps}'`}
\r\nVideo(s) not yet loaded
\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport VideoPlayer from \"./video/VideoPlayer\";\r\nimport MediaPanel from \"./player/MediaPanel\";\r\nimport TimeSelector from \"./player/TimeSelector\";\r\nimport { GPSInformation, SLKInformation } from \"./locationInformation\";\r\nimport MapControl from \"./map/MapControl\";\r\nimport SplitterLayout from \"react-splitter-layout\";\r\nimport RoadSafetyPanel from \"./roadSafety/RoadSafetyPanel\";\r\nimport mapHelper from \"@mrwa/rime-replacement/infrastructure/mapHelper\";\r\nimport { ReactComponent as Logo } from \"./roadview.svg\";\r\nimport classNames from \"classnames\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCaretRight,\r\n faFilm,\r\n faMapPin,\r\n faQuestion,\r\n faSignOutAlt,\r\n faStream,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport gpsData from \"./data/gpsData\";\r\nimport { LayerPanel } from \"./layerInformation/LayerPanel\";\r\nimport AddCoordinateToolBar from \"./coordinateList/AddCoordinateToolBar\";\r\nimport CoordinateList from \"./coordinateList/CoordinateList\";\r\nimport { setDefaultOptions } from \"esri-loader\";\r\nimport Playlist from \"./playlist/Playlist\";\r\nimport { setModalRoot } from \"@mrwa/rime-replacement/esriControls/general/Dialog\";\r\nimport ApplicationModal from \"@mrwa/rime-replacement/esriControls/general/Dialog\";\r\nimport { ApplicationMessageModal } from \"@mrwa/rime-replacement/esriControls/general/ApplicationMessage\";\r\nimport axios from \"axios\";\r\nimport { getAuthToken } from \"./Auth\";\r\nimport { AuthContext, CrashContext } from \"./context\";\r\nimport crashState from \"./roadSafety/crashState\";\r\nimport ScreenshotTool from \"./videoTools/ScreenshotTool\";\r\n\r\nimport \"./App.css\";\r\nimport \"@mrwa/rime-replacement/colours.css\";\r\nimport \"./fonts.css\";\r\nimport \"react-splitter-layout/lib/index.css\";\r\n\r\n// configure esri-loader to use version 4.21 from the ArcGIS CDN\r\n// the default of 4.17 sometimes freezes chrome <- also happens on 4.21, but 4.21 is better for other things\r\nsetDefaultOptions({ version: \"4.21\" });\r\nsetModalRoot(document.getElementById(\"modal-root\"));\r\n\r\nclass App extends React.Component {\r\n static contextType = AuthContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isRoadViewUser: null,\r\n playerContext: null,\r\n mapSettings: null,\r\n isCrashUser: null,\r\n //set crashContext in state rather than on render to avoid context consumers over re-rendering\r\n crashContext: {\r\n mapInitialised: false,\r\n isCrashUser: false,\r\n },\r\n playing: false,\r\n sidebarExpanded: false,\r\n };\r\n\r\n this.gpsData = new gpsData();\r\n this.roadViewManual = `${process.env.PUBLIC_URL}/Road View User Guide.pdf`;\r\n this.toggleSidebar = this.toggleSidebar.bind(this);\r\n this.handleSetPlayerContext = this.handleSetPlayerContext.bind(this);\r\n this.mapInitialised = this.mapInitialised.bind(this);\r\n\r\n this.headerRef = React.createRef();\r\n this.videoRef = React.createRef();\r\n\r\n if (process.env.NODE_ENV && process.env.NODE_ENV === \"development\")\r\n // hot reload doesn't reset maphelper, so set a unique instance to stop errors\r\n mapHelper.setInstance(Math.random().toString());\r\n }\r\n\r\n async componentDidMount() {\r\n const settingsResponse = await fetch(\r\n `${process.env.PUBLIC_URL}/mapSettings.json`\r\n );\r\n const mapSettings = await settingsResponse.json();\r\n this.setState({ mapSettings });\r\n\r\n try {\r\n const groups = await axios.get(mapSettings.groupsQueryUrl, {\r\n headers: {\r\n Authorization: `Bearer ${await getAuthToken(\r\n this.context.accountId,\r\n mapSettings.groupsQueryB2CScopes\r\n )}`,\r\n },\r\n });\r\n\r\n if (\r\n groups.data.find(\r\n (group) => group.displayName === mapSettings.roadViewGroup\r\n )\r\n ) {\r\n const isCrashUser =\r\n groups.data.find(\r\n (group) => group.displayName === mapSettings.crashDataGroup\r\n ) != null;\r\n this.setState({\r\n isRoadViewUser: true,\r\n isCrashUser,\r\n crashContext: {\r\n ...this.state.crashContext,\r\n isCrashUser,\r\n },\r\n });\r\n\r\n if (isCrashUser) {\r\n crashState.initialise({\r\n roadViewVehicleDetailsUrl: `${mapSettings.crashDataApiUrl}/QueryCrashVehicleDetails`,\r\n accountId: this.context.accountId,\r\n });\r\n }\r\n } else {\r\n this.setState({\r\n isRoadViewUser: false,\r\n roadViewUserMessage: \"You are not authorised to access Road View\",\r\n });\r\n return;\r\n }\r\n } catch {\r\n this.setState({\r\n isRoadViewUser: false,\r\n roadViewUserMessage: \"Unable to verify Road View access permissions\",\r\n });\r\n return;\r\n }\r\n\r\n //have to offset the overPanels to allow crash components to render in relation to map position.\r\n //nasty using direct dom manipulation, but can't work out a styling that allows for everything to work\r\n this.offsetCss = document.createElement(\"style\");\r\n document.body.appendChild(this.offsetCss);\r\n window.addEventListener(\"resize\", this.changeOffsetCss.bind(this));\r\n }\r\n\r\n componentDidUpdate() {\r\n this.changeOffsetCss();\r\n }\r\n\r\n changeOffsetCss() {\r\n if (!this.headerRef.current || !this.offsetCss) return;\r\n this.offsetCss.innerHTML = `.mapControl div.overPanel { top: ${this.headerRef.current.clientHeight}px; }`;\r\n }\r\n\r\n handleSetPlayerContext(playerContext) {\r\n playerContext.onContextStateChanged((context) =>\r\n this.setState({ playing: context.playing })\r\n );\r\n this.setState({ playerContext });\r\n }\r\n\r\n toggleSidebar() {\r\n const collapse = this.state.sidebarExpanded;\r\n this.setState({ sidebarExpanded: !collapse });\r\n }\r\n\r\n mapInitialised() {\r\n this.setState({\r\n crashContext: { ...this.state.crashContext, mapInitialised: true },\r\n });\r\n }\r\n\r\n render() {\r\n if (!this.state.isRoadViewUser) {\r\n return (\r\n \r\n \r\n {this.state.roadViewUserMessage || \"Checking Road View access...\"}\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n const sidebarClass = classNames({\r\n sidebar: true,\r\n expanded: this.state.sidebarExpanded,\r\n });\r\n\r\n const userType = (() => {\r\n switch (this.state.isCrashUser) {\r\n case false:\r\n return \"general user\";\r\n case true:\r\n return \"crash user\";\r\n default:\r\n return \"Querying user type...\";\r\n }\r\n })();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Road View
\r\n \r\n {this.state.mapSettings &&\r\n `version: ${this.state.mapSettings.version}`}\r\n \r\n\r\n
\r\n \r\n \r\n {`user: ${this.context.username}`}\r\n \r\n {userType}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Authorising...
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\nimport reportWebVitals from \"./reportWebVitals\";\r\nimport Auth from \"./Auth\";\r\n\r\nReactDOM.render(\r\n