diff --git a/src/components/MapHeader/MapHeader.js b/src/components/MapHeader/MapHeader.js index f529f0c..3b0a4a4 100644 --- a/src/components/MapHeader/MapHeader.js +++ b/src/components/MapHeader/MapHeader.js @@ -1,20 +1,16 @@ import React, { Component } from 'react'; -import { Link, NavLink } from 'react-router-dom'; -import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, - InputGroup, Input, InputGroupAddon, InputGroupText, Button, UncontrolledTooltip +import { NavLink } from 'react-router-dom'; +import { + UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, + UncontrolledTooltip } from 'reactstrap'; import PropTypes from 'prop-types'; -import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react'; -import logo from '../../assets/img/brand/logo_siopas.png' -import logo_bmd_denpasar from '../../assets/img/brand/logo_bmd_denpasar.png' import user_logo from '../../assets/img/avatars/user.png' -import sygnet from '../../assets/img/brand/sygnet.svg' -import { Icon, InlineIcon } from '@iconify/react'; -import saveOutline from '@iconify/icons-ion/save-outline'; +import { Icon } from '@iconify/react'; import printOutline from '@iconify/icons-ion/print-outline'; import { - AppHeader + AppHeader } from '@coreui/react'; import { mappify, @@ -23,7 +19,7 @@ import { import { nominatimBaseUrl } from '../../const/MapConst'; const propTypes = { - children: PropTypes.node, + children: PropTypes.node, }; const defaultProps = {}; @@ -31,71 +27,71 @@ const defaultProps = {}; class MapHeader extends Component { - getHeaderMenu = () => { - let u_group = localStorage.getItem('u_group'); - if (u_group == 'kominfo') { - return ( - - Dashboard - - ) - } - else { - return ( - - Dashboard - - ) - } - } - - getLogo = () => { - return ( -
- OSPRO -
- ) - } + getHeaderMenu = () => { + let u_group = localStorage.getItem('u_group'); + if (u_group == 'kominfo') { + return ( + + Dashboard + + ) + } + else { + return ( + + Dashboard + + ) + } + } + + getLogo = () => { + return ( +
+ OSPRO +
+ ) + } render() { - const { children, ...attributes } = this.props; + const { children, ...attributes } = this.props; - return ( - - {/* + {/**/} - { this.getLogo() } + {this.getLogo()} - - + + ) } diff --git a/src/components/PopupContainer/PopupContainer.js b/src/components/PopupContainer/PopupContainer.js index 6b0ef87..428e3b7 100644 --- a/src/components/PopupContainer/PopupContainer.js +++ b/src/components/PopupContainer/PopupContainer.js @@ -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 { {/*
this.showImageFeature(selectedPopupData)}>*/}
- { this.renderImageSlider(selectedPopupData) } + {this.renderImageSlider(selectedPopupData)}
- { this.renderOneRowFeature(popupProperties) } + {this.renderOneRowFeature(popupProperties)}
- { this.renderButtonFooter(selectedPopupData) } + {this.renderButtonFooter(selectedPopupData)}
@@ -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 ( ) : - () + {this.props.activeStateAddGeometry ? + () : + () } Edit Geometry @@ -354,27 +354,27 @@ class PopupContainer extends Component { Delete Feature - { layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") && - <> - - - Show Route - - } + {layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") && + <> + + + Show Route + + } ) } renderImageSlider = (selectedPopupData) => { - if (this.props.popupDataTemp[0].id == selectedPopupData.id) { + if (this.props.popupDataTemp[0].id == selectedPopupData.id) { return ; } else { return @@ -466,13 +466,13 @@ class PopupContainer extends Component {
- { popupDataTemp.map((item, index) => { - return ( { + return ( this.chooseOneFeature(item)}> - - - ) - }) } + + + ) + })}
{this.getFeaturesLabel(item)} {this.getLayerTitle(item)}
{this.getFeaturesLabel(item)} {this.getLayerTitle(item)}
@@ -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
Loading...
} - return( -
- this.setState({alert: false, successAler: false, dangerAlert: false})}> + return ( +
+ this.setState({ alert: false, successAler: false, dangerAlert: false })}> {alertMessage} {this.fillPopupContent()} - { + { this.state.imagePopupVisible && - this.toggleImagePopup()} - imagePopupTitle={this.state.imagePopupTitle ? this.state.imagePopupTitle : 'Feature Image'} - id={this.props.popupDataTemp[0].id} - /> + this.toggleImagePopup()} + imagePopupTitle={this.state.imagePopupTitle ? this.state.imagePopupTitle : 'Feature Image'} + id={this.props.popupDataTemp[0].id} + /> } - { + { this.state.imagePreviewVisible && - + } { this.state.editFeatureVisible && @@ -772,10 +772,10 @@ class PopupContainer extends Component { /> }*/}
- ) + ) + + - - } } diff --git a/src/containers/DefaultLayout/DefaultHeader.js b/src/containers/DefaultLayout/DefaultHeader.js index 1740aaf..c8832ad 100644 --- a/src/containers/DefaultLayout/DefaultHeader.js +++ b/src/containers/DefaultLayout/DefaultHeader.js @@ -1,14 +1,10 @@ import React, { Component } from 'react'; -import { Link, NavLink } from 'react-router-dom'; -import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap'; +import { NavLink } from 'react-router-dom'; +import { Badge, Nav, NavItem } from 'reactstrap'; import PropTypes from 'prop-types'; -import { Menu, Dropdown, Row, Col } from 'antd' -import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react'; +import { Menu, Dropdown } from 'antd' import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE } from '../../const/ApiConst'; -import user_logo from '../../assets/img/avatars/user.png' -import logo_header_adw from '../../assets/img/logo_adyawinsa.jpg' -import logo_header_kit from '../../assets/img/logo_kit.png' -import logo_header_nawakara from '../../assets/img/logo_nawakara.png' + import axios from 'axios'; import './Default.css' const token = window.localStorage.getItem('token'); diff --git a/src/views/Map/Map.js b/src/views/Map/Map.js index a363508..53ad701 100644 --- a/src/views/Map/Map.js +++ b/src/views/Map/Map.js @@ -1,9 +1,11 @@ import React, { Component, Suspense, Fragment } from 'react'; import ReactDOM from 'react-dom'; -import { Container, Col, Row, Button, UncontrolledTooltip, +import { + Container, Col, Row, Button, UncontrolledTooltip, Card, CardBody, - CardHeader } from 'reactstrap'; + CardHeader +} from 'reactstrap'; import './Map.css'; import './Popup.css'; import './CustomScroll.css'; @@ -20,16 +22,16 @@ import OlSourceTileJson from 'ol/source/TileJSON'; import OlLayerGroup from 'ol/layer/Group'; import OlSourceTileWMS from 'ol/source/TileWMS'; import OlSourceImageWMS from 'ol/source/ImageWMS'; -import {fromLonLat, transformExtent, transform} from 'ol/proj'; -import {Vector as VectorSource, XYZ as XYZSource, Cluster} from 'ol/source'; +import { fromLonLat, transformExtent, transform } from 'ol/proj'; +import { Vector as VectorSource, XYZ as XYZSource, Cluster } from 'ol/source'; import Overlay from 'ol/Overlay'; import { Draw, Select, Modify } from 'ol/interaction'; import Feature from 'ol/Feature'; import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl} from 'ol/style'; -import {defaults as defaultControls, MousePosition, ScaleLine} from 'ol/control'; -import {createStringXY, toStringXY} from 'ol/coordinate'; +import { Vector as VectorLayer } from 'ol/layer'; +import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl } from 'ol/style'; +import { defaults as defaultControls, MousePosition, ScaleLine } from 'ol/control'; +import { createStringXY, toStringXY } from 'ol/coordinate'; import GeoJSON from 'ol/format/GeoJSON'; import WMSCapabilities from 'ol/format/WMSCapabilities'; @@ -57,8 +59,10 @@ import DrawingTool from '../../components/DrawingTool'; import ImagePopup from '../../components/ImagePopup'; import ImageSlider from '../../components/ImageSlider'; import RoutingBar from '../../components/RoutingBar'; -import { appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants, - WMS_CAPABILITIES_URL_2 } from '../../const/MapConst.js'; +import { + appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants, + WMS_CAPABILITIES_URL_2 +} from '../../const/MapConst.js'; import { Icon } from '@iconify/react'; import imageOutline from '@iconify/icons-ion/image-outline'; import trashOutline from '@iconify/icons-ion/trash-outline'; @@ -69,14 +73,14 @@ import createOutline from '@iconify/icons-ion/create-outline'; import contractIcon from '@iconify/icons-ion/contract'; import country_indonesia from '../../assets/json/indonesia.json'; import { test, getGeomType, updateMap, getLayerAttribute, getLayerColor, getRandomColor } from '../../const/GeoserverFunc.js'; -import { API_UPDATE_MAP, API_LOAD_MAP, API_LAYER_SEARCH_LABEL, API_GET_CHART_KATEGORI, - USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH } from '../../const/ApiConst.js'; +import { + API_UPDATE_MAP, API_LOAD_MAP, API_LAYER_SEARCH_LABEL, API_GET_CHART_KATEGORI, + USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH +} from '../../const/ApiConst.js'; import { getSalesRoutingApi, getSalesFeatures, getOfficeFeatures, getCustomerFeatures, getEmployeeFeatures, getEmployeeRoutingApi, getWaspangRoutingApi } from '../../const/GeohrApiFunc.js'; import { SALES_FEATURES_STYLE, CUSTOMER_FEATURES_STYLE, OFFICE_FEATURES_STYLE, ROUTE_MAP_STYLES, EMPLOYEE_FEATURES_STYLE, PROJECT_FEATURES_STYLE, WASPANG_FEATURES_STYLE } from '../../const/GeohrMapStyles.js'; import SweetAlert from 'react-bootstrap-sweetalert'; import moment from "moment"; -import salesGeojson from '../../dummy_data/sales.geojson'; -import routeDummy from '../../dummy_data/route2.json'; import { demografiTree, analisaTree } from '../../const/LayerTreeConst.js' import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @@ -221,7 +225,7 @@ else { const baseLayerGroup = new OlLayerGroup({ name: 'Base Layers', layers: [ - osmLayer, + osmLayer, esriLayer ], type: 'baseGroup' @@ -358,13 +362,13 @@ class SiopasMap extends Component { routingBarVisible: false, isSearchingRoute: false, isProcessing: false, - queryBuilderOutput:'', - queryBuilderType:'', - currentQbTree:'', - currentQbType:'', + queryBuilderOutput: '', + queryBuilderType: '', + currentQbTree: '', + currentQbType: '', routeType: '', chosenProyekIds: [], - dataStatusProyek: null, + dataStatusProyek: null, dataPersentaseProyek: null, dataCostProyek: null, dataStatusWaspang: null, @@ -372,23 +376,23 @@ class SiopasMap extends Component { planning: 0, realisasi: 0, status_project: { - good: 0, - warning: 0, - critical: 0 + good: 0, + warning: 0, + critical: 0 }, waspang_status: { - presensi: 0, - absensi: 0 + presensi: 0, + absensi: 0 }, panic_button: 0, - statusRight:true, - proggressBottom:true + statusRight: true, + proggressBottom: true }; this.layers = [ - osmLayer, + osmLayer, ]; - + this.overlay = new Overlay({ element: document.getElementById('popup'), autoPan: true, @@ -411,7 +415,7 @@ class SiopasMap extends Component { }); this.olmap = new OlMap({ - view: new OlView({ + view: new OlView({ center: Indonesia, zoom: zoom, projection: projection @@ -434,7 +438,7 @@ class SiopasMap extends Component { this.olmap.on("singleclick", (evt) => { this.mapOnClick(evt); }); - this.setState({mapProjection: this.olmap.getView().getProjection()}, () => console.log('mapProjection', this.state.mapProjection)); + this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection)); } componentDidUpdate = (prevProps, prevState) => { @@ -468,56 +472,56 @@ class SiopasMap extends Component { getDataUserToProyek = async () => { const { chosenProyekIds } = this.state; let payload = { - "columns": [], - "joins": [ - { - "name": "m_proyek", - "column_join": "proyek_id", - "column_results": [ - "nama", - "biaya", - "color_progress", - "jumlah_pekerja", - "pic", - "mulai_proyek", - "akhir_proyek" - ] - }, - { - "name": "m_subproyek", - "column_join": "subproyek_id", - "column_results": [ - "nama", - "biaya", - "color_progress", - "jumlah_pekerja", - "pic", - "mulai_proyek", - "akhir_proyek" - ] - }, - { - "name": "m_users", - "column_join": "user_id", - "column_results": [ - "name", - "username", - "email", - "phone_number", - "gender" - ] - } - ], - "orders": { - "columns": [ - "id" - ], - "ascending": true + "columns": [], + "joins": [ + { + "name": "m_proyek", + "column_join": "proyek_id", + "column_results": [ + "nama", + "biaya", + "color_progress", + "jumlah_pekerja", + "pic", + "mulai_proyek", + "akhir_proyek" + ] + }, + { + "name": "m_subproyek", + "column_join": "subproyek_id", + "column_results": [ + "nama", + "biaya", + "color_progress", + "jumlah_pekerja", + "pic", + "mulai_proyek", + "akhir_proyek" + ] }, - "paging": { - "start": 0, - "length": 25 + { + "name": "m_users", + "column_join": "user_id", + "column_results": [ + "name", + "username", + "email", + "phone_number", + "gender" + ] } + ], + "orders": { + "columns": [ + "id" + ], + "ascending": true + }, + "paging": { + "start": 0, + "length": 25 + } } if (chosenProyekIds.length > 0) { @@ -534,14 +538,14 @@ class SiopasMap extends Component { method: 'POST', // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') }, body: JSON.stringify(payload) // body data type must match "Content-Type" header } const result = await fetch(USERPROYEK_SEARCH, config).then(response => response.json()).then(res => res); if (result && result.code == 200) { - this.setState({waspangData: result.data}, () => this.getWaspangFeatures()); + this.setState({ waspangData: result.data }, () => this.getWaspangFeatures()); } else { toast.error('Gagal Mengambil Data!!'); } @@ -550,13 +554,13 @@ class SiopasMap extends Component { getChartData = async () => { const { chosenProyekIds } = this.state; let payload = { - "columns": [], - "orders": { - "columns": [ - "id" - ], - "ascending": true - } + "columns": [], + "orders": { + "columns": [ + "id" + ], + "ascending": true + } } if (chosenProyekIds.length > 0) { @@ -573,7 +577,7 @@ class SiopasMap extends Component { method: 'POST', // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') }, body: JSON.stringify(payload) // body data type must match "Content-Type" header } @@ -606,7 +610,7 @@ class SiopasMap extends Component { }, ], }; - this.setState({dataPersentaseProyek: persentaseProyek}); + this.setState({ dataPersentaseProyek: persentaseProyek }); const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : [] const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] @@ -633,7 +637,7 @@ class SiopasMap extends Component { }, ], }; - this.setState({dataCostProyek: costProyek}); + this.setState({ dataCostProyek: costProyek }); const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : [] @@ -657,7 +661,7 @@ class SiopasMap extends Component { }, ], }; - this.setState({dataStatusProyek: statusProyek}); + this.setState({ dataStatusProyek: statusProyek }); } else { toast.error('Gagal Mengambil Data!!'); } @@ -666,16 +670,16 @@ class SiopasMap extends Component { getDailyInfo = async () => { const payload = { "columns": [ - {"name": "created_at","logic_operator": "range","value": `${moment().format('YYYY-MM-DD')} 00:00:00`,"value1": `${moment().format('YYYY-MM-DD')} 23:59:59`,"operator": "AND"} + { "name": "created_at", "logic_operator": "range", "value": `${moment().format('YYYY-MM-DD')} 00:00:00`, "value1": `${moment().format('YYYY-MM-DD')} 23:59:59`, "operator": "AND" } ], - "paging": {"start": 0,"length": -1} + "paging": { "start": 0, "length": -1 } } - + const config = { method: 'POST', // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') }, body: JSON.stringify(payload) // body data type must match "Content-Type" header } @@ -705,7 +709,7 @@ class SiopasMap extends Component { }, ], }; - this.setState({dataStatusWaspang: statusWaspang}); + this.setState({ dataStatusWaspang: statusWaspang }); } @@ -717,15 +721,15 @@ class SiopasMap extends Component { } } - getLayerSearchLabel = async() => { + getLayerSearchLabel = async () => { const param = { method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), } - + try { const result = await fetch(API_LAYER_SEARCH_LABEL, param).then(response => response.json()).then(res => res) - if (result.data){ + if (result.data) { if (result.data.length > 0) { this.setState({ searchLabelData: result.data @@ -734,7 +738,7 @@ class SiopasMap extends Component { } else { } - } catch(err) { + } catch (err) { console.log(err); } } @@ -744,21 +748,21 @@ class SiopasMap extends Component { let layerInfo = []; const param = { method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), } - + try { const result = await fetch(API_GET_CHART_KATEGORI, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { if (result.data.length > 0) { - for(let i=0; i < result.data.length; i++) { + for (let i = 0; i < result.data.length; i++) { let layer_name = result.data[i].layer_name; let layer_title = result.data[i].layer_title; let layer_geom_type = result.data[i].layer_geom_type; let total_features = result.data[i].total_features; - let SLD_URL = `${layerStyleUrl+layer_name}`;; + let SLD_URL = `${layerStyleUrl + layer_name}`;; let reqColor = await getLayerColor(SLD_URL); let color = ''; if (reqColor.success) { @@ -772,11 +776,11 @@ class SiopasMap extends Component { total_features: total_features }); } - this.setState({layerInfo: layerInfo}, () => console.log('layerInfo',this.state.layerInfo)); + this.setState({ layerInfo: layerInfo }, () => console.log('layerInfo', this.state.layerInfo)); } } else { } - } catch(err) { + } catch (err) { console.log(err); } } @@ -799,7 +803,7 @@ class SiopasMap extends Component { this.olmap.getLayers().insertAt(0, item); } else { - this.olmap.getLayers().insertAt(0, item); + this.olmap.getLayers().insertAt(0, item); } } } @@ -858,7 +862,7 @@ class SiopasMap extends Component { if (layer.get('type') == 'layerGroup') { layer.getLayers().forEach((sublayer, i) => { if (sublayer.getVisible()) { - url = sublayer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/json'}); + url = sublayer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, { 'INFO_FORMAT': 'application/json' }); if (url) { promises.push(axios.get(url)); } @@ -874,31 +878,31 @@ class SiopasMap extends Component { console.log('hitGeojson', hitGeojson); } else if (layer.get('source_type') === "wms") { - url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/json'}); + url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, { 'INFO_FORMAT': 'application/json' }); if (url) { promises.push(axios.get(url)); } } } } - } + } } }); if (hitGeojson && hitGeojson.length > 0) { - for (let i=0; i < hitGeojson.length; i++) { + for (let i = 0; i < hitGeojson.length; i++) { let feature = hitGeojson[i]; let feat = { - "type": "Feature", - "id": "", - "geometry": { - "type": "", - "coordinates": [] - }, - "geometry_name": "the_geom", - "properties": {} + "type": "Feature", + "id": "", + "geometry": { + "type": "", + "coordinates": [] + }, + "geometry_name": "the_geom", + "properties": {} } feat.id = feature.id_; @@ -921,7 +925,7 @@ class SiopasMap extends Component { console.log('mapOnClick response promises', response); if (response.data !== undefined) { if (response.data.features.length > 0) { - for(let i=0; i < response.data.features.length; i++) { + for (let i = 0; i < response.data.features.length; i++) { featureGet.push(response.data.features[i]); } } @@ -949,7 +953,7 @@ class SiopasMap extends Component { removeChosenLayer = () => { this.olmap.getLayers().forEach((layer, i) => { if (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer' ) { + if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') { layer.getSource().clear(); this.olmap.removeLayer(layer); } @@ -958,13 +962,13 @@ class SiopasMap extends Component { } openPopupRight() { - this.setState({popupRightVisible: true}, () => this.setActiveListFeature()); + this.setState({ popupRightVisible: true }, () => this.setActiveListFeature()); } closePopupRight() { - this.setState({popupRightVisible: false, popupDataTemp: []}, () => this.setActiveListFeature()); + this.setState({ popupRightVisible: false, popupDataTemp: [] }, () => this.setActiveListFeature()); this.removeChosenLayer(); // selected features - this.setState({editGeometryVisible: false, routingBarVisible: false}); // disable editing when no ChosenLayer on Map + this.setState({ editGeometryVisible: false, routingBarVisible: false }); // disable editing when no ChosenLayer on Map } /*toggleImagePopup() { @@ -972,7 +976,7 @@ class SiopasMap extends Component { }*/ setPopupDataTemp = (feature) => { - this.setState({popupDataTemp: [feature]}, () => this.setActiveListFeature()); + this.setState({ popupDataTemp: [feature] }, () => this.setActiveListFeature()); } reloadPopupData = () => { @@ -982,18 +986,18 @@ class SiopasMap extends Component { setActiveListFeature = () => { if (this.state.popupRightVisible) { if (this.state.popupDataTemp.length === 1) { - this.setState({activeListFeatureId: this.state.popupDataTemp[0].id}, () => { + this.setState({ activeListFeatureId: this.state.popupDataTemp[0].id }, () => { let layerName = this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''; this.getLayerAttribute(layerName); - }) + }) } else { - this.setState({activeListFeatureId: ''}, () => { + this.setState({ activeListFeatureId: '' }, () => { }) } } else { - this.setState({activeListFeatureId: ''}, () => { + this.setState({ activeListFeatureId: '' }, () => { }) } } @@ -1011,11 +1015,11 @@ class SiopasMap extends Component { if (dataMap.zoom == null) { this.setDefaultMap(); } - else if (dataMap.center_x == null && dataMap.center_y == null ) { + else if (dataMap.center_x == null && dataMap.center_y == null) { this.setDefaultMap(); } else { - this.setState({mapZoom: dataMap.zoom, mapCenter: [dataMap.center_x, dataMap.center_y]}); + this.setState({ mapZoom: dataMap.zoom, mapCenter: [dataMap.center_x, dataMap.center_y] }); this.olmap.getView().animate({ zoom: dataMap.zoom, center: [dataMap.center_x, dataMap.center_y] @@ -1026,7 +1030,7 @@ class SiopasMap extends Component { layersToRemove.push(layer); }); if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { + for (let i = 0; i < layersToRemove.length; i++) { this.olmap.removeLayer(layersToRemove[i]); } } @@ -1035,7 +1039,7 @@ class SiopasMap extends Component { let map_layers = dataMap.map_layers; if (map_layers !== undefined) { if (map_layers.length > 0) { - for (let i=0; i < map_layers.length; i++) { + for (let i = 0; i < map_layers.length; i++) { let newLayer = null; if (map_layers[i].layer_type !== 'base') { @@ -1071,7 +1075,7 @@ class SiopasMap extends Component { } } - + this.olmap.addLayer(newLayer); } } @@ -1114,7 +1118,7 @@ class SiopasMap extends Component { */ let confirmation = window.confirm('Are you sure you want to save this map?'); let mapId = MAP_ID; // get from m_group - let mapTitle = localStorage.getItem('u_group')+"_map"; // get from m_group + let mapTitle = localStorage.getItem('u_group') + "_map"; // get from m_group let mapZoom = this.olmap.getView().getZoom(); let mapProjection = this.olmap.getView().getProjection().code_; let mapCenter = this.olmap.getView().getCenter(); @@ -1127,8 +1131,8 @@ class SiopasMap extends Component { let count = 0; if (confirmation) { - this.olmap.getLayers().forEach( async (layer, i) => { - + this.olmap.getLayers().forEach(async (layer, i) => { + layerType = layer.get('type') !== undefined ? layer.get('type') : 'layer'; if (layer.get('name') !== "DrawingLayer" && layer.get('name') !== "ChosenLayer") { @@ -1171,11 +1175,11 @@ class SiopasMap extends Component { layer_type: layerType, layer_geom_type: layerGeomType, layer_source: { - url: appConfig.geoserver_host+'wms', + url: appConfig.geoserver_host + 'wms', params: { - 'LAYERS': appConfig.workspace_name+':'+layer.get('name'), + 'LAYERS': appConfig.workspace_name + ':' + layer.get('name'), 'TILED': true, - 'SLD': layerStyleUrl+layer.get('name') + 'SLD': layerStyleUrl + layer.get('name') }, serverType: 'geoserver', transition: 0, @@ -1200,7 +1204,7 @@ class SiopasMap extends Component { 'center_y': center_y, 'map_layers': mapLayers }; - console.log('requestPayload',requestPayload); + console.log('requestPayload', requestPayload); this.saveMapToApi(requestPayload); } }); @@ -1211,20 +1215,20 @@ class SiopasMap extends Component { const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(requestPayload) } - + try { const result = await fetch(API_UPDATE_MAP, param).then(response => response.json()).then(res => res) - if(result.data){ - console.log('after save',result); - this.setState({alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false}) + if (result.data) { + console.log('after save', result); + this.setState({ alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false }) } else { - this.setState({alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true}) + this.setState({ alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true }) } - } catch(err) { - this.setState({alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true}) + } catch (err) { + this.setState({ alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true }) } } @@ -1232,8 +1236,8 @@ class SiopasMap extends Component { let { editGeometryVisible } = this.state; if (!editGeometryVisible) { this.setState({ - editGeometryVisible: true, - layerNameDraw: selectedPopupData.id, + editGeometryVisible: true, + layerNameDraw: selectedPopupData.id, geomTypeDraw: selectedPopupData.geometry.type }); @@ -1245,14 +1249,14 @@ class SiopasMap extends Component { cancelDraw = () => { this.setState({ - editGeometryVisible: false, - layerNameDraw: '', + editGeometryVisible: false, + layerNameDraw: '', geomTypeDraw: '' }); } toggleActiveStateAddGeometry = () => { - this.setState({activeStateAddGeometry: !this.state.activeStateAddGeometry}); + this.setState({ activeStateAddGeometry: !this.state.activeStateAddGeometry }); } printMap = () => { @@ -1262,8 +1266,8 @@ class SiopasMap extends Component { .then((dataUrl) => { console.log('dataUrl', dataUrl); let link = document.getElementById('image-download'); - link.href = dataUrl; - link.click(); + link.href = dataUrl; + link.click(); toast.success("Success Print Map!") }) .catch(e => toast.error(e.toString())); @@ -1279,11 +1283,11 @@ class SiopasMap extends Component { getLayerAttribute = async (layerName) => { const res = await getLayerAttribute(layerName); - console.log('getLayerAttribute',res); + console.log('getLayerAttribute', res); if (res.success) { if (res.result.data) { if (res.result.data.length > 0) { - this.setState({layer_attribute: res.result.data}, () => { + this.setState({ layer_attribute: res.result.data }, () => { console.log(this.state.layer_attribute); }); } @@ -1295,18 +1299,18 @@ class SiopasMap extends Component { } onCheckOpt = (state, checkedKeys) => { - this.setState({[state]: checkedKeys}); + this.setState({ [state]: checkedKeys }); } setLayer = async (state) => { console.log('setLayer', state); - await this.setState({isProcessing: true}); + await this.setState({ isProcessing: true }); this.closePopupRight(); - + const { checkedKeysSales, checkedKeysCustomer, checkedKeysOffice, checkedKeysDemografi, checkedKeysAnalisa, checkedKeysEmployeeDivision, - salesGroupTree, employeeDivisionTree, queryBuilderOutput, queryBuilderType, checkedKeysProjectTree, projectTree } = this.state; + salesGroupTree, employeeDivisionTree, queryBuilderOutput, queryBuilderType, checkedKeysProjectTree, projectTree } = this.state; let layersToAdd = []; let newLayer = null; let vectorSource = null; @@ -1359,9 +1363,9 @@ class SiopasMap extends Component { project = { type: "FeatureCollection", features: this.projectFeatures - } + } + - if (project && project.features.length > 0) { vectorSource = new VectorSource({ @@ -1396,10 +1400,10 @@ class SiopasMap extends Component { } if (layersToAdd.length > 0) { - for (let i=0; i < layersToAdd.length; i++) { + for (let i = 0; i < layersToAdd.length; i++) { this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - + console.log('check addLayer'); if (i === layersToAdd.length - 1) { let extent = await this.getExtentLayerByName(layersToAdd[i]); @@ -1411,33 +1415,33 @@ class SiopasMap extends Component { } - await this.setState({isProcessing: false}); + await this.setState({ isProcessing: false }); } getChildrenTree = (data) => { data.map((item, index) => { - if (item.children && item.children.length > 0) { - this.getChildrenTree(item.children); - } - else if (item.laporan_plannings && item.laporan_plannings.length > 0) { - if (this.state.checkedKeysProjectTree.includes(item.key)) { - for (let i=0; i < item.laporan_plannings.length; i++) { - console.log('got features!!!!!'); - this.projectFeatures.push({ - "type": "Feature", - "id": `realisasi.${item.laporan_plannings[i].id}`, - "properties": {...item.laporan_plannings[i]}, - "geometry": { - "type": "Point", - "coordinates": [ - item.laporan_plannings[i].lon, - item.laporan_plannings[i].lat - ] - } - }) - } + if (item.children && item.children.length > 0) { + this.getChildrenTree(item.children); + } + else if (item.laporan_plannings && item.laporan_plannings.length > 0) { + if (this.state.checkedKeysProjectTree.includes(item.key)) { + for (let i = 0; i < item.laporan_plannings.length; i++) { + console.log('got features!!!!!'); + this.projectFeatures.push({ + "type": "Feature", + "id": `realisasi.${item.laporan_plannings[i].id}`, + "properties": { ...item.laporan_plannings[i] }, + "geometry": { + "type": "Point", + "coordinates": [ + item.laporan_plannings[i].lon, + item.laporan_plannings[i].lat + ] + } + }) } } + } }); @@ -1447,7 +1451,7 @@ class SiopasMap extends Component { const { waspangData, checkedKeysProjectTree } = this.state; if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { if (waspangData.length > 0) { - for (let i=0; i < waspangData.length; i++) { + for (let i = 0; i < waspangData.length; i++) { let item = waspangData[i]; if (item.last_waypoint) { this.waspangFeatures.push({ @@ -1472,9 +1476,9 @@ class SiopasMap extends Component { }) } } - + console.log('this.waspangFeatures', this.waspangFeatures); - + let layersToAdd = []; let vectorSource = null; let vectorLayer = null; @@ -1483,7 +1487,7 @@ class SiopasMap extends Component { type: "FeatureCollection", features: this.waspangFeatures } - + if (waspang && waspang.features.length > 0) { vectorSource = new VectorSource({ features: new GeoJSON().readFeatures(waspang, { @@ -1491,25 +1495,25 @@ class SiopasMap extends Component { featureProjection: projection // to }) }) - + vectorLayer = new VectorLayer({ name: 'waspangLayer', source_type: 'geojson', source: vectorSource, style: WASPANG_FEATURES_STYLE }); - + layersToAdd.push(vectorLayer); } else { toast.warn('Data waspang tidak ditemukan di project ini'); } - + if (layersToAdd.length > 0) { - for (let i=0; i < layersToAdd.length; i++) { - + for (let i = 0; i < layersToAdd.length; i++) { + this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - + console.log('check addLayer'); if (i === layersToAdd.length - 1) { let extent = await this.getExtentLayerByName(layersToAdd[i]); @@ -1519,7 +1523,7 @@ class SiopasMap extends Component { } } } - + } } @@ -1531,7 +1535,7 @@ class SiopasMap extends Component { this.waspangFeatures = []; this.closePopupRight(); } - + } findChildLayerToRemove = (parentObj) => { @@ -1540,7 +1544,7 @@ class SiopasMap extends Component { if (parentObj.hasOwnProperty('children')) { - for (let i=0; i < parentObj.children.length; i++) { + for (let i = 0; i < parentObj.children.length; i++) { layersToRemove.push(parentObj.children[i].layers.name) } @@ -1565,7 +1569,7 @@ class SiopasMap extends Component { if (checkedKeys.includes(parentObj["key"])) { if (parentObj.hasOwnProperty('children')) { - for (let i=0; i < parentObj.children.length; i++) { + for (let i = 0; i < parentObj.children.length; i++) { newLayer = this.generateLayerWMSByName(parentObj.children[i].layers.name); if (newLayer) { layersToAdd.push(newLayer); @@ -1604,12 +1608,12 @@ class SiopasMap extends Component { if (source_type === 'wms') { let getExt = await fetch(WMS_CAPABILITIES_URL_2).then((response) => { - return response.text(); + return response.text(); }).then((text) => text); let result = new WMSCapabilities().read(getExt); - if (result && result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name+':'+layerName)) { - extent = result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name+':'+layerName).EX_GeographicBoundingBox; + if (result && result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName)) { + extent = result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName).EX_GeographicBoundingBox; } } else if (source_type === 'geojson') { @@ -1628,11 +1632,11 @@ class SiopasMap extends Component { name: layerName, source_type: 'wms', source: new OlSourceTileWMS({ - url: appConfig.geoserver_host+'wms', + url: appConfig.geoserver_host + 'wms', params: { - 'LAYERS': appConfig.workspace_name+':'+layerName, + 'LAYERS': appConfig.workspace_name + ':' + layerName, 'TILED': true, - 'SLD': layerStyleUrl+layerName, + 'SLD': layerStyleUrl + layerName, }, serverType: 'geoserver', transition: 0, @@ -1653,7 +1657,7 @@ class SiopasMap extends Component { } }); if (removeLayers.length > 0) { - for (let i=0; i < removeLayers.length; i++) { + for (let i = 0; i < removeLayers.length; i++) { this.olmap.removeLayer(removeLayers[i]); } } @@ -1668,19 +1672,13 @@ class SiopasMap extends Component { } }); if (removeLayers.length > 0) { - for (let i=0; i < removeLayers.length; i++) { + for (let i = 0; i < removeLayers.length; i++) { this.olmap.removeLayer(removeLayers[i]); } } } - getRoute = () => { - fetch(routeDummy).then((response) => { - response.json().then((result) => { - console.log('getRoute', result); - }) - }); - } + showRoute = (salesRoute) => { const { mapProjection } = this.state; @@ -1763,47 +1761,48 @@ class SiopasMap extends Component { } searchRouting = async (userId, dateString) => { - await this.setState({isSearchingRoute: true, isProcessing: true}); + await this.setState({ isSearchingRoute: true, isProcessing: true }); - const {routeType} = this.state; + const { routeType } = this.state; let routes = null; - + if (routeType === 'waspang') { routes = await getWaspangRoutingApi(userId, dateString); } if (routes) { - this.setState({isSearchingRoute: false, isProcessing: false}, () => this.showRoute(routes)) + this.setState({ isSearchingRoute: false, isProcessing: false }, () => this.showRoute(routes)) } else { - this.setState({isSearchingRoute: false, isProcessing: false}, () => toast.warn("Sorry. Couldn't get user waypoint")); + this.setState({ isSearchingRoute: false, isProcessing: false }, () => toast.warn("Sorry. Couldn't get user waypoint")); } } handleQueryBuilder = (query, type, tree) => { - console.log("query builder "+type, query); - this.setState({ queryBuilderOutput:query, queryBuilderType:type, currentQbTree:tree,currentQbType:type }, () => { - if(type === "Sales"){ + console.log("query builder " + type, query); + this.setState({ queryBuilderOutput: query, queryBuilderType: type, currentQbTree: tree, currentQbType: type }, () => { + if (type === "Sales") { this.setLayer('checkedKeysSales'); - }else if(type === "Customer"){ + } else if (type === "Customer") { this.setLayer('checkedKeysCustomer'); - }else if(type === "Office"){ + } else if (type === "Office") { this.setLayer('checkedKeysOffice'); } }) } handleQbReset = (type) => { - this.setState({ - queryBuilderOutput:'', - queryBuilderType:'', - currentQbTree:'', - currentQbType:'' }, () => { - if(type === "Sales"){ + this.setState({ + queryBuilderOutput: '', + queryBuilderType: '', + currentQbTree: '', + currentQbType: '' + }, () => { + if (type === "Sales") { this.setLayer('checkedKeysSales'); - }else if(type === "Customer"){ + } else if (type === "Customer") { this.setLayer('checkedKeysCustomer'); - }else if(type === "Office"){ + } else if (type === "Office") { this.setLayer('checkedKeysOffice'); } }) @@ -1824,7 +1823,7 @@ class SiopasMap extends Component { } console.log('chosenProyekId', chosenProyekId); - this.setState({chosenProyekIds: chosenProyekId}); + this.setState({ chosenProyekIds: chosenProyekId }); } getChosenProyekId = () => { @@ -1832,12 +1831,12 @@ class SiopasMap extends Component { if (checkedKeysProjectTree.length > 0) { if (checkedKeysProjectTree.includes('project-0')) { - for (let i=0; i < projectTree[0].children.length; i++) { + for (let i = 0; i < projectTree[0].children.length; i++) { this.chosenProyekTemp.push(projectTree[0].children[i].id); } } else { - this.getChosenProyekIdByKey(projectTree[0].children); + this.getChosenProyekIdByKey(projectTree[0].children); } } @@ -1848,7 +1847,7 @@ class SiopasMap extends Component { getChosenProyekIdByKey = (dataTree) => { const { checkedKeysProjectTree } = this.state; - for (let i=0; i < dataTree.length; i++) { + for (let i = 0; i < dataTree.length; i++) { if (checkedKeysProjectTree.includes(dataTree[i].key)) { if (dataTree[i].parent_id === undefined) { this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek) @@ -1869,63 +1868,63 @@ class SiopasMap extends Component { } toggleStatusRight = () => { - this.setState({statusRight:!this.state.statusRight}); + this.setState({ statusRight: !this.state.statusRight }); } toggleProggresBottom = () => { - this.setState({proggressBottom:!this.state.proggressBottom}) + this.setState({ proggressBottom: !this.state.proggressBottom }) } closeStatusRight = () => { - this.setState({statusRight:false}); + this.setState({ statusRight: false }); } closeProggressBottom = () => { - this.setState({proggressBottom:false}) + this.setState({ proggressBottom: false }) } render() { - const { alert, successAlert, dangerAlert, messageAlert, + const { alert, successAlert, dangerAlert, messageAlert, dataStatusProyek, dataPersentaseProyek, dataCostProyek, dataStatusWaspang } = this.state; return (
- this.saveMap()} + this.saveMap()} printMap={() => this.printMap()} onLogout={(e) => this.signOut(e)} /> - - - - - -
- - this.setState({alert: false, successAlert: false, dangerAlert: false})}> - {messageAlert} - - - { this.state.isProcessing && -
- -
- } + + + + + +
+ + this.setState({ alert: false, successAlert: false, dangerAlert: false })}> + {messageAlert} + + + {this.state.isProcessing && +
+ +
+ } -
{this.state.popupRightVisible ? - {this.state.popupRightVisible ? + this.setPopupDataTemp(feature)} layerName={this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''} @@ -1951,15 +1950,15 @@ class SiopasMap extends Component { layer_attribute={this.state.layer_attribute} searchLabelData={this.state.searchLabelData} layerInfo={this.state.layerInfo} - toggleRoutingBarVisible={() => this.setState({routingBarVisible: !this.state.routingBarVisible})} - setRouteType={(routeType) => this.setState({routeType: routeType})} - /> : null + toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })} + setRouteType={(routeType) => this.setState({ routeType: routeType })} + /> : null }
 - - + this.setState({salesGroupTree: data})} - setEmployeeDivisionTree={(data) => this.setState({employeeDivisionTree: data})} + setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })} + setEmployeeDivisionTree={(data) => this.setState({ employeeDivisionTree: data })} showRoute={(route) => this.showRoute(route)} removeLayerByName={(layerName) => this.removeLayerByName(layerName)} - setIsProcessing={(data) => this.setState({isProcessing: data})} + setIsProcessing={(data) => this.setState({ isProcessing: data })} handleQueryBuilder={this.handleQueryBuilder} currentQbTree={this.state.currentQbTree} currentQbType={this.state.currentQbType} handleQbReset={this.handleQbReset} projectTree={this.state.projectTree} - setProjectTree={(data) => this.setState({projectTree: data})} + setProjectTree={(data) => this.setState({ projectTree: data })} proggressBottom={this.state.proggressBottom} toggleStatusRight={this.toggleStatusRight} toggleProggresBottom={this.toggleProggresBottom} @@ -2010,7 +2009,7 @@ class SiopasMap extends Component { { this.state.editGeometryVisible && this.cancelDraw()} @@ -2020,38 +2019,38 @@ class SiopasMap extends Component { /> } - { this.state.routingBarVisible && - this.setState({routingBarVisible: !this.state.routingBarVisible})} + toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })} popupDataTemp={this.state.popupDataTemp} setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} searchRouting={(userId, dateString) => this.searchRouting(userId, dateString)} isSearchingRoute={this.state.isSearchingRoute} - setRouteType={(routeType) => this.setState({routeType: routeType})} + setRouteType={(routeType) => this.setState({ routeType: routeType })} /> } {/**/}
- - - {this.state.proggressBottom ? - - - - - Persentase Progress Proyek x - - - {/* + + {this.state.proggressBottom ? + + + + + Persentase Progress Proyek x + + + {/* console.log('click persentase linechart')} /> */} - - - - - - - Progress Cost Perencanaan dan Realisasi x - - - {/* + + + + + + Progress Cost Perencanaan dan Realisasi x + + + {/* */} - - - - - : null} - - {this.state.statusRight ? - - - - - - Status Proyek x - - - {/* */} - {/* + + + + : null} + + {this.state.statusRight ? + + + + + + Status Proyek x + + + {/* */} + {/* */} - - - - - - - Status Pengawas Lapangan x - - - {/* + + + + + + Status Pengawas Lapangan x + + + {/* */} - - - - - {/* + + + + {/* console.log('click chart')} /> */} - - : null } - - -
+ + : null} + + +
); } } diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js index c39bb51..1104ecc 100644 --- a/src/views/Pages/Login/Login.js +++ b/src/views/Pages/Login/Login.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import Slider from "react-slick"; @@ -19,24 +18,12 @@ import { InputGroupAddon, InputGroupText, Row, - UncontrolledAlert, Alert, - Carousel, - CarouselIndicators, - CarouselCaption, - CarouselItem, - CarouselControl } from 'reactstrap'; -import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE, ROLE_SEARCH } from '../../../const/ApiConst.js'; -import { appConfig, reloadConstants } from '../../../const/MapConst.js'; -import { APP_NAME } from '../../../const/AppConst.js' -import moment from "moment" +import { USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, ROLE_SEARCH } from '../../../const/ApiConst.js'; + import axios from 'axios'; import { NotificationContainer, NotificationManager } from 'react-notifications'; -import logo_login_adw from '../../../assets/img/logo_adyawinsa.jpg' -import logo_login_kit from '../../../assets/img/logo_kit.png' -import logo_login_nawakara from '../../../assets/img/logo_nawakara.png' -import logo_login_si from '../../../assets/img/logo-surveyor-indonesia.png' import logo_ospro from '../../../assets/img/OSPRO.png' const antIcon = ;