\r\n
\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Settings\r\n \r\n \r\n \r\n \r\n \r\n logout(localStorage.getItem('email'))}\r\n >\r\n Logout\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nUser.propTypes = {\r\n className: PropTypes.string\r\n};\r\nUser.defaultProps = {\r\n className: ''\r\n};\r\n\r\nexport default User;\r\n\r\n\r\nconst LogoutIcon = styled.svg`\r\n g {\r\n stroke: ${({ theme }) => theme.greyPalette.grey};\r\n }\r\n`;\r\n\r\nconst ArrowRightIcon = styled.svg`\r\n g {\r\n stroke: ${({ theme }) => theme.greyPalette.grey};\r\n }\r\n`;\r\n\r\nconst StyledLink = styled(Link)`\r\n align-items: center;\r\n border-bottom: 1px solid ${({ theme }) => theme.borderColor};\r\n color: ${props => props.theme.greyPalette.grey};\r\n display: flex;\r\n font-size: 12px;\r\n font-weight: ${props => props.theme.fontWeight.regular};\r\n justify-content: space-between;\r\n min-width: 140px;\r\n padding: 10px 15px;\r\n\r\n &:hover, &:active {\r\n background-color: ${props => props.theme.secondaryColorPalette.transparent};\r\n color: ${props => props.theme.greyPalette.black};\r\n\r\n ${ArrowRightIcon} {\r\n g {\r\n stroke: ${({ theme }) => theme.secondaryColorPalette.main};\r\n }\r\n }\r\n\r\n ${LogoutIcon} {\r\n g {\r\n stroke: ${({ theme }) => theme.secondaryColorPalette.main};\r\n }\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-bottom: 0;\r\n }\r\n`;\r\n\r\nconst UserIcon = styled.svg`\r\n width: 18px;\r\n\r\n g {\r\n fill: ${({ active, theme }) => (active ? theme.secondaryColorPalette.main : theme.greyPalette.grey)};\r\n }\r\n\r\n &:hover {\r\n g {\r\n fill: ${({ theme }) => theme.secondaryColorPalette.main};\r\n }\r\n }\r\n`;\r\n\r\nconst UserButton = styled.div`\r\n align-items: center;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: center;\r\n`;\r\n\r\nconst UserPanel = styled.section`\r\n background: ${props => props.theme.primaryBackground};\r\n border-radius: ${props => props.theme.borderRadius};\r\n box-shadow: ${props => props.theme.boxShadow};\r\n display: ${props => (props.opened ? 'block' : 'none')};\r\n margin-top: -10px;\r\n position: absolute;\r\n right: 20px;\r\n top: 100%;\r\n z-index: 1;\r\n`;\r\n","export default __webpack_public_path__ + \"static/media/brand-laerdal-logo.4698633d.svg\";","import { connect } from 'react-redux';\r\nimport { Link, matchPath, NavLink, withRouter } from 'react-router-dom';\r\nimport { getSettingsAction } from '../../actions';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState, useEffect } from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { setTextFilterAndResetOtherAction, setLastSelectedHospitalAction } from '../../actions/filters';\r\nimport Feedback from './Feedback';\r\nimport Search from '../../components/Search';\r\nimport Title from '../../components/Texts/Title';\r\nimport User from './User';\r\n\r\nimport logo from '../../styles/images/brand-laerdal-logo.svg';\r\n\r\n// Cut text by maxLen and add a suffix if needed\r\n// The result won't exceed maxLen\r\nconst cutText = (text, maxLen, suffix) => {\r\n let slen = 0;\r\n if (suffix) {\r\n slen = suffix.length;\r\n }\r\n\r\n if (text.length > maxLen) {\r\n return text.substr(0, maxLen - slen) + suffix;\r\n }\r\n\r\n return text;\r\n};\r\n\r\nconst Header = (props) => {\r\n const [feedbackOpened, setFeedbackOpened] = useState(false);\r\n\r\n const handleSearch = (str) => {\r\n const { setTextFilterAndResetOther } = props;\r\n setTextFilterAndResetOther(str.trim());\r\n };\r\n const { location, hospitalId, searchText, history, setLastSelectedHospitalId, settings, loadSettings } = props;\r\n\r\n // Reset selected hospital filter when jumping back from hospital statistics page\r\n useEffect(() => {\r\n const { pathname } = location;\r\n const isOnHospitalStatsPage = Boolean(\r\n matchPath(pathname, {\r\n path: '/hospitalstats/',\r\n }),\r\n );\r\n if (!isOnHospitalStatsPage) {\r\n setLastSelectedHospitalId('');\r\n }\r\n }, [location]);\r\n\r\n const { pathname } = location;\r\n const displaySearch = Boolean(\r\n matchPath(pathname, {\r\n path: '/dashboard',\r\n }),\r\n );\r\n\r\n const disableEditHospitalStats = Boolean(\r\n matchPath(pathname, {\r\n path: '/hospitalstats/',\r\n }),\r\n );\r\n\r\n const onEditHospitalStatisticsClick = () => {\r\n history.push(`/hospitalstats/${hospitalId}`);\r\n };\r\n\r\n return (\r\n \r\n setFailure(e.target.value)}\r\n type=\"radio\"\r\n value={opt}\r\n />\r\n \r\n {opt}\r\n \r\n
\r\n ));\r\n\r\n const renderCustomFailure = () => (\r\n \r\n
\r\n )}\r\n ]), []);\r\n\r\n return (\r\n
\r\n {renderCloseIcon && (\r\n
\r\n );\r\n };\r\n\r\n render() {\r\n const {\r\n id,\r\n selected\r\n } = this.props;\r\n\r\n return (\r\n {name}
\r\n\r\n Manikins: \r\n {manikinsCount}\r\n
\r\n\r\n Unhandled issues: \r\n {faultyManikinsCount}\r\n
\r\n\r\n Current actions: \r\n {handledFailures}\r\n
\r\n{hospitals ? 'Hospitals' : 'Assets'} with status:
\r\n\r\n Critical:\r\n {slices[0].number}\r\n
\r\n\r\n At risk:\r\n {slices[1].number}\r\n
\r\n\r\n Warnings:\r\n {slices[2].number}\r\n
\r\nHealthy:{slices[3].number}
\r\n\r\n
\r\n );\r\n };\r\n\r\n renderMapContents = () => {\r\n const { clusters } = this.state;\r\n\r\n return clusters.map((item) => {\r\n if (item.numPoints === 1) {\r\n return this.renderMarker(item.points[0]);\r\n }\r\n\r\n return this.renderCluster(item);\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.renderMapContents()}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n assetsUpdates: state.manicDataReducer.updates,\r\n googleApiKey: state.user.googleApiKey,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(HospitalMapWrapper);\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nconst CheckboxSquare = (props) => {\r\n const {\r\n className,\r\n checked,\r\n disabled,\r\n label,\r\n onClick,\r\n size\r\n } = props;\r\n\r\n const handleClick = () => disabled || onClick(label);\r\n\r\n return (\r\n \r\n = 0}\r\n id={`${optn.assetSubPartId}`}\r\n name={optn.assetSubPartId}\r\n onChange={() => handleItemToggle(optn)}\r\n type={buttonType}\r\n value={optn.assetSubPartId}\r\n />\r\n \r\n {optn.name}\r\n \r\n
\r\n ));\r\n\r\n const renderMultipleModeItem = (optn, column) => {\r\n let groupName = optn.assetSubPartId;\r\n if (buttonType === 'checkbox') {\r\n groupName = `${column.replacementTypeId}-${groupName}`;\r\n } else if (isSingleColumn) {\r\n // For single column radio group should be spreaded vertically\r\n groupName = `${column.replacementTypeId}`;\r\n }\r\n return (\r\n \r\n setRepairReason(e.target.value)}\r\n checked={repairReason === opt.repairReasonId}\r\n />\r\n \r\n {opt.name}\r\n \r\n
\r\n ));\r\n\r\n const renderMultiValueOptions = (groupName, selectedValue, onChange) => MULTI_VALUE_OPTIONS.map(opt => (\r\n \r\n onChange(e.target.value)}\r\n checked={selectedValue === opt.value}\r\n />\r\n \r\n {opt.label}\r\n \r\n
\r\n ));\r\n\r\n const handleManikinPartChange = (value, columnValue) => {\r\n let result = _.clone(columnValue ? replacedParts : repairReasonParts);\r\n let toggleArr = columnValue ? replacedParts[columnValue] : result;\r\n\r\n if (columnValue) {\r\n result = Object.fromEntries(\r\n Object.entries(result).map(([key, tarr]) => [key, tarr.filter(val => val !== value)])\r\n );\r\n }\r\n\r\n if (toggleArr.indexOf(value) >= 0) {\r\n toggleArr = toggleArr.filter(val => val !== value);\r\n } else {\r\n toggleArr.push(value);\r\n }\r\n\r\n if (columnValue) {\r\n // Firmware can only contain one selected value\r\n result[columnValue] = value.indexOf('_firmware') > 0\r\n ? toggleArr.filter(val => val === value || val.indexOf('_firmware') < 0)\r\n : toggleArr;\r\n setReplacedParts(result);\r\n } else {\r\n setRepairReasonParts(toggleArr);\r\n }\r\n };\r\n\r\n const renderManikinPartsBlock = (controlType, assetParts) => assetParts.map(\r\n (assetPart) => {\r\n let { assetSubParts } = assetPart;\r\n const isFirmware = assetPart.assetPartId.endsWith('_firmware');\r\n\r\n // Title for step 4 is different for firmware\r\n const title = isFirmware && controlType !== MANIKIN_PART_GROUP_TYPE.SINGLE_COLUMN\r\n ? 'Firmware on arrival'\r\n : assetPart.name;\r\n\r\n const buttonType = controlType === MANIKIN_PART_GROUP_TYPE.SINGLE_COLUMN\r\n ? 'checkbox'\r\n : 'radio';\r\n\r\n // Firmware has only one column in case of replacement\r\n // we don't show a header for this column\r\n // and radio buttons are grouped vertically\r\n let columns = controlType === MANIKIN_PART_GROUP_TYPE.SINGLE_COLUMN\r\n ? []\r\n : repairReportData.replacementType;\r\n\r\n // Special case for firmware asset parts/repair reasons\r\n if (isFirmware) {\r\n assetSubParts = controlType === MANIKIN_PART_GROUP_TYPE.SINGLE_COLUMN\r\n ? filterFirmwareRepairReasonPart(assetSubParts)\r\n : filterFirmwareReplacementParts(assetSubParts);\r\n columns = filterFirmwareReplacementTypes(columns);\r\n }\r\n\r\n return (\r\n \r\n \r\n Handled alerts\r\n \r\n
\r\n \r\n \r\n {\r\n `Are you sure you want to send ${actionUpdates.length} selected actions?\r\n You will receive an email at ${email}.`\r\n }\r\n \r\n )}\r\n {success && ({success} )}\r\n {error && ({error} )}\r\n \r\n
\r\n );\r\n};\r\n\r\nSend.propTypes = {\r\n manikins: PropTypes.arrayOf(ManikinShape).isRequired,\r\n assetsUpdates: PropTypes.object.isRequired,\r\n loadManikins: PropTypes.func.isRequired,\r\n resetUpdates: PropTypes.func.isRequired,\r\n startScreen: PropTypes.bool\r\n};\r\n\r\nSend.defaultProps = {\r\n startScreen: false\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n assetsUpdates: state.manicDataReducer.updates\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadManikins: () => dispatch(getData()),\r\n resetUpdates: () => dispatch(resetAssetUpdates())\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Send);\r\n\r\nconst StyledButton = styled(Button)`\r\n margin-left: 20px;\r\n`;\r\n\r\nconst StyledCaption = styled(Caption)`\r\n position: absolute;\r\n top: -3px;\r\n`;\r\n\r\nconst SendContainer = styled.div`\r\n align-items: center;\r\n display: flex;\r\n position: relative;\r\n`;\r\n","import {\r\n SET_CURRENT_ALARMS,\r\n SET_DAILY_ALARMS,\r\n SET_PREFERRED_STATES,\r\n SET_MONITOR_QUERIES\r\n} from '../constants/constants';\r\n\r\nexport const setCurrentAlarmsAction = numberOfAlarms => dispatch => dispatch({\r\n type: SET_CURRENT_ALARMS,\r\n numberOfAlarms\r\n});\r\n\r\nexport const setDailyAlarmsAction = numberOfAlarms => dispatch => dispatch({\r\n type: SET_DAILY_ALARMS,\r\n numberOfAlarms\r\n});\r\n\r\nexport const setPreferredStatesAction = states => dispatch => dispatch({\r\n type: SET_PREFERRED_STATES,\r\n states\r\n});\r\n\r\nexport const setMonitorQueriesAction = monitorQueries => dispatch => dispatch({\r\n type: SET_MONITOR_QUERIES,\r\n monitorQueries\r\n});\r\n\r\nexport default {\r\n setCurrentAlarmsAction,\r\n setDailyAlarmsAction\r\n};\r\n","import styled from 'styled-components';\r\nimport Button from '../../components/Button';\r\n\r\nconst s = {};\r\n\r\ns.Root = styled.div`\r\n background-color: ${props => props.theme.primaryBackground};\r\n padding: 90px 30px 20px;\r\n min-height: calc(100% - 55px);\r\n`;\r\n\r\ns.Header = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n height: 50px;\r\n`;\r\n\r\ns.HistoryHeader = styled(s.Header)`\r\n margin-top: 40px;\r\n`;\r\n\r\ns.MoreBtn = styled(Button)`\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-left: -100px;\r\n margin-top: -25px;\r\n`;\r\n\r\nexport default s;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { DateTime } from 'luxon';\r\nimport { uniqBy } from 'lodash';\r\n\r\nimport AssetsListContainer from '../listview/AssetsList/AssetsListContainer';\r\nimport Send from '../listview/Send';\r\nimport Title from '../../components/Texts/Title';\r\n\r\nimport {\r\n HospitalShape,\r\n ManikinShape\r\n} from '../../constants/types';\r\nimport {\r\n manikinFromStartScreen,\r\n manikinHandled,\r\n sortFunctions\r\n} from '../../utility/manikin';\r\nimport { setCurrentAlarmsAction } from '../../actions/user';\r\n\r\nimport s from './DailyReport.style';\r\nimport { setLastSelectedHospitalAction } from '../../actions/filters';\r\nimport { ALARM_TYPES, PROGRAM } from '../../constants/constants';\r\n\r\nconst countHandledDailyAlarms = (manikins) => {\r\n const today = DateTime.local();\r\n\r\n return manikins.filter((manikin) => {\r\n const { action } = manikin;\r\n const actionDate = DateTime.fromISO(action.actionDate);\r\n\r\n return action.fromStartScreen && today.hasSame(actionDate, 'day');\r\n }).length;\r\n};\r\n\r\nconst manikinPassesStates = (manikin, states, hospitals) => {\r\n if (!states.length) {\r\n return true;\r\n }\r\n\r\n const { hospitalId } = manikin;\r\n const hospital = hospitals.find(h => h.hospitalId === hospitalId);\r\n const { usState } = hospital.location;\r\n\r\n return states.includes(usState);\r\n};\r\n\r\n// So far there are 3 types of hospitals accepted for daily alerts:\r\n// 1. Not 'Healthstream' hospitals\r\n// 2. isVAHospital === false\r\n// 3. Not it Zone51 (has address)\r\nconst getAcceptedForDailyAlertsHospitals = hospitals => hospitals.filter((h) => {\r\n const {\r\n isVAHospital,\r\n placeName\r\n } = h;\r\n\r\n // Default location is 'Zone 51'\r\n const location = h.location || {\r\n lat: 36.643767,\r\n lng: -116.395984,\r\n usState: 'NV'\r\n };\r\n\r\n const {\r\n lat,\r\n lng,\r\n usState\r\n } = location;\r\n return placeName.toLowerCase().indexOf('healthstream') < 0\r\n && !isVAHospital\r\n && lat !== 36.643767\r\n && lng !== -116.395984\r\n && usState !== 'NV';\r\n});\r\n\r\n// For 'Daily alerts' we only show alarms:\r\n// 1. With importance raiting !== -1\r\n// 2. Only selected US states if applied before\r\n// 4. Only RQI program assets\r\n// 4. Don't show 'in_repair' manikins\r\n// 5. Only accepted hospitals using getAcceptedForDailyAlertsHospitals\r\n// 6. Don't show if isDecommissioned === true\r\nconst getInitialManikins = (manikins, states, hospitals) => {\r\n const checkStates = Boolean(states.length);\r\n const acceptedHospitals = getAcceptedForDailyAlertsHospitals(hospitals);\r\n return manikins\r\n .filter(manikin => (\r\n !manikinHandled(manikin)\r\n // Alarms might be deactivated so importance raiting doesn't make sense\r\n && manikin.alarms && manikin.alarms.length > 0 && manikin.alarmImportanceRating !== -1\r\n && (!checkStates || (checkStates && manikinPassesStates(manikin, states, hospitals)))\r\n && (manikin.program === PROGRAM.RQI)\r\n && acceptedHospitals.find(h => h.hospitalId === manikin.hospitalId)\r\n && (!manikin.alarms.find(al => al.alarmType === ALARM_TYPES.IN_REPAIR))\r\n && !manikin.attrs.isDecommissioned\r\n ))\r\n .sort(sortFunctions.alarmImportanceRating);\r\n};\r\n\r\n// Don't show if isDecommissioned === true\r\nconst appendHospitalManikins = (displayManikins, allManikins, hospitalId) => {\r\n const displayManikin = displayManikins.find(manikin => manikin.hospitalId === hospitalId);\r\n const displayManikinIndex = displayManikins.findIndex(manikin => manikin.hospitalId === hospitalId);\r\n const manikinsToAppend = allManikins.filter(manikin => (\r\n manikin.hospitalId === hospitalId\r\n && manikin.assetId !== displayManikin.assetId\r\n && !manikin.isDecommissioned\r\n ));\r\n\r\n manikinsToAppend.sort(sortFunctions.firmwareVersionAsc);\r\n\r\n return displayManikins\r\n .slice(0, displayManikinIndex + 1)\r\n .concat(manikinsToAppend)\r\n .concat(\r\n displayManikins.slice(displayManikinIndex + 1)\r\n );\r\n};\r\n\r\nconst getAlertManikins = (manikins, selectedHospitalId, size, states, hospitals) => {\r\n let displayManikins = getInitialManikins(manikins, states, hospitals).slice(0, size);\r\n\r\n if (selectedHospitalId) {\r\n displayManikins = appendHospitalManikins(displayManikins, manikins, selectedHospitalId);\r\n }\r\n\r\n return displayManikins;\r\n};\r\n\r\nconst getHistoryManikins = (manikins, states, hospitals) => {\r\n const checkStates = Boolean(states.length);\r\n\r\n return manikins\r\n .filter(manikin => (\r\n manikinHandled(manikin)\r\n && manikinFromStartScreen(manikin)\r\n && (!checkStates || (checkStates && manikinPassesStates(manikin, states, hospitals)))\r\n && !manikin.attrs.isDecommissioned\r\n ));\r\n};\r\n\r\nconst DailyReport = (props) => {\r\n const {\r\n loading,\r\n manikins,\r\n hospitals,\r\n dailyAlarmsSetting,\r\n currentAlarms,\r\n preferredStatesSetting,\r\n setCurrentAlarms,\r\n setLastSelectedHospitalId\r\n } = props;\r\n\r\n const decrement = countHandledDailyAlarms(manikins);\r\n const getAlarmsToShowNumber = value => (value < 0 ? 0 : value);\r\n const [selectedHospitalId, setSelectedHospitalId] = useState('');\r\n const [alarmsToShow, setAlarmsToShow] = useState(getAlarmsToShowNumber(currentAlarms - decrement));\r\n const alertManikins = useMemo(() => getAlertManikins(\r\n manikins,\r\n selectedHospitalId,\r\n alarmsToShow,\r\n preferredStatesSetting,\r\n hospitals\r\n ), [manikins, selectedHospitalId, alarmsToShow, preferredStatesSetting, hospitals]);\r\n\r\n const historyManikins = useMemo(\r\n () => getHistoryManikins(manikins, preferredStatesSetting, hospitals),\r\n [manikins, preferredStatesSetting, hospitals]\r\n );\r\n\r\n const dailyReportManikins = useMemo(\r\n () => uniqBy(historyManikins.concat(...alertManikins), m => m.assetId),\r\n [historyManikins, alertManikins]\r\n );\r\n\r\n useEffect(() => {\r\n setAlarmsToShow(getAlarmsToShowNumber(currentAlarms - decrement));\r\n }, [loading, currentAlarms]);\r\n\r\n const handleHospitalSelect = (hospitalId) => {\r\n if (hospitalId === selectedHospitalId) {\r\n setSelectedHospitalId('');\r\n } else {\r\n setSelectedHospitalId(hospitalId);\r\n }\r\n // Store filter should not be toggled (always set)\r\n setLastSelectedHospitalId(hospitalId);\r\n };\r\n\r\n const renderMoreBtn = () => (\r\n \r\n
\r\n );\r\n };\r\n\r\n renderMarker = (hospital) => {\r\n const { hospitalId: id, location } = hospital;\r\n const { lat, lng } = location;\r\n\r\n return (\r\n \r\n {hospitals.map((hospital, i) => {\r\n return
\r\n {this.renderMarkerWrapper(hospital)}
;\r\n })}\r\n \r\n {this.renderMarkerWrapper(hospital)}\r\n
\r\n );\r\n };\r\n\r\n renderMarkerWrapper = (hospital) => {\r\n const { hospitalId: id, manikins, placeName: name } = hospital;\r\n\r\n const { selectedHospitalId } = this.props;\r\n\r\n const selected = selectedHospitalId === id;\r\n const { faulty, total } = getHospitalManikinsCounters(manikins);\r\n\r\n const handledFailures = this.getHospitalHandledIssues(id);\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderClusterByHospital(points, lat, lng, id) {\r\n const clusterPoints = points.reduce(this.reducePointToHospitalsCounter, {\r\n [HOSPITAL_STATES.CRITICAL]: [0, 0],\r\n [HOSPITAL_STATES.RISK]: [0, 0],\r\n [HOSPITAL_STATES.WARN]: [0, 0],\r\n [HOSPITAL_STATES.HEALTHY]: [0, 0],\r\n });\r\n const slices = this.stateCounterToSlices(clusterPoints);\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.googleApiKey ? (\r\n \r\n {this.renderMapContents()}\r\n \r\n ) : null}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n allowedFailureType: state.filters.failureType,\r\n allowedHealth: state.filters.health,\r\n allowedManikinType: state.filters.manikinType,\r\n allowedPrograms: state.filters.program,\r\n allowedHandled: state.filters.handled,\r\n allowedStates: state.filters.states === null ? state.user.settings.preferredStates : state.filters.states,\r\n allowedCountries: state.filters.countries === null ? [] : state.filters.countries,\r\n vaFilter: state.filters.va,\r\n highlightHospitalId: state.filters.highlightHospitalId,\r\n hospitals: state.manicDataReducer.data ? state.manicDataReducer.data.hospitals : [],\r\n decommission: state.filters.decommission,\r\n manikins: state.manicDataReducer.data ? state.manicDataReducer.data.manikins : [],\r\n assetsUpdates: state.manicDataReducer.updates,\r\n searchString: state.filters.text,\r\n selectedHospitalId: state.filters.hospitalId,\r\n googleApiKey: state.user.googleApiKey,\r\n});\r\nconst mapDispatchToProps = (dispatch) => ({\r\n onHospitalSelect: (hospitalId) => dispatch(setHospitalFilterAction(hospitalId)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MapWrapper);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { throttle } from 'lodash';\r\nimport styled from 'styled-components';\r\n\r\nimport { getData } from '../../actions';\r\nimport BlockSkeleton from '../../components/Loading/BlockSkeleton';\r\nimport FiltersPanel from './FiltersPanel';\r\nimport ListView from '../listview/ListView';\r\nimport MapWrapper from '../maps/MapWrapper';\r\n\r\nimport './Dashboard.scss';\r\nimport EditLocationModal, { DialogMode } from '../listview/ListItem/EditLocationModal/EditLocationModal';\r\nimport { EmptyAssetAttributes, ManikinShape } from '../../constants/types';\r\nimport { setTextFilterAndResetOtherAction, setPreSelectedAssetAction, setFilterHospitalHighlightAction } from '../../actions/filters';\r\n\r\nclass Dashboard extends React.Component {\r\n static propTypes = {\r\n loading: PropTypes.bool.isRequired,\r\n manikins: PropTypes.arrayOf(ManikinShape).isRequired,\r\n preSelectedAssetId: PropTypes.string.isRequired,\r\n setHighlightedHospital: PropTypes.func.isRequired,\r\n setPreSelectedAsset: PropTypes.func.isRequired,\r\n setTextFilterAndResetOther: PropTypes.func.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n addAssetModalOpened: false,\r\n heightCorrection: 0,\r\n screenYStart: null,\r\n clusterByHospital: true,\r\n };\r\n\r\n this.handleDragMouseDown = this.handleDragMouseDown.bind(this);\r\n\r\n this.toggleAddAssetModal = this.toggleAddAssetModal.bind(this);\r\n\r\n this.toggleClusterByHospital = this.toggleClusterByHospital.bind(this);\r\n\r\n this.throttledMouseMoveHandler = throttle(this.handleMouseMove, 100, {\r\n trailing: true,\r\n });\r\n }\r\n\r\n onMapReady = () => {\r\n const { manikins, preSelectedAssetId, setHighlightedHospital, setPreSelectedAsset } = this.props;\r\n if (preSelectedAssetId) {\r\n setHighlightedHospital(manikins.find((m) => m.assetId === preSelectedAssetId).hospitalId);\r\n setPreSelectedAsset('');\r\n }\r\n };\r\n\r\n handleMainMouseUp = () => {\r\n document.removeEventListener('mousemove', this.throttledMouseMoveHandler, false);\r\n };\r\n\r\n handleMouseMove = (event) => {\r\n const { screenYStart: startPosition } = this.state;\r\n const verticalCoord = event.clientY;\r\n const heightCorrection = startPosition - verticalCoord;\r\n const mapElement = document.querySelector('.MapWrapper');\r\n const mapHeight = mapElement.offsetHeight;\r\n\r\n if (mapHeight - heightCorrection < 300) {\r\n return;\r\n }\r\n\r\n this.setState({\r\n heightCorrection,\r\n });\r\n };\r\n\r\n handleDragMouseDown(event) {\r\n event.preventDefault();\r\n const screenYStart = event.clientY;\r\n this.setState(\r\n {\r\n screenYStart,\r\n },\r\n () => {\r\n document.addEventListener('mousemove', this.throttledMouseMoveHandler, false);\r\n document.addEventListener('mouseup', this.handleMainMouseUp);\r\n },\r\n );\r\n }\r\n\r\n renderMap = () => {\r\n const { loading } = this.props;\r\n const { heightCorrection, clusterByHospital } = this.state;\r\n const correction = 84 + heightCorrection;\r\n\r\n return (\r\n \r\n
\r\n