diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js index bd8fc7cacb9ce3317d3a779d039ddd07b9ecf348..fffdfe76d8a7864a57070eba90086303a480cd0e 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js @@ -24,32 +24,27 @@ import {connect} from "react-redux"; class ModalPicture extends Component { - constructor(props){ - super(props) - this.state = { - modal: false, - modalUrl: '' - }; - this.img = React.createRef(); - this.toggleModal = this.toggleModal.bind(this); - this.onImgError = this.onImgError.bind(this); + + state = { + modal: false, + modalUrl: '' } - toggleModal(e){ + toggleModal = (e) => { this.setState({ modal: !this.state.modal, modalUrl: e.currentTarget.src }); } - onImgError(e){ + onImgError = (e) => { const img = e.currentTarget; img.alt = 'Reloading in 2 sec..'; // let the window figure out if the timeout id is still valid if(this.timeout){ clearTimeout(this.timeout); } - this.timeout = setTimeout(() => { this.img.current.src = this.img.current.src; }, 2000 ); + this.timeout = setTimeout(() => { img.src = img.src; }, 2000 ); } clearTimeouts() { @@ -61,7 +56,7 @@ class ModalPicture extends Component { this.clearTimeouts(); return ( <React.Fragment> - <img ref={this.img} src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/> + <img src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/> <Modal isOpen={this.state.modal} fade={false} size="lg" toggle={this.toggle} className={this.props.className}> <ModalHeader toggle={this.toggleModal}></ModalHeader> <ModalBody> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js index 0264ff5d82c040e7ab299c8b1bd79a85fa28261c..42b5776f5acf45381326de65555fc73ccb927ca8 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js @@ -15,20 +15,14 @@ import {renderDateRange} from '../utils/utils'; import './StationTestView.css'; class GenericStatusC extends Component { - constructor(props) { - super(props); - this.mouseOver = this.mouseOver.bind(this); - this.mouseOut = this.mouseOut.bind(this); - } - - mouseOver() { + mouseOver = () => { if (this.props.data !== undefined && this.props.isPinned === false) { this.props.selectAntennaError(this.props.data); } } - mouseOut() { + mouseOut = () => { if (this.props.data !== undefined && this.props.isPinned === false) { this.props.selectAntennaError({}); } @@ -78,23 +72,25 @@ class GenericStatusC extends Component { } } - mouseClick(e) { + mouseClick = (e) => { this.props.selectAntennaError(this.props.data); this.props.pinAntennaError(!this.props.isPinned); } + onContextMenu = (e) => { + e.preventDefault(); + }; + render() { const color = this.props.isGood ? "so-good" : "so-serious"; const label = this.props.isGood ? "" : this.renderError(); return ( <td className={"stv-component-status " + color} + onContextMenu={this.onContextMenu} onMouseOver={this.mouseOver} onMouseOut={this.mouseOut} - onClick={e => { - this.mouseClick(e) - }}> - + onClick={this.mouseClick} > {label} </td>); } @@ -113,11 +109,9 @@ const GenericStatus = connect(state => { class AntennaErrorLineC extends Component { - constructor(props) { - super(props); - this.state = { - isCollapsed: true - } + + state = { + isCollapsed: true } static composeHeaderLine(data) {