\r\n {numberField}\r\n {rightBtn}\r\n
\r\n );\r\n }\r\n else {\r\n return numberField;\r\n }\r\n }\r\n\r\n renderRightButton() {\r\n const { t } = this.props;\r\n if (!this.props.readOnly && lidarService && lidarService.provider) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n
\r\n );\r\n }\r\n\r\n handleGetCoordinates = async () => {\r\n const { t } = this.props;\r\n try {\r\n const pos = await gpsService.currentPos();\r\n if (pos) {\r\n this.storeValue(`${pos.lat}, ${pos.lon}`);\r\n }\r\n else {\r\n dialogService.error(t(\"Gps\"), t(\"invalid_gps_cooordinates\"));\r\n }\r\n }\r\n catch(error) {\r\n dialogService.error(t(\"Gps\"), errExtractor.get(error));\r\n }\r\n }\r\n\r\n handleTextChanged = (ev) => {\r\n this.storeValue(ev.target.value);\r\n }\r\n\r\n storeValue(value) {\r\n try {\r\n this.props.streng[this.props.field] = value;\r\n this.setState({value: value});\r\n activeProjectService.markDirty(this.props.field);\r\n }\r\n catch(error) {\r\n const { t } = this.props;\r\n dialogService.error(t(\"Document wijzigen\"), t(\"doc_change_error\", {error: errExtractor.get(error)}));\r\n }\r\n }\r\n\r\n}\r\n\r\nStrengInfoCoordinatesField.propTypes = {\r\n field: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n streng: PropTypes.object, // a reference to the streng for which we are currently showing data.\r\n required: PropTypes.bool,\r\n showMissingErrors: PropTypes.bool, // when true, inputboxes that require a value but dont, should show an error\r\n readOnly: PropTypes.bool, // for viewer\r\n};\r\n\r\nStrengInfoCoordinatesField.defaultProps = {\r\n required: false\r\n}\r\n\r\nexport default withTranslation()(withStyles(styles)(StrengInfoCoordinatesField));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport TwoColLayout from '../../../layouts/two_col_layout_component';\r\nimport StrengInfoComboBox from './streng_info_combobox';\r\nimport StrengInfoTextField from './streng_info_textfield';\r\nimport StrengInfoAutoComplete from './streng_info_autocomplete_component';\r\nimport StrengInfoGPSAutoComplete from './streng_info_gps_autocomplete_component';\r\nimport StrengInfoNumberAutoLidar from './streng_info_number_autoLidar_component';\r\nimport StrengInfoNumberField from './streng_info_numberfield';\r\nimport StrengTimeField from './streng_info_timepicker';\r\nimport StrengDateField from './streng_info_datepicker';\r\nimport StrengInfoCoordinatesField from './streng_info_coordinates_field';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { PIPE_INSPECTIONS } from '../../../../shared_components/services/project_service';\r\nimport { \r\n directionOptions\r\n,locationTypeOptions\r\n,propertyOwnershipOptions\r\n,axialRefPointOptions\r\n,storageVideoOptions\r\n,positionVideoImagesOptions\r\n,shapeOptions\r\n,shapeOptionsM\r\n,materialOptions\r\n,liningTypeOptions\r\n,liningMaterialOptions\r\n,sewerTypeOptions\r\n,sewerUsageOptions\r\n,sewerUsageOptionsM\r\n,cleaningOptions\r\n,connectionTypeOptions\r\n//,surfaceHardeningOptions\r\n,precipitationOptions\r\n,temperatureOptions\r\n,yearOfCommisioningOptions\r\n,verticalRefPointOptions\r\n,CircularRefPointOptions\r\n,inspectionStageOptions\r\n,stepTypeOptions\r\n,stepMaterialOptions\r\n,atmosphereOptions\r\n,inspectionMethodOptions\r\n,inspectionMethodOptions_S\r\n,inspectionMethodOptions_M\r\n,fluidControlOptions } from '../../../services/constants';\r\nimport { strandPropsService } from '../../../services/strand_props_service';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport { activeProjectService } from '../../../../services/active_project_service';\r\nimport { dialogService } from '../../../../services/dialog_service';\r\nimport { configService } from '../../../../services/config_service';\r\n\r\n\r\nconst styles = (theme) => ({\r\n paper: {\r\n height: '100%'\r\n },\r\n \r\n});\r\n\r\n\r\nclass StrengInfo extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { \r\n \r\n }\r\n }\r\n\r\n render() {\r\n const { t } = this.props;\r\n let radioProps = null;\r\n if (this.props.readOnly) {\r\n radioProps = {'readOnly': 'readonly'};\r\n }\r\n const main = activeProjectService.data?.main;\r\n let stationaryDisabled = false;\r\n if (main) {\r\n stationaryDisabled = !(this.state.strengType === \"s\" || !['A', 'B'].includes(main.purpose)); // when purpose of inspection is A or B, stationary isnpections not allowed\r\n }\r\n const inspMethodOptions = this.props.strengType === \"s\" ? inspectionMethodOptions_S : inspectionMethodOptions;\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n let required = (this.props.required) ? \r\n
\r\n if (this.props.error) {\r\n body = \r\n {body}\r\n
\r\n }\r\n if (!this.props.readOnly) {\r\n body = \r\n
\r\n );\r\n }\r\n\r\n onKeypress =(event) => {\r\n if (this.props.readOnly) { // no editing allowed in readonly mode\r\n return;\r\n }\r\n let char = event.which || event.keyCode;\r\n if ((char >= 48 && char <= 57) || (char >= 96 && char <= 105) || char === 10 || char === 13) {\r\n if (this.prevKey == null) {\r\n if (this.keyPressTimeout) {\r\n clearTimeout(this.keyPressTimeout);\r\n }\r\n this.prevKey = event.key; //store the string part, easier to convert later on\r\n this.keyPressTimeout = setTimeout(() => {\r\n this.prevKey = null;\r\n this.keyPressTimeout = null;\r\n }, 2000); // after x seconds, first press is reset so it can be seen as a fresh start.\r\n }\r\n else {\r\n if (this.keyPressTimeout) {\r\n clearTimeout(this.keyPressTimeout);\r\n }\r\n let newValue;\r\n if ((char >= 48 && char <= 57) || (char >= 96 && char <= 105)) {\r\n newValue = +(this.prevKey + event.key); // make it an int, so we can verify the value\r\n }\r\n else {\r\n newValue = +(this.prevKey);\r\n }\r\n this.prevKey = null;\r\n if (newValue >= 1 && newValue <= 12) {\r\n this.props.onValueChanged(newValue, false);\r\n }\r\n else {\r\n dialogService.error(\"direction selection\", `value out of range: ${newValue}. Should be between 01 and 12`);\r\n }\r\n }\r\n }\r\n else if (char === 8 || char === 46) {\r\n this.prevKey = null;\r\n this.props.onValueChanged(null, true); // true is actually to indicate that it came from the mouse, we mimic this cause the actual result of it is that focus remains on the same object, which is what we want cause it got cleared.\r\n }\r\n }\r\n\r\n focus() {\r\n if (this.props.inner.current) {\r\n this.props.inner.current.focus();\r\n }\r\n }\r\n \r\n}\r\n\r\nDirectionSelector.propTypes = {\r\n isExpanded: PropTypes.bool,\r\n required: PropTypes.bool,\r\n size: PropTypes.number.isRequired,\r\n value: PropTypes.number,\r\n onValueChanged: PropTypes.func,\r\n onFocus: PropTypes.func,\r\n error: PropTypes.bool,\r\n readOnly: PropTypes.bool, // for viewer\r\n inner: PropTypes.any // a ref to the inner object. This is a replacement for {ref}\r\n};\r\n\r\n\r\n//function DirectionSelectorForwardRef(props, ref) {\r\n// return \r\n \r\n {t(\"Algemeen\")} \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 handleObsGenerated = () => {\r\n if (this.state.expandedIdx !== 1) { // make certaint aht the input is visible\r\n this.setState({expandedIdx: 1}); \r\n }\r\n }\r\n\r\n handleToggleObsDetails = (ev) => {\r\n const newValue = !this.state.showObsDetails;\r\n this.setState({showObsDetails: newValue});\r\n configService.set(\"observations.showObsDetails\", newValue);\r\n ev.stopPropagation();\r\n }\r\n\r\n switchExpanded = (panelIdx) => (event, isExpanded) => {\r\n const { t } = this.props;\r\n if (this.state.expandedIdx == 0 && (panelIdx == 1 || isExpanded === false)) { // when go from main to strengs (or close main), check if allowed.\r\n const onlyAllowObsOnFulStreng = configService.get('observations.onlyAllowObsOnFulStreng') && this.props.readOnly === false; // viewer can always continue to the next section. All read-only is allowed to continue\r\n if (onlyAllowObsOnFulStreng && projectService.isStrengComplete(this.props.streng) === false) {\r\n this.setState({showMissingErrors: true});\r\n dialogService.error(t(\"Streng gegevens\"), t(\"Er ontbreekt nog data in de streng gegevens sectie. Je kan pas verder gaan als alles is ingevuld\"));\r\n return;\r\n }\r\n }\r\n this.setState({ expandedIdx: isExpanded ? panelIdx : -1, showMissingErrors: false });\r\n if (this.props.onExpandChanged) {\r\n this.props.onExpandChanged();\r\n }\r\n }\r\n\r\n handleObservationsChanged = (value) => {\r\n if (!this.props.streng) {\r\n dialogService.error(\"internal error\", `no streng loaded in props, reload file`);\r\n return;\r\n }\r\n this.props.streng.observations = value;\r\n if (this.state.expandedIdx == 1){ // make certain that the panel is expanded when adding a new streng.\r\n this.setState({observations: value});\r\n }\r\n else {\r\n this.setState({observations: value, expandedIdx: 1});\r\n }\r\n activeProjectService.markDirty();\r\n }\r\n\r\n handleTypeChanged = (value, obs) => {\r\n if (obs !== undefined) {\r\n this.setState({strengType: value, observations: obs});\r\n }\r\n else {\r\n this.setState({strengType: value});\r\n }\r\n }\r\n}\r\n\r\nStreng.propTypes = {\r\n onExpandChanged: PropTypes.func,\r\n streng: PropTypes.object, // a reference to the streng for which we are currently showing data.\r\n readOnly: PropTypes.bool, // for viewer\r\n direction: PropTypes.string, // allowed values: \r\n captureKeyboard: PropTypes.bool, // when true, observations is allowed to capture keyboard events. If we don't do this, we can't use a space when editing fields, cause observations traps it.\r\n onDirectionChanged: PropTypes.func,\r\n onPositionChanged: PropTypes.func, // when this observation is expanded, let the system go to the video point at which it was recorded.\r\n onStartMeasure: PropTypes.func, // called when a measuring procedure should be started. Contains a callback that should be called when the operation is done.\r\n onStopMeasure: PropTypes.func, // called when measuring procedure should be stopped\r\n onStartMeasureAngle: PropTypes.func,\r\n forceStrengDetails: PropTypes.bool, // when true, strengdetails should be shown. it wil alwasy trigger the onStrengDetailsForced so the caller can reset his request.\r\n onStrengDetailsForced: PropTypes.func,\r\n onStartMeasureDepth: PropTypes.func,\r\n onStartMeasureAreaSize: PropTypes.func,\r\n onStartMeasureFreeform: PropTypes.func, \r\n onTerminated: PropTypes.func, // called when the B-D-C-?-? code is entered -> inspection was terminated. This should stop video recording\r\n initLoaded: PropTypes.bool, // an observation can only be rendered when the tractor engine is loaded (buttons for sonar and lidar)\r\n};\r\n\r\nexport default withTranslation()(withStyles(styles)(Streng));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\n//icons\r\nimport Camera from 'mdi-material-ui/Camera';\r\nimport VectorLine from 'mdi-material-ui/VectorLine';\r\nimport TransitConnection from 'mdi-material-ui/TransitConnection';\r\nimport Delete from 'mdi-material-ui/Delete';\r\nimport CircleSlice8 from 'mdi-material-ui/CircleSlice8';\r\nimport AngleAcute from 'mdi-material-ui/AngleAcute';\r\nimport ArrowExpandDown from 'mdi-material-ui/ArrowExpandDown';\r\nimport SelectMultiple from 'mdi-material-ui/SelectMultiple';\r\nimport CircleOutline from 'mdi-material-ui/CircleOutline';\r\nimport CircleHalfFull from 'mdi-material-ui/CircleHalfFull';\r\nimport Radar from 'mdi-material-ui/Radar';\r\nimport { Lidar } from '../../../icons';\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ToggleButton from '@material-ui/lab/ToggleButton';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Link from '@material-ui/core/Link';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport DirectionSelector from './direction_selector_component';\r\nimport LocationEditor from './location_editor_component';\r\nimport CodeSelector from '../code_selector/code_selector_component';\r\nimport { activeProjectService } from '../../../../services/active_project_service';\r\nimport { codeSelectorService } from '../../../services/code_selector_service';\r\nimport { CHANGE_SHAPE_KEY, isEmpty, projectService, TERMINATE_KEY, TERMINATE_KEY2 } from '../../../services/project_service';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\nimport { descriptiveLocOptions } from '../../../services/constants';\r\nimport { Card } from '@material-ui/core';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport ContinuousQuestionDialog from './continuous_question_dialog';\r\nimport { measurementService } from '../../measurement_service';\r\nimport { documentControlService } from '../../document_control_service';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { errExtractor } from '../../../services/error_extractor';\r\nimport { dialogService } from '../../../../services/dialog_service';\r\nimport { ObservationFocusService } from './observation_focus_service';\r\nimport { strandPropsService } from '../../../services/strand_props_service';\r\nimport { ObsTranslations } from './observation_translations';\r\n\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n height: '100%',\r\n width: '100%',\r\n background: 'transparent',\r\n paddingLeft: theme.spacing(1),\r\n paddingRight: theme.spacing(1)\r\n },\r\n selected: {\r\n paddingTop: theme.spacing(1),\r\n paddingBottom: theme.spacing(1),\r\n marginBottom: theme.spacing(1)\r\n },\r\n textField: {\r\n marginLeft: theme.spacing(1),\r\n flex: 1\r\n },\r\n valuesRow: {\r\n paddingRight: theme.spacing(1),\r\n },\r\n remark: {\r\n marginLeft: theme.spacing(1),\r\n marginRight: theme.spacing(1),\r\n flex: 1\r\n },\r\n measureBtn: {\r\n marginLeft: theme.spacing(1),\r\n marginRight: -theme.spacing(1)/2\r\n },\r\n IconUnChecked: {\r\n color: theme.colors.canSelectIcon,\r\n marginRight: theme.spacing(0.5),\r\n '&:hover': {\r\n color: theme.colors.canSelectIconHover,\r\n }\r\n },\r\n cameraIconChecked: {\r\n color: theme.colors.checkedCameraIcon,\r\n marginRight: theme.spacing(0.5)\r\n },\r\n joinChecked: {\r\n color: theme.palette.secondary.main,\r\n marginRight: theme.spacing(0.5)\r\n },\r\n ROCameraIconChecked: {\r\n color: theme.colors.checkedCameraIcon,\r\n margin: '3px'\r\n },\r\n ROCameraIconUnChecked: {\r\n color: 'transparent',\r\n margin: '3px'\r\n },\r\n isContinuousIcon: {\r\n top: '3px',\r\n position: 'relative',\r\n color: \"darkgreen\",\r\n height: \"16px\"\r\n }\r\n ,\r\n isContinuousErrIcon: {\r\n top: '3px',\r\n position: 'relative',\r\n color: \"darkred\",\r\n height: \"16px\"\r\n },\r\n readOnly: {\r\n color: \"rgba(0, 0, 0, 0.87)\"\r\n },\r\n valueLabelBreadCrumbs: { // the breadcrumbs with the labels for each letter in the code, shown when collapsed\r\n fontStyle: \"italic\",\r\n fontSize: \"small\"\r\n },\r\n cardActionsRoot: {\r\n flexWrap: 'wrap',\r\n justifyContent: 'space-between',\r\n margin: -theme.spacing(1),\r\n },\r\n cardActionItem: {\r\n\r\n margin: theme.spacing(1),\r\n }\r\n});\r\n\r\nclass Observation extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n \r\n //important: set translations first so that we capture translated error messages at create time\r\n this.translations = new ObsTranslations(); // speed improvement: only do translations 1 time, much faster (language can not be changed 'on the fly' in this view)\r\n this.distanceValueChanged = false; // when the user changes the distance manually, this flag is set so that the distanceChanged event is only called when editor is closed or component unloaded. This way, the sort of the list is only done when editing is stopped, which helps user.\r\n this.isContinuous = false; // do before checking isContinuous, otherwise we might loose the correct value\r\n if (props.data) {\r\n let obsDefPath = codeSelectorService.translatePath(props.data.values);\r\n let obsDef = codeSelectorService.getLeafFromDictPath(obsDefPath); // get the definition for the observation, so we can set properties \r\n let valueLabels = props.isExpanded ? null : codeSelectorService.getLabelsFromDictPath(obsDefPath); // we only need to load labels when collapsed. When exanded, labels are handled by the codeSelector\r\n let valueComplete = obsDef != null;\r\n let contSettings = this.checkIsContinuous();\r\n this.state = {\r\n valueLabels: valueLabels, // labels for the values, when collapsed.\r\n joint: props.data.joint,\r\n values: props.data.values,\r\n location: props.data.longitude,\r\n waarde1: props.data.waarde1,\r\n waarde2: props.data.waarde2,\r\n direction1: props.data.direction1,\r\n direction2: props.data.direction2,\r\n remark: props.data.remark,\r\n includePicture: props.data.includePicture,\r\n includeSonar: !!props.data.includeSonar, // sonar value isn't always present, so take a trueth operator(!!)\r\n includeLidar: !!props.data.includeLidar, // lidar value isn't always present, so take a trueth operator(!!)\r\n valueComplete: valueComplete,\r\n focusedValueIdx: props.focusedValueIdx, // the idx of the codeselector value that should get focus. we need this so we can tab back from textfield to codeselector\r\n observationDef: obsDef, // an object that stores for each data field if it is required or not for the current values path\r\n allowSelectorFocus: true,\r\n descriptiveLoc: props.data.descriptiveLoc,\r\n measuring: null, // when 1 or 2, indicates that are are currently in a measuring request. 1 is for value 1..\r\n showContinuous: contSettings.showContinuous,\r\n continuousMsg: contSettings.errorMsg,\r\n continuousIdx: contSettings.idx,\r\n continuousComplete: contSettings.complete,\r\n continuousDlgOpen: false\r\n }\r\n }\r\n else {\r\n this.state = {\r\n joint: false,\r\n location: 0.0,\r\n values: [],\r\n waarde1: \"\",\r\n waarde2: \"\",\r\n direction1: 0,\r\n direction2: 0,\r\n remark: \"\",\r\n includePicture: false,\r\n includeSonar: false,\r\n includeLidar: false,\r\n valueComplete: false,\r\n descriptiveLoc: null,\r\n measuring: null,\r\n showContinuous: false,\r\n continuousIdx: null,\r\n continuousDlgOpen: false\r\n }\r\n }\r\n this.rootRef = React.createRef(); // the root div object, for scrolling into view when expanded.\r\n this.focsMgr = new ObservationFocusService(this);\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.hasSonar = documentControlService.robotDs.hasSonar(); // faster access\r\n this.hasLidar = documentControlService.robotDs.hasLidar();\r\n this.focsMgr.buildRefs(this.hasSonar, this.hasLidar);\r\n if (this.props.isExpanded && this.rootRef.current) {\r\n this.rootRef.current.scrollIntoView();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.distanceValueChanged === true && this.props.onDistanceChanged) {\r\n this.props.onDistanceChanged(this.props.data);\r\n }\r\n this.distanceValueChanged = false;\r\n activeProjectService.events.removeListener(\"continuousChanged\", this.handleContinuousObsChanged); // normally not registered, but just to make certain, always try.\r\n if (!documentControlService.documentPos) { // when set, we are in fullscreen, so don't try to unregister any measurement. It will be handled by the document\r\n this.stopAllMeasurements(); // when unloading, make certain that we are no longer measuring, there is no more recipient\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.strengType !== prevProps.strengType) {\r\n this.focsMgr.buildRefs(this.hasSonar, this.hasLidar);\r\n }\r\n let obsDefPath = codeSelectorService.translatePath(this.props.data.values);\r\n let valueComplete = codeSelectorService.dictPathIsLeaf(obsDefPath);\r\n if (this.props.data && this.props.data != prevProps.data) {\r\n const data = this.props.data;\r\n let obsDef = null;\r\n let contSettings = {showContinuous: false, errorMsg: \"\"};\r\n if (valueComplete) {\r\n obsDef = codeSelectorService.getLeafFromDictPath(obsDefPath); // get the definition for the observation, so we can set properties \r\n contSettings = this.checkIsContinuous();\r\n }\r\n let valueLabels = this.props.isExpanded ? null : codeSelectorService.getLabelsFromDictPath(obsDefPath); // we only need to load labels when collapsed. When exanded, labels are handled by the codeSelector\r\n this.setState({\r\n values: data.values, \r\n valueLabels: valueLabels,\r\n location: data.longitude,\r\n joint: data.joint,\r\n waarde1: data.waarde1,\r\n waarde2: data.waarde2,\r\n direction1: data.direction1,\r\n direction2: data.direction2,\r\n remark: data.remark,\r\n includePicture: data.includePicture,\r\n includeSonar: data.includeSonar, // sonar value isn't always present, so take a trueth operator(!!)\r\n includeLidar: data.includeLidar, // lidar value isn't always present, so take a trueth operator(!!)\r\n valueComplete: valueComplete,\r\n observationDef: obsDef,\r\n allowSelectorFocus: true,\r\n descriptiveLoc: data.descriptiveLoc,\r\n showContinuous: contSettings.showContinuous,\r\n continuousMsg: contSettings.errorMsg,\r\n continuousIdx: contSettings.idx,\r\n continuousComplete: contSettings.complete,\r\n continuousDlgOpen: false\r\n });\r\n }\r\n if (this.props.isExpanded) {\r\n if (this.props.focusedValueIdx != prevProps.focusedValueIdx) {\r\n if (this.props.focusedValueIdx === -2) {\r\n const hasMoreThanSelector = this.focsMgr.focusLast();\r\n this.setState({focusedValueIdx: -1, allowSelectorFocus: !hasMoreThanSelector});\r\n }\r\n else {\r\n this.setState({focusedValueIdx: this.props.focusedValueIdx});\r\n }\r\n }\r\n if (this.props.showEmptyError && !prevProps.showEmptyError) {\r\n this.focsMgr.focusFirstError();\r\n }\r\n else if (prevProps.isExpanded === false) { // when just showing the expanded view, put the focus on the right item\r\n if (valueComplete) {\r\n this.focsMgr.moveToFirstAfterCode();\r\n }\r\n else {\r\n this.setState({focusedValueIdx: -1, allowSelectorFocus: true});\r\n }\r\n }\r\n }\r\n else if (prevProps.isExpanded != this.props.isExpanded) {\r\n let valueLabels = codeSelectorService.getLabelsFromDictPath(obsDefPath);\r\n this.setState({valueLabels});\r\n this.props.onStopMeasure(); // when closing to read-only, make certain that we are no longer measuring, there is no more recipient\r\n if (this.distanceValueChanged === true && this.props.onDistanceChanged) { // when closed without clicking on 'ready, still need to call the event.\r\n this.props.onDistanceChanged(this.props.data);\r\n }\r\n this.distanceValueChanged = false; // important: needs to be reset, even if there is no callback assigned\r\n }\r\n }\r\n\r\n render() {\r\n if (this.props.isExpanded) {\r\n return this.renderExpanded();\r\n }\r\n else {\r\n return this.renderCollapsed();\r\n }\r\n }\r\n\r\n \r\n\r\n renderExpanded() { \r\n const { t } = this.props;\r\n return (\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n }\r\n
\r\n\r\n {this.buildLoc()}\r\n\r\n {this.buildContinousTerminationSelector()}\r\n\r\n {(this.state.valueComplete == true && this.needsExtraData()) && \r\n \r\n {items}\r\n
\r\n );\r\n }\r\n\r\n /**\r\n * \r\n * @param {list} result contains the result items that were rendered\r\n * @param {object} obsDef the definition for the observation\r\n * @param {number} idx 0 or 1, for the index of the value to build an input for.\r\n * @param {object} ref the input-ref object to assing to the component (so we can get to it from other parts of the code)\r\n */\r\n renderRow1Part(result, obsDef, value, idx, inputId, ref, refIdx) {\r\n if (codeSelectorService.getValueCount(obsDef, this.props.strengType) > idx) {\r\n let adorner = {end: null, label: this.translations.textValue}; // so we can pass in byref\r\n let validifierData = {};\r\n let wInputProps = this.buildInputAttribs(obsDef, idx, adorner, validifierData);\r\n let isRequired = projectService.isObsValueRequired(obsDef, idx, this.props.strengType);\r\n let inError = false;\r\n if (this.props.showEmptyError && isRequired) {\r\n inError = isEmpty(value);\r\n }\r\n if (!isEmpty(value)) {\r\n inError |= this.invalidValue(validifierData, value);\r\n }\r\n \r\n if (!this.props.readOnly) { // no editing allowed in readonly mode\r\n if (obsDef.measure && obsDef.measure instanceof Array && obsDef.measure.length > idx) { // there is a predefined measure action defined\r\n if (obsDef.measure[idx] == \"depth\") {\r\n result.push(\r\n {dir1}\r\n {dir2}\r\n
\r\n );\r\n }\r\n\r\n buildDirection(idx, value, fieldName, ref, refIdx) {\r\n let obsDef = this.state.observationDef;\r\n const directionCount = codeSelectorService.getDirectionCount(obsDef, this.props.strengType);\r\n if (obsDef && directionCount > idx) {\r\n let required = projectService.isObsDirectionRequired(obsDef, idx);\r\n return \r\n \r\n
\r\n \r\n \r\n \r\n {this.state.valueLabels.map((el, idx) => { \r\n return ( \r\n }\r\n
\r\n );\r\n }\r\n\r\n renderContinuous() {\r\n if (this.state.showContinuous) {\r\n let msg = \"\"; \r\n let className = this.props.classes.isContinuousIcon;\r\n if (this.state.continuousMsg) {\r\n msg = this.state.continuousMsg;\r\n className = this.props.classes.isContinuousErrIcon;\r\n }\r\n let image = null;\r\n if (this.state.continuousComplete) {\r\n image = \r\n {this.state.location.toFixed(2)} \r\n \r\n {this.state.values.map((value, idx) => {\r\n let tooltip = this.state.valueLabels ? this.state.valueLabels[idx] : \"\";\r\n if (tooltip) {\r\n tooltip = t(tooltip);\r\n }\r\n return(\r\n \r\n \r\n {value}\r\n \r\n \r\n );\r\n })}\r\n {(this.state.waarde1 || this.state.waarde2 || this.state.direction1 || this.state.direction2) &&\r\n \r\n \r\n {this.renderContinuous()}\r\n
\r\n {(this.props.showObsDetails && this.state.valueLabels) && \r\n |
\r\n }\r\n {(this.state.waarde1) && \r\n {this.state.waarde1}\r\n }\r\n {(this.state.waarde2) &&\r\n {this.state.waarde2}\r\n }\r\n {(+this.state.direction1) &&\r\n {t(el)}
);\r\n })}\r\n {image}
\r\n \r\n \r\n {this.props.values.map((value, idx) => {\r\n return (\r\n \r\n \r\n );\r\n })}\r\n {(this.state.needsNextValue && this.state.errorIdx == -1) &&\r\n \r\n \r\n }\r\n \r\n {(!this.props.readOnly) && \r\n
\r\n {(!this.props.readOnly) && \r\n this.linkRefs[idx] = input} \r\n tabIndex=\"0\" \r\n onFocus={this.handleLinkFocused(idx)}>\r\n \r\n {value}\r\n \r\n
\r\n this.QuestionInputRef = input} \r\n key={this.props.values.length} \r\n color=\"primary\" \r\n tabIndex=\"0\" \r\n style={{cursor:\"pointer\"}}\r\n onFocus={this.handleNewFocused}\r\n onClick={this.showSelectionList(this.props.values.length)}\r\n >\r\n ?\r\n
\r\n \r\n
\r\n {children}\r\n \r\n
\r\n );\r\n }\r\n }\r\n else {\r\n let classname = this.props.classes.treeItem;\r\n if (this.state.values.length > level && this.state.values[level].toLowerCase() == child.value.toLowerCase()) {\r\n classname = this.props.classes.selectedTreeItem;\r\n }\r\n return(\r\n \r\n
\r\n )\r\n }\r\n });\r\n return result;\r\n }\r\n\r\n removeItem = (level) => () => {\r\n let newValues = this.state.values.slice(0, level);\r\n this.setState({values: newValues, canPressOk: false});\r\n this.props.onRemoveItems(level);\r\n }\r\n\r\n\r\n selectItem = (child, level) => () => {\r\n let newValues = [...this.state.values.slice(0, level), child.value];\r\n this.setState({values: newValues, canPressOk: false});\r\n this.props.onSetItem(newValues, false);\r\n }\r\n\r\n selectLeaf = (child, level)=> () => {\r\n let newValues = [...this.state.values.slice(0, level), child.value];\r\n this.setState({values: newValues, canPressOk: true});\r\n this.props.onSetItem(newValues, true);\r\n }\r\n\r\n showTreeSearch = () => {\r\n this.setState({ dlgOpen: true });\r\n }\r\n\r\n handleTreeClose = () => {\r\n this.setState({ dlgOpen: false });\r\n }\r\n\r\n handleOk = () => {\r\n this.setState({ dlgOpen: false });\r\n //this.props.onValuesChanged(this.state.values);\r\n if (this.props.onClose) this.props.onClose();\r\n\r\n }\r\n}\r\n\r\nCodeSelectorTreeDlg.defaultProps = {\r\n showOk: true\r\n}\r\n\r\nCodeSelectorTreeDlg.propTypes = {\r\n values: PropTypes.array.isRequired,\r\n tree: PropTypes.object,\r\n onRemoveItems: PropTypes.func.isRequired,\r\n onSetItem: PropTypes.func.isRequired,\r\n onTreeOpened: PropTypes.func, // used to reset that the tree must be opened (after it has been opened, the user must be able to close it again.)\r\n strengType: PropTypes.string, // dp = streng, m = put, determins which fields are visible\r\n onClose: PropTypes.func,\r\n showOk: PropTypes.bool,\r\n};\r\n\r\nexport default withTranslation()(withStyles(styles)(CodeSelectorTreeDlg));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport List from '@material-ui/core/List';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { codeSelectorService } from '../../../services/code_selector_service';\r\n\r\n\r\n\r\n\r\nconst styles = (theme) => ({\r\n listItemText: {\r\n display: 'flex',\r\n flexDirection: 'row-reverse',\r\n justifyContent: 'flex-end'\r\n },\r\n listItemSecondaryText: {\r\n marginRight: theme.spacing(1)\r\n },\r\n selectedlistItem : {\r\n background: 'aliceblue'\r\n }\r\n});\r\n\r\n\r\nclass CodeSelectorListPopup extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n selected: props.selectedValue,\r\n list: props.popupOpen ? this.getData(props.currentList) : []\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if ((prevProps.currentList !== this.props.currentList || prevProps.popupOpen !== this.props.popupOpen) && this.props.popupOpen) {\r\n this.setState({list: this.getData(this.props.currentList)});\r\n }\r\n if (prevProps.selectedValue != this.props.selectedValue) {\r\n this.setState({selected: this.props.selectedValue});\r\n }\r\n }\r\n\r\n getData(list) {\r\n if (list) {\r\n return list.filter(child => {\r\n return codeSelectorService.matchesFilter(child, this.props.strengType);\r\n })\r\n }\r\n return [];\r\n }\r\n\r\n \r\n render() {\r\n const { t } = this.props;\r\n let listItems = null;\r\n if (this.props.currentList && this.props.popupOpen) {\r\n listItems = this.state.list.map((child, idx) => {\r\n let className = this.state.selectedIdx == idx ? this.props.classes.selectedlistItem : null;\r\n return (\r\n - \r\n {listItems}\r\n
\r\n ![\"logo\"](\"https://storage.googleapis.com/cami_exec/name_logo.png\")
\r\n \r\n {t('Sign in')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('Reset password')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t(\"Sign up\")}\r\n \r\n \r\n
\r\n - \r\n
\r\n
\r\n \r\n Enkel beschikbaar voor pro accounts
\r\n Activeer pro-account
\r\n \r\n {t(\"Overview\")} \r\n
\r\n {this.renderProjectOverview(isReallySmall)}\r\n \r\n {(configService.isSite) && \r\n // ar can only be done with mobile at the moment, so desktop definitely not \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n {detailsBtn}\r\n \r\n \r\n
\r\n - \r\n {this.state.data.map(this.renderStrengDetail)}\r\n
\r\n
\r\n\r\n \r\n
\r\n {t(\"Totale leidinglengte\")}:
\r\n {this.state.totalExpectedLength} m
\r\n \r\n
\r\n {t(\"Totale inspectielengte\")}:
\r\n {this.state.totalActualLength} m
\r\n \r\n
\r\n {t(\"Plaatsnaam\")}:
\r\n {this.props.main?.location}
\r\n {icon} \r\n }\r\n return icon;\r\n }\r\n\r\n buildPrimary(el, icon, isLargeScreen) {\r\n let result = el.streng.ref;\r\n if (!isLargeScreen) {\r\n result = \r\n \r\n {details.map((detail, idx2) => {\r\n const icon = detail.image !== -1 ? \r\n \r\n )\r\n })}\r\n \r\n }\r\n \r\n return secondary;\r\n }\r\n\r\n handleClickChip = (strengIdx, detail) => (ev) => {\r\n if (this.props.onClickObs) {\r\n const realIdx = this.state.data[strengIdx].idx; // we do a sort on the data, so need to map to the original index\r\n this.props.onClickObs(realIdx, detail);\r\n //e.preventDefault();\r\n ev.stopPropagation();\r\n }\r\n }\r\n\r\n handleGoto = (idx) => () => {\r\n if (cameraService.isRecording) {\r\n const { t } = this.props;\r\n dialogService.error(t(\"video\"), t(\"Kan niet van streng veranderen tijdens opname. Stop eerst de opname.\"));\r\n }\r\n else if (this.state.showAR && this.props.onShowAR) {\r\n this.props.onShowAR(this.state.data[idx], this.state.showInventory);\r\n } else if (this.props.onClickStreng) {\r\n const realIdx = this.state.data[idx].idx; // we do a sort on the data, so need to map to the original index\r\n this.props.onClickStreng(realIdx);\r\n }\r\n }\r\n\r\n handleToggleShowInventory = () => {\r\n const newValue = !this.state.showInventory;\r\n this.setState({showInventory: newValue});\r\n configService.set(\"general.showInventory\", newValue);\r\n }\r\n\r\n handleToggleObsDetails = (ev) => {\r\n const newValue = !this.state.showObsDetails;\r\n this.setState({showObsDetails: newValue});\r\n configService.set(\"observations.showObsDetails\", newValue);\r\n ev.stopPropagation();\r\n }\r\n\r\n handleShowAR = () => {\r\n const newValue = !this.state.showAR;\r\n this.setState({showAR: newValue});\r\n configService.set(\"general.showAR\", newValue);\r\n }\r\n}\r\n\r\nStrengsSummary.propTypes = {\r\n strengs: PropTypes.array.isRequired, // streng data to show\r\n main: PropTypes.object.isRequired, // main data of the project\r\n onClickObs: PropTypes.func.isRequired,\r\n onClickStreng: PropTypes.func,\r\n onShowAR: PropTypes.func,\r\n};\r\n\r\nexport default withTheme(withTranslation()(withStyles(styles)(StrengsSummary)));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\n// icons\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, withTheme } from '@material-ui/core/styles';\r\n\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Button from '@material-ui/core/Button';\r\nimport { withTranslation } from 'react-i18next';\r\nimport StrengsSummary from './strengs_summary_component';\r\n\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n },\r\n \r\n \r\n \r\n});\r\n\r\n\r\nclass StrengsSummaryDialog extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { t } = this.props;\r\n if (!this.props.open) {\r\n return null;\r\n }\r\n const fullScreen = window.innerWidth <= this.props.theme.breakpoints.values.sm;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n \r\n handleClose = () => {\r\n if (this.props.onClose) this.props.onClose(-1);\r\n }\r\n\r\n}\r\n\r\nStrengsSummaryDialog.propTypes = {\r\n strengs: PropTypes.array, // streng data to show\r\n main: PropTypes.object, // main data of the project\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onClickObs: PropTypes.func,\r\n onShowAR: PropTypes.func,\r\n};\r\n\r\nexport default withTheme(withTranslation()(withStyles(styles)(StrengsSummaryDialog)));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, withTheme } from '@material-ui/core/styles';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Button from '@material-ui/core/Button';\r\nimport { withTranslation } from 'react-i18next';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst styles = (theme) => ({\r\n docRoot: {\r\n flex: 1,\r\n height: '30px'\r\n },\r\n dialogPaper: {height: 'calc(100% - 64px);'}\r\n});\r\n\r\nclass ObservationImageDialog extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n \r\n\r\n render() {\r\n const { t, classes } = this.props;\r\n if (!this.props.open) {\r\n return null;\r\n }\r\n const fullScreen = window.innerWidth <= this.props.theme.breakpoints.values.sm;\r\n const paperStyle = fullScreen ? null : classes.dialogPaper;\r\n const ImgContHeight = fullScreen ? \"calc(100% - 48px)\" : \"calc(100% - 24px)\";\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n handleClose = (event) => {\r\n if (this.props.onClose) this.props.onClose(null);\r\n event.stopPropagation(); // need to prevent from propogating, otherwise we change the position in the video, which we don't want\r\n event.preventDefault();\r\n }\r\n}\r\n\r\nObservationImageDialog.propTypes = {\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n image: PropTypes.string,\r\n label: PropTypes.string,\r\n};\r\n\r\nexport default withTheme(withTranslation()(withStyles(styles)(ObservationImageDialog)));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\n//img \r\nimport MapSearch from 'mdi-material-ui/MapSearch';\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, withTheme } from '@material-ui/core/styles';\r\nimport Box from '@material-ui/core/Box';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { cloudDocsService } from '../../services/cloud_documents_service';\r\nimport { isEmpty, projectService } from '../../services/project_service';\r\nimport { storageService } from '../../../services/storage_service';\r\nimport { dialogService } from '../../../services/dialog_service';\r\nimport { errExtractor } from '../../services/error_extractor';\r\nimport Paywall from '../../overlays/paywall_component';\r\nimport List from '@material-ui/core/List';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport ListSubheader from '@material-ui/core/ListSubheader';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport StrengsSummary from '../../document/inspection/strengs/strengs_summary_component';\r\nimport StrengsSummaryDialog from '../../document/inspection/strengs/strengs_summary_dialog';\r\nimport ObservationImageDialog from '../../document/inspection/observation/observation_image_dialog';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\n\r\nconst styles = (theme) => ({\r\n paper: {\r\n backgroundColor: theme.palette.background.paper,\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n height: '100%'\r\n },\r\n list: {\r\n overflow: 'auto',\r\n flex: 1,\r\n minWidth: '300px'\r\n },\r\n listHeader: { \r\n backgroundColor: theme.palette.background.paper,\r\n display: 'flex', \r\n flexDirection: \"row\",\r\n justifyContent: \"center\",\r\n color: theme.palette.text.primary\r\n },\r\n backdrop: {\r\n zIndex: theme.zIndex.drawer + 1,\r\n color: '#fff',\r\n },\r\n selectAll: {\r\n marginRight: theme.spacing(2)\r\n },\r\n searchBtn: {\r\n position: 'absolute', \r\n right: theme.spacing(1), \r\n top: theme.spacing(1)\r\n }\r\n});\r\n\r\n\r\nclass NewProjects extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n projects: [],\r\n loaded: false,\r\n selectedIdx: -1, // currently selected project\r\n selectedProject: null, // the full object of the selected project (not the same as the object found in 'projects')\r\n strengDetailsTip: null, // when set, a popup should open some details of the obs, like the image\r\n strengDetailsUrl: null, // when set, show popup with image\r\n summaryDlgOpen: false, // when set, show dialog for details.\r\n innerWidth: window.innerWidth, // for responsive behaviour\r\n }\r\n }\r\n\r\n /**\r\n * load data here, constructor gets called multiple times, causing data to be loaded multiple times\r\n */\r\n async componentDidMount() {\r\n const { t } = this.props;\r\n try {\r\n window.addEventListener('resize', this.updateDimensions);\r\n const result = await cloudDocsService.getDocs(\"new\");\r\n let docs = []; // all the projects transformed, so they can be displayed\r\n let needsCal = false; // if some projects dont have (full) statistics yet, calculate them\r\n for (const el of result) {\r\n const doc = {\r\n isRead: false,\r\n name: el.name ? el.name.split('_').join(' ') : '',\r\n rawData: el, // so we can quickly save recipient & id changes without having to reload the data all the time. WARNING: could be mem issue\r\n date: el.publishedAt ? new Date(el.publishedAt) : t('Not yet published')\r\n };\r\n docs.push(doc);\r\n if (!el.statistics) { // temp solution while stats are not yet calculated upon upload\r\n needsCal = true;\r\n }\r\n }\r\n docs = docs.sort((a, b) => b.date - a.date)\r\n this.setState({ projects: docs, loaded: true });\r\n if (needsCal) {\r\n await this.calculateStats();\r\n }\r\n }\r\n catch(error) {\r\n this.setState({ loaded: true });\r\n dialogService.error(t(\"Dashboard\"), t(\"docs_load_failed\", { error: errExtractor.get(error) }));\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('resize', this.updateDimensions);\r\n }\r\n\r\n /**\r\n * calculates the statistics for the items that dont have them yet and store the 100 first items as well (so others dont have to recalculate)\r\n */\r\n async calculateStats() {\r\n const items = [...this.state.projects];\r\n let count = 0;\r\n for(let i=0; i < items.length; i++) {\r\n try { // try to keep things running, but errors arent fatal here\r\n const el = items[i].rawData;\r\n if (!el.statistics){\r\n const project = await cloudDocsService.getProject(el.id, false);\r\n project.statistics = projectService.calculateStats(project);\r\n items[i].rawData = project;\r\n count++;\r\n if (count < 100) {\r\n await cloudDocsService.saveStats(project);\r\n }\r\n }\r\n }\r\n catch(error) {\r\n console.log(error);\r\n }\r\n }\r\n this.setState({projects: items});\r\n //this.forceUpdate();\r\n }\r\n\r\n /**\r\n * called when the window is resized. Used to trigger responsive behaviour.\r\n */\r\n updateDimensions = () => {\r\n const width = window.innerWidth;\r\n this.setState({innerWidth: width});\r\n }\r\n\r\n\r\n render() {\r\n const { t, classes } = this.props;\r\n let selected = this.state.selectedProject;\r\n let rightSide = null;\r\n const wideScreen = this.state.innerWidth > this.props.theme.breakpoints.values.sm;\r\n if (wideScreen) {\r\n rightSide = this.buildRightSide(selected);\r\n }\r\n const leftSide = this.buildleftPart(wideScreen);\r\n return (\r\n \r\n {leftSide}\r\n {rightSide}\r\n {(selected && this.state.summaryDlgOpen) &&\r\n \r\n }\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n /**\r\n * builds the right view\r\n * @param {object} selected the selected project \r\n */\r\n buildRightSide(selected) {\r\n const { t, classes } = this.props;\r\n if (selected) {\r\n return( \r\n \r\n );\r\n }\r\n else {\r\n return( \r\n {t(\"No project selected\")} \r\n \r\n );\r\n }\r\n }\r\n\r\n buildleftPart(wideScreen) {\r\n const { t, classes } = this.props;\r\n let paywall = null;\r\n let listStyle = null;\r\n //paywall = \r\n //listStyle = {paddingBottom: '0px'}; // when paywall visible, bottom of list should be removed, otherwise there remains some room to clic\r\n let result =\r\n \r\n \r\n \r\n \r\n \r\n \r\n {prjDate} \r\n
}\r\n secondary={\r\n {icon}{el.streng.ref}
\r\n }\r\n return result;\r\n }\r\n\r\n buildSecondary(el, idx) {\r\n const { classes } = this.props;\r\n let details = this.state.showInventory ? el.details.other : el.details.errors;\r\n let secondary;\r\n if (el.streng.pointRef3) {\r\n secondary = `${el.streng.pointRef1} - ${el.streng.pointRef2} - ${el.streng.pointRef3}`;\r\n }\r\n else {\r\n secondary = `${el.streng.pointRef1} - ${el.streng.pointRef2}`;\r\n }\r\n secondary = \r\n
\r\n {(details && details.length > 0) &&\r\n {secondary}
\r\n \r\n
\r\n {el.streng.expectedInspectionLength} m
\r\n {el.streng.actualInspectionLength} m
\r\n \r\n {el.streng.location}\r\n
\r\n \r\n 
\r\n
\r\n \r\n {this.props.label} \r\n
\r\n \r\n - \r\n {/*
\r\n {result}\r\n \r\n {t(\"No new projects available\")} \r\n \r\n {paywall}\r\n
\r\n }\r\n return result;\r\n }\r\n\r\n renderProject(prj, idx) {\r\n const { t, classes } = this.props;\r\n let streets = '';\r\n if (prj.rawData.statistics && prj.rawData.statistics.locations) {\r\n streets = ' - ' + prj.rawData.statistics.locations.join(', ');\r\n }\r\n let prjDate = '';\r\n if (prj.date) {\r\n if (prj.date instanceof Date) {\r\n prjDate = prj.date.toLocaleDateString();\r\n }\r\n else if (prj.date instanceof String) {\r\n prjDate = prj.date;\r\n }\r\n }\r\n let prjColor = null;\r\n if (prj.rawData.statistics) {\r\n if (prj.rawData.statistics.maxErr > 2) {\r\n prjColor = {color: 'red'};\r\n }\r\n else if (prj.rawData.statistics.maxErr > 0) {\r\n prjColor = {color: 'orange'};\r\n }\r\n }\r\n return (\r\n {prj.name}
\r\n \r\n
\r\n \r\n {this.renderStepButtons()}\r\n
\r\n \r\n {this.renderMeasureButton(0)}\r\n {this.renderStepButtons()}\r\n
\r\n \r\n {this.renderMeasureButton(1)}\r\n {this.renderStepButtons()}\r\n
\r\n \r\n
\r\n }\r\n {t(\"Measure\")}\r\n \r\n );\r\n }\r\n\r\n renderStepReady() {\r\n const { t, classes } = this.props;\r\n return (\r\n \r\n {this.state.collectionCountDown} \r\n
\r\n \r\n {this.renderStepButtons()}\r\n
\r\n \r\n \r\n {t(\"Back\")}\r\n \r\n \r\n {this.state.activeStep === 3 ? t('Show') : t('Next')}\r\n \r\n
\r\n );\r\n }\r\n\r\n async requestMeasurePermissions() {\r\n if (navigator.permissions) {\r\n // https://w3c.github.io/orientation-sensor/#model\r\n const perms = [navigator.permissions.query({ name: \"accelerometer\" }),\r\n navigator.permissions.query({ name: \"magnetometer\" }),\r\n navigator.permissions.query({ name: \"gyroscope\" })\r\n ];\r\n const results = await Promise.all(perms);\r\n if (!results.every(result => result.state === \"granted\")) {\r\n throw new Error(\"Permission to use sensor was denied.\");\r\n }\r\n } else {\r\n console.log(\"No Permissions API, still try to start app.\");\r\n }\r\n }\r\n\r\n /**\r\n * starts collecting gsp measurements for the specified step\r\n * @param {number} idx 0 or 1 for the step (start, direction)\r\n */\r\n measure = (idx) => async () => {\r\n this.setState({ collecting: 0 });\r\n try {\r\n await this.requestMeasurePermissions();\r\n await Promise.all([this.measureCurrentLocation(0), this.measureHeading()]);\r\n //await this.measureCurrentLocation(idx);\r\n }\r\n catch (error) {\r\n const { t } = this.props;\r\n if (this.coordinates[0].length === 0 || error != \"timeout\") {\r\n dialogService.error(t(\"Gps\"), errExtractor.get(error));\r\n }\r\n }\r\n this.setState({ collecting: null });\r\n }\r\n\r\n async measureCurrentLocation(idx) {\r\n let startTime = 0; // only get start Time after we got the first coordinate, cause otherwise we don't know how long the first measurement took and how long the user waited before aproving the gps\r\n let newTime = 0;\r\n while (this.coordinates[idx].length < 100 && (newTime - startTime) < SAMPLE_DURATION * 1000) { // measure for 20 seconds, but do\r\n if (startTime === 0) {\r\n startTime = Date.now();\r\n newTime = Date.now();\r\n }\r\n let gps = await this.getGPS();\r\n this.coordinates[idx].push(gps);\r\n let nextTime = Date.now();\r\n await sleep(SAMPLE_DURATION * 10); // give at least 0.3 seconds before measuring again, othrewise we can get timeouts easily\r\n const newCountDown = Math.trunc(SAMPLE_DURATION - ((newTime - startTime) / 1000)); // let the user know how much time is left.\r\n if (newCountDown != this.state.collectionCountDown) {\r\n this.setState({ collectionCountDown: newCountDown });\r\n }\r\n newTime = nextTime;\r\n }\r\n }\r\n\r\n async measureHeading() {\r\n let result = [];\r\n\r\n const options = { frequency: 60, referenceFrame: 'device' };\r\n const sensor = new AbsoluteOrientationSensor(options);\r\n sensor.addEventListener('reading', e => {\r\n var q = e.target.quaternion;\r\n let alpha = Math.atan2(2*q[0]*q[1] + 2*q[2]*q[3], 1 - 2*q[1]*q[1] - 2*q[2]*q[2])*(180/Math.PI);\r\n if(alpha < 0) alpha = 360+ alpha;\r\n result.push(alpha);\r\n });\r\n sensor.start();\r\n await sleep(SAMPLE_DURATION * 1000); // let it sample some\r\n sensor.stop();\r\n let sum = result.reduce((sum, a) => { return (sum + a) }, 0);\r\n this.heading = 360 - (sum / result.length); // need to flip it, otherwise it goes in the wrong direction\r\n console.log('found compass', this.heading);\r\n }\r\n\r\n async getGPS() {\r\n return new Promise((resolve, reject) => {\r\n if (navigator.geolocation) {\r\n const options = { enableHighAccuracy: true, maximumAge: 0, timeout: SAMPLE_DURATION * 1000 };\r\n navigator.geolocation.getCurrentPosition(\r\n (pos) => {\r\n resolve(pos.coords);\r\n }, (err) => {\r\n reject(err);\r\n }, options);\r\n }\r\n else {\r\n reject(\"no gps device available\");\r\n }\r\n });\r\n }\r\n\r\n handleNext = () => {\r\n const stepCount = this.state.useCompass ? 2 : 3;\r\n if (this.state.activeStep < stepCount) {\r\n this.setState({ activeStep: this.state.activeStep + 1 });\r\n }\r\n else {\r\n this.calculateData();\r\n //this.testCalc();\r\n this.props.history.push('/ar', {places: this.data});\r\n }\r\n }\r\n\r\n handleBack = () => {\r\n if (this.state.activeStep > 0) {\r\n this.setState({ activeStep: this.state.activeStep - 1 });\r\n }\r\n }\r\n\r\n calculateData() {\r\n try {\r\n let result = this.calculateAvgCoordinates();\r\n if (result.length === 2) {\r\n this.calculateAddStrengData(result);\r\n }\r\n else if (result.length == 1 && this.heading) {\r\n this.addStrengData(result);\r\n }\r\n this.data = result;\r\n }\r\n catch (error) {\r\n dialogService.error(\"Augmented reality\", errExtractor.get(error));\r\n }\r\n }\r\n\r\n calculateAvgCoordinates() {\r\n let result = [];\r\n for (let elements of this.coordinates) {\r\n elements.splice(0, elements.length / 2); // remove firs half of coordinates, those are the lease accurate usually\r\n if (elements.length) {\r\n let sum = elements.reduce((sum, a) => {\r\n return ({ lat: sum.lat + a.latitude, lng: sum.lng + a.longitude });\r\n }, { lat: 0, lng: 0 });\r\n let avg = { lat: sum.lat / elements.length, lng: sum.lng / elements.length };\r\n result.push(\r\n {\r\n name: 'start',\r\n color: 'blue',\r\n location: avg,\r\n }\r\n )\r\n }\r\n else if (!this.heading) {\r\n throw new Error(\"no gps data\");\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n testCalc() {\r\n /*\r\n let testPoint = new google.maps.LatLng(51.002385100000026, 4.632476999999997);\r\n let resultPoint = google.maps.geometry.spherical.computeOffset(testPoint, 50, 44.78339601860219);\r\n let res = {lat: resultPoint.lat(), lng: resultPoint.lng()};\r\n console.log(res);\r\n\r\n\r\n resultPoint = google.maps.geometry.spherical.computeOffset(testPoint, 50, 221.50839316640798);\r\n res = {lat: resultPoint.lat(), lng: resultPoint.lng()};\r\n console.log(res);\r\n */\r\n }\r\n\r\n /**\r\n * uses the direction and distance to calcualte the other points. this is done with google api, it has this calculation\r\n */\r\n addStrengData(result) {\r\n let color = this.props.showInventory ? 'green' : 'red';\r\n const list = this.props.showInventory ? this.props.data.streng.inventory : this.props.data.streng.errors;\r\n const startPoint = new google.maps.LatLng(result[0].location.lat, result[0].location.lng);\r\n let lastDistance = 0;\r\n const totalInsplength = this.props.data.streng.actualInspectionLength;\r\n for (const rec of list) {\r\n const obs = rec.obs;\r\n if (obs.longitude != lastDistance) { // only show 1 item at the same pos\r\n const loc = google.maps.geometry.spherical.computeOffset(startPoint, obs.longitude, this.heading);\r\n if (list[list.length-1] === rec && obs.longitude >= totalInsplength) { // last one\r\n color = 'yellow';\r\n }\r\n result.push(\r\n {\r\n name: obs.values.join('-'),\r\n color: color,\r\n location: { lat: loc.lat(), lng: loc.lng() },\r\n }\r\n );\r\n }\r\n lastDistance = obs.longitude;\r\n }\r\n if (color !== 'yellow') { // didn't add the last item in the list.\r\n const loc = google.maps.geometry.spherical.computeOffset(startPoint, totalInsplength, this.heading);\r\n result.push({name: 'end', color: 'yellow', location: { lat: loc.lat(), lng: loc.lng() } });\r\n }\r\n }\r\n\r\n /**\r\n * uses distance between 2 points to get direction and extrapolate other points along the same line\r\n */\r\n calculateAddStrengData(result) {\r\n const distance = calcCrow(result[0].location.lat, result[0].location.lng, result[1].location.lat, result[1].location.lng);\r\n if (distance === 0) {\r\n throw new Error(\"not enough distance between the 2 points\");\r\n }\r\n const startPoint = new google.maps.LatLng(result[0].location.lat, result[0].location.lng);\r\n const endPoint = new google.maps.LatLng(result[1].location.lat, result[1].location.lng);\r\n this.heading = google.maps.geometry.spherical.computeHeading(startPoint, endPoint);\r\n this.addStrengData(result);\r\n }\r\n}\r\n\r\nAugmentedReality.propTypes = {\r\n data: PropTypes.array, // data to show\r\n showInventory: PropTypes.bool, // deterimens what is shown\r\n};\r\n\r\nexport default withTranslation()(withStyles(styles)(withRouter(AugmentedReality)));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\n// icons\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, withTheme } from '@material-ui/core/styles';\r\n\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Button from '@material-ui/core/Button';\r\nimport { withTranslation } from 'react-i18next';\r\nimport AugmentedReality from './ar_component';\r\n\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n },\r\n \r\n \r\n \r\n});\r\n\r\n\r\nclass ARDialog extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { t } = this.props;\r\n if (!this.props.open) {\r\n return null;\r\n }\r\n return (\r\n \r\n
\r\n - \r\n\r\n {(!configService.isMobile) &&\r\n
\r\n {result}\r\n \r\n {t(\"Search\")} \r\n \r\n {paywall}\r\n
\r\n }\r\n return result;\r\n }\r\n\r\n handleShowAR = (data, showInventory) => {\r\n this.setState({ ARData: data, ARShowInventory: showInventory, detailsDlgOpen: false });\r\n }\r\n\r\n handlePlaceValueChanged = () => {\r\n if (this.state.searchValue) { // when the user enters a new value, need to amke certain to remove the previous 'pre-filled' value from 'current location'\r\n this.setState({ searchValue: null });\r\n }\r\n }\r\n\r\n handleGetCurrentLocation = async () => {\r\n try {\r\n let location = await getCurrentGeoLocation();\r\n this.setState({ searchValue: location.address });\r\n await this.performSearch(location);\r\n }\r\n catch (error) {\r\n const { t } = this.props;\r\n dialogService.error(t(\"Search\"), t(\"failed_to_get_pos\", { error: errExtractor.get(error) }));\r\n }\r\n }\r\n\r\n handleDownloadData = () => {\r\n const data = projectsToCsv(this.state.projects);\r\n let blob = new Blob([data], { type: 'text/csv' });\r\n const url = window.URL.createObjectURL(blob);\r\n downloadUrl(url, 'download.csv');\r\n }\r\n\r\n handlePlaceSelected = async (place) => {\r\n const { t } = this.props;\r\n try {\r\n if (place instanceof String) {\r\n throw new Error(t(\"valid_google_search_result_required\"));\r\n }\r\n const location = extractDataFromGoogleGeoLocation(place);\r\n await this.performSearch(location);\r\n this.setState({ searchValue: location.address });\r\n }\r\n catch (error) {\r\n dialogService.error(t(\"Search\"), t(\"failed_to_get_pos\", { error: errExtractor.get(error) }));\r\n }\r\n }\r\n\r\n async performSearch(location) {\r\n if (!this.data) { // the data is not yet loaded\r\n this.searchAfterDataLoaded = location;\r\n this.setState({ loaded: false });\r\n }\r\n else {\r\n this.setState({ loaded: false });\r\n try {\r\n let analyser = new Analyzer();\r\n setTimeout(async () => { // let the ui show the load screen.\r\n let docs = await analyser.filter(this.data, location);\r\n docs = analyser.buildMap(docs);\r\n docs = Object.values(docs);\r\n docs.sort((a, b) => {\r\n if (a.location < b.location) {\r\n return -1;\r\n }\r\n if (a.location > b.location) {\r\n return 1;\r\n }\r\n if (a.route < b.route) {\r\n return -1;\r\n }\r\n if (a.route > b.route) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n this.setState({ projects: docs });\r\n }, 0);\r\n }\r\n finally {\r\n this.setState({ loaded: true });\r\n }\r\n }\r\n }\r\n\r\n\r\n renderProject(data, idx) {\r\n const { t, classes } = this.props;\r\n let dates = [... new Set(Object.values(data.strengs).map((el) => el.date))];\r\n //for (const prj of data.projects) {\r\n // let date = prj.publishedAt ? new Date(prj.publishedAt).toLocaleDateString() : prj.uploadedAt ? new Date(prj.uploadedAt).toLocaleDateString() : \"unknown date\";\r\n // if (dates.indexOf(date) === -1) { // only add unique dates\r\n // dates.push(date);\r\n // }\r\n // }\r\n let dataColor = null;\r\n if (data.maxErr > 2) {\r\n dataColor = { color: 'red' };\r\n }\r\n else if (data.maxErr > 0) {\r\n dataColor = { color: 'orange' };\r\n }\r\n return (\r\n {data.location}
\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n \r\n
\r\n }\r\n {(!allowCollaps) &&\r\n \r\n {this.props.children}\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n buildToolbar = (props) => {\r\n const { t } = this.props;\r\n if (this.state.allowProFeatures) {\r\n const company = this.state.company;\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n else {\r\n return (\r\n {t(\"nr_pro_viewer_licenses_left_of_total\", { total: company.nrProLicenses, available: company.nrProLicenses - this.state.nrLicensesUsed})}\r\n
\r\n \r\n \r\n {t(\"Algemeen\")} \r\n \r\n {t(\"Taal\")} \r\n \r\n {LanguageOptions.map((x, idx) => {\r\n return(); \r\n })}\r\n \r\n {t(\"Selecteer de taal voor de interface\")} \r\n \r\n\r\n \r\n\r\n {t(\"Tractor\")} \r\n\r\n \r\n {t(\"Pitch\")} \r\n this.setState({InclinationAsPercentage: ev.target.value})}\r\n inputProps={{\r\n name: 'pitch',\r\n id: 'pitch',\r\n }}\r\n >\r\n \r\n \r\n \r\n {t(\"Specifieer in welk formaat pitch wordt uitgedrukt.\")} \r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n\r\n setLanguage = (ev) => {\r\n\r\n let value = ev.target.value;\r\n this.props.i18n.changeLanguage(value);\r\n this.setState({lang: ev.target.value}); // system default is stored as the value as well.\r\n }\r\n}\r\n\r\nGeneralSettings.propTypes = {\r\n isCurrentTab: PropTypes.bool.isRequired\r\n};\r\n\r\nexport default withTranslation()(withStyles(styles)(GeneralSettings));","/* \r\n * ELASTETIC CONFIDENTIAL\r\n * ______________________\r\n * \r\n * [2019] - [2020] Elastetic GCV\r\n * All Rights Reserved.\r\n * \r\n * NOTICE: All information contained herein is, and remains\r\n * the property of Elastetic GCV and its suppliers,\r\n * if any. The intellectual and technical concepts contained\r\n * herein are proprietary to Elastetic GCV\r\n * and its suppliers and may be covered by Belgian, EU and Foreign Patents,\r\n * patents in process, and are protected by trade secret or copyright law.\r\n * Dissemination of this information or reproduction of this material\r\n * is strictly forbidden unless prior written permission is obtained\r\n * from Elastetic GCV.\r\n */\r\n\r\nimport React from 'react';\r\nimport '../../App.css';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Box from '@material-ui/core/Box';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport MainLayout from '../../shared_components/layouts/main_layout_component';\r\nimport CompanySettings from '../../shared_components/settings/company_component';\r\nimport GeneralSettings from './general_component';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\n//icons:\r\nimport ArrowLeft from 'mdi-material-ui/ArrowLeft';\r\nimport { userService } from '../../shared_components/services/user_service';\r\n\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.default,\r\n display: 'flex',\r\n flexDirection: 'column'\r\n },\r\n tabs: {\r\n borderRight: `1px solid ${theme.palette.divider}`\r\n },\r\n\r\n tab: {\r\n flex: 1\r\n }\r\n});\r\n\r\n\r\n\r\nclass Settings extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const user = userService.getCurrentUser();\r\n this.isCompanyAdmin = user && user.companyRole === \"companyAdmin\";\r\n this.state = {\r\n currentTab: \"general\"\r\n }\r\n }\r\n\r\n render() {\r\n const { t } = this.props;\r\n return (\r\n \r\n