- \n
\n 
\n
\n {SideMenuContent()}\n \n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nfunction GetNavBar() {\r\n var userId = localStorage.getItem('userId');\r\n\r\n if (userId) {\r\n return \r\n {GetNavBar()}\r\n ![\"Watts\"](\"/img/logo-white.svg\")
\r\n
\r\n \r\n \r\n {props.rightcontent}\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nconst noNotificationStyles = {\r\n container: {\r\n fontWeight: 'normal',\r\n textAlign: 'center',\r\n padding: '70px'\r\n },\r\n\r\n icon: {\r\n fontSize: '80px',\r\n color: '#E0E0E0'\r\n },\r\n\r\n message: {\r\n fontSize: '16px',\r\n color: '#6D6D6D'\r\n }\r\n}\r\nconst NoNotificationMessage = withStyles(noNotificationStyles)(({ classes }) => {\r\n return (\r\n \r\n
\r\n )\r\n});\r\n\r\nconst styles = {\r\n notificationContainer: {\r\n position: 'relative',\r\n right: '55px',\r\n cursor: 'pointer'\r\n },\r\n\r\n notificationIcon: {\r\n fontSize: '20px',\r\n color: 'white'\r\n },\r\n\r\n notificationCount: {\r\n fontSize: '12px',\r\n fontWeight: 'bold',\r\n color: '#5daef1',\r\n margin: 0,\r\n display: 'inline',\r\n position: 'absolute',\r\n top: '-5px'\r\n },\r\n\r\n popoverPaper: {\r\n width: '330px'\r\n },\r\n\r\n trayHeader: {\r\n backgroundColor: '#005db9',\r\n padding: '16px',\r\n position: 'relative',\r\n color: 'white',\r\n fontSize: '20px'\r\n },\r\n\r\n headerText: {\r\n margin: 0,\r\n padding: 0,\r\n display: 'inline',\r\n fontWeight: '900'\r\n },\r\n\r\n optionsIcon: {\r\n float: 'right',\r\n cursor: 'pointer',\r\n color: 'white'\r\n },\r\n\r\n notificationControls: {\r\n padding: '16px',\r\n textAlign: 'center',\r\n\r\n '& button': {\r\n width: '150px',\r\n textTransform: 'none',\r\n fontSize: '14px',\r\n fontWeight: '900',\r\n color: '#666',\r\n height: '36px'\r\n }\r\n },\r\n\r\n sortButtonSelected: {\r\n borderColor: '#036ecb !important',\r\n backgroundColor: '#E0EDF8 !important',\r\n color: '#005db9 !important'\r\n },\r\n\r\n notificationList: {\r\n maxHeight: '350px',\r\n overflow: 'auto',\r\n\r\n '& a': {\r\n color: 'inherit',\r\n textDecoration: 'inherit'\r\n }\r\n },\r\n\r\n alert: {\r\n borderTop: '1px solid #E0E0E0',\r\n padding: '16px',\r\n paddingTop: '10px',\r\n cursor: 'pointer',\r\n\r\n '&:hover': {\r\n backgroundColor: '#e2f1ff'\r\n }\r\n },\r\n\r\n alertIcon: {\r\n backgroundColor: '#fcc',\r\n borderRadius: '100%',\r\n width: '20px !important',\r\n height: '20px',\r\n padding: '10px',\r\n fontSize: '20px',\r\n color: '#666',\r\n display: 'inline-block',\r\n marginRight: '16px',\r\n verticalAlign: '26px'\r\n },\r\n\r\n alertTime: {\r\n fontSize: '10px',\r\n fontWeight: '300',\r\n margin: 0,\r\n marginBottom: '4px',\r\n textAlign: 'right'\r\n },\r\n\r\n alertInfoContainer: {\r\n display: 'inline-block'\r\n },\r\n\r\n deviceName: {\r\n fontSize: '16px',\r\n fontWeight: '900',\r\n margin: '4px 0'\r\n },\r\n\r\n locationName: {\r\n fontSize: '14px',\r\n fontWeight: '400',\r\n margin: '4px 0'\r\n },\r\n\r\n alertMessage: {\r\n fontSize: '12px',\r\n margin: '4px 0',\r\n color: '#666'\r\n },\r\n\r\n alertIconWarning: {\r\n backgroundColor: '#FFE7D0'\r\n },\r\n\r\n alertIconError: {\r\n backgroundColor: '#fcc'\r\n }\r\n}\r\n\r\nconst NotificationHeader = ({ classes }) => {\r\n const useStyles = getHelperStyles()();\r\n const className = useStyles.heading6 + ' ' + classes.headerText;\r\n\r\n return (\r\n No New Notifications
\r\nNotifications
\r\n );\r\n}\r\n\r\nclass NotificationTray extends React.Component {\r\n _isMounted = false;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleOpen = this.handleOpen.bind(this);\r\n this.state = {\r\n trayOpen: false,\r\n anchorEl: null,\r\n notificationCount: 0,\r\n sortby: 'priority',\r\n notificationList: [],\r\n vertical: 'top',\r\n horizontal: 'right',\r\n handleSnackbar: true\r\n };\r\n }\r\n // for alert popover\r\n handleClick(event) {\r\n this.setState({\r\n trayOpen: true,\r\n anchorEl: event.currentTarget,\r\n vertical: 'bottom'\r\n });\r\n }\r\n\r\n handleClose() {\r\n this.setState({\r\n trayOpen: false,\r\n });\r\n }\r\n\r\n // for toast notifiction\r\n closeNotification = () => {\r\n this.props.hideNotification();\r\n };\r\n\r\n handleOpen(event) {\r\n this.setState({\r\n trayOpen: true,\r\n anchorEl: document.getElementById(\"NotificationTray\"),\r\n vertical: 'bottom'\r\n });\r\n }\r\n\r\n\r\n\r\n sortNotificationList(list, sortType) {\r\n switch (sortType) {\r\n case \"time\":\r\n list.sort(function (a, b) {\r\n var aDate = moment(a.dateCreated).valueOf();\r\n var bDate = moment(b.dateCreated).valueOf();\r\n\r\n if (aDate == bDate) return 0;\r\n return aDate < bDate ? 1 : -1;\r\n });\r\n break;\r\n case \"priority\":\r\n list.sort(function (a, b) {\r\n if (a.deviceStatus == b.deviceStatus) return 0;\r\n return a.deviceStatus > b.deviceStatus ? 1 : -1;\r\n });\r\n break;\r\n }\r\n return list;\r\n }\r\n\r\n handleSorting(event, value) {\r\n if (value != null && value != undefined) {\r\n\r\n var tempAlertList = this.sortNotificationList(this.state.notificationList, value);\r\n\r\n this.setState({\r\n sortby: value,\r\n notificationList: tempAlertList\r\n });\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.props.hideNotification();\r\n this._isMounted = true;\r\n\r\n const token = localStorage.getItem('authorizationToken');\r\n\r\n var jsonHeaders = {\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n\r\n };\r\n\r\n var comp = this;\r\n\r\n axios.get(`/api/Notifications`, jsonHeaders)\r\n .then(function (response) {\r\n\r\n if (comp._isMounted) {\r\n\r\n let previousSnackbar = comp.state.handleSnackbar;\r\n\r\n comp.setState({\r\n notificationList: comp.sortNotificationList(response.data, comp.state.sortby),\r\n notificationCount: response.data.length,\r\n handleSnackbar: false\r\n });\r\n\r\n // Toast Notifications - based on route path location\r\n if (comp.props.location.pathname === \"/locations\") {\r\n if (response.data.length > 0 && previousSnackbar) {\r\n\r\n comp.props.showNotification(\r\n\r\n
\r\n \r\n );\r\n });\r\n\r\n return (\r\n {this.getTimestamp(record.dateCreated)}
\r\n\r\n
\r\n {record.deviceName}
\r\n{record.locationName}
\r\n{record.errMsg}
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n\r\n});\r\nconst mapDispatchToProps = {\r\n showNotification,\r\n hideNotification\r\n};\r\n\r\nexport default withRouter(withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(NotificationTray)));","import React from 'react';\nimport { Layout, Menu } from 'react-admin';\nimport { withStyles } from '@material-ui/core/styles';\nimport WattsAppBar from './WattsAppBar/WattsAppBar';\nimport WattsSidebar from './WattsSidebar';\nimport WattsNotification from './WattsNotification'\nimport NotificationTray from './NotificationTray';\n\nconst WattsLayout = props => {\n return (\r\n
\r\n {this.state.notificationCount}
\r\n\r\n
\r\n {this.state.notificationCount > 0 &&\r\n <>\r\n \r\n \r\n \r\n Priority\r\n \r\n \r\n Time\r\n \r\n \r\n
\r\n \r\n {notifications}\r\n
\r\n \r\n }\r\n {this.state.notificationCount == 0 &&\r\n \n
\n );\n};\n\nLoading.propTypes = {\n classes: PropTypes.object,\n className: PropTypes.string,\n loadingPrimary: PropTypes.string,\n loadingSecondary: PropTypes.string,\n};\n\nLoading.defaultProps = {\n loadingPrimary: 'ra.page.loading',\n loadingSecondary: 'ra.message.loading',\n};\n\nexport default Loading;\n","import React from 'react';\r\nimport { Loading } from '../Utils/ra';\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst loadingStyles = makeStyles({\r\n 'loading': {\r\n 'margin': '50px'\r\n }\r\n});\r\n\r\nconst WattsLoading = () => {\r\n\r\n const useStyles = loadingStyles();\r\n\r\n return (\r\n \n
\n {translate(loadingPrimary)}
\n{translate(loadingSecondary)}
\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst WattsLoginPage = (params) => {\r\n\r\n const useStyles = loginStyles();\r\n const classTemplate = getHelperStyles()();\r\n const headingStyle = useStyles.heading4 + ' ' + classTemplate.heading4;\r\n const { loading, authenticated } = useAuthState();\r\n\r\n const currentDate = new Date();\r\n const bannerDueDate = new Date('2024-02-01');\r\n const showBanner = currentDate < bannerDueDate;\r\n\r\n if (loading) {\r\n return \r\n {showBanner && < div className={useStyles.banner}>If you are having problems logging in, hit Ctrl/Cmd + Shift + R to refresh your browser.
}\r\n \r\n ![\"Watts](\"/img/app-logo.svg\")
\r\n
\r\n Welcome to
\r\n\r\n history.goBack()}>\n {props.text}\n
\n );\n};\n\nexport default withRouter(CancelButton);","import React from 'react';\nimport { Toolbar, SaveButton } from 'react-admin';\nimport { withStyles } from '@material-ui/core';\nimport Grid from '@material-ui/core/Grid';\nimport CancelButton from './CancelButton';\n\n// Custom toolbar for the SimpleForms used by Watts.\nconst WattsToolbar = ({ classes, basePath, ...props }) => {\n\n const saveIconStyles = {\n 'root': {\n 'margin': 0\n }\n };\n\n // This is sort of a no-op icon. It's blank. The design (UI / UX) didn't specify one. \n const SaveIcon = withStyles(saveIconStyles)(({ classes, ...props }) => {\n return (\n \n );\n });\n\n return (\n \n
\n );\n}\n\nexport default FormHeader;","import React, {\r\n Children,\r\n cloneElement,\r\n Component,\r\n isValidElement,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport compose from 'recompose/compose';\r\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\r\nimport get from 'lodash/get';\r\nimport Button from '@material-ui/core/Button';\r\nimport FormHelperText from '@material-ui/core/FormHelperText';\r\nimport { withStyles, createStyles } from '@material-ui/core/styles';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faPlusCircle } from '@fortawesome/pro-regular-svg-icons';\r\nimport { faMinusCircle } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { translate, ValidationError } from 'ra-core';\r\nimport classNames from 'classnames';\r\n\r\nimport { FormInput } from 'react-admin';\r\n\r\nconst styles = theme =>\r\n createStyles({\r\n root: {\r\n padding: 0,\r\n margin: 0,\r\n '& > li:last-child': {\r\n borderBottom: 'none',\r\n },\r\n },\r\n listItem: {\r\n display: 'flex',\r\n listStyleType: 'none'\r\n },\r\n index: {\r\n width: '3em',\r\n paddingTop: '1em',\r\n [theme.breakpoints.down('sm')]: { display: 'none' },\r\n },\r\n form: { flex: 2 },\r\n leftIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n addButton: {\r\n margin: '48px 0'\r\n }\r\n });\r\n\r\n\r\n// Based on the react-admin out of the box Array Input found here:\r\n// https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.js\r\n// Unfortunately, out of the box this does not meet all of our needs, so we're creating\r\n// a new version of it here.\r\nexport class WattsFormIterator extends Component {\r\n constructor(props) {\r\n super(props);\r\n // we need a unique id for each field for a proper enter/exit animation\r\n // but redux-form doesn't provide one (cf https://github.com/erikras/redux-form/issues/2735)\r\n // so we keep an internal map between the field position and an auto-increment id\r\n this.nextId = props.fields.length\r\n ? props.fields.length\r\n : props.defaultValue\r\n ? props.defaultValue.length\r\n : 0;\r\n\r\n // We check whether we have a defaultValue (which must be an array) before checking\r\n // the fields prop which will always be empty for a new record.\r\n // Without it, our ids wouldn't match the default value and we would get key warnings\r\n // on the CssTransition element inside our render method\r\n this.ids = this.nextId > 0 ? Array.from(Array(this.nextId).keys()) : [];\r\n }\r\n\r\n removeField = index => () => {\r\n const { fields } = this.props;\r\n this.ids.splice(index, 1);\r\n fields.remove(index);\r\n };\r\n\r\n // Returns a boolean to indicate whether to disable the remove button for certain fields.\r\n // If disableRemove is a function, then call the function with the current record to\r\n // determining if the button should be disabled. Otherwise, use a boolean property that\r\n // enables or disables the button for all of the fields.\r\n disableRemoveField = (record, disableRemove) => {\r\n if (typeof disableRemove === 'boolean') {\r\n return disableRemove;\r\n }\r\n return disableRemove && disableRemove(record);\r\n };\r\n\r\n addField = () => {\r\n const { fields } = this.props;\r\n this.ids.push(this.nextId++);\r\n fields.push({});\r\n };\r\n\r\n render() {\r\n const {\r\n basePath,\r\n classes = {},\r\n children,\r\n fields,\r\n meta: { error, submitFailed },\r\n record,\r\n resource,\r\n source,\r\n translate,\r\n disableAdd,\r\n disableRemove,\r\n variant,\r\n margin,\r\n addButtonText,\r\n removeButtonText\r\n } = this.props;\r\n const records = get(record, source);\r\n\r\n return fields ? (\r\n {props.title}
\n- \r\n {submitFailed && typeof error !== 'object' && error && (\r\n
- \r\n
\r\n {Children.map(children, (input, index2) =>\r\n isValidElement(input) ? (\r\n \r\n {}\r\n\r\n {removeButtonText}\r\n \r\n \r\n )\r\n }\r\n }\r\n />\r\n ) : null\r\n )}\r\n \r\n \r\n ))}\r\n - \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
* Required
\n );\n};\n\nexport default RequiredFieldNote;","import React from 'react';\nimport axios from 'axios';\nimport { withStyles } from '@material-ui/core/styles';\nimport { TextInput, SelectInput, ArrayInput, required, choices } from 'react-admin';\nimport FormHeader from '../FormHeader';\nimport Grid from '@material-ui/core/Grid';\n\n// Icons\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faMapMarkerAlt, faBuilding } from '@fortawesome/pro-solid-svg-icons';\n\nimport WattsFormIterator from '../WattsFormIterator';\nimport RequiredFieldNote from '../RequiredFieldNote';\n\nconst isStateValid = (stateMap) => (value, allValues) => {\n var country = allValues.address.country;\n if(!country || !stateMap || !stateMap[country] || !Array.isArray(stateMap[country])) {\n return undefined;\n }\n var isStateValid = stateMap[country].some(state => state.id === value);\n return isStateValid ? undefined : {message: \"ra.validation.required\"}\n}\n\n\nclass LocationFormLayout extends React.Component {\n\n constructor(props) {\n super(props);\n\n // Initial state, we don't have any building types at the start.\n this.state = {\n buildingTypes: [],\n validBuildingTypeIds: [],\n buildingTypeValue: null,\n countryStateMap: {},\n countries: [],\n states: [],\n stateValue: null\n };\n }\n\n componentDidMount() {\n\n // Need to capture a reference to the component's 'this' object so\n // we can update the state in the callback from the API.\n var compThis = this;\n\n this.handleBuildingType(compThis);\n this.handleCountriesAndStates(compThis);\n }\n\n handleBuildingType(compThis) {\n const token = localStorage.getItem('authorizationToken');\n axios.get(\"/api/Locations/BuildingTypes\", {\n headers: {\n \"Cache-control\": \"no-cache, no-store\",\n \"Pragma\": \"no-cache\",\n \"Expires\": 0,\n \"Authorization\": `Bearer ${token}`\n }\n })\n .then(function (results) {\n // Sort the results and map them to the object schema the react-admin\n // select control expects.\n var buildingTypes = results.data.sort(function (first, second) {\n\n // Sort ascending based on sequence number.\n return first.sequence - second.sequence;\n }).map(function (buildingType) {\n\n // Map to an object with an id and name.\n return {\n id: buildingType.buildingTypeId,\n name: buildingType.name\n }\n });\n\n // Used for validation of the input on submit of the form.\n var validBuildingTypeIds = buildingTypes.map((buildingType) => {\n return buildingType.id;\n });\n\n // Now that we're populating the list of location types, we also need to populate the\n // value of it as well.\n var buildingTypeId = null;\n if (compThis.props.record && compThis.props.record.buildingType && compThis.props.record.buildingType.buildingTypeId) {\n buildingTypeId = compThis.props.record.buildingType.buildingTypeId;\n }\n\n // Update the state; need to call setState for the UI to re-render.\n compThis.setState({\n buildingTypes: buildingTypes,\n validBuildingTypeIds: validBuildingTypeIds,\n buildingTypeId: buildingTypeId\n });\n });\n }\n\n handleCountriesAndStates(compThis) {\n const token = localStorage.getItem('authorizationToken');\n axios.get(\"/api/Locations/CountriesStates\", {\n headers: {\n \"Cache-control\": \"no-cache, no-store\",\n \"Pragma\": \"no-cache\",\n \"Expires\": 0,\n \"Authorization\": `Bearer ${token}`\n }\n })\n .then(function (results) {\n if (results && results.data) {\n\n var countryStateMap = {};\n\n // Determine the list of countries from the data provided by the endpoint.\n var countries = results.data.map(function (value) {\n return {\n id: value.code,\n name: value.name\n };\n });\n\n // Determine a mapping of country code value to the list of states for that country.\n results.data.forEach(function (value) {\n\n var states = value.states.map(function (value) {\n return {\n id: value.code,\n name: value.name\n };\n });\n\n countryStateMap[value.code] = states;\n });\n\n // Set the state to update the UI.\n compThis.setState({\n 'countryStateMap': countryStateMap,\n 'countries': countries\n });\n\n if (compThis.props.record && compThis.props.record.address && compThis.props.record.address.country) {\n compThis.populateStateDropDown(compThis.props.record.address.country);\n }\n }\n });\n }\n\n onChangeCountry(compThis, context) {\n\n if (context && context.target) {\n // What value the country field is set to.\n var country = context.target.value;\n\n compThis.populateStateDropDown(country);\n }\n }\n\n populateStateDropDown(country) {\n\n var stateValue = null;\n\n if (this.props.record && this.props.record.address && this.props.record.address.state_province) {\n stateValue = this.props.record.address.state_province;\n }\n\n // If it's a valid country...\n if (country && this.state.countryStateMap.hasOwnProperty(country)) {\n\n // Set the state drop-down's options based on the country selected.\n this.setState({\n 'states': this.state.countryStateMap[country],\n 'stateValue': stateValue\n });\n }\n }\n\n render() {\n const locationFormStyles = {\n icon: {\n 'color': '#005DB9',\n 'font-size': '32px'\n }\n };\n\n const StyledLocationIcon = (withStyles(locationFormStyles)(({ classes }) => { return (\n \n \n \n \n \n \n \n \n this.onChangeCountry(this, value)} />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n }\n};\n\nexport default LocationFormLayout;\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Create, SimpleForm, useAuthState } from 'react-admin';\r\nimport ScrollToTopOnMount from '../ScrollToTop'\r\nimport WattsToolbar from '../WattsToolbar';\r\nimport LocationFormLayout from './LocationFormLayout';\r\nimport WattsLoading from '../WattsLoading';\r\n\r\n// CSS\r\nimport '../css/LandingPage.css';\r\n\r\nconst createStyles = makeStyles({\r\n 'main': {\r\n 'margin': '0'\r\n }\r\n});\r\n\r\nconst CreateLocation = (props) => {\r\n\r\n const createUseStyles = createStyles();\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return Location Info
\nEnter the details for your new location.
\nSublocations
\nOrganize your devices in as many sublocations as you need.
\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nexport default CreateLocation;","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Edit, SimpleForm, useAuthState } from 'react-admin';\r\nimport ScrollToTopOnMount from '../ScrollToTop'\r\nimport WattsToolbar from '../WattsToolbar';\r\nimport LocationFormLayout from './LocationFormLayout';\r\nimport WattsLoading from '../WattsLoading';\r\n\r\n// CSS\r\nimport '../css/LandingPage.css';\r\n\r\nconst editStyles = makeStyles({\r\n 'main': {\r\n 'margin': '0'\r\n }\r\n});\r\n\r\nconst EditLocation = ({ hasCreate, hasEdit, hasList, hasShow, ...props }) => {\r\n const editUseStyles = editStyles();\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditLocation;","import React from 'react';\r\nimport moment from \"moment\";\r\n\r\nimport { Link } from 'react-router-dom';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport { TextField } from \"react-admin\";\r\n\r\nimport { getDeviceImageOrDefault, getUserTempScale, getDurationString, getRecordOutletTemp, getMixedOutletTemp, BLANK_TEMP_SCALE_VALUE, getUserSettingsTempScale } from '../../Helpers.js';\r\nimport statuses from './DeviceStatusLookup';\r\n\r\nconst MAINTAINING_SETPOINT = 9;\r\n\r\nconst styles = {\r\n card: {\r\n width: 330,\r\n margin: '12px',\r\n display: 'inline-block',\r\n verticalAlign: 'top',\r\n position: 'relative'\r\n },\r\n\r\n deviceType: {\r\n color: '#C1C1C1',\r\n fontSize: '10px',\r\n margin: 0,\r\n },\r\n\r\n deviceInfo: {\r\n padding: '10px 0'\r\n },\r\n\r\n deviceName: {\r\n color: '#000',\r\n fontSize: '16px',\r\n fontWeight: 'bold'\r\n },\r\n\r\n temperature: {\r\n color: '#212121',\r\n margin: 0,\r\n fontSize: '32px'\r\n },\r\n\r\n tempUnit: {\r\n fontSize: '14px',\r\n verticalAlign: 'top'\r\n },\r\n\r\n deviceFooter: {\r\n padding: '10px 16px',\r\n height: '20px',\r\n color: '#5d5d5d'\r\n },\r\n\r\n redStatus: {\r\n backgroundColor: '#FFCCCC',\r\n },\r\n orangeStatus: {\r\n backgroundColor: '#FFE7D0',\r\n },\r\n greenStatus: {\r\n backgroundColor: '#CCF3CD',\r\n },\r\n\r\n statusIcon: {\r\n color: 'rgba(0, 0, 0, 0.54)',\r\n height: '20px',\r\n float: 'left',\r\n fontSize: '20px'\r\n },\r\n\r\n statusMessage: {\r\n color: 'rgba(0, 0, 0, 0.54)',\r\n display: 'block',\r\n float: 'left',\r\n fontWeight: 'bold',\r\n lineHeight: '1.9',\r\n letterSpacing: '-0.12px',\r\n margin: 0,\r\n marginLeft: '10px'\r\n },\r\n statusValue: {\r\n display: 'block',\r\n float: 'right',\r\n fontWeight: 'normal'\r\n },\r\n footerCardContent: {\r\n fontSize: '12px',\r\n fontWeight: 'bold',\r\n lineHeight: '20px',\r\n verticalAlign: 'middle',\r\n \"&:last-child\": {\r\n paddingBottom: '10px'\r\n }\r\n },\r\n\r\n deviceImage: {\r\n width: '80px',\r\n position: 'absolute',\r\n top: '16px',\r\n right: '16px'\r\n }\r\n};\r\n\r\n\r\nconst DeviceStatusBar = withStyles(styles)(({ classes, record = {} }) => {\r\n // Get status name\r\n var statusName = \"\";\r\n var colorClass = \"\";\r\n var statusIcon = \"\";\r\n var durationString = \"\";\r\n var sanitizeInterval;\r\n var RightContent = (\r\n \r\n );\r\n\r\n const getTelemetryDataValue = (fieldName) => {\r\n\r\n if (record.data[fieldName]) {\r\n return record.data[fieldName].Val;\r\n }\r\n\r\n return null;\r\n };\r\n\r\n const handleSanitizeCountdown = (endTime) => {\r\n var now = moment(new Date()).utc();\r\n\r\n var duration = endTime.diff(now);\r\n if (duration && duration > 0) {\r\n return getDurationString(duration);\r\n }\r\n else {\r\n return null;\r\n }\r\n }\r\n\r\n if (record.status) {\r\n statusName = record.status.name;\r\n // get color class\r\n if (statuses[record.status.id].color === \"red\") {\r\n colorClass = classes.redStatus;\r\n }\r\n else if (statuses[record.status.id].color === \"orange\") {\r\n colorClass = classes.orangeStatus;\r\n }\r\n else if (statuses[record.status.id].color === \"green\") {\r\n colorClass = classes.greenStatus;\r\n }\r\n // get icon\r\n statusIcon = statuses[record.status.id].icon;\r\n\r\n if (record.status.id == 7 && record.sanitizeEndTime) {\r\n RightContent = (\r\n {record.sanitizeEndTime}
\r\n );\r\n }\r\n }\r\n\r\n return (\r\n {statusName}
\r\n {RightContent}\r\n {tempText}°{displayValue});\r\n});\r\n\r\nTempField.defaultProps = { label: 'Name' };\r\n\r\nexport const DeviceCard = withStyles(styles)(({ classes, dataRecord = {}, location }) => {\r\n\r\n return (\r\n \r\n {dataRecord.deviceType}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n}\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchEnd,\r\n fetchStart,\r\n showNotification,\r\n crudGetMatching,\r\n} from 'react-admin';\r\n\r\nimport { faPencil } from '@fortawesome/pro-solid-svg-icons';\r\n\r\nimport ContextMenuOption from '../ContextMenuOption';\r\nimport TemperatureDialog from '../TemperatureDialog';\r\n\r\nimport '../css/DeviceModal.css';\r\nimport '../css/TelemetryCard.css';\r\n\r\n\r\nclass TelemetryCardHelpModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n error: false,\r\n showDialog: false,\r\n testTemp: this.props.superProps.initialSetting,\r\n open : false,\r\n };\r\n }\r\n\r\n onTempDiagOpen = () => {\r\n this.setState({open: true});\r\n }\r\n\r\n onTempDiagClose = () => {\r\n this.setState({open: false});\r\n }\r\n\r\n onTempDiagSave = (newVal, tempErrorCallback) => {\r\n this.setState({open: false});\r\n this.setState({testTemp: newVal});\r\n this.props.superProps.addTodoItem(newVal, tempErrorCallback);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n\r\n \r\n {optionText}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ContextMenuOption;","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchEnd,\r\n fetchStart,\r\n showNotification,\r\n crudGetMatching\r\n} from 'react-admin';\r\n\r\nimport Button from '@material-ui/core/Button';\r\nimport TextField from '@material-ui/core/TextField';\r\n\r\nimport { faWifi } from '@fortawesome/pro-solid-svg-icons';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\n\r\nimport ContextMenuOption from '../ContextMenuOption';\r\n\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport '../css/DeviceModal.css';\r\n\r\nclass CreateDeviceModal extends Component {\r\n _isMounted = false;\r\n state = {\r\n error: false,\r\n showDialog: false\r\n };\r\n\r\n handleClick = () => {\r\n if (this._isMounted) {\r\n this.setState({ showDialog: true });\r\n }\r\n };\r\n\r\n handleCloseClick = () => {\r\n if (this._isMounted) {\r\n this.setState({ showDialog: false });\r\n }\r\n };\r\n\r\n handleSaveClick = () => {\r\n };\r\n\r\n setCode = () => {\r\n if (this._isMounted) {\r\n this.setState({\r\n code: document.getElementById('code').value\r\n });\r\n }\r\n };\r\n\r\n componentDidMount = () => {\r\n this._isMounted = true;\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n render() {\r\n const { showDialog } = this.state;\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 {options.map((option, index) => (\r\n handleMenuItemClick(event, index)}\r\n locationid={props.locationId}\r\n >\r\n {option}\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}","import axios from 'axios';\r\n\r\nimport { authProvider } from './AuthProvider';\r\nimport { NONE } from './Helpers';\r\n\r\nconst API_URL = '/api';\r\nconst HTTP_403 = 403;\r\n\r\nconst httpClient = (url, options = {}) => {\r\n const token = localStorage.getItem('authorizationToken');\r\n options.url = url;\r\n options.headers = { authorization: `Bearer ${token}` };\r\n\r\n return axios(options);\r\n};\r\n\r\n// Since react-admin requires a unique property specifically named 'id', we need\r\n// to make sure that we can easily map between the various resource ids and the\r\n// required id property.\r\nconst resourceIdMap = {\r\n locations: 'locationId',\r\n devices: 'deviceId',\r\n user: 'userId'\r\n}\r\n\r\nconst errorHandler = (error, id) => {\r\n if (error && error.response && error.response.status == HTTP_403) {\r\n authProvider.logout().then(function () {\r\n window.location.href = '/#/login?authentication';\r\n });\r\n }\r\n else if (error && error.response && error.response.data && error.response.data.errorCode === 1 && error.response.data.errorNumber == 403) {\r\n\r\n error.response.data.id = id;\r\n\r\n return {\r\n data: error.response.data\r\n };\r\n }\r\n}\r\n\r\nexport default {\r\n // GET_LIST\r\n getList: (resource, params) => {\r\n const url = `${API_URL}/${resource}`;\r\n\r\n return httpClient(url).then(result => {\r\n for (var i = 0; i < result.data.length; i++) {\r\n result.data[i].id = result.data[i][resourceIdMap[resource]];\r\n }\r\n return ({\r\n data: result.data,\r\n total: result.data.length,\r\n });\r\n }).catch(errorHandler);\r\n },\r\n\r\n // GET_ONE\r\n getOne: (resource, params) => {\r\n var url = `${API_URL}/${resource}/${params.id}`;\r\n\r\n if (resource === 'user' || resource === 'account') {\r\n\r\n if (resource === 'account') {\r\n resource = 'user';\r\n }\r\n\r\n // For user settings we don't have an id.\r\n url = `${API_URL}/${resource}`;\r\n }\r\n\r\n return httpClient(url).then(response => {\r\n\r\n response.data.id = response.data[resourceIdMap[resource]];\r\n\r\n return ({\r\n data: response.data,\r\n });\r\n }).catch((error) => errorHandler(error, params.id));\r\n },\r\n\r\n // UPDATE\r\n update: (resource, params) => {\r\n\r\n var url = `${API_URL}/${resource}/${params.id}`;\r\n\r\n if (resource === 'user') {\r\n\r\n localStorage.setItem('user', JSON.stringify(params.data));\r\n\r\n // For user settings we don't have an id.\r\n url = `${API_URL}/${resource}`;\r\n }\r\n\r\n const updateCallback = response => {\r\n\r\n response.data.id = response.data[resourceIdMap[resource]];\r\n\r\n // Put the device data back into the response we get.\r\n response.data.data = params.data.data;\r\n response.data.location = params.data.location\r\n\r\n return ({ data: response.data });\r\n };\r\n\r\n var deviceParams = handleDeviceParams(resource, params);\r\n\r\n if (shouldHandlePictures(resource, deviceParams.data)) {\r\n return handlePictures(resource, deviceParams.data, updateCallback, 'PATCH');\r\n }\r\n else {\r\n return httpClient(url, {\r\n method: 'PATCH',\r\n data: deviceParams.data,\r\n })\r\n .then(updateCallback)\r\n .catch(errorHandler);\r\n }\r\n\r\n },\r\n\r\n // CREATE\r\n create: (resource, params) => {\r\n const createCallback = response => {\r\n response.data.id = response.data[resourceIdMap[resource]];\r\n\r\n return ({\r\n data: response.data\r\n });\r\n };\r\n\r\n var deviceParams = handleDeviceParams(resource, params);\r\n\r\n if (shouldHandlePictures(resource, deviceParams.data)) {\r\n return handlePictures(resource, deviceParams.data, createCallback, 'POST');\r\n }\r\n else {\r\n return httpClient(`${API_URL}/${resource}`, {\r\n method: 'POST',\r\n data: deviceParams.data,\r\n })\r\n .then(createCallback)\r\n .catch(errorHandler);\r\n }\r\n },\r\n\r\n // DELETE\r\n delete: (resource, params) => {\r\n return httpClient(`${API_URL}/${resource}/${params.id}`, {\r\n method: 'DELETE',\r\n }).then(response => {\r\n return ({ data: response.data });\r\n }).catch(errorHandler);\r\n }\r\n};\r\n\r\nfunction handleDeviceParams(resource, params) {\r\n\r\n // This is necessary because for devices we only send a subset of the fields to the API.\r\n if (resource === 'devices') {\r\n var results = {\r\n data: {}\r\n };\r\n\r\n if (params.data['sublocationId'] && params.data['sublocationId'] !== NONE) {\r\n results.data['locationId'] = params.data['sublocationId'];\r\n }\r\n else {\r\n results.data['locationId'] = params.data['locationId'];\r\n }\r\n\r\n if (!params.data.deviceId) {\r\n results.data.installationDate = params.data['installationDate'];\r\n }\r\n\r\n results.data.name = params.data['name'];\r\n results.data.additionalNotes = params.data['additionalNotes'];\r\n results.data.locationDescription = params.data['locationDescription'];\r\n results.data.commissionDate = params.data['commissionDate'];\r\n results.data.code = params.data['code'];\r\n results.data.installationDate = params.data['installationDate'];\r\n\r\n if (params.data['pictures']) {\r\n results.data.pictures = params.data['pictures'];\r\n }\r\n else if (params.data['installationImageUrl'] === \"\") {\r\n // If installationImageUrl is blank, clear it in the API.\r\n results.data.installationImageUrl = params.data['installationImageUrl'];\r\n }\r\n\r\n results.data.deviceId = params.data['deviceId'];\r\n\r\n return results;\r\n }\r\n else if (resource === 'locations') {\r\n params.data['buildingTypeId'] = params.data['buildingType'].buildingTypeId;\r\n }\r\n\r\n return params;\r\n}\r\n\r\nfunction shouldHandlePictures(resource, data) {\r\n return resource == 'devices' && data && data.pictures;\r\n}\r\n\r\nfunction handlePictures(resource, data, createCallback, requestMethod) {\r\n\r\n return new Promise((resolve, reject) => {\r\n convertFileToBase64(data.pictures).then((installationImage) => {\r\n data['installationImageUrl'] = installationImage.replace(/^data:image\\/[a-z]+;base64,/, \"\");\r\n\r\n var deviceId = \"\";\r\n if (requestMethod === 'PATCH') {\r\n deviceId = `/${data.deviceId}`;\r\n }\r\n\r\n resolve(\r\n httpClient(`${API_URL}/${resource}${deviceId}`, {\r\n method: requestMethod,\r\n data: data\r\n })\r\n .then(createCallback)\r\n .catch(errorHandler)\r\n )\r\n })\r\n });\r\n}\r\n\r\n\r\nfunction convertFileToBase64(file) {\r\n return new Promise((resolve, reject) => {\r\n\r\n const fileReader = new FileReader();\r\n fileReader.readAsDataURL(file.rawFile);\r\n\r\n fileReader.onload = function () { resolve(fileReader.result) };\r\n fileReader.onerror = reject;\r\n\r\n });\r\n};","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchEnd,\r\n fetchStart,\r\n showNotification,\r\n crudGetMatching,\r\n\r\n} from 'react-admin';\r\nimport { Redirect } from \"react-router\";\r\n\r\nimport Button from '@material-ui/core/Button';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faTrash } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport dataProvider from '../dataProvider';\r\n\r\nimport './css/LocationModal.css';\r\n\r\nclass DeleteModal extends React.Component {\r\n state = {\r\n error: false,\r\n showDialog: false\r\n };\r\n\r\n handleClick = () => {\r\n this.setState({ showDialog: true });\r\n };\r\n\r\n handleCloseClick = () => {\r\n this.setState({ showDialog: false });\r\n };\r\n\r\n handleRemoveClick = () => {\r\n const { submit } = this.props;\r\n\r\n\r\n if (this.props.deviceCounter && this.props.deviceCounter > 0) {\r\n this.props.showNotification(`elogic.toastNotifications.cannotDeleteLocationWithDevices`);\r\n this.handleCloseClick();\r\n }\r\n else {\r\n dataProvider.delete(this.props.type + 's', { id: this.props.thisRecord[this.props.type + 'Id'] })\r\n .then(({ data }) => {\r\n this.props.showNotification(`elogic.toastNotifications.${this.props.type}Deleted`);\r\n const url = '/#/' + this.props.type + 's'\r\n window.location.replace(window.location.origin + url)\r\n })\r\n .catch(error => {\r\n this.props.showNotification(`elogic.toastNotifications.${this.props.type}DeleteError`, 'error');\r\n const url = '/#/' + this.props.type + 's'\r\n window.location.replace(window.location.origin + url)\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const { showDialog } = this.state;\r\n\r\n const capitalType = this.props.type[0].toUpperCase() + this.props.type.slice(1);\r\n\r\n return (\r\n \r\n {menuOptions}\r\n
\r\n }\r\n \r\n
\r\n );\r\n});\r\n\r\nexport const UserCard = withStyles(styles)(({ classes, dataRecord = {}, callbacks = {}, parentRecordId = \"\", ...props }) => {\r\n return (\r\n {userTypeText}
\r\n\r\n
\r\n {dataRecord.firstName} {dataRecord.lastName}
\r\n\r\n {props.ids.sort((first, second) => {\r\n\r\n return props.sortFunction(props.data[first], props.data[second]);\r\n }).map(id =>\r\n
\r\n );\r\n }\r\n }\r\n else {\r\n return (\r\n \n
\n );\n};\n\nexport default DeviceInfoBanner;","import React, { useState, useEffect } from 'react';\n\nimport axios from 'axios';\n\nimport { faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\n\nimport DeviceInfoBanner from '../Devices/DeviceInfoBanner';\n\nconst LocationBanner = (props) => {\n const [banners, setBanners] = useState([]);\n const [checkHash, setCheckHash] = useState(\"\");\n const [refreshTimer, setRefreshTimer] = useState();\n\n useEffect(() => {\n return () => {\n if (refreshTimer) {\n clearInterval(refreshTimer);\n }\n };\n }, [refreshTimer]);\n\n const checkForUpdatedData = function (refreshCallback, refreshTimer) {\n\n var recordId = 'CheckHash';\n\n if (props.record.id) {\n recordId = props.record.id;\n }\n\n const token = localStorage.getItem('authorizationToken');\n axios.get(`/api/Locations/${recordId}`, {\r\n headers: {\n \"Cache-control\": \"no-cache, no-store\",\n \"Pragma\": \"no-cache\",\n \"Expires\": 0,\n \"Authorization\": `Bearer ${token}`\n }\r\n })\n .then(function (results) {\n\n if (props.record.CheckHash) {\n if (results.data.CheckHash != props.record.CheckHash) {\n clearInterval(refreshTimer);\n\n setBanners([\n {props.userMessage}
\n{props.actionText}
\n\n \n {props.children}\n \n \n
\n );\n};\n\nexport default NoAccessPage;","import React, { useState} from 'react';\n\nimport { TabbedShowLayout, Tab } from 'react-admin';\nimport { Link } from 'react-router-dom';\n\nimport ScrollToTopOnMount from '../ScrollToTop'\nimport { DeviceCard } from '../Devices/DeviceCard';\n\nimport AddDeviceOrUserButton from '../Buttons/AddDeviceOrUserButton';\nimport DeleteModal from \"../DeleteModal\";\nimport { UserCard } from './UserCard';\nimport { CardGrid } from '../CardGrid';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBuilding, faWifi, faUsers } from '@fortawesome/pro-solid-svg-icons';\nimport { faPencil, faPlusCircle } from '@fortawesome/pro-regular-svg-icons';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\n\nimport WattsLoading from '../WattsLoading';\nimport LeaveLocationDialog from './LeaveLocationDialog';\nimport LocationBanner from './LocationBanner';\nimport NoAccessPage from '../NoAccessPage';\nimport { getPermissionList, getHelperStyles, getLocationAddress, prioritySort} from '../../Helpers.js';\n\nimport '../css/Breadcrumbs.css';\n\nconst headerStyles = makeStyles({\n header: {\n padding: '30px 15.3%',\n background: '#fff'\n },\n\n mainTitle: {\n fontWeight: 'bold',\n fontSize: '44px',\n margin: '25px 0px'\n },\n\n subTitle: {\n color: '#666666'\n },\n\n topLeftInfo: {\n color: '#999',\n fontSize: '12px'\n },\n\n counterContainer: {\n display: 'inline-block',\n color: '#838489',\n marginTop: '10px'\n },\n\n counter: {\n display: 'inline-block',\n height: '30px',\n minWidth: '50px',\n marginRight: '10px'\n },\n\n counterIcon: {\n display: 'inline-block',\n height: '100%',\n fontSize: '20px'\n },\n\n counterNumber: {\n float: 'right',\n margin: '0 10px 0 5px',\n lineHeight: '30px',\n verticalAlign: 'middle'\n },\n\n headerActionItem: {\n float: 'right',\n color: '#005DB9',\n cursor: 'pointer',\n marginLeft: '20px',\n fontSize: '20px'\n }\n});\n\n\nconst LocationHeader = (props) => {\n\n var state = props.state;\n\n var permissions = getPermissionList(props.record.permissions);\n\n // TODO: Localize this\n var buildingType = {\n 'name': 'Unknown'\n };\n\n if (props.record.buildingType && props.record.buildingType.name) {\n buildingType = props.record.buildingType;\n }\n\n // set location and device counters here - setCounterValues function\n var deviceCounter = 0;\n var sublocationsCounter = 0;\n\n // Get Parent Devices\n if (props.record.devices && props.record.devices.length > 0) {\n props.record.devices.forEach(function (device) {\n deviceCounter++;\n });\n }\n\n // Get Sublocation names and devices\n if (props.record.sublocations && props.record.sublocations.length > 0) {\n props.record.sublocations.forEach(function (sublocation) {\n sublocationsCounter++;\n if (sublocation.devices && sublocation.devices.length > 0) {\n sublocation.devices.forEach(function (subDevice) {\n deviceCounter++;\n });\n }\n });\n }\n\n // set device and location counter numbers\n props.setCounterValues(sublocationsCounter, deviceCounter);\n const classes = headerStyles();\n const classTemplate = getHelperStyles()();\n\n const userId = localStorage.getItem('userId');\n const mainTitleClass = classes.mainTitle + ' ' + classTemplate.heading3;\n\n return (\n \n \n \n Locations\n \n \n {buildingType.name}\n {permissions && permissions.Locations && permissions.Locations.Delete &&
\n );\n}\n\nconst noLocationStyles = makeStyles({\n container: {\n textAlign: 'center',\n paddingTop: '180px'\n },\n\n largeIcon: {\n fontSize: '100px',\n color: '#D7D7D7'\n },\n\n message: {\n color: '#626262',\n fontSize: '16px',\n margin: '30px 0',\n },\n\n addIcon: {\n fontSize: '16px',\n verticalAlign: 'middle'\n }\n});\nconst NoLocationMessage = () => {\n const classes = noLocationStyles();\n return (\n \n {props.record.name}\n
\n{props.record.name}
\n{getLocationAddress(props.record.address)}
\n\n
\n \n
\n {state.numberSubLocations}
\n\n
\n {state.numberDevices}
\n\n
\n {props.userData.users.length}
\n\n
\n );\n}\n\nconst sublocationMenuStyles = makeStyles({\n sublocationFilter: {\n 'width': '330px',\n 'marginLeft': '12px'\n }\n});\n\nconst Devices = (props) => {\n const [locationFilter, setLocation] = useState(\"All\")\n const handleChange = (event) => {\n setLocation(event.target.value);\n };\n\n var idArray = [];\n var data = {};\n\n var returnContent = Tap
\n {dropdown}\n {cards}\n
\n );\n }\n // else just show cards if there are no sublocations for this location\n else if (deviceCounter > 0) {\n returnContent = (\n \n {cards}\n
\n );\n }\n else if (props.location && props.location.devices == undefined) {\n returnContent = (\n \n \n \n \n {\n\n const sortOrder = [\"Admin\", \"Owner\"];\n\n const firstRole = comp.getRole(firstObj);\n const secondRole = comp.getRole(secondObj)\n\n return sortOrder.indexOf(secondRole) - sortOrder.indexOf(firstRole);\n }}\n />\n \n \n
\n );\n }\n }\n}\n\nexport default withStyles(bodyStyles)(LocationViewLayout);\n","import React from 'react';\r\nimport { Show, SimpleShowLayout, useAuthState } from 'react-admin';\r\n\r\nimport WattsLoading from '../WattsLoading';\r\nimport LocationViewLayout from './LocationViewLayout';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n\r\nclass ViewLocationComponent extends React.Component {\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n\r\n const layoutStyles = {\r\n 'root': {\r\n 'padding': 0,\r\n '&:first-child, &last-child': {\r\n 'padding': 0\r\n }\r\n }\r\n };\r\n\r\n const showStyles = {\r\n 'main': {\r\n 'margin': 0\r\n },\r\n 'card': {\r\n 'background': 'inherit',\r\n 'border-radius': '0px',\r\n 'boxShadow': 'none',\r\n 'overflow': 'visible'\r\n }\r\n };\r\n\r\n const StyledShow = withStyles(showStyles)(Show);\r\n const StyledLayout = withStyles(layoutStyles)(SimpleShowLayout);\r\n\r\n const { classes, ...other } = this.props;\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\nconst ViewLocation = (props) => {\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return \n {devices && devices.map(device =>
\n {device}
)}\n\n
)\n};\n\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { addField, FieldTitle } from 'ra-core';\nimport { DatePicker } from '@material-ui/pickers'\nimport TextField from '@material-ui/core/TextField';\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker\n} from '@material-ui/pickers';\nimport DateFnsUtils from '@date-io/date-fns';\n\n// This is based on:\n// https://github.com/vascofg/react-admin-date-inputs\n// But modified to fix issues with the latest version, specifically this bug report:\n// https://github.com/vascofg/react-admin-date-inputs/issues/37\n// The GitHub project above might not be compatible with react-admin 3.0.0 and / or the latest version of Material UI?\nconst makePicker = (PickerComponent) => {\n class _makePicker extends Component {\n onChange(date) {\n this.props.input.onChange(date.toISOString());\n this.props.input.onBlur();\n }\n\n render() {\n const {\n input,\n options,\n label,\n source,\n resource,\n isRequired,\n className,\n meta,\n providerOptions,\n } = this.props;\n\n const { touched, error } = meta;\n\n return (\n \n
\n \n 
\n
\n \n
\n Please select your product
\n\n
\n \n
\n \n {\n event.preventDefault();\n window.location.replace(SBS_URL);\n }}\n to=\"/\"\n >\n
\n \n \n \n
\n );\n }\n }\n\n _makePicker.propTypes = {\n input: PropTypes.object,\n isRequired: PropTypes.bool,\n label: PropTypes.string,\n meta: PropTypes.object,\n options: PropTypes.object,\n resource: PropTypes.string,\n source: PropTypes.string,\n labelTime: PropTypes.string,\n className: PropTypes.string,\n providerOptions: PropTypes.shape({\n utils: PropTypes.func,\n locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n }),\n };\n\n _makePicker.defaultProps = {\n input: {},\n isRequired: 'false',\n meta: { touched: false, error: false },\n options: {},\n resource: '',\n source: '',\n labelTime: '',\n className: '',\n providerOptions: {\n utils: DateFnsUtils,\n locale: undefined,\n },\n };\n return _makePicker;\n};\n\nexport const DatePickerInput = addField(makePicker(DatePicker));","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTrash } from '@fortawesome/pro-solid-svg-icons';\n\nconst useStyles = makeStyles({\n list: {\n display: 'flex',\n listStyleType: 'none',\n },\n image: {\n maxHeight: '300px'\n },\n tagLine: {\n background: 'rgba(0, 0, 0, 0.38)',\n color: '#FFF',\n marginTop: '-4px',\n padding: '8px',\n transform: 'translateY(-100%)'\n },\n removeButton: {\n color: '#A2A3A5',\n cursor: 'pointer',\n float: 'right'\n }\n});\n\nconst sanitizeRestProps =\n ({\n addLabel, allowEmpty, basePath, cellClassName, className, formClassName, headerClassName, label, linkType, link,\n locale, record, resource, sortable, sortBy, source, textAlign, translateChoice, ...props\n }) => props;\n\nexport const WattsImageField = ({\n className,\n classes: classesOverride,\n record,\n source,\n src,\n title,\n removeCallback,\n ...rest\n}) => {\n const sourceValue = record[source];\n const classes = useStyles({ classes: classesOverride });\n if (!sourceValue) {\n return ;\n }\n\n const titleValue = record[title];\n return (\n \n
\n );\n};\n\nexport default WattsImageField;","import React, {\n Children,\n cloneElement,\n isValidElement\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { shallowEqual } from 'recompose';\nimport { useDropzone } from 'react-dropzone';\nimport { makeStyles } from '@material-ui/core/styles';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport classnames from 'classnames';\nimport { useInput, useTranslate } from 'ra-core';\n\nimport { Labeled, InputHelperText } from 'react-admin';\n\nconst useStyles = makeStyles(theme => ({\n dropZone: {\n background: theme.palette.background.default,\n cursor: 'pointer',\n padding: theme.spacing(1),\n textAlign: 'center',\n color: theme.palette.getContrastText(theme.palette.background.default),\n },\n preview: {},\n removeButton: {},\n root: { width: '100%' },\n}));\n\nconst sanitizeRestProps =\n ({\n addLabel, allowEmpty, basePath, cellClassName, className, formClassName, headerClassName, label, linkType, link,\n locale, record, resource, sortable, sortBy, source, textAlign, translateChoice, ...props\n }) => props;\n\nexport const WattsImageInput = ({\n accept,\n children,\n className,\n classes: classesOverride,\n format,\n helperText,\n label,\n labelMultiple = 'ra.input.file.upload_several',\n labelSingle = 'ra.input.file.upload_single',\n maxSize,\n minSize,\n multiple = false,\n options: { inputProps: inputPropsOptions, ...options } = {},\n parse,\n placeholder,\n resource,\n source,\n validate,\n ...rest\n}) => {\n const translate = useTranslate();\n const classes = useStyles({ classes: classesOverride });\n\n // turn a browser dropped file structure into expected structure\n const transformFile = file => {\n if (!(file instanceof File)) {\n return file;\n }\n\n const { source, title } = (Children.only(children)).props;\n\n const preview = URL.createObjectURL(file);\n const transformedFile = {\n rawFile: file,\n [source]: preview,\n };\n\n if (title) {\n transformedFile[title] = file.name;\n }\n\n return transformedFile;\n };\n\n const transformFiles = (files) => {\n if (!files) {\n return multiple ? [] : null;\n }\n\n if (Array.isArray(files)) {\n return files.map(transformFile);\n }\n\n return transformFile(files);\n };\n\n const {\n id,\n input: { onChange, value, ...inputProps },\n meta,\n isRequired,\n } = useInput({\n format: format || transformFiles,\n parse: parse || transformFiles,\n source,\n type: 'file',\n validate,\n ...rest,\n });\n const { touched, error } = meta;\n const files = value ? (Array.isArray(value) ? value : [value]) : [];\n\n const onDrop = newFiles => {\n const updatedFiles = multiple ? [...files, ...newFiles] : [...newFiles];\n\n if (multiple) {\n onChange(updatedFiles);\n } else {\n onChange(updatedFiles[0]);\n }\n };\n\n const onRemove = file => () => {\n if (multiple) {\n const filteredFiles = files.filter(\n stateFile => !shallowEqual(stateFile, file)\n );\n onChange(filteredFiles);\n } else {\n onChange(null);\n }\n };\n\n const childrenElement = isValidElement(Children.only(children))\n ? (Children.only(children))\n : undefined;\n\n const { getRootProps, getInputProps } = useDropzone({\n ...options,\n accept,\n maxSize,\n minSize,\n multiple,\n onDrop,\n });\n\n return (\n Installation Image\n\n
\n {translate(labelMultiple)}
\n ) : (\n{translate(labelSingle)}
\n )}\n \n {children && (\n\n {files.map((file, index) => (\n
\n )}\n {(touched && error) || helperText ? (\n \n {cloneElement(childrenElement, {\n record: file,\n className: classes.preview,\n removeCallback: onRemove(file)\n })}\n
\n ))}\n \n \n \n \n \n \n \n ![\"IntelliStation](\"/img/device_placeholder.jpg\")
\n \n \n \n \n \n \n \n \n \n \n
\n );\n }\n};\n\nexport default withStyles(deviceFormStyles)(DeviceFormLayout);","import React from 'react';\r\nimport { Create, SimpleForm, useAuthState } from 'react-admin';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DeviceFormLayout from './DeviceFormLayout';\r\nimport WattsToolbar from '../WattsToolbar';\r\nimport WattsLoading from '../WattsLoading';\r\n\r\nconst createStyles = makeStyles({\r\n 'main': {\r\n 'margin': '0'\r\n }\r\n});\r\n\r\nexport const CreateDevice = (props) => {\r\n const createUseStyles = createStyles();\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return \n \n
\n Powers
\nIntelliStation Jr.
\nDigital Mixing Valve
\n\n
\n Installation Info
\nGive your device a custom name and update installation details.
\n\r\n \r\n \r\n
\r\n\r\n\r\n );\r\n};\r\n\r\nexport default (CreateDevice);","import React from 'react';\r\nimport { Edit, SimpleForm, useAuthState } from 'react-admin';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DeviceFormLayout from './DeviceFormLayout';\r\nimport WattsToolbar from '../WattsToolbar';\r\nimport WattsLoading from '../WattsLoading';\r\n\r\nconst createStyles = makeStyles({\r\n 'main': {\r\n 'margin': '0'\r\n }\r\n});\r\n\r\nexport const CreateDevice = (props) => {\r\n\r\n const createUseStyles = createStyles();\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return \r\n \r\n \r\n
\r\n\r\n\r\n );\r\n};\r\n\r\nexport default (CreateDevice);","import React from 'react';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faCalendarDay } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { renderTemperature } from '../../Helpers.js';\r\nimport '../css/TelemetryCard.css';\r\n\r\n// Monitor Cards\r\nconst TelemetryCard = (props) => {\r\n\r\n // Set Date\r\n var dateContent = null;\r\n if (props.date) {\r\n\r\n // Verify the date passed in is valid.\r\n var parsedDate = Date.parse(props.date);\r\n\r\n // Only display the date content when the date value is a valid date.\r\n if (!isNaN(parsedDate)) {\r\n dateContent = (\r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n var className = props.className;\r\n\r\n if (!props.className) {\r\n className = \"monitorCard\"\r\n }\r\n\r\n var telemetryValue = renderTemperature(props.value);\r\n\r\n if (!props.value) {\r\n telemetryValue = '- - -';\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default TelemetryCard;","import React from 'react';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Menu from '@material-ui/core/Menu';\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faEllipsisV } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport '../css/TelemetryCard.css';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%',\r\n maxWidth: 360,\r\n backgroundColor: theme.palette.background.paper,\r\n },\r\n}));\r\n\r\n\r\nexport default function TelemetryCardMenu(props) {\r\n const classes = useStyles();\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n\r\n const handleClickListItem = event => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleMenuItemClick = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const options = props.menuOptions;\r\n const uniqueKey = props.uniqueKey;\r\n\r\n return (\r\n \r\n {props.iconType}\r\n
\r\n\r\n {props.message}
\r\n{telemetryValue}
\r\n\r\n {dateContent}\r\n \r\n \r\n {options.map((option, index) => (\r\n handleMenuItemClick(event, index)}\r\n >\r\n {option}\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}","import React from 'react';\n\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport '../css/HelpModal.css';\nimport '../css/DeviceInfoModal.css';\n\nimport statuses from './DeviceStatusLookup';\nimport { getHelperStyles, SANITIZATION_STATUS } from '../../Helpers.js';\n\nconst ErrorDetailsRow = (props) => {\n const classTemplate = getHelperStyles()();\n const nameClass = 'errorDetials-topicTitle ' + classTemplate.heading6;\n\n return (\n \n
\n );\n};\n\nconst DeviceErrorHelpDialog = (props) => {\n\n var status = props.status;\n\n // Override the cooldown status with the sanitization status for issue 12902.\n if (status.id === 8) {\n status = SANITIZATION_STATUS;\n }\n\n var colorClass = `errorDetails-color-${statuses[status.id].color}`;\n var errorDetailIcon = statuses[status.id].icon;\n\n var errorHelpTopics = [];\n\n // Cause\n errorHelpTopics.push(\n \n
\n {props.name}
\n- \n
- {props.body} \n
{\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }}>\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst StatusNotification = (props) => {\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nclass DeviceStatusNotification extends React.Component {\r\n _isMounted = false;\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showModal: false,\r\n errorName: \"\",\r\n errorDetailIcon: null,\r\n errorHelpTopics: [],\r\n colorClass: \"\",\r\n };\r\n }\r\n // for help modal\r\n openHelp = () => {\r\n this.setState({ showModal: true });\r\n };\r\n\r\n closeModal = () => {\r\n this.setState({ showModal: false });\r\n };\r\n\r\n // for Snackbar\r\n closeNotification = () => {\r\n this.props.hideNotification();\r\n };\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n\r\n // show notification\r\n if (this.props.device.status) {\r\n\r\n var status = this.props.device.status;\r\n var errorDetailIcon = statuses[status.id].icon;\r\n\r\n // For sanitization status we do not show the snackbar notification. Instead, we have a banner at the\r\n // top of the page that handles informing the user the device is in sanitization mode.\r\n if (status.id !== SANITIZATION_STATUS) {\r\n // show error notif with help link\r\n if (statuses[status.id].color === \"red\" || statuses[status.id].color === \"orange\"\r\n && status.id != 6) { // Offline status is the only exception, it does not have definition for the error code details.\r\n\r\n this.props.showNotification(\r\n \n
\n );\n }\n else if (this.state.error) {\n return (\n No historical data yet.
\n Check back later for updates.
\n \n
\n );\n }\n }\n\n return null;\n }\n\n getReportTypeName() {\n switch (this.state.reportType) {\n case 'monthlytrend':\n return '30 days';\n case 'weektrend':\n return '7 days';\n case 'daytrend':\n return '24 hours';\n }\n }\n\n async downloadFile(url) {\n const token = localStorage.getItem('authorizationToken');\n const options = {\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\n \"Pragma\": \"no-cache\",\n \"Expires\": 0,\n \"Authorization\": `Bearer ${token}`\r\n }\r\n }\n\n fetch(url, options)\r\n .then(res => res.blob())\r\n .then(blob => {\r\n const file = window.URL.createObjectURL(blob);\r\n window.open(file);\r\n });\n };\n\n showCsvReport() {\n var currentDate = new Date();\n this.downloadFile(`/api/Devices/${this.props.thisDevice.id}/historicalreport/${this.state.reportType}/${currentDate.toLocaleDateString().replace(/\\//g, '-')}-${this.props.thisDevice.name}-CsvExtract`);\n }\n\n showPdfReport() {\n var currentDate = new Date();\n this.downloadFile(`/api/HotWaterPerformanceSummary/${this.props.thisDevice.id}/${currentDate.toLocaleDateString().replace(/\\//g, '-')}-${this.props.thisDevice.name}-HotWaterSummary`);\n }\n\n render() {\n const chartViews = [\n {\n name: '24 hours',\n key: 'daytrend',\n icon: (An error occurred while rendering this chart:
\n {`${this.state.error.message}`}
\n \n
\n );\n }\n}\n\nconst chartStyles = {\n chartMessage: {\n fontSize: '14px',\n fontWeight: 'bold',\n padding: '12px',\n textAlign: 'center'\n },\n noHistoricalDataMessage: {\n marginBottom: '5px'\n },\n paper: {\n marginTop: '48px'\n },\n menuIcon: {\n color: '#757575',\n fontSize: '20px',\n margin: '14px 24px'\n },\n menuText: {\n color: '#666',\n fontSize: '16px',\n fontWeight: '900',\n marginRight: '24px'\n }\n};\n\nexport default withStyles(chartStyles)(DeviceHistoryChart);","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst DeviceLastUpdated = (props) => {\n\n const useStyles = makeStyles({\n lastUpdated: {\n fontSize: '12px',\n lineHeight: '1.33',\n letterSpacing: '-0.12px',\n color: '#212121',\n margin: '19px 0 13px 0',\n float: 'right'\n }\n });\n\n const classes = useStyles();\n\n var formattedTime = new Date().toLocaleString().replace(',', '');\n\n return (\n \n \n {\"Legend\"} \n \n \n \n \n \n \n this.handleChartClickListItem(event)} className=\"chartHeaderIcon\" />\n compThis.handleChartClose(event)}\n classes={{ paper: this.props.classes.paper }}\n >\n {chartViews.map((option, index) => (\n compThis.onChangeReportType(`${option.key}`)}>\n {option.icon} {option.name}\n \n ))}\n \n this.handleDownloadClickListItem(event)} className=\"chartHeaderIcon\" />\n compThis.handleDownloadClose(event)}\n classes={{ paper: this.props.classes.paper }}\n >\n {reportOptions.map((option, index) => (\n \n {option.icon} {option.name}\n \n ))}\n \n History ({compThis.getReportTypeName()})\n
\n \n
\n \n \n
\n Mixed Outlet
\n\n \n
\n Setpoint
\n\n \n
\n High Limit
\n\n \n
\n Low Limit
\n\n {compThis.getLoadingSpinner()}\n {compThis.getChartMessage()}\n {compThis.getNotifications()}\n
\n Updated: {formattedTime}
\n );\n}\n\nexport default DeviceLastUpdated;","import React from 'react';\r\n\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nimport axios from 'axios';\r\n\r\nimport { showNotification } from 'react-admin';\r\nimport { connect } from 'react-redux';\r\n\r\nimport TelemetryCard from './TelemetryCard';\r\nimport TelemetryCardMenu from './TelemetryCardMenu';\r\nimport ContextMenuOption from '../ContextMenuOption';\r\nimport DeviceHistoryChart from './DeviceHistoryChart';\r\n\r\nimport DeviceLastUpdated from './DeviceLastUpdated';\r\n\r\nimport { faQuestionCircle, faPencil } from '@fortawesome/pro-solid-svg-icons';\r\n\r\nimport '../css/DeviceDashboardTab.css';\r\n\r\nimport { getUserTempScale, getPermissionList, isDeviceOffline } from \"../../Helpers.js\";\r\n\r\nconst SettingsCard = (props) => {\r\n var permissions = null;\r\n\r\n if (props.thisDevice) {\r\n permissions = getPermissionList(props.thisDevice.location.permissions);\r\n }\r\n\r\n var menuOptions = [];\r\n\r\n if (permissions && permissions.Devices && permissions.Devices.Update && !props.sanitization) {\r\n menuOptions.push(\r\n\r\n // Edit settings option.\r\n\n
\n \r\n {thisIcon}\r\n
\r\n );\r\n};\r\n\r\nconst DialogActions = withStyles((theme) => ({\r\n root: {\r\n margin: 0,\r\n padding: theme.spacing(1),\r\n },\r\n}))(MuiDialogActions);\r\n\r\nclass HighLowTempValueCard extends React.Component {\r\n constructor(props) {\r\n\r\n super(props);\r\n\r\n this.clearDate = this.clearDate.bind(this);\r\n\r\n var highLowMixTemp = getTelemetryDataFromRecord(this.props.record, this.props.fieldName);\r\n\r\n this.state = {\r\n currentTemp: highLowMixTemp.value,\r\n lastCleared: highLowMixTemp.date,\r\n showConfirmation: false\r\n };\r\n }\r\n\r\n clearDate(clearType) {\r\n var comp = this;\r\n // axios update device value - direct method\r\n const token = localStorage.getItem('authorizationToken');\r\n axios({\r\n method: 'patch',\r\n url: `/api/devices/${comp.props.record.id}/${clearType}`,\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n }).then(function (response) {\r\n\r\n var clearData = getTelemetryDataFromRecord(response.data, comp.props.fieldName);\r\n\r\n comp.setState({\r\n currentTemp: clearData.value,\r\n lastCleared: clearData.date\r\n });\r\n\r\n comp.props.record.data[comp.props.fieldName].Val = clearData.value;\r\n comp.props.record.data[comp.props.fieldName].DateCleared = clearData.date;\r\n\r\n comp.props.showNotification(`elogic.toastNotifications.set${clearType}`);\r\n\r\n comp.showConfirmation(false);\r\n\r\n }).catch(function (error) {\r\n // handle error\r\n comp.props.showNotification(`elogic.toastNotifications.set${clearType}Error`, \"error\");\r\n comp.showConfirmation(false);\r\n });\r\n }\r\n\r\n showConfirmation(show) {\r\n this.setState({\r\n showConfirmation: show\r\n });\r\n }\r\n\r\n render() {\r\n\r\n var offsetDateTime = formatToUTCDate(this.state.lastCleared, this.props.record);\r\n\r\n var icon = this.props.permissions.Devices.Update ? (\r\n {props.errMsg}
\r\n {dateString}\r\n
\r\n \r\n {dateString}\r\n
\r\n \r\n \n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction getTelemetryDataFromRecord(record, fieldName) {\r\n var result = {\r\n value: '- - -',\r\n date: '- - -'\r\n };\r\n\r\n if (record.data && record.data[fieldName]) {\r\n var field = record.data[fieldName];\r\n\r\n if (field.Val) {\r\n result.value = field.Val;\r\n }\r\n\r\n if (field.DateCleared) {\r\n var dateCleared = field.DateCleared.substring(0, field.DateCleared.length - 3)\r\n result.date = new Date(dateCleared).toLocaleString();\r\n }\r\n }\r\n\r\n return result;\r\n}\r\n\r\nexport default connect(null, { showNotification })(DeviceMonitorTab);","import React from 'react';\r\nimport moment from \"moment\";\r\nimport axios from 'axios';\r\n\r\nimport { showNotification } from 'react-admin';\r\nimport { connect } from 'react-redux';\r\n\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport Switch from '@material-ui/core/Switch';\r\nimport { TimePicker } from '@material-ui/pickers'\r\n\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\n\r\nimport TelemetryCard from './TelemetryCard';\r\nimport TelemetryCardMenu from './TelemetryCardMenu';\r\nimport ContextMenuOption from '../ContextMenuOption';\r\n\r\nimport DeviceLastUpdated from './DeviceLastUpdated';\r\n\r\nimport { faQuestionCircle, faPencil } from '@fortawesome/pro-solid-svg-icons';\r\n\r\nimport { getPermissionList, getUserTempScale, isDeviceOffline } from '../../Helpers.js'\r\n\r\nconst DEVICE_SCHEDULE_EACH_DAY = \"EachDay\";\r\nconst DEVICE_SCHEDULE_ALL_DAYS = \"AllDays\";\r\nconst ALL_DAYS = \"All\";\r\nconst DEVICE_SCHEDULE_DAYS = {\r\n 'All': 'All Days',\r\n 'Mon': 'Monday',\r\n 'Tue': 'Tuesday',\r\n 'Wed': 'Wednesday',\r\n 'Thr': 'Thursday',\r\n 'Fri': 'Friday',\r\n 'Sat': 'Saturday',\r\n 'Sun': 'Sunday'\r\n};\r\n\r\nconst SCHEDULE_DEVICE_DAYS = {\r\n 'All Days': 'All',\r\n 'Monday': 'Mon',\r\n 'Tuesday': 'Tue',\r\n 'Wednesday': 'Wed',\r\n 'Thursday': 'Thr',\r\n 'Friday': 'Fri',\r\n 'Saturday': 'Sat',\r\n 'Sunday': 'Sun'\r\n};\r\n\r\nconst scheduleStyles = makeStyles({\r\n switchLabel: {\r\n color: '#005db9'\r\n },\r\n\r\n scheduleRow: {\r\n fontSize: '14px',\r\n fontWeight: '900'\r\n },\r\n\r\n disabledRow: {\r\n color: '#9E9E9E'\r\n },\r\n\r\n evenRows: {\r\n backgroundColor: '#F5F5F5'\r\n },\r\n\r\n checkboxCell: {\r\n textAlign: 'center'\r\n },\r\n\r\n timePickerText: {\r\n '& input': {\r\n color: '#005db9',\r\n fontSize: '12px',\r\n fontWeight: 'normal',\r\n cursor: 'pointer'\r\n }\r\n },\r\n timePickerTextDisabled: {\r\n '& input': {\r\n color: '#005db9',\r\n fontSize: '12px',\r\n fontWeight: 'normal'\r\n }\r\n }\r\n});\r\n\r\nconst ScheduleTableBody = (props) => {\r\n\r\n var thisTab = props.thisTab;\r\n var permissions = getPermissionList(thisTab.props.record.location.permissions)\r\n const classes = scheduleStyles();\r\n var scheduleDays = thisTab.state.schedulingData.scheduleDays\r\n\r\n var schedulingEnabled = thisTab.state.schedulingData.schedulingEnabled;\r\n var allDaysChecked = schedulingEnabled && thisTab.state.schedulingData.type == DEVICE_SCHEDULE_ALL_DAYS;\r\n\r\n var getNearestTenInterval = () => {\r\n const now = new Date();\r\n\r\n var nearestValue = (Math.ceil((now.getMinutes() + 1) / 10) * 10);\r\n var minuteDiff = Math.abs(nearestValue - now.getMinutes());\r\n return new Date(now.getTime() + minuteDiff * 60000);\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n Event Log (30 days)
\r\n\r\n {this.state.errorLogCardList}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {!isDeviceOffline(thisTab.props.record) && \r\n \r\n
\r\n }\r\n {isDeviceOffline(thisTab.props.record) && \r\n The device schedule is currently unavailable.\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 withStyles(bodyStyles)(connect(null, { showNotification })(DeviceScheduleTab));","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport moment from \"moment\";\r\nimport axios from 'axios';\r\n\r\nimport {\r\n fetchEnd,\r\n fetchStart,\r\n showNotification,\r\n crudGetMatching\r\n} from 'react-admin';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\n\r\nimport '../css/HelpModal.css';\r\nimport '../css/DeviceInfoModal.css';\r\nimport { getDeviceImageOrDefault, getLocationAddress } from '../../Helpers.js';\r\n\r\nconst headerActionIcon = {\r\n color: '#005db9',\r\n cursor: 'pointer',\r\n display: 'inline-block',\r\n margin: '0 14px',\r\n fontSize: '20px'\r\n}\r\n\r\nclass DeviceInfoModal extends Component {\r\n\r\n state = {\r\n error: false,\r\n showDialog: false,\r\n deviceData: {\r\n imageUrl: \"\",\r\n modelName: \"\",\r\n modelNumber: \"\",\r\n firmware: \"\",\r\n deviceType: \"\",\r\n name: \"\",\r\n location: \"\",\r\n subLocation: \"\",\r\n address: \"\",\r\n }\r\n };\r\n\r\n handleClick = () => {\r\n this.setState({ showDialog: true });\r\n };\r\n\r\n handleCloseClick = () => {\r\n this.setState({ showDialog: false });\r\n };\r\n\r\n setStateData = (deviceData) => {\r\n this.setState({ deviceData: deviceData });\r\n }\r\n\r\n componentDidMount() {\r\n\r\n var jsonHeaders = {\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0\r\n }\r\n };\r\n var comp = this;\r\n var deviceRecord = this.props.deviceRecord;\r\n\r\n // Get/Set Device Info\r\n // TODO - need a way to get Firmware version\r\n // - Need to implement sublocations\r\n // - How do we can model name vs model number from API?\r\n // TEMP Device Data\r\n\r\n // TODO: Remove this from the state\r\n this.state.deviceData.imageUrl = getDeviceImageOrDefault(deviceRecord);\r\n this.state.deviceData.modelName = deviceRecord.modelNumber;\r\n this.state.deviceData.modelNumber = deviceRecord.modelNumber;\r\n this.state.deviceData.deviceType = deviceRecord.deviceType;\r\n this.state.deviceData.name = deviceRecord.name;\r\n this.state.deviceData.location = deviceRecord.parentLocationName;\r\n this.state.deviceData.installationImage = deviceRecord.installationImageUrl;\r\n\r\n var firmware = 'N/A';\r\n if (deviceRecord.data && deviceRecord.data.sw && deviceRecord.data.sw.Release) {\r\n firmware = deviceRecord.data.sw.Release;\r\n }\r\n\r\n this.state.deviceData.firmware = firmware;\r\n\r\n // Build Address\r\n var address = \"\";\r\n if (deviceRecord.location) {\r\n if (deviceRecord.location.address && !deviceRecord.location.parentId) {\r\n this.state.deviceData.address = getLocationAddress(deviceRecord.location.address);\r\n }\r\n else if (deviceRecord.location.parentId) {\r\n const token = localStorage.getItem('authorizationToken');\r\n axios({\r\n method: 'get',\r\n url: `/api/locations/${deviceRecord.location.parentId}`,\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n }).then((results) => {\r\n\r\n // If it's a sublocation, we need to pull the location address data from the parent location.\r\n var deviceResults = this.state.deviceData;\r\n deviceResults.address = getLocationAddress(results.data.address);\r\n this.setState({\r\n deviceData: {\r\n ...deviceResults\r\n }\r\n })\r\n });\r\n }\r\n\r\n //Sublocation\r\n if (deviceRecord.location.parentId) {\r\n this.state.deviceData.subLocation = deviceRecord.location.name;\r\n }\r\n this.setState({ deviceData: this.state.deviceData });\r\n }\r\n }\r\n\r\n getDeviceImageRow() {\r\n if (this.props.deviceRecord.installationImageUrl) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n else {\r\n return ();\r\n }\r\n }\r\n\r\n render() {\r\n const { showDialog } = this.state;\r\n\r\n return (\r\n \r\n Installation Image
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n \n {banners}\n
\n );\n}\n\nexport default DeviceBanners;","import React, { useState, useEffect } from 'react';\r\nimport { Show, TabbedShowLayout, Tab, SimpleShowLayout, useAuthState } from 'react-admin';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport axios from 'axios';\r\n\r\nimport ScrollToTopOnMount from '../ScrollToTop'\r\n\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\n\r\nimport WattsLoading from '../WattsLoading';\r\n\r\nimport DeviceDashboardTab from './DeviceDashboardTab';\r\nimport DeviceMonitorTab from './DeviceMonitorTab';\r\nimport DeviceScheduleTab from './DeviceScheduleTab';\r\n\r\nimport NoAccessPage from '../NoAccessPage';\r\nimport DeviceInfoModal from './DeviceInfoModal';\r\nimport DeviceBanners from './DeviceBanners';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faPencil } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { getPermissionList, getDeviceImageOrDefault, getHelperStyles, getRecordOutletTemp } from '../../Helpers.js'\r\n\r\nimport '../css/Breadcrumbs.css';\r\n\r\nconst headerStyles = makeStyles({\r\n header: {\r\n padding: '30px 15.3%',\r\n background: '#fff',\r\n position: 'relative'\r\n },\r\n\r\n headerTextContent: {\r\n paddingTop: '34px'\r\n },\r\n\r\n headerImage: {\r\n height: '200px',\r\n float: 'right'\r\n },\r\n\r\n tempReadout: {\r\n margin: '0',\r\n fontSize: '64px',\r\n letterSpacing: '-5px'\r\n },\r\n\r\n mainTitle: {\r\n fontWeight: '900',\r\n fontSize: '44px',\r\n margin: '5px 0px',\r\n width: '100%'\r\n },\r\n\r\n subTitle: {\r\n 'color': '#666666',\r\n 'font-family': 'Roboto',\r\n 'font-size': '16px',\r\n 'font-weight': 'normal',\r\n 'font-stretch': 'normal',\r\n 'font-style': 'normal',\r\n 'line-height': '1.5',\r\n 'letter-spacing': '-0.16px'\r\n },\r\n\r\n topLeftInfo: {\r\n color: '#666',\r\n fontSize: '10px',\r\n marginBottom: '15px'\r\n },\r\n\r\n counterContainer: {\r\n display: 'inline-block',\r\n color: '#665C5C',\r\n marginTop: '10px'\r\n },\r\n\r\n counter: {\r\n display: 'inline-block',\r\n height: '30px',\r\n width: '50px',\r\n marginRight: '10px'\r\n },\r\n\r\n counterIcon: {\r\n display: 'inline-block',\r\n height: '100%'\r\n },\r\n\r\n counterNumber: {\r\n float: 'right',\r\n margin: '0 10px 0 0',\r\n lineHeight: '30px',\r\n verticalAlign: 'middle'\r\n },\r\n\r\n iconContainer: {\r\n position: 'absolute',\r\n top: '34px',\r\n right: '15.3%'\r\n },\r\n\r\n headerActionIcon: {\r\n color: '#005DB9',\r\n cursor: 'pointer',\r\n display: 'inline-block',\r\n margin: '0 14px',\r\n fontSize: '20px'\r\n },\r\n\r\n overline: {\r\n fontFamily: 'Roboto',\r\n fontSize: '12px',\r\n fontWeight: 'normal',\r\n fontStretch: 'normal',\r\n fontStyle: 'normal',\r\n lineHeight: 1.33,\r\n letterSpacing: '-0.12px',\r\n color: 'rgba(0, 0, 0, 0.87)'\r\n },\r\n\r\n brandContainer: {\r\n textAlign: 'right'\r\n },\r\n\r\n tempBrandContainer: {\r\n borderBottom: '1px solid rgba(0, 0, 0, 0.12)',\r\n marginBottom: '35px',\r\n paddingBottom: '25px'\r\n },\r\n\r\n brandImage: {\r\n position: 'relative',\r\n top: '50%',\r\n transform: 'translateY(-50%)'\r\n }\r\n});\r\n\r\nconst DeviceHeader = (props) => {\r\n const classes = headerStyles();\r\n\r\n const permissions = getPermissionList(props.record.location.permissions);\r\n\r\n var locationName = '';\r\n if (props.record.location) {\r\n\r\n if (props.record.location.parentId) {\r\n locationName = `${props.record.parentLocationName}, ${props.record.location.name}`;\r\n }\r\n else {\r\n locationName = props.record.location.name;\r\n }\r\n }\r\n\r\n var deviceOutletTemp = getRecordOutletTemp(props.record, \"- - -\", true);\r\n\r\n const classTemplate = getHelperStyles()();\r\n\r\n const tempReadoutClass = classes.tempReadout + ' ' + classTemplate.heading2;\r\n const mainTitleClass = classes.mainTitle + ' ' + classTemplate.heading3;\r\n\r\n // For sublocations, they'll have a parentId for the parent location.\r\n var parentLocationId = props.record.location.parentId;\r\n if (!parentLocationId) {\r\n // But for parent locations, they won't have a parent id, so we use the location id itself.\r\n parentLocationId = props.record.location.locationId;\r\n }\r\n\r\n return (\r\n \r\n\r\n \r\n \r\n Locations\r\n \r\n \r\n {props.record.parentLocationName}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ![\"POWERS\"](\"/img/powers-logo.svg\")
\r\n \r\n \r\n {props.record.deviceType}\r\n {props.record.name}\r\n \r\n \r\n })
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst bodyStyles = {\r\n locationBody: {\r\n padding: '0 15.3%',\r\n \"&:first-child\": {\r\n paddingTop: 0\r\n },\r\n \"&:last-child\": {\r\n paddingBottom: 0\r\n }\r\n },\r\n\r\n tabContainer: {\r\n \"& .MuiTabs-root\": {\r\n background: 'white',\r\n padding: '0 15.3%'\r\n }\r\n },\r\n\r\n tabContent: {\r\n padding: '0 15.3px'\r\n }\r\n}\r\n\r\nconst DeviceViewLayout = (props) => {\r\n\r\n const [helpObject, setHelpObject] = useState();\r\n const [helpError, setHelpError] = useState();\r\n const [pendingHelp, setPendingHelp] = useState(false);\r\n\r\n\r\n useEffect(() => {\r\n if (!pendingHelp && !helpObject && !helpError) {\r\n\r\n setPendingHelp(true);\r\n\r\n const token = localStorage.getItem('authorizationToken');\r\n axios({\r\n method: 'get',\r\n url: `/api/AppSettings/helpcontent`,\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n }).then(function (response) {\r\n\r\n var helpObject = {};\r\n\r\n response.data.forEach((result) => {\r\n helpObject[result.key] = result;\r\n });\r\n\r\n\r\n setHelpObject(helpObject);\r\n }).catch(function (error) {\r\n setHelpError(error);\r\n });\r\n }\r\n });\r\n\r\n\r\n const tabbedShowLayoutStyles = {\r\n 'content': {\r\n 'padding': '0 13%'\r\n }\r\n };\r\n\r\n const StyledTabbedShowLayout = withStyles(tabbedShowLayoutStyles)(TabbedShowLayout);\r\n\r\n const { classes, ...other } = props;\r\n const bodyClasses = props.classes;\r\n\r\n if (props.record && props.record.errorNumber) {\r\n return \r\n {props.record.name}\r\n
\r\n\r\n
\r\n Mixed Outlet Temp
\r\n {deviceOutletTemp}
\r\n\r\n {locationName}
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst DeviceView = (props) => {\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return \n \n \n \n \n \n \n \n \n \r\n {({ formData }) => {\r\n\r\n // Recursively parses digits from a string.\r\n function recursiveDigits(string) {\r\n\r\n if (string) {\r\n let matches = string.match(/(\\d+)/);\r\n\r\n if (matches && matches.length > 0) {\r\n let index = matches['index'];\r\n let restOfString = string.substring(index + matches[0].length);\r\n\r\n return matches[0] + recursiveDigits(restOfString);\r\n }\r\n }\r\n\r\n // Otherwise, return empty string to end recursion.\r\n return '';\r\n }\r\n\r\n var validation = [];\r\n validation.push(\r\n (() => {\r\n // This validation is triggered by react-admin in 2 different orders depending\r\n // on what triggers the change.\r\n // If the phone number field is changed, the sms notification toggle represents\r\n // the correct current value.\r\n // If the sms notification toggle is changed first, this function gets called\r\n // before that change takes effect in the formData value, so the old value is\r\n // passed in here, not the new one. This is a problem. So we check what field \r\n // is active.\r\n const smsChangedField = form.getFieldState(\"smsNotificationEnabled\");\r\n var smsChanged = false;\r\n\r\n // Determine if the sms field is what changed.\r\n if (smsChangedField) {\r\n smsChanged = smsChangedField.active;\r\n }\r\n\r\n var smsValue = formData.smsNotificationEnabled;\r\n\r\n if (smsChanged) {\r\n // If the sms field changed, invert it, because it's a boolean and the next\r\n // state will be the opposite of what it currently is.\r\n smsValue = !smsValue;\r\n }\r\n\r\n return Object.assign(\r\n (value) => {\r\n if (!value && smsValue) {\r\n // If it's required but not filled in, return the required message.\r\n return 'Required'\r\n }\r\n else {\r\n\r\n let phoneDigits = recursiveDigits(value);\r\n\r\n if (value && phoneDigits.length !== 10) {\r\n return 'Please enter a valid phone number. (e.g., 555-123-4567)';\r\n }\r\n else {\r\n // react-admin specifies to return undefined when the validation is\r\n // successful.\r\n return undefined;\r\n }\r\n }\r\n },\r\n // Need to do this assign for react-admin to show the '*' in front of\r\n // the field label.\r\n { isRequired: formData.smsNotificationEnabled }\r\n );\r\n })()\r\n );\r\n\r\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n\n};\n\nconst BoolInputLeftLabel = (props) => {\n\n const boolStyles = makeStyles({\n 'boolGrid': {\n 'marginBottom': '24px'\n },\n 'boolLabel': {\n 'padding': '16px 0'\n },\n 'boolButton': {\n 'display': 'inline-block',\n 'float': 'right'\n }\n });\n\n const useStyles = boolStyles();\n\n return (\n Notifications
\nChoose how you’d like to receive notifications about your locations and devices.
\nPreferences
\nSelect your preferred language and units of measurement.
\n\r\n
\r\n );\r\n};\r\n\r\nexport default EditSettings;","import React from 'react';\nimport { TextInput } from 'react-admin';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faUserAlt } from '@fortawesome/pro-solid-svg-icons';\nimport { faPencil } from '@fortawesome/pro-regular-svg-icons';\nimport { authProvider } from '../../AuthProvider';\n\nimport FormHeader from '../FormHeader';\n\nconst layoutStyles = makeStyles({\n 'icon': {\n 'color': '#005DB9',\n 'font-size': '32px'\n },\n 'gridBottom': {\n 'marginBottom': '48px',\n 'paddingTop': '40px'\n },\n 'subText': {\n 'color': '#333',\n 'fontSize': '14px',\n 'lineHeight': 1.43,\n 'letterSpacing': '-0.14px'\n },\n 'actionText': {\n 'color': '#005DB9',\n 'fontSize': '14px',\n 'lineHeight': 1.43,\n 'letterSpacing': '-0.14px'\n },\n 'fab': {\n 'background': '#005DB9',\n 'border-radius': '100%',\n 'box-shadow': '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0,0,0,.12)',\n 'color': '#FFF',\n 'fontSize': '20px',\n 'height': '56px',\n 'left': '100%',\n 'transform': 'translateY(-50%)',\n 'minHeight': '56px',\n 'minWidth': '56px',\n 'position': 'absolute',\n 'marginLeft': '-14.2%',\n 'width': '56px',\n 'z-index': '100',\n\n '&:hover, &:active, &:focus': {\n 'background': '#005DB9'\n }\n },\n 'container': {\n 'background': '#FFF',\n 'minHeight': '100vh'\n }\n});\n\nconst AccountForm = (props) => {\n\n const useStyles = layoutStyles();\n const userAccount = JSON.parse(sessionStorage.getItem('userAccount'))\n\n return (\n Settings saved.
} {...props}>\r\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n\n};\n\n\nexport default AccountForm;","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Edit, SimpleForm, useAuthState } from 'react-admin';\nimport ScrollToTopOnMount from '../ScrollToTop'\nimport WattsToolbar from '../WattsToolbar';\nimport AccountFormLayout from './AccountFormLayout';\nimport WattsLoading from '../WattsLoading';\n\n// CSS\nimport '../css/LandingPage.css';\n\nconst editStyles = makeStyles({\n 'main': {\n 'margin': '0'\n }\n});\n\nconst EditAccount = ({ hasCreate, hasEdit, hasList, hasShow, ...props }) => {\n\n const editUseStyles = editStyles();\n\n const { loading, authenticated } = useAuthState();\n\n if (loading) {\n return Account Info
\nThe following information is managed outside the Watts OnSite app.
\nClick
\n \n \n \n \n
\n );\n};\n\nexport default EditAccount;","import React, { Fragment } from 'react';\r\nimport axios from 'axios';\r\nimport { showNotification } from 'react-admin';\r\nimport { connect } from 'react-redux';\r\n\r\nimport Button from '@material-ui/core/Button';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nclass OwnershipTransferModal extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n pendingTransfers: []\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const transfers = JSON.parse(localStorage.getItem(\"pendingLocationTransfers\"));\r\n if (transfers && transfers.length) {\r\n this.setState({\r\n pendingTransfers: transfers\r\n });\r\n }\r\n else {\r\n\r\n const token = localStorage.getItem('authorizationToken');\r\n var compThis = this;\r\n axios.get(\"/api/User\", {\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n })\r\n .then(function (response) {\r\n if (response && response.data) {\r\n\r\n var pendingTransfers = JSON.stringify(response.data.pendingLocationTransfers);\r\n\r\n localStorage.setItem('pendingLocationTransfers', pendingTransfers);\r\n\r\n compThis.setState({\r\n pendingTransfers: response.data.pendingLocationTransfers\r\n });\r\n }\r\n }\r\n );\r\n }\r\n }\r\n\r\n handleClose() {\r\n this.setState({ transferWindowOpen: false });\r\n }\r\n\r\n handleOpen() {\r\n this.setState({ transferWindowOpen: true });\r\n }\r\n\r\n handleTransferSelection(accepted = false) {\r\n var comp = this;\r\n var urlSuffix = accepted ? 'Accept' : 'Decline';\r\n\r\n const token = localStorage.getItem('authorizationToken');\r\n axios.post(`/api/Locations/${comp.state.pendingTransfers[0].locationId}/Transfer/${urlSuffix}`, {}, {\r\n headers: {\r\n \"Cache-control\": \"no-cache, no-store\",\r\n \"Pragma\": \"no-cache\",\r\n \"Expires\": 0,\r\n \"Authorization\": `Bearer ${token}`\r\n }\r\n })\r\n .then(function () {\r\n var transfers = comp.state.pendingTransfers;\r\n transfers.shift();\r\n\r\n comp.setState({ pendingTransfers: transfers });\r\n\r\n localStorage.setItem(\"pendingLocationTransfers\", JSON.stringify(transfers));\r\n })\r\n .catch(function () {\r\n });\r\n }\r\n\r\n render() {\r\n const currentTransfer = this.state.pendingTransfers[0];\r\n if (currentTransfer) {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport const CardList = (props) => { \r\n\r\n const [data, setData] = useState({});\r\n const useStyles = makeStyles({\r\n content: {\r\n margin: '0 13%',\r\n background: 'none',\r\n border: 'none',\r\n boxShadow: 'none'\r\n }\r\n });\r\n\r\n const classes = useStyles();\r\n\r\n const { loading, authenticated } = useAuthState();\r\n\r\n if (loading) {\r\n return Click
\r\n \r\n \r\n \r\n
\r\n {record.address.city}, {record.address.state_province}
);\r\nLocationField.defaultProps = { label: 'Name' };\r\n\r\nconst LocationIcon = withStyles(styles)(({ classes, locationType = 99 }) => {\r\n var map = {\r\n 1: faUniversity,\r\n 2: faSchool,\r\n 3: faHospital,\r\n 4: faUserNurse,\r\n 5: faAmbulance,\r\n 6: faHotel,\r\n 7: faChairOffice,\r\n 8: faRunning,\r\n 9: faCity,\r\n 10: faGavel\r\n }\r\n if (Object.keys(map).indexOf(\"\" + locationType) === -1) {\r\n return{status.name}
\r\n }\r\n{buildingType.name}
}\r\n />\r\n\r\n
\r\n