\r\n \r\n {\r\n
history.push('/')}>\r\n {!navSideBarOpen &&
Fuelsave
}\r\n
\r\n
\r\n }\r\n
\r\n {\r\n menuList.map(({ icon, title, hoverText, href, to }, i) => \r\n \r\n {navSideBarOpen ? hoverText : title} \r\n \r\n )\r\n }\r\n {!navSideBarOpen && Copyright © 2021 Waywize All Rights Reserved
}\r\n \r\n \r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport default Edit","import React from 'react'\r\n\r\nconst Trash = ({\r\n fill = '#ff313a',\r\n height = 44,\r\n width = 44,\r\n style = {},\r\n viewBox = '0 0 44 44'\r\n}) => (\r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport default Trash","import React from 'react'\r\n\r\nconst User = ({\r\n fill = '#a7acbf',\r\n height = '40.108',\r\n width = 40,\r\n style = {},\r\n viewBox = '0 0 40 40.108'\r\n}) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport default User","import React from 'react'\r\nimport Edit from './Edit'\r\nimport Trash from './Trash'\r\nimport User from './User'\r\n\r\nconst Icon = ({ name, ...rest }) => {\r\n switch (name) {\r\n case 'user':\r\n return \r\n \r\n
\r\n
{globalBrandCrumb}
\r\n
\r\n
\r\n
\r\n \r\n {projects ? projects.map((name) => (\r\n {name.project_name} \r\n )) : null}\r\n \r\n window.open(require('./manual.pdf').default, \"_blank\")}>\r\n {t('User Manual')}\r\n \r\n \r\n {t('Logout')}\r\n \r\n
\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default NavBarLogin","import React from \"react\"\r\nimport { Button } from \"react-bootstrap\"\r\nimport { Link } from \"react-router-dom\"\r\nimport \"./login.scss\"\r\nimport waywizeLogo from \"../../../assets/Waywize-logotype-white-green.png\"\r\n\r\nconst Welcome = ({ authButtonMethod }) => (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\"Welcome to \"}\r\n FuelSave \r\n {false && BETA }\r\n \r\n \r\n
\r\n
\r\n {\"We can help you to reduce fuel and energy consumption!\"}\r\n \r\n \r\n
\r\n \r\n Sign in\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Copyright © 2021 · Waywize · All Rights Reserved\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\r\n typeof page === 'number' ?\r\n handlePageChange(page)}\r\n >\r\n {page}\r\n :\r\n {page} \r\n }\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n activePage > 1 && handlePageChange(activePage - 1)} disabled={activePage <= 1}>{'<'} {' '}\r\n {generatePages(numberOfPages)}\r\n activePage !== numberOfPages && handlePageChange(activePage + 1)}>\r\n {'>'}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default TablePagination","import React, { Fragment, useContext, useState } from \"react\"\r\nimport { useDispatch, useSelector } from \"react-redux\"\r\nimport FuelSaveGlobalContext from \"../../../../context/FuelSaveGlobalContext\"\r\nimport SpinLoader from \"../../../common/SpinLoader\"\r\nimport TablePagination from \"../../../common/TablePagination\"\r\nimport { fetchAllAlignments } from \"../../../../actions/alignment\"\r\n\r\nconst AlignmentPageWidget = () => {\r\n const dispatch = useDispatch()\r\n const [isLoading, setIsLoading] = useState(false)\r\n const { total, activePage } = useSelector(state => state.alignments)\r\n const { globalProjectNumber } = useContext(FuelSaveGlobalContext)\r\n\r\n const fetchPaginatedRecords = async (page) => {\r\n setIsLoading(true)\r\n try {\r\n await dispatch(fetchAllAlignments(globalProjectNumber, page))\r\n setIsLoading(false)\r\n } catch (e) {\r\n setIsLoading(false)\r\n console.log('Fetch PaginatedRecords:', e)\r\n }\r\n }\r\n\r\n return (\r\n \r\n {!!isLoading && fetchPaginatedRecords(page)} total={total} />\r\n \r\n )\r\n}\r\n\r\nexport default AlignmentPageWidget\r\n","\r\nimport React, { useEffect, useState } from 'react';\r\nimport { Table } from 'react-bootstrap';\r\nimport { useSelector } from 'react-redux';\r\nimport \"./dailysums.css\"\r\nimport TextRotateUpOutlinedIcon from '@material-ui/icons/TextRotateUpOutlined';\r\nimport TextRotationDownOutlinedIcon from '@material-ui/icons/TextRotationDownOutlined';\r\nimport AlignmentPageWidget from '../../summary/AlignmentPageWidget';\r\n\r\n\r\nconst DailySums = ({ alternativeDailySums, dataQuerySearch, searchDefaultValue }) => {\r\n\r\n const { currency } = useSelector(state => state.global)\r\n\r\n const convertToLowerCase = (initialList, altDailySum) => {\r\n const randomList = [\"\"]\r\n if (initialList) {\r\n initialList.map((item) => {\r\n randomList.push(item.toLowerCase())\r\n return item\r\n })\r\n }\r\n else {\r\n altDailySum.map((item) => {\r\n randomList.push(item.name.toLowerCase())\r\n return item\r\n })\r\n }\r\n return randomList\r\n }\r\n\r\n const searchDefaultVal = convertToLowerCase(searchDefaultValue, alternativeDailySums)\r\n\r\n //const [sortedField, setSortedField] = useState(null);\r\n const [sortConfig, setSortConfig] = React.useState(null);\r\n const [sortedDailySums, setSortedDailySums] = useState([])\r\n // const [sortConfigIcon, setSortConfigIcon] = useState(null)\r\n\r\n useEffect(() => {\r\n setSortedDailySums(alternativeDailySums)\r\n\r\n // eslint-disable-next-line\r\n }, [alternativeDailySums])\r\n\r\n const requestSort = key => {\r\n\r\n let direction = 'ascending';\r\n if (sortConfig !== null) {\r\n if (sortConfig.key === key && sortConfig.direction === 'ascending') {\r\n direction = 'descending';\r\n setSortConfig({ key, direction });\r\n }\r\n else {\r\n direction = 'ascending';\r\n setSortConfig({ key, direction });\r\n }\r\n } else {\r\n //to check the direction\r\n direction = 'ascending';\r\n setSortConfig({ key, direction });\r\n }\r\n\r\n const newlist = [...alternativeDailySums]\r\n if (newlist !== null && sortConfig !== null) {\r\n newlist.sort((a, b) => {\r\n if (a[sortConfig.key] < b[sortConfig.key]) {\r\n return sortConfig.direction === 'ascending' ? -1 : 1;\r\n }\r\n if (a[sortConfig.key] > b[sortConfig.key]) {\r\n return sortConfig.direction === 'ascending' ? 1 : -1;\r\n }\r\n return 0;\r\n });\r\n\r\n setSortedDailySums(newlist)\r\n }\r\n }\r\n\r\n\r\n return (\r\n (sortedDailySums &&\r\n <>\r\n \r\n \r\n \r\n \r\n S.No\r\n \r\n \r\n requestSort('name')} >\r\n Alignment\r\n\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"name\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_fuel')}>\r\n Daily Fuel (litres)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_fuel\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_CO2')}>\r\n Daily CO2 (kg)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_CO2\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_energy')}>\r\n Energy (kWh)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_energy\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_cost')}>\r\n Cost\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_cost\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n \r\n \r\n {sortedDailySums\r\n .filter(item => {\r\n //return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase()) && item.name.toLowerCase().includes(dropQuerySearch.toLowerCase())\r\n return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase()) && (searchDefaultVal).includes(item.name.toLowerCase())\r\n })\r\n .map(({ name, daily_fuel, daily_CO2, daily_energy, daily_cost }, index) => (\r\n \r\n {index + 1} \r\n {name} \r\n {daily_fuel} \r\n {daily_CO2} \r\n {daily_energy} \r\n {`${daily_cost} ${currency}`} \r\n \r\n ))\r\n }\r\n \r\n
\r\n {!!sortedDailySums && !!sortedDailySums.length && \r\n \r\n \r\n \r\n requestSort('name')} >\r\n Alignment\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"name\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n\r\n \r\n {\r\n requestSort('direction_name')\r\n }} >\r\n Direction\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"direction_name\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_fuel')} >\r\n Daily fuel (litres)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_fuel\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_CO2')} >\r\n Daily CO2 (kg)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_CO2\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_energy')} >\r\n Daily (kWh)\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_energy\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n requestSort('daily_cost')} >\r\n Daily cost\r\n {(sortConfig !== null &&\r\n (sortConfig.key === \"daily_cost\" ?\r\n (sortConfig.direction === \"ascending\" ?\r\n \r\n \r\n \r\n \r\n \r\n {sortedBothSums\r\n .filter(item => {\r\n return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase()) && (searchDefaultVal).includes(item.name.toLowerCase())\r\n })\r\n .map(({ name, direction_name, daily_fuel, daily_CO2, daily_energy, daily_cost }, i) => (\r\n \r\n {name} \r\n {direction_name} \r\n {daily_fuel} \r\n {daily_CO2} \r\n {daily_energy} \r\n {`${daily_cost} ${currency}`} \r\n \r\n ))}\r\n \r\n
\r\n {!!sortedBothSums && !!sortedBothSums.length && {alternative1Results.name} \r\n \r\n {alternative1Results.daily_CO2 - alternative2Results.daily_CO2}\r\n \r\n \r\n {alternative1Results.daily_energy -\r\n alternative2Results.daily_energy}\r\n \r\n \r\n {`${alternative1Results.daily_cost - alternative2Results.daily_cost\r\n } ${currency}`}\r\n {/* {alternative1Results.daily_cost - alternative2Results.daily_cost} */}\r\n \r\n \r\n );\r\n }\r\n if (alternative1Results && alternative2Results == null) {\r\n return (\r\n <>\r\n {alternative1Results.name} \r\n {alternative1Results.daily_fuel} \r\n {alternative1Results.daily_CO2} \r\n {alternative1Results.daily_energy} \r\n \r\n {`${alternative1Results.daily_cost} ${currency}`}\r\n {/* {alternative1Results.daily_cost} */}\r\n \r\n \r\n );\r\n } else {\r\n return \"\";\r\n }\r\n };\r\n\r\n const insertCompareAlternativeTable = () => {\r\n const comparitiveDirectionDailys = allBothDirectionsDailys.filter(\r\n (item) => item.alternative_id === compareAlternativeId\r\n );\r\n const dailyResults = comparitiveDirectionDailys.map(\r\n ({\r\n name,\r\n // alternative_id,\r\n direction_name1,\r\n // direction_name2,\r\n daily_fuel1,\r\n daily_CO21,\r\n daily_energy1,\r\n daily_cost1,\r\n daily_fuel2,\r\n daily_CO22,\r\n daily_energy2,\r\n daily_cost2,\r\n }) => {\r\n if (compareAlternativeId) {\r\n if (direction_name1 === compareAlternativeDirName) {\r\n return {\r\n name: name,\r\n alternative: 2,\r\n daily_fuel: daily_fuel1,\r\n daily_CO2: daily_CO21,\r\n daily_energy: daily_energy1,\r\n daily_cost: daily_cost1,\r\n };\r\n } else {\r\n return {\r\n name: name,\r\n alternative: 2,\r\n daily_fuel: daily_fuel2,\r\n daily_CO2: daily_CO22,\r\n daily_energy: daily_energy2,\r\n daily_cost: daily_cost2,\r\n };\r\n }\r\n } else {\r\n return null;\r\n }\r\n }\r\n );\r\n\r\n let alternative1Results = null;\r\n let alternative2Results = null;\r\n // get alternative 1 and 2\r\n\r\n if (dailyResults[0] || dailyResults[1]) {\r\n dailyResults.forEach((alternative) => {\r\n if (alternative && alternative.alternative === 1) {\r\n alternative1Results = alternative;\r\n }\r\n if (alternative && alternative.alternative === 2) {\r\n alternative2Results = alternative;\r\n }\r\n });\r\n }\r\n\r\n if (alternative1Results && alternative2Results) {\r\n return (\r\n <>\r\n {alternative1Results.name} \r\n \r\n {alternative1Results.daily_CO2 - alternative2Results.daily_CO2}\r\n \r\n \r\n {alternative1Results.daily_energy -\r\n alternative2Results.daily_energy}\r\n \r\n \r\n {`${alternative1Results.daily_cost - alternative2Results.daily_cost\r\n } ${currency}`}\r\n {/* {alternative1Results.daily_cost - alternative2Results.daily_cost} */}\r\n \r\n \r\n );\r\n }\r\n if (alternative2Results && alternative1Results == null) {\r\n return (\r\n <>\r\n {alternative2Results.name} \r\n {alternative2Results.daily_fuel} \r\n {alternative2Results.daily_CO2} \r\n {alternative2Results.daily_energy} \r\n \r\n {`${alternative2Results.daily_cost} ${currency}`}\r\n {/* {alternative1Results.daily_cost} */}\r\n \r\n \r\n );\r\n } else {\r\n return \"\";\r\n }\r\n };\r\n\r\n // function valuetext(value) {\r\n // return `${value}°C`;\r\n // }\r\n\r\n // const handleLengthChange = (event, newValue) => {\r\n // //setAlternativeChainageMin(newValue[0]);\r\n // setDrawCharts(false);\r\n // setLengthSliderRange(newValue);\r\n // setDrawCharts(true);\r\n // };\r\n\r\n // const handleFCHeavyChange = (event, newValue) => {\r\n // setDrawCharts(false);\r\n // setFcHeavySliderRange(Math.round(newValue));\r\n // setDrawCharts(true);\r\n // };\r\n\r\n // const handleFilter = (event) => {\r\n // // const filtered = filterByBoth(baseAlternative);\r\n // // setFilteredBaseAlternative(filtered);\r\n // setDrawCharts(true);\r\n // };\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 200,\r\n },\r\n selectEmpty: {\r\n marginTop: theme.spacing(2),\r\n },\r\n fontSelection: {\r\n fontSize: \"20px\",\r\n fontWeight: \"bold\",\r\n },\r\n }));\r\n\r\n const handleChangeAcc = () => {\r\n setAccordinOpen(!accordinOpen);\r\n };\r\n\r\n const classes = useStyles();\r\n\r\n const [lengthMin, setLengthMin] = useState(null);\r\n const [lengthMax, setLengthMax] = useState(null);\r\n\r\n const [fcMin, setFcMin] = useState(null);\r\n const [fcMax, setFcMax] = useState(null);\r\n\r\n // useEffect(() => {\r\n\r\n // if (baseAlternative) {\r\n // setFilteredCompareAlternative(baseAlternative)\r\n // }\r\n\r\n // }, [])\r\n\r\n // useEffect(() => {\r\n // reset();\r\n // }, [globalProjectNumber]);\r\n\r\n useEffect(() => {\r\n if (props.allMapAlternatives) {\r\n setLocalAllMapAlternatives(props.allMapAlternatives);\r\n setLocalBothDirectionsDailys(props.bothDirectionsDailys);\r\n }\r\n }, [globalProjectNumber, props]);\r\n\r\n useEffect(() => {\r\n //console.log('filter base:', baseAlternative)\r\n //console.log('filter compare:', compareAlternative)\r\n\r\n if (baseAlternative) {\r\n let filtered = baseAlternative;\r\n if (\r\n lengthSliderRange[0] !== lengthMin ||\r\n lengthSliderRange[1] !== lengthMax ||\r\n fcHeavySliderRange[0] !== fcMin ||\r\n fcHeavySliderRange[1] !== fcMax\r\n ) {\r\n filtered = filterByBoth(baseAlternative);\r\n }\r\n //console.log('base_alternative_after_filtering:', filtered)\r\n setFilteredBaseAlternative(filtered);\r\n }\r\n if (compareAlternative) {\r\n let filtered = compareAlternative;\r\n if (\r\n lengthSliderRange[0] !== lengthMin ||\r\n lengthSliderRange[1] !== lengthMax ||\r\n fcHeavySliderRange[0] !== fcMin ||\r\n fcHeavySliderRange[1] !== fcMax\r\n ) {\r\n filtered = filterByBoth(compareAlternative);\r\n }\r\n\r\n setFilteredCompareAlternative(filtered);\r\n }\r\n\r\n setLengthMin(lengthSliderRange[0]);\r\n setLengthMax(lengthSliderRange[1]);\r\n setFcMin(fcHeavySliderRange[0]);\r\n setFcMax(fcHeavySliderRange[1]);\r\n\r\n // const filteredAlternative = filterByLength(baseAlternative)\r\n\r\n // eslint-disable-next-line\r\n }, [fcHeavySliderRange, lengthSliderRange]);\r\n\r\n useEffect(() => {\r\n if (alternatives) {\r\n handleFirstAlternativeClick(\r\n alternatives[0].directions[props.selected_direction],\r\n alternatives[0].alternative_id,\r\n alternatives[0].directions[props.selected_direction].direction\r\n );\r\n //handleFirstAlternativeClick(alternatives[0].directions[1], alternatives[0].alternative_id, alternatives[0].directions[1].direction)\r\n }\r\n /*if (baseAlternativeId !== alternatives[0].alternative_id && baseAlternativeDirName === alternatives[0].directions[0].direction) {\r\n handleSecondAlternativeClick(alternatives[0].directions[0], alternatives[0].alternative_id, alternatives[0].directions[0].direction)\r\n handleSecondAlternativeClick(alternatives[0].directions[1], alternatives[0].alternative_id, alternatives[0].directions[1].direction)\r\n }*/\r\n\r\n // eslint-disable-next-line\r\n }, [alternatives]);\r\n\r\n return (\r\n baseAlternative &&\r\n localBothDirectionsDailys && (\r\n \r\n \r\n \r\n \r\n \r\n {localAllMapAlternatives.length !== null &&\r\n localBothDirectionsDailys[0] !== undefined ? (\r\n
\r\n {/* Alignment Comparison */}\r\n \r\n {localBothDirectionsDailys[0] !== undefined &&\r\n localAllMapAlternatives\r\n .filter((item) => {\r\n return (\r\n item.alternative_id !==\r\n localBothDirectionsDailys[0].alternative_id\r\n );\r\n })\r\n .map((a, index) => {\r\n return (\r\n \r\n Alignment: {a.name}{\" \"}\r\n {\r\n a.directions[props.selected_direction]\r\n .direction\r\n }\r\n \r\n );\r\n })}\r\n Reset \r\n \r\n \r\n Alignment Comparison\r\n \r\n \r\n ) : (\r\n \"\"\r\n )}\r\n {/*
*/}\r\n {/*
\r\n */}\r\n {/*
*/}\r\n {/* {baseAlternative && (\r\n \r\n <>\r\n \r\n Alternative length start - end\r\n \r\n \r\n Alternatives fuel consumption heavy min-max\r\n \r\n \r\n )} */}\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Alignment Details - {alternatives[0].name}{\" \"}\r\n {\r\n alternatives[0].directions[\r\n props.selected_direction\r\n ].direction\r\n }\r\n \r\n \r\n \r\n\r\n \r\n \r\n File Name \r\n Fuel [litres] \r\n CO2 [kg] \r\n Energy [kWh] \r\n Cost \r\n \r\n \r\n \r\n \r\n {bothDirectionsDailys &&\r\n handleFunctionOutput(bothDirectionsDailys)}\r\n \r\n {!!compareAlternative && {insertCompareAlternativeTable()} }\r\n \r\n
\r\n )}\r\n \r\n \r\n {!accordinOpen ? (\r\n
\r\n \r\n \r\n \r\n {accordinOpen ?\r\n <>\r\n \r\n
\r\n
\r\n \r\n {drawCharts && filteredBaseAlternative && (\r\n <>\r\n \r\n Average curvature and speed\r\n
\r\n \r\n \r\n\r\n
\r\n {!drawCharts && (\r\n
Filtering average curvature and speed...
\r\n )}\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n {drawCharts && filteredBaseAlternative && (\r\n <>\r\n \r\n Alternatives map\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n\r\n
{!drawCharts &&
Filtering map...
}
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {drawCharts && filteredBaseAlternative && (\r\n <>\r\n \r\n Energy consumption along road l/100km, average\r\n over 20 meter sections\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n {!drawCharts && (\r\n
Filtering Energy consumption along road...
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n \r\n {drawCharts && filteredBaseAlternative && (\r\n <>\r\n \r\n Ground level along road\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n {!drawCharts && (\r\n
Filtering Ground level along road...
\r\n )}\r\n
\r\n
\r\n
\r\n \r\n \r\n )\r\n );\r\n};\r\n\r\nexport default MapsDir1;\r\n","import React, { Fragment } from 'react';\r\nimport MapsDir1 from \"./Maps\"\r\n\r\nconst InitiateMaps = (props) => {\r\n\r\n const convertToLowerCase = (initialList, actualList) => {\r\n const randomList = [\"Test\"]\r\n if (initialList) {\r\n initialList.map((item) => (\r\n randomList.push(item.toLowerCase())\r\n ))\r\n }\r\n else {\r\n actualList.map((item) => {\r\n randomList.push(item.name.toLowerCase())\r\n return item\r\n })\r\n }\r\n return randomList\r\n }\r\n\r\n //const alternatives = props.alternatives\r\n const bothDirectionsDailys = props.bothDirectionsDailys\r\n const mapAlternatives = props.mapAlternatives\r\n\r\n const dataQuerySearch = props.dataQuerySearch\r\n const searchDefaultValue = convertToLowerCase(props.searchDefaultValue, mapAlternatives)\r\n\r\n\r\n\r\n return (\r\n\r\n (mapAlternatives && mapAlternatives.filter(item => {\r\n //return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase()) && item.name.toLowerCase().includes(dropQuerySearch.toLowerCase())\r\n return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase()) && (searchDefaultValue).includes(item.name.toLowerCase())\r\n })\r\n .map((item, idx) => (\r\n //Need to have both directions individually here\r\n \r\n dir.name === item.name)}\r\n mapAlternatives={mapAlternatives.filter(mapA => mapA.name === item.name)}\r\n allMapAlternatives={mapAlternatives}\r\n allBothDirectionsDailys={bothDirectionsDailys}\r\n selected_direction={0} />\r\n dir.name === item.name)}\r\n mapAlternatives={mapAlternatives.filter(mapA => mapA.name === item.name)}\r\n allMapAlternatives={mapAlternatives}\r\n allBothDirectionsDailys={bothDirectionsDailys}\r\n selected_direction={1} />\r\n \r\n\r\n ))\r\n )\r\n );\r\n}\r\n\r\nexport default InitiateMaps;","import React, { useState, useEffect, useContext } from 'react'\r\nimport DailySums from './dailysums/DailySums';\r\nimport axios from 'axios';\r\n// import AlternativeTableRow from './dailysums/AlternativeTableRow';\r\n// import BothDirectionCard from './bothdirection/BothDirectionCard';\r\nimport BothDirectionTable from './bothdirection/BothDirectionTable';\r\n// import Maps from './maps/Maps';\r\nimport { useForm } from \"react-hook-form\";\r\nimport Chip from '@material-ui/core/Chip';\r\nimport { requestBody, requestBody2 } from '../../../utils/aiRequestBodyUtils';\r\nimport {\r\n Container,\r\n Row,\r\n // Col,\r\n Tab,\r\n // Button,\r\n // Spinner,\r\n Tabs,\r\n Dropdown,\r\n DropdownButton,\r\n FormControl,\r\n InputGroup\r\n} from 'react-bootstrap';\r\nimport { useSelector } from 'react-redux';\r\nimport _ from 'lodash';\r\nimport './Comparison.css';\r\nimport FuelSaveGlobalContext from '../../../context/FuelSaveGlobalContext';\r\nimport InitiateMaps from './maps/InitiationMap';\r\nimport SpinLoader from '../../common/SpinLoader';\r\nimport { flashErrMsg, presumptionObj } from '../../../constant/helpers';\r\nimport './Comparison.css'\r\n\r\nconst dummyData = [{ \"daily_fuel\": 10235.77191787462, \"daily_CO2\": 28282.744636709584, \"daily_energy\": 313084.9598411531, \"daily_cost\": 163772.3506859939 }]\r\n\r\n\r\nconst DailyComparison = () => {\r\n\r\n const {\r\n // mapCoordinateId, setMapCoordinateId,\r\n // mapCentreIdData, setMapCentreIdData,\r\n // chainage, setChainage,\r\n // fcCar, setFcCar,\r\n // fcTrucks, setFcTrucks,\r\n // hilliness, setHilliness,\r\n // speedProfileCars, setSpeedProfileCars,\r\n // speedProfileTrucks, setSpeedProfileTrucks,\r\n // zlevel, setZlevel,\r\n // curvature, setCurvature,\r\n // segment, setSegment,\r\n // globalBrandCrumb, \r\n setGlobalBrandCrumb,\r\n } = useContext(FuelSaveGlobalContext);\r\n const { carConfig, truckConfig } = useSelector(state => state.global)\r\n const { alignments, isProcessing } = useSelector(state => state.alignments)\r\n const { presumptions } = useSelector(state => state.presumptions)\r\n\r\n const [alternativeDailySums, setAlternativeDailySums] = useState(null);\r\n const [bothDirectionsDailys, setBothDirectionsDailys] = useState(null);\r\n const [mapAlternatives, setMapAlternatives] = useState(null);\r\n // const [dailyFuel, setDailyFuel] = useState(null);\r\n // const [dailyCo2, setDailyCo2] = useState(null);\r\n // const [dailyEnergy, setDailyEnergy] = useState(null);\r\n // const [dailyCost, setDailyCost] = useState(null);\r\n // const [cardViewOn, setCardViewOn] = useState(true);\r\n // const [dropQuerySearch, setDropQuerySearch] = useState('');\r\n const [dataQuerySearch, setDataQuerySearch] = useState('');\r\n const [searchDefaultValue, setSearchDefaultValue] = useState('');\r\n const [key, setKey] = useState('dailySum');\r\n const [localLoading, setlocalLoading] = useState(false)\r\n\r\n // const toggleView = () => {\r\n // setCardViewOn(!cardViewOn)\r\n // }\r\n const { register, watch } = useForm();\r\n\r\n const getDailyData = async (direction1Name, direction2Name, startYearData, endYearData, segmentsDir1, segmentsDir2, segmentsDataDir1, segmentsDataDir2, presumptionsData) => {\r\n\r\n const presumptions = presumptionObj(presumptionsData[0])\r\n\r\n const startYear = startYearData ? startYearData : 2020\r\n const endYear = endYearData ? endYearData : 2041\r\n // const endYear = startYear + 20 //C wants the end year uneffected!\r\n\r\n const requestBodyDir1 = {\r\n \"return_option\": 1,\r\n \"start_year\": startYear,\r\n \"end_year\": endYear,\r\n \"fuel_distribution_cars\": carConfig,\r\n \"fuel_distribution_trucks\": truckConfig,\r\n \"sensitivity_param_factors\": {\r\n \"speed\": 1,\r\n \"fuelprice\": 1,\r\n \"emission\": 1,\r\n \"AADTheavy\": 1\r\n },\r\n \"presumptions\": presumptions,\r\n 'segments': segmentsDir1,\r\n 'segments_data': segmentsDataDir1\r\n }\r\n\r\n const requestBodyDir2 = {\r\n \"return_option\": 1,\r\n \"start_year\": startYear,\r\n \"end_year\": endYear,\r\n \"fuel_distribution_cars\": carConfig,\r\n \"fuel_distribution_trucks\": truckConfig,\r\n \"sensitivity_param_factors\": {\r\n \"speed\": 1,\r\n \"fuelprice\": 1,\r\n \"emission\": 1,\r\n \"AADTheavy\": 1\r\n },\r\n \"presumptions\": presumptions,\r\n 'segments': segmentsDir2,\r\n 'segments_data': segmentsDataDir2\r\n }\r\n\r\n const requestBodyDir1Option1 = {\r\n \"return_option\": 2,\r\n \"start_year\": startYear,\r\n \"end_year\": endYear,\r\n \"fuel_distribution_cars\": carConfig,\r\n \"fuel_distribution_trucks\": truckConfig,\r\n \"sensitivity_param_factors\": {\r\n \"speed\": 1,\r\n \"fuelprice\": 1,\r\n \"emission\": 1,\r\n \"AADTheavy\": 1\r\n },\r\n \"presumptions\": presumptions,\r\n 'segments': segmentsDir1,\r\n 'segments_data': segmentsDataDir1\r\n }\r\n\r\n const requestBodyDir2Option2 = {\r\n \"return_option\": 2,\r\n \"start_year\": startYear,\r\n \"end_year\": endYear,\r\n \"fuel_distribution_cars\": carConfig,\r\n \"fuel_distribution_trucks\": truckConfig,\r\n \"sensitivity_param_factors\": {\r\n \"speed\": 1,\r\n \"fuelprice\": 1,\r\n \"emission\": 1,\r\n \"AADTheavy\": 1\r\n },\r\n \"presumptions\": presumptions,\r\n 'segments': segmentsDir2,\r\n 'segments_data': segmentsDataDir2\r\n }\r\n\r\n const config = {\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n }\r\n };\r\n\r\n const AI_API_KEY = process.env.REACT_APP_AI_FUNCTION_API_KEY\r\n\r\n const urlToken = process.env.REACT_APP_AI_FUNCTION_URL + '/api/HttpTrigger1?code=' + AI_API_KEY;\r\n\r\n try {\r\n setlocalLoading(true)\r\n const [responseDir1, responseDir2, responseDir1Option2, responseDir2Option2] = await Promise.all([\r\n axios.post(urlToken,\r\n endYear ? requestBodyDir1 : requestBody,\r\n config\r\n ),\r\n axios.post(urlToken,\r\n endYear ? requestBodyDir2 : requestBody,\r\n config\r\n ),\r\n axios.post(urlToken,\r\n endYear ? requestBodyDir1Option1 : requestBody2,\r\n config\r\n ),\r\n axios.post(urlToken,\r\n endYear ? requestBodyDir2Option2 : requestBody2,\r\n config\r\n )\r\n ])\r\n\r\n const sumDailyFuel = Math.round(responseDir1.data.daily_fuel + responseDir2.data.daily_fuel)\r\n const sumDailyCO2 = Math.round(responseDir1.data.daily_CO2 + responseDir2.data.daily_CO2)\r\n const sumDailyEnergy = Math.round(responseDir1.data.daily_energy + responseDir2.data.daily_energy)\r\n\r\n const sumDailyCost = Math.round(responseDir1.data.daily_cost + responseDir2.data.daily_cost)\r\n\r\n // setDailyFuel(sumDailyFuel)\r\n // setDailyCo2(sumDailyCO2)\r\n // setDailyEnergy(sumDailyEnergy)\r\n // setDailyCost(sumDailyCost)\r\n\r\n setlocalLoading(false)\r\n return {\r\n 'daily_CO2': sumDailyCO2,\r\n 'daily_cost': sumDailyCost,\r\n 'daily_energy': sumDailyEnergy,\r\n 'daily_fuel': sumDailyFuel,\r\n 'direction_name1': direction1Name,\r\n 'direction_name2': direction2Name,\r\n 'daily_fuel1': Math.round(responseDir1.data.daily_fuel),\r\n 'daily_CO21': Math.round(responseDir1.data.daily_CO2),\r\n 'daily_energy1': Math.round(responseDir1.data.daily_energy),\r\n 'daily_cost1': Math.round(responseDir1.data.daily_cost),\r\n 'daily_fuel2': Math.round(responseDir2.data.daily_fuel),\r\n 'daily_CO22': Math.round(responseDir2.data.daily_CO2),\r\n 'daily_energy2': Math.round(responseDir2.data.daily_energy),\r\n 'daily_cost2': Math.round(responseDir2.data.daily_cost),\r\n 'segment_results_dir1': responseDir1Option2.data.segment_results,\r\n 'segment_results_dir2': responseDir2Option2.data.segment_results\r\n }\r\n }\r\n catch (err) {\r\n // throw new Error('Unable to get a response.')\r\n // setDailyFuel(null)\r\n // setDailyCo2(null)\r\n // setDailyEnergy(null)\r\n // setDailyCost(null)\r\n flashErrMsg(err)\r\n setlocalLoading(false)\r\n return null\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n\r\n async function setData() {\r\n setlocalLoading(true)\r\n if (!alignments || !presumptions) {\r\n return\r\n }\r\n\r\n const alternativeDailySums = []\r\n const bothDirectionsDailys = []\r\n const mapAlternatives = []\r\n\r\n // use for loop to keep the order\r\n for (let index = 0; index < alignments.length; index++) {\r\n const alternative = alignments[index]\r\n\r\n const dailyData = await getDailyData(\r\n alternative.directions[0].direction,\r\n alternative.directions[1].direction,\r\n alternative.start_year,\r\n alternative.end_year,\r\n alternative.directions[0].segments,\r\n alternative.directions[1].segments,\r\n alternative.directions[0].segments_data,\r\n alternative.directions[1].segments_data,\r\n presumptions);\r\n\r\n if (!dailyData) {\r\n return false\r\n }\r\n\r\n alternativeDailySums.push({\r\n 'name': alternative.name,\r\n 'alternative_id': alternative.alternative_id,\r\n 'daily_fuel': dailyData.daily_fuel,\r\n 'daily_CO2': dailyData.daily_CO2,\r\n 'daily_energy': dailyData.daily_energy,\r\n 'daily_cost': dailyData.daily_cost\r\n })\r\n\r\n bothDirectionsDailys.push({\r\n 'name': alternative.name,\r\n 'alternative_id': alternative.alternative_id,\r\n 'direction_name1': dailyData.direction_name1,\r\n 'direction_name2': dailyData.direction_name2,\r\n 'daily_fuel1': dailyData.daily_fuel1,\r\n 'daily_CO21': dailyData.daily_CO21,\r\n 'daily_energy1': dailyData.daily_energy1,\r\n 'daily_cost1': dailyData.daily_cost1,\r\n 'daily_fuel2': dailyData.daily_fuel2,\r\n 'daily_CO22': dailyData.daily_CO22,\r\n 'daily_energy2': dailyData.daily_energy2,\r\n 'daily_cost2': dailyData.daily_cost2\r\n })\r\n\r\n // loop segments data\r\n\r\n const segments_data_dir1 = alternative.directions[0].segments_data\r\n const fc_data1 = dailyData.segment_results_dir1\r\n const segmentsDataDir1 = segments_data_dir1.map(segment => {\r\n\r\n const segmentId = segment.segment_data_id;\r\n const object = _.find(fc_data1, (elem) => {\r\n return elem.segment_data_id.toString() === segmentId ? elem : null;\r\n });\r\n\r\n return {\r\n 'a_intersection': segment.a_intersection,\r\n 'geom': segment.geom,\r\n 'geom_order_id': segment.geom_order_id,\r\n 'radius': segment.radius,\r\n 'segment_data_id': segment.segment_data_id,\r\n 'segment_order_no': segment.segment_order_no,\r\n 'zlevel': segment.zlevel,\r\n 'chainage': segment ? segment.chainage : null,\r\n 'curvature': object ? object.curvature : null,\r\n 'fuelconsumption_car': object ? object.fuelconsumption_car : null,\r\n 'fuelconsumption_trucks': object ? object.fuelconsumption_trucks : null,\r\n 'hilliness': object ? object.hilliness : null,\r\n 'speedprofile_car': object ? object.speedprofile_car : null,\r\n 'speedprofile_trucks': object ? object.speedprofile_trucks : null\r\n }\r\n })\r\n const segments_data_dir2 = alternative.directions[1].segments_data\r\n const fc_data2 = dailyData.segment_results_dir2\r\n const segmentsDataDir2 = segments_data_dir2.map(segment => {\r\n\r\n const segmentId = segment.segment_data_id;\r\n const object = _.find(fc_data2, (elem) => {\r\n return elem.segment_data_id.toString() === segmentId ? elem : null;\r\n });\r\n\r\n return {\r\n 'a_intersection': segment.a_intersection,\r\n // HINT: it's duplicate\r\n // 'chainage': segment.chainage,\r\n 'geom': segment.geom,\r\n 'geom_order_id': segment.geom_order_id,\r\n 'radius': segment.radius,\r\n 'segment_data_id': segment.segment_data_id,\r\n 'segment_order_no': segment.segment_order_no,\r\n 'zlevel': segment.zlevel,\r\n 'chainage': object ? object.chainage : null,\r\n 'curvature': object ? object.curvature : null,\r\n 'fuelconsumption_car': object ? object.fuelconsumption_car : null,\r\n 'fuelconsumption_trucks': object ? object.fuelconsumption_trucks : null,\r\n 'hilliness': object ? object.hilliness : null,\r\n 'speedprofile_car': object ? object.speedprofile_car : null,\r\n 'speedprofile_trucks': object ? object.speedprofile_trucks : null\r\n }\r\n })\r\n\r\n mapAlternatives.push({\r\n 'name': alternative.name,\r\n 'alternative_id': alternative.alternative_id,\r\n 'start_year': alternative.start_year,\r\n 'end_year': alternative.end_year,\r\n 'directions': [\r\n {\r\n 'directions_id': alternative.directions[0].directions_id,\r\n 'direction': alternative.directions[0].direction,\r\n 'segments': alternative.directions[0].segments,\r\n 'segments_data': segmentsDataDir1,\r\n 'fc_data': dailyData.segment_results_dir1\r\n }\r\n ,\r\n {\r\n 'directions_id': alternative.directions[1].directions_id,\r\n 'direction': alternative.directions[1].direction,\r\n 'segments': alternative.directions[1].segments,\r\n 'segments_data': segmentsDataDir2,\r\n 'fc_data': dailyData.segment_results_dir2\r\n }\r\n ]\r\n\r\n })\r\n }\r\n\r\n setMapAlternatives(mapAlternatives)\r\n setAlternativeDailySums(alternativeDailySums)\r\n setBothDirectionsDailys(bothDirectionsDailys)\r\n setlocalLoading(false)\r\n }\r\n setData();\r\n\r\n // eslint-disable-next-line\r\n }, [alignments]);\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Comparison\")\r\n\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n\r\n /*useEffect(() => {\r\n const dataQuerySearch_Maps = \r\n }, [])*/\r\n\r\n\r\n /*return (\r\n <>\r\n \r\n \r\n {cardViewOn ? 'Table view' : 'Card view'} \r\n \r\n
\r\n\r\n {\r\n cardViewOn ?\r\n\r\n (alternativeDailySums ?\r\n Loading...
\r\n \r\n Loading... \r\n \r\n \r\n\r\n )\r\n\r\n :\r\n (alternativeDailySums ?\r\n Loading...
\r\n \r\n Loading... \r\n \r\n \r\n )\r\n }\r\n\r\n \r\n \r\n \r\n {cardViewOn ? 'Table view' : 'Card view'} \r\n \r\n
\r\n \r\n {cardViewOn ?\r\n (bothDirectionsDailys ?\r\n bothDirectionsDailys.map(({ alternative_id, direction_name1, direction_name2, daily_fuel1, daily_CO21, daily_energy1, daily_cost1, daily_fuel2, daily_CO22, daily_energy2, daily_cost2 }) => (\r\n Loading...
\r\n \r\n Loading... \r\n \r\n \r\n\r\n )\r\n :\r\n (bothDirectionsDailys ?\r\n Loading...
\r\n \r\n Loading... \r\n \r\n \r\n )\r\n }\r\n
\r\n \r\n \r\n {alignments && bothDirectionsDailys && mapAlternatives &&\r\n \r\n \r\n\r\n\r\n )*/\r\n\r\n const handleDropSearch = (e, data) => {\r\n // const searchdata = watch()\r\n // setDropQuerySearch(data.target.innerText)\r\n //setDataQuerySearch(data.target.innerText)\r\n //Todo: You can make it a list later\r\n if (searchDefaultValue) {\r\n if (!searchDefaultValue.includes(data.target.innerText))\r\n setSearchDefaultValue([...searchDefaultValue, data.target.innerText])\r\n }\r\n else {\r\n setSearchDefaultValue([data.target.innerText])\r\n }\r\n }\r\n\r\n\r\n const handleDataSearch = (e, data) => {\r\n const searchdata = watch()\r\n setDataQuerySearch(searchdata.DateSearch)\r\n }\r\n\r\n const handleClear = (deletedItem) => {\r\n setDataQuerySearch(\"\")\r\n //setDropQuerySearch(\"\")\r\n const newList = searchDefaultValue.filter((item) => item !== deletedItem)\r\n if (newList.length === 0) {\r\n setSearchDefaultValue(\"\")\r\n }\r\n else {\r\n setSearchDefaultValue([...newList])\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {alternativeDailySums && alternativeDailySums\r\n .filter(item => {\r\n return item.name.toLowerCase().includes(dataQuerySearch.toLowerCase())\r\n })\r\n .map((alternative_id, index) =>\r\n {alternative_id.name} \r\n )}\r\n \r\n \r\n
\r\n {(searchDefaultValue.length) ?\r\n <>\r\n \r\n \r\n {searchDefaultValue.map((item, i) =>\r\n handleClear(item)} />)}\r\n
\r\n
\r\n \r\n {(!!localLoading || !!isProcessing) && setKey(k)}>\r\n \r\n {alternativeDailySums && \r\n \r\n {bothDirectionsDailys && \r\n \r\n {alignments && bothDirectionsDailys && mapAlternatives &&\r\n\r\n //bothDirectionsDailys.filter()\r\n \r\n \r\n \r\n )\r\n\r\n}\r\n\r\nexport default DailyComparison;","import React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { Map, View } from \"ol\";\r\nimport * as proj from \"ol/proj\";\r\nimport TileLayer from \"ol/layer/Tile\";\r\nimport XYZ from \"ol/source/XYZ\";\r\nimport Select from \"ol/interaction/Select\";\r\nimport Overlay from \"ol/Overlay.js\";\r\nimport {\r\n getCentreCoord,\r\n createSectionalPointLayer,\r\n createSectionalComparePointLayer,\r\n} from \"../../../utils/maputils\";\r\nimport \"./map.css\";\r\nimport axios from 'axios'\r\n\r\nimport FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\";\r\n\r\nfunction SectionalAnalysisMap(props) {\r\n const directions = props.baseAlternative;\r\n // const comparedirections = props.compareAlternative;\r\n\r\n const {\r\n // mapCoordinateId,\r\n // setMapCoordinateId,\r\n // mapCentreIdData,\r\n // setMapCentreIdData,\r\n // previousMapCentreIdData,\r\n // setPreviousMapCentreIdData,\r\n // chainage,\r\n setChainage,\r\n // fcCar,\r\n setFcCar,\r\n // fcTrucks,\r\n setFcTrucks,\r\n // hilliness,\r\n setHilliness,\r\n // speedProfileCars,\r\n setSpeedProfileCars,\r\n // speedProfileTrucks,\r\n setSpeedProfileTrucks,\r\n // zlevel,\r\n setZlevel,\r\n // curvature,\r\n setCurvature,\r\n // segment,\r\n setSegment,\r\n apiAccessToken\r\n // editSectionalAnalysisChart,\r\n // setEditSectionalAnalysisChart,\r\n } = useContext(FuelSaveGlobalContext);\r\n\r\n const segments = directions && directions.segments_data ? directions.segments : null;\r\n const segments_data = directions.segments_data ? directions.segments_data : null;\r\n const centreCoord = segments_data && segments_data.length > 0 ? getCentreCoord(directions) : [0, 0];\r\n const posCentre = proj.fromLonLat(segments_data && segments_data.length > 0 ? centreCoord.coordinates : centreCoord);\r\n\r\n const overlayRef = useRef(null);\r\n const [map, setMap] = useState();\r\n const [zoom, setZoom] = useState(11);\r\n const mapElement = useRef();\r\n\r\n function customLoader(tile, src) {\r\n\r\n axios({\r\n method: 'get',\r\n url: src,\r\n headers:{\r\n 'Authorization': `Bearer ${apiAccessToken.accessToken}`\r\n }\r\n \r\n }).then((response)=>{\r\n tile.getImage().src = response.data;\r\n })\r\n\r\n }\r\n\r\n useEffect(() => {\r\n let urlVal = process.env.REACT_APP_API_URL\r\n urlVal = urlVal.replace('/graphql', '')\r\n\r\n const XYZSource = new XYZ({\r\n url: `${urlVal}/apimaptiler/?url=api.maptiler.com/maps/voyager/{z}/{x}/{y}.png`\r\n })\r\n\t\tXYZSource.setTileLoadFunction(customLoader);\r\n\r\n\t\tconst bgLayer = new TileLayer({\r\n\t\t\tsource: XYZSource,\r\n\t\t});\r\n\r\n const initialMap = new Map({\r\n target: mapElement.current,\r\n layers: [bgLayer],\r\n view: new View({\r\n center: posCentre,\r\n zoom: zoom,\r\n }),\r\n pixelRatio: 1.0\r\n });\r\n\r\n let select = null;\r\n let selectSingleClick = new Select();\r\n\r\n const overlay = new Overlay({\r\n position: posCentre,\r\n element: overlayRef.current,\r\n positioning: \"center-center\",\r\n stopEvent: false,\r\n });\r\n\r\n initialMap.on(\"singleclick\", function (evt) {\r\n // props.setMapRef(mapElement)\r\n let coordinate = evt.coordinate;\r\n overlay.setPosition(coordinate);\r\n props.settingCoordinate(Math.round(coordinate[0]), Math.round(coordinate[1]))\r\n });\r\n\r\n if (select !== null) {\r\n initialMap.removeInteraction(select);\r\n }\r\n select = selectSingleClick;\r\n\r\n if (select !== null) {\r\n initialMap.addInteraction(select);\r\n select.on(\"select\", function (e) {\r\n if (e.selected[0]) {\r\n //setMapCoordinateId(e.selected[0].values_.geom_order_id);\r\n props.handleStateChange('localMapCoordinateId', e.selected[0].values_.geom_order_id)\r\n setChainage(e.selected[0].values_.chainage);\r\n setFcCar(e.selected[0].values_.fuelconsumption_car);\r\n setFcTrucks(e.selected[0].values_.fuelconsumption_trucks);\r\n setHilliness(e.selected[0].values_.hilliness);\r\n setSpeedProfileCars(e.selected[0].values_.speedprofile_car);\r\n setSpeedProfileTrucks(e.selected[0].values_.speedprofile_trucks);\r\n setZlevel(e.selected[0].values_.zlevel);\r\n setCurvature(null);\r\n setSegment(e.selected[0].values_.segment_order_no);\r\n } else {\r\n //setMapCoordinateId(null);\r\n props.handleStateChange('localMapCoordinateId', null)\r\n setChainage(null);\r\n setFcCar(null);\r\n setFcTrucks(null);\r\n setHilliness(null);\r\n setSpeedProfileCars(null);\r\n setSpeedProfileTrucks(null);\r\n setZlevel(null);\r\n setCurvature(null);\r\n setSegment(null);\r\n }\r\n });\r\n }\r\n\r\n initialMap.on(\"moveend\", () => {\r\n setZoom(initialMap.getView().getZoom());\r\n });\r\n\r\n initialMap.on(\"zoomend\", function () {\r\n setZoom(initialMap.getView().getZoom());\r\n });\r\n\r\n let layersToRemove = [];\r\n\r\n initialMap.getLayers().forEach(function (layer) {\r\n if (\r\n layer.get(\"name\") !== undefined &&\r\n layer.get(\"name\").includes(\"pointlayer\")\r\n ) {\r\n layersToRemove.push(layer);\r\n }\r\n });\r\n\r\n let len = layersToRemove.length;\r\n for (let i = 0; i < len; i++) {\r\n initialMap.removeLayer(layersToRemove[i]);\r\n }\r\n\r\n\r\n const mapLayer =\r\n segments_data.length != null\r\n ? createSectionalPointLayer(segments_data, segments, zoom)\r\n : null;\r\n\r\n if (mapLayer) {\r\n initialMap.addLayer(mapLayer);\r\n }\r\n\r\n setMap(initialMap);\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (map) {\r\n const directions = props.baseAlternative;\r\n const segments = directions && directions.segments_data ? directions.segments : null;\r\n const segments_data = directions.segments_data ? directions.segments_data : null;\r\n const centreCoord = segments_data && segments_data.length > 0 ? getCentreCoord(directions) : [0, 0];\r\n const posCentre = proj.fromLonLat(segments_data && segments_data.length > 0 ? centreCoord.coordinates : centreCoord);\r\n let layersToRemove = [];\r\n map.getLayers().forEach(function (layer) {\r\n if (\r\n layer.get(\"name\") !== undefined &&\r\n layer.get(\"name\").includes(\"pointlayer\")\r\n ) {\r\n layersToRemove.push(layer);\r\n }\r\n });\r\n\r\n let len = layersToRemove.length;\r\n for (let i = 0; i < len; i++) {\r\n map.removeLayer(layersToRemove[i]);\r\n }\r\n\r\n const mapLayer =\r\n segments_data.length != null\r\n ? createSectionalPointLayer(segments_data, segments, zoom)\r\n : null;\r\n\r\n if (mapLayer) {\r\n map.addLayer(mapLayer);\r\n }\r\n map.getView().setCenter(posCentre);\r\n }\r\n // eslint-disable-next-line\r\n }, [props.baseAlternative])\r\n\r\n useEffect(() => {\r\n\r\n if (map) {\r\n let layersToRemove = [];\r\n map.getLayers().forEach(function (layer) {\r\n if (\r\n layer.get(\"name\") !== undefined &&\r\n layer.get(\"name\").includes(\"pointlayer\")\r\n ) {\r\n layersToRemove.push(layer);\r\n }\r\n });\r\n\r\n let len = layersToRemove.length;\r\n for (let i = 0; i < len; i++) {\r\n map.removeLayer(layersToRemove[i]);\r\n }\r\n\r\n\r\n const mapLayer =\r\n segments_data.length != null\r\n ? createSectionalPointLayer(segments_data, segments, zoom)\r\n : null;\r\n\r\n if (mapLayer) {\r\n map.addLayer(mapLayer);\r\n }\r\n if (props.localPreviousMapCentreIdData && props.localPreviousMapCentreIdData[0] && props.localPreviousMapCentreIdData[1]) {\r\n const mapCompareLayer =\r\n segments_data.length != null\r\n ? createSectionalComparePointLayer(\r\n segments_data,\r\n segments,\r\n zoom,\r\n props.localPreviousMapCentreIdData[0],\r\n props.localPreviousMapCentreIdData[1]\r\n )\r\n : null;\r\n if (mapCompareLayer) {\r\n map.addLayer(mapCompareLayer);\r\n }\r\n }\r\n\r\n // zoom to map if chart is clicked\r\n if (props.localPreviousMapCentreIdData && props.localPreviousMapCentreIdData[0]) {\r\n\r\n const mapCentreIdData = props.localPreviousMapCentreIdData[0];\r\n\r\n //setMapCentreIdData(null);\r\n props.handleStateChange('localMapCentreIdData', null)\r\n\r\n /*setMapCoordinateId(\r\n mapCentreIdData ? mapCentreIdData.geom_order_id : null\r\n );*/\r\n\r\n props.handleStateChange('localMapCoordinateId', mapCentreIdData ? mapCentreIdData.geom_order_id : null)\r\n\r\n setChainage(mapCentreIdData ? mapCentreIdData.chainage : null);\r\n setFcCar(mapCentreIdData ? mapCentreIdData.fuelconsumption_car : null);\r\n setFcTrucks(\r\n mapCentreIdData ? mapCentreIdData.fuelconsumption_trucks : null\r\n );\r\n setHilliness(mapCentreIdData ? mapCentreIdData.hilliness : null);\r\n setSpeedProfileCars(\r\n mapCentreIdData ? mapCentreIdData.speedprofile_car : null\r\n );\r\n setSpeedProfileTrucks(mapCentreIdData ? mapCentreIdData.speedprofile_trucks : null)\r\n setZlevel(mapCentreIdData ? mapCentreIdData.zlevel : null);\r\n setCurvature(null);\r\n setSegment(mapCentreIdData ? mapCentreIdData.segment_order_no : null);\r\n }\r\n }\r\n // eslint-disable-next-line\r\n }, [zoom, props.localPreviousMapCentreIdData]);\r\n\r\n // useEffect(() => {\r\n // props.setMapRef(mapElement)\r\n // })\r\n\r\n\r\n return \r\n}\r\n\r\nexport default SectionalAnalysisMap;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Bar } from \"react-chartjs-2\";\r\n// import FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\";\r\nimport \"./chartMixedsectional.css\";\r\n// import { useTranslation } from \"react-i18next\";\r\n// import _ from \"lodash\";\r\nimport {\r\n legend,\r\n tooltips,\r\n xAxes,\r\n yAxes,\r\n compareChainage,\r\n} from \"../../../utils/chartutils\";\r\n\r\n// \"chart.js\": \"^2.8.0\",\r\n// \"react-chartjs-2\": \"^2.7.6\",\r\n\r\nconst barChartOptions = {\r\n animation: {\r\n duration: 0,\r\n },\r\n // title: { text: 'Energy consumption along road [l/100km, average over 20 meter sections]', display: true },\r\n tooltips: {\r\n titleFontSize: 20,\r\n bodyFontSize: 20,\r\n },\r\n lineTension: 2,\r\n scaleOverride: true,\r\n // scaleSteps: 200,\r\n // scaleStepWidth: 200,\r\n scaleShowLabels: true,\r\n scales: {\r\n xAxes: [\r\n {\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"FC\",\r\n },\r\n scaleFontSize: 40,\r\n ticks: {\r\n fontColor: \"white\",\r\n display: true,\r\n beginAtZero: true,\r\n min: 0,\r\n max: 10,\r\n },\r\n\r\n stacked: false,\r\n },\r\n ],\r\n yAxes: [\r\n {\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"chainage\",\r\n },\r\n scaleFontSize: 40,\r\n ticks: {\r\n fontColor: \"white\",\r\n suggestedMin: 0,\r\n suggestedMax: 60,\r\n maxTicksLimit: 10,\r\n display: true,\r\n stepSize: 10,\r\n },\r\n stacked: false,\r\n },\r\n ],\r\n },\r\n};\r\n\r\nconst data = {\r\n labels: [\"not found\"],\r\n datasets: [\r\n {\r\n type: \"line\",\r\n label: \"Alternative 2\",\r\n //borderColor: 'rgb(54, 162, 235)',\r\n //borderWidth: 2,\r\n fill: false,\r\n data: [null],\r\n },\r\n {\r\n type: \"line\",\r\n label: \"Alternative 1 line\",\r\n // backgroundColor: 'rgb(255, 99, 132)',\r\n data: [null],\r\n borderColor: \"white\",\r\n //borderWidth: 2,\r\n },\r\n ],\r\n};\r\n\r\nconst ChartMixedGroundLevelAlongRoad = (props) => {\r\n // const {\r\n // mapCoordinateId,\r\n // setMapCoordinateId,\r\n // mapCentreIdData,\r\n // setMapCentreIdData,\r\n // previousMapCentreIdData,\r\n // setPreviousMapCentreIdData,\r\n // editSectionalAnalysisChart,\r\n // setEditSectionalAnalysisChart,\r\n // } = useContext(FuelSaveGlobalContext);\r\n\r\n // const { t, i18n } = useTranslation();\r\n\r\n const baseAlternative = props.baseAlternative;\r\n const compareAlternative = props.compareAlternative;\r\n\r\n const [chartData, setChartData] = useState(data);\r\n const [chartOptions, setChartOptions] = useState(barChartOptions);\r\n // const [mapData, setMapData] = useState(null);\r\n const [prevMapData, setPrevMapData] = useState(null);\r\n const [currentMapData, setCurrentMapData] = useState(null);\r\n\r\n async function createChart() {\r\n const baseChainageLabels = [];\r\n const baseLevelData = [];\r\n const mapPointData = [];\r\n const compareLine = [];\r\n\r\n if (baseAlternative) {\r\n const baseSegmentsData = baseAlternative.segments_data;\r\n baseSegmentsData.sort(compareChainage);\r\n\r\n let index = 0;\r\n // let firstFound = false;\r\n let drawSlope = false;\r\n\r\n baseSegmentsData.map((segment) => {\r\n baseChainageLabels.push(segment.chainage);\r\n baseLevelData.push(segment.zlevel);\r\n\r\n if (prevMapData && segment.chainage === prevMapData.chainage) {\r\n compareLine.push(segment.zlevel);\r\n prevMapData.chainage < currentMapData.chainage ? drawSlope = true : drawSlope = false;\r\n } else if (prevMapData && segment.chainage === currentMapData.chainage) {\r\n compareLine.push(segment.zlevel);\r\n prevMapData.chainage < currentMapData.chainage ? drawSlope = false : drawSlope = true;\r\n } else {\r\n if (drawSlope) {\r\n const x = currentMapData.chainage - prevMapData.chainage\r\n const y = currentMapData.zlevel - prevMapData.zlevel\r\n const slope = y / x;\r\n const currentX = segment.chainage - prevMapData.chainage;\r\n const Y = (slope * currentX) + prevMapData.zlevel;\r\n compareLine.push(Y);\r\n }\r\n else {\r\n compareLine.push(null);\r\n }\r\n }\r\n\r\n mapPointData.push({\r\n index: index,\r\n chainage: segment.chainage,\r\n segment_order_no: segment.segment_order_no,\r\n fuelconsumption_trucks: segment.fuelconsumption_trucks,\r\n hilliness: segment.hilliness,\r\n speedprofile_car: segment.speedprofile_car,\r\n fuelconsumption_car: segment.fuelconsumption_car,\r\n speedprofile_trucks: segment.speedprofile_trucks,\r\n geom_order_id: segment.geom_order_id,\r\n geom: segment.geom,\r\n zlevel: segment.zlevel,\r\n });\r\n\r\n index++;\r\n\r\n return segment\r\n });\r\n }\r\n\r\n // setMapData(mapPointData);\r\n\r\n const data = {\r\n labels: baseChainageLabels,\r\n datasets: [\r\n {\r\n type: \"line\",\r\n label: \"compare line\",\r\n labelColor: \"white\",\r\n borderColor: \"blue\",\r\n borderWidth: 1,\r\n pointRadius: 1,\r\n pointHoverRadius: 1,\r\n fill: true,\r\n backgroundColor: \"blue\",\r\n data: compareLine,\r\n },\r\n {\r\n type: \"line\",\r\n label:\r\n \"Base level \" + (baseAlternative ? baseAlternative.direction : \"\"),\r\n labelColor: \"white\",\r\n borderColor: \"rgb(255,255,255,0.5)\",\r\n borderWidth: 1,\r\n pointRadius: 1,\r\n pointHoverRadius: 1,\r\n fill: true,\r\n backgroundColor: \"rgb(255,255,255,0.9)\",\r\n data: baseLevelData,\r\n },\r\n {\r\n type: \"bar\",\r\n label:\r\n \"Base level \" + (baseAlternative ? baseAlternative.direction : \"\"),\r\n labelColor: \"white\",\r\n borderColor: \"rgb(193, 66, 66)\",\r\n borderWidth: 1,\r\n pointRadius: 1,\r\n pointHoverRadius: 1,\r\n fill: true,\r\n backgroundColor: \"rgb(193, 66, 66,0.5)\",\r\n data: baseLevelData,\r\n }\r\n ],\r\n };\r\n\r\n const barChartOptions = {\r\n animation: {\r\n duration: 0,\r\n },\r\n legend: legend,\r\n events: [\"click\"],\r\n tooltipEvents: [\"mousemove\", \"touchstart\", \"touchmove\", \"click\"],\r\n tooltips: tooltips,\r\n onHover: function (evt, element) { },\r\n onClick: function (evt, element) {\r\n if (element[0]) {\r\n // const chart = element[0]._chart;\r\n const index = element[0]._index;\r\n // const activePoints = chart.getElementsAtEventForMode(\r\n // evt,\r\n // \"point\",\r\n // chart.options\r\n // );\r\n // const firstPoint = activePoints[0];\r\n // const label = chart.data.labels[firstPoint._index];\r\n // const value =\r\n // chart.data.datasets[firstPoint._datasetIndex].data[\r\n // firstPoint._index\r\n // ];\r\n\r\n setPrevMapData(currentMapData);\r\n setCurrentMapData(mapPointData[index]);\r\n //setPreviousMapCentreIdData(prevMapData)\r\n props.handleStateChange(\"localPreviousMapCentreIdData\", prevMapData)\r\n //setMapCentreIdData(mapPointData[index]);\r\n props.handleStateChange(\"localMapCentreIdData\", mapPointData[index])\r\n }\r\n },\r\n lineTension: 2,\r\n scaleOverride: true,\r\n scaleShowLabels: true,\r\n scales: {\r\n xAxes: xAxes,\r\n yAxes: yAxes,\r\n },\r\n };\r\n setChartData(data);\r\n setChartOptions(barChartOptions);\r\n }\r\n\r\n useEffect(() => {\r\n const newData = [prevMapData, currentMapData]\r\n //setPreviousMapCentreIdData(prevMapData => newData)\r\n props.handleStateChange(\"localPreviousMapCentreIdData\", prevMapData => newData)\r\n //setMapCentreIdData(currentMapData => (currentMapData));\r\n props.handleStateChange(\"localMapCentreIdData\", currentMapData => (currentMapData))\r\n createChart();\r\n\r\n // eslint-disable-next-line\r\n }, [baseAlternative, compareAlternative, props.localMapCentreIdData]);\r\n\r\n return
')) {\r\n // // setWindowX(ev.clientX)\r\n // // setWindowY(ev.clientY)\r\n // // setCoordinateX(X)\r\n // // setCoordinateY(Y)\r\n // //}\r\n // })\r\n }\r\n\r\n\r\n\r\n useEffect(() => {\r\n //setMapCentreIdData(null);\r\n setLocalMapCentreIdData(null)\r\n //setPreviousMapCentreIdData(null);\r\n setLocalPreviousMapCentreIdData(null)\r\n setDailySavings(null);\r\n setForecastSavings(null);\r\n setGradientPercent(null);\r\n setAveragePositiveGradientDecreasePercent(null);\r\n setMaxGradientDecreasePercent(null);\r\n //setPreviousMapCentreIdData(null)\r\n setLocalPreviousMapCentreIdData(null)\r\n }, [baseAlternative, globalProjectNumber]);\r\n\r\n // useEffect(() => {\r\n // setBaseAlternative(null);\r\n // }, [globalProjectNumber]);\r\n\r\n useEffect(() => {\r\n async function setData() {\r\n\r\n if (\r\n localPreviousMapCentreIdData &&\r\n baseAlternative &&\r\n presumptions\r\n ) {\r\n\r\n setDailySavings(null);\r\n setForecastSavings(null);\r\n setGradientPercent(null);\r\n setAveragePositiveGradientDecreasePercent(null);\r\n setMaxGradientDecreasePercent(null);\r\n\r\n let startSection = localPreviousMapCentreIdData[0] ? localPreviousMapCentreIdData[0].chainage : null;\r\n let endSection = localPreviousMapCentreIdData[1] ? localPreviousMapCentreIdData[1].chainage : null;\r\n\r\n if (startSection > endSection) {\r\n const dummy = startSection;\r\n startSection = endSection;\r\n endSection = dummy;\r\n }\r\n\r\n const dailyData = await getDailyData(\r\n startSection,\r\n endSection,\r\n startYear,\r\n endYear,\r\n baseAlternative.segments,\r\n baseAlternative.segments_data,\r\n presumptions\r\n );\r\n\r\n if (dailyData) {\r\n const savingsData = dailyData[0].data.alternative;\r\n if (savingsData) {\r\n setDailySavings(savingsData.daily);\r\n setForecastSavings(savingsData.forecast);\r\n setGradientPercent(savingsData.gradient_percent);\r\n setAveragePositiveGradientDecreasePercent(\r\n savingsData.average_positive_gradient_decrease_percent\r\n );\r\n setMaxGradientDecreasePercent(\r\n savingsData.max_gradient_decrease_percent\r\n );\r\n }\r\n }\r\n }\r\n }\r\n\r\n setData();\r\n // eslint-disable-next-line\r\n }, [localPreviousMapCentreIdData]);\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Sectional Analysis\")\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n useEffect(() => {\r\n handleFirstAlternativeClick(\r\n props.directions,\r\n props.alternative_id,\r\n props.direction,\r\n props.start_year,\r\n props.end_year\r\n )\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n (baseAlternative &&\r\n \r\n \r\n \r\n \r\n \r\n Click the graph to draw a comparison line
\r\n )}\r\n {baseAlternative && (\r\n \r\n
\r\n )}\r\n \r\n Sectional analysis map
\r\n }\r\n {baseAlternative && (\r\n Hello
\r\n\r\n }\r\n \r\n\r\n
\r\n \r\n {/* coordinateX !==\"\" && \r\n {`X:${coordinateX},Y:${coordinateY}`}\r\n \r\n /*\r\n
X:{coordinateX},Y:{coordinateY}
\r\n
\r\n \r\n \r\n Daily Savings \r\n \r\n \r\n Fuel \r\n CO2 \r\n Energy \r\n Cost \r\n \r\n \r\n \r\n \r\n {dailySavings ? numberFormat(Math.floor(dailySavings.fuel)) : ''} \r\n {dailySavings ? numberFormat(Math.floor(dailySavings.co2)) : ''} \r\n {dailySavings ? numberFormat(Math.floor(dailySavings.energy)) : ''} \r\n {dailySavings ? `${numberFormat(Math.floor(dailySavings.cost))} ${currency}` : ''} \r\n \r\n \r\n
\r\n \r\n {React.Children.toArray(\r\n \r\n Forecasted Savings \r\n \r\n \r\n Year \r\n Fuel \r\n CO2 \r\n Energy \r\n Cost \r\n \r\n \r\n \r\n {!forecastSavings &&\r\n \r\n {''} \r\n {''} \r\n {''} \r\n {''} \r\n {''} \r\n \r\n }\r\n {forecastSavings && forecastSavings.map((f, i) => (\r\n \r\n {f.year} \r\n {numberFormat(Math.floor(f.fuel))} \r\n {numberFormat(Math.floor(f.co2))} \r\n {numberFormat(Math.floor(f.energy))} \r\n {numberFormat(Math.floor(f.cost))} {currency} \r\n \r\n ))}\r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n \r\n Forecasted Savings \r\n \r\n \r\n New gradient \r\n Average gradient decrease \r\n Maximum gradient decrease \r\n \r\n \r\n \r\n \r\n {gradientPercent ? numberFormat(gradientPercent) : ''} \r\n {averagePositiveGradientDecreasePercent ? numberFormat(averagePositiveGradientDecreasePercent) : ''} \r\n {maxGradientDecreasePercent ? numberFormat(maxGradientDecreasePercent) : ''} \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n )\r\n )\r\n}\r\n\r\nexport default SectionalAnalysisIndividual\r\n","import React, { Fragment, useState, useEffect, useContext } from \"react\";\r\nimport axios from \"axios\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { requestBody4 } from \"../../../utils/aiRequestBodyUtils\";\r\nimport FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\";\r\n// import SectionalAnalysisMap from \"./SectionalAnalysisMap\";\r\n// import ChartMixedGroundLevelAlongRoad from \"./ChartMixedGroundLevelAlongRoad\";\r\nimport \"./sectional.css\";\r\n// import { numberFormat } from \"../../../utils/numberFormat\";\r\nimport SectionalAnalysisIndividual from \"./SectionalAnalysisIndividual\"\r\nimport SpinLoader from \"../../common/SpinLoader\";\r\nimport { MIN_YEAR } from \"../../../constant\";\r\nimport { presumptionObj } from \"../../../constant/helpers\";\r\nimport AlignmentPageWidget from \"../summary/AlignmentPageWidget\";\r\n\r\nconst SectionalAnalysis = () => {\r\n const {\r\n // mapCoordinateId, setMapCoordinateId,\r\n // mapCentreIdData, setMapCentreIdData,\r\n // chainage,\r\n // setChainage,\r\n // fcCar,\r\n // setFcCar,\r\n // fcTrucks,\r\n // setFcTrucks,\r\n // hilliness,\r\n // setHilliness,\r\n // speedProfileCars,\r\n // setSpeedProfileCars,\r\n // speedProfileTrucks,\r\n // setSpeedProfileTrucks,\r\n // zlevel,\r\n // setZlevel,\r\n // curvature,\r\n // setCurvature,\r\n // segment,\r\n // setSegment,\r\n // mapCentreIdData,\r\n setMapCentreIdData,\r\n previousMapCentreIdData,\r\n setPreviousMapCentreIdData,\r\n // editSectionalAnalysisChart,\r\n // setEditSectionalAnalysisChart,\r\n globalProjectNumber,\r\n // globalBrandCrumb,\r\n setGlobalBrandCrumb\r\n } = useContext(FuelSaveGlobalContext);\r\n const { carConfig, truckConfig } = useSelector(state => state.global)\r\n const { alignments } = useSelector(state => state.alignments)\r\n const { presumptions } = useSelector(state => state.presumptions)\r\n\r\n // HINT: Not in use, set constant value\r\n const baseAlternative = null\r\n const startYear = MIN_YEAR\r\n const endYear = 2041\r\n\r\n // const [baseAlternative, setBaseAlternative] = useState(null);\r\n // const [startYear, setStartYear] = useState(2020);\r\n // const [endYear, setEndYear] = useState(2041);\r\n\r\n // const [dailySavings, setDailySavings] = useState(null);\r\n // const [forecastSavings, setForecastSavings] = useState(null);\r\n // const [gradientPercent, setGradientPercent] = useState(null);\r\n const [localLoading, setLocalLoading] = useState(true)\r\n // const [\r\n // averagePositiveGradientDecreasePercent,\r\n // setAveragePositiveGradientDecreasePercent,\r\n // ] = useState(null);\r\n // const [maxGradientDecreasePercent, setMaxGradientDecreasePercent] = useState(\r\n // null\r\n // );\r\n\r\n const getDailyData = async (\r\n startSection,\r\n endSection,\r\n startYearData,\r\n endYearData,\r\n segmentsDir1,\r\n segmentsDataDir1,\r\n presumptionsData\r\n ) => {\r\n const presumptions = presumptionObj(presumptionsData[0])\r\n\r\n const startYear = startYearData ? startYearData : 2020;\r\n const endYear = endYearData ? endYearData : 2041;\r\n\r\n const requestBodyDir1 = {\r\n return_option: 4,\r\n sectional_start: startSection ? startSection : 3600,\r\n sectional_end: endSection ? endSection : 6000,\r\n start_year: startYear,\r\n end_year: endYear,\r\n fuel_distribution_cars: carConfig,\r\n fuel_distribution_trucks: truckConfig,\r\n sensitivity_param_factors: {\r\n speed: 1,\r\n fuelprice: 1,\r\n emission: 1,\r\n AADTheavy: 1,\r\n },\r\n presumptions: presumptions,\r\n segments: segmentsDir1,\r\n segments_data: segmentsDataDir1,\r\n };\r\n\r\n const config = {\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n },\r\n };\r\n\r\n const AI_API_KEY = process.env.REACT_APP_AI_FUNCTION_API_KEY;\r\n const urlToken = process.env.REACT_APP_AI_FUNCTION_URL + '/api/HttpTrigger1?code=' + AI_API_KEY;\r\n\r\n try {\r\n const [responseDir1] = await Promise.all([\r\n axios.post(urlToken, endYear ? requestBodyDir1 : requestBody4, config),\r\n ]);\r\n\r\n return [responseDir1];\r\n } catch (err) {\r\n // throw new Error('Unable to get a response.')\r\n return null;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setMapCentreIdData(null);\r\n setPreviousMapCentreIdData(null);\r\n // setDailySavings(null);\r\n // setForecastSavings(null);\r\n // setGradientPercent(null);\r\n // setAveragePositiveGradientDecreasePercent(null);\r\n // setMaxGradientDecreasePercent(null);\r\n setPreviousMapCentreIdData(null)\r\n\r\n // eslint-disable-next-line\r\n }, [baseAlternative, globalProjectNumber]);\r\n\r\n // useEffect(() => {\r\n // setBaseAlternative(null);\r\n // }, [globalProjectNumber]);\r\n\r\n useEffect(() => {\r\n setLocalLoading(true)\r\n async function setData() {\r\n\r\n if (\r\n previousMapCentreIdData &&\r\n baseAlternative &&\r\n presumptions\r\n ) {\r\n\r\n // setDailySavings(null);\r\n // setForecastSavings(null);\r\n // setGradientPercent(null);\r\n // setAveragePositiveGradientDecreasePercent(null);\r\n // setMaxGradientDecreasePercent(null);\r\n\r\n let startSection = previousMapCentreIdData[0] ? previousMapCentreIdData[0].chainage : null;\r\n let endSection = previousMapCentreIdData[1] ? previousMapCentreIdData[1].chainage : null;\r\n\r\n if (startSection > endSection) {\r\n const dummy = startSection;\r\n startSection = endSection;\r\n endSection = dummy;\r\n }\r\n\r\n const dailyData = await getDailyData(\r\n startSection,\r\n endSection,\r\n startYear,\r\n endYear,\r\n baseAlternative.segments,\r\n baseAlternative.segments_data,\r\n presumptions\r\n );\r\n\r\n if (dailyData) {\r\n const savingsData = dailyData[0].data.alternative;\r\n if (savingsData) {\r\n // setDailySavings(savingsData.daily);\r\n // setForecastSavings(savingsData.forecast);\r\n // setGradientPercent(savingsData.gradient_percent);\r\n // setAveragePositiveGradientDecreasePercent(\r\n // savingsData.average_positive_gradient_decrease_percent\r\n // );\r\n // setMaxGradientDecreasePercent(\r\n // savingsData.max_gradient_decrease_percent\r\n // );\r\n }\r\n }\r\n }\r\n }\r\n\r\n setData();\r\n setLocalLoading(false)\r\n\r\n // eslint-disable-next-line\r\n }, [previousMapCentreIdData]);\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Sectional Analysis\")\r\n\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n (!localLoading ?\r\n <>\r\n {alignments && alignments.map((a, index) => (\r\n \r\n \r\n ))}\r\n {!!alignments && !!alignments.length && \r\n {Math.round(row.year)} \r\n \r\n {numberFormat(Math.round(row.fuel))}\r\n \r\n \r\n {numberFormat(Math.round(row.co2))}\r\n \r\n \r\n {numberFormat(Math.round(row.energy))}\r\n \r\n \r\n {numberFormat(Math.round(row.cost))} {currency}\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n );\r\n }\r\n\r\n const handleChangeAcc = () => {\r\n setAccordinOpen(!accordinOpen)\r\n }\r\n // const handleClose = () => {\r\n // setOpen(false);\r\n // };\r\n // const handleOpen = () => {\r\n // setOpen(true);\r\n // };\r\n\r\n const handleChangeSelector = (event) => {\r\n const input = JSON.parse(event.target.value)\r\n if (event.target.checked) {\r\n if (compareAlternative) {\r\n setCompareAlternative([...compareAlternative.filter(c => c.alternative_id !== input.alternative_id), input])\r\n setAccordinOpen(true)\r\n }\r\n else {\r\n setCompareAlternative([input])\r\n setAccordinOpen(true)\r\n }\r\n } else {\r\n if (compareAlternative) {\r\n setCompareAlternative([...compareAlternative.filter(c => c.alternative_id !== input.alternative_id)])\r\n setAccordinOpen(true)\r\n }\r\n else {\r\n setCompareAlternative(null)\r\n setAccordinOpen(true)\r\n }\r\n }\r\n }\r\n\r\n const chartInfoData = type => {\r\n const baseYearLabels = [];\r\n const dataSets = [];\r\n\r\n const firstDataset = []\r\n baseAlternative.forecast_data.map(year => {\r\n baseYearLabels.push(year.year)\r\n if (type === 'co2') { firstDataset.push(Math.floor(year.annual_co2)) }\r\n else if (type === 'cost') { firstDataset.push(Math.floor(year.annual_cost)) }\r\n else if (type === 'energy') { firstDataset.push(Math.floor(year.annual_energy)) }\r\n else { firstDataset.push(Math.floor(year.annual_fuel)) }\r\n\r\n return year\r\n })\r\n\r\n dataSets.push({\r\n type: 'line',\r\n label: 'Base Alternative ' + baseAlternative.alternative_id,\r\n borderColor: 'rgb(54, 162, 235)',\r\n borderWidth: 2,\r\n fill: true,\r\n data: firstDataset,\r\n })\r\n if (compareAlternative) {\r\n compareAlternative.map((alternative, colorIndex) => {\r\n if (baseAlternative.alternative_id !== alternative.alternative_id) {\r\n const dataset = []\r\n alternative.forecast_data.map(year => {\r\n if (type === 'co2') { dataset.push(Math.floor(year.annual_co2)) }\r\n else if (type === 'cost') { dataset.push(year.annual_cost) }\r\n else if (type === 'energy') { dataset.push(year.annual_energy) }\r\n else { dataset.push(year.annual_fuel) }\r\n\r\n return year\r\n })\r\n dataSets.push({\r\n type: \"line\",\r\n label: \"Alternative \" + alternative.alternative_id,\r\n borderWidth: 2,\r\n borderColor: getColorForMultiChart(colorIndex),\r\n fill: false,\r\n data: dataset\r\n })\r\n }\r\n return alternative\r\n })\r\n }\r\n\r\n return {\r\n labels: baseYearLabels,\r\n datasets: dataSets\r\n }\r\n }\r\n\r\n return (\r\n \r\n\r\n {baseAlternative ? (\r\n \r\n \r\n \r\n \r\n Alternative {baseAlternative.alternative_id}: {baseAlternative.name}\r\n
\r\n \r\n \r\n {props.savingsAlternativetables &&\r\n
\r\n
\r\n
\r\n \r\n \r\n {props.savingsAlternativetables\r\n .filter(item => {\r\n return item.alternative_id !== baseAlternative.alternative_id\r\n })\r\n .map((a, index) => {\r\n return (\r\n \r\n Alignment Comparison \r\n \r\n
\r\n
\r\n }\r\n
\r\n {!accordinOpen ?\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Fuel (L) \r\n CO2 (kg) \r\n Energy (kWh) \r\n Cost \r\n \r\n \r\n \r\n \r\n {numberFormat(Math.round(baseAlternative.forecast_data[0].annual_fuel))} \r\n {numberFormat(Math.round(baseAlternative.forecast_data[0].annual_co2))} \r\n {numberFormat(Math.round(baseAlternative.forecast_data[0].annual_energy))} \r\n {numberFormat(Math.round(baseAlternative.forecast_data[0].annual_cost))} {currency} \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {baseAlternative && (\r\n <>\r\n \r\n \r\n \r\n Forecast\r\n
\r\n \r\n
\r\n \r\n \r\n Year \r\n Fuel (L) \r\n CO2 (kg) \r\n Energy (kWh) \r\n Cost \r\n \r\n \r\n {handleFunctionOutput()} \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\nexport default ForecastsIndividual;\r\n","import React, { useState, useEffect, useContext } from 'react'\r\nimport { toast } from 'react-toastify'\r\nimport { requestBody3 } from '../../../utils/aiRequestBodyUtils'\r\nimport { Container } from 'react-bootstrap'\r\nimport { useSelector } from 'react-redux'\r\nimport FuelSaveGlobalContext from '../../../context/FuelSaveGlobalContext'\r\nimport { compareYear } from '../../../utils/chartutils'\r\nimport './forecasts.css'\r\n// import { min } from 'moment-timezone'\r\nimport ForecastsIndividual from './ForecastsIndividual'\r\nimport SpinLoader from '../../common/SpinLoader'\r\nimport { flashErrMsg, handleRequest, presumptionObj, projectInfoToStorage } from '../../../constant/helpers'\r\nimport { MIN_YEAR } from '../../../constant'\r\nimport { colorCodes } from '../../../constant/colors'\r\nimport AlignmentPageWidget from '../summary/AlignmentPageWidget'\r\n\r\nconst { BLUE_3 } = colorCodes\r\nconst compareMin = (a, b) => {\r\n if (a.year > b.year) {\r\n return -1;\r\n }\r\n if (a.year < b.year) {\r\n return 1;\r\n }\r\n return 0;\r\n};\r\n\r\nconst compareMax = (a, b) => {\r\n if (a.year < b.year) {\r\n return -1;\r\n }\r\n if (a.year > b.year) {\r\n return 1;\r\n }\r\n return 0;\r\n};\r\n\r\nconst sliceYears = (localSavingsAlternativetables) => {\r\n const minYears = [];\r\n const maxYears = [];\r\n\r\n localSavingsAlternativetables.map((alternative) => {\r\n const forecastData = alternative.forecast_data;\r\n forecastData.sort(compareYear);\r\n const min = forecastData[0];\r\n const max = forecastData[forecastData.length - 1];\r\n if (min) {\r\n minYears.push(min);\r\n }\r\n if (max) {\r\n maxYears.push(max);\r\n }\r\n return alternative\r\n });\r\n\r\n if (minYears.length > 0 && maxYears.length > 0) {\r\n minYears.sort(compareMin);\r\n maxYears.sort(compareMax);\r\n\r\n const commonMin = minYears[0];\r\n const commonMax = maxYears[0];\r\n\r\n const slicedAlternativeTables = [];\r\n localSavingsAlternativetables.map((alternative) => {\r\n // find min index\r\n\r\n let continueLoop = true;\r\n let index = 0;\r\n let minIndex = 0;\r\n let maxIndex = 0;\r\n\r\n while (continueLoop) {\r\n const fd = alternative.forecast_data[index];\r\n if (!fd) {\r\n continueLoop = false;\r\n }\r\n if (fd && fd.year === commonMin.year) {\r\n minIndex = index;\r\n continueLoop = false;\r\n }\r\n index++;\r\n }\r\n\r\n index = alternative.forecast_data.length - 1;\r\n continueLoop = true;\r\n\r\n while (continueLoop) {\r\n const fd = alternative.forecast_data[index];\r\n if (!fd) {\r\n continueLoop = false;\r\n }\r\n if (fd && fd.year === commonMax.year) {\r\n maxIndex = index;\r\n continueLoop = false;\r\n }\r\n index--;\r\n }\r\n\r\n const slicedAlternativeForecast = alternative.forecast_data.slice(\r\n minIndex,\r\n maxIndex + 1\r\n );\r\n\r\n slicedAlternativeTables.push({\r\n name: alternative.name,\r\n alternative_id: alternative.alternative_id,\r\n forecast_data: slicedAlternativeForecast,\r\n });\r\n return alternative\r\n });\r\n\r\n return slicedAlternativeTables;\r\n } else {\r\n return [];\r\n }\r\n};\r\n\r\nconst Forecasts = () => {\r\n const {\r\n // mapCoordinateId, setMapCoordinateId,\r\n // mapCentreIdData, setMapCentreIdData,\r\n // chainage,\r\n // setChainage,\r\n // fcCar,\r\n // setFcCar,\r\n // fcTrucks,\r\n // setFcTrucks,\r\n // hilliness,\r\n // setHilliness,\r\n // speedProfileCars,\r\n // setSpeedProfileCars,\r\n // speedProfileTrucks,\r\n // setSpeedProfileTrucks,\r\n // zlevel,\r\n // setZlevel,\r\n // curvature,\r\n // setCurvature,\r\n // segment,\r\n // setSegment,\r\n // mapCentreIdData,\r\n // setMapCentreIdData,\r\n // previousMapCentreIdData,\r\n // setPreviousMapCentreIdData,\r\n // editSectionalAnalysisChart,\r\n // setEditSectionalAnalysisChart,\r\n isLoading, setIsLoading,\r\n globalProjectNumber,\r\n // globalBrandCrumb, \r\n setGlobalBrandCrumb\r\n } = useContext(FuelSaveGlobalContext);\r\n const { carConfig, truckConfig } = useSelector(state => state.global)\r\n const { alignments, isProcessing } = useSelector(state => state.alignments)\r\n const { presumptions } = useSelector(state => state.presumptions)\r\n\r\n const [savingsAlternativetables, setSavingsAlternativetables] = useState(null);\r\n\r\n const getDailyData = async (\r\n startYearData,\r\n endYearData,\r\n segmentsDir1,\r\n segmentsDir2,\r\n segmentsDataDir1,\r\n segmentsDataDir2,\r\n presumptionsData,\r\n index\r\n ) => {\r\n const presumptions = presumptionObj(presumptionsData[0])\r\n\r\n const startYear = startYearData ? startYearData : MIN_YEAR;\r\n const endYear = endYearData ? endYearData : 2041;\r\n\r\n const requestBodyDir1 = {\r\n return_option: 3,\r\n start_year: startYear,\r\n end_year: endYear,\r\n // end_year: startYear + 20, //TODO: A temp fix\r\n fuel_distribution_cars: carConfig,\r\n fuel_distribution_trucks: truckConfig,\r\n sensitivity_param_factors: {\r\n speed: 1,\r\n fuelprice: 1,\r\n emission: 1,\r\n AADTheavy: 1,\r\n },\r\n presumptions: presumptions,\r\n segments: segmentsDir1,\r\n segments_data: segmentsDataDir1,\r\n };\r\n\r\n const requestBodyDir2 = {\r\n return_option: 3,\r\n start_year: startYear,\r\n end_year: endYear, //TODO: A temp fix\r\n // end_year: startYear + 20,\r\n fuel_distribution_cars: carConfig,\r\n fuel_distribution_trucks: truckConfig,\r\n sensitivity_param_factors: {\r\n speed: 1,\r\n fuelprice: 1,\r\n emission: 1,\r\n AADTheavy: 1,\r\n },\r\n presumptions: presumptions,\r\n segments: segmentsDir2,\r\n segments_data: segmentsDataDir2,\r\n };\r\n\r\n const urlToken = process.env.REACT_APP_AI_FUNCTION_URL + '/api/HttpTrigger1?code=' + process.env.REACT_APP_AI_FUNCTION_API_KEY;\r\n\r\n try {\r\n setIsLoading(true)\r\n const [responseDir1, responseDir2] = await Promise.all([\r\n handleRequest('post', urlToken, endYear ? requestBodyDir1 : requestBody3, 'application/json', 'application/json'),\r\n handleRequest('post', urlToken, endYear ? requestBodyDir2 : requestBody3, 'application/json', 'application/json'),\r\n ])\r\n\r\n setIsLoading(false)\r\n return [responseDir1, responseDir2];\r\n\r\n } catch (err) {\r\n // throw new Error('Unable to get a response.')\r\n flashErrMsg(err)\r\n setIsLoading(false)\r\n return null;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n async function setData() {\r\n const globalProjInfo = projectInfoToStorage()\r\n if (!globalProjInfo || (!!globalProjInfo && (!globalProjInfo.start_year || !globalProjInfo.end_year))) {\r\n toast.error('Start/End year value not found with this project')\r\n return\r\n }\r\n if (!alignments || !presumptions || !globalProjInfo || !carConfig || !truckConfig) {\r\n return\r\n }\r\n\r\n setIsLoading(true)\r\n const localSavingsAlternativetables = [];\r\n\r\n for (let index = 0; index < alignments.length; index++) {\r\n const alternative = alignments[index];\r\n\r\n const dailyData = await getDailyData(\r\n globalProjInfo.start_year,\r\n globalProjInfo.end_year,\r\n alternative.directions[0].segments,\r\n alternative.directions[1].segments,\r\n alternative.directions[0].segments_data,\r\n alternative.directions[1].segments_data,\r\n presumptions,\r\n index\r\n );\r\n\r\n if (!dailyData || (!!dailyData && (!dailyData[0] || !dailyData[1]))) {\r\n return false\r\n }\r\n\r\n const responseDir1 = dailyData[0];\r\n const responseDir2 = dailyData[1];\r\n\r\n const year = responseDir1.data.year;\r\n\r\n const forecastData = [];\r\n year.map((yr, idx) => {\r\n if (yr <= globalProjInfo.end_year) { //TODO: A temp fix calculation problem\r\n const annual_co2 =\r\n responseDir1.data.annual_co2[idx] +\r\n responseDir2.data.annual_co2[idx];\r\n const annual_cost =\r\n responseDir1.data.annual_cost[idx] +\r\n responseDir2.data.annual_cost[idx];\r\n const annual_energy =\r\n responseDir1.data.annual_energy[idx] +\r\n responseDir2.data.annual_energy[idx];\r\n const annual_fuel =\r\n responseDir1.data.annual_fuel[idx] +\r\n responseDir2.data.annual_fuel[idx];\r\n\r\n forecastData.push({ year: yr, annual_co2, annual_cost, annual_energy, annual_fuel })\r\n }\r\n return yr\r\n });\r\n\r\n localSavingsAlternativetables.push({\r\n name: alternative.name,\r\n alternative_id: alternative.alternative_id,\r\n forecast_data: forecastData\r\n });\r\n }\r\n\r\n const slicedAlternativeTables = sliceYears(localSavingsAlternativetables);\r\n\r\n setSavingsAlternativetables(slicedAlternativeTables);\r\n setIsLoading(false)\r\n }\r\n\r\n setData();\r\n\r\n // eslint-disable-next-line\r\n }, [alignments, presumptions, carConfig, truckConfig]);\r\n\r\n useEffect(() => {\r\n //setBaseAlternative(null);\r\n setSavingsAlternativetables(null);\r\n }, [globalProjectNumber])\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Forecasts\")\r\n\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n\r\n if (!!isLoading || !!isProcessing) {\r\n return \r\n {savingsAlternativetables &&\r\n <>\r\n Forecasts
\r\n {savingsAlternativetables.map((a, altIndex) => (\r\n \r\n );\r\n};\r\n\r\nexport default Forecasts;\r\n","import React, { useState, useEffect, useRef, useContext } from \"react\"\r\nimport Map from \"ol/Map.js\";\r\nimport View from \"ol/View.js\";\r\nimport XYZ from 'ol/source/XYZ';\r\nimport TileLayer from 'ol/layer/Tile';\r\nimport * as proj from \"ol/proj\";\r\nimport Overlay from 'ol/Overlay.js';\r\nimport Select from 'ol/interaction/Select';\r\nimport { Button } from \"react-bootstrap\";\r\nimport axios from \"axios\";\r\nimport { createPointLayer } from '../../../../utils/maputils';\r\nimport FuelSaveGlobalContext from '../../../../context/FuelSaveGlobalContext';\r\nimport { replaceCordiStr } from \"../../../../constant/helpers\";\r\nimport './map.css';\r\n\r\nconst getCentreCoord = (directions) => {\r\n const segments_data = directions.segments_data\r\n const length = Math.floor(segments_data.length / 2)\r\n const first_geom = segments_data[length].geom;\r\n const centreCoord = JSON.parse(replaceCordiStr(first_geom));\r\n return centreCoord;\r\n}\r\n\r\nconst InputMap = ({ directions, isNewSegEnable, setSegmentModalShow }) => {\r\n const {\r\n editMap, apiAccessToken,\r\n mapCoordinateId, setMapCoordinateId\r\n } = useContext(FuelSaveGlobalContext)\r\n\r\n const overlayRef = useRef(null);\r\n const segments = directions.segments\r\n const segments_data = directions.segments_data\r\n\r\n const centreCoord = getCentreCoord(directions);\r\n const posCentre = proj.fromLonLat(centreCoord.coordinates);\r\n\r\n const view = new View({ center: posCentre, zoom: 11 });\r\n\r\n function customLoader(tile, src) {\r\n axios({\r\n method: 'get',\r\n url: src,\r\n headers: {\r\n 'Authorization': `Bearer ${apiAccessToken.accessToken}`\r\n }\r\n }).then((response) => {\r\n tile.getImage().src = response.data;\r\n })\r\n }\r\n\r\n let urlVal = process.env.REACT_APP_API_URL\r\n urlVal = urlVal.replace('/graphql', '')\r\n\r\n const XYZSource = new XYZ({\r\n url: `${urlVal}/apimaptiler/?url=api.maptiler.com/maps/voyager/{z}/{x}/{y}.png`\r\n })\r\n XYZSource.setTileLoadFunction(customLoader);\r\n\r\n const bgLayer = new TileLayer({ source: XYZSource });\r\n\r\n const [map] = useState(\r\n new Map({\r\n target: null,\r\n layers: [bgLayer\r\n ],\r\n view: view,\r\n pixelRatio: 1.0\r\n })\r\n );\r\n\r\n useEffect(() => {\r\n\r\n var layersToRemove = [];\r\n map.getLayers().forEach(function (layer) {\r\n\r\n if (layer.get('name') !== undefined && layer.get('name').includes('pointlayer')) {\r\n layersToRemove.push(layer)\r\n }\r\n })\r\n\r\n var len = layersToRemove.length;\r\n for (var i = 0; i < len; i++) {\r\n map.removeLayer(layersToRemove[i]);\r\n }\r\n\r\n // INIT POINTS\r\n const mapLayers = createPointLayer(segments_data, segments);\r\n\r\n mapLayers.map(lyr => {\r\n map.addLayer(lyr)\r\n return lyr\r\n });\r\n\r\n var select = null;\r\n var selectSingleClick = new Select();\r\n\r\n // Basic overlay to show where i want the new center to be\r\n const overlay = new Overlay({\r\n position: posCentre,\r\n element: overlayRef.current,\r\n positioning: \"center-center\",\r\n stopEvent: false\r\n });\r\n\r\n map.addOverlay(overlay);\r\n map.on('singleclick', function (evt) {\r\n var coordinate = evt.coordinate;\r\n overlay.setPosition(coordinate)\r\n });\r\n\r\n if (select !== null) {\r\n map.removeInteraction(select)\r\n }\r\n select = selectSingleClick;\r\n\r\n if (select !== null) {\r\n map.addInteraction(select);\r\n select.on('select', function (e) {\r\n // show on map\r\n if (e.selected[0]) {\r\n setMapCoordinateId(e.selected[0].values_.geom_order_id - 1);\r\n } else {\r\n setMapCoordinateId(null);\r\n }\r\n });\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n\r\n\r\n // USE EFFCT\r\n\r\n useEffect(() => {\r\n\r\n map.setTarget('map');\r\n if (editMap === true) {\r\n\r\n // remove old point layers \r\n var layersToRemove = [];\r\n map.getLayers().forEach(function (layer) {\r\n if (layer.get('name') !== undefined && layer.get('name').includes('pointlayer')) {\r\n layersToRemove.push(layer)\r\n }\r\n })\r\n\r\n var len = layersToRemove.length;\r\n for (var i = 0; i < len; i++) {\r\n map.removeLayer(layersToRemove[i]);\r\n }\r\n\r\n const mapLayers = createPointLayer(segments_data, segments)\r\n\r\n mapLayers.map(lyr => {\r\n map.addLayer(lyr)\r\n return lyr\r\n })\r\n\r\n return () => {\r\n map.setTarget(null);\r\n };\r\n }\r\n // eslint-disable-next-line\r\n }, [editMap, isNewSegEnable])\r\n\r\n return (\r\n <>\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default InputMap","import { gql } from '@apollo/client';\r\nimport { alternativeQueryParentBlock, singleAlternativeQueryParentBlock } from './alignment';\r\n\r\nexport const UPDATE_SEGMENT = gql`\r\nmutation updateSegment($segment_id:ID!, $data:UpdateSegmentInput!) {\r\n updateSegment(segment_id:$segment_id, data:$data) {\r\n segment_id\r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n}`;\r\n\r\n\r\nexport const UPDATE_ALTERNATIVE = gql`\r\nmutation updateAlternative($alternative_id:ID!, $data:UpdateAlternativeInput!) { \r\n updateAlternative( alternative_id:$alternative_id, data:$data) {\r\n alternative_id\r\n name\r\n }\r\n}`;\r\n\r\n\r\nexport const POST_SEGMENT = gql`\r\nmutation \r\naddSegment($new_segment:AddSegmentSegmentsInput!){\r\n addSegment(new_segment:$new_segment) {\r\n segment_id\r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n}`;\r\n\r\nexport const DELETE_SEGMENT = gql`\r\nmutation \r\ndeleteSegment($segment_id:ID!) {\r\n deleteSegment(segment_id:$segment_id){\r\n segment_id\r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n}`;\r\n\r\nexport const POST_ALTERNATIVE = gql`\r\nmutation\r\n addAlternative( $project_id: ID!, $dir1:[AddAlternativeDirInput!]!, $dir2:[AddAlternativeDirInput!]!) {\r\n addAlternative(project_id:$project_id, dir1:$dir1, dir2:$dir2){\r\n alternative_id\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport const GET_VALUES = gql`\r\nquery GetAlternatives($project_id: ID!) {\r\n projects(project_ids: [$project_id]) {\r\n ${alternativeQueryParentBlock(1, `\r\n alternative_id\r\n name\r\n geom\r\n ts_uploaded_on\r\n directions{\r\n directions_id\r\n direction\r\n segments{\r\n segment_id \r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n segments_data{\r\n segment_data_id\r\n geom_order_id\r\n directions_id\r\n chainage\r\n zlevel\r\n radius\r\n a_intersection\r\n geom\r\n }\r\n }\r\n `)}\r\n }\r\n}`;\r\n\r\nexport const GET_ALTERNATIVE_BY_ID = (altId) => gql`\r\nquery GetAlternatives($project_id: ID!) {\r\n projects(project_ids: [$project_id]) {\r\n ${singleAlternativeQueryParentBlock(`\r\n alternative_id\r\n name\r\n geom\r\n ts_uploaded_on\r\n directions{\r\n directions_id\r\n direction\r\n segments{\r\n segment_id \r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n segments_data{\r\n segment_data_id\r\n geom_order_id\r\n directions_id\r\n chainage\r\n zlevel\r\n radius\r\n a_intersection\r\n geom\r\n }\r\n }\r\n `, altId)}\r\n }\r\n}`;","import React, { useState, useContext } from 'react'\r\nimport { Modal, Form, Button } from 'react-bootstrap'\r\nimport { useQuery, useMutation } from '@apollo/client'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport FuelSaveGlobalContext from '../../../../context/FuelSaveGlobalContext'\r\nimport { GET_VALUES, UPDATE_ALTERNATIVE } from '../../../../utils/apolloutils'\r\nimport { setAllAlignments } from '../../../../actions/alignment'\r\n\r\nconst EditPopUp = ({ show, onHide, alternative }) => {\r\n\r\n const dispatch = useDispatch()\r\n const { alignments } = useSelector(state => state.alignments)\r\n const { globalProjectNumber } = useContext(FuelSaveGlobalContext)\r\n const alternateId = !!alternative ? alternative : {}\r\n const [aName, setAName] = useState(alternateId.name || '');\r\n const { // loading, error, \r\n data } = useQuery(GET_VALUES, {\r\n variables: {\r\n project_id: globalProjectNumber\r\n }\r\n });\r\n\r\n const refreshAlternatives = newAlt => {\r\n const updatedRec = newAlt.find(item => (item.alternative_id === alternative.alternative_id))\r\n if (!!alignments && !!alignments.length) {\r\n const newResp = alignments.map((item, idx) => {\r\n if (item.alternative_id === alternative.alternative_id) {\r\n return {\r\n ...item,\r\n ...(!!updatedRec && { ...updatedRec })\r\n }\r\n }\r\n return item\r\n })\r\n dispatch(setAllAlignments(newResp))\r\n }\r\n }\r\n\r\n const [updateAlternative, { loading: mutationLoading }] = useMutation(UPDATE_ALTERNATIVE, {\r\n onCompleted: ((data) => {\r\n onHide()\r\n refreshAlternatives(data.updateAlternative)\r\n })\r\n })\r\n\r\n\r\n const handleInputChange = (name, e) => {\r\n const value = e.target.value;\r\n\r\n switch (name) {\r\n case 'name':\r\n setAName(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const validateInput = name => {\r\n switch (name) {\r\n case 'name':\r\n return !aName\r\n default:\r\n return false\r\n }\r\n }\r\n\r\n const isFormValid = () => {\r\n let isValid = true\r\n const fields = ['name', 'start_year', 'end_year']\r\n for (var i = 0; i <= fields.length; i++) {\r\n if (!!validateInput(fields[i])) {\r\n isValid = false\r\n break;\r\n }\r\n }\r\n return isValid\r\n }\r\n\r\n const handleUpdateAlternative = async (e, id, oldName) => {\r\n e.preventDefault()\r\n updateAlternative(\r\n {\r\n variables: {\r\n alternative_id: id,\r\n data: {\r\n name: aName ? aName : oldName\r\n }\r\n },\r\n refetchQueries: [{\r\n query: GET_VALUES,\r\n variables: {\r\n project_id: globalProjectNumber\r\n }\r\n }]\r\n }\r\n )\r\n }\r\n\r\n const alignmentResp = (!!data && !!data.projects && !!data.projects[0] && !!data.projects[0].alternatives\r\n && !!data.projects[0].alternatives.node && !!data.projects[0].alternatives.node[0]) ?\r\n data.projects[0].alternatives.node[0] : false\r\n return (\r\n (!!alignmentResp && \r\n \r\n \r\n {`Edit Alternative: ${alignmentResp.alternative_id}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Close \r\n \r\n \r\n )\r\n );\r\n}\r\n\r\nexport default EditPopUp","import React, { useEffect, useRef } from 'react'\r\nimport './index.scss'\r\n\r\nconst ConfirmAlertPopup = ({\r\n title = 'Are you sure?',\r\n message = 'You want to delete this file?',\r\n onConfirm, onClose\r\n}) => {\r\n const wrapperRef = useRef()\r\n\r\n const handleClickOutside = event => {\r\n if (!!wrapperRef &&\r\n (wrapperRef.current !== null) &&\r\n !wrapperRef.current.contains(event.target)) {\r\n onClose()\r\n }\r\n }\r\n\r\n const handleKeyDown = e => {\r\n if (((e.keyCode === 27) ||\r\n (e.key === 'Escape') ||\r\n (e.key === 'Esc'))) {\r\n onClose()\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n document.addEventListener('mousedown', handleClickOutside)\r\n document.addEventListener('keydown', handleKeyDown)\r\n return () => {\r\n document.removeEventListener('mousedown', handleClickOutside)\r\n document.removeEventListener('keydown', handleKeyDown)\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n \r\n
\r\n
\r\n
{title} \r\n
{message}
\r\n
\r\n {\r\n onConfirm()\r\n onClose()\r\n }}>Yes \r\n No \r\n
\r\n
\r\n
\r\n \r\n {!!isEdit ? 'Edit' : 'New'} Segment \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Close \r\n \r\n \r\n )\r\n}\r\n\r\nexport default AddEditSegmentForm","import React, { useState, useContext } from 'react'\r\nimport {\r\n Col,\r\n Container,\r\n // Card,\r\n Button,\r\n Row,\r\n Table,\r\n ButtonGroup,\r\n // ToggleButtonGroup,\r\n ToggleButton\r\n} from \"react-bootstrap\";\r\nimport { confirmAlert } from 'react-confirm-alert';\r\nimport { useQuery, useMutation } from '@apollo/client';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport InputMap from './InputMap';\r\nimport { useTranslation } from 'react-i18next';\r\nimport './settings.css';\r\nimport FuelSaveGlobalContext from '../../../../context/FuelSaveGlobalContext';\r\nimport { UPDATE_SEGMENT, POST_SEGMENT, DELETE_SEGMENT, GET_ALTERNATIVE_BY_ID } from '../../../../utils/apolloutils';\r\n// import { currentSegmentNumber, splitSegments } from './segmentutils';\r\nimport EditPopUp from './EditPopUp'\r\n\r\n\r\n//Material UI Imports\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { correctAlternativeForMap } from \"./../../../../utils/maputils\"\r\nimport SpinLoader from '../../../common/SpinLoader';\r\nimport ConfirmAlertPopup from '../../../common/ConfirmAlertPopup';\r\nimport { setAlignmentInfo, setAllAlignments } from '../../../../actions/alignment';\r\nimport { getMinMaxChainageVal, getStartDistanceToSegment, getStepValue } from '../../../../constant/helpers';\r\nimport AddEditSegmentForm from './AddEditSegmentForm';\r\n\r\n\r\nconst TrafficInputForm = ({ alternative_id }) => {\r\n const {\r\n editMap, setEditMap,\r\n mapCoordinateId,\r\n globalProjectNumber,\r\n } = useContext(FuelSaveGlobalContext);\r\n\r\n const { t } = useTranslation();\r\n const dispatch = useDispatch()\r\n const [direction, setDirection] = useState(0);\r\n const { alignmentInfo, alignments } = useSelector(state => state.alignments)\r\n\r\n const { loading: fetchLoading, error } = useQuery(GET_ALTERNATIVE_BY_ID(alternative_id), {\r\n fetchPolicy: \"network-only\", // Warning: This causes the page to refetch a lot. Please check\r\n variables: {\r\n project_id: globalProjectNumber\r\n },\r\n onCompleted: ((data) => {\r\n const alignmentResp = !!data && !!data.projects && !!data.projects[0] && !!data.projects[0].alternatives ?\r\n data.projects[0].alternatives : false\r\n if (!!alignmentResp && !!alignmentResp.node) {\r\n const filteredAlignments = correctAlternativeForMap(alignmentResp.node)\r\n dispatch(setAlignmentInfo(filteredAlignments[0]))\r\n }\r\n })\r\n });\r\n\r\n\r\n //const data = props.data\r\n // const [updateAlternative,\r\n // { loading: updateMutationLoading, error: updateMutationError }\r\n // ] = useMutation(UPDATE_ALTERNATIVE);\r\n\r\n const refreshSegments = newSeg => {\r\n if (!!alignmentInfo && !!Object.keys(alignmentInfo).length) {\r\n const alignmentInfoObj = alignmentInfo\r\n if (!!alignmentInfoObj && !!alignmentInfoObj.directions) {\r\n alignmentInfoObj.directions[direction].segments = newSeg\r\n }\r\n dispatch(setAlignmentInfo(alignmentInfoObj))\r\n\r\n let allAlignments = alignments.map(a => {\r\n if (parseInt(a.alternative_id) === parseInt(alternative_id)) {\r\n return alignmentInfoObj\r\n }\r\n return a\r\n })\r\n dispatch(setAllAlignments(allAlignments))\r\n }\r\n }\r\n\r\n const [updateSegment,\r\n { loading: updateSegmentMutationLoading, error: updateSegmentMutationError }\r\n ] = useMutation(UPDATE_SEGMENT, {\r\n onCompleted: ((data) => {\r\n refreshSegments(data.updateSegment)\r\n })\r\n });\r\n\r\n const [addSegment,\r\n { loading: postMutationLoading, error: postMutationError }\r\n ] = useMutation(POST_SEGMENT, {\r\n onCompleted: ((data) => {\r\n refreshSegments(data.addSegment)\r\n })\r\n });\r\n\r\n const [deleteSegment,\r\n { loading: postDeleteMutationLoading, error: postDeleteMutationError }\r\n ] = useMutation(DELETE_SEGMENT, {\r\n onCompleted: ((data) => {\r\n refreshSegments(data.deleteSegment)\r\n })\r\n });\r\n\r\n // choose direction \r\n // const [openAlternative, setOpenAlternative] = useState(false);\r\n // const [alternativeId, setAlternativeId] = useState(0);\r\n const [modalShow, setModalShow] = useState(false);\r\n const [segmentModalShow, setSegmentModalShow] = useState(false);\r\n const [segmentIndex, setSegmentIndex] = useState(0);\r\n\r\n\r\n // default constant values\r\n const defaultSegmentAadt = 20000\r\n const defaultSegmentPrcHeavy = 15;\r\n const defaultAnnualIncCars = 1;\r\n const defaultAnnualIncHeavy = 1.5;\r\n\r\n // update variables \r\n // const [segmentAadt, setSegmentAadt] = useState(defaultSegmentAadt);\r\n // const [prcHeavy, setPrcHeavy] = useState(defaultSegmentPrcHeavy);\r\n const [cars, setCars] = useState(defaultSegmentAadt * (100 - defaultSegmentPrcHeavy) / 100);\r\n const [trucks, setTrucks] = useState((defaultSegmentAadt * (defaultSegmentPrcHeavy) / 100) * (2 / 3));\r\n const [trucksWt, setTrucksWt] = useState((defaultSegmentAadt * (defaultSegmentPrcHeavy) / 100) * (1 / 3));\r\n const [annualIncCars, setAnnualIncCars] = useState(defaultAnnualIncCars);\r\n const [annualIncHeavy, setAnnualIncHeavy] = useState(defaultAnnualIncHeavy);\r\n // const [aName, setAName] = useState();\r\n // const [aStartYear, setAStartYear] = useState();\r\n // const [aEndYear, setAEndYear] = useState();\r\n // const [localAlternative, setLocalAlternative] = useState('');\r\n\r\n // segment update variables\r\n // const [segmentUpdateAadt, setSegmentUpdateAadt] = useState(null);\r\n // const [segmentUpdatePrcHeavy, setSegmentUpdatePrcHeavy] = useState(null);\r\n\r\n const [segmentToEdit, setSegmentToEdit] = useState(null);\r\n\r\n // useEffect(() => {\r\n // console.log(data)\r\n // setLocalAlternative(data)\r\n // if (data){\r\n // data.projects[0].alternatives.map((element)=>{\r\n // console.log(element)\r\n // })}\r\n // }, [data])\r\n\r\n\r\n if (error) return Error fetching data
;\r\n\r\n // if (updateMutationLoading) return Unable to update alternative
;\r\n\r\n if (postMutationError) return Unable to add segment
;\r\n if (updateSegmentMutationError) return Unable to update segment
;\r\n\r\n if (postDeleteMutationError) return Unable to delete segment...
\r\n\r\n const toggleEditMap = () => {\r\n // setSegmentAadt(defaultSegmentAadt);\r\n // setPrcHeavy(defaultSegmentPrcHeavy);\r\n setCars(defaultSegmentAadt * (100 - defaultSegmentPrcHeavy) / 100);\r\n setTrucks((defaultSegmentAadt * (defaultSegmentPrcHeavy) / 100) * (2 / 3));\r\n setTrucksWt((defaultSegmentAadt * (defaultSegmentPrcHeavy) / 100) * (1 / 3));\r\n setAnnualIncCars(defaultAnnualIncCars);\r\n setAnnualIncHeavy(defaultAnnualIncHeavy);\r\n setEditMap(!editMap);\r\n }\r\n\r\n const untoggleEditMap = () => {\r\n setEditMap(!editMap);\r\n }\r\n\r\n const toggleSegmentEdit = (segment_id, i) => {\r\n\r\n // setSegmentUpdateAadt(null);\r\n // setSegmentUpdatePrcHeavy(null);\r\n setCars(null);\r\n setTrucks(null);\r\n setTrucksWt(null);\r\n setAnnualIncCars(null);\r\n setAnnualIncHeavy(null);\r\n setSegmentModalShow(true)\r\n setSegmentIndex(i)\r\n\r\n setSegmentToEdit(segment_id);\r\n }\r\n\r\n\r\n const handleInputChange = (name, e) => {\r\n const value = e.target.value;\r\n\r\n switch (name) {\r\n // alternative values\r\n // case 'name':\r\n // setAName(value);\r\n // break;\r\n // case 'start_year':\r\n // setAStartYear(value);\r\n // break;\r\n // case 'end_year':\r\n // setAEndYear(value);\r\n // break;\r\n // segment values\r\n // case 'year':\r\n // setYear(value);\r\n // break;\r\n // case 'segmentAadt':\r\n // setSegmentAadt(cars + trucks + trucksWt)\r\n // break;\r\n case 'segmentUpdateCars':\r\n setCars(value);\r\n // setSegmentAadt(value + trucks + trucksWt)\r\n // setPrcHeavy(Math.round((trucks + trucksWt) / (value + trucks + trucksWt)) * 100)\r\n break;\r\n case 'segmentUpdateTrucks':\r\n setTrucks(value);\r\n // setSegmentAadt(cars + value + trucksWt)\r\n // setPrcHeavy(Math.round((value + trucksWt) / (cars + value + trucksWt)) * 100)\r\n break;\r\n case 'segmentUpdateTrucksWt':\r\n setTrucksWt(value);\r\n // setSegmentAadt(cars + trucks + value)\r\n // setPrcHeavy(Math.round((trucks + value) / (cars + trucks + value)) * 100)\r\n break;\r\n // case 'prcHeavy':\r\n // setPrcHeavy(Math.round((trucks + trucksWt) / (cars + trucks + trucksWt)) * 100);\r\n // // setCars(segmentAadt * (100 - value) / 100);\r\n // // setTrucks((segmentAadt * (value) / 100) * (2 / 3));\r\n // // setTrucksWt((segmentAadt * (value) / 100) * (1 / 3));\r\n // break;\r\n // case 'segmentUpdateAadt':\r\n // setSegmentUpdateAadt(cars + trucks + value);\r\n // break;\r\n // case 'segmentUpdatePrcHeavy':\r\n // setSegmentUpdatePrcHeavy(Math.round((trucks + trucksWt) / (cars + trucks + trucksWt)) * 100);\r\n // break;\r\n case 'cars':\r\n setCars(value);\r\n // setSegmentAadt(value + trucks + trucksWt)\r\n // setPrcHeavy(Math.round((trucks + trucksWt) / (value + trucks + trucksWt)) * 100)\r\n break;\r\n case 'trucks':\r\n setTrucks(value);\r\n // setSegmentAadt(cars + value + trucksWt)\r\n // setPrcHeavy(Math.round((value + trucksWt) / (cars + value + trucksWt)) * 100)\r\n break;\r\n case 'trucksWt':\r\n setTrucksWt(value);\r\n // setSegmentAadt(cars + trucks + value)\r\n // setPrcHeavy(Math.round((trucks + value) / (cars + trucks + value)) * 100)\r\n break;\r\n case 'annualIncCars':\r\n setAnnualIncCars(value);\r\n break;\r\n case 'annualIncHeavy':\r\n setAnnualIncHeavy(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const handleDeleteSegment = async ({ segment_id }) => {\r\n deleteSegment({\r\n variables: {\r\n segment_id,\r\n //segment_data: updatedSegmentData,\r\n //old_segments: updatedSegments,\r\n }\r\n })\r\n }\r\n\r\n const handleOnHide = () => {\r\n setSegmentModalShow(false)\r\n setSegmentToEdit(null)\r\n }\r\n\r\n const handleSegFormSubmit = (e, info, segLength = 0) => {\r\n e.preventDefault()\r\n if (segmentToEdit !== null) {\r\n const { segment_id, aadt_cars, aadt_trucks, aadt_trucks_with_trailer, annual_increase_cars, annual_increase_heavy } = info\r\n updateSegment({\r\n variables: {\r\n segment_id: segment_id,\r\n data: {\r\n //aadt: segmentUpdateAadt ? parseFloat(segmentUpdateAadt) : aadt,\r\n //prc_heavy: segmentUpdatePrcHeavy ? parseFloat(segmentUpdatePrcHeavy) : prc_heavy,\r\n ...(segLength > 1 && { start_index: mapCoordinateId - 1 }),\r\n aadt_cars: cars ? parseFloat(cars) : aadt_cars,\r\n aadt_trucks: trucks ? parseFloat(trucks) : aadt_trucks,\r\n aadt_trucks_with_trailer: trucksWt ? parseFloat(trucksWt) : aadt_trucks_with_trailer,\r\n annual_increase_cars: annualIncCars ? parseFloat(annualIncCars) : annual_increase_cars,\r\n annual_increase_heavy: annualIncHeavy ? parseFloat(annualIncHeavy) : annual_increase_heavy\r\n }\r\n }\r\n })\r\n } else {\r\n addSegment({\r\n variables: {\r\n new_segment: {\r\n directions_id: parseInt(info.directions_id),\r\n year: parseInt(info.segments[0].year),\r\n //aadt: parseFloat(segmentAadt),\r\n //prc_heavy: parseFloat(prcHeavy),\r\n aadt_cars: parseFloat(cars),\r\n aadt_trucks: parseFloat(trucks),\r\n aadt_trucks_with_trailer: parseFloat(trucksWt),\r\n annual_increase_cars: parseFloat(annualIncCars),\r\n annual_increase_heavy: parseFloat(annualIncHeavy),\r\n start_index: (mapCoordinateId > 0) ? (mapCoordinateId - 1) : 0\r\n }\r\n }\r\n })\r\n\r\n setEditMap(false);\r\n setCars(null);\r\n setTrucks(null);\r\n setTrucksWt(null);\r\n setAnnualIncCars(null);\r\n setAnnualIncHeavy(null);\r\n }\r\n\r\n\r\n setSegmentModalShow(false)\r\n setSegmentToEdit(null)\r\n }\r\n\r\n const segData = (!!alignmentInfo && !!alignmentInfo.directions && alignmentInfo.directions[direction] && alignmentInfo.directions[direction].segments_data)\r\n ? alignmentInfo.directions[direction].segments_data : []\r\n\r\n const { minChainage, maxChainage } = getMinMaxChainageVal(segData)\r\n return (\r\n \r\n {\r\n (!!fetchLoading || !!postMutationLoading || !!updateSegmentMutationLoading || !!postDeleteMutationLoading) && \r\n {!!segmentModalShow &&\r\n
\r\n }\r\n\r\n {!!modalShow &&
setModalShow(false)}\r\n />}\r\n \r\n \r\n \r\n Alignment Details \r\n \r\n Name Action \r\n \r\n \r\n {alignmentInfo.name} \r\n \r\n setModalShow(true)}>\r\n Edit Alternative\r\n \r\n \r\n \r\n \r\n \r\n \r\n
}\r\n \r\n \r\n \r\n \r\n Segments \r\n \r\n {\r\n setDirection(0)\r\n }}>\r\n Direction 1\r\n \r\n {\r\n setDirection(1)\r\n }}>\r\n Direction 2\r\n \r\n */}\r\n \r\n \r\n \r\n Add New Segment }\r\n {editMap &&\r\n <>\r\n Click on Map to split it and add Segment
\r\n Undo ADD Mode \r\n \r\n }\r\n \r\n
\r\n \r\n {alignmentInfo.directions[direction] && \r\n \r\n \r\n \r\n \r\n {t('Segment')} \r\n {t('Year')} \r\n {t('segmentAadt')} \r\n {t('Start Distance')} \r\n {t('% heavy')} \r\n {t('Cars')} \r\n {t('Trucks')} \r\n {t('Trucks + T')} \r\n {t('Annual Increase cars')} \r\n {t('Annual Increase heavy')} \r\n {'Edit'} \r\n \r\n \r\n \r\n {alignmentInfo.directions[direction].segments.map((segment, i) => {\r\n const calculatedVal = Math.round((((segment.aadt_trucks || 0) + (segment.aadt_trucks_with_trailer || 0)) / ((segment.aadt_cars || 0) + (segment.aadt_trucks || 0) + (segment.aadt_trucks_with_trailer || 0))) * 100, 2)\r\n return (\r\n \r\n {segment.start_index} \r\n {segment.year} \r\n {(segment.aadt_cars + segment.aadt_trucks + segment.aadt_trucks_with_trailer)} \r\n {getStartDistanceToSegment(segment.start_index, segData) + ' - ' + segment.start_index} \r\n {isNaN(calculatedVal) ? '-' : calculatedVal} \r\n {segment.aadt_cars} \r\n {segment.aadt_trucks} \r\n {segment.aadt_trucks_with_trailer} \r\n {segment.annual_increase_cars} \r\n {segment.annual_increase_heavy} \r\n { toggleSegmentEdit(segment.segment_id, i)} >Edit }\r\n \r\n {segmentToEdit !== segment.segment_id && (segment.start_index !== 0) &&\r\n ( {\r\n confirmAlert({\r\n customUI: values => handleDeleteSegment(segment)} />\r\n })\r\n }\r\n }>Delete )\r\n }\r\n {/* {segmentToEdit === segment.segment_id && segment.segment_order_no === 1 && ''} */}\r\n \r\n \r\n )\r\n })}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default TrafficInputForm","import React, { useState, useEffect, useContext } from \"react\";\r\nimport TrafficInputFormIndividual from \"./traffic/TrafficInputFormIndividual\";\r\nimport { Tab, Container, Tabs } from \"react-bootstrap\";\r\nimport FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\";\r\n\r\n\r\nconst Settings = ({ match }) => {\r\n const { setGlobalBrandCrumb } = useContext(FuelSaveGlobalContext);\r\n\r\n const [key, setKey] = useState('traffic');\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Individual Settings\")\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n \r\n setKey(k)}>\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default Settings","import { Modal, Button } from \"react-bootstrap\"\r\n\r\nconst Popup = ({ title = \"Add Alignment\", show, onHide, children }) => (\r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n {children} \r\n \r\n Close \r\n \r\n \r\n)\r\n\r\nexport default Popup","import React from 'react'\r\nimport './index.scss'\r\n\r\nconst CostCircle = () => (\r\n \r\n
\r\n Energy\r\n
\r\n
\r\n
\r\n
\r\n \r\n Direction 1 \r\n
\r\n \r\n \r\n CSV format only | Max size 15 mb\r\n \r\n
\r\n -------------------------------------------------------------------------------------
\r\n \r\n Direction 2 \r\n
\r\n \r\n CSV format only | Max size 15 mb \r\n
\r\n \r\n)\r\n\r\nexport default CSVImporter","import React from 'react'\r\nimport './index.scss'\r\n\r\nconst LandXMLInput = ({\r\n id = '',\r\n type = 'text',\r\n name,\r\n label,\r\n value,\r\n errMsg = false,\r\n className = '',\r\n placeholder = '',\r\n handleOnFocus,\r\n handleOnBlur,\r\n handleOnChange\r\n}) => (\r\n \r\n
{label} \r\n
!!handleOnFocus && handleOnFocus(e)}\r\n onBlur={e => !!handleOnBlur && handleOnBlur(e)}\r\n onChange={e => !!handleOnChange && handleOnChange(e)}\r\n />\r\n {!!errMsg && {typeof errMsg === 'string' ? errMsg : errMsg[0]}
}\r\n \r\n {label} \r\n !!handleOnChange && handleOnChange(e)}>\r\n {label}: \r\n {!!options.length && options.map((op, i) =>\r\n !!op.name && {op.name} \r\n )}\r\n \r\n
\r\n)\r\n\r\nexport default LandXMLSelect","import React, { Fragment } from 'react'\r\nimport { floatWithDeci, oppositeDir } from '../../../../constant/helpers'\r\nimport SpinLoader from '../../../common/SpinLoader'\r\nimport LandXMLInput from '../LandXMLInput'\r\nimport LandXMLSelect from '../LandXMLSelect'\r\nimport './index.scss'\r\n\r\nconst directionArr = [\r\n { name: 'East', value: 'East' },\r\n { name: 'West', value: 'West' },\r\n { name: 'North', value: 'North' },\r\n { name: 'South', value: 'South' }\r\n]\r\n\r\nconst LandXMLImporter = ({\r\n handleBlurNFocus, alignmentOpts, selectedOpts,\r\n data, xmlData, setActiveXMLAlign, xmlLoader = false,\r\n errResp, handleXmlChoose, setXMLData, updateXmlData\r\n}) => {\r\n\r\n const handleSelect = (e, i) => {\r\n selectedOpts[i] = parseInt(e.target.value)\r\n setActiveXMLAlign(e.target.value)\r\n xmlData.selectedOpts = selectedOpts\r\n xmlData.dataList[i] = (xmlData.alignmentListArr).find(a => a.idx === parseInt(e.target.value))\r\n // TODO: WIP For testing\r\n const oppositeIns = (xmlData.alignmentListArr).find(a => a.idx === selectedOpts[i === 0 ? 1 : 0])\r\n if (!!oppositeIns && !!oppositeIns.direction) {\r\n oppositeIns.direction = oppositeDir(oppositeIns.direction)\r\n xmlData.dataList[i === 0 ? 1 : 0] = oppositeIns\r\n }\r\n setXMLData({ ...xmlData })\r\n }\r\n\r\n return (\r\n \r\n {!!xmlLoader &&
}\r\n
\r\n Load LandXML \r\n
\r\n\r\n
\r\n handleBlurNFocus(e)}\r\n handleOnBlur={e => handleBlurNFocus(e, false)}\r\n handleOnChange={e => {\r\n xmlData.dataList[0][\"name\"] = e.target.value\r\n setXMLData({ ...xmlData })\r\n }} />\r\n handleBlurNFocus(e)}\r\n handleOnBlur={e => handleBlurNFocus(e, false)}\r\n handleOnChange={e => updateXmlData({ epsgCode: e.target.value })} />\r\n
\r\n {\r\n !!data.length &&\r\n
\r\n {\r\n data.map((al, i) => {\r\n let inputHtml = [];\r\n for (const [k, v] of Object.entries(al)) {\r\n ((k !== 'name') && (k !== 'step') && (k !== 'idx') && (k !== 'direction')) && inputHtml.push(\r\n
handleBlurNFocus(e)}\r\n handleOnBlur={e => handleBlurNFocus(e, false)}\r\n handleOnChange={e => {\r\n xmlData.dataList[i][k] = k === 'name' ? e.target.value : floatWithDeci(e.target.value || 0)\r\n setXMLData({ ...xmlData })\r\n }} />\r\n )\r\n }\r\n\r\n if ((i > 0) && !!xmlData.useSame) return null\r\n\r\n const filteredList = alignmentOpts.filter(a => a.idx !== selectedOpts[i === 0 ? 1 : 0])\r\n return \r\n \r\n handleSelect(e, i)} />\r\n
\r\n \r\n
{inputHtml}
\r\n
\r\n {\r\n if (!!xmlData.dataList[i]) {\r\n xmlData.dataList[i].direction = e.target.value\r\n if (xmlData.dataList.length > 1) {\r\n xmlData.dataList[i === 0 ? 1 : 0].direction = oppositeDir(e.target.value)\r\n }\r\n setXMLData({ ...xmlData })\r\n }\r\n }} />\r\n handleBlurNFocus(e)}\r\n handleOnBlur={e => handleBlurNFocus(e, false)}\r\n handleOnChange={e => {\r\n if (!!xmlData.dataList[i]) {\r\n xmlData.dataList[i].step = parseInt(e.target.value)\r\n setXMLData({ ...xmlData })\r\n }\r\n }} />\r\n
\r\n
\r\n })\r\n }\r\n\r\n {\r\n // HINT: For now, We're not modifying xml in case of multiple alignments\r\n alignmentOpts.length > 1 && \r\n Use same alignment for other direction \r\n
\r\n }\r\n \r\n }\r\n
\r\n
setActiveTab('csv')}>CSV
\r\n
setActiveTab('xml')}>XML
\r\n
\r\n \r\n)\r\n\r\nexport default AddAlignment","import React from 'react'\r\nimport './index.scss'\r\n\r\nconst LabelSelectBox = ({\r\n name,\r\n label,\r\n value,\r\n nameKey = 'name',\r\n valueKey = 'value',\r\n options = [],\r\n className = '',\r\n parentClassName = '',\r\n handleOnChange\r\n}) => (\r\n \r\n {label} \r\n !!handleOnChange && handleOnChange(e)}>\r\n {!!options.length && options.map((op, i) =>\r\n !!op[nameKey] && {op[nameKey]} \r\n )}\r\n \r\n
\r\n)\r\n\r\nexport default LabelSelectBox","import React, { useEffect, useState } from 'react'\r\nimport { toast } from 'react-toastify'\r\nimport { sleep } from '../../../../constant/helpers'\r\nimport LabelSelectBox from '../../../common/LabelSelectBox'\r\nimport Popup from '../Popup'\r\n\r\nconst CopyTraffic = ({ trafficModal, onHide, alignments }) => {\r\n const [copyProcess, setCopyProcess] = useState(false);\r\n const [refAlignmentId, setRefAlignmentId] = useState(false);\r\n\r\n useEffect(() => {\r\n if (!!alignments && alignments.length > 1) {\r\n setRefAlignmentId(alignments[0].alternative_id)\r\n }\r\n }, [alignments])\r\n const submitCopyTraffic = async (e) => {\r\n e.preventDefault()\r\n try {\r\n setCopyProcess(true)\r\n await sleep()\r\n setCopyProcess(false)\r\n toast.success('Backend Stuff Pending - WIP')\r\n onHide()\r\n } catch (err) {\r\n toast.error('Backend Stuff Pending - Error - WIP')\r\n setCopyProcess(false)\r\n onHide()\r\n }\r\n }\r\n\r\n if (!trafficModal) return null\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default CopyTraffic","import React, { useState, useEffect, useContext, useCallback } from \"react\"\r\nimport csv from \"csv\"\r\nimport axios from \"axios\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport { useHistory } from 'react-router-dom'\r\nimport { toast } from 'react-toastify'\r\nimport { useDispatch, useSelector } from \"react-redux\"\r\nimport Popup from './Popup'\r\nimport { requestBody3 } from \"../../../utils/aiRequestBodyUtils\"\r\n\r\nimport { Col, Container, Button, Row, Table } from \"react-bootstrap\"\r\nimport FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\"\r\nimport \"./summary.scss\"\r\n// import ACTIONS from '../../../utils/action'\r\nimport { // useQuery, useLazyQuery, \r\n gql, useMutation\r\n} from \"@apollo/client\"\r\n//import { GET_VALUES, POST_ALTERNATIVE } from \"../../../utils/apolloutils\";\r\nimport Tooltip from '@material-ui/core/Tooltip'\r\nimport TextField from '@material-ui/core/TextField'\r\nimport AddIcon from '@material-ui/icons/Add'\r\nimport { confirmAlert } from 'react-confirm-alert'\r\nimport CostCircle from \"./CostCircle\"\r\nimport Icon from \"../../common/Icons\"\r\nimport { floatWithDeci, handleCSVArr, isCordValid, presumptionObj, projectInfoToStorage } from \"../../../constant/helpers\"\r\nimport SpinLoader from \"../../common/SpinLoader\"\r\nimport { CSV_NAME_REGEX, DEFAULT_EPSG, DEFAULT_EPSG_CODE, PER_PAGE } from \"../../../constant\"\r\nimport ConfirmAlertPopup from \"../../common/ConfirmAlertPopup\"\r\nimport AddAlignment from \"./AddAlignment\"\r\nimport { colorCodes } from \"../../../constant/colors\"\r\nimport { fetchAllAlignments } from \"../../../actions/alignment\"\r\nimport AlignmentPageWidget from \"./AlignmentPageWidget\"\r\nimport CopyTraffic from \"./CopyTraffic\"\r\n\r\nconst { WHITE_1, BLACK_1 } = colorCodes\r\nconst Summary = () => {\r\n\r\n const { register, handleSubmit, watch } = useForm();\r\n const { currency, carConfig, truckConfig } = useSelector(state => state.global)\r\n const { alignments, activePage, isProcessing } = useSelector(state => state.alignments)\r\n const { presumptions } = useSelector(state => state.presumptions)\r\n\r\n const {\r\n // refreshProject, setRefreshProject,\r\n // globalForcastList, forcastDispatch,\r\n globalProjectNumber,\r\n apiAccessToken, // setApiAccessToken,\r\n // globalForcastListNew, setGlobalForcastListNew,\r\n // globalBrandCrumb, \r\n setGlobalBrandCrumb\r\n } = useContext(FuelSaveGlobalContext);\r\n\r\n const [file1, setFile1] = useState(null);\r\n const [file2, setFile2] = useState(null);\r\n const [loading, setloading] = useState(false);\r\n const [adjsutedListCO2_new, setAdjsutedListCO2_new] = useState('');\r\n const [adjsutedListCost_new, setAdjsutedListCost_new] = useState('');\r\n const [adjsutedListEnergy_new, setAdjsutedListEnergy_new] = useState('');\r\n const [modalShow, setModalShow] = useState(false);\r\n const [trafficModal, setTrafficModal] = useState(false);\r\n const [querySearch, setQuerySearch] = useState('');\r\n const [errorMessage, setErrorMessage] = useState(false);\r\n const [errResp, setErrResp] = useState({});\r\n const [activeTab, setActiveTab] = useState('csv');\r\n const [xmlLoader, setXmlLoader] = useState(false);\r\n const [activeXMLAlign, setActiveXMLAlign] = useState(0);\r\n const xmlDefaultState = {\r\n epsgCode: '',\r\n alignmentOpts: [],\r\n dataList: [{ name: '', start: 0, end: 0, direction: 'East', step: 20, idx: 0 }],\r\n selected: [],\r\n useSame: false,\r\n alignmentListArr: [{ name: '', start: 0, end: 0, direction: 'East', step: 20, idx: 0 }],\r\n numberOfAlignments: 1,\r\n xml: ''\r\n }\r\n const [xmlData, setXMLData] = useState(xmlDefaultState);\r\n\r\n // ***************STUFF for Forcast***************************** //\r\n\r\n const getDailyData = useCallback(async (\r\n startYearData,\r\n endYearData,\r\n segmentsDir1,\r\n segmentsDir2,\r\n segmentsDataDir1,\r\n segmentsDataDir2,\r\n presumptionsData,\r\n index\r\n ) => {\r\n const presumptions = presumptionObj(presumptionsData[0])\r\n\r\n const startYear = startYearData ? startYearData : 2020;\r\n const endYear = endYearData ? endYearData : 2041;\r\n\r\n const requestBodyDir1 = {\r\n return_option: 3,\r\n start_year: startYear,\r\n end_year: endYear,\r\n // end_year: startYear + 20, // C wants the prognosis to be not dependent on the endYear\r\n fuel_distribution_cars: carConfig,\r\n fuel_distribution_trucks: truckConfig,\r\n sensitivity_param_factors: {\r\n speed: 1,\r\n fuelprice: 1,\r\n emission: 1,\r\n AADTheavy: 1,\r\n },\r\n presumptions: presumptions,\r\n segments: segmentsDir1,\r\n segments_data: segmentsDataDir1,\r\n };\r\n\r\n const requestBodyDir2 = {\r\n return_option: 3,\r\n start_year: startYear,\r\n end_year: endYear,\r\n // end_year: startYear + 20, // C wants the prognosis to be not dependent on the endYear\r\n fuel_distribution_cars: carConfig,\r\n fuel_distribution_trucks: truckConfig,\r\n sensitivity_param_factors: {\r\n speed: 1,\r\n fuelprice: 1,\r\n emission: 1,\r\n AADTheavy: 1,\r\n },\r\n presumptions: presumptions,\r\n segments: segmentsDir2,\r\n segments_data: segmentsDataDir2,\r\n };\r\n\r\n const config = {\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n },\r\n };\r\n\r\n const AI_API_KEY = process.env.REACT_APP_AI_FUNCTION_API_KEY;\r\n const urlToken = process.env.REACT_APP_AI_FUNCTION_URL + '/api/HttpTrigger1?code=' + AI_API_KEY;\r\n\r\n try {\r\n const [responseDir1, responseDir2] = await Promise.all([\r\n axios.post(urlToken, endYear ? requestBodyDir1 : requestBody3, config),\r\n axios.post(urlToken, endYear ? requestBodyDir2 : requestBody3, config),\r\n ]);\r\n\r\n return [responseDir1, responseDir2];\r\n\r\n } catch (err) {\r\n // throw new Error('Unable to get a response.')\r\n return null;\r\n }\r\n\r\n // eslint-disable-next-line\r\n }, [currency])\r\n\r\n const setPresumptionData = useCallback(async (alternativeArr, presempArr) => {\r\n if (alternativeArr && presempArr) {\r\n const localSavingsAlternativetables = [];\r\n\r\n for (let index = 0; index < alternativeArr.length; index++) {\r\n const alternative = alternativeArr[index];\r\n const dailyData = await getDailyData(\r\n alternative.start_year,\r\n alternative.end_year,\r\n alternative.directions[0].segments,\r\n alternative.directions[1].segments,\r\n alternative.directions[0].segments_data,\r\n alternative.directions[1].segments_data,\r\n presempArr,\r\n index\r\n );\r\n\r\n if (!dailyData || (!!dailyData && (!dailyData[0] || !dailyData[1]))) {\r\n return false\r\n }\r\n\r\n if (!!dailyData && !!dailyData.length) {\r\n const responseDir1 = dailyData[0];\r\n const responseDir2 = dailyData[1];\r\n\r\n const year = responseDir1.data.year;\r\n\r\n const forecastData = [];\r\n\r\n year.map((yr, indx) => {\r\n const annual_co2 =\r\n responseDir1.data.annual_co2[indx] +\r\n responseDir2.data.annual_co2[indx];\r\n const annual_cost =\r\n responseDir1.data.annual_cost[indx] +\r\n responseDir2.data.annual_cost[indx];\r\n const annual_energy =\r\n responseDir1.data.annual_energy[indx] +\r\n responseDir2.data.annual_energy[indx];\r\n\r\n forecastData.push({\r\n year: yr,\r\n annual_co2: annual_co2,\r\n annual_cost: annual_cost,\r\n annual_energy: annual_energy\r\n });\r\n return yr\r\n });\r\n\r\n localSavingsAlternativetables.push({\r\n alternative_id: alternative.alternative_id,\r\n forecast_data: forecastData,\r\n });\r\n }\r\n }\r\n //console.log(localSavingsAlternativetables, \"localSavingsAlternativetables\")\r\n //forcastDispatch({ type: ACTIONS.PREDICTION, payload: localSavingsAlternativetables });\r\n\r\n return localSavingsAlternativetables\r\n }\r\n\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n useEffect(() => {\r\n\r\n setPresumptionData(alignments, presumptions).then((localSavingsAlternativetables) => {\r\n\r\n if (typeof localSavingsAlternativetables !== 'undefined' && !!localSavingsAlternativetables && !!localSavingsAlternativetables.length) {\r\n var listCO2 = []\r\n var listCost = []\r\n var listEnergy = []\r\n\r\n localSavingsAlternativetables.forEach(element => {\r\n listCO2.push(element.forecast_data[(element.forecast_data.length) - 1].annual_co2)\r\n listCost.push(element.forecast_data[(element.forecast_data.length) - 1].annual_cost)\r\n listEnergy.push(element.forecast_data[(element.forecast_data.length) - 1].annual_energy)\r\n });\r\n\r\n const makingRelative = (eleList) => {\r\n const max = Math.max(...eleList);\r\n const newList = []\r\n eleList.forEach((element) => {\r\n if ((element / max) === 1) {\r\n newList.push(((element / max)))\r\n }\r\n else {\r\n newList.push((1 - ((1 - (element / max))))) //change the factor like this if you wanna change it---> newList.push((1 - ((1 - (element / max)) * 2)))\r\n }\r\n })\r\n return newList\r\n }\r\n\r\n listCO2 = makingRelative(listCO2)\r\n listCost = makingRelative(listCost)\r\n listEnergy = makingRelative(listEnergy)\r\n //console.log(listCO2)\r\n\r\n setAdjsutedListCO2_new((listCO2))\r\n setAdjsutedListCost_new((listCost))\r\n setAdjsutedListEnergy_new((listEnergy))\r\n //setForcastColor([\"red\", \"blue\", \"green\"])\r\n //console.log(adjsutedListCO2_new, \"forcasted Data\")\r\n }\r\n })\r\n\r\n // eslint-disable-next-line\r\n }, [presumptions, alignments]);\r\n\r\n\r\n //*************************************************************************************************** */\r\n\r\n // const deleteAllAternative = async (project_id) => {\r\n // setloading(true);\r\n // /*await axios.post(props.url, {\r\n // query: ` mutation deleteAllAlternative($project_id:project_id)\r\n // {deleteAllAlternative(project_id:$project_id)}`,\r\n // variable: {\r\n // project_id\r\n // }\r\n // }, {\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': 'Bearer ' + apiAccessToken.accessToken\r\n // }\r\n // });*/\r\n // const parseProjectID = parseInt(globalProjectNumber)\r\n\r\n // mutationAlternativeDeleteFunction({\r\n // variable: {\r\n // project_id: parseProjectID\r\n // }\r\n // }).then(() => {\r\n // setData();\r\n // })\r\n // };\r\n\r\n let history = useHistory();\r\n const redirectButton = (alternative_id) => {\r\n history.push('/settings/' + alternative_id)\r\n\r\n }\r\n\r\n\r\n const deletAlternative = async (id) => {\r\n setloading(true);\r\n toast.info('Deleting...')\r\n mutationAlternativeDeleteAlternativeFunction({ variables: { alternative_id: id } })\r\n .then(() => setData())\r\n };\r\n\r\n const dispatch = useDispatch()\r\n async function setData() {\r\n await dispatch(fetchAllAlignments(globalProjectNumber))\r\n setloading(false)\r\n }\r\n\r\n const mutationAlternativeGQL = gql`\r\n mutation addAlternative($project_id:ID!,$dir1:[AddAlternativeDirInput!]!,\r\n $dir2:[AddAlternativeDirInput!]!) {\r\n addAlternative(project_id:$project_id,dir1:$dir1,dir2:$dir2) {\r\n alternative_id\r\n }\r\n }`;\r\n\r\n // const mutationAlternativeDELETEALLGQL = gql`\r\n // mutation deleteAllAlternative($project_id: ID!) {\r\n // deleteAllAlternative(project_id:$project_id)\r\n // }`;\r\n\r\n const mutationAlternativeDELETEGQL = gql`\r\n mutation deleteAlternative($alternative_id:ID!)\r\n {deleteAlternative(alternative_id:$alternative_id)}`;\r\n\r\n const [mutationAlternativeFunction] = useMutation(mutationAlternativeGQL, {\r\n onCompleted: (() => {\r\n setModalShow(false)\r\n })\r\n })\r\n // const [mutationAlternativeDeleteFunction, { muatatedDataDeleteALL }] = useMutation(mutationAlternativeDELETEALLGQL);\r\n const [mutationAlternativeDeleteAlternativeFunction] = useMutation(mutationAlternativeDELETEGQL);\r\n\r\n /*const { preLoading, error, data } = useQuery(getApolloDataNew, {\r\n variables: { project_ids: globalProjectNumber },\r\n });\r\n \r\n console.log(data, \"newdata\")*/\r\n\r\n //const [getNewData, { preLoading, data }] = useLazyQuery(getApolloDataNew); //Lets use it some other day // No promise based solution found\r\n\r\n const csvCheck = (data, direction) => {\r\n let csvError = false;\r\n //checking length\r\n if (data.length <= 4) {\r\n csvError = true;\r\n toast.error(\"Wrong length of the file - \" + direction);\r\n setloading(false);\r\n return csvError;\r\n }\r\n //checking chainage\r\n let chainage = 0;\r\n let chainage_new = 0;\r\n var BreakException = {};\r\n try {\r\n data.slice(1).forEach((element) => {\r\n chainage_new = parseInt(element[1]);\r\n if (\r\n chainage_new < chainage ||\r\n (chainage_new - chainage > 100) ||\r\n chainage_new === null\r\n ) {\r\n toast.error(\"CSV chainage is wrong - \" + direction);\r\n setloading(false);\r\n csvError = true;\r\n throw BreakException;\r\n }\r\n chainage = chainage_new;\r\n });\r\n return csvError;\r\n } catch (e) {\r\n if (e !== BreakException) {\r\n return csvError;\r\n }\r\n }\r\n };\r\n\r\n const fileDirectionCheck = (fileName, data, direction) => {\r\n let csvError = false;\r\n\r\n const directionOnName = fileName.split(\"-\")[1].split(\".\")[0];\r\n const directionInFile = data[1][7];\r\n\r\n if (directionInFile !== directionOnName) {\r\n setloading(false);\r\n csvError = true;\r\n toast.error(\"CSV direction wrong - \" + direction);\r\n return csvError;\r\n }\r\n\r\n return csvError;\r\n };\r\n\r\n const nameCheck = (fileName1, fileName2) => {\r\n let nameError = false;\r\n let directionOnName1 = fileName1.split(\"-\")[1].split(\".\")[0]; //The direction\r\n let directionOnName2 = fileName2.split(\"-\")[1].split(\".\")[0];\r\n\r\n let startingName1 = fileName1.split(\"-\")[0]; // The first name\r\n let startingName2 = fileName2.split(\"-\")[0];\r\n\r\n let format1 = fileName1.split(\"-\")[1].split(\".\")[1]; //format\r\n let format2 = fileName2.split(\"-\")[1].split(\".\")[1];\r\n\r\n\r\n let dict = {};\r\n dict[\"North\"] = \"South\";\r\n dict[\"South\"] = \"North\";\r\n dict[\"East\"] = \"West\";\r\n dict[\"West\"] = \"East\";\r\n\r\n //checking format\r\n if (format1 !== \"csv\" || format2 !== \"csv\") {\r\n nameError = true;\r\n setloading(false);\r\n toast.error(\"Please insert a CSV file\");\r\n return nameError;\r\n }\r\n\r\n if (startingName1 !== startingName2) {\r\n nameError = true;\r\n setloading(false);\r\n toast.error(\"Please insert the file from the same project\");\r\n return nameError;\r\n }\r\n\r\n if (directionOnName1 === directionOnName2) {\r\n nameError = true;\r\n setloading(false);\r\n toast.error(\"Same file name error\");\r\n return nameError;\r\n }\r\n if (dict[directionOnName1] !== directionOnName2) {\r\n nameError = true;\r\n setloading(false);\r\n toast.error(\"Same direction error\");\r\n return nameError;\r\n }\r\n return nameError;\r\n };\r\n\r\n\r\n const onSubmit = (data, e) => {\r\n\r\n const reader = new FileReader();\r\n const reader2 = new FileReader();\r\n setloading(true);\r\n\r\n try {\r\n let fileName1 = data.dir1[0].name;\r\n let fileName2 = data.dir2[0].name;\r\n\r\n let nameError = false;\r\n\r\n nameError = nameCheck(fileName1, fileName2);\r\n\r\n if (nameError === false) {\r\n reader.readAsBinaryString(data.dir1[0]);\r\n //reader.readAsText(data.dir1[0]);\r\n\r\n let dir1Data = null;\r\n reader.onload = (e) => {\r\n dir1Data = e.target.result;\r\n csv.parse(dir1Data, (err, data) => {\r\n let csvError = csvCheck(data, \"Direction1\");\r\n let csvError2 = fileDirectionCheck(fileName1, data, \"Direction1\");\r\n if (csvError === false && csvError2 === false) {\r\n toast.info(\"Direction 1 Uploaded\");\r\n setFile1(data);\r\n }\r\n });\r\n };\r\n\r\n let dir2Data = null;\r\n reader2.readAsBinaryString(data.dir2[0]);\r\n reader2.onload = (e) => {\r\n dir2Data = e.target.result;\r\n csv.parse(dir2Data, (err, data) => {\r\n let csvError = csvCheck(data, \"Direction2\");\r\n let csvError2 = fileDirectionCheck(fileName2, data, \"Direction2\");\r\n if (csvError === false && csvError2 === false) {\r\n toast.info(\"Direction 2 Uploaded\");\r\n setFile2(data);\r\n }\r\n });\r\n };\r\n }\r\n } catch (error) {\r\n setloading(false);\r\n toast.error(\"File Error\");\r\n }\r\n };\r\n\r\n const axiosReq = reqData => axios.post(process.env.REACT_APP_CONVERTER_URL + '/api/convert', reqData, {\r\n headers: {\r\n 'Authorization': 'Bearer ' + apiAccessToken.accessToken,\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n }\r\n })\r\n\r\n const xmlSubmit = async () => {\r\n setErrResp({})\r\n const { xml, dataList, selected, numberOfAlignments, epsgCode } = xmlData\r\n\r\n const alignReq = []\r\n selected.map((a, i) => {\r\n const singleRec = dataList.find(b => b.idx === a)\r\n alignReq[i] = {\r\n direction: !!singleRec && !!singleRec.direction ? singleRec.direction : '',\r\n idx: !!singleRec && !!singleRec.idx ? singleRec.idx : 0,\r\n start: !!singleRec && !!singleRec.start ? singleRec.start : 0,\r\n step: !!singleRec && !!singleRec.step ? singleRec.step : 10,\r\n stop: !!singleRec && !!singleRec.stop ? singleRec.stop : 0\r\n }\r\n return a\r\n })\r\n try {\r\n setXmlLoader(true)\r\n const resp = await axiosReq({\r\n alignments: alignReq,\r\n name: !!dataList[0] && !!dataList[0].name ? dataList[0].name : '',\r\n numberOfAlignments,\r\n xml,\r\n coordinateSystem: epsgCode ? epsgCode.replace('EPSG:', '') : DEFAULT_EPSG_CODE\r\n })\r\n\r\n if (!!resp && !!resp.data && !!resp.data.dir1 && !!resp.data.dir2) {\r\n csv.parse(resp.data.dir1, (err, data) => { setFile1(data) })\r\n csv.parse(resp.data.dir2, (err, data) => { setFile2(data) })\r\n toast.info('Uploading...')\r\n }\r\n setXmlLoader(false)\r\n } catch (e) {\r\n setXmlLoader(false)\r\n const errRes = e.response\r\n if (!!errRes && !!errRes.data) {\r\n if (!!errRes.data.ModelState) {\r\n setErrResp({ ...errResp, ...errRes.data.ModelState })\r\n } else if (!!errRes.data.Message) {\r\n setErrResp({ ...errResp, otherError: errRes.data.Message })\r\n } else {\r\n setErrResp({ ...errResp, otherError: 'Error During CSV Generation' })\r\n }\r\n }\r\n console.log('Error During CSV Generation:', !!e.response ? e.response : e)\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (file1 && file2) {\r\n setloading(true)\r\n const jsonArrayDir1 = handleCSVArr(file1)\r\n const jsonArrayDir2 = handleCSVArr(file2)\r\n //mutationAlternative(globalProjectNumber, props.url, jsonArrayDir1, jsonArrayDir2);\r\n\r\n const mutationAlternativeNew = (() => {\r\n mutationAlternativeFunction({\r\n variables: {\r\n project_id: globalProjectNumber,\r\n dir1: jsonArrayDir1,\r\n dir2: jsonArrayDir2,\r\n }\r\n }).then(() => setData())\r\n .catch((error) => {\r\n setErrorMessage(error.message)\r\n setloading(false)\r\n })\r\n\r\n })\r\n //calling the function // or you can use function\r\n mutationAlternativeNew()\r\n //()\r\n // when both files are updated combine them as json and send to API\r\n // ADD SEGMENT\r\n /*addAlternative({\r\n variables: {\r\n dir1: jsonArrayDir1,\r\n dir2: jsonArrayDir2,\r\n }\r\n // ,\r\n // refetchQueries: [{ query: GET_VALUES }],\r\n });*/\r\n // after that set files backto null\r\n setFile1(null);\r\n setFile2(null);\r\n //setRefreshProject(!refreshProject);\r\n //setData();\r\n\r\n }\r\n\r\n // eslint-disable-next-line\r\n }, [file1, file2]);\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Alignments\")\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n const validateInputs = (name, value) => {\r\n switch (name) {\r\n case 'name': {\r\n if (!!value && !CSV_NAME_REGEX.test(value)) {\r\n return 'Specail Character not allowed'\r\n } else if (!!value && !/\\D/.test(value)) {\r\n return 'Only numbers not allowed'\r\n }\r\n return ''\r\n }\r\n case 'start':\r\n case 'stop':\r\n case 'step': {\r\n if (value < 0 && value !== 0) {\r\n return 'Value should be greater than 0'\r\n }\r\n return ''\r\n }\r\n case 'epsgCode': {\r\n if (!!value && !isCordValid(value)) {\r\n return `Value should be like this: ${DEFAULT_EPSG}`\r\n }\r\n return ''\r\n }\r\n default:\r\n return null\r\n }\r\n }\r\n\r\n const handleBlurNFocus = (e, onFocus = true) => {\r\n const { name, value } = e.target\r\n const nameVal = name.replace(`_${activeXMLAlign}`, '')\r\n\r\n if (onFocus) {\r\n delete errResp[`input.${nameVal}`]\r\n delete errResp.otherError\r\n setErrResp({ ...errResp })\r\n } else {\r\n const nameVal = name.replace(`_${activeXMLAlign}`, '')\r\n setErrResp({ ...errResp, [`input.${nameVal}`]: validateInputs(nameVal, value) })\r\n }\r\n }\r\n\r\n const updateXmlData = info => setXMLData({ ...xmlData, ...info })\r\n\r\n const handleReaderEvent = event => {\r\n if (event.type === 'loadstart') {\r\n setXmlLoader(true)\r\n } else if (event.type === 'loadend') {\r\n setXmlLoader(false)\r\n }\r\n }\r\n\r\n const addReaderListeners = reader => {\r\n reader.addEventListener('loadstart', handleReaderEvent)\r\n reader.addEventListener('loadend', handleReaderEvent)\r\n }\r\n\r\n const handleXmlChoose = data => {\r\n const { files } = data.target\r\n const reader = new FileReader()\r\n\r\n if (!files.length) {\r\n updateXmlData(xmlDefaultState)\r\n return false\r\n }\r\n\r\n setXmlLoader(true)\r\n\r\n // Checking format\r\n if (files[0].type !== \"text/xml\") {\r\n setXmlLoader(false)\r\n toast.error(\"Please insert a XML file\")\r\n return false\r\n }\r\n addReaderListeners(reader)\r\n\r\n reader.readAsBinaryString(files[0])\r\n reader.onload = (e) => {\r\n const { result } = e.target\r\n const parser = new DOMParser()\r\n const xmlDoc = parser.parseFromString(result, \"text/xml\")\r\n\r\n if (xmlDoc.getElementsByTagName('parsererror').length) {\r\n toast.error('LandXML file is corrupted or unsupported. Check the user manual for more information')\r\n setXmlLoader(false)\r\n updateXmlData(xmlDefaultState)\r\n return false\r\n }\r\n const coordinateSys = xmlDoc.getElementsByTagName(\"CoordinateSystem\")\r\n\r\n let epsgCode = 'EPSG:'\r\n const alignmentListArr = []\r\n let alignmentNumb = 1\r\n for (var i = 0; i < coordinateSys.length; i++) {\r\n epsgCode = epsgCode + coordinateSys[i].getAttribute('epsgCode')\r\n }\r\n if (!isCordValid(epsgCode)) {\r\n setErrResp({ ...errResp, ['input.epsgCode']: `Value should be like this: ${DEFAULT_EPSG}` })\r\n } else {\r\n delete errResp['input.epsgCode']\r\n setErrResp({ ...errResp })\r\n }\r\n\r\n const alignmentList = xmlDoc.getElementsByTagName(\"Alignments\")\r\n const alignList = []\r\n const dataListOpts = []\r\n const selectedListOpts = []\r\n for (var j = 0; j < alignmentList.length; j++) {\r\n const alignmentElem = alignmentList[j].children\r\n alignmentNumb = alignmentElem.length\r\n for (var k = 0; k < alignmentElem.length; k++) {\r\n const name = alignmentElem[k].getAttribute('name')\r\n const start = floatWithDeci(alignmentElem[k].getAttribute('staStart'))\r\n const stop = Math.round(alignmentElem[k].getAttribute('length'))\r\n if (alignmentElem.length >= 1 && (k <= 1)) {\r\n selectedListOpts.push(k)\r\n dataListOpts.push({ name, start: (start < 0 ? 0 : start), stop, step: 20, direction: k === 0 ? 'East' : 'West', idx: k })\r\n }\r\n\r\n alignList.push({ name, idx: k })\r\n alignmentListArr.push({ name, start: (start < 0 ? 0 : start), stop, step: 20, direction: 'East', idx: k })\r\n\r\n if ((k === 0) && (!!name && !CSV_NAME_REGEX.test(name))) {\r\n setErrResp({\r\n ...errResp,\r\n ...{\r\n ...errResp.input,\r\n input: {\r\n name: validateInputs('name', name)\r\n }\r\n }\r\n })\r\n }\r\n }\r\n }\r\n updateXmlData({\r\n epsgCode,\r\n useSame: false,\r\n alignmentOpts: alignList,\r\n selected: selectedListOpts,\r\n dataList: dataListOpts,\r\n numberOfAlignments: alignmentNumb > 2 ? 2 : alignmentNumb, // HINT: For now, we're supporting 1 and 2 only\r\n alignmentListArr, xml: result.toString()\r\n })\r\n }\r\n setXmlLoader(false)\r\n }\r\n\r\n const validateForm = () => {\r\n let isValid = true\r\n const { dataList, epsgCode } = xmlData\r\n if ((activeTab === 'xml') &&\r\n (!epsgCode ||\r\n (!!dataList[0] && !dataList[0].name) ||\r\n (!!errResp && (!!errResp['input.epsgCode'] || !!errResp['input.name'])) ||\r\n (!!epsgCode && !isCordValid(epsgCode))\r\n )) {\r\n isValid = false\r\n }\r\n return isValid\r\n }\r\n\r\n const isCsvActive = activeTab === 'csv'\r\n\r\n const rederCodition = () => {\r\n if (errorMessage) {\r\n return Error: {errorMessage}
\r\n }\r\n else if (!!modalShow) {\r\n return (\r\n Too many alternatives. Should be less than 100. [Alpha Phase]
);\r\n }\r\n };\r\n\r\n const handleSearchSubmit = (e, data) => {\r\n const serachdata = watch()\r\n setQuerySearch(serachdata.Search)\r\n }\r\n\r\n const headersTable = [\"S.No\", \"Alignment\", \"Start Year\", \"End Year\", \"Forecast\", \"Action\"]\r\n\r\n const isDataFound = alignments && !!alignments.length\r\n const globalProjInfo = projectInfoToStorage()\r\n\r\n return (\r\n \r\n {(!!loading || !!isProcessing) && \r\n {\r\n setModalShow(false)\r\n setTrafficModal(false)\r\n setErrorMessage(false)\r\n }}>\r\n {rederCodition()}\r\n \r\n
\r\n\r\n {\r\n !!trafficModal && {\r\n setModalShow(false)\r\n setTrafficModal(false)\r\n setErrorMessage(false)\r\n }} />\r\n }\r\n \r\n \r\n \r\n {\r\n isDataFound && !!globalProjInfo ?\r\n <>\r\n {\r\n setModalShow(false)\r\n setTrafficModal(true)\r\n }}>\r\n Copy Reference Traffic\r\n }\r\n setModalShow(true)}>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {headersTable.map((item, index) => (\r\n {item} \r\n ))}\r\n \r\n \r\n \r\n {!!globalProjInfo && alignments &&\r\n alignments.filter(item => {\r\n return item.name.toLowerCase().includes(querySearch.toLowerCase())\r\n })\r\n\r\n .map((alternative, index) => (\r\n \r\n {(activePage === 1) ? (index + 1) : ((index + 1) + (PER_PAGE * (activePage - 1)))} \r\n {alternative.name} \r\n {globalProjInfo.start_year} \r\n {globalProjInfo.end_year} \r\n \r\n {(!!adjsutedListCO2_new.length && !!adjsutedListCost_new.length && !!adjsutedListEnergy_new.length) ?\r\n \r\n :\r\n loading...
}\r\n \r\n \r\n \r\n \r\n redirectButton(alternative.alternative_id)}> \r\n \r\n \r\n {\r\n confirmAlert({\r\n customUI: values => deletAlternative(alternative.alternative_id)} />\r\n })\r\n }}>\r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n
\r\n }\r\n {!!isDataFound &&
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Summary;\r\n","import React, { useState } from 'react'\r\nimport { useDispatch } from 'react-redux'\r\nimport { Modal, Form, Container, Button } from 'react-bootstrap'\r\nimport { fetchAllProjects } from '../../../actions/project'\r\nimport './project.scss'\r\nimport { addNewProject } from '../../../utils/project'\r\n\r\nconst AddProjectPopup = ({\r\n setIsLoading,\r\n isLoading = false, newProjectName, show, onHide\r\n}) => {\r\n const dispatch = useDispatch()\r\n const currentDate = new Date()\r\n\r\n const [pName, setPName] = useState('')\r\n const [startYear, setStartYear] = useState(currentDate.getFullYear())\r\n const [endYear, setEndYear] = useState(2080)\r\n\r\n const handleInputChange = (name, e) => {\r\n const { value } = e.target\r\n switch (name) {\r\n case 'pName':\r\n setPName(value)\r\n break;\r\n case 'start_year':\r\n setStartYear(parseInt(value))\r\n break;\r\n case 'end_year':\r\n setEndYear(parseInt(value))\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const validateInput = name => {\r\n switch (name) {\r\n case 'name':\r\n return !pName\r\n case 'start_year':\r\n return !startYear || startYear < 2020 || endYear < startYear\r\n case 'end_year':\r\n return !endYear || endYear > 2080 || endYear < startYear\r\n default:\r\n return false\r\n }\r\n }\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault()\r\n setIsLoading(true)\r\n try {\r\n const data = await addNewProject({\r\n project_name: pName,\r\n start_year: parseInt(startYear),\r\n end_year: parseInt(endYear)\r\n })\r\n\r\n setIsLoading(false)\r\n if (!!data && !!data.data && !!data.data.data && !!data.data.data.addProject) {\r\n onHide()\r\n dispatch(fetchAllProjects())\r\n }\r\n } catch (e) {\r\n setIsLoading(false)\r\n console.log('createNewProject Error:', e)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n Add Project \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Close \r\n \r\n \r\n )\r\n}\r\n\r\nexport default AddProjectPopup","function _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\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"style\", null, \".a{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}\"));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(-0.5 -1.5)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n className: \"a\",\n d: \"M27.684,23.547a2.568,2.568,0,0,1-2.568,2.568H4.568A2.568,2.568,0,0,1,2,23.547V5.568A2.568,2.568,0,0,1,4.568,3H10.99l2.568,3.853H25.116a2.568,2.568,0,0,1,2.568,2.568Z\",\n transform: \"translate(0 0)\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n y2: 8,\n transform: \"translate(15 13)\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x2: 8,\n transform: \"translate(11 17)\"\n}));\n\nfunction SvgAddProject(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 28.684,\n height: 26.116,\n viewBox: \"0 0 28.684 26.116\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgAddProject);\nexport default __webpack_public_path__ + \"static/media/add_project.2f1cffe1.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState, useEffect, useContext } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport ArrowForwardIosOutlinedIcon from '@material-ui/icons/ArrowForwardIosOutlined';\r\nimport { Tooltip } from \"@material-ui/core\";\r\nimport { confirmAlert } from 'react-confirm-alert';\r\nimport { Col, Container, Button, Row, Table } from \"react-bootstrap\";\r\nimport { toast } from \"react-toastify\";\r\nimport { useHistory } from \"react-router\"\r\nimport ACTIONS from '../../../utils/action';\r\nimport FuelSaveGlobalContext from \"../../../context/FuelSaveGlobalContext\";\r\nimport AddProjectPopup from './AddProjectPopup'\r\nimport './project.scss'\r\nimport { ReactComponent as AddProject } from \"../../../assets/add_project.svg\"\r\nimport Icon from \"../../common/Icons\";\r\nimport { handleRequest } from \"../../../constant/helpers\";\r\nimport SpinLoader from \"../../common/SpinLoader\";\r\nimport ConfirmAlertPopup from \"../../common/ConfirmAlertPopup\";\r\nimport { fetchAllProjects } from \"../../../actions/project\";\r\n\r\nexport default function Projects() {\r\n\r\n const history = useHistory()\r\n const dispatch = useDispatch()\r\n const { autoOut } = useSelector(state => state.global)\r\n const { projects } = useSelector(state => state.projects)\r\n const {\r\n globalProjectNumber, projectNumberDispatch,\r\n projectNameDispatch,\r\n setGlobalBrandCrumb\r\n } = useContext(FuelSaveGlobalContext);\r\n\r\n // const [allProjectName, setAllProjectName] = useState([])\r\n // const [updateProjectID, setUpdateProjectID] = useState('')\r\n const [newProjectPopup, setNewProjectPopup] = useState(false)\r\n const [isLoading, setIsLoading] = useState(false)\r\n\r\n useEffect(() => {\r\n if (autoOut) {\r\n setNewProjectPopup(false)\r\n }\r\n }, [autoOut])\r\n\r\n const getProjectById = async (id) => {\r\n setIsLoading(true)\r\n try {\r\n const data = await handleRequest(\"post\", false, {\r\n query: `\r\n query{\r\n projects(project_ids:${id}){\r\n project_name\r\n project_id\r\n start_year\r\n end_year\r\n }\r\n }`\r\n })\r\n setIsLoading(false)\r\n if (!!data && !!data.data && !!data.data.data && !!data.data.data.projects) {\r\n const resp = data.data.data.projects\r\n localStorage.setItem('selectedProject', JSON.stringify(resp[0]))\r\n\r\n const projectName = resp[0].project_name\r\n const projectid = parseInt(resp[0].project_id)\r\n\r\n //Setting Default\r\n projectNameDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: projectName });\r\n\r\n //ID Change\r\n projectNumberDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: projectid });\r\n }\r\n } catch (e) {\r\n setIsLoading(false)\r\n console.log('getProjectById Error: ', e)\r\n }\r\n }\r\n\r\n const deletProject = async (id) => {\r\n setIsLoading(true)\r\n toast.info('Deleting...')\r\n try {\r\n await handleRequest('post', false, {\r\n query: `mutation deleteProject($project_id:ID!)\r\n {deleteProject(project_id:$project_id)}`,\r\n variables: {\r\n project_id: id,\r\n }\r\n }, 'application/json')\r\n\r\n setIsLoading(false)\r\n if (id === globalProjectNumber) {\r\n getProjectById(0)\r\n }\r\n callAllProject()\r\n } catch (e) {\r\n setIsLoading(false)\r\n console.log('deleteProject Error: ', e)\r\n }\r\n }\r\n\r\n const callAllProject = () => {\r\n dispatch(fetchAllProjects())\r\n }\r\n\r\n useEffect(() => {\r\n if (!projects.length) {\r\n callAllProject()\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Projects\")\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n \r\n {!!isLoading && !newProjectPopup && \r\n setNewProjectPopup(false)}\r\n />\r\n \r\n setNewProjectPopup(true)}>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n S.No \r\n Project ID \r\n Project Name \r\n Start Year \r\n End Year \r\n Action \r\n \r\n \r\n \r\n {projects.map((name, idx) => (\r\n \r\n {idx + 1} \r\n {name.project_id} \r\n {name.project_name} \r\n {name.start_year || '-'} \r\n {name.end_year || '-'} \r\n \r\n \r\n getProjectById(name.project_id)}> \r\n \r\n \r\n {\r\n history.push(`/projects/edit/${name.project_id}`)\r\n }}> \r\n \r\n \r\n {\r\n confirmAlert({\r\n customUI: values => deletProject(name.project_id)} />\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 ACTIONS from './action';\r\n\r\nfunction reducerPrediction(prediction, action) {\r\n switch (action.type) {\r\n case ACTIONS.PREDICTION:\r\n return action.payload;\r\n default:\r\n return prediction;\r\n }\r\n}\r\n\r\nfunction reducerProject(project, action) {\r\n switch (action.type) {\r\n case ACTIONS.PROJECT_NAME_CHANGE:\r\n return action.payload;\r\n case ACTIONS.PROJECT_NUMBER_CHANGE:\r\n return action.payload;\r\n case ACTIONS.PROJECT_GET_ALL:\r\n return action.payload;\r\n default:\r\n return project;\r\n }\r\n}\r\n\r\nfunction reducerProjects(project, action) {\r\n switch (action.type) {\r\n case ACTIONS.PROJECT_NAME_CHANGE:\r\n return action.payload;\r\n case ACTIONS.PROJECT_NUMBER_CHANGE:\r\n return action.payload;\r\n case ACTIONS.PROJECT_GET_ALL:\r\n return action.payload;\r\n default:\r\n return project;\r\n }\r\n}\r\n\r\n\r\nexport { reducerPrediction, reducerProject, reducerProjects };","import { useState } from \"react\"\r\nimport { Form, Button } from \"react-bootstrap\"\r\nimport { toast } from \"react-toastify\"\r\nimport axios from \"axios\"\r\nimport './index.scss'\r\n\r\nexport default function License({ apiAccessToken, logoutCallback }) {\r\n\r\n const [licenseKey, setLicenseKey] = useState(\"\");\r\n const [inputInvalid, setInputInvalid] = useState(false);\r\n\r\n const handleSubmit = async (evt) => {\r\n evt.preventDefault();\r\n\r\n if (inputInvalid) {\r\n return;\r\n }\r\n\r\n if(!licenseKey) {\r\n toast.error('Please enter license key')\r\n return false\r\n }\r\n\r\n try {\r\n const reponse = await axios({\r\n url: process.env.REACT_APP_LICENSE_API_URL + '/license',\r\n method: \"post\",\r\n headers: {\r\n 'Authorization': 'Bearer ' + apiAccessToken.accessToken\r\n },\r\n data: {\r\n license_key: licenseKey\r\n }\r\n });\r\n alert(reponse.data);\r\n window.location.replace('/');\r\n } catch (err) {\r\n if (err.response.status === 404) {\r\n setInputInvalid(true);\r\n toast.error(err.response.data);\r\n } else if (err.response.status === 403) {\r\n toast.error(err.response.data);\r\n window.location.replace('/');\r\n } else if (Number.isInteger(err.response.status)) {\r\n toast.error(err.response.data);\r\n } else {\r\n toast.error('Unknown error.');\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n Logout \r\n
\r\n )\r\n}","import React, { useEffect, useState } from 'react'\r\nimport './index.scss'\r\n\r\nconst TermsPopUp = () => {\r\n const apiAccessTokenObj = JSON.parse(sessionStorage.getItem(\"apiAccessTokenObj\"))\r\n const [termAgreed, setTermAgreed] = useState(false)\r\n const userId = !!apiAccessTokenObj && !!apiAccessTokenObj.uniqueId ? apiAccessTokenObj.uniqueId : false\r\n\r\n useEffect(() => {\r\n if (userId) {\r\n const termAccepted = `${userId}-accepted`\r\n const termAcceptedVal = sessionStorage.getItem(termAccepted)\r\n sessionStorage.setItem(termAccepted, termAcceptedVal)\r\n setTermAgreed(termAcceptedVal)\r\n }\r\n }, [apiAccessTokenObj, userId])\r\n\r\n const handleClick = () => {\r\n const termAccepted = `${userId}-accepted`\r\n sessionStorage.setItem(termAccepted, true)\r\n setTermAgreed(true)\r\n }\r\n\r\n if (termAgreed === 'true' || !userId) return null\r\n\r\n return (\r\n \r\n
\r\n WayWize uses local and session storage to improve the user experience and to collect usage statistics. By using this website, you accept the use of local and session storage.\r\n
\r\n
handleClick()}>Ok \r\n
\r\n
\r\n
\r\n
\r\n Your session has been logged out. Please refresh the window or
window.location.reload()}>Click Here
\r\n
\r\n
\r\n
\r\n
Your license will expire {moment(licenseValid).format(DATE_FORMAT)}. Contact your system administrator.
\r\n
setIsHide(true)}>X \r\n
\r\n Fuel Distribution values by country setCountryNCurrency(c)}>{c.country_name} forecast )}\r\n \r\n )\r\n}\r\n\r\nexport default FuelDistribution","import React from 'react'\r\nimport { Form, Row, Col } from 'react-bootstrap'\r\nimport { useSelector } from 'react-redux'\r\n\r\nconst PresumptionsForm = ({ presumptions, onChange }) => {\r\n const { currency } = useSelector(state => state.global)\r\n\r\n const handleChange = (event) => {\r\n let value = event.currentTarget.value\r\n\r\n if (value === 'true') {\r\n value = true;\r\n } else if (value === 'false') {\r\n value = false;\r\n }\r\n\r\n let presumptions_copy = { ...presumptions };\r\n presumptions_copy[event.currentTarget.name] = value\r\n onChange(presumptions_copy)\r\n }\r\n\r\n const presumption_titles = [\"Fuel type\", \"CO2 factor [kg/l]\", \"kWh factor [kWh/l]\", \"Engine efficiency [0-1]\", `Fuel price ${currency}`]\r\n const presumption_rows = [\r\n [\"Battery\", \"battery_co2\", \"battery_kwh\", \"battery_efficiency\", \"battery_cost\"],\r\n [\"Chargeable Hybrid\", \"chargable_hybrid_co2\", \"chargable_hybrid_kwh\", \"chargable_hybrid_efficiency\", \"chargable_hybrid_cost\"],\r\n [\"Diesel\", \"diesel_co2\", \"diesel_kwh\", \"diesel_efficiency\", \"diesel_cost\"],\r\n [\"Gasoline\", \"gasoline_co2\", \"gasoline_kwh\", \"gasoline_efficiency\", \"gasoline_cost\"],\r\n [\"Hydrogen\", \"hydrogen_co2\", \"hydrogen_kwh\", \"hydrogen_efficiency\", \"hydrogen_cost\"],\r\n [\"Nonchargeable Hybrid\", \"inchargeable_hybrid_co2\", \"inchargeable_hybrid_kwh\", \"inchargeable_hybrid_efficiency\", \"inchargeable_hybrid_cost\"]\r\n ]\r\n const additional_titles = [\"Car average speed [km/h]\", \"Truck average speed [km/h]\", \"MPD [mm]\", \"IRI [mm/m]\", 'MPD increase [mm/year]', 'IRI increase [mm/m/year]', 'IRI limit [mm/m]']\r\n const additional_row = [\"speed_car\", \"speed_truck\", \"mpd\", \"iri\", \"mpd_increase\", \"iri_increase\", \"iri_limit\"]\r\n\r\n return (\r\n <>\r\n Presumptions \r\n \r\n \r\n )\r\n}\r\n\r\nexport default PresumptionsForm","import React, { useState, useEffect, useContext } from 'react'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport { Form } from 'react-bootstrap'\r\nimport { toast } from 'react-toastify'\r\nimport FuelSaveGlobalContext from '../../../../context/FuelSaveGlobalContext'\r\nimport ACTIONS from '../../../../utils/action'\r\nimport { fetchAllProjects, getProjectInfoById, updateProjectInfoById } from '../../../../actions/project'\r\nimport { MAX_YEAR, MIN_YEAR } from '../../../../constant'\r\nimport './index.scss'\r\n\r\nconst EditForm = ({ match }) => {\r\n const { projectNumberDispatch, projectNameDispatch } = useContext(FuelSaveGlobalContext)\r\n const { id } = !!match && !!match.params ? match.params : {}\r\n\r\n const dispatch = useDispatch()\r\n const { isProcessing, project } = useSelector(state => state.projects)\r\n const [pName, setPName] = useState(project.project_name || '')\r\n const [startYear, setStartYear] = useState(project.start_year || 0)\r\n const [endYear, setEndYear] = useState(project.end_year || 0)\r\n\r\n useEffect(() => {\r\n const getProjectById = async (id) => {\r\n try {\r\n const data = await dispatch(getProjectInfoById(id))\r\n if (!!data && !!data.data && !!data.data.data && !!data.data.data.projects) {\r\n const resp = data.data.data.projects\r\n if (!!resp[0]) {\r\n const { project_id, project_name, start_year, end_year } = resp[0]\r\n const projectid = parseInt(project_id)\r\n\r\n setPName(project_name)\r\n setStartYear(start_year || 0)\r\n setEndYear(end_year || 0)\r\n\r\n //Setting Default\r\n projectNameDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: project_name })\r\n\r\n //ID Change\r\n projectNumberDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: projectid })\r\n }\r\n }\r\n } catch (e) {\r\n console.log('getProjectById Error: ', e)\r\n }\r\n }\r\n\r\n if (!!id) {\r\n getProjectById(id)\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n useEffect(() => {\r\n const { project_name, start_year, end_year } = project\r\n setPName(project_name)\r\n setStartYear(start_year)\r\n setEndYear(end_year)\r\n }, [project])\r\n\r\n const onSubmit = async (e) => {\r\n e.preventDefault()\r\n toast.info('Updating...')\r\n try {\r\n const projectResp = await dispatch(updateProjectInfoById({\r\n project_id: id,\r\n project_name: pName,\r\n start_year: parseInt(startYear),\r\n end_year: parseInt(endYear)\r\n }))\r\n\r\n if (!!projectResp && !!projectResp.data && !!projectResp.data.data && !!projectResp.data.data.updateProject) {\r\n toast.success('Updated Successfully')\r\n\r\n const resp = projectResp.data.data.updateProject\r\n const projectName = resp.project_name\r\n const projectid = parseInt(resp.project_id)\r\n\r\n projectNameDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: projectName });\r\n projectNumberDispatch({ type: ACTIONS.PROJECT_NAME_CHANGE, payload: projectid });\r\n\r\n dispatch(fetchAllProjects())\r\n }\r\n } catch (e) {\r\n toast.error('Update Failed')\r\n console.log('Project Edit Error:', e)\r\n }\r\n }\r\n\r\n const handleInputChange = (name, e) => {\r\n const value = e.target.value;\r\n switch (name) {\r\n case 'pName':\r\n setPName(value)\r\n break;\r\n case 'start_year':\r\n setStartYear(value)\r\n break;\r\n case 'end_year':\r\n setEndYear(value)\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const validateInput = name => {\r\n switch (name) {\r\n case 'name':\r\n return !pName\r\n case 'start_year':\r\n return !startYear || startYear < MIN_YEAR || endYear < startYear\r\n case 'end_year':\r\n return !endYear || endYear > MAX_YEAR || endYear < startYear\r\n default:\r\n return false\r\n }\r\n }\r\n\r\n const projName = !!project && !!project.project_name ? project.project_name : ''\r\n const isFormValid = (validateInput('name') || validateInput('start_year') || validateInput('end_year'))\r\n const errMsg = `You can only choose value between ${MIN_YEAR} and ${MAX_YEAR}`\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default EditForm\r\n","import React, { useState, useEffect } from 'react'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport { Form } from 'react-bootstrap'\r\nimport { toast } from 'react-toastify'\r\nimport { getProjectSettingsById, updateProjectSettingById } from '../../../../actions/setting'\r\n\r\nconst CDRSettings = ({ match }) => {\r\n const { id } = !!match && !!match.params ? match.params : {}\r\n\r\n const dispatch = useDispatch()\r\n const { isProcessing, project } = useSelector(state => state.projects)\r\n const { isLoading, cdrSettings } = useSelector(state => state.settings)\r\n const [threshold, setThresholdVal] = useState(project.base_comp_thrshld || 0)\r\n\r\n useEffect(() => {\r\n if (!!id) {\r\n dispatch(getProjectSettingsById(id))\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n useEffect(() => {\r\n const { base_comp_thrshld } = cdrSettings\r\n setThresholdVal(base_comp_thrshld)\r\n }, [cdrSettings])\r\n\r\n const onSubmit = async (e) => {\r\n e.preventDefault()\r\n toast.info('Updating...')\r\n try {\r\n const settingResp = await dispatch(updateProjectSettingById({\r\n project_id: parseInt(id),\r\n base_comp_thrshld: parseFloat(threshold)\r\n }))\r\n\r\n if (!!settingResp && !!settingResp.data && !!settingResp.data.data && !!settingResp.data.data.updateSetting) {\r\n toast.success('Updated Successfully')\r\n }\r\n } catch (e) {\r\n toast.error('Update Failed')\r\n console.log('Project Edit Error:', e)\r\n }\r\n }\r\n\r\n const handleInputChange = (name, e) => {\r\n const value = e.target.value;\r\n switch (name) {\r\n case 'base_comp_thrshld':\r\n setThresholdVal(value)\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const errMsg = 'Value can not be empty'\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default CDRSettings\r\n","import React, { useState, useEffect, useContext } from \"react\";\r\nimport { useQuery, gql, useMutation } from \"@apollo/client\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport { Link, useHistory } from \"react-router-dom\";\r\nimport FuelSaveGlobalContext from \"../../../../context/FuelSaveGlobalContext\";\r\nimport { correctAlternativeForMap } from \"../../../../utils/maputils\"\r\nimport SpinLoader from \"../../../common/SpinLoader\";\r\nimport FuelDistribution from \"./FuelDistribution\";\r\nimport PresumptionsForm from \"./PresumptionsForm\";\r\nimport EditForm from \"./EditForm\";\r\nimport CDRSettings from \"./CDRSettings\";\r\nimport { CURRENCY } from \"../../../../constant\";\r\nimport './index.scss'\r\nimport { setAllAlignments } from \"../../../../actions/alignment\";\r\nimport { setAllPresumptions } from \"../../../../actions/presumption\";\r\nimport { setCountry, setCurrency } from \"../../../../actions/global\";\r\nimport { alternativeQueryParentBlock } from \"../../../../utils/alignment\";\r\n\r\nconst GET_ALTERNATIVES_AND_PRES = gql`\r\nquery projects($project_ids: [ID!]) {\r\n projects(project_ids: $project_ids) {\r\n ${alternativeQueryParentBlock(1, `\r\n alternative_id\r\n name\r\n \r\n directions {\r\n directions_id\r\n direction\r\n segments {\r\n segment_id\r\n directions_id\r\n year\r\n aadt_cars\r\n aadt_trucks\r\n aadt_trucks_with_trailer\r\n annual_increase_cars\r\n annual_increase_heavy\r\n start_index\r\n }\r\n segments_data {\r\n segment_data_id\r\n chainage\r\n zlevel\r\n radius\r\n a_intersection\r\n geom_order_id\r\n geom\r\n }\r\n }`)}\r\n \r\n presumptions {\r\n presumptions_id\r\n speed_car\r\n speed_truck\r\n cost_increase\r\n gasoline_fuelfactor\r\n gasoline_co2\r\n gasoline_kwh\r\n gasoline_efficiency\r\n gasoline_cost\r\n diesel_fuelfactor\r\n diesel_co2\r\n diesel_kwh\r\n diesel_efficiency\r\n diesel_cost\r\n battery_fuelfactor\r\n battery_co2\r\n battery_kwh\r\n battery_efficiency\r\n battery_cost\r\n inchargeable_hybrid_fuelfactor\r\n inchargeable_hybrid_co2\r\n inchargeable_hybrid_kwh\r\n inchargeable_hybrid_efficiency\r\n inchargeable_hybrid_cost\r\n chargable_hybrid_co2\r\n chargable_hybrid_kwh\r\n chargable_hybrid_efficiency\r\n chargable_hybrid_cost\r\n hydrogen_fuelfactor\r\n hydrogen_co2\r\n hydrogen_kwh\r\n hydrogen_efficiency\r\n hydrogen_cost\r\n iri\r\n mpd\r\n currency\r\n country_id\r\n country_name\r\n mpd_increase\r\n iri_increase\r\n iri_limit\r\n }\r\n }\r\n}\r\n`;\r\n\r\n\r\nconst UPDATE_PRESUMPTIONS = gql`\r\n mutation UpdatePresumptions($project_id: ID!, $data: UpdatePresumptionsInput!) {\r\n updatePresumptions(project_id: $project_id, data: $data) {\r\n speed_car\r\n speed_truck\r\n cost_increase\r\n gasoline_fuelfactor\r\n gasoline_co2\r\n gasoline_kwh\r\n gasoline_efficiency\r\n gasoline_cost\r\n diesel_fuelfactor\r\n diesel_co2\r\n diesel_kwh\r\n diesel_efficiency\r\n diesel_cost\r\n battery_fuelfactor\r\n battery_co2\r\n battery_kwh\r\n battery_efficiency\r\n battery_cost\r\n inchargeable_hybrid_fuelfactor\r\n inchargeable_hybrid_co2\r\n inchargeable_hybrid_kwh\r\n inchargeable_hybrid_efficiency\r\n inchargeable_hybrid_cost\r\n chargable_hybrid_fuelfactor\r\n chargable_hybrid_co2\r\n chargable_hybrid_kwh\r\n chargable_hybrid_efficiency\r\n chargable_hybrid_cost\r\n hydrogen_fuelfactor\r\n hydrogen_co2\r\n hydrogen_kwh\r\n hydrogen_efficiency\r\n hydrogen_cost\r\n iri\r\n mpd\r\n currency\r\n country_id\r\n country_name\r\n mpd_increase\r\n iri_increase\r\n iri_limit\r\n }\r\n }\r\n`;\r\n\r\nconst EditProject = ({ match }) => {\r\n const history = useHistory()\r\n const dispatch = useDispatch()\r\n const { globalProjectNumber, setGlobalBrandCrumb } = useContext(FuelSaveGlobalContext)\r\n const { isProcessing } = useSelector(state => state.projects)\r\n const { isLoading } = useSelector(state => state.settings)\r\n const { isProcess } = useSelector(state => state.global)\r\n const [currencyState, setCurrencyState] = useState(CURRENCY.NORWAY)\r\n const [countryId, setCountryId] = useState()\r\n\r\n useEffect(() => {\r\n if (!!globalProjectNumber) {\r\n history.push(`/projects/edit/${globalProjectNumber}`)\r\n }\r\n }, [history, globalProjectNumber])\r\n\r\n const onSuccess = presumptionResp => {\r\n\r\n dispatch(setAllPresumptions([presumptionResp]))\r\n const currencyVal = !!presumptionResp && !!presumptionResp.currency ? presumptionResp.currency : CURRENCY.NORWAY\r\n const countryVal = !!presumptionResp && !!presumptionResp.country_name ? presumptionResp.country_name : false\r\n const countryIdVal = !!presumptionResp && !!presumptionResp.country_id ? presumptionResp.country_id : null\r\n dispatch(setCurrency(currencyVal))\r\n if (countryVal) {\r\n dispatch(setCountry(countryVal))\r\n }\r\n setCurrencyState(currencyVal)\r\n setCountryId(countryIdVal)\r\n }\r\n\r\n const [updatePresumptions, { loading: mutationLoading, error: mutationError }] = useMutation(UPDATE_PRESUMPTIONS, {\r\n onCompleted: ((data) => {\r\n if (!!data && !!data.updatePresumptions) {\r\n onSuccess(data.updatePresumptions)\r\n }\r\n })\r\n })\r\n\r\n const [formPresumptions, setFormPresumptions] = useState({});\r\n\r\n const { loading } = useQuery(GET_ALTERNATIVES_AND_PRES, {\r\n fetchPolicy: \"cache-and-network\",\r\n variables: {\r\n project_ids: globalProjectNumber\r\n },\r\n onCompleted: ((data) => {\r\n const alignmentResp = !!data && !!data.projects && !!data.projects[0] && !!data.projects[0].alternatives ?\r\n data.projects[0].alternatives : false\r\n if (!!alignmentResp && !!alignmentResp.node) {\r\n const filteredAlignments = correctAlternativeForMap(alignmentResp.node)\r\n dispatch(setAllAlignments(filteredAlignments, alignmentResp.totalAmount))\r\n }\r\n const presumptionResp = data.projects[0].presumptions[0]\r\n setFormPresumptions(presumptionResp)\r\n onSuccess(presumptionResp)\r\n })\r\n });\r\n\r\n useEffect(() => {\r\n setGlobalBrandCrumb(\"Project Settings\")\r\n\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n if (mutationError) return Error :(
;\r\n\r\n async function handleUpdatePresumptions(presumptions) {\r\n updatePresumptions({\r\n variables: {\r\n project_id: globalProjectNumber,\r\n data: {\r\n speed_car: parseFloat(presumptions.speed_car),\r\n speed_truck: parseFloat(presumptions.speed_truck),\r\n cost_increase: parseFloat(presumptions.cost_increase),\r\n gasoline_fuelfactor: parseFloat(presumptions.gasoline_fuelfactor),\r\n gasoline_co2: parseFloat(presumptions.gasoline_co2),\r\n gasoline_kwh: parseFloat(presumptions.gasoline_kwh),\r\n gasoline_efficiency: parseFloat(presumptions.gasoline_efficiency),\r\n gasoline_cost: parseFloat(presumptions.gasoline_cost),\r\n diesel_fuelfactor: parseFloat(presumptions.diesel_fuelfactor),\r\n diesel_co2: parseFloat(presumptions.diesel_co2),\r\n diesel_kwh: parseFloat(presumptions.diesel_kwh),\r\n diesel_efficiency: parseFloat(presumptions.diesel_efficiency),\r\n diesel_cost: parseFloat(presumptions.diesel_cost),\r\n battery_fuelfactor: parseFloat(presumptions.battery_fuelfactor),\r\n battery_co2: parseFloat(presumptions.battery_co2),\r\n battery_kwh: parseFloat(presumptions.battery_kwh),\r\n battery_efficiency: parseFloat(presumptions.battery_efficiency),\r\n battery_cost: parseFloat(presumptions.battery_cost),\r\n inchargeable_hybrid_fuelfactor: parseFloat(\r\n presumptions.inchargeable_hybrid_fuelfactor\r\n ),\r\n inchargeable_hybrid_co2: parseFloat(\r\n presumptions.inchargeable_hybrid_co2\r\n ),\r\n inchargeable_hybrid_kwh: parseFloat(\r\n presumptions.inchargeable_hybrid_kwh\r\n ),\r\n inchargeable_hybrid_efficiency: parseFloat(\r\n presumptions.inchargeable_hybrid_efficiency\r\n ),\r\n inchargeable_hybrid_cost: parseFloat(\r\n presumptions.inchargeable_hybrid_cost\r\n ),\r\n chargable_hybrid_fuelfactor: parseFloat(\r\n presumptions.chargable_hybrid_fuelfactor\r\n ),\r\n chargable_hybrid_co2: parseFloat(presumptions.chargable_hybrid_co2),\r\n chargable_hybrid_kwh: parseFloat(presumptions.chargable_hybrid_kwh),\r\n chargable_hybrid_efficiency: parseFloat(\r\n presumptions.chargable_hybrid_efficiency\r\n ),\r\n chargable_hybrid_cost: parseFloat(presumptions.chargable_hybrid_cost),\r\n hydrogen_fuelfactor: parseFloat(presumptions.hydrogen_fuelfactor),\r\n hydrogen_co2: parseFloat(presumptions.hydrogen_co2),\r\n hydrogen_kwh: parseFloat(presumptions.hydrogen_kwh),\r\n hydrogen_efficiency: parseFloat(presumptions.hydrogen_efficiency),\r\n hydrogen_cost: parseFloat(presumptions.hydrogen_cost),\r\n iri: parseFloat(presumptions.iri),\r\n mpd: parseFloat(presumptions.mpd),\r\n currency: currencyState,\r\n country_id: countryId,\r\n mpd_increase: parseFloat(presumptions.mpd_increase),\r\n iri_increase: parseFloat(presumptions.iri_increase),\r\n iri_limit: parseFloat(presumptions.iri_limit)\r\n },\r\n },\r\n refetchQueries: [\r\n {\r\n query: GET_ALTERNATIVES_AND_PRES,\r\n variables: {\r\n project_id: globalProjectNumber\r\n }\r\n }],\r\n });\r\n }\r\n\r\n return (\r\n \r\n {(!!loading || !!mutationLoading || !!isLoading || !!isProcessing || !!isProcess) &&
}\r\n
Back\r\n
\r\n
{ setFormPresumptions(presumptions) }} />\r\n handleUpdatePresumptions(formPresumptions)}>Update Settings \r\n \r\n
history.push('/')}>\r\n
\r\n
\r\n
\r\n
\r\n
About Fuel Save
\r\n
\r\n
\r\n Save CO2 and costs by changing only the most fuel affecting road segments Traffic accounts for more than 90% of the road’s total greenhouse gas emissions. Construction accounts for about 5% of the road’s total greenhouse gas emissions. Tiny changes in hilliness and curvature can make huge differences in energy consumption over a road’s life cycle. It’s time we shift our focus to what really matters.\r\n
\r\n
\r\n Fuelsave Road design is a digital tool that helps road designers and road project managers make better decisions. It combines forecasts of traffic flow and vehicle electrification with a model that describes how road parameters affect energy consumption.\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Version 1.2.0
\r\n\r\n
Welcome to the v1.2.0 release of FuelSave. There are many updates in this version that we hope you will like, some of the highlights include:
\r\n\r\n
\r\n
\r\n User can change the chainage start-index point on the map \r\n Split here button placed on exact clicked point, when user try to add a new segment \r\n Optimized map filter page for comparison page and Segment setting page \r\n Added pagination for alignment module \r\n Added CDR module where user can compare alignment carbon emission \r\n Now user can save investment carbon and maintenance carbon value with annual CO2 of alignment (In CDR module) \r\n Added new county, that list will be served on setting page \r\n Now users can save currency and country along with the project setting \r\n Infinite loader has been fixed in case of Alignments and Comparison screen \r\n \r\n
\r\n
\r\n\r\n
\r\n
Version 1.1.0
\r\n\r\n
Welcome to the v1.1.0 release of FuelSave. There are many updates in this version that we hope you will like, some of the highlights include:
\r\n\r\n
\r\n
\r\n Shifted start/end year value on project level instead of alignment \r\n Added Loading spinner, while system is reading selected LandXML file (In case of a large file) \r\n Removed all terminal warnings for FE \r\n Updated project settings will be visible on the setting module in real-time \r\n Now, flash message will be rendered on UI, in case of session expired due to screen ideal \r\n LandXML functionality updated with custom choice of alignments \r\n \r\n
\r\n
\r\n\r\n
\r\n
Version 1.0.0
\r\n
Welcome to the v1.0.0 release of FuelSave. There are many updates in this version that we hope you will like, some of the highlights include:
\r\n
\r\n
\r\n Updated Navbar & Sidebar UI \r\n Added LandXML feature for alignment module \r\n Fixed Cost, CO2 and Energy map under Forecasts module \r\n Improved some points under comparision map's module. Like: x-axis range system, active point for BarChart \r\n \r\n
\r\n
\r\n
\r\n
history.push('/')}>\r\n Copyright © 2021 Waywize All Rights Reserved\r\n
\r\n
\r\n
\r\n
\r\n
We're calculating on the basis on high number of variables, this can take some time. Please wait while processing is made
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default GraphSection","import { Modal, Button } from 'react-bootstrap'\r\nimport './index.scss'\r\n\r\nconst FormModal = ({ show, onHide, children }) => (\r\n \r\n \r\n \r\n Input Cap/OpCarb Emission\r\n \r\n \r\n {children} \r\n \r\n Close \r\n \r\n \r\n)\r\n\r\nexport default FormModal","import React, { useEffect } from 'react'\r\nimport { Table } from \"react-bootstrap\"\r\nimport { colorCodes } from '../../../../constant/colors'\r\n\r\nconst { GREEN_2, YELLOW_1, RED_1 } = colorCodes\r\nconst ResponseTable = ({ formData, baseId, alignmentState, setIsLoading }) => {\r\n let refTotal = 0\r\n const refCase = formData.find(a => a.baseId === baseId)\r\n if (!!refCase) {\r\n refTotal = parseInt(parseInt(refCase.annualCo2 || 0) + parseInt(refCase.investment_emssn || 0) + parseInt(refCase.maintainance_emssn || 0))\r\n }\r\n\r\n const isCalculating = !!alignmentState && (\r\n (alignmentState.alignments.length && !alignmentState.cdrAlignments.length) ||\r\n (alignmentState.alignments.length && alignmentState.cdrAlignments.length && !formData.length))\r\n\r\n\r\n useEffect(() => {\r\n setIsLoading(isCalculating)\r\n // eslint-disable-next-line\r\n }, [isCalculating])\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n S.No \r\n Alignment Name \r\n Waywize CDR \r\n CPT \r\n \r\n \r\n \r\n {!!formData && !!formData.length &&\r\n formData.map((f, idx) => {\r\n const co2Sum = parseInt(parseInt(f.annualCo2 || 0) + parseInt(f.investment_emssn || 0) + parseInt(f.maintainance_emssn || 0))\r\n let backgroundColor = null\r\n const calculation = Math.round(((co2Sum - refTotal) / refTotal) * 100) / 100 || 0\r\n\r\n if (calculation < -0.10) {\r\n backgroundColor = GREEN_2\r\n } else if ((calculation > -0.10) && (calculation < 0.10)) {\r\n backgroundColor = YELLOW_1\r\n } else if (calculation > 0.10) {\r\n backgroundColor = RED_1\r\n }\r\n return (\r\n \r\n {idx + 1} \r\n {f.name} \r\n {f.baseId === baseId ? 'Reference' :
} \r\n {calculation} \r\n \r\n )\r\n })}\r\n \r\n
\r\n
\r\n
setShowModal(false)}>\r\n \r\n
\r\n
Selected calculation end year
\r\n
\r\n
\r\n
Alignment Name
\r\n
Emissions - Investment (Kg)
\r\n
Emissions - Maintenance (Kg)
\r\n
\r\n {!!formData && !!formData.length &&\r\n
{\r\n formData.map((g, i) =>\r\n
\r\n
{g.name}
\r\n
\r\n
\r\n
)\r\n }\r\n
\r\n }\r\n
handleUpdateCapInputs(formData)} >\r\n {isLoading ? 'Loading...' : 'Update'}\r\n \r\n \r\n {(!!isProcessing || !!alignmentLoading || !!isLoading || !!updateLoading) &&
}\r\n
\r\n
alert('Coming Soon')}>\r\n Export As PDF\r\n
\r\n
\r\n\r\n
\r\n
\r\n Select Base Case \r\n {!!alignments && !!alignments.length ?\r\n setCdrData({ ...cdrData, baseId: e.target.value })} id=\"select-base-case\">\r\n Select Base Case: \r\n {alignments.map((op, i) =>\r\n {op.name} \r\n )}\r\n \r\n : 'No Projects'}\r\n
\r\n\r\n
\r\n
\r\n Select Calculation End Year \r\n \r\n setEndYearVal(e)} isInvalid={validateInput('end_year')} />\r\n Value should be in between {MIN_YEAR} and {MAX_YEAR} \r\n
\r\n \r\n
\r\n\r\n
\r\n setShowModal(true)} className=\"submit-fm-btn center-flex\">\r\n Input Cap/OpCarb Emission\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n {(apolloClient && isLicense !== null) ? (\r\n (isLicense) ? (\r\n
\r\n \r\n {autoOut && \r\n \r\n \r\n {!!licenseValid && \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 document.querySelector('#root')\r\n);\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""} 
\r\n 
\r\n .default})
\r\n ![\"FuelSave\"]({require(\"../../../assets/Waywize-Spin.png\").default})
\r\n ![\"FuelSave\"]({require(\"../../../assets/images/about-logo.png\").default})
\r\n .default})
\r\n \r\n