From 8edf0f7baba5f2582c05bf91fb5d90c169a6addf Mon Sep 17 00:00:00 2001 From: root Date: Mon, 27 Nov 2023 13:24:30 +0700 Subject: [PATCH 1/4] update url --- src/const/ApiConst.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js index 99d1c34..bf1993e 100644 --- a/src/const/ApiConst.js +++ b/src/const/ApiConst.js @@ -116,7 +116,7 @@ export const TOKEN_ADW = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxMjAyIiwiZXhwIjoxNjkxODMwNDkzfQ.DvBQIOZsdFndWsliPCZT65Y6G5Xx4vWBKz8Rhe7rvRA"; // export let BASE_OSPRO = "https://ospro-api.ospro.id"; -export let BASE_OSPRO = "https://konstruksi-api.ospro.id"; +export let BASE_OSPRO = "https://project-api.ospro.id"; // export let BASE_OSPRO = "http://localhost:8444/adw-backend"; // export let BASE_OSPRO = "http://103.73.125.81:8444"; // ip public adw export let BASE_SIMPRO_LUMEN = `${BASE_OSPRO}/api`; From e13e9486766e05ef3f9a30bcdf48909ac57a0c4a Mon Sep 17 00:00:00 2001 From: root Date: Tue, 5 Dec 2023 14:16:44 +0700 Subject: [PATCH 2/4] change url to project --- src/views/Dashboard/DashboardProjectCarousell.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Dashboard/DashboardProjectCarousell.js b/src/views/Dashboard/DashboardProjectCarousell.js index 5d37ea0..90098cd 100644 --- a/src/views/Dashboard/DashboardProjectCarousell.js +++ b/src/views/Dashboard/DashboardProjectCarousell.js @@ -1004,7 +1004,7 @@ const DashboardProject = (args) => { // ); // }); const slides = dummyData.map((item, index) => { - const URL_GANTT = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${item.project.gantt.gantt_id}&proyek_id=${item.project.id}&token=${token}&ro=1`; + const URL_GANTT = `https://project-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${item.project.gantt.gantt_id}&proyek_id=${item.project.id}&token=${token}&ro=1`; return ( setAnimating(true)} From dd26f568159e1d8bd8f4e704cd5b6ac2de028181 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 13 Dec 2023 20:55:42 +0700 Subject: [PATCH 3/4] url for project --- src/views/Dashboard/DashboardCustomer.js | 2 +- src/views/Dashboard/DashboardProject.js | 2 +- src/views/SimproV2/Gantt/GanttFrame.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/Dashboard/DashboardCustomer.js b/src/views/Dashboard/DashboardCustomer.js index 37d0f0d..a8a5ec8 100644 --- a/src/views/Dashboard/DashboardCustomer.js +++ b/src/views/Dashboard/DashboardCustomer.js @@ -47,7 +47,7 @@ const DashboardCustomer = (props) => { } } const { PROJECT_ID, GANTT_ID, SCURVE } = useParams(); - const URL_GANTT = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; + const URL_GANTT = `https://project-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; const mapRef = useRef() const [projectName, setProjectName] = useState(""); const [projectManagerName, setProjectManagerName] = useState(''); diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js index 6f19294..854a732 100644 --- a/src/views/Dashboard/DashboardProject.js +++ b/src/views/Dashboard/DashboardProject.js @@ -72,7 +72,7 @@ const DashboardProject = () => { }, }; const { PROJECT_ID, GANTT_ID, SCURVE } = useParams(); - const URL_GANTT = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; + const URL_GANTT = `https://project-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; const mapRef = useRef(); const [projectName, setProjectName] = useState(""); const [projectManagerName, setProjectManagerName] = useState(""); diff --git a/src/views/SimproV2/Gantt/GanttFrame.js b/src/views/SimproV2/Gantt/GanttFrame.js index 5fb6987..238e833 100644 --- a/src/views/SimproV2/Gantt/GanttFrame.js +++ b/src/views/SimproV2/Gantt/GanttFrame.js @@ -20,7 +20,7 @@ const GanttFrame = React.memo((props) => { } const history = useHistory(); const { versionGanttId, idProject, ro, timestamp } = props; - const iframeSrc = `https://konstruksi-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}×tamp=${timestamp}`; + const iframeSrc = `https://project-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}×tamp=${timestamp}`; const [batchEntityData, setBatchEntityData] = useState(null); useEffect(() => { From 6e8800590858781f3c94f98e245f701c6a7c8ed6 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 18 Dec 2023 11:10:17 +0700 Subject: [PATCH 4/4] resolve conflict --- src/appredux/modules/map/actions.js | 5 - src/components/AddFeature/AddFeature.js | 78 +- src/components/AdmTree/AdmTree.js | 1225 +++++---- src/components/AdmTree/AdmTree_backup.js | 523 ---- src/components/BaseMap/BaseMap.js | 49 +- .../CreateNewLayer/CreateNewLayer.js | 214 +- src/components/DailyInfo/DailyInfo.js | 128 +- src/components/DailyInfo/DialogBottom.js | 336 ++- src/components/DataTable/DataTable.js | 487 ++-- .../DataTableEditDialog/DataTable.js | 406 ++- .../DefaultImageSlider/DefaultImageSlider.js | 117 +- src/components/DrawingTool/DrawingTool.js | 484 ++-- src/components/EditFeature/EditFeature.js | 131 +- .../EditTableColumn/EditTableColumn.js | 165 +- .../EditTableColumn/EditTableColumn_backup.js | 165 +- src/components/ImagePopup/ImagePopup.js | 85 +- src/components/ImageSlider/ImageSlider.js | 94 +- src/components/LayerTreeAdm/LayerTreeAdm.js | 3 - .../LayerTreeAdm/LayerTreeGeoHR_salesver.js | 186 +- .../MapLayerStyles/MapLayerStyles.js | 31 +- src/components/MapLeftContent/index.js | 84 +- src/components/MapLegend/MapLegend.js | 19 +- src/components/MapRightContent/index.js | 59 +- src/components/MapTable/MapTable.js | 958 +++---- src/components/MapTable/MapTable_backup.js | 607 ----- src/components/MapTable/MapTable_backup2.js | 898 ------- src/components/MapTable2/MapTable.js | 1041 ++++---- src/components/MapTable2/MapTable_backup.js | 607 ----- src/components/MapTable2/MapTable_backup2.js | 898 ------- src/components/MapToolbar/MapToolbar.js | 321 +-- .../MapToolbar/MapToolbar_backup.js | 1690 ------------ .../MapToolbar_backup/MapToolbar.css | 180 -- .../MapToolbar_backup/MapToolbar.js | 1941 -------------- .../MapToolbar_backup/MapToolbar_backup.js | 1690 ------------ src/components/MapToolbar_backup/package.json | 6 - src/components/PopupButtonActions/index.js | 5 +- .../PopupContainer/PopupContainer.js | 101 +- .../PopupContainer/PopupContainer_backup.js | 423 --- src/components/RoutingBar/RoutingBar.js | 98 +- src/components/RoutingBarV2/index.js | 4 +- .../SearchFeatures/SearchFeatures.js | 464 ++-- src/const/ApiConst.js | 7 +- src/const/GeohrApiFunc.js | 333 +-- src/const/GeoserverFunc.js | 795 +++--- src/const/i18n.js | 5 +- src/const/interceptorApi.js | 3 - src/containers/DefaultLayout/DefaultHeader.js | 2 - src/serviceWorker.js | 14 +- src/services/api/base.js | 37 +- .../api/modules/map_monitoring/index.js | 112 +- src/services/api/modules/project/index.js | 3 - .../ControlMonitoringGantt/GanttDhtmlx2.js | 2 - src/views/ControlMonitoringGantt/index.js | 14 +- src/views/Dashboard/DashboardBOD.js | 4 +- src/views/Dashboard/DashboardCustomer.js | 406 ++- src/views/Dashboard/DashboardProject.js | 431 ++- .../Dashboard/DashboardProjectCarousell.js | 15 +- src/views/Layers/Layer.js | 655 +++-- src/views/Layers/Layers.js | 136 +- src/views/Map/Map.js | 171 +- src/views/Map/Map_16.js | 685 +---- src/views/Map/Map_backup.js | 844 ------ src/views/MapMonitoring/index.js | 43 - src/views/Map_backup/CustomScroll.css | 19 - src/views/Map_backup/Map.css | 119 - src/views/Map_backup/Map.js | 2337 ----------------- src/views/Map_backup/Map_backup.js | 844 ------ src/views/Map_backup/Popup.css | 86 - src/views/Map_backup/package.json | 6 - src/views/Map_backup/react-geo.css | 360 --- src/views/Master/ConfigAlert/DialogForm.js | 75 +- src/views/Master/MasterAbsensi/index.js | 2 - .../Master/MasterBroadcast/DialogDetail.js | 2 - .../Master/MasterBroadcast/DialogForm.js | 12 +- src/views/Master/MasterBroadcast/index.js | 5 - src/views/Master/MasterCustomer/DialogForm.js | 56 +- .../Master/MasterCustomer/SettingCustomer.js | 199 +- src/views/Master/MasterCustomer/index.js | 16 +- src/views/Master/MasterCuti/index.js | 141 +- src/views/Master/MasterLembur/DialogForm.js | 257 +- src/views/Master/MasterLembur/index.js | 160 +- src/views/Master/MasterMenu/DialogForm.js | 1 - src/views/Master/MasterOffice/DialogForm.js | 12 - src/views/Master/MasterOffice/Map.js | 3 - .../Master/MasterOffice/SettingOffice.js | 354 ++- .../Master/MasterOfficeHours/DialogForm.js | 524 ++-- src/views/Master/MasterOfficeHours/index.js | 117 +- .../Master/MasterOfficeHours/index_sales.js | 17 +- src/views/Master/MasterRoles/DialogForm.js | 2 +- .../Master/MasterRoles/DialogMenuRoles.js | 4 - src/views/Master/MasterTask/DialogForm.js | 101 +- src/views/Master/MasterTask/index.js | 125 +- src/views/Master/MasterTipeKaryawan/index.js | 95 +- src/views/Master/ProjectPhase/DialogForm.js | 1 - .../Master/ProjectPhase/DialogFormInitial.js | 108 +- src/views/Master/ProjectPhase/index.js | 1 - src/views/Master/Proyek/DialogForm.js | 215 +- src/views/Master/Proyek/DialogFormPlanning.js | 49 +- src/views/Master/Proyek/DialogFormSub.js | 94 +- src/views/Master/Proyek/DialogMap.js | 282 +- src/views/Master/Proyek/SubProyekComp.js | 105 +- src/views/Master/Proyek/index.js | 2 - src/views/Master/RoleProject/index.js | 1 - src/views/Master/SubProyek/DialogForm.js | 3 - src/views/Master/SubProyek/index.js | 2 - src/views/Master/UserAdmin/index.js | 411 ++- src/views/Pages/Login/Login.js.save | 345 --- .../Report/ControlMonitoring/DialogEdit.js | 73 +- .../Report/ControlMonitoring/DialogForm.js | 29 +- .../ControlMonitoring/DialogUpdateProgress.js | 141 +- .../Report/ControlMonitoring/DialogView.js | 83 +- src/views/Report/ControlMonitoring/Map.js | 3 - src/views/Report/ControlMonitoring/index.js | 544 ++-- src/views/Report/Planning/DialogEdit.js | 73 +- src/views/Report/Planning/DialogForm.js | 29 +- src/views/Report/Planning/Map.js | 3 - src/views/Report/Planning/index.js | 248 +- src/views/Report/alert/DialogForm.js | 47 +- src/views/Report/alert/index.js | 349 ++- src/views/Report/k3/index.js | 3 - src/views/SimproV2/ChecklistK3/DialogForm.js | 1 - src/views/SimproV2/Closing/DialogForm.js | 6 - .../CreatedProyek/.DialogHierarchy.js.swp | Bin 16384 -> 0 bytes .../SimproV2/CreatedProyek/AssignK3Project.js | 69 +- .../CreatedProyek/DataRequestMaterial.js | 1 - .../CreatedProyek/DialogAssignCust.js | 1 - .../CreatedProyek/DialogFormAnalysis.js | 102 +- .../SimproV2/CreatedProyek/DialogFormDoc.js | 102 +- .../CreatedProyek/DialogFormResource.js | 109 +- .../SimproV2/CreatedProyek/DialogGantt.js | 84 +- .../SimproV2/CreatedProyek/DialogHierarchy.js | 29 +- .../CreatedProyek/DialogInitDocument.js | 6 +- .../SimproV2/CreatedProyek/DialogTools.js | 25 +- .../SimproV2/CreatedProyek/DialogUserGantt.js | 1 - .../SimproV2/CreatedProyek/FormDocument.js | 12 +- .../CreatedProyek/FormFolderDocument.js | 5 +- .../CreatedProyek/FormRequestMaterial.js | 21 +- .../CreatedProyek/ImportActivity/index.js | 4 +- .../SimproV2/CreatedProyek/ViewProject.js | 278 +- src/views/SimproV2/CreatedProyek/index.js | 40 +- src/views/SimproV2/Gantt/GanttFrame.js | 7 +- src/views/SimproV2/Gantt/GanttFrame.js.save | 60 + src/views/SimproV2/Gantt/index.js | 3 +- src/views/SimproV2/PanicButton/DialogEdit.js | 79 +- src/views/SimproV2/PanicButton/DialogForm.js | 29 +- src/views/SimproV2/PanicButton/Map.js | 3 - .../SimproV2/PlanningHarian/DialogForm.js | 629 +++-- src/views/SimproV2/Presence/index.js | 3 - src/views/SimproV2/Profile/DialogForm.js | 1 - src/views/SimproV2/Profile/index.js | 18 - src/views/SimproV2/ProjectType/DialogForm.js | 1 - .../SimproV2/ProjectType/DialogFormInitial.js | 103 +- src/views/SimproV2/RateCost/DialogForm.js | 1 - src/views/SimproV2/RateCost/index.js | 2 - .../SimproV2/ResourceMaterial/DialogForm.js | 19 +- .../ResourceTools/DialogEditReqTools.js | 1 - src/views/SimproV2/ResourceTools/index.js | 1 - .../SimproV2/ResourceWorker/DialogForm.js | 3 - .../ResourceWorker/DialogFormUserShift.js | 2 - src/views/SimproV2/Satuan/DialogForm.js | 1 - .../SimproV2/ScheduleShift/DialogForm.js | 12 - src/views/SimproV2/ScheduleShift/index.js | 13 +- src/views/SimproV2/Settings/index.js | 13 - src/views/SimproV2/Shift/DialogForm.js | 1 - src/views/SimproV2/Shift/index.js | 8 - src/views/SimproV2/UserShift/DialogForm.js | 1 - src/views/SimproV2/UserShift/index.js | 1 - src/views/testgantt/GanttDhtmlx2.js | 2 - src/views/testgantt/index.js | 10 +- 169 files changed, 8087 insertions(+), 24854 deletions(-) delete mode 100644 src/components/AdmTree/AdmTree_backup.js delete mode 100644 src/components/MapTable/MapTable_backup.js delete mode 100644 src/components/MapTable/MapTable_backup2.js delete mode 100644 src/components/MapTable2/MapTable_backup.js delete mode 100644 src/components/MapTable2/MapTable_backup2.js delete mode 100644 src/components/MapToolbar/MapToolbar_backup.js delete mode 100644 src/components/MapToolbar_backup/MapToolbar.css delete mode 100644 src/components/MapToolbar_backup/MapToolbar.js delete mode 100644 src/components/MapToolbar_backup/MapToolbar_backup.js delete mode 100644 src/components/MapToolbar_backup/package.json delete mode 100644 src/components/PopupContainer/PopupContainer_backup.js delete mode 100644 src/views/Map/Map_backup.js delete mode 100644 src/views/Map_backup/CustomScroll.css delete mode 100644 src/views/Map_backup/Map.css delete mode 100644 src/views/Map_backup/Map.js delete mode 100644 src/views/Map_backup/Map_backup.js delete mode 100644 src/views/Map_backup/Popup.css delete mode 100644 src/views/Map_backup/package.json delete mode 100644 src/views/Map_backup/react-geo.css delete mode 100644 src/views/Pages/Login/Login.js.save delete mode 100644 src/views/SimproV2/CreatedProyek/.DialogHierarchy.js.swp create mode 100644 src/views/SimproV2/Gantt/GanttFrame.js.save diff --git a/src/appredux/modules/map/actions.js b/src/appredux/modules/map/actions.js index 0462355..06dc5d6 100644 --- a/src/appredux/modules/map/actions.js +++ b/src/appredux/modules/map/actions.js @@ -105,7 +105,6 @@ export const setSelectedProjectIds = obj => dispatch => { export const getUserPoints = async () => { let userPoints = await ApiMapMonitoring.search(); - // console.log('userPoints', userPoints); if (userPoints.status && userPoints.data && userPoints.data.length > 0) { let featureCollection = { "type": "FeatureCollection", @@ -144,12 +143,8 @@ export const getUserPoints = async () => { } export const getUserHistory = async (userId, dateString) => { - console.log('[map->action.js] getUserHistory', userId, dateString); - store.dispatch(setIsSearchingRoute(true)); let userHistory = await ApiMapMonitoring.searchUserHistory(userId, dateString); - console.log('userHistory', userHistory); - if (userHistory.status && userHistory.data && userHistory.data.length > 0) { let startIdx = 0; let endIdx = userHistory.data.length - 1; diff --git a/src/components/AddFeature/AddFeature.js b/src/components/AddFeature/AddFeature.js index a0feffc..6e9851b 100644 --- a/src/components/AddFeature/AddFeature.js +++ b/src/components/AddFeature/AddFeature.js @@ -1,7 +1,9 @@ import React, { Component } from 'react'; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, -Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; +import { + Modal, ModalHeader, ModalBody, ModalFooter, Button, + UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, + Form, FormGroup, Label, Input, Row, Col +} from 'reactstrap'; import { Icon } from '@iconify/react'; import removeCircle from '@iconify/icons-ion/remove-circle'; import './AddFeature.css'; @@ -21,12 +23,11 @@ class AddFeature extends Component { componentDidMount() { const { columns, addFeatureValue } = this.props; - console.log('columns', columns); let dataArr = []; if (columns !== undefined) { if (columns !== null) { if (columns.length > 0) { - for (let i=0; i < columns.length; i++) { + for (let i = 0; i < columns.length; i++) { dataArr.push({ idx: i, label: columns[i].column_name, @@ -36,13 +37,10 @@ class AddFeature extends Component { } } } - console.log('dataArr', dataArr); - addFeatureValue.layer_attributes = dataArr; - console.log('addFeatureValue', addFeatureValue); - this.setState({ objToSave: addFeatureValue, isReady: true}); + this.setState({ objToSave: addFeatureValue, isReady: true }); } @@ -51,33 +49,31 @@ class AddFeature extends Component { return objToSave.layer_attributes.map((item, index) => { return ( - - - - - - - + + + + + + + ) }); } handleChangeInputValue = (idx, event) => { - event.preventDefault(); + event.preventDefault(); let value = event.target.value; let { objToSave } = this.state; - let changedItem = findWhere(objToSave.layer_attributes, {idx: idx}); + let changedItem = findWhere(objToSave.layer_attributes, { idx: idx }); changedItem.value = value; - this.setState({objToSave: objToSave}, () => { + this.setState({ objToSave: objToSave }, () => { }); } saveFeature = async (e) => { e.preventDefault(); let { objToSave } = this.state; - console.log('objToSave', objToSave); let response = await createNewFeature(objToSave); - console.log('saveFeature response', response); if (response.success) { alert(response.result); @@ -93,21 +89,21 @@ class AddFeature extends Component { render() { const { objToSave, isReady } = this.state; - return( -
+ return ( +
- {this.props.addFeatureTitle ? this.props.addFeatureTitle : 'Add Feature' } - - { isReady ? -
-
this.saveFeature(e)}> - { this.renderInputs() } -
-
- : "Loading..." - } + {this.props.addFeatureTitle ? this.props.addFeatureTitle : 'Add Feature'} + + {isReady ? +
+
this.saveFeature(e)}> + {this.renderInputs()} +
+
+ : "Loading..." + } - {/*{objToSave.layer_attributes !== undefined ? + {/*{objToSave.layer_attributes !== undefined ? objToSave.layer_attributes !== null ?
@@ -117,13 +113,13 @@ class AddFeature extends Component { : 'Data is null' : 'Data is undefined' }*/} - - - - - - -
+ + + + + + +
) } } diff --git a/src/components/AdmTree/AdmTree.js b/src/components/AdmTree/AdmTree.js index 688ba26..c95bd35 100644 --- a/src/components/AdmTree/AdmTree.js +++ b/src/components/AdmTree/AdmTree.js @@ -17,11 +17,11 @@ const { TreeNode } = Tree; const { Search } = SearchInput; const menu = ( - - 1st menu item - 2nd menu item - 3rd menu item - + + 1st menu item + 2nd menu item + 3rd menu item + ); @@ -31,19 +31,19 @@ class AdmTree extends Component { constructor(props) { super(props); this.state = { - treeData: [], - checkedKeys: [], + treeData: [], + checkedKeys: [], isReady: false, - admDropdownOpen: false, - admDropdownVisible: false, - allCheckNodes: [], - rightClickNodeTreeItem: { - pageX: "", - pageY: "", - id: "", - dropdownTitle: "" - }, - searchAdmValue: "" + admDropdownOpen: false, + admDropdownVisible: false, + allCheckNodes: [], + rightClickNodeTreeItem: { + pageX: "", + pageY: "", + id: "", + dropdownTitle: "" + }, + searchAdmValue: "" } } @@ -52,653 +52,602 @@ class AdmTree extends Component { } getProv = async () => { - const param = { - method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), - } - - try { - const result = await fetch(API_KOMINFO_GET_PROV, param).then(response => response.json()).then(res => res) - if (result.data){ - let treeData = []; - let checkedKeys = []; - let allProv = []; - let checkNodes = []; - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i].PROV, - key: i, - group: 'prov' - }); - checkedKeys.push(i); - allProv.push(i); - let checkNode_ = { - props: { - dataRef: { - title: result.data[i].PROV, - key: i, - group: 'prov' - } - } - } - checkNodes.push(checkNode_); - } - this.setState({ - allProv: allProv, - allCheckNodes: checkNodes, - isReady: true}); - this.props.initAdmTree(treeData, checkNodes); - this.props.setCheckKeysAdm(checkedKeys); - this.props.setAllProv(allProv, true); - this.props.setToggleCheckAllValue(true); - - } else { - - } - } catch(err) { - console.log(err); - toast.warn(err.message.toString()); - } - } - - getChild = async (title, group, prov, kabkot, kec, childKey) => { - - let URL = ''; - let childGroup = ''; - let childTitle = ''; - let bodyParam = {}; - - if (group == 'prov') { // buat nyari kabkot - URL = API_KOMINFO_GET_KABKOT; - childGroup = 'kabkot'; - childTitle = 'KAB_KOT'; - bodyParam = { - [group]: title - }; - } - else if (group == 'kabkot') { // buat nyari kecamatan - URL = API_KOMINFO_GET_KEC; - childGroup = 'kec'; - childTitle = 'KEC'; - bodyParam = { - [group]: title, - prov: prov - }; - } - else if (group == 'kec') { // buat nyari desa - URL = API_KOMINFO_GET_DESA; - childGroup = 'desa'; - childTitle = 'KEL_DES'; - bodyParam = { - [group]: title, - prov: prov, - kabkot, kabkot - }; - } - - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(bodyParam) - } - - try { - console.log(URL); - - const result = await fetch(URL, param).then(response => response.json()).then(res => res) - console.log(result); - if (result.data){ - let treeData = []; - if (group == 'prov') { // buat nyari kabkot - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT - }); - } - } - else if (group == 'kabkot') { // buat nyari kecamatan - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT, - kec: result.data[i].KEC - }); - } - } - else if (group == 'kec') { // buat nyari desa - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT, - kec: result.data[i].KEC, - desa: result.data[i].KEL_DES - }); - } - } - - - return treeData; - } else { - - } - } catch(err) { - console.log(err); - toast.warn(err.message.toString()); - } - } - - /*onLoadData = treeNode => - new Promise(resolve => { - if (treeNode.props.children) { - resolve(); - return; - } - setTimeout(() => { - console.log('treeNode', treeNode); - let title = treeNode.props.dataRef.title; - let group = treeNode.props.dataRef.group; - let childKey = treeNode.props.eventKey; - let getChild = this.getChild(title, group, childKey); - console.log('getChild',getChild); - - treeNode.props.dataRef.children = [ - { title: 'Child Node', key: `${treeNode.props.eventKey}-0` }, - { title: 'Child Node', key: `${treeNode.props.eventKey}-1` }, - ]; - this.setState({ - treeData: [...this.state.treeData], - }); - resolve(); - }, 1000); - });*/ - - onLoadData = async (treeNode) => { - console.log('onLoadData treeNode',treeNode); - if (treeNode.props.children) { - return; - } - let title = treeNode.props.dataRef.title; - let group = treeNode.props.dataRef.group; - let childKey = treeNode.props.eventKey; - let getChild = null; - - if (group == 'prov') { + const param = { + method: 'GET', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + } + + try { + const result = await fetch(API_KOMINFO_GET_PROV, param).then(response => response.json()).then(res => res) + if (result.data) { + let treeData = []; + let checkedKeys = []; + let allProv = []; + let checkNodes = []; + for (let i = 0; i < result.data.length; i++) { + treeData.push({ + title: result.data[i].PROV, + key: i, + group: 'prov' + }); + checkedKeys.push(i); + allProv.push(i); + let checkNode_ = { + props: { + dataRef: { + title: result.data[i].PROV, + key: i, + group: 'prov' + } + } + } + checkNodes.push(checkNode_); + } + this.setState({ + allProv: allProv, + allCheckNodes: checkNodes, + isReady: true + }); + this.props.initAdmTree(treeData, checkNodes); + this.props.setCheckKeysAdm(checkedKeys); + this.props.setAllProv(allProv, true); + this.props.setToggleCheckAllValue(true); + + } else { + + } + } catch (err) { + toast.warn(err.message.toString()); + } + } + + getChild = async (title, group, prov, kabkot, kec, childKey) => { + + let URL = ''; + let childGroup = ''; + let childTitle = ''; + let bodyParam = {}; + + if (group == 'prov') { // buat nyari kabkot + URL = API_KOMINFO_GET_KABKOT; + childGroup = 'kabkot'; + childTitle = 'KAB_KOT'; + bodyParam = { + [group]: title + }; + } + else if (group == 'kabkot') { // buat nyari kecamatan + URL = API_KOMINFO_GET_KEC; + childGroup = 'kec'; + childTitle = 'KEC'; + bodyParam = { + [group]: title, + prov: prov + }; + } + else if (group == 'kec') { // buat nyari desa + URL = API_KOMINFO_GET_DESA; + childGroup = 'desa'; + childTitle = 'KEL_DES'; + bodyParam = { + [group]: title, + prov: prov, + kabkot, kabkot + }; + } + + const param = { + method: 'POST', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + body: JSON.stringify(bodyParam) + } + + try { + + const result = await fetch(URL, param).then(response => response.json()).then(res => res) + if (result.data) { + let treeData = []; + if (group == 'prov') { // buat nyari kabkot + for (let i = 0; i < result.data.length; i++) { + treeData.push({ + title: result.data[i][childTitle], + key: childKey + '-' + i, + group: childGroup, + prov: result.data[i].PROV, + kabkot: result.data[i].KAB_KOT + }); + } + } + else if (group == 'kabkot') { // buat nyari kecamatan + for (let i = 0; i < result.data.length; i++) { + treeData.push({ + title: result.data[i][childTitle], + key: childKey + '-' + i, + group: childGroup, + prov: result.data[i].PROV, + kabkot: result.data[i].KAB_KOT, + kec: result.data[i].KEC + }); + } + } + else if (group == 'kec') { // buat nyari desa + for (let i = 0; i < result.data.length; i++) { + treeData.push({ + title: result.data[i][childTitle], + key: childKey + '-' + i, + group: childGroup, + prov: result.data[i].PROV, + kabkot: result.data[i].KAB_KOT, + kec: result.data[i].KEC, + desa: result.data[i].KEL_DES + }); + } + } + + + return treeData; + } else { + + } + } catch (err) { + toast.warn(err.message.toString()); + } + } + + + onLoadData = async (treeNode) => { + if (treeNode.props.children) { + return; + } + let title = treeNode.props.dataRef.title; + let group = treeNode.props.dataRef.group; + let childKey = treeNode.props.eventKey; + let getChild = null; + + if (group == 'prov') { getChild = await this.getChild(title, group, group, null, null, childKey); - } - else if (group == 'kabkot') { - let prov = treeNode.props.dataRef.prov; - getChild = await this.getChild(title, group, prov, group, null, childKey); - } - else if (group == 'kec') { - let prov = treeNode.props.dataRef.prov; - let kabkot = treeNode.props.dataRef.kabkot; - getChild = await this.getChild(title, group, prov, kabkot, group, childKey); - } - - console.log('getChild',getChild); - - if (getChild.length > 0) { - let treeDataChild = []; - let treeDataChildKeys = []; - - if (group == 'prov') { // buat nyari kabkot - this.props.setExpandedTree('prov'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot - }); - } - } - else if (group == 'kabkot') { // buat nyari kec - this.props.setExpandedTree('kab'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot, - kec: getChild[i].kec - }); - } - } - else if (group == 'kec') { // buat nyari desa / kel_des - this.props.setExpandedTree('kec'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot, - kec: getChild[i].kec, - desa: getChild[i].desa, - isLeaf: true - }); - } - } - - if (treeNode.props.checked) { - for (let i=0; i < getChild.length; i++) { - treeDataChildKeys.push(getChild[i].key); - } - this.props.setAdmTreeData(treeNode, treeDataChild); - this.props.appendCheckedKeysAdm(treeDataChildKeys, treeNode.props.children) - } - else { - this.props.setAdmTreeData(treeNode, treeDataChild); - this.props.appendCheckedKeysAdm(treeDataChildKeys, []) - } - - } - } - - onInitData = (loadedKeys, e) => { - console.log('onInitData', e); - } - - onCheckAdmTree = (checkedKeys, e) => { - console.log('onCheckAdmTree', checkedKeys); - console.log('onCheckAdmTree checkedNodes', e.checkedNodes); - this.props.setCheckKeysAdm(checkedKeys); - this.props.setCheckNodesAdm(e.checkedNodes); - - }; - - onCheckAllAdmTree = () => { - - /*const { checkedKeys, allProv } = this.state; - const totalProv = 34; - - if (checkedKeys.length > 0) { - this.setState({checkedKeys: [], toggleCheckAllValue: false}) - } - else if (checkedKeys.length == 0) { - this.setState({checkedKeys: allProv, toggleCheckAllValue: true}) - }*/ - const { checkedKeysAdm, checkedKeysAdmTemp, toggleCheckAllValue, allProv } = this.props; - const { allCheckNodes } = this.state; - this.props.setToggleCheckAllValue(!toggleCheckAllValue); - } - - onCheckOpt = (checkedKeys, e) => { - const { mode } = this.props; - this.props.setCheckKeysOpt(mode, checkedKeys); - } - - onCheckQty = (checkedKeys) => { - const { mode } = this.props; - this.props.setCheckKeysQty(mode, checkedKeys); - } - - onCheckBts = (checkedKeys) => { - this.props.setCheckKeysBts(checkedKeys); - } - - /*onRightClickAdmTree = (callback) => { - console.log('onRightClickAdmTree', callback); - this.admDropdownToggle(); - }*/ - - onRightClickAdmTree = e => { - e.event.persist() - console.log('onRightClickAdmTree', e); - this.setState({ - rightClickNodeTreeItem: { - pageX: e.event.pageX, - pageY: e.event.pageY, - id: e.node.props.dataRef.key, - dropdownTitle: e.node.props.dataRef.title - } - }); - }; - - closeAdmDropdown = () => { - this.setState({ - rightClickNodeTreeItem: { - pageX: "", - pageY: "", - id: "", - dropdownTitle: "" - } - }) - } - - getNodeTreeRightClickMenu = () => { - const { pageX, pageY, id, dropdownTitle } = { ...this.state.rightClickNodeTreeItem }; - const tmpStyle = { - position:"absolute", - left: `${pageX - 50}px`, - top: `${pageY - 80}px`, - zIndex:10000, - width:"200px", - background:"#ededed", - borderRadius:"5px" - } - const menu = ( -
-
- x -
{ dropdownTitle }
-
-
Go to map
-
-
-
- ); - return this.state.rightClickNodeTreeItem.dropdownTitle == "" ? "" : menu; - }; - - getCheckedValue = () => { - const { treeData, checkedKeys } = this.state; - let checkedData = []; - - for(let i=0; i < checkedKeys.length; i++) { - let item = findWhere(treeData, {key: parseInt(checkedKeys[i])}); - checkedData.push(item); - } - return checkedData; - } - - renderCheckboxOpt = () => { - let checkboxes = []; - const { mode, checkedKeys2GOpt, checkedKeys3GOpt, checkedKeys4GOpt} = this.props; - - if (mode == '2G') { - return ( - this.onCheckOpt(checkedKeys2GOpt, e)} - > - {this.renderTreeNodes(opt2G)} - - ) - } - else if (mode == '3G') { - return ( - this.onCheckOpt(checkedKeys3GOpt)} - > - {this.renderTreeNodes(opt3G)} - - ) - } - else { - return ( - this.onCheckOpt(checkedKeys4GOpt)} - > - {this.renderTreeNodes(opt4G)} - - ) - } - } - - onExpand = expandedKeys => { - const {closeChart} = this.props - console.log("length", expandedKeys.length) - console.log("closeChart", closeChart) - if(expandedKeys.length === 1){ - if(closeChart) { + } + else if (group == 'kabkot') { + let prov = treeNode.props.dataRef.prov; + getChild = await this.getChild(title, group, prov, group, null, childKey); + } + else if (group == 'kec') { + let prov = treeNode.props.dataRef.prov; + let kabkot = treeNode.props.dataRef.kabkot; + getChild = await this.getChild(title, group, prov, kabkot, group, childKey); + } + + if (getChild.length > 0) { + let treeDataChild = []; + let treeDataChildKeys = []; + + if (group == 'prov') { // buat nyari kabkot + this.props.setExpandedTree('prov'); + for (let i = 0; i < getChild.length; i++) { + treeDataChild.push({ + title: getChild[i].title, + key: getChild[i].key, + group: getChild[i].group, + prov: getChild[i].prov, + kabkot: getChild[i].kabkot + }); + } + } + else if (group == 'kabkot') { // buat nyari kec + this.props.setExpandedTree('kab'); + for (let i = 0; i < getChild.length; i++) { + treeDataChild.push({ + title: getChild[i].title, + key: getChild[i].key, + group: getChild[i].group, + prov: getChild[i].prov, + kabkot: getChild[i].kabkot, + kec: getChild[i].kec + }); + } + } + else if (group == 'kec') { // buat nyari desa / kel_des + this.props.setExpandedTree('kec'); + for (let i = 0; i < getChild.length; i++) { + treeDataChild.push({ + title: getChild[i].title, + key: getChild[i].key, + group: getChild[i].group, + prov: getChild[i].prov, + kabkot: getChild[i].kabkot, + kec: getChild[i].kec, + desa: getChild[i].desa, + isLeaf: true + }); + } + } + + if (treeNode.props.checked) { + for (let i = 0; i < getChild.length; i++) { + treeDataChildKeys.push(getChild[i].key); + } + this.props.setAdmTreeData(treeNode, treeDataChild); + this.props.appendCheckedKeysAdm(treeDataChildKeys, treeNode.props.children) + } + else { + this.props.setAdmTreeData(treeNode, treeDataChild); + this.props.appendCheckedKeysAdm(treeDataChildKeys, []) + } + + } + } + + + onCheckAdmTree = (checkedKeys, e) => { + this.props.setCheckKeysAdm(checkedKeys); + this.props.setCheckNodesAdm(e.checkedNodes); + + }; + + onCheckAllAdmTree = () => { + + const { checkedKeysAdm, checkedKeysAdmTemp, toggleCheckAllValue, allProv } = this.props; + const { allCheckNodes } = this.state; + this.props.setToggleCheckAllValue(!toggleCheckAllValue); + } + + onCheckOpt = (checkedKeys, e) => { + const { mode } = this.props; + this.props.setCheckKeysOpt(mode, checkedKeys); + } + + onCheckQty = (checkedKeys) => { + const { mode } = this.props; + this.props.setCheckKeysQty(mode, checkedKeys); + } + + onCheckBts = (checkedKeys) => { + this.props.setCheckKeysBts(checkedKeys); + } + + + onRightClickAdmTree = e => { + e.event.persist() + this.setState({ + rightClickNodeTreeItem: { + pageX: e.event.pageX, + pageY: e.event.pageY, + id: e.node.props.dataRef.key, + dropdownTitle: e.node.props.dataRef.title + } + }); + }; + + closeAdmDropdown = () => { + this.setState({ + rightClickNodeTreeItem: { + pageX: "", + pageY: "", + id: "", + dropdownTitle: "" + } + }) + } + + getNodeTreeRightClickMenu = () => { + const { pageX, pageY, id, dropdownTitle } = { ...this.state.rightClickNodeTreeItem }; + const tmpStyle = { + position: "absolute", + left: `${pageX - 50}px`, + top: `${pageY - 80}px`, + zIndex: 10000, + width: "200px", + background: "#ededed", + borderRadius: "5px" + } + const menu = ( +
+
+ x +
{dropdownTitle}
+
+
Go to map
+
+
+
+ ); + return this.state.rightClickNodeTreeItem.dropdownTitle == "" ? "" : menu; + }; + + getCheckedValue = () => { + const { treeData, checkedKeys } = this.state; + let checkedData = []; + + for (let i = 0; i < checkedKeys.length; i++) { + let item = findWhere(treeData, { key: parseInt(checkedKeys[i]) }); + checkedData.push(item); + } + return checkedData; + } + + renderCheckboxOpt = () => { + let checkboxes = []; + const { mode, checkedKeys2GOpt, checkedKeys3GOpt, checkedKeys4GOpt } = this.props; + + if (mode == '2G') { + return ( + this.onCheckOpt(checkedKeys2GOpt, e)} + > + {this.renderTreeNodes(opt2G)} + + ) + } + else if (mode == '3G') { + return ( + this.onCheckOpt(checkedKeys3GOpt)} + > + {this.renderTreeNodes(opt3G)} + + ) + } + else { + return ( + this.onCheckOpt(checkedKeys4GOpt)} + > + {this.renderTreeNodes(opt4G)} + + ) + } + } + + onExpand = expandedKeys => { + const { closeChart } = this.props + if (expandedKeys.length === 1) { + if (closeChart) { document.getElementById('adm-tree-container').style.height = '320px' } else { document.getElementById('adm-tree-container').style.height = '120px' } } else { - if(closeChart) { + if (closeChart) { document.getElementById('adm-tree-container').style.height = '440px' } else { document.getElementById('adm-tree-container').style.height = '220px' } } - }; - - renderCheckboxQuality = () => { - let checkboxes = []; - const { mode, checkedKeys2GQty, checkedKeys3GQty, checkedKeys4GQty } = this.props; - - if (mode == '2G') { - return ( - this.onCheckQty(checkedKeys2GQty)} - > - {this.renderTreeNodes(netQuality2G)} - - ) - } - else if (mode == '3G') { - return ( - this.onCheckQty(checkedKeys3GQty)} - > - {this.renderTreeNodes(netQuality3G)} - - ) - } - else { - return ( - this.onCheckQty(checkedKeys4GQty)} - > - {this.renderTreeNodes(netQuality4G)} - - ) - } - } - - renderCheckboxBts = () => { - const { checkedKeysBts } = this.props; - return ( - this.onCheckBts(checkedKeysBts)} - > - {this.renderTreeNodes(bts)} - - ) - } - - - /*renderTreeNodes = data => - data.map(item => { - if (item.children) { - return ( - - {this.renderTreeNodes(item.children)} - - ); - } - return ; - })*/ - - renderTreeNodes = data => - data.map(item => { - if (item.children) { - return ( - - - {this.renderTreeNodes(item.children)} - - - ); - } - return ( - - - - ); - }) - - admDropdownToggle = () => { - this.setState({admDropdownVisible: !this.state.admDropdownVisible}); - } - - admMenu = () => { - const menu = ( - - 1st menu item - 2nd menu item - 3rd menu item - - ); - - return menu; - } - - goToLocation = () => { - - } - - onChangeSearchAdm = (e) => { - const { value } = e.target; - this.setState({searchAdmValue: value}, () => console.log('searchAdmValue:', this.state.searchAdmValue)); - } - - renderCheckboxMukim = () => { - const { checkedKeysMukim } = this.props; - return ( - this.onCheckMukim(checkedKeysMukim)} - > - {this.renderTreeNodes(mukim)} - - ) - } - - onCheckMukim = (checkedKeys) => { - this.props.setCheckKeysMukim(checkedKeys); - } - - renderFilterCoverage = () => { - return
this.filterCoverage()}>Filter Coverage
- } - - filterCoverage = () => { - this.props.toggleModalOptions(); - } + }; + + renderCheckboxQuality = () => { + let checkboxes = []; + const { mode, checkedKeys2GQty, checkedKeys3GQty, checkedKeys4GQty } = this.props; + + if (mode == '2G') { + return ( + this.onCheckQty(checkedKeys2GQty)} + > + {this.renderTreeNodes(netQuality2G)} + + ) + } + else if (mode == '3G') { + return ( + this.onCheckQty(checkedKeys3GQty)} + > + {this.renderTreeNodes(netQuality3G)} + + ) + } + else { + return ( + this.onCheckQty(checkedKeys4GQty)} + > + {this.renderTreeNodes(netQuality4G)} + + ) + } + } + + renderCheckboxBts = () => { + const { checkedKeysBts } = this.props; + return ( + this.onCheckBts(checkedKeysBts)} + > + {this.renderTreeNodes(bts)} + + ) + } + + + /*renderTreeNodes = data => + data.map(item => { + if (item.children) { + return ( + + {this.renderTreeNodes(item.children)} + + ); + } + return ; + })*/ + + renderTreeNodes = data => + data.map(item => { + if (item.children) { + return ( + + + {this.renderTreeNodes(item.children)} + + + ); + } + return ( + + + + ); + }) + + admDropdownToggle = () => { + this.setState({ admDropdownVisible: !this.state.admDropdownVisible }); + } + + admMenu = () => { + const menu = ( + + 1st menu item + 2nd menu item + 3rd menu item + + ); + + return menu; + } + + goToLocation = () => { + + } + + onChangeSearchAdm = (e) => { + const { value } = e.target; + this.setState({ searchAdmValue: value }); + } + + renderCheckboxMukim = () => { + const { checkedKeysMukim } = this.props; + return ( + this.onCheckMukim(checkedKeysMukim)} + > + {this.renderTreeNodes(mukim)} + + ) + } + + onCheckMukim = (checkedKeys) => { + this.props.setCheckKeysMukim(checkedKeys); + } + + renderFilterCoverage = () => { + return
this.filterCoverage()}>Filter Coverage
+ } + + filterCoverage = () => { + this.props.toggleModalOptions(); + } render() { const { isReady, checkedKeys, admDropdownOpen, admDropdownVisible, searchAdmValue } = this.state; const { admTreeData, checkedKeysAdm, toggleCheckAllValue } = this.props; if (!isReady) { return (
- -
) + +
) } - return ( - - - {/*This is future kominfo feature*/} - - - { this.renderCheckboxMukim() } - - - { this.renderCheckboxBts() } - - - {/*end This is future kominfo feature*/} - - - - { this.renderCheckboxOpt() } - - - { this.renderCheckboxQuality() } - - - - {/*
+ return ( + + + {/*This is future kominfo feature*/} + + + {this.renderCheckboxMukim()} + + + {this.renderCheckboxBts()} + + + {/*end This is future kominfo feature*/} + + + + {this.renderCheckboxOpt()} + + + {this.renderCheckboxQuality()} + + + + {/*
{ this.renderCheckboxQuality() }
*/} - {/* + {/* { this.renderCheckboxBts() } */} - {/*This is future kominfo feature*/} - - - { this.renderFilterCoverage() } - - - {/*end This is future kominfo feature*/} -
- - {/*This is future kominfo feature*/} - - {/*end This is future kominfo feature*/} - - - - - - -
-
- this.onCheckAdmTree(checkedKeys, e)} - onRightClick={this.onRightClickAdmTree} - onSelect={this.closeAdmDropdown} - > - {/* this.admDropdownToggle()}>*/} - {this.renderTreeNodes(admTreeData)} - {/**/} - - {this.getNodeTreeRightClickMenu()} -
- - ) - } + {/*This is future kominfo feature*/} + + + {this.renderFilterCoverage()} + + + {/*end This is future kominfo feature*/} +
+ + {/*This is future kominfo feature*/} + + {/*end This is future kominfo feature*/} + +
+ + + +
+
+
+ this.onCheckAdmTree(checkedKeys, e)} + onRightClick={this.onRightClickAdmTree} + onSelect={this.closeAdmDropdown} + > + {/* this.admDropdownToggle()}>*/} + {this.renderTreeNodes(admTreeData)} + {/**/} + + {this.getNodeTreeRightClickMenu()} +
+ + ) + } } export default AdmTree; \ No newline at end of file diff --git a/src/components/AdmTree/AdmTree_backup.js b/src/components/AdmTree/AdmTree_backup.js deleted file mode 100644 index 74cb25c..0000000 --- a/src/components/AdmTree/AdmTree_backup.js +++ /dev/null @@ -1,523 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import { Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; -import { Tree, Input as SearchInput } from 'antd'; -import { API_KOMINFO_GET_PROV, API_KOMINFO_GET_KABKOT, API_KOMINFO_GET_KEC, API_KOMINFO_GET_DESA } from '../../const/ApiConst.js'; -import Loader from 'react-loader-spinner' -import "react-loader-spinner/dist/loader/css/react-spinner-loader.css" -import './AdmTree.css' -import '../../assets/css/customscroll.css' -import { findWhere } from 'underscore'; -import { opt2G, opt3G, opt4G, netQuality2G, netQuality3G, netQuality4G } from '../../const/Kominfo.js'; -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; - -const { TreeNode } = Tree; -const { Search } = SearchInput; - - - -class AdmTree extends Component { - - constructor(props) { - super(props); - this.state = { - treeData: [], - checkedKeys: [], - isReady: false - } - } - - componentDidMount() { - this.getProv(); - } - - getProv = async () => { - const param = { - method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), - } - - try { - const result = await fetch(API_KOMINFO_GET_PROV, param).then(response => response.json()).then(res => res) - if (result.data){ - let treeData = []; - let checkedKeys = []; - let allProv = []; - let checkNodes = []; - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i].PROV, - key: i, - group: 'prov' - }); - checkedKeys.push(i); - allProv.push(i); - let checkNode_ = { - props: { - dataRef: { - title: result.data[i].PROV, - key: i, - group: 'prov' - } - } - } - checkNodes.push(checkNode_); - } - this.setState({ - allProv: allProv, - isReady: true}); - this.props.initAdmTree(treeData, checkNodes); - this.props.setCheckKeysAdm(checkedKeys); - this.props.setAllProv(allProv, true); - this.props.setToggleCheckAllValue(true); - - } else { - - } - } catch(err) { - console.log(err); - toast.warn(err.message.toString()); - } - } - - getChild = async (title, group, prov, kabkot, kec, childKey) => { - - let URL = ''; - let childGroup = ''; - let childTitle = ''; - let bodyParam = {}; - - if (group == 'prov') { // buat nyari kabkot - URL = API_KOMINFO_GET_KABKOT; - childGroup = 'kabkot'; - childTitle = 'KAB_KOT'; - bodyParam = { - [group]: title - }; - } - else if (group == 'kabkot') { // buat nyari kecamatan - URL = API_KOMINFO_GET_KEC; - childGroup = 'kec'; - childTitle = 'KEC'; - bodyParam = { - [group]: title, - prov: prov - }; - } - else if (group == 'kec') { // buat nyari desa - URL = API_KOMINFO_GET_DESA; - childGroup = 'desa'; - childTitle = 'KEL_DES'; - bodyParam = { - [group]: title, - prov: prov, - kabkot, kabkot - }; - } - - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(bodyParam) - } - - try { - console.log(URL); - - const result = await fetch(URL, param).then(response => response.json()).then(res => res) - console.log(result); - if (result.data){ - let treeData = []; - if (group == 'prov') { // buat nyari kabkot - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT - }); - } - } - else if (group == 'kabkot') { // buat nyari kecamatan - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT, - kec: result.data[i].KEC - }); - } - } - else if (group == 'kec') { // buat nyari desa - for(let i=0; i < result.data.length; i++) { - treeData.push({ - title: result.data[i][childTitle], - key: childKey+'-'+i, - group: childGroup, - prov: result.data[i].PROV, - kabkot: result.data[i].KAB_KOT, - kec: result.data[i].KEC, - desa: result.data[i].KEL_DES - }); - } - } - - - return treeData; - } else { - - } - } catch(err) { - console.log(err); - toast.warn(err.message.toString()); - } - } - - /*onLoadData = treeNode => - new Promise(resolve => { - if (treeNode.props.children) { - resolve(); - return; - } - setTimeout(() => { - console.log('treeNode', treeNode); - let title = treeNode.props.dataRef.title; - let group = treeNode.props.dataRef.group; - let childKey = treeNode.props.eventKey; - let getChild = this.getChild(title, group, childKey); - console.log('getChild',getChild); - - treeNode.props.dataRef.children = [ - { title: 'Child Node', key: `${treeNode.props.eventKey}-0` }, - { title: 'Child Node', key: `${treeNode.props.eventKey}-1` }, - ]; - this.setState({ - treeData: [...this.state.treeData], - }); - resolve(); - }, 1000); - });*/ - - onLoadData = async (treeNode) => { - console.log('onLoadData treeNode',treeNode); - if (treeNode.props.children) { - return; - } - let title = treeNode.props.dataRef.title; - let group = treeNode.props.dataRef.group; - let childKey = treeNode.props.eventKey; - let getChild = null; - - if (group == 'prov') { - getChild = await this.getChild(title, group, group, null, null, childKey); - } - else if (group == 'kabkot') { - let prov = treeNode.props.dataRef.prov; - getChild = await this.getChild(title, group, prov, group, null, childKey); - } - else if (group == 'kec') { - let prov = treeNode.props.dataRef.prov; - let kabkot = treeNode.props.dataRef.kabkot; - getChild = await this.getChild(title, group, prov, kabkot, group, childKey); - } - - console.log('getChild',getChild); - - if (getChild.length > 0) { - let treeDataChild = []; - let treeDataChildKeys = []; - - if (group == 'prov') { // buat nyari kabkot - this.props.setExpandedTree('prov'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot - }); - } - } - else if (group == 'kabkot') { // buat nyari kec - this.props.setExpandedTree('kab'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot, - kec: getChild[i].kec - }); - } - } - else if (group == 'kec') { // buat nyari desa / kel_des - this.props.setExpandedTree('kec'); - for (let i=0; i < getChild.length; i++) { - treeDataChild.push({ - title: getChild[i].title, - key: getChild[i].key, - group: getChild[i].group, - prov: getChild[i].prov, - kabkot: getChild[i].kabkot, - kec: getChild[i].kec, - desa: getChild[i].desa, - isLeaf: true - }); - } - } - - if (treeNode.props.checked) { - for (let i=0; i < getChild.length; i++) { - treeDataChildKeys.push(getChild[i].key); - } - this.props.setAdmTreeData(treeNode, treeDataChild); - this.props.appendCheckedKeysAdm(treeDataChildKeys, treeNode.props.children) - } - else { - this.props.setAdmTreeData(treeNode, treeDataChild); - this.props.appendCheckedKeysAdm(treeDataChildKeys, []) - } - - } - } - - onInitData = (loadedKeys, e) => { - console.log('onInitData', e); - } - - onCheckAdmTree = (checkedKeys, e) => { - console.log('onCheckAdmTree', checkedKeys); - console.log('onCheckAdmTree checkedNodes', e.checkedNodes); - this.props.setCheckKeysAdm(checkedKeys); - this.props.setCheckNodesAdm(e.checkedNodes); - - }; - - onCheckAllAdmTree = () => { - - /*const { checkedKeys, allProv } = this.state; - const totalProv = 34; - - if (checkedKeys.length > 0) { - this.setState({checkedKeys: [], toggleCheckAllValue: false}) - } - else if (checkedKeys.length == 0) { - this.setState({checkedKeys: allProv, toggleCheckAllValue: true}) - }*/ - const { checkedKeysAdm, checkedKeysAdmTemp, toggleCheckAllValue, allProv } = this.props; - this.props.setToggleCheckAllValue(!toggleCheckAllValue); - } - - onCheckOpt = (checkedKeys, e) => { - const { mode } = this.props; - this.props.setCheckKeysOpt(mode, checkedKeys); - } - - onCheckQty = (checkedKeys) => { - const { mode } = this.props; - this.props.setCheckKeysQty(mode, checkedKeys); - } - - onRightClickAdmTree = (callback) => { - console.log('onRightClickAdmTree', callback); - } - - getCheckedValue = () => { - const { treeData, checkedKeys } = this.state; - let checkedData = []; - - for(let i=0; i < checkedKeys.length; i++) { - let item = findWhere(treeData, {key: parseInt(checkedKeys[i])}); - checkedData.push(item); - } - return checkedData; - } - - renderCheckboxOpt = () => { - let checkboxes = []; - const { mode, checkedKeys2GOpt, checkedKeys3GOpt, checkedKeys4GOpt} = this.props; - - if (mode == '2G') { - return ( - this.onCheckOpt(checkedKeys2GOpt, e)} - > - {this.renderTreeNodes(opt2G)} - - ) - } - else if (mode == '3G') { - return ( - this.onCheckOpt(checkedKeys3GOpt)} - > - {this.renderTreeNodes(opt3G)} - - ) - } - else { - return ( - this.onCheckOpt(checkedKeys4GOpt)} - > - {this.renderTreeNodes(opt4G)} - - ) - } - - /*return ( - this.onCheckOpt(checkedKeysOpt)} - > - {this.renderTreeNodes(checkboxes)} - - )*/ - } - - onExpand = expandedKeys => { - const {closeChart} = this.props - console.log("length", expandedKeys.length) - console.log("closeChart", closeChart) - if(expandedKeys.length === 1){ - if(closeChart) { - document.getElementById('adm-tree-container').style.height = '320px' - } else { - document.getElementById('adm-tree-container').style.height = '120px' - } - } else { - if(closeChart) { - document.getElementById('adm-tree-container').style.height = '440px' - } else { - document.getElementById('adm-tree-container').style.height = '220px' - } - } - }; - - renderCheckboxQuality = () => { - let checkboxes = []; - const { mode, checkedKeys2GQty, checkedKeys3GQty, checkedKeys4GQty } = this.props; - - if (mode == '2G') { - return ( - this.onCheckQty(checkedKeys2GQty)} - > - {this.renderTreeNodes(netQuality2G)} - - ) - } - else if (mode == '3G') { - return ( - this.onCheckQty(checkedKeys3GQty)} - > - {this.renderTreeNodes(netQuality3G)} - - ) - } - else { - return ( - this.onCheckQty(checkedKeys4GQty)} - > - {this.renderTreeNodes(netQuality4G)} - - ) - } - - - } - - - renderTreeNodes = data => - data.map(item => { - if (item.children) { - return ( - - {this.renderTreeNodes(item.children)} - - ); - } - return ; - }) - - render() { - const { isReady, checkedKeys } = this.state; - const { admTreeData, checkedKeysAdm, toggleCheckAllValue } = this.props; - if (!isReady) { - return (
- -
) - } - - return ( - - - - { this.renderCheckboxOpt() } - - - { this.renderCheckboxQuality() } - - - {/*
- { this.renderCheckboxQuality() } -
*/} -
-
- - - -
-
-
- this.onCheckAdmTree(checkedKeys, e)} - onRightClick={(callback) => this.onRightClickAdmTree(callback)} - > - {this.renderTreeNodes(admTreeData)} - -
- - ) - } -} - -export default AdmTree; \ No newline at end of file diff --git a/src/components/BaseMap/BaseMap.js b/src/components/BaseMap/BaseMap.js index 10c8efe..cb32587 100644 --- a/src/components/BaseMap/BaseMap.js +++ b/src/components/BaseMap/BaseMap.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import './BaseMap.css'; +import './BaseMap.css'; import '../../assets/css/customscroll.css'; import { Row, Col } from 'reactstrap'; @@ -21,34 +21,33 @@ class BaseMap extends Component { } getActiveBaseMap = () => { - let activeBaseMap = ''; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('type') == 'base') { - console.log('activeBaseMap', layer.get('name')); - activeBaseMap = layer.get('name'); - } - }); + let activeBaseMap = ''; + this.props.olmap.getLayers().forEach((layer, i) => { + if (layer.get('type') == 'base') { + activeBaseMap = layer.get('name'); + } + }); - this.setState({activeBaseMap: activeBaseMap}, () => this.renderBaseMap()); - } + this.setState({ activeBaseMap: activeBaseMap }, () => this.renderBaseMap()); + } changeBaseLayer = (layer) => { - this.setState({activeBaseMap: layer.get('name')}, () =>{ - this.renderBaseMap(); - this.props.changeBaseLayer(layer); - }); - } + this.setState({ activeBaseMap: layer.get('name') }, () => { + this.renderBaseMap(); + this.props.changeBaseLayer(layer); + }); + } renderBaseMap = () => { - return this.props.baseLayers.map((item, index) => { + return this.props.baseLayers.map((item, index) => { - return ( -
this.changeBaseLayer(item)}> - {item.get('imageName')}
-
{item.get('name')}
-
- ) - }) + return ( +
this.changeBaseLayer(item)}> + {item.get('imageName')}
+
{item.get('name')}
+
+ ) + }) } render() { @@ -57,8 +56,8 @@ class BaseMap extends Component {
Change Base Map x
- { this.renderBaseMap() } -
+ {this.renderBaseMap()} +
) } diff --git a/src/components/CreateNewLayer/CreateNewLayer.js b/src/components/CreateNewLayer/CreateNewLayer.js index e0f637d..e46e610 100644 --- a/src/components/CreateNewLayer/CreateNewLayer.js +++ b/src/components/CreateNewLayer/CreateNewLayer.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, Form, FormGroup, Label, Input} from 'reactstrap'; +import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, Form, FormGroup, Label, Input } from 'reactstrap'; import { Icon, InlineIcon } from '@iconify/react'; import removeCircle from '@iconify/icons-ion/remove-circle'; import { findWhere, without } from 'underscore'; @@ -33,7 +33,6 @@ class CreateNewLayer extends Component { } else { maxIdx = Math.max.apply(Math, columns.map((column) => column.idx)); - console.log('maxIdx',maxIdx); newIdx = maxIdx + 1; } let oneColumn = { @@ -41,8 +40,7 @@ class CreateNewLayer extends Component { column_name: "", column_type: "" } - this.setState({columns: [...columns, oneColumn]}, () => { - console.log(this.state.columns) + this.setState({ columns: [...columns, oneColumn] }, () => { this.renderColumnAttribute(); }); } @@ -52,91 +50,74 @@ class CreateNewLayer extends Component { if (columns.length < 1) { return null; - } + } else { return columns.map((item, index) => { return ( - - - - - - - - - - - - - - - - - - - - - ) + + + + + + + + + + + + + + + + + + + + + ) }) } } deleteColumn = (idx) => { - console.log('deleteColumn', idx); let { columns } = this.state; - console.log('columns', columns); - let deletedItem = findWhere(columns, {idx: idx}); - console.log(deletedItem); + let deletedItem = findWhere(columns, { idx: idx }); let afterRemove = without(columns, deletedItem); - console.log(console.log('afterRemove', afterRemove)); - this.setState({columns: afterRemove}); + this.setState({ columns: afterRemove }); } handleChangeInputLayerName(event) { let value = event.target.value; value = value.replace(/[^\w]/gi, ""); - this.setState({layerName: value}, () => console.log('layerName', this.state.layerName)); + this.setState({ layerName: value }); } handleChangeInputLayerType(event) { const value = event.target.value.split(" ").join(""); - this.setState({layerType: value}, () => console.log('layerType', this.state.layerType)); + this.setState({ layerType: value }); } handleChangeInputColumnName(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value; value = value.replace(/[^\w]/gi, ""); changedItem.column_name = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); + this.setState({ columns: columns }); } handleChangeInputColumnType(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value; changedItem.column_type = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); - } - - preventSpace(e) { - console.log('event keypress',e); + this.setState({ columns: columns }); } - - - - - sendCreateNewLayer = async () => { const { layerName, layerType, columns } = this.state; - let reqPayload = { + let reqPayload = { layer_name: layerName, layer_type: layerType, columns: columns @@ -168,7 +149,6 @@ class CreateNewLayer extends Component { } let processCreateNewLayer = await createNewLayer(reqPayload); - console.log('sendCreateNewLayer',processCreateNewLayer); alert("Success sending create new layer"); } @@ -176,74 +156,74 @@ class CreateNewLayer extends Component { render() { return ( - - {this.props.createNewLayerTitle ? this.props.createNewLayerTitle : 'Create New Layer'} - -
- {/*
*/} - {/*
*/} - {/*
*/} - {/* + + {this.props.createNewLayerTitle ? this.props.createNewLayerTitle : 'Create New Layer'} + +
+ {/*
*/} + {/*
*/} + {/*
*/} + {/* */} -
- - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - { this.renderColumnAttribute() } - - - - - - - - - - {/*
*/} - {/*
*/} - {/*
*/} - -
- - - {/*{' '}*/} - {' '} - - - +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + {this.renderColumnAttribute()} + + + + + + + + + + {/*
*/} + {/*
*/} + {/*
*/} + +
+ + + {/*{' '}*/} + {' '} + + + ) } } diff --git a/src/components/DailyInfo/DailyInfo.js b/src/components/DailyInfo/DailyInfo.js index a178677..54ddb26 100644 --- a/src/components/DailyInfo/DailyInfo.js +++ b/src/components/DailyInfo/DailyInfo.js @@ -63,20 +63,20 @@ class DailyInfo extends React.Component { sumTanpaKet: 0, dataTelat: [], dataTanpaKet: [], - dataAbsensi:[], + dataAbsensi: [], dataPanicBtn: [], dataEmployee: [], totalProyek: 0, 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 } @@ -92,22 +92,21 @@ class DailyInfo extends React.Component { getDailyInfo = async () => { const payload = { "columns": [ - {"name": "created_at","logic_operator": "range","value": `${moment().utc().format('YYYY-MM-DD')} 00:00:00`,"value1": `${moment().utc().format('YYYY-MM-DD')} 23:59:59`,"operator": "AND"} + { "name": "created_at", "logic_operator": "range", "value": `${moment().utc().format('YYYY-MM-DD')} 00:00:00`, "value1": `${moment().utc().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 } try { const result = await fetch(DASHBOARD_PROYEK_SEARCH, config).then(response => response.json()).then(res => res); - console.log('getDailyInfo result', result); if (result.code === 200 && result.data) { const dataSum = result.data; this.setState({ @@ -135,13 +134,12 @@ class DailyInfo extends React.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 } try { const result = await fetch(PROYEK_SEARCH, config).then(response => response.json()).then(res => res); - console.log('getDailyInfo result', result); if (result.code === 200 && result.data) { const dataSum = result.data; this.setState({ @@ -158,7 +156,7 @@ class DailyInfo extends React.Component { } } - openDialogBottom = async(item) => { + openDialogBottom = async (item) => { let data = [] const { dataPresence, dataAbsensi, dataEmployee, dataPanicBtn, dataTelat, dataTanpaKet } = this.state if (item.key === "presensi") { @@ -218,30 +216,30 @@ class DailyInfo extends React.Component { "color": DONE_COLOR, "text_color": WHITE_COLOR, "children": [ - { - "id": 1, - "title": "Aman", - "key": "status_project_good", - "total": this.state.status_project.good, - "color": GREEN_COLOR, - "text_color": WHITE_COLOR - }, - { - "id": 2, - "title": "Alert", - "key": "status_project_warning", - "total": this.state.status_project.warning, - "color": YELLOW_COLOR, - "text_color": DARK_GREY_COLOR - }, - { - "id": 3, - "title": "Critical", - "key": "status_project_critical", - "total": this.state.status_project.critical, - "color": RED_COLOR, - "text_color": WHITE_COLOR - }] + { + "id": 1, + "title": "Aman", + "key": "status_project_good", + "total": this.state.status_project.good, + "color": GREEN_COLOR, + "text_color": WHITE_COLOR + }, + { + "id": 2, + "title": "Alert", + "key": "status_project_warning", + "total": this.state.status_project.warning, + "color": YELLOW_COLOR, + "text_color": DARK_GREY_COLOR + }, + { + "id": 3, + "title": "Critical", + "key": "status_project_critical", + "total": this.state.status_project.critical, + "color": RED_COLOR, + "text_color": WHITE_COLOR + }] }, { "id": 5, @@ -251,22 +249,22 @@ class DailyInfo extends React.Component { "color": IZIN_COLOR, "text_color": WHITE_COLOR, "children": [ - { - "id": 1, - "title": "Presensi", - "key": "waspang_status_presensi", - "total": this.state.waspang_status.presensi, - "color": GREEN_COLOR, - "text_color": WHITE_COLOR - }, - { - "id": 2, - "title": "Absensi", - "key": "waspang_status_absensi", - "total": this.state.waspang_status.absensi, - "color": ORANGE_COLOR, - "text_color": WHITE_COLOR - }], + { + "id": 1, + "title": "Presensi", + "key": "waspang_status_presensi", + "total": this.state.waspang_status.presensi, + "color": GREEN_COLOR, + "text_color": WHITE_COLOR + }, + { + "id": 2, + "title": "Absensi", + "key": "waspang_status_absensi", + "total": this.state.waspang_status.absensi, + "color": ORANGE_COLOR, + "text_color": WHITE_COLOR + }], }, { "id": 6, @@ -297,7 +295,7 @@ class DailyInfo extends React.Component {
{item.total !== undefined ? item.total : null}
- { item.children ? this.renderChildDailyInfo(item.children) : null } + {item.children ? this.renderChildDailyInfo(item.children) : null} ) }) @@ -310,9 +308,7 @@ class DailyInfo extends React.Component { openTable = async (item) => { - const { dataPresence, dataAbsensi, dataEmployee, dataPanicBtn, dataTelat, dataTanpaKet} = this.state - - console.log('openTable', item); + const { dataPresence, dataAbsensi, dataEmployee, dataPanicBtn, dataTelat, dataTanpaKet } = this.state await this.props.setIsProcessing(true); this.props.removeLayerByName('routeLayer'); // remove the previous routeLayer @@ -327,8 +323,8 @@ class DailyInfo extends React.Component { - - + + @@ -366,7 +362,7 @@ class DailyInfo extends React.Component { } render() { - const { openDialogBottom, itemDialog, dataTableDialog, isReady } = this.state; + const { openDialogBottom, itemDialog, dataTableDialog, isReady } = this.state; if (!isReady) { return (
@@ -411,12 +407,12 @@ class DailyInfo extends React.Component { dataTable={dataTableDialog} /> )} */} - -
- {/*
Status
*/} - {this.renderDailyInfo()} -
- + +
+ {/*
Status
*/} + {this.renderDailyInfo()} +
+ {/* {menu && menu.length > 0 && menu.map((menuItem, index) => { return (
diff --git a/src/components/DailyInfo/DialogBottom.js b/src/components/DailyInfo/DialogBottom.js index 8b2df7d..04486f9 100644 --- a/src/components/DailyInfo/DialogBottom.js +++ b/src/components/DailyInfo/DialogBottom.js @@ -29,7 +29,6 @@ class DialogBottom extends Component { } setMapTableWindow = (type) => { - console.log('setMapTableWindow', type); if (type === 'min') { this.setState({ resizableHeight: 55, tableHeight: 150 }); } @@ -46,7 +45,6 @@ class DialogBottom extends Component { render() { const { isCloseDialog, itemDialog, dataTable } = this.props const { resizableHeight } = this.state - console.log(`resizableHeight`, resizableHeight) return ( - + {itemDialog.key === "presensi" && ( Daftar Kehadiran Karyawan Hari Ini - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - + {dataTable.length === 0 ? +
- - - - + - - - {dataTable.map((item, index) => { - return ( - - - - - - - ) - })} - -
#Nama KaryawanJam MasukJam KeluarNo Data Available
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
- } + + : + + + + + + + + + + + {dataTable.map((item, index) => { + return ( + + + + + + + ) + })} + +
#Nama KaryawanJam MasukJam Keluar
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
+ } )} @@ -156,36 +154,36 @@ class DialogBottom extends Component { Daftar Karyawan Telat Hari Ini - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - + {dataTable.length === 0 ? +
- - - - + - - - {dataTable.map((item, index) => { - return ( - - - - - - - ) - })} - -
#Nama KaryawanJam MasukJam KeluarNo Data Available
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
- } + + : + + + + + + + + + + + {dataTable.map((item, index) => { + return ( + + + + + + + ) + })} + +
#Nama KaryawanJam MasukJam Keluar
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
+ } )} @@ -195,40 +193,40 @@ class DialogBottom extends Component { Daftar Total Karyawan - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - + {dataTable.length === 0 ? +
- - - - - - + - - - {dataTable.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#DevisiNama KaryawanJenis KelaminNo HPAlamatNo Data Available
{++index}{item.devisi_name}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- } + + : + + + + + + + + + + + + + {dataTable.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#DevisiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.devisi_name}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ } )} @@ -238,24 +236,24 @@ class DialogBottom extends Component { Daftar Karyawan Absent Hari ini - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - - - - - - - - -
#Nama KaryawanJam MasukJam Keluar
} - + {dataTable.length === 0 ? + + + + +
No Data Available
+ : + + + + + + + + + +
#Nama KaryawanJam MasukJam Keluar
} + )} @@ -265,40 +263,40 @@ class DialogBottom extends Component { Daftar Karyawan Tanpa Keterangan - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - + {dataTable.length === 0 ? +
- - - - - - + - - - {dataTable.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#DevisiNama KaryawanJenis KelaminNo HPAlamatNo Data Available
{++index}{item.devisi_name}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- } + + : + + + + + + + + + + + + + {dataTable.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#DevisiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.devisi_name}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ } )} @@ -308,36 +306,36 @@ class DialogBottom extends Component { Daftar Karyawan Melakukan Panik Button Hari Ini - {dataTable.length === 0 ? - - - - -
No Data Available
- : - - + {dataTable.length === 0 ? +
- - - - + - - - {dataTable.map((item, index) => { - return ( - - - - - - - ) - })} - -
#Nama KaryawanJam MasukJam KeluarNo Data Available
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
- } + + : + + + + + + + + + + + {dataTable.map((item, index) => { + return ( + + + + + + + ) + })} + +
#Nama KaryawanJam MasukJam Keluar
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
+ } )} diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 1124b63..75bf7bd 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -3,7 +3,8 @@ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; import paginationFactory from 'react-bootstrap-table2-paginator'; import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Badge, Card, CardBody, CardHeader, Col, Row, Table, Button, +import { + Badge, Card, CardBody, CardHeader, Col, Row, Table, Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormText } from 'reactstrap'; @@ -29,19 +30,19 @@ const { ExportCSVButton } = CSVExport; class DataTable extends Component { constructor(props) { - const {columns} = props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); + const { columns } = props + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); super(props) this.state = { columns: [], data: [], selectRow: { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: false, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), + mode: 'checkbox', + clickToSelect: true, + clickToEdit: false, + bgColor: '#e4e5e6', + onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({ row, isSelect, e, rowIndex }), + onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), }, editCellMode: false, onSelectAllMode: false, @@ -51,8 +52,8 @@ class DataTable extends Component { successAlert: false, dangerAlert: false, messageAlert: "", - modalAdd : false, - ... val + modalAdd: false, + ...val } this.mapTableInit = this.mapTableInit.bind(this); this.addNewData = this.addNewData.bind(this); @@ -62,28 +63,28 @@ class DataTable extends Component { fetch(this.props.urlParamGet, { method: 'POST', header: JSON.stringify({ - 'Content-Type': 'application/json' - }) - }).then((response) => response.json()) - .then((responseJson) => { - if(responseJson.code_message === "Success"){ - let dataArray = [] - - for(let i = 0; i < responseJson.data.length; i++){ - dataArray.push(responseJson.data[i]); - } - - this.mapTableInit(dataArray) - - }else{ - - console.log("gagal login"); + 'Content-Type': 'application/json' + }) + }).then((response) => response.json()) + .then((responseJson) => { + if (responseJson.code_message === "Success") { + let dataArray = [] + + for (let i = 0; i < responseJson.data.length; i++) { + dataArray.push(responseJson.data[i]); + } + + this.mapTableInit(dataArray) + + } else { + + } - }).catch((error) => { - - }); + }).catch((error) => { + + }); } - + componentDidMount() { this.getDataTable(); @@ -104,139 +105,135 @@ class DataTable extends Component { } this.setState({ - columns: data.length !== 0 ? columns:dataColumns, + columns: data.length !== 0 ? columns : dataColumns, data: data }) } toggleEditCell = () => { let { editCellMode } = this.state; - console.log("editCellMode ", editCellMode) - editCellMode ? - this.setState({ - editCellMode: false, - selectRow: { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: false, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), - }, - selectedRows: [] - }) : - this.setState({ - editCellMode: true, - selectRow: { - mode: 'checkbox', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), - } - }); + editCellMode ? + this.setState({ + editCellMode: false, + selectRow: { + mode: 'checkbox', + clickToSelect: true, + clickToEdit: false, + bgColor: '#e4e5e6', + onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({ row, isSelect, e, rowIndex }), + onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), + }, + selectedRows: [] + }) : + this.setState({ + editCellMode: true, + selectRow: { + mode: 'checkbox', + clickToSelect: false, + clickToEdit: true, + bgColor: '#e4e5e6', + onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({ row, isSelect, e, rowIndex }), + onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e), + } + }); } addNewData() { alert('add new data'); } - onSelectRowTable = ({row, isSelect, e}) => { - const {selectedRows} = this.state - if(typeof row === "object"){ - if(isSelect){ - this.setState({selectedRows: [...selectedRows, row]}) + onSelectRowTable = ({ row, isSelect, e }) => { + const { selectedRows } = this.state + if (typeof row === "object") { + if (isSelect) { + this.setState({ selectedRows: [...selectedRows, row] }) } else { const idx = selectedRows.indexOf(row) selectedRows.splice(idx, 1) - this.setState({selectedRows}) + this.setState({ selectedRows }) } - + } else { - console.log("type array") - this.setState({selectedRows: row}) + this.setState({ selectedRows: row }) } } onSelectAllRowTable = (isSelect, rows, e) => { - console.log('onSelectAllRowTable isSelect, rows, e', isSelect, rows, e); const { selectedRows } = this.state; if (isSelect === false) { - this.setState({selectedRows: []}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); + this.setState({ selectedRows: [] }, () => { + }); } else if (isSelect === true) { let row = rows.map((item, index) => { return item; }); - console.log('row', row); - this.setState({selectedRows: row}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); + + this.setState({ selectedRows: row }, () => { + }); } - } + } + + openModalAdd = () => this.setState({ modalAdd: true }) - openModalAdd = () => this.setState({modalAdd: true}) + closeModalAdd = () => this.setState({ modalAdd: false }) - closeModalAdd = () => this.setState({modalAdd: false}) - saveModalAdd = async () => { - - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); - const obj = columns.reduce((obj, item) => Object.assign(obj, { + const { columns } = this.props + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); + + const obj = columns.reduce((obj, item) => Object.assign(obj, { [item.dataField]: item.dataField === "last_updated" || item.dataField === "created_time" || item.dataField === "modified_time" - ? moment().format("YYYY-MM-DD HH:mm:ssZ"): this.state[item.dataField] + ? moment().format("YYYY-MM-DD HH:mm:ssZ") : this.state[item.dataField] }), {}); - console.log("payload insert", obj) const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(obj) } - + try { const result = await fetch(this.props.urlParamInsert, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable(); - this.setState({modalAdd: false, alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) + this.setState({ modalAdd: false, alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val }) } else { - this.setState({modalAdd: false, alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) + this.setState({ modalAdd: false, alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val }) } } catch { - this.setState({modalAdd: false, alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true}) + this.setState({ modalAdd: false, alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true }) } - + } modalAdd = () => { - const {columns} = this.props + const { columns } = this.props return (
Add new {this.props.title} - - {columns.map((res, idx) => { - if(res.showInput){ - return ( - - - this.setState({[res.dataField]: e.target.value})} type={res.type} /> - - ) - } - - })} - + + {columns.map((res, idx) => { + if (res.showInput) { + return ( + + + this.setState({ [res.dataField]: e.target.value })} type={res.type} /> + + ) + } + + })} + - - - {' '} + + + {' '}
@@ -244,22 +241,20 @@ class DataTable extends Component { } updateFunction = async (oldValue, newValue, row, column) => { - let {editCellMode} = this.state - console.log('editCellMode', editCellMode); - console.log(row) + let { editCellMode } = this.state const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(row) } - + const result = await fetch(this.props.urlParamUpdate, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable() - this.setState({alert: true, successAlert: true, dangerAlert: false, messageAlert: result.code_message, editCellMode: false, selectedRows: []}) + this.setState({ alert: true, successAlert: true, dangerAlert: false, messageAlert: result.code_message, editCellMode: false, selectedRows: [] }) } else { - this.setState({alert: true, successAlert: false, dangerAlert: true, messageAlert: result.code_message, editCellMode: false, selectedRows: [] }) + this.setState({ alert: true, successAlert: false, dangerAlert: true, messageAlert: result.code_message, editCellMode: false, selectedRows: [] }) } } @@ -268,172 +263,168 @@ class DataTable extends Component { } deleteFunction = async param => { - const {selectedRows} = this.state - console.log("row selected",selectedRows) - if(param === "delete") { + const { selectedRows } = this.state + if (param === "delete") { - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); + const { columns } = this.props + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(selectedRows) } - + try { const result = await fetch(this.props.urlParamDelete, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable(); - this.setState({alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val, selectedRows: []}) + this.setState({ alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val, selectedRows: [] }) } else { - this.setState({alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val, selectedRows: []}) + this.setState({ alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val, selectedRows: [] }) } } catch { - this.setState({alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true, selectedRows: []}) + this.setState({ alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true, selectedRows: [] }) } } else { - this.setState({alertWarning: false}) + this.setState({ alertWarning: false }) } } - allDeleteFunction = () => { - console.log() - } render() { const { columns, data, selectedRows, selectRow, editCellMode, alert, messageAlert, - alertWarning, deleteData, successAlert, dangerAlert } = this.state; - return ( + alertWarning, deleteData, successAlert, dangerAlert } = this.state; + return ( -
- this.setState({alert: false, successAlert: false, dangerAlert: false})}> +
+ this.setState({ alert: false, successAlert: false, dangerAlert: false })}> {messageAlert} this.deleteFunction("delete")} - onCancel={() => this.deleteFunction("cancel")} - focusCancelBtn + show={alertWarning} + warning + showCancel + confirmBtnText="Yes, delete it!" + confirmBtnBsStyle="danger" + title="Are you sure?" + onConfirm={() => this.deleteFunction("delete")} + onCancel={() => this.deleteFunction("cancel")} + focusCancelBtn > This {this.props.title} will be deleted - - - - - - - Master { this.props.title !== undefined ? this.props.title : 'DataTable' } - - -
- - - {this.modalAdd()} -
- - - - - {data.length === 0 ? ( -
No result found
- ):( -
- - { - props => ( + + + + + + + Master {this.props.title !== undefined ? this.props.title : 'DataTable'} + + +
+ + + {this.modalAdd()} +
+ + + + + {data.length === 0 ? ( +
No result found
+ ) : (
- - -
- -
- - -
+ + { + props => ( +
- -
- Edit
- - this.toggleEditCell()} checked={editCellMode} /> -
- -
- {selectedRows.length > 0 && !editCellMode && } - - - - - Export CSV - + +
+ +
+ + +
+ + +
+ Edit
+ + this.toggleEditCell()} checked={editCellMode} /> +
+ +
+ {selectedRows.length > 0 && !editCellMode && } + + + + + Export CSV + +
+ +
+ + + {/*
*/} +
+ + {editCellMode ? + this.updateFunction(oldValue, newValue, row, column), + })} + /> : + + }
- -
- - - {/*
*/} -
- - { editCellMode ? - this.updateFunction(oldValue, newValue, row, column), - }) } - /> : - - } +
+ ) + } +
-
- ) - } - -
- - )} - - - - - -
- ) + + )} + + + + + +
+ ) } } diff --git a/src/components/DataTableEditDialog/DataTable.js b/src/components/DataTableEditDialog/DataTable.js index 73e3d81..d189a0d 100644 --- a/src/components/DataTableEditDialog/DataTable.js +++ b/src/components/DataTableEditDialog/DataTable.js @@ -3,7 +3,8 @@ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; import paginationFactory from 'react-bootstrap-table2-paginator'; import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Badge, Card, CardBody, CardHeader, Col, Row, Table, Button, +import { + Badge, Card, CardBody, CardHeader, Col, Row, Table, Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormText } from 'reactstrap'; @@ -29,19 +30,19 @@ const { ExportCSVButton } = CSVExport; class DataTable extends Component { constructor(props) { - const {columns} = props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); + const { columns } = props + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); super(props) this.state = { columns: [], data: [], selectRow: { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: false, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectRowTable({row: rows, isSelect, e}), + mode: 'checkbox', + clickToSelect: true, + clickToEdit: false, + bgColor: '#e4e5e6', + onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({ row, isSelect, e, rowIndex }), + onSelectAll: (isSelect, rows, e) => this.onSelectRowTable({ row: rows, isSelect, e }), }, editCellMode: false, onSelectAllMode: false, @@ -51,9 +52,9 @@ class DataTable extends Component { successAlert: false, dangerAlert: false, messageAlert: "", - openDialog : false, - editData : false, - ... val + openDialog: false, + editData: false, + ...val } this.mapTableInit = this.mapTableInit.bind(this); } @@ -62,28 +63,27 @@ class DataTable extends Component { fetch(this.props.urlParamGet, { method: 'POST', header: JSON.stringify({ - 'Content-Type': 'application/json' - }) - }).then((response) => response.json()) - .then((responseJson) => { - if(responseJson.code_message === "Success"){ - let dataArray = [] - - for(let i = 0; i < responseJson.data.length; i++){ - dataArray.push(responseJson.data[i]); - } - - this.mapTableInit(dataArray) - - }else{ - - console.log("gagal login"); + 'Content-Type': 'application/json' + }) + }).then((response) => response.json()) + .then((responseJson) => { + if (responseJson.code_message === "Success") { + let dataArray = [] + + for (let i = 0; i < responseJson.data.length; i++) { + dataArray.push(responseJson.data[i]); + } + + this.mapTableInit(dataArray) + + } else { + } - }).catch((error) => { - - }); + }).catch((error) => { + + }); } - + componentDidMount() { this.getDataTable(); @@ -103,90 +103,89 @@ class DataTable extends Component { } this.setState({ - columns: data.length !== 0 ? columns:dataColumns, + columns: data.length !== 0 ? columns : dataColumns, data: data }) } - onSelectRowTable = ({row, isSelect, e}) => { - const {selectedRows} = this.state - if(typeof row === "object"){ - if(isSelect){ - this.setState({selectedRows: [...selectedRows, row]}) + onSelectRowTable = ({ row, isSelect, e }) => { + const { selectedRows } = this.state + if (typeof row === "object") { + if (isSelect) { + this.setState({ selectedRows: [...selectedRows, row] }) } else { const idx = selectedRows.indexOf(row) selectedRows.splice(idx, 1) - this.setState({selectedRows}) + this.setState({ selectedRows }) } - + } else { - console.log("type array") - this.setState({selectedRows: row}) + this.setState({ selectedRows: row }) } - } + } + + openDialog = () => this.setState({ openDialog: true }) - openDialog = () => this.setState({openDialog: true}) + closeDialog = () => this.setState({ openDialog: false }) - closeDialog = () => this.setState({openDialog: false}) - saveDialog = async () => { - const {editData} = this.state - const {columns, urlParamInsert, urlParamUpdate} = this.props + const { editData } = this.state + const { columns, urlParamInsert, urlParamUpdate } = this.props - const urlParam = editData ? urlParamUpdate:urlParamInsert + const urlParam = editData ? urlParamUpdate : urlParamInsert - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); - const obj = columns.reduce((obj, item) => Object.assign(obj, { + const obj = columns.reduce((obj, item) => Object.assign(obj, { [item.dataField]: item.dataField === "last_updated" || item.dataField === "created_time" || item.dataField === "modified_time" - ? moment().format("YYYY-MM-DD HH:mm:ssZ"): this.state[item.dataField] + ? moment().format("YYYY-MM-DD HH:mm:ssZ") : this.state[item.dataField] }), {}); const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(obj) } - this.setState({selectedRows: []}) + this.setState({ selectedRows: [] }) try { const result = await fetch(urlParam, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable(); - this.setState({openDialog: false, alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) + this.setState({ openDialog: false, alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val }) } else { - this.setState({openDialog: false, alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) + this.setState({ openDialog: false, alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val }) } } catch { - this.setState({openDialog: false, alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true, ...val}) + this.setState({ openDialog: false, alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true, ...val }) } - + } dialogContent = () => { - const {editData, openDialog} = this.state - const {columns} = this.props + const { editData, openDialog } = this.state + const { columns } = this.props return (
- {editData ? "Update data":"Add new"} {this.props.title} - - {columns.map((res, idx) => { - if(res.showInput){ - return ( - - - this.setState({[res.dataField]: e.target.value})} type={res.type} /> - - ) - } - - })} - + {editData ? "Update data" : "Add new"} {this.props.title} + + {columns.map((res, idx) => { + if (res.showInput) { + return ( + + + this.setState({ [res.dataField]: e.target.value })} type={res.type} /> + + ) + } + + })} + - - - {' '} + + + {' '}
@@ -194,7 +193,7 @@ class DataTable extends Component { } getDataUpdate = () => { - const {selectedRows} = this.state + const { selectedRows } = this.state this.setState({ ...selectedRows[0], openDialog: true, @@ -203,22 +202,20 @@ class DataTable extends Component { } updateFunction = async (oldValue, newValue, row, column) => { - let {editCellMode} = this.state - console.log('editCellMode', editCellMode); - console.log(row) + let { editCellMode } = this.state const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(row) } - + const result = await fetch(this.props.urlParamUpdate, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable() - this.setState({alert: true, successAlert: true, dangerAlert: false, messageAlert: result.code_message, editCellMode: false}) + this.setState({ alert: true, successAlert: true, dangerAlert: false, messageAlert: result.code_message, editCellMode: false }) } else { - this.setState({alert: true, successAlert: false, dangerAlert: true, messageAlert: result.code_message }) + this.setState({ alert: true, successAlert: false, dangerAlert: true, messageAlert: result.code_message }) } } @@ -227,164 +224,161 @@ class DataTable extends Component { } deleteFunction = async param => { - const {selectedRows} = this.state - console.log("row selected",selectedRows) - if(param === "delete") { + const { selectedRows } = this.state - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); + if (param === "delete") { + + const { columns } = this.props + const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj), {}); const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(selectedRows) } - + try { const result = await fetch(this.props.urlParamDelete, param).then(response => response.json()).then(res => res) - if(result.data){ + if (result.data) { this.getDataTable(); - this.setState({alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) + this.setState({ alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val }) } else { - this.setState({alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) + this.setState({ alert: true, alertWarning: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val }) } } catch { - this.setState({alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true}) + this.setState({ alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true }) } } else { - this.setState({alertWarning: false}) + this.setState({ alertWarning: false }) } } - allDeleteFunction = () => { - console.log() - } render() { const { columns, data, selectedRows, selectRow, editCellMode, alert, messageAlert, - alertWarning, deleteData, successAlert, dangerAlert } = this.state; - return ( + alertWarning, deleteData, successAlert, dangerAlert } = this.state; + return ( -
- this.setState({alert: false, successAlert: false, dangerAlert: false})}> +
+ this.setState({ alert: false, successAlert: false, dangerAlert: false })}> {messageAlert} this.deleteFunction("delete")} - onCancel={() => this.deleteFunction("cancel")} - focusCancelBtn + show={alertWarning} + warning + showCancel + confirmBtnText="Yes, delete it!" + confirmBtnBsStyle="danger" + title="Are you sure?" + onConfirm={() => this.deleteFunction("delete")} + onCancel={() => this.deleteFunction("cancel")} + focusCancelBtn > This {this.props.title} will be deleted - - - - - - - Master { this.props.title !== undefined ? this.props.title : 'DataTable' } - - -
- - - {this.dialogContent()} -
- - - - - {data.length === 0 ? ( -
No result found
- ):( -
- - { - props => ( + + + + + + + Master {this.props.title !== undefined ? this.props.title : 'DataTable'} + + +
+ + + {this.dialogContent()} +
+ + + + + {data.length === 0 ? ( +
No result found
+ ) : (
- - -
- -
- - -
+ + { + props => ( +
- - {/*
+ +
+ +
+ + +
+ + + {/*
Edit
this.toggleEditCell()} defaultChecked={editCellMode} />
*/} -
- {selectedRows.length === 1 && } - {selectedRows.length > 0 && } - - - - - - Export CSV - +
+ {selectedRows.length === 1 && } + {selectedRows.length > 0 && } + + + + + + Export CSV + +
+ +
+ + + {/*
*/} +
+ this.updateFunction(oldValue, newValue, row, column), + }) : false} + />
- -
- - - {/*
*/} -
- this.updateFunction(oldValue, newValue, row, column), - }) : false } - /> -
+
+ ) + } +
- ) - } - -
- - )} - - - - - -
- ) + + )} + + + + + +
+ ) } } diff --git a/src/components/DefaultImageSlider/DefaultImageSlider.js b/src/components/DefaultImageSlider/DefaultImageSlider.js index 0160b48..d2ec7aa 100644 --- a/src/components/DefaultImageSlider/DefaultImageSlider.js +++ b/src/components/DefaultImageSlider/DefaultImageSlider.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, - Carousel, - CarouselItem, - CarouselControl, - CarouselIndicators, - CarouselCaption + Carousel, + CarouselItem, + CarouselControl, + CarouselIndicators, + CarouselCaption } from 'reactstrap'; import './DefaultImageSlider.css'; import '../../assets/css/customscroll.css'; @@ -21,21 +21,21 @@ class DefaultImageSlider extends Component { activeIndex: 0, animating: false, items: [ - { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 1', - caption: 'Slide 1' - }, - { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 2', - caption: 'Slide 2' - }, - { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 3', - caption: 'Slide 3' - } + { + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 1', + caption: 'Slide 1' + }, + { + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 2', + caption: 'Slide 2' + }, + { + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 3', + caption: 'Slide 3' + } ] } this.setActiveIndex = this.setActiveIndex.bind(this); @@ -46,89 +46,68 @@ class DefaultImageSlider extends Component { } componentDidMount() { - + } componentDidUpdate(prevState, prevProps) { } - /*getImagePopup = async (fid) => { - let resGetImagePopup = await getImagePopup(fid); - console.log('imagePopup resGetImagePopup',resGetImagePopup); - - if (resGetImagePopup.data !== undefined) { - if (resGetImagePopup.data.data.length > 0) { - let imageData = resGetImagePopup.data.data; - let imageArr = []; - for (let i=0; i { return this.state.items.map((item) => { - return ( - this.setAnimating(true)} - onExited={() => this.setAnimating(false)} - > - {item.altText} - {/**/} - - ); + return ( + this.setAnimating(true)} + onExited={() => this.setAnimating(false)} + > + {item.altText} + {/**/} + + ); }); } render() { return ( - - - {this.slides()} - - - + + + {this.slides()} + + + ) } } diff --git a/src/components/DrawingTool/DrawingTool.js b/src/components/DrawingTool/DrawingTool.js index ab17a5f..7a025f3 100644 --- a/src/components/DrawingTool/DrawingTool.js +++ b/src/components/DrawingTool/DrawingTool.js @@ -7,10 +7,10 @@ import turfDestination from '@iconify/icons-geo/turf-destination'; import trashOutline from '@iconify/icons-ion/trash-outline'; import addCircleOutline from '@iconify/icons-ion/add-circle-outline'; import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline'; -import {Draw, Modify, Snap, Select, DragBox, DragAndDrop, Translate} from 'ol/interaction'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Vector as VectorSource} from 'ol/source'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style'; +import { Draw, Modify, Snap, Select, DragBox, DragAndDrop, Translate } from 'ol/interaction'; +import { Vector as VectorLayer } from 'ol/layer'; +import { Vector as VectorSource } from 'ol/source'; +import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; import { AppSwitch } from '@coreui/react'; import DigitizeButton from '@terrestris/react-geo/dist/Button/DigitizeButton/DigitizeButton'; import './DrawingTool.css'; @@ -20,62 +20,62 @@ import { updateFeatureGeometry } from '../../const/GeoserverFunc.js'; const vector = new VectorLayer({ source: new VectorSource(), style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#ffcc33', - width: 3 - }), - image: new CircleStyle({ - radius: 7, - fill: new Fill({ - color: '#ffcc33' - }) - }) + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.7)' + }), + stroke: new Stroke({ + color: '#ffcc33', + width: 3 + }), + image: new CircleStyle({ + radius: 7, + fill: new Fill({ + color: '#ffcc33' + }) + }) }), zIndex: 99 }); const ExampleDraw = { init: function() { - olmap.addInteraction(this.Point); - this.Point.setActive(false); - olmap.addInteraction(this.LineString); - this.LineString.setActive(false); - olmap.addInteraction(this.Polygon); - this.Polygon.setActive(false); - olmap.addInteraction(this.Circle); - this.Circle.setActive(false); + olmap.addInteraction(this.Point); + this.Point.setActive(false); + olmap.addInteraction(this.LineString); + this.LineString.setActive(false); + olmap.addInteraction(this.Polygon); + this.Polygon.setActive(false); + olmap.addInteraction(this.Circle); + this.Circle.setActive(false); }, Point: new Draw({ - source: vector.getSource(), - type: 'Point' + source: vector.getSource(), + type: 'Point' }), LineString: new Draw({ - source: vector.getSource(), - type: 'LineString' + source: vector.getSource(), + type: 'LineString' }), Polygon: new Draw({ - source: vector.getSource(), - type: 'Polygon' + source: vector.getSource(), + type: 'Polygon' }), Circle: new Draw({ - source: vector.getSource(), - type: 'Circle' + source: vector.getSource(), + type: 'Circle' }), getActive: function() { - return this.activeType ? this[this.activeType].getActive() : false; + return this.activeType ? this[this.activeType].getActive() : false; }, setActive: function(type, active) { - if (active) { - this.activeType && this[this.activeType].setActive(false); - this[type].setActive(true); - this.activeType = type; - } else { - this.activeType && this[this.activeType].setActive(false); - this.activeType = null; - } + if (active) { + this.activeType && this[this.activeType].setActive(false); + this[type].setActive(true); + this.activeType = type; + } else { + this.activeType && this[this.activeType].setActive(false); + this.activeType = null; + } } }; ExampleDraw.init();*/ @@ -90,7 +90,7 @@ class DrawingTool extends Component { removeFeature saveDraw olmap*/ - + constructor(props) { super(props) this.toggleSnapping = this.toggleSnapping.bind(this); @@ -101,108 +101,108 @@ class DrawingTool extends Component { const olmap = this.props.olmap; const drawingLayer = new VectorLayer({ name: 'DrawingLayer', - source: new VectorSource(), - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#ffcc33', - width: 3 - }), - image: new CircleStyle({ - radius: 7, - fill: new Fill({ - color: '#ffcc33' - }) - }) - }), - zIndex: 99, - type: 'vector' + source: new VectorSource(), + style: new Style({ + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.7)' + }), + stroke: new Stroke({ + color: '#ffcc33', + width: 3 + }), + image: new CircleStyle({ + radius: 7, + fill: new Fill({ + color: '#ffcc33' + }) + }) + }), + zIndex: 99, + type: 'vector' }); const ExampleDraw = { - init: function() { - olmap.addInteraction(this.Point); - this.Point.setActive(false); - olmap.addInteraction(this.MultiPoint); - this.MultiPoint.setActive(false); - olmap.addInteraction(this.LineString); - this.LineString.setActive(false); - olmap.addInteraction(this.MultiLineString); - this.MultiLineString.setActive(false); - olmap.addInteraction(this.Polygon); - this.Polygon.setActive(false); - olmap.addInteraction(this.MultiPolygon); - this.MultiPolygon.setActive(false); - olmap.addInteraction(this.Circle); - this.Circle.setActive(false); - }, - Point: new Draw({ - source: drawingLayer.getSource(), - type: 'Point' - }), - MultiPoint: new Draw({ - source: drawingLayer.getSource(), - type: 'MultiPoint' - }), - LineString: new Draw({ - source: drawingLayer.getSource(), - type: 'LineString' - }), - MultiLineString: new Draw({ - source: drawingLayer.getSource(), - type: 'MultiLineString' - }), - Polygon: new Draw({ - source: drawingLayer.getSource(), - type: 'Polygon' - }), - MultiPolygon: new Draw({ - source: drawingLayer.getSource(), - type: 'MultiPolygon' - }), - Circle: new Draw({ - source: drawingLayer.getSource(), - type: 'Circle' - }), - getActive: function() { - return this.activeType ? this[this.activeType].getActive() : false; - }, - setActive: function(type, active) { - if (active) { - this.activeType && this[this.activeType].setActive(false); - this[type].setActive(true); - this.activeType = type; - } else { - this.activeType && this[this.activeType].setActive(false); - this.activeType = null; - } - }, - getActiveType: function() { - return this.activeType; - }, - destroy: function() { - olmap.removeInteraction(this.Point); - this.Point.setActive(false); - olmap.removeInteraction(this.MultiPoint); - this.MultiPoint.setActive(false); - olmap.removeInteraction(this.LineString); - this.LineString.setActive(false); - olmap.removeInteraction(this.MultiLineString); - this.MultiLineString.setActive(false); - olmap.removeInteraction(this.Polygon); - this.Polygon.setActive(false); - olmap.removeInteraction(this.MultiPolygon); - this.MultiPolygon.setActive(false); - olmap.removeInteraction(this.Circle); - this.Circle.setActive(false); - } + init: function () { + olmap.addInteraction(this.Point); + this.Point.setActive(false); + olmap.addInteraction(this.MultiPoint); + this.MultiPoint.setActive(false); + olmap.addInteraction(this.LineString); + this.LineString.setActive(false); + olmap.addInteraction(this.MultiLineString); + this.MultiLineString.setActive(false); + olmap.addInteraction(this.Polygon); + this.Polygon.setActive(false); + olmap.addInteraction(this.MultiPolygon); + this.MultiPolygon.setActive(false); + olmap.addInteraction(this.Circle); + this.Circle.setActive(false); + }, + Point: new Draw({ + source: drawingLayer.getSource(), + type: 'Point' + }), + MultiPoint: new Draw({ + source: drawingLayer.getSource(), + type: 'MultiPoint' + }), + LineString: new Draw({ + source: drawingLayer.getSource(), + type: 'LineString' + }), + MultiLineString: new Draw({ + source: drawingLayer.getSource(), + type: 'MultiLineString' + }), + Polygon: new Draw({ + source: drawingLayer.getSource(), + type: 'Polygon' + }), + MultiPolygon: new Draw({ + source: drawingLayer.getSource(), + type: 'MultiPolygon' + }), + Circle: new Draw({ + source: drawingLayer.getSource(), + type: 'Circle' + }), + getActive: function () { + return this.activeType ? this[this.activeType].getActive() : false; + }, + setActive: function (type, active) { + if (active) { + this.activeType && this[this.activeType].setActive(false); + this[type].setActive(true); + this.activeType = type; + } else { + this.activeType && this[this.activeType].setActive(false); + this.activeType = null; + } + }, + getActiveType: function () { + return this.activeType; + }, + destroy: function () { + olmap.removeInteraction(this.Point); + this.Point.setActive(false); + olmap.removeInteraction(this.MultiPoint); + this.MultiPoint.setActive(false); + olmap.removeInteraction(this.LineString); + this.LineString.setActive(false); + olmap.removeInteraction(this.MultiLineString); + this.MultiLineString.setActive(false); + olmap.removeInteraction(this.Polygon); + this.Polygon.setActive(false); + olmap.removeInteraction(this.MultiPolygon); + this.MultiPolygon.setActive(false); + olmap.removeInteraction(this.Circle); + this.Circle.setActive(false); + } }; const snap = new Snap({ - source: drawingLayer.getSource() + source: drawingLayer.getSource() }); const select = new Select(); @@ -249,7 +249,7 @@ class DrawingTool extends Component { this.rebuildDrawPanel(); } if (this.state.modifyMode) { - this.enableModify(); + this.enableModify(); } else if (!this.state.modifyMode) { this.disableModify(); @@ -266,7 +266,7 @@ class DrawingTool extends Component { const { drawingLayer } = this.state; drawingLayer.getSource().clear(); - this.setState({snapMode: false}); + this.setState({ snapMode: false }); this.disableModify(); this.checkDrawingVisible(); @@ -292,12 +292,12 @@ class DrawingTool extends Component { let drawingExist = false; olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { - drawingExist = true; - } - else { + if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { + drawingExist = true; + } + else { drawingExist = false; - } + } }); if (!drawingExist) { @@ -310,18 +310,17 @@ class DrawingTool extends Component { DrawingUtil.setActive(this.props.geomType, true); let drawingActiveType = DrawingUtil.getActiveType(); - console.log('drawingActiveType', drawingActiveType); if (drawingActiveType.toLowerCase().includes('multi')) { - this.setState({isMultiGeom: true}); + this.setState({ isMultiGeom: true }); } else { - this.setState({isMultiGeom: false}); + this.setState({ isMultiGeom: false }); } DrawingUtil[drawingActiveType].on('drawend', (evt) => { - this.setState({modifyMode: true}); + this.setState({ modifyMode: true }); }, this) } @@ -344,29 +343,29 @@ class DrawingTool extends Component { let layersToRemove = []; this.props.olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { - layersToRemove.push(layer); - } - if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') { - layersToRemove.push(layer); - } + if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { + layersToRemove.push(layer); + } + if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') { + layersToRemove.push(layer); + } }); - for(var i = 0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); + for (var i = 0; i < layersToRemove.length; i++) { + this.props.olmap.removeLayer(layersToRemove[i]); } - this.setState({snapMode: false}); + this.setState({ snapMode: false }); this.props.cancelDraw(); } toggleSnapping() { - this.setState({snapMode: !this.state.snapMode}); + this.setState({ snapMode: !this.state.snapMode }); } toggleSelect() { - this.setState({selectMode: !this.state.selectMode}); + this.setState({ selectMode: !this.state.selectMode }); } toggleModify() { @@ -377,7 +376,7 @@ class DrawingTool extends Component { } toggleDrag() { - this.setState({dragMode: !this.state.dragMode}); + this.setState({ dragMode: !this.state.dragMode }); } addNewGeometry = () => { @@ -389,7 +388,7 @@ class DrawingTool extends Component { removeSelectedGeometry = () => { const { olmap } = this.props; olmap.getLayers().forEach((layer, i) => { - console.log('layer', layer); + }) } @@ -407,15 +406,14 @@ class DrawingTool extends Component { coordinates: [], layer_attributes: null } - console.log('obj', obj); if (features.length < 1) { alert('Please create a feature before continuing'); - return; - } + return; + } else { features.forEach((feature, i) => { - console.log('feature', feature); + obj.coordinates[i] = feature.getGeometry().getCoordinates(); }); } @@ -425,7 +423,7 @@ class DrawingTool extends Component { this.props.setDrawingState(DrawingUtil, drawingLayer, chosenLayer); } else if (mode == 'edit') { - console.log('mode ediitttt'); + let confirmation = window.confirm('Are you sure you want to update this feature geometry?'); if (!confirmation) { return; @@ -440,7 +438,6 @@ class DrawingTool extends Component { coordinates: [], layer_attributes: null } - console.log('obj', obj); features.forEach((feature, i) => { obj.coordinates[i] = feature.getGeometry().getCoordinates(); @@ -452,7 +449,6 @@ class DrawingTool extends Component { window.location.reload(); } else { - console.log('error', response.result); alert('Failed to update feature geometry'); return; } @@ -469,47 +465,31 @@ class DrawingTool extends Component { let chosenLayer = null; - /* - - DrawingUtil.init(); - DrawingUtil.setActive(this.props.geomType, true); - - let drawingActiveType = DrawingUtil.getActiveType(); - console.log('drawingActiveType', drawingActiveType); - - - if (drawingActiveType.toLowerCase().includes('multi')) { - this.setState({isMultiGeom: true}); - } - else { - this.setState({isMultiGeom: false}); - }*/ if (this.props.geomType.toLowerCase().includes('multi')) { - this.setState({isMultiGeom: true}); + this.setState({ isMultiGeom: true }); } else { - this.setState({isMultiGeom: false}); + this.setState({ isMultiGeom: false }); } this.props.olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - modifySelectedFeature = new Modify({ + if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') { + chosenLayer = layer; + modifySelectedFeature = new Modify({ source: layer.getSource(), features: layer.getSource().getFeatures() }); - } + } }); if (!modifySelectedFeature) { alert('Please select a feature to edit'); return; } else { - console.log(modifySelectedFeature); this.props.olmap.addInteraction(this.state.select); this.props.olmap.addInteraction(modifySelectedFeature); - this.setState({chosenLayer: chosenLayer, modifySelectedFeature: modifySelectedFeature}); + this.setState({ chosenLayer: chosenLayer, modifySelectedFeature: modifySelectedFeature }); } } @@ -519,80 +499,80 @@ class DrawingTool extends Component { return (
-
-

- {this.props.title}
- {this.props.layerName ? this.props.layerName : "Layer Name is not defined"}
- {this.props.geomType} -

-
- {/*
+
+

+ {this.props.title}
+ {this.props.layerName ? this.props.layerName : "Layer Name is not defined"}
+ {this.props.geomType} +

+
+ {/*
*/} -
- {/**/} - - - Cancel Feature - + + + Cancel Feature + - {/*{ modifyMode ? + {/*{ modifyMode ? : null }*/} - { isMultiGeom && - - - - Add New Geometry - - - - Remove Selected Geometry - - - } - {/* + + Add New Geometry + + + + Remove Selected Geometry + + + } + {/* */} - - {/**/} - - - Accept Feature - -
- -
-
- Snapping
- { snapMode ? - - : - } -
- - {/*
+ + + Accept Feature + +
+ +
+
+ Snapping
+ {snapMode ? + + : + } +
+ + {/*
Modify
{ modifyMode ? @@ -600,18 +580,18 @@ class DrawingTool extends Component { }
*/} - {/*
+ {/*
Drag
{ dragMode ? : }
*/} -
-
-
-
- ) +
+
+
+
+ ) } } diff --git a/src/components/EditFeature/EditFeature.js b/src/components/EditFeature/EditFeature.js index dec93d7..56cd9ed 100644 --- a/src/components/EditFeature/EditFeature.js +++ b/src/components/EditFeature/EditFeature.js @@ -1,7 +1,9 @@ import React, { Component, Fragment } from 'react'; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, -Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; +import { + Modal, ModalHeader, ModalBody, ModalFooter, Button, + UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, + Form, FormGroup, Label, Input, Row, Col +} from 'reactstrap'; import { Icon } from '@iconify/react'; import removeCircle from '@iconify/icons-ion/remove-circle'; import './EditFeature.css'; @@ -43,35 +45,33 @@ class EditFeature extends Component { }); } - this.setState({fid: data.id, dataArr: dataArr}); + this.setState({ fid: data.id, dataArr: dataArr }); } matchLayerAttribute = (propKey) => { - console.log('[EditFeature] matchLayerAttribute propKey', propKey); - const { layer_attribute } = this.props; - console.log('[EditFeature] layer_attribute', layer_attribute); - if (layer_attribute.length > 0) { - 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; - } - } - else { - if (propKey == layer_attribute[i].attribute) { - return layer_attribute[i].attribute; - } - } - } - } - } - else { - let output = formatLabel(propKey); - return output; - } - } + const { layer_attribute } = this.props; + if (layer_attribute.length > 0) { + 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; + } + } + else { + if (propKey == layer_attribute[i].attribute) { + return layer_attribute[i].attribute; + } + } + } + } + } + else { + let output = formatLabel(propKey); + return output; + } + } renderEditInputs = () => { @@ -80,25 +80,25 @@ class EditFeature extends Component { return dataArr.map((item, index) => { return ( - - - {/**/} - - - - - + + + {/**/} + + + + + ) }); } handleChangeInputPropertyValue = (idx, event) => { - event.preventDefault(); + event.preventDefault(); let value = event.target.value; let { dataArr } = this.state; - let changedItem = findWhere(dataArr, {idx: idx}); + let changedItem = findWhere(dataArr, { idx: idx }); changedItem.value = value; - this.setState({dataArr: dataArr}, () => { + this.setState({ dataArr: dataArr }, () => { }); } @@ -108,17 +108,6 @@ class EditFeature extends Component { let { fid, dataArr } = this.state; let response = await updateFeature(layerName, fid, dataArr); - console.log('updateFeature response', response); - - /*let parser = new DOMParser(); - let xmlDoc = null; - if (response.data !== undefined) { - xmlDoc = parser.parseFromString(response.data, "text/xml"); - } - - console.log('xmlDoc',xmlDoc); - alert('Update success!');*/ - if (response.success) { alert(response.result); this.props.toggleEditFeature(); @@ -132,28 +121,28 @@ class EditFeature extends Component { render() { const { dataArr } = this.state; - return( -
+ return ( +
- {this.props.editFeatureTitle ? this.props.editFeatureTitle : 'Edit Feature' } - - {dataArr !== undefined ? - dataArr !== null ? -
-
this.updateFeature(e)}> - { this.renderEditInputs() } -
-
- : 'Data is null' - : 'Data is undefined' - } - - - - - - -
+ {this.props.editFeatureTitle ? this.props.editFeatureTitle : 'Edit Feature'} + + {dataArr !== undefined ? + dataArr !== null ? +
+
this.updateFeature(e)}> + {this.renderEditInputs()} +
+
+ : 'Data is null' + : 'Data is undefined' + } + + + + + + +
) } } diff --git a/src/components/EditTableColumn/EditTableColumn.js b/src/components/EditTableColumn/EditTableColumn.js index c294119..5248f3c 100644 --- a/src/components/EditTableColumn/EditTableColumn.js +++ b/src/components/EditTableColumn/EditTableColumn.js @@ -1,7 +1,9 @@ import React, { Component, Fragment } from 'react'; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, -Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; +import { + Modal, ModalHeader, ModalBody, ModalFooter, Button, + UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, + Form, FormGroup, Label, Input, Row, Col +} from 'reactstrap'; import { Icon } from '@iconify/react'; import removeCircle from '@iconify/icons-ion/remove-circle'; import './EditTableColumn.css'; @@ -18,7 +20,6 @@ class EditTableColumn extends Component { componentDidMount() { let newColumns = []; - console.log('editedColumnsData',this.props.editedColumnsData); if (this.props.editedColumnsData !== undefined) { this.props.editedColumnsData.map((item, index) => { newColumns.push({ @@ -27,8 +28,7 @@ class EditTableColumn extends Component { column_type: item.column_type }) }) - console.log('newColumns', newColumns); - this.setState({columns: newColumns}); + this.setState({ columns: newColumns }); } } @@ -36,51 +36,50 @@ class EditTableColumn extends Component { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + + + ) } renderColumnsInput = () => { const { columns } = this.state; - console.log('renderColumnsInput', columns); return columns.map((item, index) => { return ( - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ) }); } @@ -88,35 +87,31 @@ class EditTableColumn extends Component { renderAddColumnBtn = () => { return ( - - - - - - - + + + + + + + ) } handleChangeInputColumnName(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value.split(" ").join(""); changedItem.column_name = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); + this.setState({ columns: columns }); } handleChangeInputColumnType(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value; changedItem.column_type = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); + this.setState({ columns: columns }); } addColumn = () => { @@ -128,7 +123,6 @@ class EditTableColumn extends Component { } else { maxIdx = Math.max.apply(Math, columns.map((column) => column.idx)); - console.log('maxIdx',maxIdx); newIdx = maxIdx + 1; } let oneColumn = { @@ -136,51 +130,46 @@ class EditTableColumn extends Component { column_name: "", column_type: "" } - this.setState({columns: [...columns, oneColumn]}, () => { - console.log(this.state.columns) + this.setState({ columns: [...columns, oneColumn] }, () => { this.renderColumnsInput(); }); } deleteColumn = (idx) => { - console.log('deleteColumn', idx); let { columns } = this.state; - console.log('columns', columns); - let deletedItem = findWhere(columns, {idx: idx}); - console.log(deletedItem); + let deletedItem = findWhere(columns, { idx: idx }); let afterRemove = without(columns, deletedItem); - console.log(console.log('afterRemove', afterRemove)); - this.setState({columns: afterRemove}); + this.setState({ columns: afterRemove }); } updateTableColumn = () => { - + } render() { const { columns } = this.state; - return( + return ( - {this.props.modalTitle ? this.props.modalTitle : 'Edit Layer Attribute' } - - {columns !== undefined ? - columns !== null ? -
-
- { this.renderColumnsHeader() } - { this.renderColumnsInput() } - { this.renderAddColumnBtn() } -
-
- : 'Columns is null' - : 'Columns is undefined' - } - - - - - - + {this.props.modalTitle ? this.props.modalTitle : 'Edit Layer Attribute'} + + {columns !== undefined ? + columns !== null ? +
+
+ {this.renderColumnsHeader()} + {this.renderColumnsInput()} + {this.renderAddColumnBtn()} +
+
+ : 'Columns is null' + : 'Columns is undefined' + } + + + + + + ) } } diff --git a/src/components/EditTableColumn/EditTableColumn_backup.js b/src/components/EditTableColumn/EditTableColumn_backup.js index c294119..5248f3c 100644 --- a/src/components/EditTableColumn/EditTableColumn_backup.js +++ b/src/components/EditTableColumn/EditTableColumn_backup.js @@ -1,7 +1,9 @@ import React, { Component, Fragment } from 'react'; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, -Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; +import { + Modal, ModalHeader, ModalBody, ModalFooter, Button, + UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, + Form, FormGroup, Label, Input, Row, Col +} from 'reactstrap'; import { Icon } from '@iconify/react'; import removeCircle from '@iconify/icons-ion/remove-circle'; import './EditTableColumn.css'; @@ -18,7 +20,6 @@ class EditTableColumn extends Component { componentDidMount() { let newColumns = []; - console.log('editedColumnsData',this.props.editedColumnsData); if (this.props.editedColumnsData !== undefined) { this.props.editedColumnsData.map((item, index) => { newColumns.push({ @@ -27,8 +28,7 @@ class EditTableColumn extends Component { column_type: item.column_type }) }) - console.log('newColumns', newColumns); - this.setState({columns: newColumns}); + this.setState({ columns: newColumns }); } } @@ -36,51 +36,50 @@ class EditTableColumn extends Component { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + + + ) } renderColumnsInput = () => { const { columns } = this.state; - console.log('renderColumnsInput', columns); return columns.map((item, index) => { return ( - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ) }); } @@ -88,35 +87,31 @@ class EditTableColumn extends Component { renderAddColumnBtn = () => { return ( - - - - - - - + + + + + + + ) } handleChangeInputColumnName(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value.split(" ").join(""); changedItem.column_name = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); + this.setState({ columns: columns }); } handleChangeInputColumnType(idx, event) { let { columns } = this.state; - let changedItem = findWhere(columns, {idx: idx}); + let changedItem = findWhere(columns, { idx: idx }); let value = event.target.value; changedItem.column_type = value; - console.log('changedItem', changedItem); - this.setState({columns: columns}); - console.log('columns', this.state.columns); + this.setState({ columns: columns }); } addColumn = () => { @@ -128,7 +123,6 @@ class EditTableColumn extends Component { } else { maxIdx = Math.max.apply(Math, columns.map((column) => column.idx)); - console.log('maxIdx',maxIdx); newIdx = maxIdx + 1; } let oneColumn = { @@ -136,51 +130,46 @@ class EditTableColumn extends Component { column_name: "", column_type: "" } - this.setState({columns: [...columns, oneColumn]}, () => { - console.log(this.state.columns) + this.setState({ columns: [...columns, oneColumn] }, () => { this.renderColumnsInput(); }); } deleteColumn = (idx) => { - console.log('deleteColumn', idx); let { columns } = this.state; - console.log('columns', columns); - let deletedItem = findWhere(columns, {idx: idx}); - console.log(deletedItem); + let deletedItem = findWhere(columns, { idx: idx }); let afterRemove = without(columns, deletedItem); - console.log(console.log('afterRemove', afterRemove)); - this.setState({columns: afterRemove}); + this.setState({ columns: afterRemove }); } updateTableColumn = () => { - + } render() { const { columns } = this.state; - return( + return ( - {this.props.modalTitle ? this.props.modalTitle : 'Edit Layer Attribute' } - - {columns !== undefined ? - columns !== null ? -
-
- { this.renderColumnsHeader() } - { this.renderColumnsInput() } - { this.renderAddColumnBtn() } -
-
- : 'Columns is null' - : 'Columns is undefined' - } - - - - - - + {this.props.modalTitle ? this.props.modalTitle : 'Edit Layer Attribute'} + + {columns !== undefined ? + columns !== null ? +
+
+ {this.renderColumnsHeader()} + {this.renderColumnsInput()} + {this.renderAddColumnBtn()} +
+
+ : 'Columns is null' + : 'Columns is undefined' + } + + + + + + ) } } diff --git a/src/components/ImagePopup/ImagePopup.js b/src/components/ImagePopup/ImagePopup.js index a075067..d9fc101 100644 --- a/src/components/ImagePopup/ImagePopup.js +++ b/src/components/ImagePopup/ImagePopup.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, - Carousel, - CarouselItem, - CarouselControl, - CarouselIndicators, - CarouselCaption + Carousel, + CarouselItem, + CarouselControl, + CarouselIndicators, + CarouselCaption } from 'reactstrap'; import './ImagePopup.css'; import '../../assets/css/customscroll.css'; @@ -21,58 +21,39 @@ class ImagePopup extends Component { } componentDidMount() { - - } - /*getImagePopup = async (fid) => { - let resGetImagePopup = await getImagePopup(fid); - console.log('imagePopup resGetImagePopup',resGetImagePopup); + } - if (resGetImagePopup.data !== undefined) { - if (resGetImagePopup.data.data.length > 0) { - let imageData = resGetImagePopup.data.data; - let imageArr = []; - for (let i=0; i - {this.props.imagePopupTitle ? this.props.imagePopupTitle : 'Feature Image'} - -
- -
-
- {/*List*/} -
- - - this.fileInputFrontLicense = fileInputFrontLicense} /> - {/* */} - - - - + + {this.props.imagePopupTitle ? this.props.imagePopupTitle : 'Feature Image'} + +
+ +
+
+ {/*List*/} +
+ + + this.fileInputFrontLicense = fileInputFrontLicense} /> + {/* */} + + + + ) } } diff --git a/src/components/ImageSlider/ImageSlider.js b/src/components/ImageSlider/ImageSlider.js index 501112e..4b53cc8 100644 --- a/src/components/ImageSlider/ImageSlider.js +++ b/src/components/ImageSlider/ImageSlider.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, - Carousel, - CarouselItem, - CarouselControl, - CarouselIndicators, - CarouselCaption + Carousel, + CarouselItem, + CarouselControl, + CarouselIndicators, + CarouselCaption } from 'reactstrap'; import { Image } from 'antd'; import './ImageSlider.css'; @@ -15,19 +15,19 @@ import { BASE_IMAGE, OSPRO_BASE_IMAGE, SIMPRO_BASE_IMAGE } from '../../const/Api const DEFAULT_IMAGE_SLIDER = [ { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 1', - caption: 'Slide 1' + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 1', + caption: 'Slide 1' }, { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 2', - caption: 'Slide 2' + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 2', + caption: 'Slide 2' }, { - src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - altText: 'Slide 3', - caption: 'Slide 3' + src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + altText: 'Slide 3', + caption: 'Slide 3' } ]; @@ -67,87 +67,83 @@ class ImageSlider extends Component { } renderImagePopup = async (type, id) => { - console.log('renderImagePopup type: ',type); - console.log('renderImagePopup id: ', id); let resGetImagePopup = await getImagePopup(type, id); - console.log("resGetImagePopup", resGetImagePopup) if (resGetImagePopup.data !== undefined) { if (resGetImagePopup.data.data.length > 0) { let imageData = resGetImagePopup.data.data; let category = ""; let imageArr = []; - for (let i=0; i { return this.state.items.map((item) => { - return ( - this.setAnimating(true)} - onExited={() => this.setAnimating(false)} - > - {item.altText} - {/**/} - - ); + return ( + this.setAnimating(true)} + onExited={() => this.setAnimating(false)} + > + {item.altText} + {/**/} + + ); }); } render() { return ( - - - {this.slides()} - - - + + + {this.slides()} + + + ) } } diff --git a/src/components/LayerTreeAdm/LayerTreeAdm.js b/src/components/LayerTreeAdm/LayerTreeAdm.js index 53b1658..2fa7623 100644 --- a/src/components/LayerTreeAdm/LayerTreeAdm.js +++ b/src/components/LayerTreeAdm/LayerTreeAdm.js @@ -620,7 +620,6 @@ class LayerTreeAdm extends Component { if (result && result.data && result.data.code == 200) { - // console.log("cek proyek", result) let dataRes = result.data.data || []; let children = this.getChildrenTree(dataRes); @@ -701,7 +700,6 @@ class LayerTreeAdm extends Component { }); onRightClick = (e, node) => { - console.log("[LayerTreeGeoHR] onRightClick e", e); e.event.persist(); this.setState({ rightClickContentVisible: true, @@ -784,7 +782,6 @@ class LayerTreeAdm extends Component { projectTree, checkedKeysProjectTree, } = this.props; - console.log(`checkedKeysProjectTree`, checkedKeysProjectTree); if (!isReady) { return (
diff --git a/src/components/LayerTreeAdm/LayerTreeGeoHR_salesver.js b/src/components/LayerTreeAdm/LayerTreeGeoHR_salesver.js index 4b3c1c6..82788d2 100644 --- a/src/components/LayerTreeAdm/LayerTreeGeoHR_salesver.js +++ b/src/components/LayerTreeAdm/LayerTreeGeoHR_salesver.js @@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react'; import { Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; import { Tree, Input as SearchInput, Menu, Dropdown } from 'antd'; import { API_GEOHR_GROUP_SALES_SEARCH } from '../../const/ApiConst.js'; -import { salesTree, customerTree, officeTree, demografiTree, analisaTree} from '../../const/LayerTreeConst.js'; +import { salesTree, customerTree, officeTree, demografiTree, analisaTree } from '../../const/LayerTreeConst.js'; import Loader from 'react-loader-spinner' import "react-loader-spinner/dist/loader/css/react-spinner-loader.css" import './LayerTreeGeoHR.css' @@ -18,12 +18,12 @@ const { Search } = SearchInput; class LayerTreeGeoHR extends Component { - constructor(props) { - super(props); - this.state = { - treeData: [], - checkedKeys: [], - isReady: false, + constructor(props) { + super(props); + this.state = { + treeData: [], + checkedKeys: [], + isReady: false, rightClickContentVisible: false, allCheckNodes: [], salesGroupTree: null, @@ -33,17 +33,17 @@ class LayerTreeGeoHR extends Component { id: "", dropdownTitle: "" } - } + } this.wrapperRightClickContentRef = React.createRef(); this.handleClickOutside = this.handleClickOutside.bind(this); - } + } - componentDidMount() { - this.setState({isReady: true}) + componentDidMount() { + this.setState({ isReady: true }) this.getSalesGroup(); document.addEventListener('mousedown', this.handleClickOutside); - } + } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); @@ -52,19 +52,18 @@ class LayerTreeGeoHR extends Component { getSalesGroup = async () => { const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify({ - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "columns": [ - {"name":"name", "logic_operator": "ilike", "value": "", "operator": "and"} + { "name": "name", "logic_operator": "ilike", "value": "", "operator": "and" } ], - "orders": {"columns": ["name"], "ascending": true} + "orders": { "columns": ["name"], "ascending": true } }) } try { const result = await fetch(API_GEOHR_GROUP_SALES_SEARCH, param).then(response => response.json()).then(res => res); - console.log('getSalesGroup result', result); if (result.data) { let salesGroupTree_ = []; let children = []; @@ -74,10 +73,10 @@ class LayerTreeGeoHR extends Component { }); if (result.data.length > 0) { - for (let i=0; i < result.data.length; i++) { + for (let i = 0; i < result.data.length; i++) { children.push({ "title": result.data[i].name, - "key": "sales-0-"+i, + "key": "sales-0-" + i, "sales_group_id": result.data[i].id }); } @@ -101,52 +100,51 @@ class LayerTreeGeoHR extends Component { data.map(item => { if (item.children) { return ( - - {this.renderTreeNodes(item.children)} - + + {this.renderTreeNodes(item.children)} + ); } return ( - - ); + + ); }) - onRightClick = (e, node) => { - console.log('[LayerTreeGeoHR] onRightClick e',e); - e.event.persist(); - this.setState({ - rightClickContentVisible: true, - rightClickNodeTreeItem: { - pageX: e.event.pageX, - pageY: e.event.pageY , - id: e.node.props.dataRef.key, - dropdownTitle: e.node.props.dataRef.title - } - }); - } + onRightClick = (e, node) => { + e.event.persist(); + this.setState({ + rightClickContentVisible: true, + rightClickNodeTreeItem: { + pageX: e.event.pageX, + pageY: e.event.pageY, + id: e.node.props.dataRef.key, + dropdownTitle: e.node.props.dataRef.title + } + }); + } - rightClickContent = () => { + rightClickContent = () => { const { pageX, pageY, id, dropdownTitle } = { ...this.state.rightClickNodeTreeItem }; const tmpStyle = { - position:"absolute", + position: "absolute", left: `${pageX}px`, top: `${pageY - 50}px`, - zIndex:99999, - width:"200px", - background:"#ededed", - borderRadius:"5px" + zIndex: 99999, + width: "200px", + background: "#ededed", + borderRadius: "5px" } const menu = (
x -
{ dropdownTitle }
+
{dropdownTitle}
{/*
Go to map
*/}
this.openTable}>Show Data
-
+
); @@ -170,30 +168,30 @@ class LayerTreeGeoHR extends Component { if (!this.wrapperRightClickContentRef.current.contains(event.target)) { this.closeRightClickContent(); } - } + } } - render() { - const { isReady } = this.state; + render() { + const { isReady } = this.state; const { checkedKeysSales, checkedKeysCustomer, checkedKeysOffice, checkedKeysDemografi, checkedKeysAnalisa, - salesGroupTree } = this.props; - if (!isReady) { - return (
- + salesGroupTree } = this.props; + if (!isReady) { + return (
+
) - } + } return ( - - - + + + - + - {/* + {/* */} - - { salesGroupTree ? + + {salesGroupTree ? this.onRightClick(e, node)} > - { this.renderTreeNodes(salesGroupTree)} + {this.renderTreeNodes(salesGroupTree)} : - - + - + - } + }
- - this.onCheckOpt('checkedKeysAnalisa', checkedKeysAnalisa, e)} - defaultExpandedKeys={['analisa-0']} - > - {this.renderTreeNodes(analisaTree)} - + + this.onCheckOpt('checkedKeysAnalisa', checkedKeysAnalisa, e)} + defaultExpandedKeys={['analisa-0']} + > + {this.renderTreeNodes(analisaTree)} + - - this.onCheckOpt('checkedKeysDemografi', checkedKeysDemografi, e)} - defaultExpandedKeys={['demografi-0']} - > - {this.renderTreeNodes(demografiTree)} - + + this.onCheckOpt('checkedKeysDemografi', checkedKeysDemografi, e)} + defaultExpandedKeys={['demografi-0']} + > + {this.renderTreeNodes(demografiTree)} + - - { this.state.rightClickContentVisible && this.rightClickContent()} - + {this.state.rightClickContentVisible && this.rightClickContent()} + + ) } } diff --git a/src/components/MapLayerStyles/MapLayerStyles.js b/src/components/MapLayerStyles/MapLayerStyles.js index 48b1623..e2d520e 100644 --- a/src/components/MapLayerStyles/MapLayerStyles.js +++ b/src/components/MapLayerStyles/MapLayerStyles.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { SketchPicker } from 'react-color'; -import { +import { Button } from 'reactstrap'; import './MapLayerStyles.css'; @@ -16,25 +16,22 @@ class MapLayerStyles extends Component { } handleChangeComplete = (color, event) => { - console.log('handleChangeComplete',color, event); - this.setState({color: color.hex}); + this.setState({ color: color.hex }); } - applyStyles() { - console.log('apply styles to color...', this.state.color); - } + applyStyles() { } - render() { - return ( -
- - -
- ); - } + render() { + return ( +
+ + +
+ ); + } } export default MapLayerStyles; \ No newline at end of file diff --git a/src/components/MapLeftContent/index.js b/src/components/MapLeftContent/index.js index d17aa25..b8266ad 100644 --- a/src/components/MapLeftContent/index.js +++ b/src/components/MapLeftContent/index.js @@ -11,23 +11,12 @@ import ApiMapMonitoring from '../../services/api/modules/map_monitoring'; const { Search } = Input; const MapLeftContent = () => { - // const { mapLoading } = store.getState().mapReducer; const { mapLoading, projectTree } = useSelector(state => state.mapReducer); - // const [expandedKeys, setExpandedKeys] = useState([]); - // const [searchValue, setSearchValue] = useState(''); - // const [autoExpandParent, setAutoExpandParent] = useState(true); - // const onExpand = (newExpandedKeys) => { - // setExpandedKeys(newExpandedKeys); - // setAutoExpandParent(false); - // }; const onSelect = (selectedKeys, info) => { - console.log('selected', selectedKeys, info); }; const onCheck = (checkedKeys, info) => { - console.log('onCheck', checkedKeys, info); if (checkedKeys.length < 1) { - console.log('clear all user points'); store.dispatch(setUserPoints(null)); store.dispatch(setOpenRight(false)); store.dispatch(setSelectedFeature(null)); @@ -38,68 +27,6 @@ const MapLeftContent = () => { getUserPoints(); }; - // const getParentKey = (key, tree) => { - // let parentKey; - // for (let i = 0; i < tree.length; i++) { - // const node = tree[i]; - // if (node.children) { - // if (node.children.some((item) => item.key === key)) { - // parentKey = node.key; - // } else if (getParentKey(key, node.children)) { - // parentKey = getParentKey(key, node.children); - // } - // } - // } - // return parentKey; - // }; - - // const treeData = useMemo(() => { - // const loop = (data) => - // data.map((item) => { - // const strTitle = item.title; - // const index = strTitle.indexOf(searchValue); - // const beforeStr = strTitle.substring(0, index); - // const afterStr = strTitle.slice(index + searchValue.length); - // const title = - // index > -1 ? ( - // - // {beforeStr} - // {searchValue} - // {afterStr} - // - // ) : ( - // {strTitle} - // ); - // if (item.children) { - // return { - // title, - // key: item.key, - // children: loop(item.children), - // }; - // } - // return { - // title, - // key: item.key, - // }; - // }); - // return loop(projectTree); - // }, [searchValue]); - - // const onChangeSearch = (e) => { - // const { value } = e.target; - // const newExpandedKeys = projectTree - // .map((item) => { - // if (item.title.indexOf(value) > -1) { - // return getParentKey(item.key, projectTree); - // } - // return null; - // }) - // .filter((item, i, self) => item && self.indexOf(item) === i); - // setExpandedKeys(newExpandedKeys); - // setSearchValue(value); - // setAutoExpandParent(true); - // }; - const Content = useMemo(() => { return (
@@ -128,13 +55,6 @@ const MapLeftContent = () => { : <> - {/* */} { projectTree ? { defaultCheckedKeys={['all']} onSelect={onSelect} onCheck={onCheck} - // onExpand={onExpand} - // expandedKeys={expandedKeys} - // autoExpandParent={autoExpandParent} + treeData={projectTree} /> : diff --git a/src/components/MapLegend/MapLegend.js b/src/components/MapLegend/MapLegend.js index 475f759..32bf4bc 100644 --- a/src/components/MapLegend/MapLegend.js +++ b/src/components/MapLegend/MapLegend.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import './MapLegend.css'; +import './MapLegend.css'; import '../../assets/css/customscroll.css'; import { Legend } from '@terrestris/react-geo'; @@ -23,16 +23,15 @@ class MapLegend extends Component { getMapLegend = () => { const { olmap } = this.props; let layersLegend = []; - console.log('getMapLegend', olmap.getLayers()); olmap.getLayers().forEach((layer, i) => { if (layer.get('type') !== 'base') { if (layer.get('type') !== 'vector') { if (layer.get('type') == 'layerGroup') { layer.getLayers().forEach((sublayer, i) => { - if (sublayer.getVisible()) { - layersLegend.push(sublayer); - } - }); + if (sublayer.getVisible()) { + layersLegend.push(sublayer); + } + }); } else { if (layer.getVisible()) { @@ -40,7 +39,7 @@ class MapLegend extends Component { } } } - + } }) let reversedLayersLegend = layersLegend.reverse(); // to get the right position as layer position @@ -52,7 +51,7 @@ class MapLegend extends Component { if (layers.length > 0) { return layers.map((item, index) => { return
- {item.get('name')} + {item.get('name')}
}) } @@ -65,8 +64,8 @@ class MapLegend extends Component {
Map Legend x
- { this.renderMapLegend() } -
+ {this.renderMapLegend()} +
) } diff --git a/src/components/MapRightContent/index.js b/src/components/MapRightContent/index.js index fea2106..4ad2b39 100644 --- a/src/components/MapRightContent/index.js +++ b/src/components/MapRightContent/index.js @@ -5,7 +5,7 @@ import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png'; import './styles.css' import { BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst'; import { Button, Image } from 'antd'; -import {Icon} from '@iconify/react'; +import { Icon } from '@iconify/react'; import closeCircle from '@iconify/icons-mdi/close-circle'; import closeIcon from '@iconify/icons-mdi/close'; import { closePopup } from '../../utils/MapUtils'; @@ -13,59 +13,12 @@ import { closePopup } from '../../utils/MapUtils'; const MapRightContent = () => { const { mapLoading, selectedFeature } = useSelector(state => state.mapReducer); - // const PopupContent = useMemo(() => { - // console.log('selectedFeature', selectedFeature); - // if (selectedFeature && selectedFeature.properties) { - // // let content = []; - // // for (let key in selectedFeature.properties) { - // // content.push( - // // {`${key}`} - // // : - // // {`${selectedFeature.properties[key]}`} - // // ) - // // } - // // console.log('content', content); - - // return ( - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - //
Name:{selectedFeature?.properties['Name']}
Clock in time:{selectedFeature?.properties['Clock in time']}
Clock in location:{selectedFeature?.properties['Clock in location']}
Clock out time:{selectedFeature?.properties['Clock out time']}
Clock out location:{selectedFeature?.properties['Clock out location']}
- // ) - // } - // }, [selectedFeature]) - const renderListProject = (projects) => { if (projects && projects.length > 0) { return (
    - { projects.map(n =>
  • {n.project_name}
    • ) } + {projects.map(n =>
  • {n.project_name}
    • )}
) @@ -76,17 +29,17 @@ const MapRightContent = () => { return (
-
-
+
- -
- -
- - - {/*
+ if (columns !== null) { + return ( +
+ + this.closeAlertResponse()}> + {alertResponseMsg} + + + this.confirmYes()} + onCancel={() => this.confirmOnClose()} + focusCancelBtn + > + {alertConfirmMsg} + + + + + { + props => ( +
+ +
+
+ +
+ + + {/*
@@ -855,51 +671,51 @@ class TableContent extends Component {
*/} -
- - { this.state.selectedRowData && !editCellMode ? -
- - - View on Map - -
- : null - } - - {saveMode && editCellMode && -
- - - Save Changes - -
- } - - {selectedRows.length > 0 && - -
- - - Delete Selected Row - -
- } - -
- Edit Table
- { - this.renderEditCellMode() - } -
- - {/*
+
+ + {this.state.selectedRowData && !editCellMode ? +
+ + + View on Map + +
+ : null + } + + {saveMode && editCellMode && +
+ + + Save Changes + +
+ } + + {selectedRows.length > 0 && + +
+ + + Delete Selected Row + +
+ } + +
+ Edit Table
+ { + this.renderEditCellMode() + } +
+ + {/*
*/} -
- - - - - - this.editTableColumn()}> Edit Table Column - {/* +
+ + + + + + this.editTableColumn()}> Edit Table Column + {/* Export CSV */} - - Export CSV - - - -
- -
- - - {/*
*/} -
- {/* + Export CSV + + + +
+ +
+ + + {/*
*/} +
+ {/**/} - {editCellMode ? - this.updateFunction(oldValue, newValue, row, column) - }) } - /> - : - - } - -
-
- ) - } - - - {this.state.editTableColumnVisible && - this.toggleEditTableColumn()} - modalTitle={`Edit ${this.props.mapTableTitle} attribute`} - editedColumnsData={editedColumnsData} - /> + {editCellMode ? + this.updateFunction(oldValue, newValue, row, column) + })} + /> + : + + } + +
+ + ) } - - ) - } - else { - return null; - } - + + + {this.state.editTableColumnVisible && + this.toggleEditTableColumn()} + modalTitle={`Edit ${this.props.mapTableTitle} attribute`} + editedColumnsData={editedColumnsData} + /> + } + + ) + } + else { + return null; + } + } } @@ -1006,33 +822,33 @@ class MapTable extends Component { return (
- {this.props.mapTableTitle} - -
- {/*
+ {this.props.mapTableTitle} + +
+ {/*
*/} - { - - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={this.props.refreshMapTable} - /> - - } - {/*
+ { + + this.props.setPopupDataTemp(feature)} + openPopupRight={() => this.props.openPopupRight()} + refreshMapTable={this.props.refreshMapTable} + /> + + } + {/*
*/} -
- - {/* +
+ + {/* */} - -
+ + ) } } diff --git a/src/components/MapTable/MapTable_backup.js b/src/components/MapTable/MapTable_backup.js deleted file mode 100644 index 05361f8..0000000 --- a/src/components/MapTable/MapTable_backup.js +++ /dev/null @@ -1,607 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import Draggable, { DraggableCore } from "react-draggable"; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; -import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; -import paginationFactory from 'react-bootstrap-table2-paginator'; -import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Icon, InlineIcon } from '@iconify/react'; -import createOutline from '@iconify/icons-ion/create-outline'; -import earthIcon from '@iconify/icons-ion/earth'; -import archiveOutline from '@iconify/icons-ion/archive-outline'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import { Col, Row } from 'reactstrap'; -import { AppSwitch } from '@coreui/react'; -import './MapTable.css'; -import '../../assets/css/customscroll.css' -import EditTableColumn from '../EditTableColumn'; -import { getTableColumns } from '../../const/GeoserverFunc.js'; -import { API_GET_COLUMN_TABLE } from '../../const/ApiConst.js'; -import { findWhere, without } from 'underscore'; - -import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; -import { Select } from 'ol/interaction'; -import Feature from 'ol/Feature'; -import { Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource } from 'ol/source'; -import { fromLonLat, transformExtent } from 'ol/proj'; - -const { SearchBar } = Search; -const { ExportCSVButton } = CSVExport; -/*const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const products = [ -{ - "id": 0, - "name": "Item name 0", - "price": 2100 -}, -{ - "id": 1, - "name": "Item name 1", - "price": 2101 -}, -{ - "id": 2, - "name": "Item name 2", - "price": 2102 -}, -{ - "id": 3, - "name": "Item name 3", - "price": 2103 -}];*/ - -/*const TableContent = () => { - let tableData = this.props.resTableData; - if (tableData !== null) { - return ( - - { - props => ( -
-

Input something at below input field:

- -
- -
- ) - } - - ) - } -}*/ - - -class TableContent extends Component { - - constructor(props) { - super(props) - this.state = { - fid: 'fid', - columns: null, - data: null, - resTableData: null, - selectRow: { - mode: 'radio', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - clickToEdit: false, - bgColor: '#e4e5e6', - }, - editCellMode: false, - editTableColumnVisible: false, - selectedRowData: null, - editedColumnsData: null, - mapProjection: this.props.olmap.getView().getProjection(), - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - } - } - this.toggleEditCell = this.toggleEditCell.bind(this); - this.mapTableInit = this.mapTableInit.bind(this); - this.activateCellEdit = this.activateCellEdit.bind(this); - } - - componentDidMount() { - console.log('this.state', this.state); - this.mapTableInit(); - } - - componentDidUpdate(prevProps, prevState) { - } - - mapTableInit() { - let columns = []; - let data = []; - let resTableData = this.props.resTableData; - console.log('resTableData', resTableData); - let features = this.props.resTableData.features; - let newProperties = {}; - let countPropKey = 0; - let fidPosIdx = 0; - - /*the data - { - type: - id: - geometry: - geometry_name: - properties: { - gid: - nama: - .... - } - } - I want something like this: - { - type: - id: - geometry: - geometry_name: - properties: { - fid: id -> append the id to the properties, but hide on table, because table only show the properties - gid: - nama: - .... - } - } - - */ - - for (let i=0; i < features.length; i++) { - features[i].properties.fid = features[i].id; // append the key value at the end of object - - /*for(let key in features[i].properties) { - if (countPropKey == fidPosIdx) { - newProperties.fid = features[i].id; - } - newProperties[key] = features[i].properties[key]; - countPropKey++; - } - console.log('newProperties', newProperties); - data.push(newProperties);*/ - - data.push(features[i].properties); - } - - for (let key in features[0].properties) { - columns.push({ - dataField: key, - text: key, - sort: true - }); - } - - - console.log('features', features); - console.log('columns', columns); - console.log('data', data); - - this.setState({ - columns: columns, - data: data, - resTableData: resTableData - }) - } - - toggleEditCell() { - let { editCellMode } = this.state; - if (!editCellMode) { - this.setState({ - editCellMode: true, - selectRow: { - mode: 'radio', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6' - } - }); - } - else { - this.setState({ - editCellMode: false, - selectRow: { - mode: 'radio', - clickToSelect: true, - clickToEdit: false, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - bgColor: '#e4e5e6' - } - }); - } - } - - activateCellEdit() { - return cellEditFactory({ mode: 'click' }); - } - - handleOnSelect = (row, isSelect, rowIndex, e) => { - console.log('handleOnSelect row, isSelect, rowIndex, e', row, isSelect, rowIndex, e); - const { resTableData } = this.state; - let features = resTableData.features; - let selectedRow = findWhere(features, {id: row.fid}); - this.setState({selectedRowData: selectedRow}); - } - - - /*getTableColumns = async (tableName) => { - let obj = { - tableName: tableName - } - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - console.log('result getTableColumns', result); - if(result){ - return result; - } else { - return result; - } - } catch(err) { - return err.message; - } - }*/ - - editTableColumn = async () => { - let reqTableColumns = await getTableColumns(this.props.mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({editedColumnsData: reqTableColumns.result}, () => this.toggleEditTableColumn()); - } - else { - alert(reqTableColumns.result); - return; - } - } - - toggleEditTableColumn = () => { - this.setState({editTableColumnVisible: !this.state.editTableColumnVisible}) - } - - selectFeature = (selectedPopupData) => { - console.log('SearchFeatures selectFeature', selectedPopupData); - this.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - if (selectedPopupData.geometry === null) { - alert('Could not find the geometry'); - return; - } - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); - } - - removeChosenLayer = () => { - let layersToRemove = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - - if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - } - } - - goToFeature = () => { - let selectedFeature = this.state.selectedRowData; - - this.selectFeature(selectedFeature); - - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - - if (chosenLayer === null) { - alert('Could not go to feature because there is no geometry to go'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - console.log('SearchFeatures chosenFeatures', chosenFeatures); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - - this.props.setPopupDataTemp(selectedFeature); - this.props.openPopupRight(); - this.props.toggleMapTable(); - } - - /*createGeomOnFeature = (selectedFeature) => { - let confirmation = window.confirm('Create the geometry anyway?'); - if (!confirmation) { - return; - } - this.props.toggleMapTable(); - }*/ - - - render() { - const { columns, data, selectRow, editCellMode, editedColumnsData, fid } = this.state; - if (columns !== null ) { - return ( -
- - { - props => ( -
- -
-
- -
- - - {/*
- - -
*/} - -
- - { this.state.selectedRowData ? -
- - - View on Map - -
- : null - } -
- Edit Table
- { editCellMode ? - - : - } -
- - {/*
- - - - - Export CSV - -
*/} - -
- - - - - - this.editTableColumn()}> Edit Table Column - {/* - Export CSV - */} - - Export CSV - - - -
- -
- - - {/*
*/} -
- {/**/} - - {editCellMode ? - - : - - } - -
- - ) - } - - - {this.state.editTableColumnVisible && - this.toggleEditTableColumn()} - modalTitle={`Edit ${this.props.mapTableTitle} attribute`} - editedColumnsData={editedColumnsData} - /> - } - - ) - } - else { - return null; - } - - } -} - -class MapTable extends Component { - constructor(props) { - super(props); - } - - componentDidMount() { - } - - render() { - return ( -
- - {this.props.mapTableTitle} - -
- {/*
-
*/} - { - this.props.resTableData !== undefined ? - this.props.resTableData !== null ? - this.props.resTableData.features.length > 0 ? - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - /> - : 'Table Data is empty' - : 'Table Data is null' - : 'Table Data is undefined' - } - {/*
-
*/} -
- - {/* - - */} - -
- ) - } -} - -export default MapTable; \ No newline at end of file diff --git a/src/components/MapTable/MapTable_backup2.js b/src/components/MapTable/MapTable_backup2.js deleted file mode 100644 index e8a95af..0000000 --- a/src/components/MapTable/MapTable_backup2.js +++ /dev/null @@ -1,898 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import Draggable, { DraggableCore } from "react-draggable"; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; -import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; -import paginationFactory from 'react-bootstrap-table2-paginator'; -import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Icon, InlineIcon } from '@iconify/react'; -import createOutline from '@iconify/icons-ion/create-outline'; -import earthIcon from '@iconify/icons-ion/earth'; -import archiveOutline from '@iconify/icons-ion/archive-outline'; -import saveOutline from '@iconify/icons-ion/save-outline'; -import trashOutline from '@iconify/icons-ion/trash-outline'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import { Col, Row } from 'reactstrap'; -import { AppSwitch } from '@coreui/react'; -import './MapTable.css'; -import '../../assets/css/customscroll.css' -import EditTableColumn from '../EditTableColumn'; -import { getTableColumns, updateFeature } from '../../const/GeoserverFunc.js'; -import { API_GET_COLUMN_TABLE } from '../../const/ApiConst.js'; -import { findWhere, without } from 'underscore'; - -import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; -import { Select } from 'ol/interaction'; -import Feature from 'ol/Feature'; -import { Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource } from 'ol/source'; -import { fromLonLat, transformExtent } from 'ol/proj'; -import SweetAlert from 'react-bootstrap-sweetalert'; - -const { SearchBar } = Search; -const { ExportCSVButton } = CSVExport; -/*const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const products = [ -{ - "id": 0, - "name": "Item name 0", - "price": 2100 -}, -{ - "id": 1, - "name": "Item name 1", - "price": 2101 -}, -{ - "id": 2, - "name": "Item name 2", - "price": 2102 -}, -{ - "id": 3, - "name": "Item name 3", - "price": 2103 -}];*/ - -/*const TableContent = () => { - let tableData = this.props.resTableData; - if (tableData !== null) { - return ( - - { - props => ( -
-

Input something at below input field:

- -
- -
- ) - } - - ) - } -}*/ - - -class TableContent extends Component { - - constructor(props) { - super(props) - this.state = { - fid: 'fid', - columns: null, - originalData: null, - data: null, - resTableData: null, - selectRow: { - mode: 'radio', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - clickToEdit: false, - bgColor: '#e4e5e6', - }, - editCellMode: false, - editTableColumnVisible: false, - selectedRowData: null, - editedColumnsData: null, - mapProjection: this.props.olmap.getView().getProjection(), - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - selectedRows: [], - updatedData: [], - alertConfirm: false, - alertConfirmBtnText: '', // Delete, Update - alertConfirmType: '', // danger, success, warning, info - alertConfirmMsg: '', // Under are you sure message: ... ? - confirmParam: '', - alertResponse: false, - alertResponseMsg: '', - successAlert: false, - dangerAlert: false, - saveMode: false - } - this.toggleEditCell = this.toggleEditCell.bind(this); - this.activateCellEdit = this.activateCellEdit.bind(this); - } - - componentDidMount() { - console.log('this.state', this.state); - this.mapTableInit(); - } - - componentDidUpdate(prevProps, prevState) { - } - - mapTableInit = async () => { - let columns = []; - let data = []; - let { resTableData, mapTableTitle } = this.props; - console.log('resTableData', resTableData); - let features = this.props.resTableData.features; - let newProperties = {}; - let countPropKey = 0; - let fidPosIdx = 0; - - if (features.length > 0) { - for (let i=0; i < features.length; i++) { - features[i].properties.fid = features[i].id; // append the key value at the end of object - - /*for(let key in features[i].properties) { - if (countPropKey == fidPosIdx) { - newProperties.fid = features[i].id; - } - newProperties[key] = features[i].properties[key]; - countPropKey++; - } - console.log('newProperties', newProperties); - data.push(newProperties);*/ - - data.push(features[i].properties); - } - - for (let key in features[0].properties) { - if (key == 'fid') { - columns.push({ - dataField: key, - text: key, - sort: true, - hidden: true - }); - } - else { - columns.push({ - dataField: key, - text: key, - sort: true - }); - } - } - } - else { - let reqTableColumns = await getTableColumns(mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - if (reqTableColumns.result !== null) { - if (reqTableColumns.result.length > 0) { - for(let i=0; i < reqTableColumns.result.length; i++) { - let column_name = reqTableColumns.result[i].column_name; - columns.push({ - dataField: column_name, - text: column_name, - sort: true - }); - } - } - } - } - } - - /*the data - { - type: - id: - geometry: - geometry_name: - properties: { - gid: - nama: - .... - } - } - I want something like this: - { - type: - id: - geometry: - geometry_name: - properties: { - fid: id -> append the id to the properties, but hide on table, because table only show the properties - gid: - nama: - .... - } - } - - */ - - console.log('features', features); - console.log('columns', columns); - console.log('data', data); - - this.setState({ - columns: columns, - data: data, - originalData: data, - resTableData: resTableData - }) - } - - toggleEditCell() { - const { editCellMode } = this.state; - if (!editCellMode) { - this.setState({ - editCellMode: true, - selectRow: { - mode: 'checkbox', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e) - } - }); - } - else { - this.setState({ - editCellMode: false, - selectRow: { - mode: 'radio', - clickToSelect: true, - clickToEdit: false, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - bgColor: '#e4e5e6' - } - }); - } - } - - activateCellEdit() { - return cellEditFactory({ mode: 'click' }); - } - - handleOnSelect = (row, isSelect, rowIndex, e) => { - console.log('handleOnSelect row, isSelect, rowIndex, e', row, isSelect, rowIndex, e); - const { resTableData } = this.state; - let features = resTableData.features; - let selectedRow = findWhere(features, {id: row.fid}); - this.setState({selectedRowData: selectedRow}); - } - - onSelectRowTable = ({row, isSelect, e}) => { - const {selectedRows} = this.state - console.log({row, isSelect, e}) - console.log('typeof row',typeof(row)); - if(typeof(row) === "object"){ - if(isSelect){ - this.setState({selectedRows: [...selectedRows, row]}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); - }) - } else { - const idx = selectedRows.indexOf(row) - selectedRows.splice(idx, 1) - this.setState({selectedRows}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); - }) - } - } else { - console.log("type array") - this.setState({selectedRows: row}) - } - } - - onSelectAllRowTable = (isSelect, rows, e) => { - console.log('onSelectAllRowTable isSelect, rows, e', isSelect, rows, e); - const { selectedRows } = this.state; - - if (isSelect === false) { - this.setState({selectedRows: []}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); - }); - } - else if (isSelect === true) { - let row = rows.map((item, index) => { - return item; - }); - console.log('row', row); - this.setState({selectedRows: row}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); - }); - } - } - - - /*getTableColumns = async (tableName) => { - let obj = { - tableName: tableName - } - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - console.log('result getTableColumns', result); - if(result){ - return result; - } else { - return result; - } - } catch(err) { - return err.message; - } - }*/ - - editTableColumn = async () => { - let reqTableColumns = await getTableColumns(this.props.mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({editedColumnsData: reqTableColumns.result}, () => this.toggleEditTableColumn()); - } - else { - alert(reqTableColumns.result); - return; - } - } - - toggleEditTableColumn = () => { - this.setState({editTableColumnVisible: !this.state.editTableColumnVisible}) - } - - selectFeature = (selectedPopupData) => { - console.log('SearchFeatures selectFeature', selectedPopupData); - this.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - if (selectedPopupData.geometry === null) { - alert('Could not find the geometry'); - return; - } - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); - } - - removeChosenLayer = () => { - let layersToRemove = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - - if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - } - } - - goToFeature = () => { - let selectedFeature = this.state.selectedRowData; - - if (selectedFeature.properties.hasOwnProperty("fid")) { - delete selectedFeature.properties["fid"]; - } - this.selectFeature(selectedFeature); - - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - - if (chosenLayer === null) { - alert('Could not go to feature because there is no geometry to go'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - console.log('SearchFeatures chosenFeatures', chosenFeatures); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - - this.props.setPopupDataTemp(selectedFeature); - this.props.openPopupRight(); - this.props.toggleMapTable(); - } - - /*createGeomOnFeature = (selectedFeature) => { - let confirmation = window.confirm('Create the geometry anyway?'); - if (!confirmation) { - return; - } - this.props.toggleMapTable(); - }*/ - - updateFunction = async (oldValue, newValue, row, column) => { - console.log('------ updateFunction ------') - const { data, updatedData } = this.state; - let updatedDataArr = []; - /*console.log('data before', data); - console.log('updateFunction oldValue, newValue, row, column', oldValue, newValue, row, column); - - let updatedRow = findWhere(data, {fid: row.fid}); - console.log('updatedRow', updatedRow); - console.log('data after', data); - - this.setState({data: data, saveMode: true});*/ - - - if (updatedData.length > 0) { - let updatedRow = findWhere(updatedData, {fid: row.fid}); - console.log('updatedRow', updatedRow); - - if (updatedRow == undefined) { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - else { - let idx = updatedData.indexOf(updatedRow) - console.log('idx', idx); - updatedData[idx] = updatedRow; - this.setState({updatedData: updatedData, saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - } - else { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - - } - - deleteFunction = async param => { - const {selectedRows} = this.state - console.log("row selected",selectedRows) - /*if(param === "delete") { - - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(selectedRows) - } - - try { - const result = await fetch(this.props.urlParamDelete, param).then(response => response.json()).then(res => res) - if(result.data){ - this.getDataTable(); - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) - } else { - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) - } - } catch { - this.setState({alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true}) - } - } else { - this.setState({alertConfirm: false}) - }*/ - - if (param === "delete") { - - } - } - - saveUpdate = () => { - this.setState({confirmParam: 'save_update'}, () => this.showConfirm(this.state.confirmParam)); - } - - deleteSelected = () => { - this.setState({confirmParam: 'delete_selected'}, () => this.showConfirm(this.state.confirmParam)); - } - - showConfirm = (param) => { - if (param === 'save_update') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Save', alertConfirmType: 'success', alertConfirmMsg: 'Save the updates'}); - } - else if (param === 'delete_selected') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Delete', alertConfirmType: 'danger', alertConfirmMsg: 'Delete the selected rows'}); - } - } - - confirmYes = async (confirmParam) => { - console.log(confirmParam); - const { data, updatedData } = this.state; - console.log('updatedData', updatedData); - const { mapTableTitle } = this.props; - let fid = null; - let properties = []; - let countSuccess = 0; - let totalUpdatedData = updatedData.length; - if (confirmParam === 'save_update') { - if (updatedData.length > 0) { - for (let i=0; i < updatedData.length; i++) { - fid = updatedData[i].fid; - if (updatedData[i].hasOwnProperty("fid")) { - delete updatedData[i].fid; - let _prop = []; - for(let key in updatedData[i]) { - _prop.push({ - label: key, - value: updatedData[i][key] - }); - } - properties.push(_prop); - } - console.log('confirmYes mapTableTitle, fid, properties', mapTableTitle, fid, properties); - let response = await updateFeature(mapTableTitle, fid, properties[0]); - - if (response.success) { - countSuccess = countSuccess+1; - properties = []; - } - } - - if (countSuccess === totalUpdatedData) { - this.confirmCancel(); - this.setState({alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "All edited values have been saved"}); - } - else { - this.setState({alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved"}); - } - } - } - else if (confirmParam == 'delete_selected') { - - } - } - - confirmCancel = () => { - this.setState({alertConfirm: false, alertConfirmBtnText: '', alertConfirmType: '', alertConfirmMsg: '', confirmParam: ''}); - } - - closeAlertResponse = () => { - this.setState({ - alertResponse: false, successAlert: false, dangerAlert: false, alertResponseMsg: '', - }); - } - - renderEditCellMode = () => { - const { editCellMode } = this.state; - return editCellMode ? - - : - } - - render() { - const { columns, data, selectRow, editCellMode, editedColumnsData, fid, selectedRows, saveMode, - alertResponse, alertResponseMsg, successAlert, dangerAlert, - alertConfirm, alertConfirmBtnText, alertConfirmType, alertConfirmMsg, confirmParam - } = this.state; - - if (columns !== null ) { - return ( -
- - this.closeAlertResponse()}> - {alertResponseMsg} - - - this.confirmYes(confirmParam)} - onCancel={() => this.confirmCancel()} - focusCancelBtn - > - {alertConfirmMsg} - - - - - { - props => ( -
- -
-
- -
- - - {/*
- - -
*/} - -
- - { this.state.selectedRowData && !editCellMode ? -
- - - View on Map - -
- : null - } - - {saveMode && editCellMode && -
- - - Save Changes - -
- } - - {selectedRows.length > 0 && - -
- - - Delete Selected Row - -
- } - -
- Edit Table
- { - this.renderEditCellMode() - } -
- - {/*
- - - - - Export CSV - -
*/} - -
- - - - - - this.editTableColumn()}> Edit Table Column - {/* - Export CSV - */} - - Export CSV - - - -
- -
- - - {/*
*/} -
- {/**/} - - {editCellMode ? - this.updateFunction(oldValue, newValue, row, column) - }) } - /> - : - - } - -
- - ) - } - - - {this.state.editTableColumnVisible && - this.toggleEditTableColumn()} - modalTitle={`Edit ${this.props.mapTableTitle} attribute`} - editedColumnsData={editedColumnsData} - /> - } - - ) - } - else { - return null; - } - - } -} - -class MapTable extends Component { - constructor(props) { - super(props); - } - - componentDidMount() { - } - - render() { - return ( -
- - {this.props.mapTableTitle} - -
- {/*
-
*/} - { - this.props.resTableData !== undefined ? - this.props.resTableData !== null ? - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - /> - : 'Table Data is null' - : 'Table Data is undefined' - } - {/*
-
*/} -
- - {/* - - */} - -
- ) - } -} - -export default MapTable; \ No newline at end of file diff --git a/src/components/MapTable2/MapTable.js b/src/components/MapTable2/MapTable.js index dd60155..69aed40 100644 --- a/src/components/MapTable2/MapTable.js +++ b/src/components/MapTable2/MapTable.js @@ -4,7 +4,7 @@ import { Point, LineString } from 'ol/geom'; import Feature from 'ol/Feature'; import { Resizable } from "re-resizable"; import React, { Component } from 'react'; -import { Col, Row, Table, Card, CardHeader, CardBody, Input} from 'reactstrap'; +import { Col, Row, Table, Card, CardHeader, CardBody, Input } from 'reactstrap'; import { Icon } from '@iconify/react'; import closeCircleOutline from '@iconify/icons-ion/close-circle-outline'; import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline'; @@ -19,11 +19,11 @@ import './MapTable.css'; const column = [ - { name: "Group Sales" }, - { name: "Name" }, - { name: "Phone Number" }, - { name: "Email" }, - { name: "Address" }, + { name: "Group Sales" }, + { name: "Name" }, + { name: "Phone Number" }, + { name: "Email" }, + { name: "Address" }, ] const style = { @@ -177,82 +177,82 @@ class TableContent extends Component { } componentDidMount() { - + } componentDidUpdate(prevProps, prevState) { if (prevState.selected !== this.state.selected) { - console.log('selected', this.state.selected); + } } goToFeature = (row) => { - console.log('goToFeature', row); + } handleOnSelect = (row, isSelect) => { - console.log('[MapTable2] handleOnSelect', isSelect, row); + if (isSelect) { - this.setState({selected: [...this.state.selected, row.id]}) + this.setState({ selected: [...this.state.selected, row.id] }) } else { - this.setState({selected: this.state.selected.filter(x => x !== row.id)}) + this.setState({ selected: this.state.selected.filter(x => x !== row.id) }) } } handleOnSelectAll = (isSelect, rows) => { - console.log('[MapTable2] handleOnSelectAll', isSelect, rows); + const ids = rows.map(r => r.id); if (isSelect) { - this.setState({selected: ids}) + this.setState({ selected: ids }) } else { - this.setState({selected: []}) + this.setState({ selected: [] }) } } columnTable = () => { const editFormatter = (cell, row, rowIndex) => { - return ( -
- this.goToFeature(row)}> - {/* {' '} + return ( +
+ this.goToFeature(row)}> + {/* {' '} */} -
- ) +
+ ) } - + const column = [ - { + { dataField: 'id', text: 'Action', - formatter:editFormatter - },{ + formatter: editFormatter + }, { dataField: 'employee_group', text: 'Group Employee' - },{ + }, { dataField: 'name', text: 'Name' - },{ + }, { dataField: 'phone_number', text: 'Phone Number' - },{ + }, { dataField: 'email', text: 'Email' - },{ + }, { dataField: 'address', text: 'Address' - } - ]; - + } + ]; + return column } showRouteSelected = async () => { const { selected } = this.state; - console.log('showRouteSelected', selected); + await this.props.setIsProcessing(true); @@ -270,73 +270,73 @@ class TableContent extends Component { if (selected && selected.length > 0) { - for (let i=0; i < selected.length; i++) { + for (let i = 0; i < selected.length; i++) { salesId = selected[i]; let salesRoute = await getSalesRoutingApi(salesId, rangeDate); - console.log('salesRoute', salesRoute); + if (salesRoute && salesRoute.features && salesRoute.features.length > 0 && (salesRoute.features[0].geometry && salesRoute.features[0].geometry.coordinates)) { salesWhoHasRoute.push(salesRoute.features[0]); // then push to salesWhoHasRoute } } if (salesWhoHasRoute.length > 0) { - for (let i=0; i < salesWhoHasRoute.length; i++) { + for (let i = 0; i < salesWhoHasRoute.length; i++) { polyline = salesWhoHasRoute[i].geometry; route = new LineString(polyline.coordinates).transform('EPSG:4326', 'EPSG:3857'); let routeFeature = new Feature({ - type: 'route', - geometry: route, - geometry_name: salesWhoHasRoute[i].geometry_name, - id: salesWhoHasRoute[i].id, - properties: salesWhoHasRoute[i].properties, - routeColor: getRandomColor() - }); - let geoMarker = new Feature({ - type: 'geoMarker', - geometry: new Point(route.getCoordinateAt(0)), - id: salesWhoHasRoute[i].id, - properties: salesWhoHasRoute[i].properties - }); - let startMarker = new Feature({ - type: 'pinRouteStart', - geometry: new Point(route.getCoordinateAt(0)), - id: salesWhoHasRoute[i].id, - properties: salesWhoHasRoute[i].properties - }); - let endMarker = new Feature({ - type: 'pinRouteEnd', - geometry: new Point(route.getCoordinateAt(1)), - id: salesWhoHasRoute[i].id, - properties: salesWhoHasRoute[i].properties - }); - - let animating = false; - - let vectorLayer = new VectorLayer({ - name: 'routeLayer', - source_type: 'routeLayer', - source: new VectorSource({ - features: [routeFeature, geoMarker, startMarker, endMarker], - }), - style: (feature, resolution) => { - if (animating && feature.get('type') === 'geoMarker') { - return null; - } - return ROUTE_MAP_STYLES(feature, resolution); - }, - }); - - vectorLayers.push(vectorLayer); + type: 'route', + geometry: route, + geometry_name: salesWhoHasRoute[i].geometry_name, + id: salesWhoHasRoute[i].id, + properties: salesWhoHasRoute[i].properties, + routeColor: getRandomColor() + }); + let geoMarker = new Feature({ + type: 'geoMarker', + geometry: new Point(route.getCoordinateAt(0)), + id: salesWhoHasRoute[i].id, + properties: salesWhoHasRoute[i].properties + }); + let startMarker = new Feature({ + type: 'pinRouteStart', + geometry: new Point(route.getCoordinateAt(0)), + id: salesWhoHasRoute[i].id, + properties: salesWhoHasRoute[i].properties + }); + let endMarker = new Feature({ + type: 'pinRouteEnd', + geometry: new Point(route.getCoordinateAt(1)), + id: salesWhoHasRoute[i].id, + properties: salesWhoHasRoute[i].properties + }); + + let animating = false; + + let vectorLayer = new VectorLayer({ + name: 'routeLayer', + source_type: 'routeLayer', + source: new VectorSource({ + features: [routeFeature, geoMarker, startMarker, endMarker], + }), + style: (feature, resolution) => { + if (animating && feature.get('type') === 'geoMarker') { + return null; + } + return ROUTE_MAP_STYLES(feature, resolution); + }, + }); + + vectorLayers.push(vectorLayer); } if (vectorLayers.length > 0) { - for (let i=0; i < vectorLayers.length; i++) { + for (let i = 0; i < vectorLayers.length; i++) { this.props.olmap.addLayer(vectorLayers[i]); let extent_ = vectorLayers[i].getSource().getExtent(); - console.log('[MapTable2] extent vectorLayer', extent_); + this.props.olmap.getView().fit(extent_, { size: this.props.olmap.getSize(), duration: 500 }); } } @@ -347,13 +347,9 @@ class TableContent extends Component { } render() { - const { columns, data, resizableHeight} = this.state + const { columns, data, resizableHeight } = this.state const { mapTableColumns, mapTableData, mapTableTitle } = this.props; - console.log('test table', mapTableData) - console.log('test table title', mapTableTitle) - - if (!mapTableData) { return (
@@ -364,383 +360,382 @@ class TableContent extends Component { return ( <> - {/* this.props.handleSearch */} - {mapTableTitle === "TOTAL KARYAWAN" && ( - - - -
- {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? -
{selectedFeature?.properties['image'] ? + {selectedFeature?.properties['image'] ? { - props => ( -
-

Input something at below input field:

- -
- -
- ) + props => ( +
+

Input something at below input field:

+ +
+ +
+ ) } ) @@ -106,41 +108,40 @@ class TableContent extends Component { data: null, resTableData: null, selectRow: { - mode: 'radio', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - clickToEdit: false, - bgColor: '#e4e5e6', + mode: 'radio', + clickToSelect: true, + onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), + clickToEdit: false, + bgColor: '#e4e5e6', }, editCellMode: false, editTableColumnVisible: false, selectedRowData: null, editedColumnsData: null, mapProjection: this.props.olmap.getView().getProjection(), - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - selectedRows: [], - updatedData: [], - alertConfirm: false, - alertConfirmBtnText: '', // Delete, Update - alertConfirmType: '', // danger, success, warning, info - alertConfirmMsg: '', // Under are you sure message: ... ? - confirmParam: '', - alertResponse: false, - alertResponseMsg: '', - successAlert: false, - dangerAlert: false, - saveMode: false + fitOption: { + size: this.props.olmap.getSize(), + duration: 500, + maxZoom: 18 + }, + selectedRows: [], + updatedData: [], + alertConfirm: false, + alertConfirmBtnText: '', // Delete, Update + alertConfirmType: '', // danger, success, warning, info + alertConfirmMsg: '', // Under are you sure message: ... ? + confirmParam: '', + alertResponse: false, + alertResponseMsg: '', + successAlert: false, + dangerAlert: false, + saveMode: false } - this.toggleEditCell = this.toggleEditCell.bind(this); + this.toggleEditCell = this.toggleEditCell.bind(this); this.activateCellEdit = this.activateCellEdit.bind(this); } componentDidMount() { - console.log('this.state', this.state); this.mapTableInit(); } @@ -152,35 +153,34 @@ class TableContent extends Component { - + mapTableInit = async () => { let { mapTableName } = this.props; - let res = await reqTableData(mapTableName); + let res = await reqTableData(mapTableName); if (res.success) { - this.setState({resTableData: res.result}, () => { - this.getLayerAttribute(mapTableName); - }); - } - else { - alert(res.result); - return; - } + this.setState({ resTableData: res.result }, () => { + this.getLayerAttribute(mapTableName); + }); + } + else { + alert(res.result); + return; + } } getLayerAttribute = async (layerName) => { const res = await getLayerAttribute(layerName); if (res.success) { if (res.result.data) { - if (res.result.data.length > 0) { - this.setState({layer_attribute: res.result.data}, () => { - console.log(this.state.layer_attribute); - this.populateMapTable(); - }); - } - } + if (res.result.data.length > 0) { + this.setState({ layer_attribute: res.result.data }, () => { + this.populateMapTable(); + }); + } + } } else { alert(res.result); @@ -190,8 +190,6 @@ class TableContent extends Component { populateMapTable = async () => { const { mapTableName } = this.props; const { resTableData, layer_attribute } = this.state; - console.log('resTableData', resTableData); - console.log('layer_attribute', layer_attribute); let columns = []; let data = []; let features = resTableData.features; @@ -199,32 +197,32 @@ class TableContent extends Component { let countPropKey = 0; let fidPosIdx = 0; - if (features.length > 0) { - for (let i=0; i < features.length; i++) { - features[i].properties.fid = features[i].id; // append the key value at the end of object + if (features.length > 0) { + for (let i = 0; i < features.length; i++) { + features[i].properties.fid = features[i].id; // append the key value at the end of object data.push(features[i].properties); } - 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 (layer_attribute[i].attribute_label !== null && layer_attribute[i].attribute_label !== '') { columns.push({ - dataField: layer_attribute[i].attribute, + dataField: layer_attribute[i].attribute, text: layer_attribute[i].attribute_label, sort: true }); } else { columns.push({ - dataField: layer_attribute[i].attribute, + dataField: layer_attribute[i].attribute, text: layer_attribute[i].attribute, sort: true }); } } - + columns.push({ - dataField: 'fid', + dataField: 'fid', text: 'fid', sort: true, hidden: true @@ -232,34 +230,16 @@ class TableContent extends Component { } - /*for (let key in features[0].properties) { - if (key == 'fid') { - columns.push({ - dataField: key, - text: key, - sort: true, - hidden: true - }); - } - else { - columns.push({ - dataField: key, - text: key, - sort: true - }); - } - }*/ } else { let reqTableColumns = await getTableColumns(mapTableName); - console.log('reqTableColumns', reqTableColumns); if (reqTableColumns.success) { if (reqTableColumns.result !== null) { if (reqTableColumns.result.length > 0) { - for(let i=0; i < reqTableColumns.result.length; i++) { + for (let i = 0; i < reqTableColumns.result.length; i++) { let column_name = reqTableColumns.result[i].column_name; columns.push({ - dataField: column_name, + dataField: column_name, text: column_name, sort: true }); @@ -269,38 +249,6 @@ class TableContent extends Component { } } - /*the data - { - type: - id: - geometry: - geometry_name: - properties: { - gid: - nama: - .... - } - } - I want something like this: - { - type: - id: - geometry: - geometry_name: - properties: { - fid: id -> append the id to the properties, but hide on table, because table only show the properties - gid: - nama: - .... - } - } - - */ - - console.log('features', features); - console.log('columns', columns); - console.log('data', data); - this.setState({ columns: columns, data: data, @@ -314,12 +262,12 @@ class TableContent extends Component { this.setState({ editCellMode: true, selectRow: { - mode: 'checkbox', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e) + mode: 'checkbox', + clickToSelect: false, + clickToEdit: true, + bgColor: '#e4e5e6', + onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({ row, isSelect, e, rowIndex }), + onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e) } }); } @@ -327,11 +275,11 @@ class TableContent extends Component { this.setState({ editCellMode: false, selectRow: { - mode: 'radio', - clickToSelect: true, - clickToEdit: false, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - bgColor: '#e4e5e6' + mode: 'radio', + clickToSelect: true, + clickToEdit: false, + onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), + bgColor: '#e4e5e6' }, selectedRows: [] }); @@ -343,179 +291,146 @@ class TableContent extends Component { } handleOnSelect = (row, isSelect, rowIndex, e) => { - console.log('handleOnSelect row, isSelect, rowIndex, e', row, isSelect, rowIndex, e); const { resTableData } = this.state; let features = resTableData.features; - let selectedRow = findWhere(features, {id: row.fid}); - this.setState({selectedRowData: selectedRow}); + let selectedRow = findWhere(features, { id: row.fid }); + this.setState({ selectedRowData: selectedRow }); } - onSelectRowTable = ({row, isSelect, e}) => { - const {selectedRows} = this.state - console.log({row, isSelect, e}) - console.log('typeof row',typeof(row)); - if(typeof(row) === "object"){ - if(isSelect){ - this.setState({selectedRows: [...selectedRows, row]}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); + onSelectRowTable = ({ row, isSelect, e }) => { + const { selectedRows } = this.state + if (typeof (row) === "object") { + if (isSelect) { + this.setState({ selectedRows: [...selectedRows, row] }, () => { }) } else { const idx = selectedRows.indexOf(row) selectedRows.splice(idx, 1) - this.setState({selectedRows}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); + this.setState({ selectedRows }, () => { }) - } + } } else { - console.log("type array") - this.setState({selectedRows: row}) + this.setState({ selectedRows: row }) } - } + } onSelectAllRowTable = (isSelect, rows, e) => { - console.log('onSelectAllRowTable isSelect, rows, e', isSelect, rows, e); const { selectedRows } = this.state; if (isSelect === false) { - this.setState({selectedRows: []}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); + this.setState({ selectedRows: [] }, () => { }); } else if (isSelect === true) { let row = rows.map((item, index) => { return item; }); - console.log('row', row); - this.setState({selectedRows: row}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); + this.setState({ selectedRows: row }, () => { }); } } - /*getTableColumns = async (tableName) => { - let obj = { - tableName: tableName - } - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - console.log('result getTableColumns', result); - if(result){ - return result; - } else { - return result; - } - } catch(err) { - return err.message; - } - }*/ + editTableColumn = async () => { let reqTableColumns = await getTableColumns(this.props.mapTableName); - console.log('reqTableColumns', reqTableColumns); if (reqTableColumns.success) { - this.setState({editedColumnsData: reqTableColumns.result}, () => this.toggleEditTableColumn()); + this.setState({ editedColumnsData: reqTableColumns.result }, () => this.toggleEditTableColumn()); } else { alert(reqTableColumns.result); return; } - } + } toggleEditTableColumn = () => { - this.setState({editTableColumnVisible: !this.state.editTableColumnVisible}) + this.setState({ editTableColumnVisible: !this.state.editTableColumnVisible }) } selectFeature = (selectedPopupData) => { - console.log('SearchFeatures selectFeature', selectedPopupData); - this.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - if (selectedPopupData.geometry === null) { - alert('Could not find the geometry'); - return; - } - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); + this.removeChosenLayer(); + const select = new Select(); + this.props.olmap.addInteraction(select); + let geomToDisplay = null; + + if (selectedPopupData.geometry === null) { + alert('Could not find the geometry'); + return; + } + + let geomType = selectedPopupData.geometry.type; + let coords = selectedPopupData.geometry.coordinates; + let { mapProjection } = this.state; + if (geomType === "Point") { + geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); + } + else if (geomType === "MultiPoint") { + geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); + } + else if (geomType === "LineString") { + geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); + } + else if (geomType === "MultiLineString") { + geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); + } + else if (geomType === "Polygon") { + geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); + } + else if (geomType === "MultiPolygon") { + geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); + } + + let styleSelected = new Style({ + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.7)' + }), + stroke: new Stroke({ + color: '#1e00ff', + width: 3 + }), + image: new CircleStyle({ + radius: 5, + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.7)' + }), + stroke: new Stroke({ + color: '#1e00ff', + width: 3 + }) + }) + }); + + + let chosenFeature = new Feature({ + geometry: geomToDisplay + }) + + let chosenLayer = new VectorLayer({ + name: 'ChosenLayer', + source: new VectorSource({ + features: [chosenFeature] + }), + style: styleSelected, + type: 'vector' + }); + + this.props.olmap.addLayer(chosenLayer); } removeChosenLayer = () => { - let layersToRemove = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - - if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - } + let layersToRemove = []; + this.props.olmap.getLayers().forEach((layer, i) => { + if (layer.get('name') === 'ChosenLayer') { + layersToRemove.push(layer); + } + }); + + if (layersToRemove.length > 0) { + for (let i = 0; i < layersToRemove.length; i++) { + this.props.olmap.removeLayer(layersToRemove[i]); + } + } } goToFeature = () => { @@ -526,91 +441,47 @@ class TableContent extends Component { } this.selectFeature(selectedFeature); - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - - if (chosenLayer === null) { - alert('Could not go to feature because there is no geometry to go'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - console.log('SearchFeatures chosenFeatures', chosenFeatures); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - - this.props.setPopupDataTemp(selectedFeature); - this.props.openPopupRight(); - this.props.toggleMapTable(); - } + const { fitOption } = this.state; + const proj = "EPSG:3857"; + let chosenLayer = null; + let chosenFeatures = null; + let featureExtent = null; + + this.props.olmap.getLayers().forEach((layer, i) => { + if (layer.get('name') === 'ChosenLayer') { + chosenLayer = layer; + return; + } + }) - /*createGeomOnFeature = (selectedFeature) => { - let confirmation = window.confirm('Create the geometry anyway?'); - if (!confirmation) { + if (chosenLayer === null) { + alert('Could not go to feature because there is no geometry to go'); return; } - this.props.toggleMapTable(); - }*/ - /*updateFunction = async (oldValue, newValue, row, column) => { - console.log('------ updateFunction ------') - const { data, updatedData } = this.state; - let updatedDataArr = []; + chosenFeatures = chosenLayer.getSource().getFeatures(); + featureExtent = chosenFeatures[0].getGeometry().getExtent() - if (updatedData.length > 0) { - let updatedRow = findWhere(updatedData, {fid: row.fid}); - console.log('updatedRow', updatedRow); + this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - if (updatedRow == undefined) { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - else { - let idx = updatedData.indexOf(updatedRow) - console.log('idx', idx); - updatedData[idx] = updatedRow; - this.setState({updatedData: updatedData, saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - } - else { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } + this.props.setPopupDataTemp(selectedFeature); + this.props.openPopupRight(); + this.props.toggleMapTable(); + } - }*/ updateFunction = async (oldValue, newValue, row, column) => { - console.log('oldValue', oldValue); - console.log('newValue', newValue); - console.log('row', row); - console.log('column', column); let value = newValue; let _column = column.dataField; const { mapTableName } = this.props; let _row = row; - console.log('_row', _row); let fid = _row.fid; let _prop = []; if (_row.hasOwnProperty("fid")) { delete _row.fid; - for(let key in _row) { + for (let key in _row) { _prop.push({ label: key, value: _row[key] @@ -623,98 +494,45 @@ class TableContent extends Component { "value": value }; - - console.log('updateFunction', mapTableName, fid, column_value); let response = await updateFeature2(mapTableName, fid, column_value); if (response.success) { - this.setState({alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "The data has been updated", selectedRows: []}, () => { + this.setState({ alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "The data has been updated", selectedRows: [] }, () => { this.onSelectAllRowTable(false); this.mapTableInit(); }); } else { - this.setState({alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved", selectedRows: []}, () => { + this.setState({ alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved", selectedRows: [] }, () => { this.onSelectAllRowTable(false); this.mapTableInit(); }); } - /*for (let i=0; i < updatedData.length; i++) { - if (updatedData[i].hasOwnProperty("fid")) { - delete updatedData[i].fid; - let _prop = []; - for(let key in updatedData[i]) { - _prop.push({ - label: key, - value: updatedData[i][key] - }); - } - properties.push(_prop); - } - console.log('confirmYes mapTableName, fid, properties', mapTableName, fid, properties); - let response = await updateFeature(mapTableName, fid, properties[0]); - if (response.success) { - countSuccess = countSuccess+1; - properties = []; - } - }*/ } - /*deleteFunction = async param => { - const {selectedRows} = this.state - console.log("row selected",selectedRows) - if(param === "delete") { - - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(selectedRows) - } - - try { - const result = await fetch(this.props.urlParamDelete, param).then(response => response.json()).then(res => res) - if(result.data){ - this.getDataTable(); - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) - } else { - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) - } - } catch { - this.setState({alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true}) - } - } else { - this.setState({alertConfirm: false}) - } - - if (param === "delete") { - } - }*/ saveUpdate = () => { - this.setState({confirmParam: 'save_update'}, () => this.showConfirm(this.state.confirmParam)); + this.setState({ confirmParam: 'save_update' }, () => this.showConfirm(this.state.confirmParam)); } deleteSelected = () => { - this.setState({confirmParam: 'delete_selected'}, () => this.showConfirm(this.state.confirmParam)); + this.setState({ confirmParam: 'delete_selected' }, () => this.showConfirm(this.state.confirmParam)); } showConfirm = (param) => { if (param === 'save_update') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Save', alertConfirmType: 'success', alertConfirmMsg: 'Save the updates'}); + this.setState({ alertConfirm: true, alertConfirmBtnText: 'Save', alertConfirmType: 'success', alertConfirmMsg: 'Save the updates' }); } else if (param === 'delete_selected') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Delete', alertConfirmType: 'danger', alertConfirmMsg: 'Delete the selected rows'}); + this.setState({ alertConfirm: true, alertConfirmBtnText: 'Delete', alertConfirmType: 'danger', alertConfirmMsg: 'Delete the selected rows' }); } } confirmYes = async () => { const { data, updatedData, confirmParam } = this.state; - console.log(confirmParam); const { mapTableName } = this.props; let fid = null; let properties = []; @@ -722,12 +540,12 @@ class TableContent extends Component { let totalUpdatedData = updatedData.length; if (confirmParam === 'save_update') { if (updatedData.length > 0) { - for (let i=0; i < updatedData.length; i++) { + for (let i = 0; i < updatedData.length; i++) { fid = updatedData[i].fid; if (updatedData[i].hasOwnProperty("fid")) { delete updatedData[i].fid; let _prop = []; - for(let key in updatedData[i]) { + for (let key in updatedData[i]) { _prop.push({ label: key, value: updatedData[i][key] @@ -735,32 +553,30 @@ class TableContent extends Component { } properties.push(_prop); } - console.log('confirmYes mapTableName, fid, properties', mapTableName, fid, properties); let response = await updateFeature(mapTableName, fid, properties[0]); if (response.success) { - countSuccess = countSuccess+1; + countSuccess = countSuccess + 1; properties = []; } } if (countSuccess === totalUpdatedData) { this.confirmOnClose(); - this.setState({alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "All edited values have been saved"}); + this.setState({ alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "All edited values have been saved" }); } else { - this.setState({alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved"}); + this.setState({ alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved" }); } } } else if (confirmParam == 'delete_selected') { - const {selectedRows} = this.state - console.log('selectedRows', selectedRows); + const { selectedRows } = this.state let countDeleted = 0; if (selectedRows.length > 0) { const { mapTableName } = this.props; - for (let i=0; i < selectedRows.length; i++) { + for (let i = 0; i < selectedRows.length; i++) { let fid = selectedRows[i].fid; let response = await deleteFeature(mapTableName, fid); if (response.success) { @@ -780,14 +596,14 @@ class TableContent extends Component { }); } else { - this.setState({alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops something went wrong! Some of your selected data have not been successfully deleted"}); + this.setState({ alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops something went wrong! Some of your selected data have not been successfully deleted" }); } } } } confirmOnClose = () => { - this.setState({alertConfirm: false, alertConfirmBtnText: '', alertConfirmType: '', alertConfirmMsg: '', confirmParam: ''}); + this.setState({ alertConfirm: false, alertConfirmBtnText: '', alertConfirmType: '', alertConfirmMsg: '', confirmParam: '' }); } closeAlertResponse = () => { @@ -798,8 +614,8 @@ class TableContent extends Component { renderEditCellMode = () => { const { editCellMode } = this.state; - return - } + return + } render() { const { columns, data, selectRow, editCellMode, editedColumnsData, fid, selectedRows, saveMode, @@ -807,46 +623,46 @@ class TableContent extends Component { alertConfirm, alertConfirmBtnText, alertConfirmType, alertConfirmMsg, confirmParam } = this.state; - if (columns !== null ) { - return ( -
- - this.closeAlertResponse()}> - {alertResponseMsg} - - - this.confirmYes()} - onCancel={() => this.confirmOnClose()} - focusCancelBtn - > - {alertConfirmMsg} - - - - - { - props => ( -
- -
- - - -
No Data Available
- : - <> - - - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name===null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- - - } - - - ) - } - {mapTableTitle === "HADIR" && ( - - - - - {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? - - - - -
No Data Available
- : - <> - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - ) - })} - -
#Nama KaryawanJenis MasukJam Keluar
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
- - - } - - - ) - } - {mapTableTitle === "TIDAK HADIR" && ( - - - - - {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? - - - - -
No Data Available
- : - <> - - - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name===null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- - - } - - - ) - } - {mapTableTitle === "KARYAWAN TELAT" && ( - - - - - {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? - - - - -
No Data Available
- : - <> - - - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name===null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- - - } - - - ) - } - {mapTableTitle === "KARYAWAN TANPA KETERANGAN" && ( - - - - - {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? - - - - -
No Data Available
- : - <> - - - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name===null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- - - } - - - ) - } - {mapTableTitle === "PANIK BUTTON" && ( - - - - - {mapTableTitle} - - - this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> - - - - - {mapTableData.length === 0 ? - - - - -
No Data Available
- : - <> - - - - - - - - - - - - - {mapTableData.map((item, index) => { - return ( - - - - - - - - - ) - })} - -
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name===null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
- - - } - - - ) - } + {mapTableTitle === "TOTAL KARYAWAN" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name === null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ + + } + + + ) + } + {mapTableTitle === "HADIR" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + ) + })} + +
#Nama KaryawanJenis MasukJam Keluar
{++index}{item.employee_name}{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}
+ + + } + + + ) + } + {mapTableTitle === "TIDAK HADIR" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name === null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ + + } + + + ) + } + {mapTableTitle === "KARYAWAN TELAT" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name === null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ + + } + + + ) + } + {mapTableTitle === "KARYAWAN TANPA KETERANGAN" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name === null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ + + } + + + ) + } + {mapTableTitle === "PANIK BUTTON" && ( + + + + + {mapTableTitle} + + + this.props.handleSearch(e.target.value)} value={this.props.search} type="text" name="search" id="search" placeholder="Cari nama karyawan" /> + + + + + {mapTableData.length === 0 ? + + + + +
No Data Available
+ : + <> + + + + + + + + + + + + + {mapTableData.map((item, index) => { + return ( + + + + + + + + + ) + })} + +
#OrganisasiNama KaryawanJenis KelaminNo HPAlamat
{++index}{item.organization_name === null ? item.chairman_org || "-" : item.organization_name || "-"}{item.name}{item.gender == "P" ? "Perempuan" : "Laki-laki"}{item.phone_number}{item.address}
+ + + } + + + ) + } {/* */} - {/* { props => ( + {/* { props => (
@@ -758,7 +753,7 @@ class TableContent extends Component { } */} - {/*{ this.state.selected && this.state.selected.length > 0 && + {/*{ this.state.selected && this.state.selected.length > 0 &&
@@ -769,7 +764,7 @@ class TableContent extends Component {
}*/} - {/* + {/*
@@ -793,8 +788,8 @@ class TableContent extends Component {
)} */} {/* */} - -) + + ) } } @@ -814,7 +809,7 @@ class MapTable extends Component { componentDidMount() { } - componentDidUpdate (prevProps, prevState) { + componentDidUpdate(prevProps, prevState) { } handleDelete = () => { @@ -826,41 +821,35 @@ class MapTable extends Component { } showRoute = async (item) => { - console.log('[MapTable2] showRoute', item); - let salesId = item.id; let startDate = moment().startOf('day').format("YYYY-MM-DD HH:mm"); let endDate = moment().endOf('day').format("YYYY-MM-DD HH:mm"); - console.log('startDate', startDate); - console.log('endDate', endDate); let rangeDate = [startDate, endDate]; let route = await getSalesRoutingApi(salesId, rangeDate); if (route) { this.props.showRoute(route); - } + } } setMapTableWindow = (type) => { - console.log('setMapTableWindow', type); if (type === 'min') { - this.setState({resizableHeight: 55, tableHeight: 150}); + this.setState({ resizableHeight: 55, tableHeight: 150 }); } else if (type === "max") { if (this.state.resizableHeight === 625) { - this.setState({resizableHeight: 300, tableHeight: 150, maximizeTitle: "maximize" }); + this.setState({ resizableHeight: 300, tableHeight: 150, maximizeTitle: "maximize" }); } else { - this.setState({resizableHeight: 625, tableHeight: 450, maximizeTitle: "restore" }); + this.setState({ resizableHeight: 625, tableHeight: 450, maximizeTitle: "restore" }); } - + } } handleSearch = (e) => { - console.log('handleSearch MapTable2', e.target.value); - this.setState({search: e.target.value}); + this.setState({ search: e.target.value }); } render() { @@ -872,42 +861,42 @@ class MapTable extends Component { height: this.state.resizableHeight }} maxHeight={625} - enable={{ top:true, right:false, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }} + enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }} onResizeStop={(e, direction, ref, d) => { - this.setState({ - resizableWidth: "100%", // to keep always full width - resizableHeight: this.state.resizableHeight + d.height - }); - - if (e.screenY < 100) { - this.setState({tableHeight: 450}) - } - else if (e.screenY < 150) { - this.setState({tableHeight: 400}) - } - else if (e.screenY < 200) { - this.setState({tableHeight: 350}) - } - else if (e.screenY < 250) { - this.setState({tableHeight: 300}) - } - else if (e.screenY < 300) { - this.setState({tableHeight: 250}) - } - else if (e.screenY < 400) { - this.setState({tableHeight: 200}) - } - else if (e.screenY < 600) { - this.setState({tableHeight: 150}) // default - } - else if (e.screenY >= 600) { - this.setMapTableWindow('min'); - } - }} + this.setState({ + resizableWidth: "100%", // to keep always full width + resizableHeight: this.state.resizableHeight + d.height + }); + + if (e.screenY < 100) { + this.setState({ tableHeight: 450 }) + } + else if (e.screenY < 150) { + this.setState({ tableHeight: 400 }) + } + else if (e.screenY < 200) { + this.setState({ tableHeight: 350 }) + } + else if (e.screenY < 250) { + this.setState({ tableHeight: 300 }) + } + else if (e.screenY < 300) { + this.setState({ tableHeight: 250 }) + } + else if (e.screenY < 400) { + this.setState({ tableHeight: 200 }) + } + else if (e.screenY < 600) { + this.setState({ tableHeight: 150 }) // default + } + else if (e.screenY >= 600) { + this.setMapTableWindow('min'); + } + }} >
-
+
this.setMapTableWindow("min")}> @@ -921,26 +910,26 @@ class MapTable extends Component { {/* */} this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={this.props.refreshMapTable} - tableHeight={this.state.tableHeight} - removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)} - setIsProcessing={(data) => this.props.setIsProcessing(data)} - onShowSizeChange={this.props.onShowSizeChange} - onPagination={this.props.onPagination} - currentPage={this.props.currentPage} - rowsPerPage={this.props.rowsPerPage} - total={this.props.total} - handleSearch={this.props.handleSearch} - search={this.props.search} - /> + mapTableTitle={this.props.mapTableTitle} + mapTableName={this.props.mapTableName} + mapTableColumns={this.props.mapTableColumns} + mapTableData={this.props.mapTableData} + olmap={this.props.olmap} + toggleMapTable={this.props.toggleMapTable} + setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} + openPopupRight={() => this.props.openPopupRight()} + refreshMapTable={this.props.refreshMapTable} + tableHeight={this.state.tableHeight} + removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)} + setIsProcessing={(data) => this.props.setIsProcessing(data)} + onShowSizeChange={this.props.onShowSizeChange} + onPagination={this.props.onPagination} + currentPage={this.props.currentPage} + rowsPerPage={this.props.rowsPerPage} + total={this.props.total} + handleSearch={this.props.handleSearch} + search={this.props.search} + />
) diff --git a/src/components/MapTable2/MapTable_backup.js b/src/components/MapTable2/MapTable_backup.js deleted file mode 100644 index 05361f8..0000000 --- a/src/components/MapTable2/MapTable_backup.js +++ /dev/null @@ -1,607 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import Draggable, { DraggableCore } from "react-draggable"; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; -import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; -import paginationFactory from 'react-bootstrap-table2-paginator'; -import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Icon, InlineIcon } from '@iconify/react'; -import createOutline from '@iconify/icons-ion/create-outline'; -import earthIcon from '@iconify/icons-ion/earth'; -import archiveOutline from '@iconify/icons-ion/archive-outline'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import { Col, Row } from 'reactstrap'; -import { AppSwitch } from '@coreui/react'; -import './MapTable.css'; -import '../../assets/css/customscroll.css' -import EditTableColumn from '../EditTableColumn'; -import { getTableColumns } from '../../const/GeoserverFunc.js'; -import { API_GET_COLUMN_TABLE } from '../../const/ApiConst.js'; -import { findWhere, without } from 'underscore'; - -import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; -import { Select } from 'ol/interaction'; -import Feature from 'ol/Feature'; -import { Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource } from 'ol/source'; -import { fromLonLat, transformExtent } from 'ol/proj'; - -const { SearchBar } = Search; -const { ExportCSVButton } = CSVExport; -/*const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const products = [ -{ - "id": 0, - "name": "Item name 0", - "price": 2100 -}, -{ - "id": 1, - "name": "Item name 1", - "price": 2101 -}, -{ - "id": 2, - "name": "Item name 2", - "price": 2102 -}, -{ - "id": 3, - "name": "Item name 3", - "price": 2103 -}];*/ - -/*const TableContent = () => { - let tableData = this.props.resTableData; - if (tableData !== null) { - return ( - - { - props => ( -
-

Input something at below input field:

- -
- -
- ) - } - - ) - } -}*/ - - -class TableContent extends Component { - - constructor(props) { - super(props) - this.state = { - fid: 'fid', - columns: null, - data: null, - resTableData: null, - selectRow: { - mode: 'radio', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - clickToEdit: false, - bgColor: '#e4e5e6', - }, - editCellMode: false, - editTableColumnVisible: false, - selectedRowData: null, - editedColumnsData: null, - mapProjection: this.props.olmap.getView().getProjection(), - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - } - } - this.toggleEditCell = this.toggleEditCell.bind(this); - this.mapTableInit = this.mapTableInit.bind(this); - this.activateCellEdit = this.activateCellEdit.bind(this); - } - - componentDidMount() { - console.log('this.state', this.state); - this.mapTableInit(); - } - - componentDidUpdate(prevProps, prevState) { - } - - mapTableInit() { - let columns = []; - let data = []; - let resTableData = this.props.resTableData; - console.log('resTableData', resTableData); - let features = this.props.resTableData.features; - let newProperties = {}; - let countPropKey = 0; - let fidPosIdx = 0; - - /*the data - { - type: - id: - geometry: - geometry_name: - properties: { - gid: - nama: - .... - } - } - I want something like this: - { - type: - id: - geometry: - geometry_name: - properties: { - fid: id -> append the id to the properties, but hide on table, because table only show the properties - gid: - nama: - .... - } - } - - */ - - for (let i=0; i < features.length; i++) { - features[i].properties.fid = features[i].id; // append the key value at the end of object - - /*for(let key in features[i].properties) { - if (countPropKey == fidPosIdx) { - newProperties.fid = features[i].id; - } - newProperties[key] = features[i].properties[key]; - countPropKey++; - } - console.log('newProperties', newProperties); - data.push(newProperties);*/ - - data.push(features[i].properties); - } - - for (let key in features[0].properties) { - columns.push({ - dataField: key, - text: key, - sort: true - }); - } - - - console.log('features', features); - console.log('columns', columns); - console.log('data', data); - - this.setState({ - columns: columns, - data: data, - resTableData: resTableData - }) - } - - toggleEditCell() { - let { editCellMode } = this.state; - if (!editCellMode) { - this.setState({ - editCellMode: true, - selectRow: { - mode: 'radio', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6' - } - }); - } - else { - this.setState({ - editCellMode: false, - selectRow: { - mode: 'radio', - clickToSelect: true, - clickToEdit: false, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - bgColor: '#e4e5e6' - } - }); - } - } - - activateCellEdit() { - return cellEditFactory({ mode: 'click' }); - } - - handleOnSelect = (row, isSelect, rowIndex, e) => { - console.log('handleOnSelect row, isSelect, rowIndex, e', row, isSelect, rowIndex, e); - const { resTableData } = this.state; - let features = resTableData.features; - let selectedRow = findWhere(features, {id: row.fid}); - this.setState({selectedRowData: selectedRow}); - } - - - /*getTableColumns = async (tableName) => { - let obj = { - tableName: tableName - } - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - console.log('result getTableColumns', result); - if(result){ - return result; - } else { - return result; - } - } catch(err) { - return err.message; - } - }*/ - - editTableColumn = async () => { - let reqTableColumns = await getTableColumns(this.props.mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({editedColumnsData: reqTableColumns.result}, () => this.toggleEditTableColumn()); - } - else { - alert(reqTableColumns.result); - return; - } - } - - toggleEditTableColumn = () => { - this.setState({editTableColumnVisible: !this.state.editTableColumnVisible}) - } - - selectFeature = (selectedPopupData) => { - console.log('SearchFeatures selectFeature', selectedPopupData); - this.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - if (selectedPopupData.geometry === null) { - alert('Could not find the geometry'); - return; - } - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); - } - - removeChosenLayer = () => { - let layersToRemove = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - - if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - } - } - - goToFeature = () => { - let selectedFeature = this.state.selectedRowData; - - this.selectFeature(selectedFeature); - - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - - if (chosenLayer === null) { - alert('Could not go to feature because there is no geometry to go'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - console.log('SearchFeatures chosenFeatures', chosenFeatures); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - - this.props.setPopupDataTemp(selectedFeature); - this.props.openPopupRight(); - this.props.toggleMapTable(); - } - - /*createGeomOnFeature = (selectedFeature) => { - let confirmation = window.confirm('Create the geometry anyway?'); - if (!confirmation) { - return; - } - this.props.toggleMapTable(); - }*/ - - - render() { - const { columns, data, selectRow, editCellMode, editedColumnsData, fid } = this.state; - if (columns !== null ) { - return ( -
- - { - props => ( -
- - -
- -
- - - {/*
- - -
*/} - -
- - { this.state.selectedRowData ? -
- - - View on Map - -
- : null - } -
- Edit Table
- { editCellMode ? - - : - } -
- - {/*
- - - - - Export CSV - -
*/} - -
- - - - - - this.editTableColumn()}> Edit Table Column - {/* - Export CSV - */} - - Export CSV - - - -
- -
- - - {/*
*/} -
- {/**/} - - {editCellMode ? - - : - - } - -
-
- ) - } - - - {this.state.editTableColumnVisible && - this.toggleEditTableColumn()} - modalTitle={`Edit ${this.props.mapTableTitle} attribute`} - editedColumnsData={editedColumnsData} - /> - } -
- ) - } - else { - return null; - } - - } -} - -class MapTable extends Component { - constructor(props) { - super(props); - } - - componentDidMount() { - } - - render() { - return ( -
- - {this.props.mapTableTitle} - -
- {/*
-
*/} - { - this.props.resTableData !== undefined ? - this.props.resTableData !== null ? - this.props.resTableData.features.length > 0 ? - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - /> - : 'Table Data is empty' - : 'Table Data is null' - : 'Table Data is undefined' - } - {/*
-
*/} -
- - {/* - - */} - -
- ) - } -} - -export default MapTable; \ No newline at end of file diff --git a/src/components/MapTable2/MapTable_backup2.js b/src/components/MapTable2/MapTable_backup2.js deleted file mode 100644 index e8a95af..0000000 --- a/src/components/MapTable2/MapTable_backup2.js +++ /dev/null @@ -1,898 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import Draggable, { DraggableCore } from "react-draggable"; -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, -UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; -import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'; -import paginationFactory from 'react-bootstrap-table2-paginator'; -import cellEditFactory from 'react-bootstrap-table2-editor'; -import { Icon, InlineIcon } from '@iconify/react'; -import createOutline from '@iconify/icons-ion/create-outline'; -import earthIcon from '@iconify/icons-ion/earth'; -import archiveOutline from '@iconify/icons-ion/archive-outline'; -import saveOutline from '@iconify/icons-ion/save-outline'; -import trashOutline from '@iconify/icons-ion/trash-outline'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import { Col, Row } from 'reactstrap'; -import { AppSwitch } from '@coreui/react'; -import './MapTable.css'; -import '../../assets/css/customscroll.css' -import EditTableColumn from '../EditTableColumn'; -import { getTableColumns, updateFeature } from '../../const/GeoserverFunc.js'; -import { API_GET_COLUMN_TABLE } from '../../const/ApiConst.js'; -import { findWhere, without } from 'underscore'; - -import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; -import { Select } from 'ol/interaction'; -import Feature from 'ol/Feature'; -import { Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource } from 'ol/source'; -import { fromLonLat, transformExtent } from 'ol/proj'; -import SweetAlert from 'react-bootstrap-sweetalert'; - -const { SearchBar } = Search; -const { ExportCSVButton } = CSVExport; -/*const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const products = [ -{ - "id": 0, - "name": "Item name 0", - "price": 2100 -}, -{ - "id": 1, - "name": "Item name 1", - "price": 2101 -}, -{ - "id": 2, - "name": "Item name 2", - "price": 2102 -}, -{ - "id": 3, - "name": "Item name 3", - "price": 2103 -}];*/ - -/*const TableContent = () => { - let tableData = this.props.resTableData; - if (tableData !== null) { - return ( - - { - props => ( -
-

Input something at below input field:

- -
- -
- ) - } - - ) - } -}*/ - - -class TableContent extends Component { - - constructor(props) { - super(props) - this.state = { - fid: 'fid', - columns: null, - originalData: null, - data: null, - resTableData: null, - selectRow: { - mode: 'radio', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - clickToEdit: false, - bgColor: '#e4e5e6', - }, - editCellMode: false, - editTableColumnVisible: false, - selectedRowData: null, - editedColumnsData: null, - mapProjection: this.props.olmap.getView().getProjection(), - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - selectedRows: [], - updatedData: [], - alertConfirm: false, - alertConfirmBtnText: '', // Delete, Update - alertConfirmType: '', // danger, success, warning, info - alertConfirmMsg: '', // Under are you sure message: ... ? - confirmParam: '', - alertResponse: false, - alertResponseMsg: '', - successAlert: false, - dangerAlert: false, - saveMode: false - } - this.toggleEditCell = this.toggleEditCell.bind(this); - this.activateCellEdit = this.activateCellEdit.bind(this); - } - - componentDidMount() { - console.log('this.state', this.state); - this.mapTableInit(); - } - - componentDidUpdate(prevProps, prevState) { - } - - mapTableInit = async () => { - let columns = []; - let data = []; - let { resTableData, mapTableTitle } = this.props; - console.log('resTableData', resTableData); - let features = this.props.resTableData.features; - let newProperties = {}; - let countPropKey = 0; - let fidPosIdx = 0; - - if (features.length > 0) { - for (let i=0; i < features.length; i++) { - features[i].properties.fid = features[i].id; // append the key value at the end of object - - /*for(let key in features[i].properties) { - if (countPropKey == fidPosIdx) { - newProperties.fid = features[i].id; - } - newProperties[key] = features[i].properties[key]; - countPropKey++; - } - console.log('newProperties', newProperties); - data.push(newProperties);*/ - - data.push(features[i].properties); - } - - for (let key in features[0].properties) { - if (key == 'fid') { - columns.push({ - dataField: key, - text: key, - sort: true, - hidden: true - }); - } - else { - columns.push({ - dataField: key, - text: key, - sort: true - }); - } - } - } - else { - let reqTableColumns = await getTableColumns(mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - if (reqTableColumns.result !== null) { - if (reqTableColumns.result.length > 0) { - for(let i=0; i < reqTableColumns.result.length; i++) { - let column_name = reqTableColumns.result[i].column_name; - columns.push({ - dataField: column_name, - text: column_name, - sort: true - }); - } - } - } - } - } - - /*the data - { - type: - id: - geometry: - geometry_name: - properties: { - gid: - nama: - .... - } - } - I want something like this: - { - type: - id: - geometry: - geometry_name: - properties: { - fid: id -> append the id to the properties, but hide on table, because table only show the properties - gid: - nama: - .... - } - } - - */ - - console.log('features', features); - console.log('columns', columns); - console.log('data', data); - - this.setState({ - columns: columns, - data: data, - originalData: data, - resTableData: resTableData - }) - } - - toggleEditCell() { - const { editCellMode } = this.state; - if (!editCellMode) { - this.setState({ - editCellMode: true, - selectRow: { - mode: 'checkbox', - clickToSelect: false, - clickToEdit: true, - bgColor: '#e4e5e6', - onSelect: (row, isSelect, rowIndex, e) => this.onSelectRowTable({row, isSelect, e, rowIndex}), - onSelectAll: (isSelect, rows, e) => this.onSelectAllRowTable(isSelect, rows, e) - } - }); - } - else { - this.setState({ - editCellMode: false, - selectRow: { - mode: 'radio', - clickToSelect: true, - clickToEdit: false, - onSelect: (row, isSelect, rowIndex, e) => this.handleOnSelect(row, isSelect, rowIndex, e), - bgColor: '#e4e5e6' - } - }); - } - } - - activateCellEdit() { - return cellEditFactory({ mode: 'click' }); - } - - handleOnSelect = (row, isSelect, rowIndex, e) => { - console.log('handleOnSelect row, isSelect, rowIndex, e', row, isSelect, rowIndex, e); - const { resTableData } = this.state; - let features = resTableData.features; - let selectedRow = findWhere(features, {id: row.fid}); - this.setState({selectedRowData: selectedRow}); - } - - onSelectRowTable = ({row, isSelect, e}) => { - const {selectedRows} = this.state - console.log({row, isSelect, e}) - console.log('typeof row',typeof(row)); - if(typeof(row) === "object"){ - if(isSelect){ - this.setState({selectedRows: [...selectedRows, row]}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); - }) - } else { - const idx = selectedRows.indexOf(row) - selectedRows.splice(idx, 1) - this.setState({selectedRows}, () => { - console.log('onSelectRowTable selectedRows', this.state.selectedRows); - }) - } - } else { - console.log("type array") - this.setState({selectedRows: row}) - } - } - - onSelectAllRowTable = (isSelect, rows, e) => { - console.log('onSelectAllRowTable isSelect, rows, e', isSelect, rows, e); - const { selectedRows } = this.state; - - if (isSelect === false) { - this.setState({selectedRows: []}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); - }); - } - else if (isSelect === true) { - let row = rows.map((item, index) => { - return item; - }); - console.log('row', row); - this.setState({selectedRows: row}, () => { - console.log('onSelectAllRowTable selectedRows', this.state.selectedRows); - }); - } - } - - - /*getTableColumns = async (tableName) => { - let obj = { - tableName: tableName - } - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - console.log('result getTableColumns', result); - if(result){ - return result; - } else { - return result; - } - } catch(err) { - return err.message; - } - }*/ - - editTableColumn = async () => { - let reqTableColumns = await getTableColumns(this.props.mapTableTitle); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({editedColumnsData: reqTableColumns.result}, () => this.toggleEditTableColumn()); - } - else { - alert(reqTableColumns.result); - return; - } - } - - toggleEditTableColumn = () => { - this.setState({editTableColumnVisible: !this.state.editTableColumnVisible}) - } - - selectFeature = (selectedPopupData) => { - console.log('SearchFeatures selectFeature', selectedPopupData); - this.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - if (selectedPopupData.geometry === null) { - alert('Could not find the geometry'); - return; - } - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - geomToDisplay = new MultiPoint(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - geomToDisplay = new MultiLineString(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); - } - - removeChosenLayer = () => { - let layersToRemove = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - - if (layersToRemove.length > 0) { - for(let i=0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - } - } - - goToFeature = () => { - let selectedFeature = this.state.selectedRowData; - - if (selectedFeature.properties.hasOwnProperty("fid")) { - delete selectedFeature.properties["fid"]; - } - this.selectFeature(selectedFeature); - - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - - if (chosenLayer === null) { - alert('Could not go to feature because there is no geometry to go'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - console.log('SearchFeatures chosenFeatures', chosenFeatures); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - - this.props.setPopupDataTemp(selectedFeature); - this.props.openPopupRight(); - this.props.toggleMapTable(); - } - - /*createGeomOnFeature = (selectedFeature) => { - let confirmation = window.confirm('Create the geometry anyway?'); - if (!confirmation) { - return; - } - this.props.toggleMapTable(); - }*/ - - updateFunction = async (oldValue, newValue, row, column) => { - console.log('------ updateFunction ------') - const { data, updatedData } = this.state; - let updatedDataArr = []; - /*console.log('data before', data); - console.log('updateFunction oldValue, newValue, row, column', oldValue, newValue, row, column); - - let updatedRow = findWhere(data, {fid: row.fid}); - console.log('updatedRow', updatedRow); - console.log('data after', data); - - this.setState({data: data, saveMode: true});*/ - - - if (updatedData.length > 0) { - let updatedRow = findWhere(updatedData, {fid: row.fid}); - console.log('updatedRow', updatedRow); - - if (updatedRow == undefined) { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - else { - let idx = updatedData.indexOf(updatedRow) - console.log('idx', idx); - updatedData[idx] = updatedRow; - this.setState({updatedData: updatedData, saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - } - else { - this.setState({updatedData: [...updatedData, row], saveMode: true}, () => { - console.log('updatedData', this.state.updatedData); - }); - } - - } - - deleteFunction = async param => { - const {selectedRows} = this.state - console.log("row selected",selectedRows) - /*if(param === "delete") { - - const {columns} = this.props - const val = columns.reduce((obj, item) => (obj[item.dataField] = item.state, obj) ,{}); - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(selectedRows) - } - - try { - const result = await fetch(this.props.urlParamDelete, param).then(response => response.json()).then(res => res) - if(result.data){ - this.getDataTable(); - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: true, dangerAlert: false, ...val}) - } else { - this.setState({alert: true, alertConfirm: false, messageAlert: result.code_message, successAlert: false, dangerAlert: true, ...val}) - } - } catch { - this.setState({alert: true, messageAlert: "Opss! looks like something wrong", successAlert: false, dangerAlert: true}) - } - } else { - this.setState({alertConfirm: false}) - }*/ - - if (param === "delete") { - - } - } - - saveUpdate = () => { - this.setState({confirmParam: 'save_update'}, () => this.showConfirm(this.state.confirmParam)); - } - - deleteSelected = () => { - this.setState({confirmParam: 'delete_selected'}, () => this.showConfirm(this.state.confirmParam)); - } - - showConfirm = (param) => { - if (param === 'save_update') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Save', alertConfirmType: 'success', alertConfirmMsg: 'Save the updates'}); - } - else if (param === 'delete_selected') { - this.setState({alertConfirm: true, alertConfirmBtnText: 'Delete', alertConfirmType: 'danger', alertConfirmMsg: 'Delete the selected rows'}); - } - } - - confirmYes = async (confirmParam) => { - console.log(confirmParam); - const { data, updatedData } = this.state; - console.log('updatedData', updatedData); - const { mapTableTitle } = this.props; - let fid = null; - let properties = []; - let countSuccess = 0; - let totalUpdatedData = updatedData.length; - if (confirmParam === 'save_update') { - if (updatedData.length > 0) { - for (let i=0; i < updatedData.length; i++) { - fid = updatedData[i].fid; - if (updatedData[i].hasOwnProperty("fid")) { - delete updatedData[i].fid; - let _prop = []; - for(let key in updatedData[i]) { - _prop.push({ - label: key, - value: updatedData[i][key] - }); - } - properties.push(_prop); - } - console.log('confirmYes mapTableTitle, fid, properties', mapTableTitle, fid, properties); - let response = await updateFeature(mapTableTitle, fid, properties[0]); - - if (response.success) { - countSuccess = countSuccess+1; - properties = []; - } - } - - if (countSuccess === totalUpdatedData) { - this.confirmCancel(); - this.setState({alertResponse: true, successAlert: true, dangerAlert: false, alertResponseMsg: "All edited values have been saved"}); - } - else { - this.setState({alertResponse: true, successAlert: false, dangerAlert: true, alertResponseMsg: "Oops! Some edited values are not saved"}); - } - } - } - else if (confirmParam == 'delete_selected') { - - } - } - - confirmCancel = () => { - this.setState({alertConfirm: false, alertConfirmBtnText: '', alertConfirmType: '', alertConfirmMsg: '', confirmParam: ''}); - } - - closeAlertResponse = () => { - this.setState({ - alertResponse: false, successAlert: false, dangerAlert: false, alertResponseMsg: '', - }); - } - - renderEditCellMode = () => { - const { editCellMode } = this.state; - return editCellMode ? - - : - } - - render() { - const { columns, data, selectRow, editCellMode, editedColumnsData, fid, selectedRows, saveMode, - alertResponse, alertResponseMsg, successAlert, dangerAlert, - alertConfirm, alertConfirmBtnText, alertConfirmType, alertConfirmMsg, confirmParam - } = this.state; - - if (columns !== null ) { - return ( -
- - this.closeAlertResponse()}> - {alertResponseMsg} - - - this.confirmYes(confirmParam)} - onCancel={() => this.confirmCancel()} - focusCancelBtn - > - {alertConfirmMsg} - - - - - { - props => ( -
- - -
- -
- - - {/*
- - -
*/} - -
- - { this.state.selectedRowData && !editCellMode ? -
- - - View on Map - -
- : null - } - - {saveMode && editCellMode && -
- - - Save Changes - -
- } - - {selectedRows.length > 0 && - -
- - - Delete Selected Row - -
- } - -
- Edit Table
- { - this.renderEditCellMode() - } -
- - {/*
- - - - - Export CSV - -
*/} - -
- - - - - - this.editTableColumn()}> Edit Table Column - {/* - Export CSV - */} - - Export CSV - - - -
- -
- - - {/*
*/} -
- {/**/} - - {editCellMode ? - this.updateFunction(oldValue, newValue, row, column) - }) } - /> - : - - } - -
-
- ) - } - - - {this.state.editTableColumnVisible && - this.toggleEditTableColumn()} - modalTitle={`Edit ${this.props.mapTableTitle} attribute`} - editedColumnsData={editedColumnsData} - /> - } -
- ) - } - else { - return null; - } - - } -} - -class MapTable extends Component { - constructor(props) { - super(props); - } - - componentDidMount() { - } - - render() { - return ( -
- - {this.props.mapTableTitle} - -
- {/*
-
*/} - { - this.props.resTableData !== undefined ? - this.props.resTableData !== null ? - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - /> - : 'Table Data is null' - : 'Table Data is undefined' - } - {/*
-
*/} -
- - {/* - - */} - -
- ) - } -} - -export default MapTable; \ No newline at end of file diff --git a/src/components/MapToolbar/MapToolbar.js b/src/components/MapToolbar/MapToolbar.js index 50cfcf8..3e76576 100644 --- a/src/components/MapToolbar/MapToolbar.js +++ b/src/components/MapToolbar/MapToolbar.js @@ -239,8 +239,6 @@ class MapToolbar extends Component { }; getLayerColor = (layer) => { - // let layer_name = item.id.substr(0, item.id.indexOf(".")); - // console.log('getLayerColor', layer); let layer_name = layer.get("name"); let { layerInfo } = this.props; let matchLayerName = layerInfo.filter( @@ -292,7 +290,6 @@ class MapToolbar extends Component { getLayerCount = (layer) => { // let layer_name = item.id.substr(0, item.id.indexOf(".")); - // console.log(layer) let layer_name = layer.get("name"); let { layerInfo } = this.props; let matchLayerName = layerInfo.filter( @@ -324,7 +321,6 @@ class MapToolbar extends Component { CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL) .then(CapabilitiesUtil.getLayersFromWmsCapabilities) .then((layers) => { - console.log("wmsLayers", layers); this.setState({ wmsLayers: layers, }); @@ -332,36 +328,6 @@ class MapToolbar extends Component { .catch(() => alert("Could not parse capabilities document.")); } - /*toggleDrawerLayer () { - this.closeAllDrawer(); - const { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({ drawerLayerVisible: false }, () => this.closeAllDrawer() ); - } - else { - this.setState({ drawerLayerVisible: true }, () => this.closeAllDrawer() ); - } - }*/ - - /*toggleDrawerLayer () { - this.setState({drawerLayerVisible: !this.state.drawerLayerVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - }*/ toggleDrawerLayer() { let { drawerLayerVisible } = this.state; @@ -403,20 +369,6 @@ class MapToolbar extends Component { } } - /*toggleDrawerSearch () { - this.closeAllDrawer(); - const { drawerSearchVisible } = this.state; - console.log('drawerSearchVisible', drawerSearchVisible); - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => this.closeAllDrawer() ); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.closeAllDrawer(); - }); - } - }*/ toggleDrawerSearch() { const { drawerSearchVisible } = this.state; @@ -730,7 +682,6 @@ class MapToolbar extends Component { drawingToolVisible, ]; - console.log("visibleArr", visibleArr); if (drawerLayerVisible) { this.setState({ @@ -839,12 +790,10 @@ class MapToolbar extends Component { cancelWmsLayer() { - console.log("cancel wms"); this.setState({ wmsLayers: [] }); } onClickLayerMenu = (layer) => { - // console.log('onclick layer menu', layer); }; customTitleLayerTree(layer) { @@ -901,7 +850,7 @@ class MapToolbar extends Component {
{layer.get("type") === "layer" || - layer instanceof OlLayerImage ? ( + layer instanceof OlLayerImage ? ( // layer instanceof OlLayerTile || layer instanceof OlLayerImage ? @@ -941,7 +890,6 @@ class MapToolbar extends Component { } onRightClickLayerTree(layer) { - console.log("right click layer tree", layer); return ( @@ -956,28 +904,8 @@ class MapToolbar extends Component { } onDropLayerTree() { - console.log("dropped"); } - /*showTableData = (layer) => { - console.log('showTableData', layer); - this.setState({ - mapTableTitle: layer.get('name'), - mapTableTitleSrc: layer.getSource().params_.LAYERS - }, async () => { - let res = await reqTableData(this.state.mapTableTitle); - console.log('showTableData',res); - - if (res.success) { - this.setState({resTableData: res.result}, () => this.toggleMapTable()); - } - else { - alert(res.result); - return; - } - }); - }*/ - showTableData = (layer) => { this.setState( { @@ -1001,46 +929,15 @@ class MapToolbar extends Component { }; styleLayer = async (layer) => { - console.log("styling layer...", layer); - let SLD_URL = layer.getSource().params_.SLD; - console.log("SLD_URL", SLD_URL); - let resGetLayerColor = await getLayerColor(SLD_URL); - console.log("styleLayer resGetLayerColor", resGetLayerColor); - - if (this.state.drawerLayerStylesVisible) { this.closeLayerStyles(); this.openLayerStyles(); } else { this.openLayerStyles(); } - /* - axios.get(SLD_URL) - .then(res => { - console.log('axios get SLD', res); - let text = res.data; - let parser, xmlDoc; - if (window.DOMParser) { - parser = new DOMParser(); - xmlDoc = parser.parseFromString(text,"text/xml"); - - console.log('xmlDoc', xmlDoc); - } - }) - .catch(err => { - console.log('axios get SLD err', err); - }); - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - }*/ }; openLayerStyles() { @@ -1052,13 +949,9 @@ class MapToolbar extends Component { } addFeature = async (layer) => { - console.log("adding feature on layer...", layer); - // console.log(layer.get('name')); - let geomType = ""; // request Geom Type from API let reqGeomType = await getGeomType(layer.get("name")); - console.log("addFeature reqGeomType", reqGeomType); if (reqGeomType.success) { geomType = reqGeomType.result; } else { @@ -1069,7 +962,6 @@ class MapToolbar extends Component { let reqTableColumns = await getTableColumns(layer.get("name")); - console.log("reqTableColumns", reqTableColumns); if (reqTableColumns.success) { this.setState({ addFeatureColumns: reqTableColumns.result }); } else { @@ -1094,7 +986,6 @@ class MapToolbar extends Component { } removeLayer = (layer) => { - console.log("removing layer", layer); let confirmation = window.confirm( "Are you sure you want to remove this layer?" ); @@ -1104,39 +995,11 @@ class MapToolbar extends Component { this.props.olmap.removeLayer(layer); }; - /*zoomToLayer = (layer) => { - console.log('zoomToLayer', layer); - let layerExtent = null; - let newLayerExtent = null; - let transformLayerExtent = null; - let fitOption = { - size: this.props.olmap.getSize(), - duration: 500 - } - if (layer instanceof OlLayerImage) { - layerExtent = layer.getSource().image_.extent; - transformLayerExtent = new transformExtent(layerExtent, 'EPSG:4326', this.props.olmap.getView().getProjection()) - console.log('layerExtent', layerExtent); - console.log('transformLayerExtent', transformLayerExtent); - newLayerExtent = [ - layerExtent[0], layerExtent[2], layerExtent[1], layerExtent[3] - ]; - console.log('newLayerExtent', newLayerExtent); - - this.props.olmap.getView().fit(layerExtent, fitOption); - } - else if (layer instanceof OlLayerTile) { - layerExtent = layer.getSource().tmpExtent_; - this.props.olmap.getView().fit(layerExtent, fitOption); - } - }*/ zoomToLayer = (layer) => { - console.log("zoomToLayer getSource", layer.getSource()); // let layerName = layer.getSource().params_.LAYERS; let layerName = layer.get("name"); - console.log("layerName", layerName); const { fitOption } = this.state; @@ -1144,12 +1007,10 @@ class MapToolbar extends Component { // } CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then( (response) => { - console.log("capabilities response", response); if (response !== undefined) { let layer = findWhere(response.Capability.Layer.Layer, { Name: layerName, }); - console.log("layer", layer); if (layer === undefined) { alert("Layer " + layerName + " is not found"); @@ -1159,21 +1020,6 @@ class MapToolbar extends Component { let proj = "CRS:84"; let bbox = findWhere(layer.BoundingBox, { crs: proj }); let extent = bbox.extent; - console.log("layer", layer); - console.log("zoomToLayer extent", extent); - // map.getView().fit(new transformExtent(layerExtent, 'EPSG:4326', map.getView().getProjection()), { size: map.getSize() }); - - // console.log('layer', layer); - // this.props.olmap.getView().fit(extent, fitOption); - // console.log('getProjection', this.props.olmap.getView().getProjection()); - // var boundingExtent = ol.extent.boundingExtent(coordinates); - // boundingExtent = ol.proj.transformExtent(boundingExtent, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857')); - - /*// other option - extent = new transformExtent(extent, "EPSG:4326", "EPSG:3857"); - console.log('extent now', extent); - this.props.olmap.getView().fit(extent, fitOption); */ - this.props.olmap .getView() .fit( @@ -1190,11 +1036,9 @@ class MapToolbar extends Component { }; onDragEndLayerTree = (callback) => { - console.log("onDragEndLayerTree", callback); }; rebuildTreeNodes = (evt) => { - console.log("rebuildTreeNodes", evt); }; getFeaturesOnMap = async () => { @@ -1206,8 +1050,6 @@ class MapToolbar extends Component { let featureCollections = []; let allFeatures = []; this.props.olmap.getLayers().forEach((layer, i) => { - // console.log('layer', layer); - // console.log('layer type', layer.get('type')); if (layer.get("type" !== "base")) { if (layer.get("type") !== "vector") { if (layer.get("type") !== "layerGroup") { @@ -1239,10 +1081,6 @@ class MapToolbar extends Component { } }); - // console.log('layerSourceArr', layerSourceArr); - console.log("layerTypeNameArr", layerTypeNameArr); - console.log("layerNameArr", layerNameArr); - for (let i = 0; i < layerTypeNameArr.length; i++) { let req = await reqTableData(layerTypeNameArr[i]); @@ -1262,29 +1100,7 @@ class MapToolbar extends Component { this.setState({ allFeatures: allFeatures }); }; - /*getLayerSearchLabel = async() => { - const param = { - method: 'GET', - 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.length > 0) { - console.log('getLayerSearchLabel result', result); - this.setState({ - searchLabelData: result.data - }) - } - } else { - } - } catch(err) { - console.log(err); - alert(err.message.toString()); - } - }*/ setAddFeatureValue = (obj) => { this.setState({ addFeatureValue: obj }); @@ -1349,58 +1165,7 @@ class MapToolbar extends Component { - {/* this.toggleDrawerDailyInfo()} - > - - */} - - {/* - - this.mapMeasurement()} - > - - - - - -
- Map Measurement -
- - Remove Layer - - */} - - {/* this.toggleBtnDropMeasure()}> - - - - - - - -
Map Measurement
- - this.toggleMeasure('LineString')}> - Distance - - this.toggleMeasure('Polygon')}> - Area - - - */} + - {/**/} - {/* */} + - - {/*
- -
*/} ); }; @@ -1530,21 +1274,7 @@ class MapToolbar extends Component { }; mapMeasurement = () => { - /*return ( - - - - - - -
- Map Measurement -
- - this.removeLayer(layer)}> Remove Layer - - - )*/ + }; toggleBtnDropMeasure = () => { @@ -1563,13 +1293,6 @@ class MapToolbar extends Component { }; - /*toggleMeasure = (name, type) => { - this.setState({ - measureVisible: true, - measureName: name, - measureType: type - }); - }*/ pointerMoveHandler = (evt) => { let { @@ -1700,17 +1423,13 @@ class MapToolbar extends Component { var geom = evt.target; var output; if (geom instanceof Polygon) { - // console.log('geom Polygon',geom); + output = formatArea(geom); tooltipCoord = geom.getInteriorPoint().getCoordinates(); - console.log("tooltipCoord", tooltipCoord); - // console.log('output Polygon', output); this.setState({ measureValue: output }); } else if (geom instanceof LineString) { output = formatLength(geom); tooltipCoord = geom.getLastCoordinate(); - // console.log('tooltipCoord', tooltipCoord); - // console.log('output LineString', output); this.setState({ measureValue: output }); } // measureTooltipElement.innerHTML = output; @@ -1752,19 +1471,6 @@ class MapToolbar extends Component { olmap.addOverlay(measureTooltip); }; - /*renderMeasureContent = () => { - const { measureVisible } = this.state; - console.log('measureVisible', measureVisible); - alert('measureVisible '+measureVisible); - return ( -
-
- Helloooooooo -
-
- ) - }*/ - mappifiedLayerTree = () => { const { olmap } = this.props; let layers = []; @@ -1773,22 +1479,9 @@ class MapToolbar extends Component { if (layer.get("type") !== "base") { if (layer.get("type") !== "vector") { 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'}); - // if (url) { - // promises.push(axios.get(url)); - // } - // } - // }); - // layers.push(layer); + } else { - // if (layer.getVisible()) { - // url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/json'}); - // if (url) { - // promises.push(axios.get(url)); - // } - // } + layers.push(layer); } } diff --git a/src/components/MapToolbar/MapToolbar_backup.js b/src/components/MapToolbar/MapToolbar_backup.js deleted file mode 100644 index f4ce0b3..0000000 --- a/src/components/MapToolbar/MapToolbar_backup.js +++ /dev/null @@ -1,1690 +0,0 @@ -import React, { Component, Fragment, useState } from 'react'; -import { Drawer, Tooltip } from 'antd'; -import { - mappify, - SimpleButton, - AddWmsPanel, - LayerTree, - Panel -} from '@terrestris/react-geo'; -import { Badge, Dropdown, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, - InputGroup, Input, InputGroupAddon, InputGroupText, Button, Collapse, Card, CardBody -} from 'reactstrap'; -import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; -import MeasureButton from '@terrestris/react-geo/dist/Button/MeasureButton/MeasureButton'; -import MapLayerSwitcher from '../../components/MapLayerSwitcher'; -import MapTable from '../../components/MapTable'; -import DrawingTool from '../../components/DrawingTool'; -import MapLayerStyles from '../../components/MapLayerStyles'; -import CreateNewLayer from '../../components/CreateNewLayer'; -import SearchFeatures from '../../components/SearchFeatures'; -import AddFeature from '../../components/AddFeature'; -import MapLegend from '../../components/MapLegend'; -import MeasureContainer from '../../components/MeasureContainer'; -import { appConfig, wfsDispatcherUrl } from '../../const/MapConst.js'; -import './MapToolbar.css'; -import { Icon, InlineIcon } from '@iconify/react'; -import layersIcon from '@iconify/icons-ion/layers'; -import mapIcon from '@iconify/icons-ion/map'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import listOutline from '@iconify/icons-ion/list-outline'; -import imageOutline from '@iconify/icons-ion/image-outline'; -import trashOutline from '@iconify/icons-ion/trash-outline'; -import brushIcon from '@iconify/icons-ion/brush'; -import createOutline from '@iconify/icons-ion/create-outline'; -import contractIcon from '@iconify/icons-ion/contract'; -import searchPlus from '@iconify/icons-fe/search-plus'; -import searchMinus from '@iconify/icons-fe/search-minus'; -import mapLegend from '@iconify/icons-mdi/map-legend'; -import rulerIcon from '@iconify/icons-mdi/ruler'; -import axios from 'axios'; -import OlLayerGroup from 'ol/layer/Group'; -import OlLayerTile from 'ol/layer/Tile'; -import OlLayerImage from 'ol/layer/Image'; -import ZoomToExtent from 'ol/control/ZoomToExtent'; -import {fromLonLat, transformExtent} from 'ol/proj'; -import { Draw } from 'ol/interaction'; -import {LineString, Polygon} from 'ol/geom'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Vector as VectorSource} from 'ol/source'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style'; -import {unByKey} from 'ol/Observable'; -import Overlay from 'ol/Overlay'; -import { WMS_CAPABILITIES_URL, legendPicUrl } from '../../const/MapConst.js'; -import { findWhere, flatten, without } from 'underscore'; -import { reqTableData, getGeomType, getTableColumns, getLayerColor, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js'; -import '../../assets/css/customscroll.css'; - -const MappifiedLayerTree = mappify(LayerTree); - -/* -Toggle Visibility that must be closed or switched to its visibility: - -layer: drawerLayerVisible -popup: popupRightVisible -searchFeature: drawerSearchVisible -basemap: layerSwitcherVisible -legend: legendVisible -drawing: drawingToolVisible -layerStyle: drawerLayerStylesVisible -mapTable: mapTableModalVisible - -*/ - -class MapToolbar extends Component { - - constructor(props) { - super(props); - this.state = { - isReady: false, - wmsLayers: [], - drawerLayerVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - layerSwitcherVisible: false, - layerPanelVisible: false, - mapTableModalVisible: false, - mapTableName: '', - mapTableTitle: '', - mapTableTitleSrc: '', - selectedMapLayer: null, - resTableData: null, - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '', - drawerLayerStylesVisible: false, - createNewLayerVisible: false, - searchInput: '', - allFeatures: [], - popupRightVisible: false, - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - addFeatureVisible: false, - addFeatureColumns: null, - addFeatureValue: null, - legendVisible: false, - activeSideLeft: false, - DrawingUtil: null, - drawingLayer: null, - chosenLayer: null, - btnDropMeasureVisible: false, - measureVisible: false, - measureName: '', - measureType: '', - measureValue: '', - measureDraw: null, - sketch: null, - helpTooltipElement: null, - helpTooltip: null, - measureTooltipElement: null, - measureTooltip: null, - continuePolygonMsg: 'Click to continue drawing the polygon', - continueLineMsg: 'Click to continue drawing the line', - - - } - this.getWMSLayers = this.getWMSLayers.bind(this); - this.toggleDrawerLayer = this.toggleDrawerLayer.bind(this); - this.toggleDrawerSearch = this.toggleDrawerSearch.bind(this); - this.toggleLayerSwitcher = this.toggleLayerSwitcher.bind(this); - this.cancelWmsLayer = this.cancelWmsLayer.bind(this); - this.customTitleLayerTree = this.customTitleLayerTree.bind(this); - this.onRightClickLayerTree = this.onRightClickLayerTree.bind(this); - this.onDropLayerTree = this.onDropLayerTree.bind(this); - this.toggleMapTable = this.toggleMapTable.bind(this); - this.toggleMapAnalyzeTool = this.toggleMapAnalyzeTool.bind(this); - this.cancelDraw = this.cancelDraw.bind(this); - this.toggleLayerStyles = this.toggleLayerStyles.bind(this); - this.openLayerStyles = this.openLayerStyles.bind(this); - this.closeLayerStyles = this.closeLayerStyles.bind(this); - this.toggleCreateNewLayer = this.toggleCreateNewLayer.bind(this); - - this.measureLayer = new VectorLayer({ - name: 'measure_layer', - title: 'Measure Layer', - type: 'vector', - source: new VectorSource(), - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - width: 3 - }), - image: new CircleStyle({ - radius: 7, - fill: new Fill({ - color: '#ffcc33' - }) - }) - }) - }); - } - - componentDidMount() { - this.setState({isReady: true}); - } - - getLayerType = (item) => { - let layer_name = item.id.substr(0, item.id.indexOf(".")); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_geom_type; - } - else { - return "Undefined Geom Type"; - } - } - - getLayerColor = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_color; - } - else { - return "#ffffff"; - } - } - - getLayerTitle = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - let output = ''; - - if (matchLayerName.length > 0) { - if (matchLayerName[0].layer_title !== '' && matchLayerName[0].layer_title !== null) { - output = matchLayerName[0].layer_title; - return output; - } - else { - output = matchLayerName[0].layer_name; - return output; - } - } - else { - return "No layer title provided"; - } - } - - getLayerTitleTextColor = (layerColor) => { - let brightness = lightOrDark(layerColor); // 'light' or 'dark' - - if (brightness == 'light') { - return 'dark-text'; - } - else { - return 'light-text'; - } - } - - getLayerCount = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].total_features; - - } - else { - return "0"; - } - } - - zoomIn = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() + 1, - duration: 500 - }); - } - - zoomOut = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() - 1, - duration: 500 - }); - } - - getWMSLayers() { - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL) - .then(CapabilitiesUtil.getLayersFromWmsCapabilities) - .then(layers => { - console.log('wmsLayers', layers); - this.setState({ - wmsLayers: layers - }); - }) - .catch(() => alert('Could not parse capabilities document.')); - } - - /*toggleDrawerLayer () { - this.closeAllDrawer(); - const { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({ drawerLayerVisible: false }, () => this.closeAllDrawer() ); - } - else { - this.setState({ drawerLayerVisible: true }, () => this.closeAllDrawer() ); - } - }*/ - - /*toggleDrawerLayer () { - this.setState({drawerLayerVisible: !this.state.drawerLayerVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - }*/ - - toggleDrawerLayer () { - let { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({drawerLayerVisible: false}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerLayerVisible: true}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - } - } - - /*toggleDrawerSearch () { - this.closeAllDrawer(); - const { drawerSearchVisible } = this.state; - console.log('drawerSearchVisible', drawerSearchVisible); - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => this.closeAllDrawer() ); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.closeAllDrawer(); - }); - } - }*/ - - toggleDrawerSearch () { - const { drawerSearchVisible } = this.state; - - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }) - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleMapAnalyzeTool () { - const { drawerAnalyzeToolVisible } = this.state; - - if (drawerAnalyzeToolVisible) { - this.setState({drawerAnalyzeToolVisible: false}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }) - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerAnalyzeToolVisible: true}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleLayerSwitcher() { - this.setState({layerSwitcherVisible: !this.state.layerSwitcherVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMapTable() { - this.setState({mapTableModalVisible: !this.state.mapTableModalVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleCreateNewLayer() { - this.setState({createNewLayerVisible: !this.state.createNewLayerVisible}); - this.deactiveMeasureMap(); - } - - toggleLayerStyles() { - this.setState({drawerLayerStylesVisible: !this.state.drawerLayerStylesVisible}, () => { - this.setState({ - drawerLayerVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleAddFeatureVisible = () => { - this.setState({addFeatureVisible: !this.state.addFeatureVisible}); - this.deactiveMeasureMap(); - } - - toggleLegend = () => { - this.setState({legendVisible: !this.state.legendVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMeasureVisible = () => { - this.setState({measureVisible: !this.state.measureVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - - if (!this.state.measureVisible) { - this.deactiveMeasureMap(); - } - }); - } - - closeAllDrawer = () => { - /* - Toggle Visibility that must be closed or switched to its visibility: - - layer: drawerLayerVisible - popup: popupRightVisible - searchFeature: drawerSearchVisible - basemap: layerSwitcherVisible - legend: legendVisible - drawing: drawingToolVisible - layerStyle: drawerLayerStylesVisible - mapTable: mapTableModalVisible - - Group layers: layer, layerStyle, mapTable (that shouldn't be closed each other) - Group popup: searchFeature, popup (that shouldn't be closed each other) => searchFeature below of popup - Legend - BaseMap - Drawing - */ - - const { drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - } = this.state; - - let visibleArr = [drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - ]; - - console.log('visibleArr', visibleArr); - - if (drawerLayerVisible) { - this.setState({ - drawerLayerVisible: true, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerLayerStylesVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: true, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (mapTableModalVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: true, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerSearchVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: true, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (popupRightVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: true, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (legendVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: true, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (layerSwitcherVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: true, - drawingToolVisible: false - }) - } - - if (drawingToolVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: true - }) - } - - } - - - cancelWmsLayer() { - console.log('cancel wms'); - this.setState({ wmsLayers: [] }); - } - - onClickLayerMenu = (layer) => { - } - - customTitleLayerTree(layer) { - - - - - return ( -
-
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- {/*
- -
*/} -
- - {/*10*/} - { layer.get('type') == 'layer' ? - {this.getLayerCount(layer)} - : null - } - this.onClickLayerMenu(layer)}> - - - - -
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- - { - layer.get('type') === 'layer' || layer instanceof OlLayerImage ? - - - this.zoomToLayer(layer)}> Zoom To Layer - this.showTableData(layer)}> Show Data - {this.props.editGeometryVisible ? - Add Feature - : this.addFeature(layer)}> Add Feature - } - {/* this.addFeature(layer)}> Add Feature*/} - this.styleLayer(layer)}> Layer Styles - - : - null } - this.removeLayer(layer)}> Remove Layer - - -
-
- ) - } - - onRightClickLayerTree(layer) { - console.log('right click layer tree', layer); - return ( - - - Header - Action - Another Action - - Another Action - - - ) - } - - onDropLayerTree() { - console.log('dropped'); - } - - - - /*showTableData = (layer) => { - console.log('showTableData', layer); - this.setState({ - mapTableTitle: layer.get('name'), - mapTableTitleSrc: layer.getSource().params_.LAYERS - }, async () => { - let res = await reqTableData(this.state.mapTableTitle); - console.log('showTableData',res); - - if (res.success) { - this.setState({resTableData: res.result}, () => this.toggleMapTable()); - } - else { - alert(res.result); - return; - } - }); - }*/ - - showTableData = (layer) => { - this.setState({ - mapTableTitle: layer.get('title'), - mapTableName: layer.get('name') - }, () => this.toggleMapTable()); - } - - refreshMapTable = async () => { - const { mapTableTitle, mapTableName } = this.state; - let res = await reqTableData(mapTableName); - if (res.success) { - this.setState({resTableData: res.result}); - } - else { - alert(res.result); - return; - } - } - - styleLayer = async (layer) => { - console.log('styling layer...', layer); - - let SLD_URL = layer.getSource().params_.SLD; - console.log('SLD_URL', SLD_URL); - - let resGetLayerColor = await getLayerColor(SLD_URL); - - console.log('styleLayer resGetLayerColor', resGetLayerColor); - - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - } - /* - axios.get(SLD_URL) - .then(res => { - console.log('axios get SLD', res); - let text = res.data; - let parser, xmlDoc; - if (window.DOMParser) { - parser = new DOMParser(); - xmlDoc = parser.parseFromString(text,"text/xml"); - - console.log('xmlDoc', xmlDoc); - } - }) - .catch(err => { - console.log('axios get SLD err', err); - }); - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - }*/ - } - - openLayerStyles() { - this.setState({drawerLayerStylesVisible: true}); - } - - closeLayerStyles() { - this.setState({drawerLayerStylesVisible: false}); - } - - addFeature = async (layer) => { - console.log('adding feature on layer...', layer); - - let geomType = ''; - let reqGeomType = await getGeomType(layer.get('name')); - console.log('addFeature reqGeomType', reqGeomType) - if (reqGeomType.success) { - geomType = reqGeomType.result; - } - else { - geomType = ''; - alert(reqGeomType.result); - return; - } - - - let reqTableColumns = await getTableColumns(layer.get('name')); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({addFeatureColumns: reqTableColumns.result}); - } - else { - alert(reqTableColumns.result); - } - - - this.setState({ - drawingToolVisible: true, - layerNameDraw: layer.get('name'), - geomTypeDraw: geomType, - }); - this.props.toggleActiveStateAddGeometry(); - - } - - cancelDraw() { - this.setState({ - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '' - }); - this.props.toggleActiveStateAddGeometry(); - } - - removeLayer = (layer) => { - console.log('removing layer', layer); - let confirmation = window.confirm('Are you sure you want to remove this layer?'); - if (!confirmation) { - return; - } - this.props.olmap.removeLayer(layer); - } - - /*zoomToLayer = (layer) => { - console.log('zoomToLayer', layer); - let layerExtent = null; - let newLayerExtent = null; - let transformLayerExtent = null; - let fitOption = { - size: this.props.olmap.getSize(), - duration: 500 - } - if (layer instanceof OlLayerImage) { - layerExtent = layer.getSource().image_.extent; - transformLayerExtent = new transformExtent(layerExtent, 'EPSG:4326', this.props.olmap.getView().getProjection()) - console.log('layerExtent', layerExtent); - console.log('transformLayerExtent', transformLayerExtent); - newLayerExtent = [ - layerExtent[0], layerExtent[2], layerExtent[1], layerExtent[3] - ]; - console.log('newLayerExtent', newLayerExtent); - - this.props.olmap.getView().fit(layerExtent, fitOption); - - } - else if (layer instanceof OlLayerTile) { - layerExtent = layer.getSource().tmpExtent_; - this.props.olmap.getView().fit(layerExtent, fitOption); - } - }*/ - - zoomToLayer = (layer) => { - console.log('zoomToLayer getSource', layer.getSource()); - let layerName = layer.get('name'); - console.log('layerName', layerName); - const { fitOption } = this.state; - - - - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then(response => { - console.log('capabilities response', response); - if (response !== undefined) { - let layer = findWhere(response.Capability.Layer.Layer, {"Name": layerName}); - console.log('layer',layer); - - if (layer === undefined) { - alert('Layer '+layerName+' is not found'); - return; - } - - let proj = "CRS:84"; - let bbox = findWhere(layer.BoundingBox, {"crs": proj}); - let extent = bbox.extent; - console.log('layer', layer); - console.log('extent', extent); - - - /*// other option - extent = new transformExtent(extent, "EPSG:4326", "EPSG:3857"); - console.log('extent now', extent); - this.props.olmap.getView().fit(extent, fitOption); */ - - this.props.olmap.getView().fit(new transformExtent(extent, proj, this.props.olmap.getView().getProjection()), fitOption); - - } - }) - } - - onDragEndLayerTree = (callback) => { - console.log('onDragEndLayerTree', callback); - } - - rebuildTreeNodes = (evt) => { - console.log('rebuildTreeNodes',evt); - } - - getFeaturesOnMap = async () => { - let layerSource = ''; - let layerTypeName = ''; - let layerSourceArr = []; - let layerTypeNameArr = []; - let layerNameArr = []; - let featureCollections = []; - let allFeatures = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('type' !== 'base')) { - if (layer.get('type') !== 'vector') { - if (layer.get('type') !== 'layerGroup') { - layer.getLayers().forEach((sublayer, i) => { - if (sublayer.getVisible()) { - layerSource = sublayer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(sublayer.get('name')); - } - }); - } - else { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - } - } - } - if (layer.type === "IMAGE") { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - - } - }) - - console.log('layerTypeNameArr', layerTypeNameArr); - console.log('layerNameArr', layerNameArr); - - for (let i = 0; i < layerTypeNameArr.length; i++) { - let req = await reqTableData(layerTypeNameArr[i]); - - if (req.success) { - featureCollections.push(req.result); - if (req.result.features.length > 0) { - allFeatures.push(req.result.features); - } - } - else { - alert(req.result); - return; - } - - } - - allFeatures = flatten(allFeatures); - - this.setState({allFeatures: allFeatures}); - - } - - /*getLayerSearchLabel = async() => { - const param = { - method: 'GET', - 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.length > 0) { - console.log('getLayerSearchLabel result', result); - this.setState({ - searchLabelData: result.data - }) - } - } else { - - } - } catch(err) { - console.log(err); - alert(err.message.toString()); - } - }*/ - - setAddFeatureValue = (obj) => { - this.setState({addFeatureValue: obj}) - } - - renderToolbarButtons = () => { - const { activeSideLeft } = this.state - let olMousePosition = document.getElementsByClassName("ol-mouse-position")[0]; - let olScaleLine = document.getElementsByClassName("ol-scale-line")[0]; - - if (activeSideLeft) { - olMousePosition.classList.add("active-side-left"); - olScaleLine.classList.add("active-side-left"); - } - else { - olMousePosition.classList.remove("active-side-left"); - olScaleLine.classList.remove("active-side-left"); - } - - return ( - - this.zoomIn()} - > - - - - this.zoomOut()} - > - - - - - - - - - - {/* - - this.mapMeasurement()} - > - - - - - -
- Map Measurement -
- - Remove Layer - - */} - - - {/* this.toggleBtnDropMeasure()}> - - - - - - - -
Map Measurement
- - this.toggleMeasure('LineString')}> - Distance - - this.toggleMeasure('Polygon')}> - Area - - - */} - - this.toggleMeasureVisible()} - > - - - - - - - this.toggleLegend()} - > - - - - - - - - {/*
- -
*/} - - ) - } - - finishDrawingAdd = () => { - const { DrawingUtil, drawingLayer, chosenLayer } = this.state; - - DrawingUtil.setActive(null, false); - DrawingUtil.destroy(); - - if (drawingLayer) { - drawingLayer.getSource().clear(); - } - if (chosenLayer) { - chosenLayer.getSource().clear(); - } - - let layersToRemove = []; - this.props.olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { - layersToRemove.push(layer); - } - if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - for(var i = 0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - - - } - - mapMeasurement = () => { - /*return ( - - - - - - -
- Map Measurement -
- - this.removeLayer(layer)}> Remove Layer - - - )*/ - } - - toggleBtnDropMeasure = () => { - this.setState({ btnDropMeasureVisible: !this.state.btnDropMeasureVisible }, () => { - if (!this.state.btnDropMeasureVisible) { - this.setState({ - measureName: '', - measureType: '' - }); - } - }); - } - - - /*toggleMeasure = (name, type) => { - this.setState({ - measureVisible: true, - measureName: name, - measureType: type - }); - }*/ - - pointerMoveHandler = (evt) => { - let { sketch, helpTooltipElement, helpTooltip, continuePolygonMsg, continueLineMsg } = this.state; - if (evt.dragging) { - return; - } - /** @type {string} */ - var helpMsg = 'Click to start drawing'; - - if (sketch) { - var geom = sketch.getGeometry(); - if (geom instanceof Polygon) { - helpMsg = continuePolygonMsg; - } else if (geom instanceof LineString) { - helpMsg = continueLineMsg; - } - } - - helpTooltip.setPosition(evt.coordinate); - - helpTooltipElement.classList.remove('hidden'); - }; - - restartMeasureMap = () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.setState({measureValue: ''}); - - this.measureLayer.getSource().clear(); - - olmap.removeInteraction(measureDraw); - } - - deactiveMeasureMap = () => { - const { olmap } = this.props; - this.restartMeasureMap(); - this.setState({measureType: ''}); - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - } - - toggleMeasure = (type) => { - this.setState({ - measureType: type - }, () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.restartMeasureMap(); - - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - - olmap.addLayer(this.measureLayer); - - this.addInteractionMeasure(measureType); - }) - } - - addInteractionMeasure = (measureType) => { - let { olmap } = this.props; - let { measureDraw, sketch } = this.state; - let measure = new Draw({ - source: this.measureLayer.getSource(), - type: measureType, - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - lineDash: [10, 10], - width: 3 - }), - image: new CircleStyle({ - radius: 5, - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' - }), - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' - }) - }) - }) - }); - this.setState({measureDraw: measure}, () => { - let { measureDraw, measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - olmap.addInteraction(measureDraw); - - - - - - var listener; - measureDraw.on('drawstart', - (evt) => { - - this.measureLayer.getSource().clear(); - - sketch = evt.feature; - - /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */ - var tooltipCoord = evt.coordinate; - - listener = sketch.getGeometry().on('change', (evt) => { - var geom = evt.target; - var output; - if (geom instanceof Polygon) { - output = formatArea(geom); - tooltipCoord = geom.getInteriorPoint().getCoordinates(); - console.log('tooltipCoord',tooltipCoord); - this.setState({measureValue: output}); - } else if (geom instanceof LineString) { - output = formatLength(geom); - tooltipCoord = geom.getLastCoordinate(); - this.setState({measureValue: output}); - } - }); - }); - - measureDraw.on('drawend', - () => { - sketch = null; - measureTooltipElement = null; - - unByKey(listener); - }); - }); - } - - /** - * Creates a new measure tooltip - */ - createMeasureTooltip = () => { - let { measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - if (measureTooltipElement) { - measureTooltipElement.parentNode.removeChild(measureTooltipElement); - } - measureTooltipElement = document.createElement('div'); - measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'; - measureTooltip = new Overlay({ - element: measureTooltipElement, - offset: [0, -15], - positioning: 'bottom-center' - }); - olmap.addOverlay(measureTooltip); - } - - /*renderMeasureContent = () => { - const { measureVisible } = this.state; - console.log('measureVisible', measureVisible); - alert('measureVisible '+measureVisible); - return ( -
-
- Helloooooooo -
-
- ) - }*/ - - render() { - const {isReady} = this.state; - if (!isReady) { - return null; - } - return ( - - -
- - -
- {/* console.log('layer tree changed')} - onRightClick={(layer) => this.onRightClickLayerTree(layer)} - nodeTitleRenderer={(layer) => this.customTitleLayerTree(layer)} - onDragEnd={(callback) => this.onDragEndLayerTree(callback)} - onLayerChangeVisible={() => console.log('layer change visible')} - onDrop={(info) => console.log('onDrop', info)} - />*/} -
- this.customTitleLayerTree(layer)} - /> -
- - - - this.props.openPopupRight()} - popupDataTemp={this.props.popupDataTemp} - setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} - activeListFeatureId={this.props.activeListFeatureId} - searchLabelData={this.props.searchLabelData} - layerInfo={this.props.layerInfo} - /> - - - - - - { this.renderToolbarButtons() } - - - - - - - - {/*{ - this.state.layerSwitcherVisible && - - }*/} - - { this.state.mapTableModalVisible && - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={() => this.refreshMapTable()} - /> - } - - {this.state.drawingToolVisible && - this.toggleAddFeatureVisible()} - setAddFeatureValue={(obj) => this.setAddFeatureValue(obj)} - setDrawingState={(DrawingUtil, drawingLayer, chosenLayer) => this.setState({ - DrawingUtil: DrawingUtil, - drawingLayer: drawingLayer, - chosenLayer: chosenLayer - })} - /> - } - - { this.state.addFeatureVisible && - this.toggleAddFeatureVisible()} - addFeatureValue={this.state.addFeatureValue} - closeDrawing={this.cancelDraw} - finishDrawingAdd={() => this.finishDrawingAdd()} - /> - } - - - - - - {this.state.createNewLayerVisible && - - } - - { this.state.legendVisible && this.toggleLegend()} /> } - - {/* this.state.measureVisible && - - */} - - { this.state.measureVisible && - this.toggleMeasure(type)} - toggleMeasureVisible={() => this.toggleMeasureVisible()} - measureType={this.state.measureType} - measureValue={this.state.measureValue} - /> - } - - ) - } -} - -export default MapToolbar; \ No newline at end of file diff --git a/src/components/MapToolbar_backup/MapToolbar.css b/src/components/MapToolbar_backup/MapToolbar.css deleted file mode 100644 index a00a4af..0000000 --- a/src/components/MapToolbar_backup/MapToolbar.css +++ /dev/null @@ -1,180 +0,0 @@ -:root { - --position-maptool: fixed; - --left-maptool: 13px; - --button-size: 16px; - --active-left-sidebar: 350px; -} - -.maptool-custom { - background-color: rgba(200, 199, 58, 0.65); -} - -.maptool_1 { - position: var(--position-maptool); - top: 60px; - /*top: 130px;*/ - left: var(--left-maptool); -} - -.maptool_2 { - position: var(--position-maptool); - top: 95px; - /*top: 165px;*/ - left: var(--left-maptool); -} - -.maptool_3 { - position: var(--position-maptool); - top: 130px; - /*top: 200px;*/ - left: var(--left-maptool); -} - -.maptool_4 { - position: var(--position-maptool); - top: 165px; - /*top: 235px;*/ - left: var(--left-maptool); -} - -.maptool_5 { - position: var(--position-maptool); - top: 200px; - left: var(--left-maptool); -} - -.maptool_6 { - position: var(--position-maptool); - top: 235px; - left: var(--left-maptool); -} - -.maptool_7 { - position: var(--position-maptool); - top: 270px; - left: var(--left-maptool); -} - -.maptool_8 { - position: var(--position-maptool); - top: 305px; - left: var(--left-maptool); -} - -.maptool_9 { - position: var(--position-maptool); - top: 340px; - left: var(--left-maptool); -} - -.maptool_10 { - position: var(--position-maptool); - top: 375px; - left: var(--left-maptool); -} - -/*#custom-mouse-position { - position: var(--position-maptool); - bottom: 10px !important; - left: var(--left-maptool); -}*/ - -.maptool_btm_1 { - position: var(--position-maptool); - bottom: 10px; - left: var(--left-maptool); -} - -.maptool_btm_2 { - position: var(--position-maptool); - bottom: 45px; - left: var(--left-maptool); -} - -.button-layer-menu { - background-color: #ffffff; - padding: 0px; - margin-top: -10px; - margin-left: 10px; -} - -.layer-tree-wrapper { - margin-top: 10px; - margin-left: -20px; - overflow: auto; - height: 60vh; -} - -.layer-tree-title-wrapper { - /*width: 130px;*/ - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 150px; -} - -.layer-tree-dropdown-wrapper { - /*width: 100%; */ - right: 0; - display: inline-block; - /*z-index: 300;*/ -} - -.layer-tree-badge { - margin-top: -25px; -} - -.ow-wrapper { - /*overflow-wrap: break-word;*/ - word-wrap: break-word; - /*max-width: 200px;*/ -} - -.ow { - overflow-wrap: break-word; - word-wrap: break-word; - max-width: 200px; -} - -.layer-button-group { - -} - -.active-side-left { - margin-left: 300px; -} - -/*.ol-tooltip { - position: relative; - background: rgba(0, 0, 0, 0.5); - border-radius: 4px; - color: white; - padding: 4px 8px; - opacity: 0.7; - white-space: nowrap; - font-size: 12px; - } -.ol-tooltip-measure { - opacity: 1; - font-weight: bold; -} -.ol-tooltip-static { - background-color: #ffcc33; - color: black; - border: 1px solid white; -} -.ol-tooltip-measure:before, -.ol-tooltip-static:before { - border-top: 6px solid rgba(0, 0, 0, 0.5); - border-right: 6px solid transparent; - border-left: 6px solid transparent; - content: ""; - position: absolute; - bottom: -6px; - margin-left: -7px; - left: 50%; -} -.ol-tooltip-static:before { - border-top-color: #ffcc33; -}*/ diff --git a/src/components/MapToolbar_backup/MapToolbar.js b/src/components/MapToolbar_backup/MapToolbar.js deleted file mode 100644 index 904da3e..0000000 --- a/src/components/MapToolbar_backup/MapToolbar.js +++ /dev/null @@ -1,1941 +0,0 @@ -import React, { Component, Fragment, useState } from 'react'; -import { Drawer, Tooltip } from 'antd'; -import { - mappify, - SimpleButton, - AddWmsPanel, - LayerTree, - Panel -} from '@terrestris/react-geo'; -import { - Badge, Dropdown, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, - InputGroup, Input, InputGroupAddon, InputGroupText, Button, Collapse, Card, CardBody -} from 'reactstrap'; -import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; -import MeasureButton from '@terrestris/react-geo/dist/Button/MeasureButton/MeasureButton'; -import MapLayerSwitcher from '../../components/MapLayerSwitcher'; -import MapTable2 from '../../components/MapTable2'; -import DrawingTool from '../../components/DrawingTool'; -import MapLayerStyles from '../../components/MapLayerStyles'; -import CreateNewLayer from '../../components/CreateNewLayer'; -import SearchFeatures from '../../components/SearchFeatures'; -import AddFeature from '../../components/AddFeature'; -import MapLegend from '../../components/MapLegend'; -import MeasureContainer from '../../components/MeasureContainer'; -import DailyInfo from '../../components/DailyInfo'; -import LayerTreeGeoHR from '../../components/LayerTreeGeoHR'; -import { appConfig, wfsDispatcherUrl } from '../../const/MapConst.js'; -import './MapToolbar.css'; -import { Icon, InlineIcon } from '@iconify/react'; -import layersIcon from '@iconify/icons-ion/layers'; -import mapIcon from '@iconify/icons-ion/map'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import listOutline from '@iconify/icons-ion/list-outline'; -import imageOutline from '@iconify/icons-ion/image-outline'; -import trashOutline from '@iconify/icons-ion/trash-outline'; -import brushIcon from '@iconify/icons-ion/brush'; -import createOutline from '@iconify/icons-ion/create-outline'; -import contractIcon from '@iconify/icons-ion/contract'; -import searchPlus from '@iconify/icons-fe/search-plus'; -import searchMinus from '@iconify/icons-fe/search-minus'; -import mapLegend from '@iconify/icons-mdi/map-legend'; -import rulerIcon from '@iconify/icons-mdi/ruler'; -import filterIcon from '@iconify/icons-ion/filter'; -import informationCircleOutline from '@iconify/icons-ion/information-circle-outline'; - -import axios from 'axios'; -import OlLayerGroup from 'ol/layer/Group'; -import OlLayerTile from 'ol/layer/Tile'; -import OlLayerImage from 'ol/layer/Image'; -import ZoomToExtent from 'ol/control/ZoomToExtent'; -import { fromLonLat, transformExtent } from 'ol/proj'; -import { Draw } from 'ol/interaction'; -import { LineString, Polygon } from 'ol/geom'; -import { Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource } from 'ol/source'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; -import { unByKey } from 'ol/Observable'; -import Overlay from 'ol/Overlay'; -import { WMS_CAPABILITIES_URL, legendPicUrl } from '../../const/MapConst.js'; -import { findWhere, flatten, without } from 'underscore'; -import { reqTableData, getGeomType, getTableColumns, getLayerColor, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js'; -import QueryBuilder from '../QueryBuilder/QueryBuilder.js'; -import '../../assets/css/customscroll.css'; -import { requestTableDailyInfoApi } from '../../const/GeohrApiFunc.js'; - -const MappifiedLayerTree = mappify(LayerTree); - -/* -Toggle Visibility that must be closed or switched to its visibility: - -layer: drawerLayerVisible -popup: popupRightVisible -searchFeature: drawerSearchVisible -basemap: layerSwitcherVisible -legend: legendVisible -drawing: drawingToolVisible -layerStyle: drawerLayerStylesVisible -2: mapTableModalVisible - -*/ - -class MapToolbar extends Component { - - constructor(props) { - super(props); - this.state = { - isReady: false, - wmsLayers: [], - drawerDailyInfo: true, - drawerLayerVisible: true, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - layerSwitcherVisible: false, - layerPanelVisible: false, - mapTableModalVisible: false, - queryBuilderVisible: false, - mapTableName: '', - mapTableTitle: '', - mapTableTitleSrc: '', - mapTableColumns: null, - mapTableData: null, - selectedMapLayer: null, - resTableData: null, - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '', - drawerLayerStylesVisible: false, - createNewLayerVisible: false, - searchInput: '', - allFeatures: [], - popupRightVisible: false, - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - addFeatureVisible: false, - addFeatureColumns: null, - addFeatureValue: null, - legendVisible: false, - activeSideLeft: false, - DrawingUtil: null, - drawingLayer: null, - chosenLayer: null, - btnDropMeasureVisible: false, - measureVisible: false, - measureName: '', - measureType: '', - measureValue: '', - measureDraw: null, - sketch: null, - helpTooltipElement: null, - helpTooltip: null, - measureTooltipElement: null, - measureTooltip: null, - continuePolygonMsg: 'Click to continue drawing the polygon', - continueLineMsg: 'Click to continue drawing the line', - searchDetailField:"name", - search:"", - totalPageBottom:0, - currentPage:1, - rowsPerPage: 10, - page:1, - table_type:"", - totalRecord:0, - } - this.getWMSLayers = this.getWMSLayers.bind(this); - this.toggleDrawerLayer = this.toggleDrawerLayer.bind(this); - this.toggleDrawerSearch = this.toggleDrawerSearch.bind(this); - this.toggleLayerSwitcher = this.toggleLayerSwitcher.bind(this); - this.cancelWmsLayer = this.cancelWmsLayer.bind(this); - this.customTitleLayerTree = this.customTitleLayerTree.bind(this); - this.onRightClickLayerTree = this.onRightClickLayerTree.bind(this); - this.onDropLayerTree = this.onDropLayerTree.bind(this); - this.toggleMapTable = this.toggleMapTable.bind(this); - this.toggleMapAnalyzeTool = this.toggleMapAnalyzeTool.bind(this); - this.cancelDraw = this.cancelDraw.bind(this); - this.toggleLayerStyles = this.toggleLayerStyles.bind(this); - this.openLayerStyles = this.openLayerStyles.bind(this); - this.closeLayerStyles = this.closeLayerStyles.bind(this); - this.toggleCreateNewLayer = this.toggleCreateNewLayer.bind(this); - - this.measureLayer = new VectorLayer({ - name: 'measure_layer', - title: 'Measure Layer', - type: 'vector', - source: new VectorSource(), - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - width: 3 - }), - image: new CircleStyle({ - radius: 7, - fill: new Fill({ - color: '#ffcc33' - }) - }) - }) - }); - } - - componentDidMount() { - this.setState({ isReady: true, activeSideLeft: true }); - } - - componentDidUpdate(prevProps, prevState) { - if (prevState.mapTableModalVisible !== this.state.mapTableModalVisible) { - if (!this.state.mapTableModalVisible) { - this.props.removeLayerByName('routeLayer'); - this.setState({ mapTableData: null }); - } - } - } - - getLayerType = (item) => { - let layer_name = item.id.substr(0, item.id.indexOf(".")); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_geom_type; - } - else { - return "Undefined Geom Type"; - } - } - - getLayerColor = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_color; - } - else { - return "#ffffff"; - } - } - - getLayerTitle = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - let output = ''; - - if (matchLayerName.length > 0) { - if (matchLayerName[0].layer_title !== '' && matchLayerName[0].layer_title !== null) { - output = matchLayerName[0].layer_title; - return output; - } - else { - output = matchLayerName[0].layer_name; - return output; - } - } - else { - return "No layer title provided"; - } - } - - getLayerTitleTextColor = (layerColor) => { - let brightness = lightOrDark(layerColor); // 'light' or 'dark' - - if (brightness == 'light') { - return 'dark-text'; - } - else { - return 'light-text'; - } - } - - getLayerCount = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].total_features; - - } - else { - return "0"; - } - } - - zoomIn = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() + 1, - duration: 500 - }); - } - - zoomOut = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() - 1, - duration: 500 - }); - } - - getWMSLayers() { - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL) - .then(CapabilitiesUtil.getLayersFromWmsCapabilities) - .then(layers => { - console.log('wmsLayers', layers); - this.setState({ - wmsLayers: layers - }); - }) - .catch(() => alert('Could not parse capabilities document.')); - } - - /*toggleDrawerLayer () { - this.closeAllDrawer(); - const { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({ drawerLayerVisible: false }, () => this.closeAllDrawer() ); - } - else { - this.setState({ drawerLayerVisible: true }, () => this.closeAllDrawer() ); - } - }*/ - - /*toggleDrawerLayer () { - this.setState({drawerLayerVisible: !this.state.drawerLayerVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - }*/ - - toggleDrawerLayer() { - let { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({ drawerLayerVisible: false }, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({ drawerLayerVisible: true }, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - } - } - - /*toggleDrawerSearch () { - this.closeAllDrawer(); - const { drawerSearchVisible } = this.state; - console.log('drawerSearchVisible', drawerSearchVisible); - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => this.closeAllDrawer() ); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.closeAllDrawer(); - }); - } - }*/ - - toggleDrawerSearch() { - const { drawerSearchVisible } = this.state; - - if (drawerSearchVisible) { - this.setState({ drawerSearchVisible: false }, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }) - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({ drawerSearchVisible: true }, () => { - this.getFeaturesOnMap(); - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleMapAnalyzeTool() { - const { drawerAnalyzeToolVisible } = this.state; - - if (drawerAnalyzeToolVisible) { - this.setState({ drawerAnalyzeToolVisible: false }, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - drawerDailyInfo: false - }) - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({ drawerAnalyzeToolVisible: true }, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true, - drawerDailyInfo: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleLayerSwitcher() { - this.setState({ layerSwitcherVisible: !this.state.layerSwitcherVisible }, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - drawerDailyInfo: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMapTable() { - this.setState({ mapTableModalVisible: !this.state.mapTableModalVisible }, () => { - this.setState({ - drawerLayerStylesVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleCreateNewLayer() { - this.setState({ createNewLayerVisible: !this.state.createNewLayerVisible }); - this.deactiveMeasureMap(); - } - - toggleLayerStyles() { - this.setState({ drawerLayerStylesVisible: !this.state.drawerLayerStylesVisible }, () => { - this.setState({ - drawerLayerVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - drawerDailyInfo: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleAddFeatureVisible = () => { - this.setState({ addFeatureVisible: !this.state.addFeatureVisible }); - this.deactiveMeasureMap(); - } - - toggleLegend = () => { - this.setState({ legendVisible: !this.state.legendVisible }, () => { - if (this.state.drawerLayerVisible) { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - drawerDailyInfo: false - }); - } - else { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - drawerDailyInfo: false - }); - } - - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMeasureVisible = () => { - this.setState({ measureVisible: !this.state.measureVisible }, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - drawerDailyInfo: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - - if (!this.state.measureVisible) { - this.deactiveMeasureMap(); - } - }); - } - - toggleDrawerDailyInfo = () => { - this.setState({ drawerDailyInfo: !this.state.drawerDailyInfo }, () => { - if (this.state.drawerLayerVisible) { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - } - else { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false, - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - } - }); - } - - closeAllDrawer = () => { - /* - Toggle Visibility that must be closed or switched to its visibility: - - layer: drawerLayerVisible - popup: popupRightVisible - searchFeature: drawerSearchVisible - basemap: layerSwitcherVisible - legend: legendVisible - drawing: drawingToolVisible - layerStyle: drawerLayerStylesVisible - mapTable: mapTableModalVisible - - Group layers: layer, layerStyle, mapTable (that shouldn't be closed each other) - Group popup: searchFeature, popup (that shouldn't be closed each other) => searchFeature below of popup - Legend - BaseMap - Drawing - */ - - const { drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - } = this.state; - - let visibleArr = [drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - ]; - - console.log('visibleArr', visibleArr); - - if (drawerLayerVisible) { - this.setState({ - drawerLayerVisible: true, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerLayerStylesVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: true, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (mapTableModalVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: true, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerSearchVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: true, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (popupRightVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: true, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (legendVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: true, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (layerSwitcherVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: true, - drawingToolVisible: false - }) - } - - if (drawingToolVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: true - }) - } - - } - - - cancelWmsLayer() { - console.log('cancel wms'); - this.setState({ wmsLayers: [] }); - } - - onClickLayerMenu = (layer) => { - } - - customTitleLayerTree(layer) { - - - - - return ( -
-
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- {/*
- -
*/} -
- - {/*10*/} - {localStorage.getItem('u_group') !== 'kominfo' ? - layer.get('type') == 'layer' ? - {this.getLayerCount(layer)} - : null - : layer.get('type') == 'layer' ? - - : null - } - this.onClickLayerMenu(layer)}> - - - - -
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- - { - layer.get('type') === 'layer' || layer instanceof OlLayerImage ? - - - this.zoomToLayer(layer)}> Zoom To Layer - this.showTableData(layer)}> Show Data - {this.props.editGeometryVisible ? - Add Feature - : this.addFeature(layer)}> Add Feature - } - {/* this.addFeature(layer)}> Add Feature*/} - this.styleLayer(layer)}> Layer Styles - - : - null} - this.removeLayer(layer)}> Remove Layer - - -
-
- ) - } - - onRightClickLayerTree(layer) { - console.log('right click layer tree', layer); - return ( - - - Header - Action - Another Action - - Another Action - - - ) - } - - onDropLayerTree() { - console.log('dropped'); - } - - - - /*showTableData = (layer) => { - console.log('showTableData', layer); - this.setState({ - mapTableTitle: layer.get('name'), - mapTableTitleSrc: layer.getSource().params_.LAYERS - }, async () => { - let res = await reqTableData(this.state.mapTableTitle); - console.log('showTableData',res); - - if (res.success) { - this.setState({resTableData: res.result}, () => this.toggleMapTable()); - } - else { - alert(res.result); - return; - } - }); - }*/ - - showTableData = (layer) => { - this.setState({ - mapTableTitle: layer.get('title'), - mapTableName: layer.get('name') - }, () => this.toggleMapTable()); - } - - refreshMapTable = async () => { - const { mapTableTitle, mapTableName } = this.state; - let res = await reqTableData(mapTableName); - if (res.success) { - this.setState({ resTableData: res.result }); - } - else { - alert(res.result); - return; - } - } - - styleLayer = async (layer) => { - console.log('styling layer...', layer); - - let SLD_URL = layer.getSource().params_.SLD; - console.log('SLD_URL', SLD_URL); - - let resGetLayerColor = await getLayerColor(SLD_URL); - - console.log('styleLayer resGetLayerColor', resGetLayerColor); - - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - } - /* - axios.get(SLD_URL) - .then(res => { - console.log('axios get SLD', res); - let text = res.data; - let parser, xmlDoc; - if (window.DOMParser) { - parser = new DOMParser(); - xmlDoc = parser.parseFromString(text,"text/xml"); - - console.log('xmlDoc', xmlDoc); - } - }) - .catch(err => { - console.log('axios get SLD err', err); - }); - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - }*/ - } - - openLayerStyles() { - this.setState({ drawerLayerStylesVisible: true }); - } - - closeLayerStyles() { - this.setState({ drawerLayerStylesVisible: false }); - } - - addFeature = async (layer) => { - console.log('adding feature on layer...', layer); - - let geomType = ''; - let reqGeomType = await getGeomType(layer.get('name')); - console.log('addFeature reqGeomType', reqGeomType) - if (reqGeomType.success) { - geomType = reqGeomType.result; - } - else { - geomType = ''; - alert(reqGeomType.result); - return; - } - - - let reqTableColumns = await getTableColumns(layer.get('name')); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({ addFeatureColumns: reqTableColumns.result }); - } - else { - alert(reqTableColumns.result); - } - - - this.setState({ - drawingToolVisible: true, - layerNameDraw: layer.get('name'), - geomTypeDraw: geomType, - }); - this.props.toggleActiveStateAddGeometry(); - - } - - cancelDraw() { - this.setState({ - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '' - }); - this.props.toggleActiveStateAddGeometry(); - } - - removeLayer = (layer) => { - console.log('removing layer', layer); - let confirmation = window.confirm('Are you sure you want to remove this layer?'); - if (!confirmation) { - return; - } - this.props.olmap.removeLayer(layer); - } - - /*zoomToLayer = (layer) => { - console.log('zoomToLayer', layer); - let layerExtent = null; - let newLayerExtent = null; - let transformLayerExtent = null; - let fitOption = { - size: this.props.olmap.getSize(), - duration: 500 - } - if (layer instanceof OlLayerImage) { - layerExtent = layer.getSource().image_.extent; - transformLayerExtent = new transformExtent(layerExtent, 'EPSG:4326', this.props.olmap.getView().getProjection()) - console.log('layerExtent', layerExtent); - console.log('transformLayerExtent', transformLayerExtent); - newLayerExtent = [ - layerExtent[0], layerExtent[2], layerExtent[1], layerExtent[3] - ]; - console.log('newLayerExtent', newLayerExtent); - - this.props.olmap.getView().fit(layerExtent, fitOption); - - } - else if (layer instanceof OlLayerTile) { - layerExtent = layer.getSource().tmpExtent_; - this.props.olmap.getView().fit(layerExtent, fitOption); - } - }*/ - - zoomToLayer = (layer) => { - console.log('zoomToLayer getSource', layer.getSource()); - let layerName = layer.get('name'); - console.log('layerName', layerName); - const { fitOption } = this.state; - - - - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then(response => { - console.log('capabilities response', response); - if (response !== undefined) { - let layer = findWhere(response.Capability.Layer.Layer, { "Name": layerName }); - console.log('layer', layer); - - if (layer === undefined) { - alert('Layer ' + layerName + ' is not found'); - return; - } - - let proj = "CRS:84"; - let bbox = findWhere(layer.BoundingBox, { "crs": proj }); - let extent = bbox.extent; - console.log('layer', layer); - console.log('zoomToLayer extent', extent); - - - /*// other option - extent = new transformExtent(extent, "EPSG:4326", "EPSG:3857"); - console.log('extent now', extent); - this.props.olmap.getView().fit(extent, fitOption); */ - - this.props.olmap.getView().fit(new transformExtent(extent, proj, this.props.olmap.getView().getProjection()), fitOption); - - } - }) - } - - onDragEndLayerTree = (callback) => { - console.log('onDragEndLayerTree', callback); - } - - rebuildTreeNodes = (evt) => { - console.log('rebuildTreeNodes', evt); - } - - getFeaturesOnMap = async () => { - let layerSource = ''; - let layerTypeName = ''; - let layerSourceArr = []; - let layerTypeNameArr = []; - let layerNameArr = []; - let featureCollections = []; - let allFeatures = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('type' !== 'base')) { - if (layer.get('type') !== 'vector') { - if (layer.get('type') !== 'layerGroup') { - layer.getLayers().forEach((sublayer, i) => { - if (sublayer.getVisible()) { - layerSource = sublayer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(sublayer.get('name')); - } - }); - } - else { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - } - } - } - if (layer.type === "IMAGE") { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - - } - }) - - console.log('layerTypeNameArr', layerTypeNameArr); - console.log('layerNameArr', layerNameArr); - - for (let i = 0; i < layerTypeNameArr.length; i++) { - let req = await reqTableData(layerTypeNameArr[i]); - - if (req.success) { - featureCollections.push(req.result); - if (req.result.features.length > 0) { - allFeatures.push(req.result.features); - } - } - else { - alert(req.result); - return; - } - - } - - allFeatures = flatten(allFeatures); - - this.setState({ allFeatures: allFeatures }); - - } - - /*getLayerSearchLabel = async() => { - const param = { - method: 'GET', - 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.length > 0) { - console.log('getLayerSearchLabel result', result); - this.setState({ - searchLabelData: result.data - }) - } - } else { - - } - } catch(err) { - console.log(err); - alert(err.message.toString()); - } - }*/ - - setAddFeatureValue = (obj) => { - this.setState({ addFeatureValue: obj }) - } - - renderToolbarButtons = () => { - const { activeSideLeft } = this.state - let olMousePosition = document.getElementsByClassName("ol-mouse-position")[0]; - let olScaleLine = document.getElementsByClassName("ol-scale-line")[0]; - - if (activeSideLeft) { - olMousePosition.classList.add("active-side-left"); - olScaleLine.classList.add("active-side-left"); - } - else { - olMousePosition.classList.remove("active-side-left"); - olScaleLine.classList.remove("active-side-left"); - } - - return ( - - this.zoomIn()} - > - - - - this.zoomOut()} - > - - - - - - - - - - this.toggleDrawerDailyInfo()} - > - - - - {/* - - this.mapMeasurement()} - > - - - - - -
- Map Measurement -
- - Remove Layer - - */} - - - {/* this.toggleBtnDropMeasure()}> - - - - - - - -
Map Measurement
- - this.toggleMeasure('LineString')}> - Distance - - this.toggleMeasure('Polygon')}> - Area - - - */} - - this.toggleMeasureVisible()} - > - - - - - {/**/} - - this.toggleLegend()} - > - - - - - - - - - - this.toggleQueryBuilder()} - > - - - - {/*
- -
*/} - - ) - } - - finishDrawingAdd = () => { - const { DrawingUtil, drawingLayer, chosenLayer } = this.state; - - DrawingUtil.setActive(null, false); - DrawingUtil.destroy(); - - if (drawingLayer) { - drawingLayer.getSource().clear(); - } - if (chosenLayer) { - chosenLayer.getSource().clear(); - } - - let layersToRemove = []; - this.props.olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { - layersToRemove.push(layer); - } - if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - for (var i = 0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - - - } - - mapMeasurement = () => { - /*return ( - - - - - - -
- Map Measurement -
- - this.removeLayer(layer)}> Remove Layer - - - )*/ - } - - toggleBtnDropMeasure = () => { - this.setState({ btnDropMeasureVisible: !this.state.btnDropMeasureVisible }, () => { - if (!this.state.btnDropMeasureVisible) { - this.setState({ - measureName: '', - measureType: '' - }); - } - }); - } - - - /*toggleMeasure = (name, type) => { - this.setState({ - measureVisible: true, - measureName: name, - measureType: type - }); - }*/ - - pointerMoveHandler = (evt) => { - let { sketch, helpTooltipElement, helpTooltip, continuePolygonMsg, continueLineMsg } = this.state; - if (evt.dragging) { - return; - } - /** @type {string} */ - var helpMsg = 'Click to start drawing'; - - if (sketch) { - var geom = sketch.getGeometry(); - if (geom instanceof Polygon) { - helpMsg = continuePolygonMsg; - } else if (geom instanceof LineString) { - helpMsg = continueLineMsg; - } - } - - helpTooltip.setPosition(evt.coordinate); - - helpTooltipElement.classList.remove('hidden'); - }; - - restartMeasureMap = () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.setState({ measureValue: '' }); - - this.measureLayer.getSource().clear(); - - olmap.removeInteraction(measureDraw); - } - - deactiveMeasureMap = () => { - const { olmap } = this.props; - this.restartMeasureMap(); - this.setState({ measureType: '' }); - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - } - - toggleMeasure = (type) => { - this.setState({ - measureType: type - }, () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.restartMeasureMap(); - - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - - olmap.addLayer(this.measureLayer); - - this.addInteractionMeasure(measureType); - }) - } - - addInteractionMeasure = (measureType) => { - let { olmap } = this.props; - let { measureDraw, sketch } = this.state; - let measure = new Draw({ - source: this.measureLayer.getSource(), - type: measureType, - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - lineDash: [10, 10], - width: 3 - }), - image: new CircleStyle({ - radius: 5, - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' - }), - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' - }) - }) - }) - }); - this.setState({ measureDraw: measure }, () => { - let { measureDraw, measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - olmap.addInteraction(measureDraw); - - - - - - var listener; - measureDraw.on('drawstart', - (evt) => { - - this.measureLayer.getSource().clear(); - - sketch = evt.feature; - - /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */ - var tooltipCoord = evt.coordinate; - - listener = sketch.getGeometry().on('change', (evt) => { - var geom = evt.target; - var output; - if (geom instanceof Polygon) { - output = formatArea(geom); - tooltipCoord = geom.getInteriorPoint().getCoordinates(); - console.log('tooltipCoord', tooltipCoord); - this.setState({ measureValue: output }); - } else if (geom instanceof LineString) { - output = formatLength(geom); - tooltipCoord = geom.getLastCoordinate(); - this.setState({ measureValue: output }); - } - }); - }); - - measureDraw.on('drawend', - () => { - sketch = null; - measureTooltipElement = null; - - unByKey(listener); - }); - }); - } - - /** - * Creates a new measure tooltip - */ - createMeasureTooltip = () => { - let { measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - if (measureTooltipElement) { - measureTooltipElement.parentNode.removeChild(measureTooltipElement); - } - measureTooltipElement = document.createElement('div'); - measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'; - measureTooltip = new Overlay({ - element: measureTooltipElement, - offset: [0, -15], - positioning: 'bottom-center' - }); - olmap.addOverlay(measureTooltip); - } - - /*renderMeasureContent = () => { - const { measureVisible } = this.state; - console.log('measureVisible', measureVisible); - alert('measureVisible '+measureVisible); - return ( -
-
- Helloooooooo -
-
- ) - }*/ - - mappifiedLayerTree = () => { - const { olmap } = this.props; - let layers = []; - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('type') !== 'base') { - if (layer.get('type') !== 'vector') { - if (layer.get('type') == 'layerGroup') { - - } - else { - layers.push(layer); - } - } - } - }); - - - } - - toggleQueryBuilder = () => { - this.setState({ queryBuilderVisible: !this.state.queryBuilderVisible }) - } - - handleQbClose = (query, type, tree) => { - this.toggleQueryBuilder(); - this.props.handleQueryBuilder(query, type, tree) - } - - handleQbReset = (query, type) => { - this.setState({ queryBuilderVisible: false }) - this.props.handleQueryBuilder(query, type, '') - } - - onPagination = (current, pageSize) => { - this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { - this.getDataTableDetail(); - }) - } - - onShowSizeChange = (current, pageSize) => { - this.setState({ rowsPerPage: pageSize }, () => { - this.getDataTableDetail(); - }) - } - - handleSearchtype = (field) => { - this.setState({ searchDetailField:field }); - } - - handleSearch = (val) => { - this.setState({ search:val }); - this.getDataTableDetail(); - } - - setTableType = (type) => { - this.setState({table_type:type, search:""},()=> { - this.getDataTableDetail(); - }) - } - - getDataTableDetail = async () => { - const { - searchDetailField, - search, - currentPage, - rowsPerPage - } = this.state - - let param = { - table_type:this.state.table_type, - currentPage, - rowsPerPage, - searchDetailField, - search, - } - let dataRes = await requestTableDailyInfoApi(param); - this.setState({ mapTableData:dataRes.data, totalRecord:dataRes.total_record}); - } - - render() { - const { isReady } = this.state; - if (!isReady) { - return null; - } - return ( - - - this.props.onCheckOpt(state, checkedKeys)} - checkedKeysSales={this.props.checkedKeysSales} - checkedKeysCustomer={this.props.checkedKeysCustomer} - checkedKeysOffice={this.props.checkedKeysOffice} - checkedKeysDemografi={this.props.checkedKeysDemografi} - checkedKeysAnalisa={this.props.checkedKeysAnalisa} - checkedKeysEmployeeDivision={this.props.checkedKeysEmployeeDivision} - salesGroupTree={this.props.salesGroupTree} - employeeDivisionTree={this.props.employeeDivisionTree} - setSalesGroupTree={(data) => this.props.setSalesGroupTree(data)} - setEmployeeDivisionTree={(data) => this.props.setEmployeeDivisionTree(data)} - projectTree={this.props.projectTree} - setProjectTree={(data) => this.props.setProjectTree(data)} - checkedKeysProjectTree={this.props.checkedKeysProjectTree} - /> - - - this.toggleDrawerDailyInfo()} - visible={this.state.drawerDailyInfo} - mask={false} - width={250} - style={{ top: '50px', height: 'calc(100vh - 50px)' }} - > - this.setState({ mapTableTitle: name })} - setMapTableColumns={(data) => this.setState({ mapTableColumns: data })} - setMapTableData={(data) => this.setState({ mapTableData: data })} - removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)} - setIsProcessing={(data) => this.props.setIsProcessing(data)} - getDataTableDetail={this.getDataTableDetail} - setTableType={this.setTableType} - /> - - - - this.props.openPopupRight()} - popupDataTemp={this.props.popupDataTemp} - setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} - activeListFeatureId={this.props.activeListFeatureId} - searchLabelData={this.props.searchLabelData} - layerInfo={this.props.layerInfo} - /> - - - - - - {this.renderToolbarButtons()} - - - - - - - - {/*{ - this.state.layerSwitcherVisible && - - }*/} - - {/* { this.state.mapTableModalVisible && - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={() => this.refreshMapTable()} - /> - } */} - - {this.state.mapTableModalVisible && - this.setState({ mapTableData: data })} - olmap={this.props.olmap} - setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={() => this.refreshMapTable()} - showRoute={(route) => this.props.showRoute(route)} - removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)} - setIsProcessing={(data) => this.props.setIsProcessing(data)} - onShowSizeChange={this.onShowSizeChange} - onPagination={this.onPagination} - currentPage={this.state.currentPage} - rowsPerPage={this.state.rowsPerPage} - total={this.state.totalRecord} - handleSearch={this.handleSearch} - search={this.state.search} - /> - } - - {this.state.drawingToolVisible && - this.toggleAddFeatureVisible()} - setAddFeatureValue={(obj) => this.setAddFeatureValue(obj)} - setDrawingState={(DrawingUtil, drawingLayer, chosenLayer) => this.setState({ - DrawingUtil: DrawingUtil, - drawingLayer: drawingLayer, - chosenLayer: chosenLayer - })} - /> - } - - {this.state.addFeatureVisible && - this.toggleAddFeatureVisible()} - addFeatureValue={this.state.addFeatureValue} - closeDrawing={this.cancelDraw} - finishDrawingAdd={() => this.finishDrawingAdd()} - /> - } - - - - - - {this.state.createNewLayerVisible && - - } - - {this.state.legendVisible && this.toggleLegend()} />} - - {/* this.state.measureVisible && - - */} - - {this.state.queryBuilderVisible && - - } - - {this.state.measureVisible && - this.toggleMeasure(type)} - toggleMeasureVisible={() => this.toggleMeasureVisible()} - measureType={this.state.measureType} - measureValue={this.state.measureValue} - /> - } - - ) - } -} - -export default MapToolbar; \ No newline at end of file diff --git a/src/components/MapToolbar_backup/MapToolbar_backup.js b/src/components/MapToolbar_backup/MapToolbar_backup.js deleted file mode 100644 index f4ce0b3..0000000 --- a/src/components/MapToolbar_backup/MapToolbar_backup.js +++ /dev/null @@ -1,1690 +0,0 @@ -import React, { Component, Fragment, useState } from 'react'; -import { Drawer, Tooltip } from 'antd'; -import { - mappify, - SimpleButton, - AddWmsPanel, - LayerTree, - Panel -} from '@terrestris/react-geo'; -import { Badge, Dropdown, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, - InputGroup, Input, InputGroupAddon, InputGroupText, Button, Collapse, Card, CardBody -} from 'reactstrap'; -import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; -import MeasureButton from '@terrestris/react-geo/dist/Button/MeasureButton/MeasureButton'; -import MapLayerSwitcher from '../../components/MapLayerSwitcher'; -import MapTable from '../../components/MapTable'; -import DrawingTool from '../../components/DrawingTool'; -import MapLayerStyles from '../../components/MapLayerStyles'; -import CreateNewLayer from '../../components/CreateNewLayer'; -import SearchFeatures from '../../components/SearchFeatures'; -import AddFeature from '../../components/AddFeature'; -import MapLegend from '../../components/MapLegend'; -import MeasureContainer from '../../components/MeasureContainer'; -import { appConfig, wfsDispatcherUrl } from '../../const/MapConst.js'; -import './MapToolbar.css'; -import { Icon, InlineIcon } from '@iconify/react'; -import layersIcon from '@iconify/icons-ion/layers'; -import mapIcon from '@iconify/icons-ion/map'; -import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp'; -import listOutline from '@iconify/icons-ion/list-outline'; -import imageOutline from '@iconify/icons-ion/image-outline'; -import trashOutline from '@iconify/icons-ion/trash-outline'; -import brushIcon from '@iconify/icons-ion/brush'; -import createOutline from '@iconify/icons-ion/create-outline'; -import contractIcon from '@iconify/icons-ion/contract'; -import searchPlus from '@iconify/icons-fe/search-plus'; -import searchMinus from '@iconify/icons-fe/search-minus'; -import mapLegend from '@iconify/icons-mdi/map-legend'; -import rulerIcon from '@iconify/icons-mdi/ruler'; -import axios from 'axios'; -import OlLayerGroup from 'ol/layer/Group'; -import OlLayerTile from 'ol/layer/Tile'; -import OlLayerImage from 'ol/layer/Image'; -import ZoomToExtent from 'ol/control/ZoomToExtent'; -import {fromLonLat, transformExtent} from 'ol/proj'; -import { Draw } from 'ol/interaction'; -import {LineString, Polygon} from 'ol/geom'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Vector as VectorSource} from 'ol/source'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style'; -import {unByKey} from 'ol/Observable'; -import Overlay from 'ol/Overlay'; -import { WMS_CAPABILITIES_URL, legendPicUrl } from '../../const/MapConst.js'; -import { findWhere, flatten, without } from 'underscore'; -import { reqTableData, getGeomType, getTableColumns, getLayerColor, formatLength, formatArea, lightOrDark } from '../../const/GeoserverFunc.js'; -import '../../assets/css/customscroll.css'; - -const MappifiedLayerTree = mappify(LayerTree); - -/* -Toggle Visibility that must be closed or switched to its visibility: - -layer: drawerLayerVisible -popup: popupRightVisible -searchFeature: drawerSearchVisible -basemap: layerSwitcherVisible -legend: legendVisible -drawing: drawingToolVisible -layerStyle: drawerLayerStylesVisible -mapTable: mapTableModalVisible - -*/ - -class MapToolbar extends Component { - - constructor(props) { - super(props); - this.state = { - isReady: false, - wmsLayers: [], - drawerLayerVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - layerSwitcherVisible: false, - layerPanelVisible: false, - mapTableModalVisible: false, - mapTableName: '', - mapTableTitle: '', - mapTableTitleSrc: '', - selectedMapLayer: null, - resTableData: null, - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '', - drawerLayerStylesVisible: false, - createNewLayerVisible: false, - searchInput: '', - allFeatures: [], - popupRightVisible: false, - fitOption: { - size: this.props.olmap.getSize(), - duration: 500, - maxZoom: 18 - }, - addFeatureVisible: false, - addFeatureColumns: null, - addFeatureValue: null, - legendVisible: false, - activeSideLeft: false, - DrawingUtil: null, - drawingLayer: null, - chosenLayer: null, - btnDropMeasureVisible: false, - measureVisible: false, - measureName: '', - measureType: '', - measureValue: '', - measureDraw: null, - sketch: null, - helpTooltipElement: null, - helpTooltip: null, - measureTooltipElement: null, - measureTooltip: null, - continuePolygonMsg: 'Click to continue drawing the polygon', - continueLineMsg: 'Click to continue drawing the line', - - - } - this.getWMSLayers = this.getWMSLayers.bind(this); - this.toggleDrawerLayer = this.toggleDrawerLayer.bind(this); - this.toggleDrawerSearch = this.toggleDrawerSearch.bind(this); - this.toggleLayerSwitcher = this.toggleLayerSwitcher.bind(this); - this.cancelWmsLayer = this.cancelWmsLayer.bind(this); - this.customTitleLayerTree = this.customTitleLayerTree.bind(this); - this.onRightClickLayerTree = this.onRightClickLayerTree.bind(this); - this.onDropLayerTree = this.onDropLayerTree.bind(this); - this.toggleMapTable = this.toggleMapTable.bind(this); - this.toggleMapAnalyzeTool = this.toggleMapAnalyzeTool.bind(this); - this.cancelDraw = this.cancelDraw.bind(this); - this.toggleLayerStyles = this.toggleLayerStyles.bind(this); - this.openLayerStyles = this.openLayerStyles.bind(this); - this.closeLayerStyles = this.closeLayerStyles.bind(this); - this.toggleCreateNewLayer = this.toggleCreateNewLayer.bind(this); - - this.measureLayer = new VectorLayer({ - name: 'measure_layer', - title: 'Measure Layer', - type: 'vector', - source: new VectorSource(), - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - width: 3 - }), - image: new CircleStyle({ - radius: 7, - fill: new Fill({ - color: '#ffcc33' - }) - }) - }) - }); - } - - componentDidMount() { - this.setState({isReady: true}); - } - - getLayerType = (item) => { - let layer_name = item.id.substr(0, item.id.indexOf(".")); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_geom_type; - } - else { - return "Undefined Geom Type"; - } - } - - getLayerColor = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].layer_color; - } - else { - return "#ffffff"; - } - } - - getLayerTitle = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - let output = ''; - - if (matchLayerName.length > 0) { - if (matchLayerName[0].layer_title !== '' && matchLayerName[0].layer_title !== null) { - output = matchLayerName[0].layer_title; - return output; - } - else { - output = matchLayerName[0].layer_name; - return output; - } - } - else { - return "No layer title provided"; - } - } - - getLayerTitleTextColor = (layerColor) => { - let brightness = lightOrDark(layerColor); // 'light' or 'dark' - - if (brightness == 'light') { - return 'dark-text'; - } - else { - return 'light-text'; - } - } - - getLayerCount = (layer) => { - let layer_name = layer.get('name'); - let { layerInfo } = this.props; - let matchLayerName = layerInfo.filter(data => (data.layer_name == layer_name)); - - if (matchLayerName.length > 0) { - return matchLayerName[0].total_features; - - } - else { - return "0"; - } - } - - zoomIn = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() + 1, - duration: 500 - }); - } - - zoomOut = () => { - this.props.olmap.getView().animate({ - zoom: this.props.olmap.getView().getZoom() - 1, - duration: 500 - }); - } - - getWMSLayers() { - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL) - .then(CapabilitiesUtil.getLayersFromWmsCapabilities) - .then(layers => { - console.log('wmsLayers', layers); - this.setState({ - wmsLayers: layers - }); - }) - .catch(() => alert('Could not parse capabilities document.')); - } - - /*toggleDrawerLayer () { - this.closeAllDrawer(); - const { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({ drawerLayerVisible: false }, () => this.closeAllDrawer() ); - } - else { - this.setState({ drawerLayerVisible: true }, () => this.closeAllDrawer() ); - } - }*/ - - /*toggleDrawerLayer () { - this.setState({drawerLayerVisible: !this.state.drawerLayerVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - }*/ - - toggleDrawerLayer () { - let { drawerLayerVisible } = this.state; - if (drawerLayerVisible) { - this.setState({drawerLayerVisible: false}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerLayerVisible: true}, () => { - this.setState({ - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }) - } - } - - /*toggleDrawerSearch () { - this.closeAllDrawer(); - const { drawerSearchVisible } = this.state; - console.log('drawerSearchVisible', drawerSearchVisible); - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => this.closeAllDrawer() ); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.closeAllDrawer(); - }); - } - }*/ - - toggleDrawerSearch () { - const { drawerSearchVisible } = this.state; - - if (drawerSearchVisible) { - this.setState({drawerSearchVisible: false}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }) - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerSearchVisible: true}, () => { - this.getFeaturesOnMap(); - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleMapAnalyzeTool () { - const { drawerAnalyzeToolVisible } = this.state; - - if (drawerAnalyzeToolVisible) { - this.setState({drawerAnalyzeToolVisible: false}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }) - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - else { - this.setState({drawerAnalyzeToolVisible: true}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: true - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - } - - toggleLayerSwitcher() { - this.setState({layerSwitcherVisible: !this.state.layerSwitcherVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMapTable() { - this.setState({mapTableModalVisible: !this.state.mapTableModalVisible}, () => { - this.setState({ - drawerLayerStylesVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - }); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleCreateNewLayer() { - this.setState({createNewLayerVisible: !this.state.createNewLayerVisible}); - this.deactiveMeasureMap(); - } - - toggleLayerStyles() { - this.setState({drawerLayerStylesVisible: !this.state.drawerLayerStylesVisible}, () => { - this.setState({ - drawerLayerVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleAddFeatureVisible = () => { - this.setState({addFeatureVisible: !this.state.addFeatureVisible}); - this.deactiveMeasureMap(); - } - - toggleLegend = () => { - this.setState({legendVisible: !this.state.legendVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - measureVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - this.deactiveMeasureMap(); - }); - } - - toggleMeasureVisible = () => { - this.setState({measureVisible: !this.state.measureVisible}, () => { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - drawerAnalyzeToolVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false, - activeSideLeft: false - }); - this.props.closePopupRight(); - this.renderToolbarButtons(); - - if (!this.state.measureVisible) { - this.deactiveMeasureMap(); - } - }); - } - - closeAllDrawer = () => { - /* - Toggle Visibility that must be closed or switched to its visibility: - - layer: drawerLayerVisible - popup: popupRightVisible - searchFeature: drawerSearchVisible - basemap: layerSwitcherVisible - legend: legendVisible - drawing: drawingToolVisible - layerStyle: drawerLayerStylesVisible - mapTable: mapTableModalVisible - - Group layers: layer, layerStyle, mapTable (that shouldn't be closed each other) - Group popup: searchFeature, popup (that shouldn't be closed each other) => searchFeature below of popup - Legend - BaseMap - Drawing - */ - - const { drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - } = this.state; - - let visibleArr = [drawerLayerVisible, drawerLayerStylesVisible, mapTableModalVisible, - drawerSearchVisible, popupRightVisible, - legendVisible, - layerSwitcherVisible, - drawingToolVisible - ]; - - console.log('visibleArr', visibleArr); - - if (drawerLayerVisible) { - this.setState({ - drawerLayerVisible: true, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerLayerStylesVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: true, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (mapTableModalVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: true, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (drawerSearchVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: true, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (popupRightVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: true, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (legendVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: true, - layerSwitcherVisible: false, - drawingToolVisible: false - }) - } - - if (layerSwitcherVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: true, - drawingToolVisible: false - }) - } - - if (drawingToolVisible) { - this.setState({ - drawerLayerVisible: false, - drawerLayerStylesVisible: false, - mapTableModalVisible: false, - drawerSearchVisible: false, - popupRightVisible: false, - legendVisible: false, - layerSwitcherVisible: false, - drawingToolVisible: true - }) - } - - } - - - cancelWmsLayer() { - console.log('cancel wms'); - this.setState({ wmsLayers: [] }); - } - - onClickLayerMenu = (layer) => { - } - - customTitleLayerTree(layer) { - - - - - return ( -
-
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- {/*
- -
*/} -
- - {/*10*/} - { layer.get('type') == 'layer' ? - {this.getLayerCount(layer)} - : null - } - this.onClickLayerMenu(layer)}> - - - - -
- {layer.get('title') ? layer.get('title') : layer.get('name')} -
- - { - layer.get('type') === 'layer' || layer instanceof OlLayerImage ? - - - this.zoomToLayer(layer)}> Zoom To Layer - this.showTableData(layer)}> Show Data - {this.props.editGeometryVisible ? - Add Feature - : this.addFeature(layer)}> Add Feature - } - {/* this.addFeature(layer)}> Add Feature*/} - this.styleLayer(layer)}> Layer Styles - - : - null } - this.removeLayer(layer)}> Remove Layer - - -
-
- ) - } - - onRightClickLayerTree(layer) { - console.log('right click layer tree', layer); - return ( - - - Header - Action - Another Action - - Another Action - - - ) - } - - onDropLayerTree() { - console.log('dropped'); - } - - - - /*showTableData = (layer) => { - console.log('showTableData', layer); - this.setState({ - mapTableTitle: layer.get('name'), - mapTableTitleSrc: layer.getSource().params_.LAYERS - }, async () => { - let res = await reqTableData(this.state.mapTableTitle); - console.log('showTableData',res); - - if (res.success) { - this.setState({resTableData: res.result}, () => this.toggleMapTable()); - } - else { - alert(res.result); - return; - } - }); - }*/ - - showTableData = (layer) => { - this.setState({ - mapTableTitle: layer.get('title'), - mapTableName: layer.get('name') - }, () => this.toggleMapTable()); - } - - refreshMapTable = async () => { - const { mapTableTitle, mapTableName } = this.state; - let res = await reqTableData(mapTableName); - if (res.success) { - this.setState({resTableData: res.result}); - } - else { - alert(res.result); - return; - } - } - - styleLayer = async (layer) => { - console.log('styling layer...', layer); - - let SLD_URL = layer.getSource().params_.SLD; - console.log('SLD_URL', SLD_URL); - - let resGetLayerColor = await getLayerColor(SLD_URL); - - console.log('styleLayer resGetLayerColor', resGetLayerColor); - - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - } - /* - axios.get(SLD_URL) - .then(res => { - console.log('axios get SLD', res); - let text = res.data; - let parser, xmlDoc; - if (window.DOMParser) { - parser = new DOMParser(); - xmlDoc = parser.parseFromString(text,"text/xml"); - - console.log('xmlDoc', xmlDoc); - } - }) - .catch(err => { - console.log('axios get SLD err', err); - }); - - if (this.state.drawerLayerStylesVisible) { - this.closeLayerStyles(); - this.openLayerStyles(); - } - else { - this.openLayerStyles(); - }*/ - } - - openLayerStyles() { - this.setState({drawerLayerStylesVisible: true}); - } - - closeLayerStyles() { - this.setState({drawerLayerStylesVisible: false}); - } - - addFeature = async (layer) => { - console.log('adding feature on layer...', layer); - - let geomType = ''; - let reqGeomType = await getGeomType(layer.get('name')); - console.log('addFeature reqGeomType', reqGeomType) - if (reqGeomType.success) { - geomType = reqGeomType.result; - } - else { - geomType = ''; - alert(reqGeomType.result); - return; - } - - - let reqTableColumns = await getTableColumns(layer.get('name')); - console.log('reqTableColumns', reqTableColumns); - if (reqTableColumns.success) { - this.setState({addFeatureColumns: reqTableColumns.result}); - } - else { - alert(reqTableColumns.result); - } - - - this.setState({ - drawingToolVisible: true, - layerNameDraw: layer.get('name'), - geomTypeDraw: geomType, - }); - this.props.toggleActiveStateAddGeometry(); - - } - - cancelDraw() { - this.setState({ - drawingToolVisible: false, - layerNameDraw: '', - geomTypeDraw: '' - }); - this.props.toggleActiveStateAddGeometry(); - } - - removeLayer = (layer) => { - console.log('removing layer', layer); - let confirmation = window.confirm('Are you sure you want to remove this layer?'); - if (!confirmation) { - return; - } - this.props.olmap.removeLayer(layer); - } - - /*zoomToLayer = (layer) => { - console.log('zoomToLayer', layer); - let layerExtent = null; - let newLayerExtent = null; - let transformLayerExtent = null; - let fitOption = { - size: this.props.olmap.getSize(), - duration: 500 - } - if (layer instanceof OlLayerImage) { - layerExtent = layer.getSource().image_.extent; - transformLayerExtent = new transformExtent(layerExtent, 'EPSG:4326', this.props.olmap.getView().getProjection()) - console.log('layerExtent', layerExtent); - console.log('transformLayerExtent', transformLayerExtent); - newLayerExtent = [ - layerExtent[0], layerExtent[2], layerExtent[1], layerExtent[3] - ]; - console.log('newLayerExtent', newLayerExtent); - - this.props.olmap.getView().fit(layerExtent, fitOption); - - } - else if (layer instanceof OlLayerTile) { - layerExtent = layer.getSource().tmpExtent_; - this.props.olmap.getView().fit(layerExtent, fitOption); - } - }*/ - - zoomToLayer = (layer) => { - console.log('zoomToLayer getSource', layer.getSource()); - let layerName = layer.get('name'); - console.log('layerName', layerName); - const { fitOption } = this.state; - - - - CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then(response => { - console.log('capabilities response', response); - if (response !== undefined) { - let layer = findWhere(response.Capability.Layer.Layer, {"Name": layerName}); - console.log('layer',layer); - - if (layer === undefined) { - alert('Layer '+layerName+' is not found'); - return; - } - - let proj = "CRS:84"; - let bbox = findWhere(layer.BoundingBox, {"crs": proj}); - let extent = bbox.extent; - console.log('layer', layer); - console.log('extent', extent); - - - /*// other option - extent = new transformExtent(extent, "EPSG:4326", "EPSG:3857"); - console.log('extent now', extent); - this.props.olmap.getView().fit(extent, fitOption); */ - - this.props.olmap.getView().fit(new transformExtent(extent, proj, this.props.olmap.getView().getProjection()), fitOption); - - } - }) - } - - onDragEndLayerTree = (callback) => { - console.log('onDragEndLayerTree', callback); - } - - rebuildTreeNodes = (evt) => { - console.log('rebuildTreeNodes',evt); - } - - getFeaturesOnMap = async () => { - let layerSource = ''; - let layerTypeName = ''; - let layerSourceArr = []; - let layerTypeNameArr = []; - let layerNameArr = []; - let featureCollections = []; - let allFeatures = []; - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('type' !== 'base')) { - if (layer.get('type') !== 'vector') { - if (layer.get('type') !== 'layerGroup') { - layer.getLayers().forEach((sublayer, i) => { - if (sublayer.getVisible()) { - layerSource = sublayer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(sublayer.get('name')); - } - }); - } - else { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - } - } - } - if (layer.type === "IMAGE") { - if (layer.getVisible()) { - layerSource = layer.getSource(); - layerTypeName = layerSource.params_.LAYERS; - layerTypeNameArr.push(layerTypeName); - layerNameArr.push(layer.get('name')); - } - - } - }) - - console.log('layerTypeNameArr', layerTypeNameArr); - console.log('layerNameArr', layerNameArr); - - for (let i = 0; i < layerTypeNameArr.length; i++) { - let req = await reqTableData(layerTypeNameArr[i]); - - if (req.success) { - featureCollections.push(req.result); - if (req.result.features.length > 0) { - allFeatures.push(req.result.features); - } - } - else { - alert(req.result); - return; - } - - } - - allFeatures = flatten(allFeatures); - - this.setState({allFeatures: allFeatures}); - - } - - /*getLayerSearchLabel = async() => { - const param = { - method: 'GET', - 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.length > 0) { - console.log('getLayerSearchLabel result', result); - this.setState({ - searchLabelData: result.data - }) - } - } else { - - } - } catch(err) { - console.log(err); - alert(err.message.toString()); - } - }*/ - - setAddFeatureValue = (obj) => { - this.setState({addFeatureValue: obj}) - } - - renderToolbarButtons = () => { - const { activeSideLeft } = this.state - let olMousePosition = document.getElementsByClassName("ol-mouse-position")[0]; - let olScaleLine = document.getElementsByClassName("ol-scale-line")[0]; - - if (activeSideLeft) { - olMousePosition.classList.add("active-side-left"); - olScaleLine.classList.add("active-side-left"); - } - else { - olMousePosition.classList.remove("active-side-left"); - olScaleLine.classList.remove("active-side-left"); - } - - return ( - - this.zoomIn()} - > - - - - this.zoomOut()} - > - - - - - - - - - - {/* - - this.mapMeasurement()} - > - - - - - -
- Map Measurement -
- - Remove Layer - - */} - - - {/* this.toggleBtnDropMeasure()}> - - - - - - - -
Map Measurement
- - this.toggleMeasure('LineString')}> - Distance - - this.toggleMeasure('Polygon')}> - Area - - - */} - - this.toggleMeasureVisible()} - > - - - - - - - this.toggleLegend()} - > - - - - - - - - {/*
- -
*/} - - ) - } - - finishDrawingAdd = () => { - const { DrawingUtil, drawingLayer, chosenLayer } = this.state; - - DrawingUtil.setActive(null, false); - DrawingUtil.destroy(); - - if (drawingLayer) { - drawingLayer.getSource().clear(); - } - if (chosenLayer) { - chosenLayer.getSource().clear(); - } - - let layersToRemove = []; - this.props.olmap.getLayers().forEach(function (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') { - layersToRemove.push(layer); - } - if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') { - layersToRemove.push(layer); - } - }); - for(var i = 0; i < layersToRemove.length; i++) { - this.props.olmap.removeLayer(layersToRemove[i]); - } - - - } - - mapMeasurement = () => { - /*return ( - - - - - - -
- Map Measurement -
- - this.removeLayer(layer)}> Remove Layer - - - )*/ - } - - toggleBtnDropMeasure = () => { - this.setState({ btnDropMeasureVisible: !this.state.btnDropMeasureVisible }, () => { - if (!this.state.btnDropMeasureVisible) { - this.setState({ - measureName: '', - measureType: '' - }); - } - }); - } - - - /*toggleMeasure = (name, type) => { - this.setState({ - measureVisible: true, - measureName: name, - measureType: type - }); - }*/ - - pointerMoveHandler = (evt) => { - let { sketch, helpTooltipElement, helpTooltip, continuePolygonMsg, continueLineMsg } = this.state; - if (evt.dragging) { - return; - } - /** @type {string} */ - var helpMsg = 'Click to start drawing'; - - if (sketch) { - var geom = sketch.getGeometry(); - if (geom instanceof Polygon) { - helpMsg = continuePolygonMsg; - } else if (geom instanceof LineString) { - helpMsg = continueLineMsg; - } - } - - helpTooltip.setPosition(evt.coordinate); - - helpTooltipElement.classList.remove('hidden'); - }; - - restartMeasureMap = () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.setState({measureValue: ''}); - - this.measureLayer.getSource().clear(); - - olmap.removeInteraction(measureDraw); - } - - deactiveMeasureMap = () => { - const { olmap } = this.props; - this.restartMeasureMap(); - this.setState({measureType: ''}); - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - } - - toggleMeasure = (type) => { - this.setState({ - measureType: type - }, () => { - let { olmap } = this.props; - let { measureType, measureDraw } = this.state; - - this.restartMeasureMap(); - - - olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') == 'measure_layer') { - olmap.removeLayer(layer); - } - }) - - olmap.addLayer(this.measureLayer); - - this.addInteractionMeasure(measureType); - }) - } - - addInteractionMeasure = (measureType) => { - let { olmap } = this.props; - let { measureDraw, sketch } = this.state; - let measure = new Draw({ - source: this.measureLayer.getSource(), - type: measureType, - style: new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - lineDash: [10, 10], - width: 3 - }), - image: new CircleStyle({ - radius: 5, - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' - }), - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' - }) - }) - }) - }); - this.setState({measureDraw: measure}, () => { - let { measureDraw, measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - olmap.addInteraction(measureDraw); - - - - - - var listener; - measureDraw.on('drawstart', - (evt) => { - - this.measureLayer.getSource().clear(); - - sketch = evt.feature; - - /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */ - var tooltipCoord = evt.coordinate; - - listener = sketch.getGeometry().on('change', (evt) => { - var geom = evt.target; - var output; - if (geom instanceof Polygon) { - output = formatArea(geom); - tooltipCoord = geom.getInteriorPoint().getCoordinates(); - console.log('tooltipCoord',tooltipCoord); - this.setState({measureValue: output}); - } else if (geom instanceof LineString) { - output = formatLength(geom); - tooltipCoord = geom.getLastCoordinate(); - this.setState({measureValue: output}); - } - }); - }); - - measureDraw.on('drawend', - () => { - sketch = null; - measureTooltipElement = null; - - unByKey(listener); - }); - }); - } - - /** - * Creates a new measure tooltip - */ - createMeasureTooltip = () => { - let { measureTooltipElement, measureTooltip } = this.state; - let { olmap } = this.props; - if (measureTooltipElement) { - measureTooltipElement.parentNode.removeChild(measureTooltipElement); - } - measureTooltipElement = document.createElement('div'); - measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'; - measureTooltip = new Overlay({ - element: measureTooltipElement, - offset: [0, -15], - positioning: 'bottom-center' - }); - olmap.addOverlay(measureTooltip); - } - - /*renderMeasureContent = () => { - const { measureVisible } = this.state; - console.log('measureVisible', measureVisible); - alert('measureVisible '+measureVisible); - return ( -
-
- Helloooooooo -
-
- ) - }*/ - - render() { - const {isReady} = this.state; - if (!isReady) { - return null; - } - return ( - - -
- - -
- {/* console.log('layer tree changed')} - onRightClick={(layer) => this.onRightClickLayerTree(layer)} - nodeTitleRenderer={(layer) => this.customTitleLayerTree(layer)} - onDragEnd={(callback) => this.onDragEndLayerTree(callback)} - onLayerChangeVisible={() => console.log('layer change visible')} - onDrop={(info) => console.log('onDrop', info)} - />*/} -
- this.customTitleLayerTree(layer)} - /> -
- - - - this.props.openPopupRight()} - popupDataTemp={this.props.popupDataTemp} - setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} - activeListFeatureId={this.props.activeListFeatureId} - searchLabelData={this.props.searchLabelData} - layerInfo={this.props.layerInfo} - /> - - - - - - { this.renderToolbarButtons() } - - - - - - - - {/*{ - this.state.layerSwitcherVisible && - - }*/} - - { this.state.mapTableModalVisible && - this.props.setPopupDataTemp(feature)} - openPopupRight={() => this.props.openPopupRight()} - refreshMapTable={() => this.refreshMapTable()} - /> - } - - {this.state.drawingToolVisible && - this.toggleAddFeatureVisible()} - setAddFeatureValue={(obj) => this.setAddFeatureValue(obj)} - setDrawingState={(DrawingUtil, drawingLayer, chosenLayer) => this.setState({ - DrawingUtil: DrawingUtil, - drawingLayer: drawingLayer, - chosenLayer: chosenLayer - })} - /> - } - - { this.state.addFeatureVisible && - this.toggleAddFeatureVisible()} - addFeatureValue={this.state.addFeatureValue} - closeDrawing={this.cancelDraw} - finishDrawingAdd={() => this.finishDrawingAdd()} - /> - } - - - - - - {this.state.createNewLayerVisible && - - } - - { this.state.legendVisible && this.toggleLegend()} /> } - - {/* this.state.measureVisible && - - */} - - { this.state.measureVisible && - this.toggleMeasure(type)} - toggleMeasureVisible={() => this.toggleMeasureVisible()} - measureType={this.state.measureType} - measureValue={this.state.measureValue} - /> - } - - ) - } -} - -export default MapToolbar; \ No newline at end of file diff --git a/src/components/MapToolbar_backup/package.json b/src/components/MapToolbar_backup/package.json deleted file mode 100644 index 139474e..0000000 --- a/src/components/MapToolbar_backup/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "MapToolbar", - "version": "0.0.0", - "private": true, - "main": "./MapToolbar.js" -} diff --git a/src/components/PopupButtonActions/index.js b/src/components/PopupButtonActions/index.js index 3c0b7d4..f82538a 100644 --- a/src/components/PopupButtonActions/index.js +++ b/src/components/PopupButtonActions/index.js @@ -2,7 +2,7 @@ import { Button, Tooltip } from 'antd'; import React, { useEffect, useMemo, useRef, useState } from 'react' import { useSelector } from 'react-redux'; import routeIcon from '@iconify/icons-fa-solid/route'; -import {Icon} from '@iconify/react'; +import { Icon } from '@iconify/react'; import { store } from '../../appredux/store'; import { setRoutingBarVisible } from '../../appredux/modules/map/actions'; @@ -10,7 +10,6 @@ const PopupButtonActions = () => { const { selectedFeature } = useSelector(state => state.mapReducer); const handleRoute = () => { - console.log('handleRoute'); store.dispatch(setRoutingBarVisible(true)); } @@ -18,7 +17,7 @@ const PopupButtonActions = () => { return (
- - - Show Images - - {/* - - Show Table - */} - - - Go to Feature - - - - Edit Attribute - - - - Edit Geometry - - - - Delete Feature - - - ) - } - - selectFeature = (selectedPopupData) => { - console.log('selectFeature', selectedPopupData); - this.props.removeChosenLayer(); - const select = new Select(); - this.props.olmap.addInteraction(select); - let geomToDisplay = null; - - let geomType = selectedPopupData.geometry.type; - let coords = selectedPopupData.geometry.coordinates; - let { mapProjection } = this.state; - if (geomType === "Point") { - geomToDisplay = new Point([coords[0], coords[1]]).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPoint") { - - } - else if (geomType === "LineString") { - geomToDisplay = new LineString(coords[0]).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiLineString") { - - } - else if (geomType === "Polygon") { - geomToDisplay = new Polygon(coords[0]).transform('EPSG:4326', mapProjection); - } - else if (geomType === "MultiPolygon") { - geomToDisplay = new MultiPolygon(coords).transform('EPSG:4326', mapProjection); - } - - let styleSelected = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }), - image: new CircleStyle({ - radius: 5, - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.7)' - }), - stroke: new Stroke({ - color: '#1e00ff', - width: 3 - }) - }) - }); - - - let chosenFeature = new Feature({ - geometry: geomToDisplay - }) - - console.log('chosenFeature', chosenFeature); - console.log(chosenFeature.getGeometry()); - console.log('getExtent()', chosenFeature.getGeometry().getExtent()); - - - let chosenLayer = new VectorLayer({ - name: 'ChosenLayer', - source: new VectorSource({ - features: [chosenFeature] - }), - style: styleSelected, - type: 'vector' - }); - - this.props.olmap.addLayer(chosenLayer); - } - - moreFeatureContent = () => { - const { popupDataTemp } = this.props; - return ( -
-
-

Choose one feature

-
-
- - - { popupDataTemp.map((item, index) => { - return ( this.chooseOneFeature(item)}>) - }) } - -
{item.id}
-
-
-
- -
-
-
- ) - } - - chooseOneFeature = (feature) => { - this.props.setPopupDataTemp([feature]); - this.fillPopupContent(); - } - - showImageFeature = (selectedPopupData) => { - console.log('show images', selectedPopupData); - this.setState({imagePopupTitle: selectedPopupData.id}); - this.toggleImagePopup(); - } - - toggleImagePopup = () => { - this.setState({imagePopupVisible: !this.state.imagePopupVisible}); - } - - showTable = (selectedPopupData) => { - this.toggleShowTable(); - } - - toggleShowTable = () => { - this.setState({mapTableVisible: !this.state.mapTableVisible}) - } - - editFeature = (selectedPopupData) => { - console.log('edit feature', selectedPopupData); - this.setState({selectedPopupData: selectedPopupData}, () => this.toggleEditFeature()); - } - - toggleEditFeature = () => { - this.setState({editFeatureVisible: !this.state.editFeatureVisible}) - } - - /*goToFeature = (selectedPopupData) => { - console.log('goToFeature', selectedPopupData); - const fitOption = { - size: this.props.olmap.getSize(), - duration: 500 - } - const proj = "EPSG:4326"; - const coords = selectedPopupData.geometry.coordinates; - const { mapProjection, zoomLevelOnFeature, zoomDurationOnFeature } = this.state; - let extent = null; - - let indoGeom = [ - [ - 120.715609, - -10.239581 - ], - [ - 120.295014, - -10.25865 - ], - [ - 118.967808, - -9.557969 - ], - [ - 119.90031, - -9.36134 - ], - [ - 120.425756, - -9.665921 - ], - [ - 120.775502, - -9.969675 - ], - [ - 120.715609, - -10.239581 - ] - ]; - - if (selectedPopupData.geometry.type === "Point") { - extent = [coords[0], coords[1]]; - this.props.olmap.getView().setCenter(fromLonLat(extent, mapProjection)); - this.props.olmap.getView().animate({ - zoom: zoomLevelOnFeature, - duration: zoomDurationOnFeature - }) - } - }*/ - - goToFeature = (selectedPopupData) => { - const { fitOption } = this.state; - const proj = "EPSG:3857"; - let chosenLayer = null; - let chosenFeatures = null; - let featureExtent = null; - - this.props.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === 'ChosenLayer') { - chosenLayer = layer; - return; - } - }) - console.log('go to feature chosenLayer', chosenLayer); - if (chosenLayer === null) { - alert('No chosen feature'); - return; - } - - chosenFeatures = chosenLayer.getSource().getFeatures(); - featureExtent = chosenFeatures[0].getGeometry().getExtent() - - console.log(chosenFeatures); - console.log(featureExtent); - - this.props.olmap.getView().fit(new transformExtent(featureExtent, proj, this.props.olmap.getView().getProjection()), fitOption); - } - - editGeometry = (selectedPopupData) => { - console.log('editGeometry', selectedPopupData); - this.toggleEditGeometry(); - } - - toggleEditGeometry = () => { - this.setState({editGeometryVisible: !this.state.editGeometryVisible}) - } - - deleteFeature = (selectedPopupData) => { - console.log('delete feature', selectedPopupData); - } - - render() { - return( - this.props.closePopupRight()} - visible={this.props.popupRightVisible} - mask={false} - width={360} - style={{top: '50px', height: 'calc(100vh - 50px)'}} - > -
- {this.fillPopupContent()} - { - this.state.imagePopupVisible && - this.toggleImagePopup()} - imagePopupTitle={this.state.imagePopupTitle ? this.state.imagePopupTitle : 'Feature Image'} - /> - } - { - this.state.editFeatureVisible && - this.toggleEditFeature()} - editFeatureTitle={this.state.editFeatureTitle ? this.state.editFeatureTitle : 'Edit Attribute'} - data={this.state.selectedPopupData} - /> - } - { - this.state.mapTableVisible && - - } - { - this.state.editGeometryVisible && - - } -
- - ) - - - - } -} - - -export default PopupContainer; \ No newline at end of file diff --git a/src/components/RoutingBar/RoutingBar.js b/src/components/RoutingBar/RoutingBar.js index afacc9d..37f1f86 100644 --- a/src/components/RoutingBar/RoutingBar.js +++ b/src/components/RoutingBar/RoutingBar.js @@ -7,10 +7,10 @@ import turfDestination from '@iconify/icons-geo/turf-destination'; import trashOutline from '@iconify/icons-ion/trash-outline'; import addCircleOutline from '@iconify/icons-ion/add-circle-outline'; import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline'; -import {Draw, Modify, Snap, Select, DragBox, DragAndDrop, Translate} from 'ol/interaction'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Vector as VectorSource} from 'ol/source'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style'; +import { Draw, Modify, Snap, Select, DragBox, DragAndDrop, Translate } from 'ol/interaction'; +import { Vector as VectorLayer } from 'ol/layer'; +import { Vector as VectorSource } from 'ol/source'; +import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; import { AppSwitch } from '@coreui/react'; import DigitizeButton from '@terrestris/react-geo/dist/Button/DigitizeButton/DigitizeButton'; import './RoutingBar.css'; @@ -31,12 +31,11 @@ class RoutingBar extends Component { } componentDidMount() { - console.log('RoutingBar this.props.popupDataTemp', this.props.popupDataTemp); + } onChange = (value, dateString) => { - console.log('Selected Time: ', value); - console.log('Formatted Selected Time: ', dateString); + } onOk = (value) => { @@ -51,12 +50,7 @@ class RoutingBar extends Component { userId = this.props.popupDataTemp[0].properties.user_id; } } - - console.log('userId', userId); - console.log('onOk: ', value); - console.log('Formatted Selected Time: ', dateString); - - this.setState({userId: userId, dateString: dateString}); + this.setState({ userId: userId, dateString: dateString }); } applyRouting = () => { @@ -71,45 +65,45 @@ class RoutingBar extends Component { return (
-
-

- User Route
- {this.props.popupDataTemp && this.props.popupDataTemp.length > 0 ? this.props.popupDataTemp[0].properties.name : ""}
-

- { - this.props.toggleRoutingBarVisible(); - this.props.setRouteType(''); - }}> - -
- Select Start and End Time -
- -
-
- -
- -
- -
-
-
-
- ) - - } +
+

+ User Route
+ {this.props.popupDataTemp && this.props.popupDataTemp.length > 0 ? this.props.popupDataTemp[0].properties.name : ""}
+

+ { + this.props.toggleRoutingBarVisible(); + this.props.setRouteType(''); + }}> + +
+ Select Start and End Time +
+ +
+
+ +
+ +
+ +
+
+
+
+ ) + + } } export default RoutingBar; \ No newline at end of file diff --git a/src/components/RoutingBarV2/index.js b/src/components/RoutingBarV2/index.js index 017e523..bba5b97 100644 --- a/src/components/RoutingBarV2/index.js +++ b/src/components/RoutingBarV2/index.js @@ -18,8 +18,6 @@ const RoutingBar = () => { const [dateString, setDateString] = useState(null); const onChange = (value, dateString) => { - console.log('Selected Time: ', value); - console.log('Formatted Selected Time: ', dateString); } const onOk = (value) => { @@ -72,7 +70,7 @@ const RoutingBar = () => { onClick={applyRouting} >Search */} -
) } diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js index 1918f0a..082a9b9 100644 --- a/src/const/ApiConst.js +++ b/src/const/ApiConst.js @@ -116,9 +116,9 @@ export const TOKEN_ADW = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxMjAyIiwiZXhwIjoxNjkxODMwNDkzfQ.DvBQIOZsdFndWsliPCZT65Y6G5Xx4vWBKz8Rhe7rvRA"; // export let BASE_OSPRO = "https://ospro-api.ospro.id"; + export let BASE_OSPRO = "https://project-api.ospro.id"; // export let BASE_OSPRO = "http://localhost:8444/adw-backend"; -// export let BASE_OSPRO = "http://103.73.125.81:8444"; // ip public adw export let BASE_SIMPRO_LUMEN = `${BASE_OSPRO}/api`; export let BASE_SIMPRO_LUMEN_IMAGE = `${BASE_OSPRO}/assets/image`; export let BASE_SIMPRO_LUMEN_FILE = `${BASE_OSPRO}/assets/file/project`; @@ -727,6 +727,11 @@ export const HIERARCHY_FTTH_DELETE = (id) => { export const HIERARCHY_FTTH_TREE = (id) => { return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/tree/${id}`; }; + +export const HIERARCHY_FTTH_COUNT_TREE = (id) => { + return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/count-tree/${id}`; +}; + export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`; export const IMAGE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/upload`; diff --git a/src/const/GeohrApiFunc.js b/src/const/GeohrApiFunc.js index ba24c21..e339971 100644 --- a/src/const/GeohrApiFunc.js +++ b/src/const/GeohrApiFunc.js @@ -1,9 +1,9 @@ -import { +import { API_GEOHR_WAYPOINT_SALES_MONITORING, API_GEOHR_SALES_MONITORING, API_GEOHR_OFFICE_MONITORING, API_GEOHR_CUSTOMER_MONITORING, - API_GEOHR_DAILY_INFO , + API_GEOHR_DAILY_INFO, API_GEOHR_SALES_SEARCH, API_GEOHR_EMPLOYEE_MONITORING, API_GEOHR_WAYPOINT_EMPLOYEE_MONITORING, @@ -16,25 +16,23 @@ import { toast } from 'react-toastify'; const id_org = window.localStorage.getItem('id_org'); const roleName = window.localStorage.getItem('role_name'); export const getSalesRoutingApi = async (salesId, dateString) => { - console.log('[GeohrApiFunc.js] getSalesRoutingApi', salesId, dateString); let bodyParam = { - "paging": {"start": 0, "length": -1}, - "columns": [ - {"name":"wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and"} - ], - "orders": {"columns": ["wptime"], "ascending": true} + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and" } + ], + "orders": { "columns": ["wptime"], "ascending": true } } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(API_GEOHR_WAYPOINT_SALES_MONITORING(salesId), param).then(response => response.json()).then(res => res); - console.log('getSalesRoutingApi result', result); if (result.data) { let output = { @@ -43,7 +41,7 @@ export const getSalesRoutingApi = async (salesId, dateString) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if ((result.data.features[i].geometry.coordinates && result.data.features[i].geometry.coordinates.length > 0) && result.data.features[i].geometry.type) { output.features.push(result.data.features[i]); } @@ -57,7 +55,6 @@ export const getSalesRoutingApi = async (salesId, dateString) => { } } catch (e) { - console.log('error getSalesRoutingApi', e); return null; } } @@ -67,31 +64,29 @@ export const getSalesFeatures = async (filterGroup, salesGroupTree) => { const LENGTH_SALES_TREE_CHILDREN = salesGroupTree[0].children.length; let bodyParam = { - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "joins": [ - {"name": "group_sales", "column_results": ["name", "description"]} + { "name": "group_sales", "column_results": ["name", "description"] } ], - "orders": {"columns": ["name"], "ascending": true} + "orders": { "columns": ["name"], "ascending": true } } if (filterGroup.length > 0 && filterGroup.length !== LENGTH_SALES_TREE_CHILDREN) { - console.log('filterrrrr'); + bodyParam["columns"] = []; - bodyParam.columns.push({"name":"group_sales_id","logic_operator":"in","value":filterGroup.join(),"operator":"and"}); + bodyParam.columns.push({ "name": "group_sales_id", "logic_operator": "in", "value": filterGroup.join(), "operator": "and" }); - console.log('bodyParam', bodyParam); } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(API_GEOHR_SALES_MONITORING, param).then(response => response.json()).then(res => res); - console.log('getSalesFeatures result', result); if (result.data) { let output = { @@ -100,7 +95,7 @@ export const getSalesFeatures = async (filterGroup, salesGroupTree) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if (result.data.features[i].geometry.coordinates !== null && result.data.features[i].geometry.type !== null) { output.features.push(result.data.features[i]); } @@ -114,7 +109,6 @@ export const getSalesFeatures = async (filterGroup, salesGroupTree) => { } } catch (e) { - console.log('error getSalesFeatures', e); return null; } } @@ -122,19 +116,18 @@ export const getSalesFeatures = async (filterGroup, salesGroupTree) => { export const getOfficeFeatures = async () => { const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify({ - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "columns": [ - {"name":"name", "logic_operator": "ilike", "value": "", "operator": "and"} + { "name": "name", "logic_operator": "ilike", "value": "", "operator": "and" } ], - "orders": {"columns": ["name"], "ascending": true} + "orders": { "columns": ["name"], "ascending": true } }) } try { const result = await fetch(API_GEOHR_OFFICE_MONITORING, param).then(response => response.json()).then(res => res); - console.log('getOfficeFeatures result', result); if (result.data) { return result.data; } @@ -143,29 +136,27 @@ export const getOfficeFeatures = async () => { } } catch (e) { - console.log('error getOfficeFeatures', e); return null; } } export const getCustomerFeatures = async () => { let bodyParam = { - "paging": {"start": 0, "length": -1}, - "columns": [ - {"name":"name", "logic_operator": "ilike", "value": "", "operator": "and"} - ], - "orders": {"columns": ["name"], "ascending": true} + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "name", "logic_operator": "ilike", "value": "", "operator": "and" } + ], + "orders": { "columns": ["name"], "ascending": true } } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(API_GEOHR_CUSTOMER_MONITORING, param).then(response => response.json()).then(res => res); - console.log('getCustomerFeatures result', result); if (result.data) { let output = { @@ -174,7 +165,7 @@ export const getCustomerFeatures = async () => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if (result.data.features[i].geometry.coordinates !== null && result.data.features[i].geometry.type !== null) { output.features.push(result.data.features[i]); } @@ -188,83 +179,23 @@ export const getCustomerFeatures = async () => { } } catch (e) { - console.log('error getCustomerFeatures', e); return null; } } -/* -Expected output: -{ - "code": 200, - "data": { - "at_trip": { - "total": 0, - "sales_ids": [] - }, - "at_customer": { - "total": 0, - "sales_ids": [] - }, - "at_office": { - "total": 0, - "sales_ids": [] - }, - "attendance": { - "total": 0, - "sales_ids": [] - }, - "absent": { - "total": 11, - "sales_ids": [ - 1, - 2, - 7, - 8, - 12, - 16, - 17, - 18, - 19, - 20, - 21 - ] - }, - "sales_total": { - "total": 11, - "sales_ids": [ - 1, - 2, - 7, - 8, - 12, - 16, - 17, - 18, - 19, - 20, - 21 - ] - }, - "at_time": "2021-06-18T10:45:26.19278792+07:00" - }, - "executionTime": "23.932818ms", - "message": "OK" -} -*/ + export const getDailyInfoApi = async () => { const typeSales = "B2B"; const param = { method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), } try { const result = await fetch(API_GEOHR_DAILY_INFO, param).then(response => response.json()).then(res => res); - console.log('getDailyInfoApi result', result); if (result.data) { @@ -277,57 +208,12 @@ export const getDailyInfoApi = async () => { } } catch (e) { - console.log('error getDailyInfoApi', e); return null; } } -/* -export const requestTableDailyInfoApi = async (item) => { - console.log('requestTableDailyInfoApi item', item); - let filterSales = item.sales_ids; - if (filterSales && filterSales.length < 1 && item.total === 0) { - return null; // data is empty - } - else { - let bodyParam = { - "paging": {"start": 0, "length": -1}, - "joins": [ - {"name": "group_sales", "column_results": ["name", "description"]} - ], - "orders": {"columns": ["name"], "ascending": true} - } - - if (filterSales && filterSales.length > 0) { - bodyParam["columns"] = []; - bodyParam.columns.push({"name":"id","logic_operator":"in","value":filterSales.join(),"operator":"and"}); - } - - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(bodyParam) - } - - try { - const result = await fetch(API_GEOHR_SALES_SEARCH, param).then(response => response.json()).then(res => res); - console.log('requestTableDailyInfoApi result', result); - if (result.data) { - return result.data; - } - else { - return null; - } - } - catch (e) { - console.log('error requestTableDailyInfoApi', e); - return null; - } - } -}*/ - export const requestTableDailyInfoApi = async (param) => { const formData = new FormData(); let start = 0; @@ -337,7 +223,7 @@ export const requestTableDailyInfoApi = async (param) => { formData.append('table_type', param.table_type); formData.append("id_org", id_org); formData.append('field', param.searchDetailField); - if(param.search!=="" && param.search!==null){ + if (param.search !== "" && param.search !== null) { formData.append('value', param.search); } @@ -346,12 +232,12 @@ export const requestTableDailyInfoApi = async (param) => { const payload = { method: 'POST', - header: JSON.stringify({'Content-Type': 'multipart/form-data'}), + header: JSON.stringify({ 'Content-Type': 'multipart/form-data' }), body: formData } try { - const result = await fetch(API_DAILY_INFO_DETAIL(start,length), payload).then(response => response.json()).then(res => res); + const result = await fetch(API_DAILY_INFO_DETAIL(start, length), payload).then(response => response.json()).then(res => res); if (result.code_status === 200 && result.data) { return result; } @@ -360,7 +246,6 @@ export const requestTableDailyInfoApi = async (param) => { } } catch (e) { - console.log('error get', e); toast.warn(e.toString()); return null; } @@ -370,31 +255,28 @@ export const getEmployeeFeatures = async (filterGroup, employeeDivTree) => { const LENGTH_EMP_DIV_TREE_CHILDREN = employeeDivTree[0].children.length; let bodyParam = { - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "joins": [ - {"name": "employee_division", "column_results": ["name", "description"]} + { "name": "employee_division", "column_results": ["name", "description"] } ], - "orders": {"columns": ["name"], "ascending": true} + "orders": { "columns": ["name"], "ascending": true } } if (filterGroup.length > 0 && filterGroup.length !== LENGTH_EMP_DIV_TREE_CHILDREN) { - console.log('filterrrrr'); bodyParam["columns"] = []; - bodyParam.columns.push({"name":"employee_division_id","logic_operator":"in","value":filterGroup.join(),"operator":"and"}); + bodyParam.columns.push({ "name": "employee_division_id", "logic_operator": "in", "value": filterGroup.join(), "operator": "and" }); - console.log('bodyParam', bodyParam); } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(API_GEOHR_EMPLOYEE_MONITORING, param).then(response => response.json()).then(res => res); - console.log('getEmployeeFeatures result', result); if (result.data) { let output = { @@ -403,7 +285,7 @@ export const getEmployeeFeatures = async (filterGroup, employeeDivTree) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if (result.data.features[i].geometry) { if (result.data.features[i].geometry.coordinates !== null && result.data.features[i].geometry.type !== null) { output.features.push(result.data.features[i]); @@ -419,31 +301,27 @@ export const getEmployeeFeatures = async (filterGroup, employeeDivTree) => { } } catch (e) { - console.log('error getEmployeeFeatures', e); return null; } } export const getEmployeeRoutingApi = async (userId, dateString) => { - console.log('[GeohrApiFunc.js] getEmployeeRoutingApi', userId, dateString); - let bodyParam = { - "paging": {"start": 0, "length": -1}, - "columns": [ - {"name":"wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and"} - ], - "orders": {"columns": ["wptime"], "ascending": true} + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and" } + ], + "orders": { "columns": ["wptime"], "ascending": true } } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(API_GEOHR_WAYPOINT_EMPLOYEE_MONITORING(userId), param).then(response => response.json()).then(res => res); - console.log('getEmployeeRoutingApi result', result); if (result.data) { let output = { @@ -452,7 +330,7 @@ export const getEmployeeRoutingApi = async (userId, dateString) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if ((result.data.features[i].geometry.coordinates && result.data.features[i].geometry.coordinates.length > 0) && result.data.features[i].geometry.type) { output.features.push(result.data.features[i]); } @@ -466,7 +344,6 @@ export const getEmployeeRoutingApi = async (userId, dateString) => { } } catch (e) { - console.log('error getEmployeeRoutingApi', e); return null; } } @@ -475,67 +352,63 @@ export const getEmployeeRoutingApi = async (userId, dateString) => { export const getWaspangFeatures = async (proyekIds) => { let bodyParam = { - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "joins": [ { - "name": "m_proyek", - "column_join": "proyek_id", - "column_results": [ - "nama", - "biaya", - "color_progress", - "jumlah_pekerja", - "pic", - "mulai_proyek", - "akhir_proyek" - ] + "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_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" - ] + "name": "m_users", + "column_join": "user_id", + "column_results": [ + "name", + "username", + "email", + "phone_number", + "gender" + ] } ], - "orders": {"columns": ["id"], "ascending": true} + "orders": { "columns": ["id"], "ascending": true } } if (proyekIds.length > 0) { - console.log('filterrrrr'); bodyParam["columns"] = []; - bodyParam.columns.push({"name":"proyek_id","logic_operator":"in","value":proyekIds.join(),"operator":"and"}); - - console.log('bodyParam', bodyParam); + bodyParam.columns.push({ "name": "proyek_id", "logic_operator": "in", "value": proyekIds.join(), "operator": "and" }); } const param = { method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), + header: JSON.stringify({ 'Content-Type': 'application/json' }), body: JSON.stringify(bodyParam) } try { const result = await fetch(USER_TO_PROYEK_SEARCH, param).then(response => response.json()).then(res => res); - console.log('getWaspangFeatures result', result); if (result.data) { let output = { @@ -544,7 +417,7 @@ export const getWaspangFeatures = async (proyekIds) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if (result.data.features[i].geometry) { if (result.data.features[i].geometry.coordinates !== null && result.data.features[i].geometry.type !== null) { output.features.push(result.data.features[i]); @@ -560,33 +433,29 @@ export const getWaspangFeatures = async (proyekIds) => { } } catch (e) { - console.log('error getWaspangFeatures', e); return null; } } export const getWaspangRoutingApi = async (userId, dateString) => { - console.log('[GeohrApiFunc.js] getWaspangRoutingApi', userId, dateString); - let bodyParam = { - "columns": [ - {"name":"wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and"} - ], - "orders": {"columns": ["wptime"], "ascending": true} + "columns": [ + { "name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1], "operator": "and" } + ], + "orders": { "columns": ["wptime"], "ascending": true } } const param = { method: 'POST', headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') }, body: JSON.stringify(bodyParam) } try { const result = await fetch(API_SIMPRO_WAYPOINT_WASPANG_MONITORING(userId), param).then(response => response.json()).then(res => res); - console.log('getWaspangRoutingApi result', result); if (result.data) { let output = { @@ -595,7 +464,7 @@ export const getWaspangRoutingApi = async (userId, dateString) => { }; if (result.data.features && result.data.features.length > 0) { - for (let i=0; i < result.data.features.length; i++) { + for (let i = 0; i < result.data.features.length; i++) { if ((result.data.features[i].geometry.coordinates && result.data.features[i].geometry.coordinates.length > 0) && result.data.features[i].geometry.type) { output.features.push(result.data.features[i]); } @@ -609,35 +478,31 @@ export const getWaspangRoutingApi = async (userId, dateString) => { } } catch (e) { - console.log('error getWaspangRoutingApi', e); return null; } } export const getPresensiRoutingApi = async (userId, dateString) => { - console.log('[GeohrApiFunc.js] getPresensiRoutingApi', userId, dateString); - let bodyParam = { - "paging": {"start": 0, "length": -1}, - "columns": [ - {"name": "user_id", "logic_operator": "=", "value": userId}, - {"name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1]} - ], - "orders": {"columns": ["wptime"], "ascending": true} + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "user_id", "logic_operator": "=", "value": userId }, + { "name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1] } + ], + "orders": { "columns": ["wptime"], "ascending": true } } const param = { method: 'POST', headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') }, body: JSON.stringify(bodyParam) } try { const result = await fetch(WAYPOINT_SEARCH, param).then(response => response.json()).then(res => res); - console.log('getPresensiRoutingApi result', result); if (result.data) { let output = { @@ -649,7 +514,7 @@ export const getPresensiRoutingApi = async (userId, dateString) => { if (result.data.length > 0) { let features = null; - for (let i=0; i < result.data.length; i++) { + for (let i = 0; i < result.data.length; i++) { if (result.data[i].lat && result.data[i].lon) { features = { "type": "Feature", @@ -663,9 +528,6 @@ export const getPresensiRoutingApi = async (userId, dateString) => { } } } - - console.log('routing features', output); - return output; } else { @@ -673,7 +535,6 @@ export const getPresensiRoutingApi = async (userId, dateString) => { } } catch (e) { - console.log('error getWaspangRoutingApi', e); return null; } } \ No newline at end of file diff --git a/src/const/GeoserverFunc.js b/src/const/GeoserverFunc.js index cc7e75b..0a5a5e1 100644 --- a/src/const/GeoserverFunc.js +++ b/src/const/GeoserverFunc.js @@ -1,29 +1,31 @@ import axios from 'axios'; import { wfsDispatcherUrl, appConfig } from './MapConst.js'; -import { API_GET_COLUMN_TABLE, API_LOGIN, API_CREATE_NEW_LAYER, API_UPDATE_MAP, API_GET_IMAGE, API_UPDATE_FEATURE, -API_LAYER_ATTRIBUTE_BY_LAYERNAME, IMAGE_SEARCH } from './ApiConst.js'; +import { + API_GET_COLUMN_TABLE, API_LOGIN, API_CREATE_NEW_LAYER, API_UPDATE_MAP, API_GET_IMAGE, API_UPDATE_FEATURE, + API_LAYER_ATTRIBUTE_BY_LAYERNAME, IMAGE_SEARCH +} from './ApiConst.js'; import { findWhere } from 'underscore'; import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'; import { Select } from 'ol/interaction'; import Feature from 'ol/Feature'; -import {Vector as VectorLayer} from 'ol/layer'; -import {Vector as VectorSource} from 'ol/source'; -import {getArea, getLength} from 'ol/sphere'; +import { Vector as VectorLayer } from 'ol/layer'; +import { Vector as VectorSource } from 'ol/source'; +import { getArea, getLength } from 'ol/sphere'; export const reqTableData = async (typeName) => { let xmlDoc = null; - let resTableData = null; + let resTableData = null; if (typeName === undefined) { return; } const config = { - headers: {'Content-Type': 'text/xml'} + headers: { 'Content-Type': 'text/xml' } }; - - const reqPayload = ` + + const reqPayload = ` { `; - let reqAxios = await axios.post(wfsDispatcherUrl, reqPayload, config).then((res) => { return res; }).catch(err => err.message); - console.log('reqAxios',reqAxios); - - if (reqAxios.data !== undefined) { - console.log('typeof response', typeof(reqAxios.data)); - if (typeof(reqAxios.data) == 'object') { - resTableData = reqAxios.data; - return { - "success": true, - "result": resTableData - } - } - else { - let parser = new DOMParser(); + let reqAxios = await axios.post(wfsDispatcherUrl, reqPayload, config).then((res) => { return res; }).catch(err => err.message); + + + if (reqAxios.data !== undefined) { + if (typeof (reqAxios.data) == 'object') { + resTableData = reqAxios.data; + return { + "success": true, + "result": resTableData + } + } + else { + let parser = new DOMParser(); if (reqAxios.data !== undefined) { xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); resTableData = xmlDoc.getElementsByTagName('ows:ExceptionText')[0].childNodes[0].nodeValue; } - console.log('xmlDoc',xmlDoc) - console.log('resTableData',resTableData); - return { - "success": false, - "result": resTableData - } - } - } - else { - resTableData = reqAxios; - return { + return { + "success": false, + "result": resTableData + } + } + } + else { + resTableData = reqAxios; + return { "success": false, "result": resTableData } - } + } } @@ -88,12 +87,12 @@ export const reqTableData = async (typeName) => { let reqAxios = await axios.post(API_GET_COLUMN_TABLE, reqPayload, config).then((res) => { return res; }); if (reqAxios.data !== undefined) { - result = reqAxios.data; - return result; + result = reqAxios.data; + return result; } else { - result = reqAxios; - return result; + result = reqAxios; + return result; } }*/ @@ -102,35 +101,35 @@ export const getTableColumns = async (tableName) => { tableName: tableName } const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(obj) - } - - try { - const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) - if(result){ - - return { - "success": true, - "result": result - } - } else { - return { - "success": false, - "result": result - } - } - } catch(err) { - return { - "success": false, - "result": err.message - } - } + method: 'POST', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + body: JSON.stringify(obj) + } + + try { + const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res) + if (result) { + + return { + "success": true, + "result": result + } + } else { + return { + "success": false, + "result": result + } + } + } catch (err) { + return { + "success": false, + "result": err.message + } + } } export const test = () => { - axios.get("http://localhost/osmap-php/index.php/siopas/user/test_user").then((res) => { console.log('test axios', res) }); + axios.get("http://localhost/osmap-php/index.php/siopas/user/test_user"); } export const loginSiopas = (username, password) => { @@ -138,29 +137,28 @@ export const loginSiopas = (username, password) => { fetch(API_LOGIN, { method: 'POST', header: JSON.stringify({ - 'Content-Type': 'multipart/form-data' + 'Content-Type': 'multipart/form-data' }), body: JSON.stringify({ - username: username, - password: password - }) - - }).then((response) => { - console.log('response', response); - response.json(); - }).then((responseJson) => { - console.log('responseJson login', responseJson) - return; - }) - .catch((error) => { - console.log('error login', error) - }); + username: username, + password: password + }) + + }).then((response) => { + + response.json(); + }).then((responseJson) => { + + return; + }) + .catch((error) => { + + }); } export const getGeomType = async (layerName) => { let url = appConfig.geoserver_host + 'rest/workspaces/' + appConfig.workspace_name + '/featuretypes/' + layerName + '.json'; let reqAxios = await axios.get(url).then((res) => { return res }).catch(err => err.message); - console.log('getGeomType reqAxios', reqAxios); let geomType = ''; if (reqAxios !== "Request failed with status code 404") { @@ -171,10 +169,10 @@ export const getGeomType = async (layerName) => { if (reqAxios.data.featureType.attributes.attribute !== undefined) { if (reqAxios.data.featureType.attributes.attribute.length > 0) { let attribute = reqAxios.data.featureType.attributes.attribute; - for (let i=0; i < attribute.length; i++) { + for (let i = 0; i < attribute.length; i++) { if (attribute[i].binding.includes('geom')) { let str = attribute[i].binding; - let geomStr = str.substr(str.indexOf('geom')+5); // so I get the MultiPolygon (or other geom type provided in geoserver api) + let geomStr = str.substr(str.indexOf('geom') + 5); // so I get the MultiPolygon (or other geom type provided in geoserver api) geomType = geomStr; } } @@ -193,7 +191,7 @@ export const getGeomType = async (layerName) => { return { "success": false, - "result": reqAxios + "result": reqAxios }; } } @@ -221,8 +219,6 @@ export const createNewLayer = async (reqPayload) => { return error; }); - console.log('createNewLayer API',reqAxios); - return reqAxios; } @@ -254,10 +250,9 @@ export const updateFeature = async (layerName, fid, properties) => { */ - console.log('layerName, fid, properties', layerName, fid, properties); const config = { - headers: {'Content-Type': 'text/xml'} + headers: { 'Content-Type': 'text/xml' } }; let result = null; let xmlDoc = null; @@ -265,7 +260,7 @@ export const updateFeature = async (layerName, fid, properties) => { let xml_fid = ``; let xml_properties = ''; - for (let i=0; i ${properties[i].label} @@ -284,151 +279,104 @@ export const updateFeature = async (layerName, fid, properties) => { `; let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message); - console.log('updateFeature reqAxios',reqAxios); - - if (reqAxios.data !== undefined) { - console.log('typeof response', typeof(reqAxios.data)); - let parser = new DOMParser(); - xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); - let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; - console.log('xml status', status); - let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName; - console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED - if (status !== undefined) { - if (statusText == 'SUCCESS') { - result = 'Success Update Feature'; - return { + + if (reqAxios.data !== undefined) { + + let parser = new DOMParser(); + xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); + let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; + + let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName; + if (status !== undefined) { + if (statusText == 'SUCCESS') { + result = 'Success Update Feature'; + return { "success": true, "result": result } - } - else if (statusText == 'FAILED') { - result = 'Error Update Feature'; - let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML; - return { + } + else if (statusText == 'FAILED') { + result = 'Error Update Feature'; + let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML; + return { "success": false, "result": errMessage } - } - } - else { - return { - "success": false, - "result": "The entity name must immediately follow the entity reference." - } - } - } - else { - result = reqAxios; - return { + } + } + else { + return { + "success": false, + "result": "The entity name must immediately follow the entity reference." + } + } + } + else { + result = reqAxios; + return { "success": false, "result": result } - } + } } export const updateFeature2 = async (layerName, fid, column_value) => { const config = { - headers: {'Content-Type': 'application/json'} + headers: { 'Content-Type': 'application/json' } }; - console.log('layerName', layerName); - console.log('fid', fid); let payload = { "layer_name": layerName, "fid": fid, "column_value": column_value }; - console.log('payload',payload); - - const param = { - method: 'POST', - header: JSON.stringify({'Content-Type': 'application/json'}), - body: JSON.stringify(payload) - } - - const resFetch = await fetch(API_UPDATE_FEATURE, param).then(response => response.json()).then(res => res) - console.log('resFetch', resFetch); + method: 'POST', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + body: JSON.stringify(payload) + } + const resFetch = await fetch(API_UPDATE_FEATURE, param).then(response => response.json()).then(res => res) - console.log('updateFeature resFetch',resFetch); - if (resFetch !== undefined) { - if (resFetch.code_type == 'success') { - return { + if (resFetch !== undefined) { + if (resFetch.code_type == 'success') { + return { "success": true, "result": "Update Success" } - } - else { - return { + } + else { + return { "success": false, "result": "Update Failed" } - } - } - else { - return { + } + } + else { + return { "success": false, "result": resFetch } - } + } } export const updateMap = async (requestPayload) => { - - /*let requestPayload = { - "map_title": "BMD Denpasar", - "map_zoom": 9, - "map_projection": "EPSG:3857", - "center_x": "12826670.196943447", - "center_y": "-967549.1600801547", - "map_layers": [ - { - "idx": 0, - "layer_name": "OSM", - "layer_type": "base", - "layer_source": "OlSourceOsm", - "layer_visible": true, - "layer_position": 0 - }, - { - "idx": 1, - "layer_name": "point_tanah_kantor_desa_lurah0", - "layer_type": "Point", - "layer_source": { - "url": "http://192.168.99.110/geoserver/wms", - "params": { - "LAYERS": "bmd_denpasar:point_tanah_kantor_desa_lurah0", - "TILED": true, - "SLD": "http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:point_tanah_kantor_desa_lurah0" - }, - "serverType": "geoserver", - "transition": 0, - "crossOrigin": "anonymous" - }, - "layer_visible": true, - "layer_position": 1 - } - ] - }*/ - const config = { - headers: {'Content-Type': 'application/json'} + headers: { 'Content-Type': 'application/json' } }; - let reqAxios = await axios.post(API_UPDATE_MAP, requestPayload, config).then(res => res ).catch(error => error); + let reqAxios = await axios.post(API_UPDATE_MAP, requestPayload, config).then(res => res).catch(error => error); return reqAxios; } export const getRandomColor = () => { - let letters = '0123456789ABCDEF'; - let color = '#'; - for (var i = 0; i < 6; i++) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; + let letters = '0123456789ABCDEF'; + let color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; } export const createNewFeature = async (obj) => { @@ -479,7 +427,7 @@ export const createNewFeature = async (obj) => { */ const config = { - headers: {'Content-Type': 'text/xml'} + headers: { 'Content-Type': 'text/xml' } }; let coords = ``; let layer_attributes = ``; @@ -494,14 +442,14 @@ export const createNewFeature = async (obj) => { ` } else if (obj.layer_geom_type == "MultiPoint") { - console.log('obj.coordinates', obj.coordinates); + /*coordinates: Array(2) 0: Array(1) 0: (2) [12854303.787587587, -955479.4157146217] 1: Array(1) 0: (2) [12855873.913617639, -955135.2785083359]*/ coords = ``; - for (let i=0; i @@ -513,35 +461,33 @@ export const createNewFeature = async (obj) => { coords += ``; } else if (obj.layer_geom_type == "LineString") { - console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ] + coords = ` `; - for(let i=0; i `; } else if (obj.layer_geom_type == "MultiLineString") { - console.log('obj.coordinates', obj.coordinates); - coords += ``; - for (let i=0; i < obj.coordinates.length; i++) { + for (let i = 0; i < obj.coordinates.length; i++) { coords += ` `; - for(let j=0; j < obj.coordinates[i][0].length; j++) { + for (let j = 0; j < obj.coordinates[i][0].length; j++) { let longitude = obj.coordinates[i][0][j][0]; let latitude = obj.coordinates[i][0][j][1]; let lastLoop = obj.coordinates[i][0].length - 1; @@ -557,10 +503,9 @@ export const createNewFeature = async (obj) => { `; } - coords += ``; + coords += ``; } else if (obj.layer_geom_type == "Polygon") { - console.log('obj.coordinates', obj.coordinates); /*coordinates: Array(1) 0: Array(1) 0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)] @@ -569,7 +514,7 @@ export const createNewFeature = async (obj) => { `; - for (let i=0; i < obj.coordinates[0][0].length; i++) { + for (let i = 0; i < obj.coordinates[0][0].length; i++) { let longitude = obj.coordinates[0][0][i][0]; let latitude = obj.coordinates[0][0][i][1]; let lastLoop = obj.coordinates[0][0].length - 1; @@ -579,15 +524,14 @@ export const createNewFeature = async (obj) => { coords += `${longitude},${latitude} `; // with space } } - coords += ` + coords += ` `; - + } else if (obj.layer_geom_type == "MultiPolygon") { - console.log('obj.coordinates', obj.coordinates); /*coordinates: Array(2) 0: Array(1) 0: [Array(5)] @@ -598,24 +542,24 @@ export const createNewFeature = async (obj) => { */ coords += ``; - for(let i=0; i `; - for (let j=0; j + for (let j = 0; j < obj.coordinates[i][0][0].length; j++) { + let longitude = obj.coordinates[i][0][0][j][0]; + let latitude = obj.coordinates[i][0][0][j][1]; + let lastLoop = obj.coordinates[i][0][0].length - 1; + if (j == lastLoop) { + coords += `${longitude},${latitude}`; // no space at the end of loop + } else { + coords += `${longitude},${latitude} `; // with space + } + } + coords += ` @@ -628,7 +572,7 @@ export const createNewFeature = async (obj) => { if (obj.layer_attributes) { if (obj.layer_attributes.length > 0) { - for(let i=0; i${obj.layer_attributes[i].value}`; } } @@ -646,44 +590,38 @@ export const createNewFeature = async (obj) => { `; - console.log('payload', payload); let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message); - console.log('createNewFeature reqAxios',reqAxios); - - if (reqAxios.data !== undefined) { - console.log('typeof response', typeof(reqAxios.data)); - let parser = new DOMParser(); - xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); - let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; - console.log('xml status', status); + if (reqAxios.data !== undefined) { + let parser = new DOMParser(); + xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); + let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName; - console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED - if (status !== undefined) { - if (statusText == 'SUCCESS') { - result = 'Successfully create new feature!'; - return { + if (status !== undefined) { + if (statusText == 'SUCCESS') { + result = 'Successfully create new feature!'; + return { "success": true, "result": result } - } - else if (statusText == 'FAILED') { - result = 'Error create new feature'; - let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML; - return { + } + else if (statusText == 'FAILED') { + result = 'Error create new feature'; + let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML; + return { "success": false, "result": errMessage } - } - } - } - else { - result = reqAxios; - return { + } + } + } + else { + result = reqAxios; + return { "success": false, "result": result } - } + } } @@ -726,7 +664,7 @@ export const updateFeatureGeometry = async (obj) => { */ const config = { - headers: {'Content-Type': 'text/xml'} + headers: { 'Content-Type': 'text/xml' } }; let coords = ``; let result = null; @@ -744,14 +682,8 @@ export const updateFeatureGeometry = async (obj) => { ` } else if (obj.layer_geom_type == "MultiPoint") { - console.log('obj.coordinates', obj.coordinates); - /*coordinates: Array(2) - 0: Array(1) - 0: (2) [12854303.787587587, -955479.4157146217] - 1: Array(1) - 0: (2) [12855873.913617639, -955135.2785083359]*/ coords = ``; - for (let i=0; i @@ -763,21 +695,20 @@ export const updateFeatureGeometry = async (obj) => { coords += ``; } else if (obj.layer_geom_type == "LineString") { - console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ] coords = ` `; - for(let i=0; i `; @@ -786,16 +717,12 @@ export const updateFeatureGeometry = async (obj) => { } else if (obj.layer_geom_type == "Polygon") { - console.log('obj.coordinates', obj.coordinates); - /*coordinates: Array(1) - 0: Array(1) - 0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)] - */ + coords = ` `; - for (let i=0; i < obj.coordinates[0][0].length; i++) { + for (let i = 0; i < obj.coordinates[0][0].length; i++) { let longitude = obj.coordinates[0][0][i][0]; let latitude = obj.coordinates[0][0][i][1]; let lastLoop = obj.coordinates[0][0].length - 1; @@ -805,42 +732,33 @@ export const updateFeatureGeometry = async (obj) => { coords += `${longitude},${latitude} `; // with space } } - coords += ` + coords += ` `; - + } else if (obj.layer_geom_type == "MultiPolygon") { - console.log('obj.coordinates', obj.coordinates); - /*coordinates: Array(2) - 0: Array(1) - 0: [Array(5)] - 0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)] - 1: Array(1) - 0: [Array(5)] - 0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)] - */ coords += ``; - for(let i=0; i `; - for (let j=0; j + for (let j = 0; j < obj.coordinates[i][0][0].length; j++) { + let longitude = obj.coordinates[i][0][0][j][0]; + let latitude = obj.coordinates[i][0][0][j][1]; + let lastLoop = obj.coordinates[i][0][0].length - 1; + if (j == lastLoop) { + coords += `${longitude},${latitude}`; // no space at the end of loop + } else { + coords += `${longitude},${latitude} `; // with space + } + } + coords += ` @@ -866,33 +784,33 @@ export const updateFeatureGeometry = async (obj) => { `; - console.log('payload', payload); + let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message); - console.log('createNewFeature reqAxios',reqAxios); - - if (reqAxios.data !== undefined) { - console.log('typeof response', typeof(reqAxios.data)); - let parser = new DOMParser(); - xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); - let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; - console.log('xml status', status); - result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue; - console.log('xml result', result); - return { + + + if (reqAxios.data !== undefined) { + + let parser = new DOMParser(); + xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); + let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; + + result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue; + + return { "success": true, "result": result } - } - else { - result = reqAxios; - return { + } + else { + result = reqAxios; + return { "success": false, "result": result } - } + } -} +} export const deleteFeature = async (layerName, fid) => { @@ -924,7 +842,7 @@ export const deleteFeature = async (layerName, fid) => { */ const config = { - headers: {'Content-Type': 'text/xml'} + headers: { 'Content-Type': 'text/xml' } }; let result = null; let xmlDoc = null; @@ -937,27 +855,27 @@ export const deleteFeature = async (layerName, fid) => { `; let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message); - console.log('deleteFeature reqAxios',reqAxios); - - if (reqAxios.data !== undefined) { - let parser = new DOMParser(); - xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); - let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; - console.log('xml status', status); - result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue; - console.log('xml result', result); - return { + + + if (reqAxios.data !== undefined) { + let parser = new DOMParser(); + xmlDoc = parser.parseFromString(reqAxios.data, "text/xml"); + let status = xmlDoc.getElementsByTagName('wfs:Status')[0]; + + result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue; + + return { "success": true, "result": result } - } - else { - result = reqAxios; - return { + } + else { + result = reqAxios; + return { "success": false, "result": result } - } + } } @@ -971,108 +889,107 @@ export const getLayerColor = async (SLD_URL) => { if (resAxios.data) { let parser = new DOMParser(); - xmlDoc = parser.parseFromString(resAxios.data, "text/xml"); - let fillColor = ''; - let cssParameter = xmlDoc.getElementsByTagName('sld:CssParameter'); - for (let i=0; i { let category = ''; - if(type==="m_sales"){ + if (type === "m_sales") { category = "m_sales"; - }else if(type==="m_office"){ + } else if (type === "m_office") { category = "office"; - }else if(type==="m_customer"){ + } else if (type === "m_customer") { category = "customer"; - }else if(type==="m_employee"){ + } else if (type === "m_employee") { category = "employee" - }else if(type==="realisasi"){ + } else if (type === "realisasi") { category = "laporan-planning" } - else if (type==="report_activity") { + else if (type === "report_activity") { category = "report_activity" } let payload = { - "paging": {"start": 0, "length": -1}, + "paging": { "start": 0, "length": -1 }, "columns": [ - {"name":"category", "logic_operator": "=", "value": category.toString(), "operator": "and"}, - {"name": "ref_id", "logic_operator": "=", "value": id.toString(), "operator": "and"} + { "name": "category", "logic_operator": "=", "value": category.toString(), "operator": "and" }, + { "name": "ref_id", "logic_operator": "=", "value": id.toString(), "operator": "and" } ], - "orders": {"columns": ["image"], "ascending": true} + "orders": { "columns": ["image"], "ascending": true } } let config = { - method: 'POST', // *GET, POST, PUT, DELETE, etc. - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer '+window.localStorage.getItem('token') - }, - body: JSON.stringify(payload) // body data type must match "Content-Type" header - } + method: 'POST', // *GET, POST, PUT, DELETE, etc. + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.localStorage.getItem('token') + }, + body: JSON.stringify(payload) // body data type must match "Content-Type" header + } - let resFetch = await fetch(IMAGE_SEARCH, config).then(response => response.json()).then(res => res); - let resAxios = {data: resFetch} // karena pake fetch return api nya gak di dalam data.data + let resFetch = await fetch(IMAGE_SEARCH, config).then(response => response.json()).then(res => res); + let resAxios = { data: resFetch } // karena pake fetch return api nya gak di dalam data.data return resAxios; } export const getLayerAttribute = async (layerName) => { const param = { - method: 'GET', - header: JSON.stringify({'Content-Type': 'application/json'}), - } - - try { - const result = await fetch(API_LAYER_ATTRIBUTE_BY_LAYERNAME+layerName, param).then(response => response.json()).then(res => res) + method: 'GET', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + } + + try { + const result = await fetch(API_LAYER_ATTRIBUTE_BY_LAYERNAME + layerName, param).then(response => response.json()).then(res => res) - if (result.code_type == 'success') { - return { + if (result.code_type == 'success') { + return { "success": true, "result": result } - } - else { - return { + } + else { + return { "success": false, "result": result.code_message } - } - } catch(err) { - console.log(err); - return { + } + } catch (err) { + return { "success": false, "result": err.message.toString() } - } + } } @@ -1082,16 +999,16 @@ export const getLayerAttribute = async (layerName) => { * @return {string} The formatted length. */ export const formatLength = (line) => { - var length = getLength(line); - var output; - if (length > 100) { - output = (Math.round(length / 1000 * 100) / 100) + - ' ' + 'km'; - } else { - output = (Math.round(length * 100) / 100) + - ' ' + 'm'; - } - return output; + var length = getLength(line); + var output; + if (length > 100) { + output = (Math.round(length / 1000 * 100) / 100) + + ' ' + 'km'; + } else { + output = (Math.round(length * 100) / 100) + + ' ' + 'm'; + } + return output; }; /** @@ -1100,58 +1017,58 @@ export const formatLength = (line) => { * @return {string} Formatted area. */ export const formatArea = (polygon) => { - var area = getArea(polygon); - console.log('area', area); - var output; - if (area > 10000) { - output = (Math.round(area / 1000000 * 100) / 100) + - ' ' + 'km2'; - } else { - output = (Math.round(area * 100) / 100) + - ' ' + 'm2'; - } - return output; + var area = getArea(polygon); + + var output; + if (area > 10000) { + output = (Math.round(area / 1000000 * 100) / 100) + + ' ' + 'km2'; + } else { + output = (Math.round(area * 100) / 100) + + ' ' + 'm2'; + } + return output; }; export const lightOrDark = (color) => { let r, g, b, hsp; - if (color.match(/^rgb/)) { + if (color.match(/^rgb/)) { - color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); + color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); - r = color[1]; - g = color[2]; - b = color[3]; - } - else { + r = color[1]; + g = color[2]; + b = color[3]; + } + else { - color = +("0x" + color.slice(1).replace( - color.length < 5 && /./g, '$&$&' - ) - ); + color = +("0x" + color.slice(1).replace( + color.length < 5 && /./g, '$&$&' + ) + ); - r = color >> 16; - g = color >> 8 & 255; - b = color & 255; - } + r = color >> 16; + g = color >> 8 & 255; + b = color & 255; + } - hsp = Math.sqrt( - 0.299 * (r * r) + - 0.587 * (g * g) + - 0.114 * (b * b) - ); + hsp = Math.sqrt( + 0.299 * (r * r) + + 0.587 * (g * g) + + 0.114 * (b * b) + ); - if (hsp>127.5) { + if (hsp > 127.5) { - return 'light'; - } - else { + return 'light'; + } + else { - return 'dark'; - } + return 'dark'; + } } export const numberWithCommas = (x) => { - return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } \ No newline at end of file diff --git a/src/const/i18n.js b/src/const/i18n.js index aedcbb4..c507d88 100644 --- a/src/const/i18n.js +++ b/src/const/i18n.js @@ -13,14 +13,13 @@ i18n id: { translation: id }, }, fallbackLng, - debug: true, + debug: false, interpolation: { - escapeValue: false, // not needed for react as it escapes by default + escapeValue: false, }, lng: localStorage.getItem("language") || fallbackLng, }); -// Set up an event listener to update the language in localStorage whenever the language is changed i18n.on("languageChanged", (lng) => { localStorage.setItem("language", lng); }); diff --git a/src/const/interceptorApi.js b/src/const/interceptorApi.js index c995eeb..7250da3 100644 --- a/src/const/interceptorApi.js +++ b/src/const/interceptorApi.js @@ -9,12 +9,9 @@ axios.interceptors.request.use( }); axios.interceptors.response.use((response) => { - // console.log("token not expire") return response }, async function (error) { if (error.response.status == 401) { - console.log("error", error.response) - console.log("token expire") localStorage.clear(); window.location = window.location.origin; } diff --git a/src/containers/DefaultLayout/DefaultHeader.js b/src/containers/DefaultLayout/DefaultHeader.js index c8832ad..c923679 100644 --- a/src/containers/DefaultLayout/DefaultHeader.js +++ b/src/containers/DefaultLayout/DefaultHeader.js @@ -110,7 +110,6 @@ class DefaultHeader extends Component { .then(res => res) .catch((error) => error.response); if (result && result.data && result.data.code == 200) { - console.log("cek cek cek 45", result.data.data) this.setState({ dataAlert: result.data.data, totalAlert: result.data.totalRecord }); } } @@ -168,7 +167,6 @@ class DefaultHeader extends Component { } markAsRead = async () => { - console.log("markAsRead") let data = this.state.listReadNotif const payload = { "status_view": true diff --git a/src/serviceWorker.js b/src/serviceWorker.js index eb44fc6..36c8b6e 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -3,10 +3,10 @@ const isLocalhost = Boolean( window.location.hostname === 'localhost' || - window.location.hostname === '[::1]' || - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + window.location.hostname === '[::1]' || + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) ); export function register(config) { @@ -25,7 +25,7 @@ export function register(config) { navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' + 'worker. To learn more, visit https://goo.gl/SC7cgQ' ); }); } else { @@ -44,14 +44,10 @@ function registerValidSW(swUrl, config) { installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { - console.log('New content is available; please refresh.'); - if (config.onUpdate) { config.onUpdate(registration); } } else { - console.log('Content is cached for offline use.'); - if (config.onSuccess) { config.onSuccess(registration); } diff --git a/src/services/api/base.js b/src/services/api/base.js index 76b9e5d..d150287 100644 --- a/src/services/api/base.js +++ b/src/services/api/base.js @@ -1,54 +1,19 @@ import axios from 'axios'; import { toast } from "react-toastify"; export default class RequestApi { - // static Request() { - // // axios.interceptors.request.use(function (config) { - // // const token = localStorage.getItem('token') - // // config.headers.Authorization = token; - - // // return config; - // // }); - // const token = localStorage.getItem('token') - - // let instance = axios.create({ - // headers: { - // 'Content-Type': 'application/json', - // "Authorization": `Bearer ${token}` - // } - // }) - - // instance.interceptors.response.use( - // (response) => response, - // async (error) => { - // // const originalRequest = error.config; - // if (error.response.status === 307 || error.response.status === 403) { - // console.log(error.response); - // } - - // return Promise.reject(error); - // } - // ); - - // return instance; - // } - static Request() { axios.interceptors.response.use( response => response, async (error) => { - // console.log('error axios', JSON.stringify(error)); if (error) { - // console.log('stringify', JSON.stringify(error)); const err = JSON.parse(JSON.stringify(error)); - console.log('error', err); if (err.name === 'AxiosError' && err.code === 'ERR_NETWORK') { alert(err.message); return; } if (err.response) { if (err.response.status === 307 || err.response.status === 403 || err.response.status === 401) { - // console.log(err.response); - // alert('Token expired, please re-login'); + toast.error("Token expired, please re-login"); // clearAllState(); window.localStorage.clear(); diff --git a/src/services/api/modules/map_monitoring/index.js b/src/services/api/modules/map_monitoring/index.js index b78f6e5..74e6466 100644 --- a/src/services/api/modules/map_monitoring/index.js +++ b/src/services/api/modules/map_monitoring/index.js @@ -8,75 +8,38 @@ export default class ApiMapMonitoring extends RequestApi { const { selectedProjectIds } = store.getState().mapReducer; // const URL = `${BASE_SIMPRO_LUMEN}/presence/search` const URL = `${BASE_SIMPRO_LUMEN}/map-monitoring/search` - // const dateFrom = moment().subtract(7,'d').format('YYYY-MM-DD 00:00:00'); - // const dateTo = moment().format('YYYY-MM-DD 23:59:00'); - // const payload = { - // "columns": [ - // { - // "logic_operator": "range", - // "name": "created_at", - // "operator": "AND", - // "value": dateFrom, - // "value1": dateTo - // } - // ], - // "joins": [ - // { - // "column_join": "user_id", - // "column_results": [ - // "username", "name" - // ], - // "name": "m_users" - // } - // ], - // "orders": { - // "ascending": false, - // "columns": [ - // "created_at" - // ] - // }, - // "paging": { - // "length": 25, - // "start": 0 - // } - // } const payload = { "project_id": selectedProjectIds } - console.log('payload', payload); return await RequestApi.Request().post( URL, payload, RequestApi.HeaderWithToken()).then(res => { - // console.log('res map-monitoring', JSON.stringify(res)); - if (res) { - if (res && res.data && res.data.data) { - // console.log('ApiPresence search', res.data.data) - if (res.data.data.length > 0) { - return {status: true, data: res.data.data}; + if (res) { + if (res && res.data && res.data.data) { + if (res.data.data.length > 0) { + return { status: true, data: res.data.data }; + } + else { + return { status: false, data: null } + } } else { - return {status: false, data: null} + return { status: false, data: null }; } } else { - return {status: false, data: null}; + alert("Please check your internet connection.", "error"); + return { status: false, data: null }; } - } - else { - alert("Please check your internet connection.", "error"); - return {status: false, data: null}; - } - }).catch(e => { - // console.log('error search presence', e); - let error = JSON.parse(JSON.stringify(e)); - console.log('error search presence', error); - if (error.message) { - alert(error.message); - } - return {status: false, data: null}; - }); + }).catch(e => { + let error = JSON.parse(JSON.stringify(e)); + if (error.message) { + alert(error.message); + } + return { status: false, data: null }; + }); } @@ -95,32 +58,29 @@ export default class ApiMapMonitoring extends RequestApi { URL, payload, RequestApi.HeaderWithToken()).then(res => { - if (res) { - if (res && res.data && res.data.data) { - // console.log('ApiPresence search', res.data.data) - if (res.data.data.length > 0) { - return {status: true, data: res.data.data}; + if (res) { + if (res && res.data && res.data.data) { + if (res.data.data.length > 0) { + return { status: true, data: res.data.data }; + } + else { + return { status: false, data: null } + } } else { - return {status: false, data: null} + return { status: false, data: null }; } } else { - return {status: false, data: null}; + alert("Please check your internet connection.", "error"); + return { status: false, data: null }; + } + }).catch(e => { + let error = JSON.parse(JSON.stringify(e)); + if (error.message) { + alert(error.message); } - } - else { - alert("Please check your internet connection.", "error"); - return {status: false, data: null}; - } - }).catch(e => { - // console.log('error search presence', e); - let error = JSON.parse(JSON.stringify(e)); - console.log('error search user history', error); - if (error.message) { - alert(error.message); - } - return {status: false, data: null}; - }); + return { status: false, data: null }; + }); } } \ No newline at end of file diff --git a/src/services/api/modules/project/index.js b/src/services/api/modules/project/index.js index 127b5c9..f399f55 100644 --- a/src/services/api/modules/project/index.js +++ b/src/services/api/modules/project/index.js @@ -32,7 +32,6 @@ export default class ApiProject extends RequestApi { RequestApi.HeaderWithToken()).then(res => { if (res) { if (res && res.data && res.data.data) { - // console.log('ApiProject search', res.data.data) if (res.data.data.length > 0) { return { status: true, data: res.data.data }; } @@ -49,9 +48,7 @@ export default class ApiProject extends RequestApi { return { status: false, data: null }; } }).catch(e => { - // console.log('error search project', e); let error = JSON.parse(JSON.stringify(e)); - console.log('error search project', error); if (error.message) { alert(error.message); } diff --git a/src/views/ControlMonitoringGantt/GanttDhtmlx2.js b/src/views/ControlMonitoringGantt/GanttDhtmlx2.js index cf4feba..88952c2 100644 --- a/src/views/ControlMonitoringGantt/GanttDhtmlx2.js +++ b/src/views/ControlMonitoringGantt/GanttDhtmlx2.js @@ -58,7 +58,6 @@ export default class GanttFull extends Component { }; handleOpenDialog = (param) => { - console.log(param) } constructor(props, context) { @@ -71,7 +70,6 @@ export default class GanttFull extends Component { runData = () => { const { startDate, endDate } = this.props - console.log({ startDate, endDate }) gantt.config.start_date = new Date(startDate); gantt.config.end_date = new Date(endDate); diff --git a/src/views/ControlMonitoringGantt/index.js b/src/views/ControlMonitoringGantt/index.js index e6d86b1..95a5376 100644 --- a/src/views/ControlMonitoringGantt/index.js +++ b/src/views/ControlMonitoringGantt/index.js @@ -25,7 +25,6 @@ const getUrlParameter = (sParam) => { sParameterName, i; - console.log("sPageURL", sPageURL); for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); @@ -79,7 +78,6 @@ const GanttTimeLine = () => { const maxDates = data.map(res => moment(res.akhir_proyek)), maxDate = moment.max(maxDates) - console.log({ minDate, maxDate }) let groups = [] let items = [] data.map((res, idx) => { @@ -124,7 +122,6 @@ const GanttTimeLine = () => { .then(res => res) .catch((error) => error.response); - console.log(result) if (result && result.data && result.data.code == 200) { const { data } = result.data @@ -139,7 +136,6 @@ const GanttTimeLine = () => { useEffect(() => { let proyek_id = getUrlParameter('proyek_id'); - console.log('proyek_id', proyek_id); if (proyek_id) { setProyekId(proyek_id); } @@ -150,7 +146,6 @@ const GanttTimeLine = () => { const row = prevDataAllTimeLine.filter(res => res.id === param) if (row.length > 0) { const { subproyeks, proyek_id, parent_id } = row[0] - console.log(subproyeks) setPrevProyekId(parent_id || proyek_id) handleMappingDataGantt(subproyeks) setDataAllTimeLine(subproyeks) @@ -164,7 +159,6 @@ const GanttTimeLine = () => { } const handleOpenDialogSub = (type, param) => { - console.log("sub proyek", param) const { id, parent_id, proyek_id, parent } = param const idParent = parent == 0 ? 0 : parent == proyek_id ? id : parent_id setidTask(proyek_id) @@ -227,7 +221,7 @@ const GanttTimeLine = () => { return (
{/* {RenderGantt} */} - {/* - ), [activeTabIdx]) + + ), [activeTabIdx]) const RenderComments = useMemo(() => { return ( <> -
-