ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

remove code not used

pull/1/head
farhantock 1 year ago
parent
c8e8bd46c3
commit
b103cc1b65
5 changed files with 562 additions and 584 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/MapHeader/MapHeader.js
  2. 80
      src/components/PopupContainer/PopupContainer.js
  3. 12
      src/containers/DefaultLayout/DefaultHeader.js
  4. 289
      src/views/Map/Map.js
  5. 17
      src/views/Pages/Login/Login.js

26
src/components/MapHeader/MapHeader.js
Unescape View File

@ -1,17 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, import {
InputGroup, Input, InputGroupAddon, InputGroupText, Button, UncontrolledTooltip UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem,
UncontrolledTooltip
} from 'reactstrap'; } from 'reactstrap';
import PropTypes from 'prop-types'; 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 user_logo from '../../assets/img/avatars/user.png'
import sygnet from '../../assets/img/brand/sygnet.svg' import { Icon } from '@iconify/react';
import { Icon, InlineIcon } from '@iconify/react';
import saveOutline from '@iconify/icons-ion/save-outline';
import printOutline from '@iconify/icons-ion/print-outline'; import printOutline from '@iconify/icons-ion/print-outline';
import { import {
AppHeader AppHeader
@ -51,8 +47,8 @@ class MapHeader extends Component {
getLogo = () => { getLogo = () => {
return ( return (
<div style={{fontWeight: 'bold', fontSize: 30, fontFamily: 'Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif', textAlign: 'center', marginLeft: 25, marginRight: 20}}> <div style={{ fontWeight: 'bold', fontSize: 30, fontFamily: 'Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif', textAlign: 'center', marginLeft: 25, marginRight: 20 }}>
<span style={{color: '#4472C4'}}>OS</span><span style={{color: '#ED7D31'}}>PRO</span> <span style={{ color: '#4472C4' }}>OS</span><span style={{ color: '#ED7D31' }}>PRO</span>
</div> </div>
) )
} }
@ -67,10 +63,10 @@ class MapHeader extends Component {
minimized={{ src: logo, width: 30, height: 35, alt: 'SIOPAS Logo' }} minimized={{ src: logo, width: 30, height: 35, alt: 'SIOPAS Logo' }}
/>*/} />*/}
{ this.getLogo() } {this.getLogo()}
<Nav className="d-md-down-none" navbar> <Nav className="d-md-down-none" navbar>
{ this.getHeaderMenu() } {this.getHeaderMenu()}
</Nav> </Nav>
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
{/*<InputGroup> {/*<InputGroup>
@ -106,7 +102,7 @@ class MapHeader extends Component {
<div> <div>
<NavItem className="d-md-down-none" id="printMap"> <NavItem className="d-md-down-none" id="printMap">
<NavLink to="#" className="nav-link" onClick={() => this.props.printMap() }><Icon icon={printOutline} width={15} height={15} /></NavLink> <NavLink to="#" className="nav-link" onClick={() => this.props.printMap()}><Icon icon={printOutline} width={15} height={15} /></NavLink>
</NavItem> </NavItem>
<UncontrolledTooltip placement="bottom" target="printMap"> <UncontrolledTooltip placement="bottom" target="printMap">
Print Map Print Map
@ -129,7 +125,7 @@ class MapHeader extends Component {
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem> <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>*/} <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>*/}
<DropdownItem header tag="div" className="text-center">{ localStorage.getItem('user_name') }</DropdownItem> <DropdownItem header tag="div" className="text-center">{localStorage.getItem('user_name')}</DropdownItem>
<DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem> <DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu> </DropdownMenu>
</UncontrolledDropdown> </UncontrolledDropdown>

80
src/components/PopupContainer/PopupContainer.js
Unescape View File

@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import {Vector as VectorLayer} from 'ol/layer'; import { Vector as VectorLayer } from 'ol/layer';
import {Vector as VectorSource} from 'ol/source'; import { Vector as VectorSource } from 'ol/source';
import Feature from 'ol/Feature'; import Feature from 'ol/Feature';
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
import { Circle as CircleStyle, Fill, Icon as IconOl, Stroke, Style, Text } from 'ol/style'; 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 moment from "moment"
import { deleteFeature, getImagePopup, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js'; import { deleteFeature, getImagePopup, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js';
import { formatLabel, hideAttr, dateColumns, DATE_TIME_FORMAT } from '../../const/CustomFunc.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 { API_UPLOAD_IMAGE, BASE_IMAGE, BASE_SIMPRO } from '../../const/ApiConst.js'
import routeDummy from '../../dummy_data/route2.json';
class PopupContainer extends Component { class PopupContainer extends Component {
@ -69,7 +69,7 @@ class PopupContainer extends Component {
} }
componentDidMount() { componentDidMount() {
this.setState({isReady: true}); this.setState({ isReady: true });
} }
/*componentDidMount() { /*componentDidMount() {
@ -91,9 +91,9 @@ class PopupContainer extends Component {
matchLayerAttribute = (propKey) => { matchLayerAttribute = (propKey) => {
const { layer_attribute } = this.props; 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 !== 'the_geom') {
if (layer_attribute[i].attribute_label !== null && layer_attribute[i].attribute_label !== '' ) { if (layer_attribute[i].attribute_label !== null && layer_attribute[i].attribute_label !== '') {
if (propKey == layer_attribute[i].attribute) { if (propKey == layer_attribute[i].attribute) {
return layer_attribute[i].attribute_label; return layer_attribute[i].attribute_label;
} }
@ -234,18 +234,18 @@ class PopupContainer extends Component {
</div> </div>
{/*<div className="image-slider" onClick={() => this.showImageFeature(selectedPopupData)}>*/} {/*<div className="image-slider" onClick={() => this.showImageFeature(selectedPopupData)}>*/}
<div className="image-popup-container"> <div className="image-popup-container">
{ this.renderImageSlider(selectedPopupData) } {this.renderImageSlider(selectedPopupData)}
</div> </div>
<div className="popup-body custom-scroll"> <div className="popup-body custom-scroll">
<table className="table popup-table"> <table className="table popup-table">
<tbody> <tbody>
{ this.renderOneRowFeature(popupProperties) } {this.renderOneRowFeature(popupProperties)}
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="popup-footer"> <div className="popup-footer">
<div className="btn-group"> <div className="btn-group">
{ this.renderButtonFooter(selectedPopupData) } {this.renderButtonFooter(selectedPopupData)}
</div> </div>
</div> </div>
</div> </div>
@ -261,7 +261,7 @@ class PopupContainer extends Component {
for (let key in popupProperties) { for (let key in popupProperties) {
if (typeof(popupProperties[key]) === 'object') { if (typeof (popupProperties[key]) === 'object') {
for (let prop in popupProperties[key]) { for (let prop in popupProperties[key]) {
modPopupProperties[prop] = popupProperties[key][prop]; modPopupProperties[prop] = popupProperties[key][prop];
} }
@ -271,7 +271,7 @@ class PopupContainer extends Component {
} }
for (let key in modPopupProperties) { for (let key in modPopupProperties) {
if (typeof(modPopupProperties[key]) === 'object') { if (typeof (modPopupProperties[key]) === 'object') {
delete modPopupProperties[key]; delete modPopupProperties[key];
} }
} }
@ -310,7 +310,7 @@ class PopupContainer extends Component {
renderButtonFooter = (selectedPopupData) => { renderButtonFooter = (selectedPopupData) => {
let layer_name = selectedPopupData.id && selectedPopupData.id.substr(0, selectedPopupData.id.indexOf(".")); let layer_name = selectedPopupData.id && selectedPopupData.id.substr(0, selectedPopupData.id.indexOf("."));
return( return (
<Fragment> <Fragment>
<Button color="success" size="sm" outline onClick={() => this.showImageFeature(selectedPopupData)} id="showImageFeature"> <Button color="success" size="sm" outline onClick={() => this.showImageFeature(selectedPopupData)} id="showImageFeature">
<Icon icon={imageOutline} width={15} height={15} /> <Icon icon={imageOutline} width={15} height={15} />
@ -336,7 +336,7 @@ class PopupContainer extends Component {
<UncontrolledTooltip placement="bottom" target="editFeature"> <UncontrolledTooltip placement="bottom" target="editFeature">
Edit Attribute Edit Attribute
</UncontrolledTooltip> </UncontrolledTooltip>
{ this.props.activeStateAddGeometry ? {this.props.activeStateAddGeometry ?
(<Button disabled color="success" size="sm" outline id="editGeometry"> (<Button disabled color="success" size="sm" outline id="editGeometry">
<Icon icon={pencilIcon} width={15} height={15} /> <Icon icon={pencilIcon} width={15} height={15} />
</Button>) : </Button>) :
@ -354,7 +354,7 @@ class PopupContainer extends Component {
Delete Feature Delete Feature
</UncontrolledTooltip> </UncontrolledTooltip>
{ layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") && {layer_name && (layer_name === "m_sales" || layer_name === "m_employee" || layer_name === "m_waspang" || layer_name === "m_presensi") &&
<> <>
<Button color="success" size="sm" outline <Button color="success" size="sm" outline
onClick={() => { onClick={() => {
@ -368,7 +368,7 @@ class PopupContainer extends Component {
<UncontrolledTooltip placement="bottom" target="showRoute"> <UncontrolledTooltip placement="bottom" target="showRoute">
Show Route Show Route
</UncontrolledTooltip> </UncontrolledTooltip>
</> } </>}
</Fragment> </Fragment>
) )
} }
@ -466,13 +466,13 @@ class PopupContainer extends Component {
<div className="popup-body custom-scroll"> <div className="popup-body custom-scroll">
<table className="table table-hover popup-table"> <table className="table table-hover popup-table">
<tbody> <tbody>
{ popupDataTemp.map((item, index) => { {popupDataTemp.map((item, index) => {
return (<tr key={index} className="popup-row-list-feature" return (<tr key={index} className="popup-row-list-feature"
onClick={() => this.chooseOneFeature(item)}> onClick={() => this.chooseOneFeature(item)}>
<td>{this.getFeaturesLabel(item)}</td> <td>{this.getFeaturesLabel(item)}</td>
<td> <Badge style={{backgroundColor: this.getLayerColor(item)}} className={this.getLayerTitleTextColor(this.getLayerColor(item))}>{this.getLayerTitle(item)}</Badge> </td> <td> <Badge style={{ backgroundColor: this.getLayerColor(item) }} className={this.getLayerTitleTextColor(this.getLayerColor(item))}>{this.getLayerTitle(item)}</Badge> </td>
</tr>) </tr>)
}) } })}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -492,7 +492,7 @@ class PopupContainer extends Component {
showImageFeature = (selectedPopupData) => { showImageFeature = (selectedPopupData) => {
console.log('show images', selectedPopupData); console.log('show images', selectedPopupData);
this.setState({imagePopupTitle: selectedPopupData.id}); this.setState({ imagePopupTitle: selectedPopupData.id });
this.toggleImagePopup(); this.toggleImagePopup();
} }
@ -506,25 +506,25 @@ class PopupContainer extends Component {
} }
toggleImagePopup = () => { toggleImagePopup = () => {
this.setState({imagePopupVisible: !this.state.imagePopupVisible}); this.setState({ imagePopupVisible: !this.state.imagePopupVisible });
} }
handleUploadImage = async () => { handleUploadImage = async () => {
const {photo_feature, image_feature, imagePopupTitle} = this.state const { photo_feature, image_feature, imagePopupTitle } = this.state
const category = imagePopupTitle.split("."); const category = imagePopupTitle.split(".");
let type = category[0] let type = category[0]
let id = category[1] let id = category[1]
let imageType = '' let imageType = ''
if(type==="m_office"){ if (type === "m_office") {
imageType="office" imageType = "office"
}else if(type==="m_sales"){ } else if (type === "m_sales") {
imageType="m_sales" imageType = "m_sales"
}else if(type==="m_employee"){ } else if (type === "m_employee") {
imageType="employee" imageType = "employee"
}else{ } else {
imageType="customer" imageType = "customer"
} }
const formData = new FormData() const formData = new FormData()
formData.append('ref_id', id) formData.append('ref_id', id)
@ -538,9 +538,9 @@ class PopupContainer extends Component {
} }
toggleImagePreview = async param => { toggleImagePreview = async param => {
if(param == "upload"){ if (param == "upload") {
const result = await this.handleUploadImage() const result = await this.handleUploadImage()
console.log("response upload image",result); console.log("response upload image", result);
if (result == undefined) { if (result == undefined) {
alert('Upload Failed'); alert('Upload Failed');
return; return;
@ -551,14 +551,14 @@ class PopupContainer extends Component {
this.toggleImagePopup(); this.toggleImagePopup();
} }
else { else {
console.log('err',result); console.log('err', result);
alert(result.data); alert(result.data);
return; return;
} }
} }
} }
this.setState({imagePreviewVisible: !this.state.imagePreviewVisible}); this.setState({ imagePreviewVisible: !this.state.imagePreviewVisible });
} }
showTable = (selectedPopupData) => { showTable = (selectedPopupData) => {
@ -566,16 +566,16 @@ class PopupContainer extends Component {
} }
toggleShowTable = () => { toggleShowTable = () => {
this.setState({mapTableVisible: !this.state.mapTableVisible}) this.setState({ mapTableVisible: !this.state.mapTableVisible })
} }
editFeature = (selectedPopupData) => { editFeature = (selectedPopupData) => {
console.log('edit feature', selectedPopupData); console.log('edit feature', selectedPopupData);
this.setState({selectedPopupData: selectedPopupData}, () => this.toggleEditFeature()); this.setState({ selectedPopupData: selectedPopupData }, () => this.toggleEditFeature());
} }
toggleEditFeature = () => { toggleEditFeature = () => {
this.setState({editFeatureVisible: !this.state.editFeatureVisible}) this.setState({ editFeatureVisible: !this.state.editFeatureVisible })
} }
/*goToFeature = (selectedPopupData) => { /*goToFeature = (selectedPopupData) => {
@ -662,7 +662,7 @@ class PopupContainer extends Component {
} }
toggleEditGeometry = () => { toggleEditGeometry = () => {
this.setState({editGeometryVisible: !this.state.editGeometryVisible}) this.setState({ editGeometryVisible: !this.state.editGeometryVisible })
} }
deleteFeature = async (selectedPopupData) => { deleteFeature = async (selectedPopupData) => {
@ -714,9 +714,9 @@ class PopupContainer extends Component {
if (!isReady) { if (!isReady) {
return <div>Loading...</div> return <div>Loading...</div>
} }
return( return (
<div> <div>
<SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={alertMessage} onConfirm={() => this.setState({alert: false, successAler: false, dangerAlert: false})}> <SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={alertMessage} onConfirm={() => this.setState({ alert: false, successAler: false, dangerAlert: false })}>
{alertMessage} {alertMessage}
</SweetAlert> </SweetAlert>

12
src/containers/DefaultLayout/DefaultHeader.js
Unescape View File

@ -1,14 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap'; import { Badge, Nav, NavItem } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Menu, Dropdown, Row, Col } from 'antd' import { Menu, Dropdown } from 'antd'
import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE } from '../../const/ApiConst'; 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 axios from 'axios';
import './Default.css' import './Default.css'
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');

289
src/views/Map/Map.js
Unescape View File

@ -1,9 +1,11 @@
import React, { Component, Suspense, Fragment } from 'react'; import React, { Component, Suspense, Fragment } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Container, Col, Row, Button, UncontrolledTooltip, import {
Container, Col, Row, Button, UncontrolledTooltip,
Card, Card,
CardBody, CardBody,
CardHeader } from 'reactstrap'; CardHeader
} from 'reactstrap';
import './Map.css'; import './Map.css';
import './Popup.css'; import './Popup.css';
import './CustomScroll.css'; import './CustomScroll.css';
@ -20,16 +22,16 @@ import OlSourceTileJson from 'ol/source/TileJSON';
import OlLayerGroup from 'ol/layer/Group'; import OlLayerGroup from 'ol/layer/Group';
import OlSourceTileWMS from 'ol/source/TileWMS'; import OlSourceTileWMS from 'ol/source/TileWMS';
import OlSourceImageWMS from 'ol/source/ImageWMS'; import OlSourceImageWMS from 'ol/source/ImageWMS';
import {fromLonLat, transformExtent, transform} from 'ol/proj'; import { fromLonLat, transformExtent, transform } from 'ol/proj';
import {Vector as VectorSource, XYZ as XYZSource, Cluster} from 'ol/source'; import { Vector as VectorSource, XYZ as XYZSource, Cluster } from 'ol/source';
import Overlay from 'ol/Overlay'; import Overlay from 'ol/Overlay';
import { Draw, Select, Modify } from 'ol/interaction'; import { Draw, Select, Modify } from 'ol/interaction';
import Feature from 'ol/Feature'; import Feature from 'ol/Feature';
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
import {Vector as VectorLayer} from 'ol/layer'; import { Vector as VectorLayer } from 'ol/layer';
import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl} from 'ol/style'; import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl } from 'ol/style';
import {defaults as defaultControls, MousePosition, ScaleLine} from 'ol/control'; import { defaults as defaultControls, MousePosition, ScaleLine } from 'ol/control';
import {createStringXY, toStringXY} from 'ol/coordinate'; import { createStringXY, toStringXY } from 'ol/coordinate';
import GeoJSON from 'ol/format/GeoJSON'; import GeoJSON from 'ol/format/GeoJSON';
import WMSCapabilities from 'ol/format/WMSCapabilities'; import WMSCapabilities from 'ol/format/WMSCapabilities';
@ -57,8 +59,10 @@ import DrawingTool from '../../components/DrawingTool';
import ImagePopup from '../../components/ImagePopup'; import ImagePopup from '../../components/ImagePopup';
import ImageSlider from '../../components/ImageSlider'; import ImageSlider from '../../components/ImageSlider';
import RoutingBar from '../../components/RoutingBar'; import RoutingBar from '../../components/RoutingBar';
import { appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants, import {
WMS_CAPABILITIES_URL_2 } from '../../const/MapConst.js'; 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 { Icon } from '@iconify/react';
import imageOutline from '@iconify/icons-ion/image-outline'; import imageOutline from '@iconify/icons-ion/image-outline';
import trashOutline from '@iconify/icons-ion/trash-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 contractIcon from '@iconify/icons-ion/contract';
import country_indonesia from '../../assets/json/indonesia.json'; import country_indonesia from '../../assets/json/indonesia.json';
import { test, getGeomType, updateMap, getLayerAttribute, getLayerColor, getRandomColor } from '../../const/GeoserverFunc.js'; 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, import {
USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH } from '../../const/ApiConst.js'; 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 { 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 { 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 SweetAlert from 'react-bootstrap-sweetalert';
import moment from "moment"; 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 { demografiTree, analisaTree } from '../../const/LayerTreeConst.js'
import { ToastContainer, toast } from 'react-toastify'; import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
@ -358,10 +362,10 @@ class SiopasMap extends Component {
routingBarVisible: false, routingBarVisible: false,
isSearchingRoute: false, isSearchingRoute: false,
isProcessing: false, isProcessing: false,
queryBuilderOutput:'', queryBuilderOutput: '',
queryBuilderType:'', queryBuilderType: '',
currentQbTree:'', currentQbTree: '',
currentQbType:'', currentQbType: '',
routeType: '', routeType: '',
chosenProyekIds: [], chosenProyekIds: [],
dataStatusProyek: null, dataStatusProyek: null,
@ -381,8 +385,8 @@ class SiopasMap extends Component {
absensi: 0 absensi: 0
}, },
panic_button: 0, panic_button: 0,
statusRight:true, statusRight: true,
proggressBottom:true proggressBottom: true
}; };
this.layers = [ this.layers = [
@ -434,7 +438,7 @@ class SiopasMap extends Component {
this.olmap.on("singleclick", (evt) => { this.olmap.on("singleclick", (evt) => {
this.mapOnClick(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) => { componentDidUpdate = (prevProps, prevState) => {
@ -534,14 +538,14 @@ class SiopasMap extends Component {
method: 'POST', // *GET, POST, PUT, DELETE, etc. method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: { headers: {
'Content-Type': 'application/json', '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 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); const result = await fetch(USERPROYEK_SEARCH, config).then(response => response.json()).then(res => res);
if (result && result.code == 200) { if (result && result.code == 200) {
this.setState({waspangData: result.data}, () => this.getWaspangFeatures()); this.setState({ waspangData: result.data }, () => this.getWaspangFeatures());
} else { } else {
toast.error('Gagal Mengambil Data!!'); toast.error('Gagal Mengambil Data!!');
} }
@ -573,7 +577,7 @@ class SiopasMap extends Component {
method: 'POST', // *GET, POST, PUT, DELETE, etc. method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: { headers: {
'Content-Type': 'application/json', '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 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 labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : []
const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] 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) : [] 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 { } else {
toast.error('Gagal Mengambil Data!!'); toast.error('Gagal Mengambil Data!!');
} }
@ -666,16 +670,16 @@ class SiopasMap extends Component {
getDailyInfo = async () => { getDailyInfo = async () => {
const payload = { const payload = {
"columns": [ "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 = { const config = {
method: 'POST', // *GET, POST, PUT, DELETE, etc. method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: { headers: {
'Content-Type': 'application/json', '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 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 = { const param = {
method: 'GET', method: 'GET',
header: JSON.stringify({'Content-Type': 'application/json'}), header: JSON.stringify({ 'Content-Type': 'application/json' }),
} }
try { try {
const result = await fetch(API_LAYER_SEARCH_LABEL, param).then(response => response.json()).then(res => res) 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) { if (result.data.length > 0) {
this.setState({ this.setState({
searchLabelData: result.data searchLabelData: result.data
@ -734,7 +738,7 @@ class SiopasMap extends Component {
} else { } else {
} }
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
} }
@ -744,21 +748,21 @@ class SiopasMap extends Component {
let layerInfo = []; let layerInfo = [];
const param = { const param = {
method: 'GET', method: 'GET',
header: JSON.stringify({'Content-Type': 'application/json'}), header: JSON.stringify({ 'Content-Type': 'application/json' }),
} }
try { try {
const result = await fetch(API_GET_CHART_KATEGORI, param).then(response => response.json()).then(res => res) 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) { 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_name = result.data[i].layer_name;
let layer_title = result.data[i].layer_title; let layer_title = result.data[i].layer_title;
let layer_geom_type = result.data[i].layer_geom_type; let layer_geom_type = result.data[i].layer_geom_type;
let total_features = result.data[i].total_features; 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 reqColor = await getLayerColor(SLD_URL);
let color = ''; let color = '';
if (reqColor.success) { if (reqColor.success) {
@ -772,11 +776,11 @@ class SiopasMap extends Component {
total_features: total_features 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 { } else {
} }
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
} }
@ -858,7 +862,7 @@ class SiopasMap extends Component {
if (layer.get('type') == 'layerGroup') { if (layer.get('type') == 'layerGroup') {
layer.getLayers().forEach((sublayer, i) => { layer.getLayers().forEach((sublayer, i) => {
if (sublayer.getVisible()) { 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) { if (url) {
promises.push(axios.get(url)); promises.push(axios.get(url));
} }
@ -874,7 +878,7 @@ class SiopasMap extends Component {
console.log('hitGeojson', hitGeojson); console.log('hitGeojson', hitGeojson);
} }
else if (layer.get('source_type') === "wms") { 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) { if (url) {
promises.push(axios.get(url)); promises.push(axios.get(url));
} }
@ -887,7 +891,7 @@ class SiopasMap extends Component {
if (hitGeojson && hitGeojson.length > 0) { 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 feature = hitGeojson[i];
let feat = { let feat = {
@ -921,7 +925,7 @@ class SiopasMap extends Component {
console.log('mapOnClick response promises', response); console.log('mapOnClick response promises', response);
if (response.data !== undefined) { if (response.data !== undefined) {
if (response.data.features.length > 0) { 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]); featureGet.push(response.data.features[i]);
} }
} }
@ -949,7 +953,7 @@ class SiopasMap extends Component {
removeChosenLayer = () => { removeChosenLayer = () => {
this.olmap.getLayers().forEach((layer, i) => { this.olmap.getLayers().forEach((layer, i) => {
if (layer) { if (layer) {
if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer' ) { if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') {
layer.getSource().clear(); layer.getSource().clear();
this.olmap.removeLayer(layer); this.olmap.removeLayer(layer);
} }
@ -958,13 +962,13 @@ class SiopasMap extends Component {
} }
openPopupRight() { openPopupRight() {
this.setState({popupRightVisible: true}, () => this.setActiveListFeature()); this.setState({ popupRightVisible: true }, () => this.setActiveListFeature());
} }
closePopupRight() { closePopupRight() {
this.setState({popupRightVisible: false, popupDataTemp: []}, () => this.setActiveListFeature()); this.setState({ popupRightVisible: false, popupDataTemp: [] }, () => this.setActiveListFeature());
this.removeChosenLayer(); // selected features 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() { /*toggleImagePopup() {
@ -972,7 +976,7 @@ class SiopasMap extends Component {
}*/ }*/
setPopupDataTemp = (feature) => { setPopupDataTemp = (feature) => {
this.setState({popupDataTemp: [feature]}, () => this.setActiveListFeature()); this.setState({ popupDataTemp: [feature] }, () => this.setActiveListFeature());
} }
reloadPopupData = () => { reloadPopupData = () => {
@ -982,18 +986,18 @@ class SiopasMap extends Component {
setActiveListFeature = () => { setActiveListFeature = () => {
if (this.state.popupRightVisible) { if (this.state.popupRightVisible) {
if (this.state.popupDataTemp.length === 1) { 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('.')) : ''; let layerName = this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : '';
this.getLayerAttribute(layerName); this.getLayerAttribute(layerName);
}) })
} }
else { else {
this.setState({activeListFeatureId: ''}, () => { this.setState({ activeListFeatureId: '' }, () => {
}) })
} }
} }
else { else {
this.setState({activeListFeatureId: ''}, () => { this.setState({ activeListFeatureId: '' }, () => {
}) })
} }
} }
@ -1011,11 +1015,11 @@ class SiopasMap extends Component {
if (dataMap.zoom == null) { if (dataMap.zoom == null) {
this.setDefaultMap(); this.setDefaultMap();
} }
else if (dataMap.center_x == null && dataMap.center_y == null ) { else if (dataMap.center_x == null && dataMap.center_y == null) {
this.setDefaultMap(); this.setDefaultMap();
} }
else { 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({ this.olmap.getView().animate({
zoom: dataMap.zoom, zoom: dataMap.zoom,
center: [dataMap.center_x, dataMap.center_y] center: [dataMap.center_x, dataMap.center_y]
@ -1026,7 +1030,7 @@ class SiopasMap extends Component {
layersToRemove.push(layer); layersToRemove.push(layer);
}); });
if (layersToRemove.length > 0) { 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]); this.olmap.removeLayer(layersToRemove[i]);
} }
} }
@ -1035,7 +1039,7 @@ class SiopasMap extends Component {
let map_layers = dataMap.map_layers; let map_layers = dataMap.map_layers;
if (map_layers !== undefined) { if (map_layers !== undefined) {
if (map_layers.length > 0) { 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; let newLayer = null;
if (map_layers[i].layer_type !== 'base') { if (map_layers[i].layer_type !== 'base') {
@ -1114,7 +1118,7 @@ class SiopasMap extends Component {
*/ */
let confirmation = window.confirm('Are you sure you want to save this map?'); let confirmation = window.confirm('Are you sure you want to save this map?');
let mapId = MAP_ID; // get from m_group 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 mapZoom = this.olmap.getView().getZoom();
let mapProjection = this.olmap.getView().getProjection().code_; let mapProjection = this.olmap.getView().getProjection().code_;
let mapCenter = this.olmap.getView().getCenter(); let mapCenter = this.olmap.getView().getCenter();
@ -1127,7 +1131,7 @@ class SiopasMap extends Component {
let count = 0; let count = 0;
if (confirmation) { 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'; layerType = layer.get('type') !== undefined ? layer.get('type') : 'layer';
@ -1171,11 +1175,11 @@ class SiopasMap extends Component {
layer_type: layerType, layer_type: layerType,
layer_geom_type: layerGeomType, layer_geom_type: layerGeomType,
layer_source: { layer_source: {
url: appConfig.geoserver_host+'wms', url: appConfig.geoserver_host + 'wms',
params: { params: {
'LAYERS': appConfig.workspace_name+':'+layer.get('name'), 'LAYERS': appConfig.workspace_name + ':' + layer.get('name'),
'TILED': true, 'TILED': true,
'SLD': layerStyleUrl+layer.get('name') 'SLD': layerStyleUrl + layer.get('name')
}, },
serverType: 'geoserver', serverType: 'geoserver',
transition: 0, transition: 0,
@ -1200,7 +1204,7 @@ class SiopasMap extends Component {
'center_y': center_y, 'center_y': center_y,
'map_layers': mapLayers 'map_layers': mapLayers
}; };
console.log('requestPayload',requestPayload); console.log('requestPayload', requestPayload);
this.saveMapToApi(requestPayload); this.saveMapToApi(requestPayload);
} }
}); });
@ -1211,20 +1215,20 @@ class SiopasMap extends Component {
const param = { const param = {
method: 'POST', method: 'POST',
header: JSON.stringify({'Content-Type': 'application/json'}), header: JSON.stringify({ 'Content-Type': 'application/json' }),
body: JSON.stringify(requestPayload) body: JSON.stringify(requestPayload)
} }
try { try {
const result = await fetch(API_UPDATE_MAP, param).then(response => response.json()).then(res => res) const result = await fetch(API_UPDATE_MAP, param).then(response => response.json()).then(res => res)
if(result.data){ if (result.data) {
console.log('after save',result); console.log('after save', result);
this.setState({alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false}) this.setState({ alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false })
} else { } 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) { } catch (err) {
this.setState({alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true}) this.setState({ alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true })
} }
} }
@ -1252,7 +1256,7 @@ class SiopasMap extends Component {
} }
toggleActiveStateAddGeometry = () => { toggleActiveStateAddGeometry = () => {
this.setState({activeStateAddGeometry: !this.state.activeStateAddGeometry}); this.setState({ activeStateAddGeometry: !this.state.activeStateAddGeometry });
} }
printMap = () => { printMap = () => {
@ -1279,11 +1283,11 @@ class SiopasMap extends Component {
getLayerAttribute = async (layerName) => { getLayerAttribute = async (layerName) => {
const res = await getLayerAttribute(layerName); const res = await getLayerAttribute(layerName);
console.log('getLayerAttribute',res); console.log('getLayerAttribute', res);
if (res.success) { if (res.success) {
if (res.result.data) { if (res.result.data) {
if (res.result.data.length > 0) { 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); console.log(this.state.layer_attribute);
}); });
} }
@ -1295,13 +1299,13 @@ class SiopasMap extends Component {
} }
onCheckOpt = (state, checkedKeys) => { onCheckOpt = (state, checkedKeys) => {
this.setState({[state]: checkedKeys}); this.setState({ [state]: checkedKeys });
} }
setLayer = async (state) => { setLayer = async (state) => {
console.log('setLayer', state); console.log('setLayer', state);
await this.setState({isProcessing: true}); await this.setState({ isProcessing: true });
this.closePopupRight(); this.closePopupRight();
@ -1396,7 +1400,7 @@ class SiopasMap extends Component {
} }
if (layersToAdd.length > 0) { 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 this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map
@ -1411,7 +1415,7 @@ class SiopasMap extends Component {
} }
await this.setState({isProcessing: false}); await this.setState({ isProcessing: false });
} }
getChildrenTree = (data) => { getChildrenTree = (data) => {
@ -1421,12 +1425,12 @@ class SiopasMap extends Component {
} }
else if (item.laporan_plannings && item.laporan_plannings.length > 0) { else if (item.laporan_plannings && item.laporan_plannings.length > 0) {
if (this.state.checkedKeysProjectTree.includes(item.key)) { if (this.state.checkedKeysProjectTree.includes(item.key)) {
for (let i=0; i < item.laporan_plannings.length; i++) { for (let i = 0; i < item.laporan_plannings.length; i++) {
console.log('got features!!!!!'); console.log('got features!!!!!');
this.projectFeatures.push({ this.projectFeatures.push({
"type": "Feature", "type": "Feature",
"id": `realisasi.${item.laporan_plannings[i].id}`, "id": `realisasi.${item.laporan_plannings[i].id}`,
"properties": {...item.laporan_plannings[i]}, "properties": { ...item.laporan_plannings[i] },
"geometry": { "geometry": {
"type": "Point", "type": "Point",
"coordinates": [ "coordinates": [
@ -1447,7 +1451,7 @@ class SiopasMap extends Component {
const { waspangData, checkedKeysProjectTree } = this.state; const { waspangData, checkedKeysProjectTree } = this.state;
if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) {
if (waspangData.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]; let item = waspangData[i];
if (item.last_waypoint) { if (item.last_waypoint) {
this.waspangFeatures.push({ this.waspangFeatures.push({
@ -1506,7 +1510,7 @@ class SiopasMap extends Component {
} }
if (layersToAdd.length > 0) { 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 this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map
@ -1540,7 +1544,7 @@ class SiopasMap extends Component {
if (parentObj.hasOwnProperty('children')) { 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) layersToRemove.push(parentObj.children[i].layers.name)
} }
@ -1565,7 +1569,7 @@ class SiopasMap extends Component {
if (checkedKeys.includes(parentObj["key"])) { if (checkedKeys.includes(parentObj["key"])) {
if (parentObj.hasOwnProperty('children')) { 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); newLayer = this.generateLayerWMSByName(parentObj.children[i].layers.name);
if (newLayer) { if (newLayer) {
layersToAdd.push(newLayer); layersToAdd.push(newLayer);
@ -1608,8 +1612,8 @@ class SiopasMap extends Component {
}).then((text) => text); }).then((text) => text);
let result = new WMSCapabilities().read(getExt); let result = new WMSCapabilities().read(getExt);
if (result && result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name+':'+layerName)) { 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; extent = result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName).EX_GeographicBoundingBox;
} }
} }
else if (source_type === 'geojson') { else if (source_type === 'geojson') {
@ -1628,11 +1632,11 @@ class SiopasMap extends Component {
name: layerName, name: layerName,
source_type: 'wms', source_type: 'wms',
source: new OlSourceTileWMS({ source: new OlSourceTileWMS({
url: appConfig.geoserver_host+'wms', url: appConfig.geoserver_host + 'wms',
params: { params: {
'LAYERS': appConfig.workspace_name+':'+layerName, 'LAYERS': appConfig.workspace_name + ':' + layerName,
'TILED': true, 'TILED': true,
'SLD': layerStyleUrl+layerName, 'SLD': layerStyleUrl + layerName,
}, },
serverType: 'geoserver', serverType: 'geoserver',
transition: 0, transition: 0,
@ -1653,7 +1657,7 @@ class SiopasMap extends Component {
} }
}); });
if (removeLayers.length > 0) { 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]); this.olmap.removeLayer(removeLayers[i]);
} }
} }
@ -1668,19 +1672,13 @@ class SiopasMap extends Component {
} }
}); });
if (removeLayers.length > 0) { 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]); this.olmap.removeLayer(removeLayers[i]);
} }
} }
} }
getRoute = () => {
fetch(routeDummy).then((response) => {
response.json().then((result) => {
console.log('getRoute', result);
})
});
}
showRoute = (salesRoute) => { showRoute = (salesRoute) => {
const { mapProjection } = this.state; const { mapProjection } = this.state;
@ -1763,9 +1761,9 @@ class SiopasMap extends Component {
} }
searchRouting = async (userId, dateString) => { 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; let routes = null;
if (routeType === 'waspang') { if (routeType === 'waspang') {
@ -1773,21 +1771,21 @@ class SiopasMap extends Component {
} }
if (routes) { if (routes) {
this.setState({isSearchingRoute: false, isProcessing: false}, () => this.showRoute(routes)) this.setState({ isSearchingRoute: false, isProcessing: false }, () => this.showRoute(routes))
} }
else { 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) => { handleQueryBuilder = (query, type, tree) => {
console.log("query builder "+type, query); console.log("query builder " + type, query);
this.setState({ queryBuilderOutput:query, queryBuilderType:type, currentQbTree:tree,currentQbType:type }, () => { this.setState({ queryBuilderOutput: query, queryBuilderType: type, currentQbTree: tree, currentQbType: type }, () => {
if(type === "Sales"){ if (type === "Sales") {
this.setLayer('checkedKeysSales'); this.setLayer('checkedKeysSales');
}else if(type === "Customer"){ } else if (type === "Customer") {
this.setLayer('checkedKeysCustomer'); this.setLayer('checkedKeysCustomer');
}else if(type === "Office"){ } else if (type === "Office") {
this.setLayer('checkedKeysOffice'); this.setLayer('checkedKeysOffice');
} }
}) })
@ -1795,15 +1793,16 @@ class SiopasMap extends Component {
handleQbReset = (type) => { handleQbReset = (type) => {
this.setState({ this.setState({
queryBuilderOutput:'', queryBuilderOutput: '',
queryBuilderType:'', queryBuilderType: '',
currentQbTree:'', currentQbTree: '',
currentQbType:'' }, () => { currentQbType: ''
if(type === "Sales"){ }, () => {
if (type === "Sales") {
this.setLayer('checkedKeysSales'); this.setLayer('checkedKeysSales');
}else if(type === "Customer"){ } else if (type === "Customer") {
this.setLayer('checkedKeysCustomer'); this.setLayer('checkedKeysCustomer');
}else if(type === "Office"){ } else if (type === "Office") {
this.setLayer('checkedKeysOffice'); this.setLayer('checkedKeysOffice');
} }
}) })
@ -1824,7 +1823,7 @@ class SiopasMap extends Component {
} }
console.log('chosenProyekId', chosenProyekId); console.log('chosenProyekId', chosenProyekId);
this.setState({chosenProyekIds: chosenProyekId}); this.setState({ chosenProyekIds: chosenProyekId });
} }
getChosenProyekId = () => { getChosenProyekId = () => {
@ -1832,7 +1831,7 @@ class SiopasMap extends Component {
if (checkedKeysProjectTree.length > 0) { if (checkedKeysProjectTree.length > 0) {
if (checkedKeysProjectTree.includes('project-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); this.chosenProyekTemp.push(projectTree[0].children[i].id);
} }
} }
@ -1848,7 +1847,7 @@ class SiopasMap extends Component {
getChosenProyekIdByKey = (dataTree) => { getChosenProyekIdByKey = (dataTree) => {
const { checkedKeysProjectTree } = this.state; 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 (checkedKeysProjectTree.includes(dataTree[i].key)) {
if (dataTree[i].parent_id === undefined) { if (dataTree[i].parent_id === undefined) {
this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek) this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek)
@ -1869,19 +1868,19 @@ class SiopasMap extends Component {
} }
toggleStatusRight = () => { toggleStatusRight = () => {
this.setState({statusRight:!this.state.statusRight}); this.setState({ statusRight: !this.state.statusRight });
} }
toggleProggresBottom = () => { toggleProggresBottom = () => {
this.setState({proggressBottom:!this.state.proggressBottom}) this.setState({ proggressBottom: !this.state.proggressBottom })
} }
closeStatusRight = () => { closeStatusRight = () => {
this.setState({statusRight:false}); this.setState({ statusRight: false });
} }
closeProggressBottom = () => { closeProggressBottom = () => {
this.setState({proggressBottom:false}) this.setState({ proggressBottom: false })
} }
render() { render() {
@ -1895,7 +1894,7 @@ class SiopasMap extends Component {
printMap={() => this.printMap()} printMap={() => this.printMap()}
onLogout={(e) => this.signOut(e)} onLogout={(e) => this.signOut(e)}
/> />
<Container fluid style={{top: 50, position: 'absolute', overflow: 'hidden'}}> <Container fluid style={{ top: 50, position: 'absolute', overflow: 'hidden' }}>
<Row> <Row>
<Col md={this.state.statusRight ? 9 : 12} className="not-left-col"> <Col md={this.state.statusRight ? 9 : 12} className="not-left-col">
<Row> <Row>
@ -1912,11 +1911,11 @@ class SiopasMap extends Component {
draggable draggable
pauseOnHover pauseOnHover
/> />
<SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={messageAlert} onConfirm={() => this.setState({alert: false, successAlert: false, dangerAlert: false})}> <SweetAlert show={alert} success={successAlert} danger={dangerAlert} title={messageAlert} onConfirm={() => this.setState({ alert: false, successAlert: false, dangerAlert: false })}>
{messageAlert} {messageAlert}
</SweetAlert> </SweetAlert>
{ this.state.isProcessing && {this.state.isProcessing &&
<div className="loader-container"> <div className="loader-container">
<Loader <Loader
type="TailSpin" type="TailSpin"
@ -1933,7 +1932,7 @@ class SiopasMap extends Component {
visible={this.state.popupRightVisible} visible={this.state.popupRightVisible}
mask={false} mask={false}
width={360} width={360}
style={{ marginRight: 15, height:this.state.proggressBottom ? `50vh` : `100vh`, position: 'absolute'}} style={{ marginRight: 15, height: this.state.proggressBottom ? `50vh` : `100vh`, position: 'absolute' }}
getContainer={false} getContainer={false}
> >
<div>{this.state.popupRightVisible ? <div>{this.state.popupRightVisible ?
@ -1951,14 +1950,14 @@ class SiopasMap extends Component {
layer_attribute={this.state.layer_attribute} layer_attribute={this.state.layer_attribute}
searchLabelData={this.state.searchLabelData} searchLabelData={this.state.searchLabelData}
layerInfo={this.state.layerInfo} layerInfo={this.state.layerInfo}
toggleRoutingBarVisible={() => this.setState({routingBarVisible: !this.state.routingBarVisible})} toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })}
setRouteType={(routeType) => this.setState({routeType: routeType})} setRouteType={(routeType) => this.setState({ routeType: routeType })}
/> : null /> : null
}</div> }</div>
</Drawer> </Drawer>
<MapProvider map={this.olmap}> <MapProvider map={this.olmap}>
<Map className="map" id="map"/> <Map className="map" id="map" />
<MapToolbar <MapToolbar
className="no-print" className="no-print"
olmap={this.olmap} olmap={this.olmap}
@ -1990,17 +1989,17 @@ class SiopasMap extends Component {
checkedKeysProjectTree={this.state.checkedKeysProjectTree} checkedKeysProjectTree={this.state.checkedKeysProjectTree}
salesGroupTree={this.state.salesGroupTree} salesGroupTree={this.state.salesGroupTree}
employeeDivisionTree={this.state.employeeDivisionTree} employeeDivisionTree={this.state.employeeDivisionTree}
setSalesGroupTree={(data) => this.setState({salesGroupTree: data})} setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })}
setEmployeeDivisionTree={(data) => this.setState({employeeDivisionTree: data})} setEmployeeDivisionTree={(data) => this.setState({ employeeDivisionTree: data })}
showRoute={(route) => this.showRoute(route)} showRoute={(route) => this.showRoute(route)}
removeLayerByName={(layerName) => this.removeLayerByName(layerName)} removeLayerByName={(layerName) => this.removeLayerByName(layerName)}
setIsProcessing={(data) => this.setState({isProcessing: data})} setIsProcessing={(data) => this.setState({ isProcessing: data })}
handleQueryBuilder={this.handleQueryBuilder} handleQueryBuilder={this.handleQueryBuilder}
currentQbTree={this.state.currentQbTree} currentQbTree={this.state.currentQbTree}
currentQbType={this.state.currentQbType} currentQbType={this.state.currentQbType}
handleQbReset={this.handleQbReset} handleQbReset={this.handleQbReset}
projectTree={this.state.projectTree} projectTree={this.state.projectTree}
setProjectTree={(data) => this.setState({projectTree: data})} setProjectTree={(data) => this.setState({ projectTree: data })}
proggressBottom={this.state.proggressBottom} proggressBottom={this.state.proggressBottom}
toggleStatusRight={this.toggleStatusRight} toggleStatusRight={this.toggleStatusRight}
toggleProggresBottom={this.toggleProggresBottom} toggleProggresBottom={this.toggleProggresBottom}
@ -2020,15 +2019,15 @@ class SiopasMap extends Component {
/> />
} }
{ this.state.routingBarVisible && {this.state.routingBarVisible &&
<RoutingBar <RoutingBar
salesName="test" salesName="test"
toggleRoutingBarVisible={() => this.setState({routingBarVisible: !this.state.routingBarVisible})} toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })}
popupDataTemp={this.state.popupDataTemp} popupDataTemp={this.state.popupDataTemp}
setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)}
searchRouting={(userId, dateString) => this.searchRouting(userId, dateString)} searchRouting={(userId, dateString) => this.searchRouting(userId, dateString)}
isSearchingRoute={this.state.isSearchingRoute} isSearchingRoute={this.state.isSearchingRoute}
setRouteType={(routeType) => this.setState({routeType: routeType})} setRouteType={(routeType) => this.setState({ routeType: routeType })}
/> />
} }
@ -2045,10 +2044,10 @@ class SiopasMap extends Component {
</Row> </Row>
{this.state.proggressBottom ? {this.state.proggressBottom ?
<Row> <Row>
<Col md={6} style={{paddingRight: 0}}> <Col md={6} style={{ paddingRight: 0 }}>
<Card className="remove-gap-bs-card" style={{height: 'calc(100vh - 50px - (100vh / 2))'}}> <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 50px - (100vh / 2))' }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Persentase Progress Proyek</span> <span onClick={this.closeProggressBottom} style={{float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Persentase Progress Proyek</span> <span onClick={this.closeProggressBottom} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{/* <Line {/* <Line
@ -2086,10 +2085,10 @@ class SiopasMap extends Component {
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col md={6} style={{paddingLeft: 0}}> <Col md={6} style={{ paddingLeft: 0 }}>
<Card className="remove-gap-bs-card" style={{height: 'calc(100vh - 50px - (100vh / 2))'}}> <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 50px - (100vh / 2))' }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Progress Cost Perencanaan dan Realisasi</span> <span onClick={this.closeProggressBottom} style={{marginRight:'7px',float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Progress Cost Perencanaan dan Realisasi</span> <span onClick={this.closeProggressBottom} style={{ marginRight: '7px', float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{/* <Line {/* <Line
@ -2130,9 +2129,9 @@ class SiopasMap extends Component {
<Col md={3} className="not-left-col"> <Col md={3} className="not-left-col">
<Row> <Row>
<Col md={12}> <Col md={12}>
<Card className="remove-gap-bs-card" style={{height: 'calc(100vh - 40px - (100vh / 2))'}}> <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 40px - (100vh / 2))' }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Status Proyek</span> <span onClick={this.closeStatusRight} style={{float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Status Proyek</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{/* <PieChart data={dataStatusProyek || defaultStatusProyek} /> */} {/* <PieChart data={dataStatusProyek || defaultStatusProyek} /> */}
@ -2152,9 +2151,9 @@ class SiopasMap extends Component {
</Card> </Card>
</Col> </Col>
<Col md={12}> <Col md={12}>
<Card className="remove-gap-bs-card" style={{height: 'calc(100vh - 40px - (100vh / 2))'}}> <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 40px - (100vh / 2))' }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Status Pengawas Lapangan</span> <span onClick={this.closeStatusRight} style={{float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Status Pengawas Lapangan</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{/* <Pie {/* <Pie
@ -2209,7 +2208,7 @@ class SiopasMap extends Component {
handleClickChart={() => console.log('click chart')} handleClickChart={() => console.log('click chart')}
/> */} /> */}
</Col> </Col>
: null } : null}
</Row> </Row>
</Container> </Container>
</div> </div>

17
src/views/Pages/Login/Login.js
Unescape View File

@ -1,5 +1,4 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"; import Slider from "react-slick";
@ -19,24 +18,12 @@ import {
InputGroupAddon, InputGroupAddon,
InputGroupText, InputGroupText,
Row, Row,
UncontrolledAlert,
Alert, Alert,
Carousel,
CarouselIndicators,
CarouselCaption,
CarouselItem,
CarouselControl
} from 'reactstrap'; } from 'reactstrap';
import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE, ROLE_SEARCH } from '../../../const/ApiConst.js'; import { USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, 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 axios from 'axios'; import axios from 'axios';
import { NotificationContainer, NotificationManager } from 'react-notifications'; 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' import logo_ospro from '../../../assets/img/OSPRO.png'
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />; const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

Write Preview
Loading…
Cancel
Save