import React from "react";
import '../../css/CameraList.css';
import '../../css/MonitoredAreaAnnotation.css'
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import {Link} from 'react-router-dom';
import { SimpleHereMap } from '../../maps/SimpleHereMap';
import { withNamespaces } from 'react-i18next';
import i18n from '../../../../i18n';
/**
* Monitored area configuration overview
* @extends Component
* @hideconstructor
*/
class TableOfMonitoredAreasConfiguration extends React.Component {
/**
* @constructs
* @param props
*/
constructor(props) {
super(props);
this.state = {
selectedRow: null,
selectedMonitoredAreaID: null,
data: null,
addresses: {}
};
this.addresses = [];
this.platform = null;
this.map ={
app_id: "oe8n7sngNv5nof91Wfmd",
app_code: "GfQjHITSHIn7XIUK5xuzsw",
useHTTPS: true
};
this.platform = new window.H.service.Platform(this.map);
}
/**
*
* @param e
* @param id
*/
handleEditParams(e, id) {
this.setState({
selectedMonitoredAreaID: id,
});
e.stopPropagation();
this.props.onEditParams(id);
}
/**
*
* @param e
* @param id
*/
handleEditAnnotations(e, id) {
this.setState({
selectedMonitoredAreaID: id,
});
e.stopPropagation();
this.props.onEditAnnotations(id);
}
/**
*
* @param id
*/
handleDetail(id) {
this.setState({
selectedMonitoredAreaID: id,
});
this.props.onDetail(id);
}
/**
*
* @param e
* @param id
*/
handleEdit(e, id){
e.stopPropagation();
this.setState({
selectedMonitoredAreaID: id,
});
this.props.onEdit(id);
}
/**
*
* @param e
* @param id
*/
handleViewLivestream(e, id) {
e.stopPropagation();
this.props.onViewLivestream(id);
}
/**
*
* @param index
* @param lat
* @param lng
*/
getAddress(index, lat, lng) {
let geocoder = this.platform.getGeocodingService(),
parameters = {
prox: lat + ','+ lng + ',250',
mode: 'retrieveAddresses',
maxresults: '1',
gen: '9',
language: i18n.language
};
geocoder.reverseGeocode(
parameters,
(result) => this.addAddress(result, index),
function (error) {
console.log("HERE maps geolocation unavaible.");
});
}
/**
*
* @param result
* @param index
*/
addAddress(result, index){
//console.log(JSON.stringify(result));
//console.log("adresses: " + JSON.stringify(this.state.addresses));
try {
let a = this.state.addresses;
let address = result.Response.View[0].Result[0].Location.Address;
a[index] = address.Label;
this.setState({
addresses: a
});
}catch (e) {
console.log(e);
let a = this.state.addresses;
a[index] = "Unknown";
this.setState({
addresses: a
});
}
}
/**
*
* @param prevProps
* @param prevState
* @param snapshot
*/
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps === this.props) return;
if (this.props.data === undefined || this.props.data === null) return;
if (this.state.addresses === null || Object.keys(this.state.addresses).length <= 0) {
for (let i = 0; i<this.props.data.length; i++){
this.getAddress(this.props.data[i].id, this.props.data[i].deviceLatitude, this.props.data[i].deviceLongitude);
}
}
}
/**
*
* @returns {*}
*/
render() {
const { t } = this.props;
const columns = [{
Header: t('monitoredArea.monitoredArea'),
columns: [
{
Header: t('forms.active'),
width: 50,
resizable: false,
Cell: row => (
<div className="container-center">
{row.original.active ? <span className="fa fa-circle-o text-light-blue"/>
: <span className="fa fa-circle-o text-gray"/> }
</div>
)
}, {
Header: 'ID',
accessor: 'id',
width: 80
}, {
Header: t('forms.device'),
accessor: 'device.name',
width: 80
}, {
Header: t('forms.name'),
accessor: 'name',
width: 260
}, {
Header: t('forms.location'),
Cell: row => (
<div>
{(row.original.id !== undefined && row.original.id !== null && this.state.addresses !== null)
? this.state.addresses[row.original.id] !== undefined ? this.state.addresses[row.original.id].replace(/\"/g, "") : null
: ""}
</div>
)
}
// , {
// Header: 'Latitude',
// Cell: row => (
// <div>
// {(row.original.deviceLatitude !== undefined && row.original.deviceLatitude !== null)
// ? row.original.deviceLatitude.toFixed(3)
// : ""}
// </div>
// )
// }, {
// Header: 'Longitude',
// Cell: row => (
// <div>
// {(row.original.deviceLongitude !== undefined && row.original.deviceLongitude !== null)
// ? row.original.deviceLongitude.toFixed(3)
// : ""}
// </div>
// )
// }
]
}, {
Header: t('monitoredArea.edit'),
width: 50,
resizable: false,
Cell: row => (
<div className="container-center">
<a className="fa fa-gear"
onClick={(e) => {
this.handleEdit(e, row.original.id)
}}
/>
</div>
)
}, {
Header: t('monitoredArea.annotate'),
width: 65,
resizable: false,
Cell: row => (
<div className="container-center">
{row.original.active ? <a className="fa fa-pencil"
onClick={(e) => {
this.handleEditAnnotations(e, row.original.id)
}}
/> : <a className="fa fa-wrench inactiveLink"
onClick={(e) => {
e.stopPropagation();
}}
/> }
</div>
)
}, {
Header: t('monitoredArea.livestream'),
width: 75,
resizable: false,
Cell: row => (
<div className="container-center">
{row.original.active ? <a className="fa fa-play-circle-o"
onClick={(e) => {
this.handleViewLivestream(e, row.original.device.id)
}}
/> : <a className="fa fa-play-circle-o inactiveLink"
onClick={(e) => {
e.stopPropagation();
}}
/> }
</div>
)
}, {
Header: t('monitoredArea.parameters'),
width: 75,
resizable: false,
Cell: row => (
<div className="container-center">
{row.original.active ? <a className="fa fa-wrench"
onClick={(e) => {
this.handleEditParams(e, row.original.id)
}}
/> : <a className="fa fa-pencil inactiveLink"
onClick={(e) => {
e.stopPropagation();
}}
/> }
</div>
)
}];
let length = this.props.data !== null && this.props.data !== undefined ? this.props.data.length : 5;
if (this.props.data) {
return (
<div className="box-body">
<ReactTable
data={this.props.data}
columns={columns}
defaultPageSize={(length > 10) ? 10 : length}
pageSizeOptions={(length > 10) ? [5, 10, 25, 50, 100] : [length]}
className="-highlight"
getTrProps={(state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
onClick: (e) => {
this.handleDetail(rowInfo.original.id);
},
}
} else {
return {}
}
}
}
/>
</div>
)
} else {
return (
<div className="container-center">
<i className="fa fa-refresh fa-spin loading"/>
</div>)
}
}
}
export default withNamespaces()(TableOfMonitoredAreasConfiguration);