|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React, { Component, Fragment } from 'react'; |
|
|
|
|
import {Vector as VectorLayer} from 'ol/layer'; |
|
|
|
|
import {Vector as VectorSource} from 'ol/source'; |
|
|
|
|
import { Vector as VectorLayer } from 'ol/layer'; |
|
|
|
|
import { Vector as VectorSource } from 'ol/source'; |
|
|
|
|
import Feature from 'ol/Feature'; |
|
|
|
|
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; |
|
|
|
|
import { Circle as CircleStyle, Fill, Icon as IconOl, Stroke, Style, Text } from 'ol/style'; |
|
|
|
@ -32,8 +32,8 @@ import axios from "axios"
|
|
|
|
|
import moment from "moment" |
|
|
|
|
import { deleteFeature, getImagePopup, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js'; |
|
|
|
|
import { formatLabel, hideAttr, dateColumns, DATE_TIME_FORMAT } from '../../const/CustomFunc.js' |
|
|
|
|
import {API_UPLOAD_IMAGE, BASE_IMAGE, BASE_SIMPRO } from '../../const/ApiConst.js' |
|
|
|
|
import routeDummy from '../../dummy_data/route2.json'; |
|
|
|
|
import { API_UPLOAD_IMAGE, BASE_IMAGE, BASE_SIMPRO } from '../../const/ApiConst.js' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class PopupContainer extends Component { |
|
|
|
|
|
|
|
|
@ -53,7 +53,7 @@ class PopupContainer extends Component {
|
|
|
|
|
featureExtent: null, |
|
|
|
|
mapProjection: this.props.olmap.getView().getProjection(), |
|
|
|
|
fitOption: { |
|
|
|
|
size: this.props.olmap.getSize(),
|
|
|
|
|
size: this.props.olmap.getSize(), |
|
|
|
|
duration: 500, |
|
|
|
|
maxZoom: 18 |
|
|
|
|
}, |
|
|
|
@ -69,7 +69,7 @@ class PopupContainer extends Component {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
|
|
this.setState({isReady: true}); |
|
|
|
|
this.setState({ isReady: true }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*componentDidMount() { |
|
|
|
@ -91,18 +91,18 @@ class PopupContainer extends Component {
|
|
|
|
|
|
|
|
|
|
matchLayerAttribute = (propKey) => { |
|
|
|
|
const { layer_attribute } = this.props; |
|
|
|
|
for (let i=0; i < layer_attribute.length; i++) { |
|
|
|
|
for (let i = 0; i < layer_attribute.length; i++) { |
|
|
|
|
if (layer_attribute[i].attribute !== 'the_geom') { |
|
|
|
|
if (layer_attribute[i].attribute_label !== null && layer_attribute[i].attribute_label !== '' ) { |
|
|
|
|
if (propKey == layer_attribute[i].attribute) { |
|
|
|
|
return layer_attribute[i].attribute_label; |
|
|
|
|
} |
|
|
|
|
if (layer_attribute[i].attribute_label !== null && layer_attribute[i].attribute_label !== '') { |
|
|
|
|
if (propKey == layer_attribute[i].attribute) { |
|
|
|
|
return layer_attribute[i].attribute_label; |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (propKey == layer_attribute[i].attribute) { |
|
|
|
|
return layer_attribute[i].attribute; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (propKey == layer_attribute[i].attribute) { |
|
|
|
|
return layer_attribute[i].attribute; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -142,7 +142,7 @@ class PopupContainer extends Component {
|
|
|
|
|
else { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getLayerColor = (item) => { |
|
|
|
@ -234,18 +234,18 @@ class PopupContainer extends Component {
|
|
|
|
|
</div> |
|
|
|
|
{/*<div className="image-slider" onClick={() => this.showImageFeature(selectedPopupData)}>*/} |
|
|
|
|
<div className="image-popup-container"> |
|
|
|
|
{ this.renderImageSlider(selectedPopupData) } |
|
|
|
|
{this.renderImageSlider(selectedPopupData)} |
|
|
|
|
</div> |
|
|
|
|
<div className="popup-body custom-scroll"> |
|
|
|
|
<table className="table popup-table"> |
|
|
|
|
<tbody> |
|
|
|
|
{ this.renderOneRowFeature(popupProperties) } |
|
|
|
|
{this.renderOneRowFeature(popupProperties)} |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div className="popup-footer"> |
|
|
|
|
<div className="btn-group"> |
|
|
|
|
{ this.renderButtonFooter(selectedPopupData) } |
|
|
|
|
{this.renderButtonFooter(selectedPopupData)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -261,7 +261,7 @@ class PopupContainer extends Component {
|
|
|
|
|
|
|
|
|
|
for (let key in popupProperties) { |
|
|
|
|
|
|
|
|
|
if (typeof(popupProperties[key]) === 'object') { |
|
|
|
|
if (typeof (popupProperties[key]) === 'object') { |
|
|
|
|
for (let prop in popupProperties[key]) { |
|
|
|
|
modPopupProperties[prop] = popupProperties[key][prop]; |
|
|
|
|
} |
|
|
|
@ -271,7 +271,7 @@ class PopupContainer extends Component {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for (let key in modPopupProperties) { |
|
|
|
|
if (typeof(modPopupProperties[key]) === 'object') { |
|
|
|
|
if (typeof (modPopupProperties[key]) === 'object') { |
|
|
|
|
delete modPopupProperties[key]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -293,7 +293,7 @@ class PopupContainer extends Component {
|
|
|
|
|
const row = []; |
|
|
|
|
|
|
|
|
|
for (let key in popupProperties) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let propKey = this.matchLayerAttribute(key); |
|
|
|
|
if (propKey !== undefined) { |
|
|
|
@ -310,7 +310,7 @@ class PopupContainer extends Component {
|
|
|
|
|
|
|
|
|
|
renderButtonFooter = (selectedPopupData) => { |
|
|
|
|
let layer_name = selectedPopupData.id && selectedPopupData.id.substr(0, selectedPopupData.id.indexOf(".")); |
|
|
|
|
return( |
|
|
|
|
return ( |
|
|
|
|
<Fragment> |
|
|
|
|
<Button color="success" size="sm" outline onClick={() => this.showImageFeature(selectedPopupData)} id="showImageFeature"> |
|
|
|
|
<Icon icon={imageOutline} width={15} height={15} /> |
|
|
|
@ -336,13 +336,13 @@ class PopupContainer extends Component {
|
|
|
|
|
<UncontrolledTooltip placement="bottom" target="editFeature"> |
|
|
|
|
Edit Attribute |
|
|
|
|
</UncontrolledTooltip> |
|
|
|
|
{ this.props.activeStateAddGeometry ?
|
|
|
|
|
(<Button disabled color="success" size="sm" outline id="editGeometry"> |
|
|
|
|
<Icon icon={pencilIcon} width={15} height={15} /> |
|
|
|
|
</Button>) : |
|
|
|
|
(<Button color="success" size="sm" outline onClick={() => this.editGeometry(selectedPopupData)} id="editGeometry"> |
|
|
|
|
<Icon icon={pencilIcon} width={15} height={15} /> |
|
|
|
|
</Button>) |
|
|
|
|
{this.props.activeStateAddGeometry ? |
|
|
|
|
(<Button disabled color="success" size="sm" outline id="editGeometry"> |
|
|
|
|
<Icon icon={pencilIcon} width={15} height={15} /> |
|
|
|
|
</Button>) : |
|
|
|
|
(<Button color="success" size="sm" outline onClick={() => this.editGeometry(selectedPopupData)} id="editGeometry"> |
|
|
|
|
<Icon icon={pencilIcon} width={15} height={15} /> |
|
|
|
|
</Button>) |
|
|
|
|
} |
|
|
|
|
<UncontrolledTooltip placement="bottom" target="editGeometry"> |
|
|
|
|
Edit Geometry |
|
|
|
@ -354,27 +354,27 @@ class PopupContainer extends Component {
|
|
|
|
|
Delete Feature |
|
|
|
|
</UncontrolledTooltip> |
|
|
|
|
|
|
|
|
|
{ layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") &&
|
|
|
|
|
<> |
|
|
|
|
<Button color="success" size="sm" outline
|
|
|
|
|
onClick={() => { |
|
|
|
|
let routeType = layer_name.split("_")[1]; |
|
|
|
|
this.props.toggleRoutingBarVisible() |
|
|
|
|
this.props.setRouteType(routeType) |
|
|
|
|
}} |
|
|
|
|
id="showRoute"> |
|
|
|
|
<Icon icon={routeIcon} width={15} height={15} /> |
|
|
|
|
</Button> |
|
|
|
|
<UncontrolledTooltip placement="bottom" target="showRoute"> |
|
|
|
|
Show Route |
|
|
|
|
</UncontrolledTooltip> |
|
|
|
|
</> } |
|
|
|
|
{layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") && |
|
|
|
|
<> |
|
|
|
|
<Button color="success" size="sm" outline |
|
|
|
|
onClick={() => { |
|
|
|
|
let routeType = layer_name.split("_")[1]; |
|
|
|
|
this.props.toggleRoutingBarVisible() |
|
|
|
|
this.props.setRouteType(routeType) |
|
|
|
|
}} |
|
|
|
|
id="showRoute"> |
|
|
|
|
<Icon icon={routeIcon} width={15} height={15} /> |
|
|
|
|
</Button> |
|
|
|
|
<UncontrolledTooltip placement="bottom" target="showRoute"> |
|
|
|
|
Show Route |
|
|
|
|
</UncontrolledTooltip> |
|
|
|
|
</>} |
|
|
|
|
</Fragment> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderImageSlider = (selectedPopupData) => { |
|
|
|
|
if (this.props.popupDataTemp[0].id == selectedPopupData.id) {
|
|
|
|
|
if (this.props.popupDataTemp[0].id == selectedPopupData.id) { |
|
|
|
|
return <ImageSlider id={selectedPopupData.id} />; |
|
|
|
|
} else { |
|
|
|
|
return <DefaultImageSlider /> |
|
|
|
@ -466,13 +466,13 @@ class PopupContainer extends Component {
|
|
|
|
|
<div className="popup-body custom-scroll"> |
|
|
|
|
<table className="table table-hover popup-table"> |
|
|
|
|
<tbody> |
|
|
|
|
{ popupDataTemp.map((item, index) => { |
|
|
|
|
return (<tr key={index} className="popup-row-list-feature"
|
|
|
|
|
{popupDataTemp.map((item, index) => { |
|
|
|
|
return (<tr key={index} className="popup-row-list-feature" |
|
|
|
|
onClick={() => this.chooseOneFeature(item)}> |
|
|
|
|
<td>{this.getFeaturesLabel(item)}</td> |
|
|
|
|
<td> <Badge style={{backgroundColor: this.getLayerColor(item)}} className={this.getLayerTitleTextColor(this.getLayerColor(item))}>{this.getLayerTitle(item)}</Badge> </td> |
|
|
|
|
</tr>) |
|
|
|
|
}) } |
|
|
|
|
<td>{this.getFeaturesLabel(item)}</td> |
|
|
|
|
<td> <Badge style={{ backgroundColor: this.getLayerColor(item) }} className={this.getLayerTitleTextColor(this.getLayerColor(item))}>{this.getLayerTitle(item)}</Badge> </td> |
|
|
|
|
</tr>) |
|
|
|
|
})} |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
@ -492,73 +492,73 @@ class PopupContainer extends Component {
|
|
|
|
|
|
|
|
|
|
showImageFeature = (selectedPopupData) => { |
|
|
|
|
console.log('show images', selectedPopupData); |
|
|
|
|
this.setState({imagePopupTitle: selectedPopupData.id}); |
|
|
|
|
this.setState({ imagePopupTitle: selectedPopupData.id }); |
|
|
|
|
this.toggleImagePopup(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getFrontPhotoLicense = event => { |
|
|
|
|
this.setState({ |
|
|
|
|
photo_feature: event.target.files[0], |
|
|
|
|
image_feature: URL.createObjectURL(event.target.files[0]), |
|
|
|
|
imagePreviewVisible: true |
|
|
|
|
photo_feature: event.target.files[0], |
|
|
|
|
image_feature: URL.createObjectURL(event.target.files[0]), |
|
|
|
|
imagePreviewVisible: true |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleImagePopup = () => { |
|
|
|
|
this.setState({imagePopupVisible: !this.state.imagePopupVisible}); |
|
|
|
|
this.setState({ imagePopupVisible: !this.state.imagePopupVisible }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
handleUploadImage = async () => { |
|
|
|
|
const {photo_feature, image_feature, imagePopupTitle} = this.state |
|
|
|
|
|
|
|
|
|
const category = imagePopupTitle.split("."); |
|
|
|
|
let type = category[0] |
|
|
|
|
let id = category[1] |
|
|
|
|
let imageType = '' |
|
|
|
|
|
|
|
|
|
if(type==="m_office"){ |
|
|
|
|
imageType="office" |
|
|
|
|
}else if(type==="m_sales"){ |
|
|
|
|
imageType="m_sales" |
|
|
|
|
}else if(type==="m_employee"){ |
|
|
|
|
imageType="employee" |
|
|
|
|
}else{ |
|
|
|
|
imageType="customer" |
|
|
|
|
} |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('ref_id', id) |
|
|
|
|
formData.append('files', photo_feature) |
|
|
|
|
let url = `${BASE_SIMPRO}/image/${imageType}/upload`; |
|
|
|
|
const result = await axios.post(url, formData) |
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
const { photo_feature, image_feature, imagePopupTitle } = this.state |
|
|
|
|
|
|
|
|
|
const category = imagePopupTitle.split("."); |
|
|
|
|
let type = category[0] |
|
|
|
|
let id = category[1] |
|
|
|
|
let imageType = '' |
|
|
|
|
|
|
|
|
|
if (type === "m_office") { |
|
|
|
|
imageType = "office" |
|
|
|
|
} else if (type === "m_sales") { |
|
|
|
|
imageType = "m_sales" |
|
|
|
|
} else if (type === "m_employee") { |
|
|
|
|
imageType = "employee" |
|
|
|
|
} else { |
|
|
|
|
imageType = "customer" |
|
|
|
|
} |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('ref_id', id) |
|
|
|
|
formData.append('files', photo_feature) |
|
|
|
|
let url = `${BASE_SIMPRO}/image/${imageType}/upload`; |
|
|
|
|
const result = await axios.post(url, formData) |
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
|
|
|
|
|
return result
|
|
|
|
|
return result |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleImagePreview = async param => { |
|
|
|
|
if(param == "upload"){ |
|
|
|
|
const result = await this.handleUploadImage() |
|
|
|
|
console.log("response upload image",result); |
|
|
|
|
if (result == undefined) { |
|
|
|
|
alert('Upload Failed'); |
|
|
|
|
return; |
|
|
|
|
if (param == "upload") { |
|
|
|
|
const result = await this.handleUploadImage() |
|
|
|
|
console.log("response upload image", result); |
|
|
|
|
if (result == undefined) { |
|
|
|
|
alert('Upload Failed'); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (result.data.code == 200) { |
|
|
|
|
alert('Successfully uploaded image'); |
|
|
|
|
this.toggleImagePopup(); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (result.data.code == 200) { |
|
|
|
|
alert('Successfully uploaded image'); |
|
|
|
|
this.toggleImagePopup(); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
console.log('err',result); |
|
|
|
|
alert(result.data); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
console.log('err', result); |
|
|
|
|
alert(result.data); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
this.setState({imagePreviewVisible: !this.state.imagePreviewVisible}); |
|
|
|
|
this.setState({ imagePreviewVisible: !this.state.imagePreviewVisible }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
showTable = (selectedPopupData) => { |
|
|
|
@ -566,16 +566,16 @@ class PopupContainer extends Component {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleShowTable = () => { |
|
|
|
|
this.setState({mapTableVisible: !this.state.mapTableVisible}) |
|
|
|
|
this.setState({ mapTableVisible: !this.state.mapTableVisible }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
editFeature = (selectedPopupData) => { |
|
|
|
|
console.log('edit feature', selectedPopupData); |
|
|
|
|
this.setState({selectedPopupData: selectedPopupData}, () => this.toggleEditFeature()); |
|
|
|
|
this.setState({ selectedPopupData: selectedPopupData }, () => this.toggleEditFeature()); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleEditFeature = () => { |
|
|
|
|
this.setState({editFeatureVisible: !this.state.editFeatureVisible}) |
|
|
|
|
this.setState({ editFeatureVisible: !this.state.editFeatureVisible }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*goToFeature = (selectedPopupData) => { |
|
|
|
@ -662,7 +662,7 @@ class PopupContainer extends Component {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleEditGeometry = () => { |
|
|
|
|
this.setState({editGeometryVisible: !this.state.editGeometryVisible}) |
|
|
|
|
this.setState({ editGeometryVisible: !this.state.editGeometryVisible }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
deleteFeature = async (selectedPopupData) => { |
|
|
|
@ -707,38 +707,38 @@ class PopupContainer extends Component {
|
|
|
|
|
console.log('imageArr', imageArr); |
|
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
let { isReady, alert, alertMessage, successAlert, dangerAlert } = this.state; |
|
|
|
|
if (!isReady) { |
|
|
|
|
return <div>Loading...</div> |
|
|
|
|
} |
|
|
|
|
return( |
|
|
|
|
<div>
|
|
|
|
|
<SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={alertMessage} onConfirm={() => this.setState({alert: false, successAler: false, dangerAlert: false})}> |
|
|
|
|
return ( |
|
|
|
|
<div> |
|
|
|
|
<SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={alertMessage} onConfirm={() => this.setState({ alert: false, successAler: false, dangerAlert: false })}> |
|
|
|
|
{alertMessage} |
|
|
|
|
</SweetAlert> |
|
|
|
|
|
|
|
|
|
{this.fillPopupContent()} |
|
|
|
|
{
|
|
|
|
|
{ |
|
|
|
|
this.state.imagePopupVisible && |
|
|
|
|
<ImagePopup |
|
|
|
|
uploadImagePopup={this.getFrontPhotoLicense} |
|
|
|
|
imagePopupVisible={this.state.imagePopupVisible} |
|
|
|
|
toggleImagePopup={() => this.toggleImagePopup()} |
|
|
|
|
imagePopupTitle={this.state.imagePopupTitle ? this.state.imagePopupTitle : 'Feature Image'} |
|
|
|
|
id={this.props.popupDataTemp[0].id} |
|
|
|
|
/> |
|
|
|
|
<ImagePopup |
|
|
|
|
uploadImagePopup={this.getFrontPhotoLicense} |
|
|
|
|
imagePopupVisible={this.state.imagePopupVisible} |
|
|
|
|
toggleImagePopup={() => this.toggleImagePopup()} |
|
|
|
|
imagePopupTitle={this.state.imagePopupTitle ? this.state.imagePopupTitle : 'Feature Image'} |
|
|
|
|
id={this.props.popupDataTemp[0].id} |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
{
|
|
|
|
|
{ |
|
|
|
|
this.state.imagePreviewVisible && |
|
|
|
|
<ImagePopupPreview |
|
|
|
|
imageUrl={this.state.image_feature} |
|
|
|
|
imagePopupVisible={this.state.imagePreviewVisible} |
|
|
|
|
toggleImagePopup={this.toggleImagePreview} |
|
|
|
|
imagePopupTitle={"Upload Photo"} |
|
|
|
|
/> |
|
|
|
|
<ImagePopupPreview |
|
|
|
|
imageUrl={this.state.image_feature} |
|
|
|
|
imagePopupVisible={this.state.imagePreviewVisible} |
|
|
|
|
toggleImagePopup={this.toggleImagePreview} |
|
|
|
|
imagePopupTitle={"Upload Photo"} |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
this.state.editFeatureVisible && |
|
|
|
@ -772,10 +772,10 @@ class PopupContainer extends Component {
|
|
|
|
|
/> |
|
|
|
|
}*/} |
|
|
|
|
</div> |
|
|
|
|
)
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|