import React from "react";
import {
fetchMonitoredArea,
deleteMonitoredArea
} from '../../../restmodules/MonitoredAreaRestModule';
import { Redirect } from 'react-router-dom';
import MonitoredAreaMap from '../../maps/MonitoredAreaMap';
import { Checkbox } from 'react-ui-icheck';
import { withNamespaces } from 'react-i18next';
/**
* @extends Component
* @hideconstructor
*/
class MonitoredAreaDetail extends React.Component {
/**
* @constructs
* @param props
*/
constructor(props) {
super(props);
this.state = {
monitoredArea: {
"id": "",
"device":
{
"id": ""
},
"deviceLatitude": "",
"deviceLongitude": "",
"name": "",
"detectionParameters":
{
"id": "",
"backgroundSubstractionHistory": "",
"detectorMinContourWidth": "",
"detectorMinContourHeight": "",
"counterPathSize": "",
"counterMaxDistance": ""
}
},
redirectPath: null
};
}
/**
*
*/
componentDidMount() {
fetchMonitoredArea(this.props.match.params.id)
.then(data => this.setState({ monitoredArea: data }))
.catch(error => this.setState({ monitoredArea: [{ name: error.toString() }] }));
}
/**
*
* @param redirectPath
*/
redirectTo = (redirectPath) => {
this.setState({
redirectPath: redirectPath
});
};
/**
*
* @param id
*/
showEditForm = (id) => {
if(id){
this.redirectTo('/config/edit/' + id);
}
};
/**
*
* @param id
*/
showEditParamsForm = (id) => {
if(id){
this.redirectTo('/config/parameters/' + id);
}
};
/**
*
* @param id
*/
showEditAnnotationForm = (id) => {
if(id){
this.redirectTo('/config/annotation/' + id);
}
};
/**
*
*/
closeScreen = () => {
this.redirectTo('/config/');
}
/**
*
*/
deleteMonitoredArea() {
deleteMonitoredArea(this.props.match.params.id)
.then(response => {
if (response.status === 204) {
this.closeScreen();
}
})
.catch(error => console.log(error));
}
/**
*
* @returns {*}
*/
render() {
const { t } = this.props;
if (this.state.redirectPath) {
return <Redirect to={this.state.redirectPath}/>
}
let divStyle = {
marginRight: '5px'
};
return (
<section className="content-header">
<h1>
{t('forms.MonitoredAreaDetail')}
</h1>
<ol className="breadcrumb">
<li><a href="/config"><i className="fa fa-gear"></i>{t('sidebar.adminConfiguration')}</a></li>
<li><a href={"/config/detail/" + this.state.monitoredArea.id}>{t('forms.MonitoredAreaDetail')}</a></li>
</ol>
<br/>
<div className="row">
<div className="col-lg-12">
<div className="box">
{this.renderConfirmDeleteModal(t('forms.deleteMonitoredArea') + "?")}
<div className="box-header with-border">
<h3 className="box-title">{t('forms.MonitoredAreaDetail')}</h3>
<div className="btn-group pull-right">
<button className="btn btn-primary"
onClick={() => this.showEditForm(this.state.monitoredArea.id)}
>{t('forms.editMonitoredArea')}</button>
<button className="btn btn-primary"
onClick={() => this.showEditParamsForm(this.state.monitoredArea.id)}
>{t('forms.MonitoredAreaEditParameters')}</button>
<button className="btn btn-primary"
onClick={() => this.showEditAnnotationForm(this.state.monitoredArea.id)}
>{t('monitoredArea.annotate')}</button>
<button className="btn btn-outline-primary"
onClick={() => this.closeScreen()}
>{t('forms.cancel')}</button>
</div>
</div>
<div className="box-body">
<form role="form">
<div className="box-header with-border">
<div className="panel-title">
<Checkbox
checkboxClass="icheckbox_square-blue"
checked={this.state.monitoredArea.active}
disabled
label={t('forms.active')}
onChange={() => {this.toggleActive()}}
/>
</div>
</div>
<div className="box-body">
<div className="form-group">
<label>{t('forms.monitoredAreaName')}</label>
<input
type="text"
className="form-control"
placeholder={t("forms.name")}
name="name"
value={this.state.monitoredArea.name}
readOnly
/>
</div>
<div className="form-group">
<label>{t('forms.device')}</label>
<input
type="text"
className="form-control"
name="deviceName"
defaultValue={this.state.monitoredArea.device.name}
readOnly
/>
</div>
</div>
<div>
<div className="row-xs-flex-center" style={{'margin-right': 'inherit'}}>
<div className="col-sm-2">
<label>{t("forms.coordinates")}</label>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder={t('forms.latitude')}
name="deviceLatitude"
value={parseFloat(this.state.monitoredArea.deviceLatitude).toFixed(3)}
readOnly
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder={t('forms.longitude')}
name="deviceLongitude"
value={parseFloat(this.state.monitoredArea.deviceLongitude).toFixed(3)}
readOnly
/>
</div>
</div>
<div className="col-sm-10">
<MonitoredAreaMap
interactive={false}
deviceLatitude={this.state.monitoredArea.deviceLatitude}
deviceLongitude={this.state.monitoredArea.deviceLongitude}
/>
</div>
</div>
</div>
<div className="box-header with-border">
<h3 className="box-title">{t('monitoredArea.parameters')}</h3>
</div>
<div className="box-body">
<div className="form-group">
<label>{t('forms.detectorMinContour')}</label>
<div className="row">
<div className="col-xs-3">
<div className="form-group">
<label>{t('forms.width')}</label>
<input
type="number"
className="form-control"
name="detectorMinContourWidth"
value={this.state.monitoredArea.detectionParameters.detectorMinContourWidth}
readOnly
/>
</div>
</div>
<div className="col-xs-3">
<div className="form-group">
<label>{t('forms.height')}</label>
<input
type="number"
className="form-control"
name="detectorMinContourHeight"
value={this.state.monitoredArea.detectionParameters.detectorMinContourHeight}
readOnly
/>
</div>
</div>
</div>
</div>
</div>
</form>
<div className="pull-left">
<a
className="btn-link-red"
data-toggle="modal"
data-target="#confirmDeleteModal"
>{t("forms.deleteMonitoredArea")}</a>
</div>
<div className="btn-group pull-right">
<button className="btn btn-primary"
onClick={() => this.showEditForm(this.state.monitoredArea.id)}
>{t('forms.editMonitoredArea')}</button>
<button className="btn btn-primary"
onClick={() => this.showEditParamsForm(this.state.monitoredArea.id)}
>{t('forms.MonitoredAreaEditParameters')}</button>
<button className="btn btn-primary"
onClick={() => this.showEditAnnotationForm(this.state.monitoredArea.id)}
>{t('monitoredArea.annotate')}</button>
<button className="btn btn-outline-primary"
onClick={() => this.closeScreen()}
>{t("forms.cancel")}</button>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
/**
*
* @param text
* @returns {*}
*/
renderConfirmDeleteModal(text) {
const { t } = this.props;
return (
<div className="modal fade"
id="confirmDeleteModal"
tabIndex="-1"
role="dialog"
aria-labelledby="myModalLabel">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{t("forms.deleteMonitoredArea")}?</h4>
</div>
<div className="modal-body">
{text}
</div>
<div className="modal-footer">
<button type="button"
className="btn btn-default"
data-dismiss="modal">
{t("forms.cancel")}
</button>
<button type="button"
className="btn btn-primary"
data-dismiss="modal"
onClick={() => this.deleteMonitoredArea()}
>{t("forms.delete")}
</button>
</div>
</div>
</div>
</div>
)
}
}
export default withNamespaces()(MonitoredAreaDetail);