import React from 'react';
import { fetchZone} from '../../../../restmodules/ZoneRestModule';
/**
* Show zone detail
* @extends Component
* @hideconstructor
*/
export class ZoneDetail extends React.Component {
/**
* @constructs
* @param props
*/
constructor(props) {
super(props);
this.state = {
zone: null,
}
}
/**
*/
componentDidMount() {
fetchZone(this.props.monitoredAreaID, this.props.zoneID)
.then(data => this.setState({ zoneData: data}))
.catch(error => this.setState( {zoneData: [{name: error.toString()}]} ));
}
/**
*/
componentDidUpdate(prevProps) {
if (this.props.zoneID !== prevProps.zoneID) {
fetchZone(this.props.monitoredAreaID, this.props.zoneID)
.then(data => this.setState({ zoneData: data}))
.catch(error => this.setState( {zoneData: [{name: error.toString()}]} ));
}
}
/**
*/
render() {
const { t } = this.props;
if (this.state.zoneData) {
return (
<div className="box-footer">
<h3 className="box-title" >Zone detail</h3>
<form role="form">
<div className="form-group">
<label>Zone Name</label>
<input
type="text"
className="form-control"
placeholder="Name"
name="name"
value={this.state.zoneData.name}
readOnly
/>
</div>
<div className="form-group">
<label>Camera vertices</label>
<table className="table table-bordered">
<tbody>
<tr>
<th>X</th>
<th>Y</th>
</tr>
{this.state.zoneData.cameraVertices.map(function(item, key) {
return (
<tr key = {key} className="">
<td>{item.x}</td>
<td>{item.y}</td>
</tr>
)
})}</tbody>
</table>
</div>
{/*Future code, for future needs
<div className="form-group">
<label>World vertices</label>
<table className="table table-bordered">
<tbody>
<tr>
<th style={{width: '10px'}}>Longitude</th>
<th style={{width: '10px'}}>Latitude</th>
</tr>
{this.state.zone.worldVertices ? this.state.zone.worldVertices.map(function(item, key) {
return (
<tr key = {key} className="">
<td style={{width: '10px'}}>{item.x}</td>
<td style={{width: '10px'}}>{item.y}</td>
</tr>
)
}) : null }
</tbody>
</table>
</div>
*/}
</form>
</div>
)
}else return <span></span>
}
}