From 39a2b533d78db959c53597f5167a69b2cf8407ea Mon Sep 17 00:00:00 2001 From: Muhammad Sulaiman Yusuf Date: Thu, 7 Jul 2022 20:51:56 +0700 Subject: [PATCH] remove unused codes --- src/views/DashboardSimpro/index.js | 487 +- src/views/Map/Map_16.js | 6852 ++++++++----------- src/views/Report/ControlMonitoring/index.js | 414 +- 3 files changed, 3253 insertions(+), 4500 deletions(-) diff --git a/src/views/DashboardSimpro/index.js b/src/views/DashboardSimpro/index.js index 8e42c12..8152c3c 100644 --- a/src/views/DashboardSimpro/index.js +++ b/src/views/DashboardSimpro/index.js @@ -20,18 +20,18 @@ import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd'; import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js'; import { projectTreeConst } from '../../const/LayerTreeConst.js'; import { - Card, Modal, ModalHeader, ModalBody, ModalFooter, Button, - CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row + Card, Modal, ModalHeader, ModalBody, ModalFooter, Button, + CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap'; import { - DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR, - PRESENT_COLOR, TOTAL_COLOR, - RED_COLOR, - ORANGE_COLOR, - GREEN_COLOR, - DARK_GREY_COLOR, - BLUE_COLOR, - PURPLE_COLOR + DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR, + PRESENT_COLOR, TOTAL_COLOR, + RED_COLOR, + ORANGE_COLOR, + GREEN_COLOR, + DARK_GREY_COLOR, + BLUE_COLOR, + PURPLE_COLOR } from '../../const/AppConst.js'; const id_org = window.localStorage.getItem('id_org'); const roleName = window.localStorage.getItem('role_name'); @@ -40,268 +40,269 @@ Chart.plugins.register(ChartDataLabels); const { RangePicker } = DatePicker; let menu = [ - { - "id": 3, - "title": "PANIC BUTTON", - "key": "absent", - "color": IZIN_COLOR - }, - { - "id": 4, - "title": "WASPANG ACTIVE", - "key": "karyawan telat", - "color": GREEN_COLOR - }, - { - "id": 5, - "title": "WASPANG ABSENT", - "key": "karyawan tanpa keterangan", - "color": ORANGE_COLOR - } + { + "id": 3, + "title": "PANIC BUTTON", + "key": "absent", + "color": IZIN_COLOR + }, + { + "id": 4, + "title": "WASPANG ACTIVE", + "key": "karyawan telat", + "color": GREEN_COLOR + }, + { + "id": 5, + "title": "WASPANG ABSENT", + "key": "karyawan tanpa keterangan", + "color": ORANGE_COLOR + } ] const defaultPersentaseProyek = { - labels: [], - datasets: [ - { - label: 'Progress', - data: [], - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], + labels: [], + datasets: [ + { + label: 'Progress', + data: [], + fill: false, + backgroundColor: 'rgb(54, 162, 235)', + borderColor: 'rgba(54, 162, 235, 0.2)', + yAxisID: 'y-axis-1', + }, + ], }; const defaultCostProyek = { - labels: [], - datasets: [ - { - label: 'Perencanaan', - data: [], - fill: false, - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgba(255, 99, 132, 0.2)', - yAxisID: 'y-axis-1', - }, - { - label: 'Realisasi', - data: [], - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], + labels: [], + datasets: [ + { + label: 'Perencanaan', + data: [], + fill: false, + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgba(255, 99, 132, 0.2)', + yAxisID: 'y-axis-1', + }, + { + label: 'Realisasi', + data: [], + fill: false, + backgroundColor: 'rgb(54, 162, 235)', + borderColor: 'rgba(54, 162, 235, 0.2)', + yAxisID: 'y-axis-1', + }, + ], }; const defaultStatusProyek = { - labels: ['Aman', 'Alert', 'Critical'], - datasets: [ - { - label: '# of Votes', - data: [], - backgroundColor: [ - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(255, 99, 132, 0.2)', - ], - borderColor: [ - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(255, 99, 132, 1)', - ], - borderWidth: 1, - }, - ], + labels: ['Aman', 'Alert', 'Critical'], + datasets: [ + { + label: '# of Votes', + data: [], + backgroundColor: [ + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(255, 99, 132, 0.2)', + ], + borderColor: [ + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(255, 99, 132, 1)', + ], + borderWidth: 1, + }, + ], }; const DashboardSimpro = () => { - const token = localStorage.getItem("token") - const HEADER = { - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}` - } - } - const [openPlanRealisasi, setopenPlanRealisasi] = useState(false); - const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false); - const [dataChart, setDataChart] = useState([]); - const [projectTree, setProjectTree] = useState([]); - const [allProyek, setAllProyek] = useState(true); - const [dataStatusProyek, setDataStatusProyek] = useState(null); - const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null); - const [dataCostProyek, setdataCostProyek] = useState(null); - const [projectTreeVisible, setProjectTreeVisible] = useState(false); - const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]); - const [openModalTable, setOpenModalTable] = useState(false); - const [dataDashboard, setDataDashboard] = useState(null); + const token = localStorage.getItem("token") + const HEADER = { + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } + } + const [openPlanRealisasi, setopenPlanRealisasi] = useState(false); + const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false); + const [dataChart, setDataChart] = useState([]); + const [projectTree, setProjectTree] = useState([]); + const [allProyek, setAllProyek] = useState(true); + const [dataStatusProyek, setDataStatusProyek] = useState(null); + const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null); + const [dataCostProyek, setdataCostProyek] = useState(null); + const [projectTreeVisible, setProjectTreeVisible] = useState(false); + const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]); + const [openModalTable, setOpenModalTable] = useState(false); + const [dataDashboard, setDataDashboard] = useState(null); - const handleGetDataDashboard = async () => { - const URL = `${BASE_SIMPRO}/dashboard-proyek/search` - const payload = { - "columns": [ - { "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" } - ], - "paging": { "start": 0, "length": -1 } - } - const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { - setDataDashboard(result.data.data); - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } + const handleGetDataDashboard = async () => { + const URL = `${BASE_SIMPRO}/dashboard-proyek/search` + const payload = { + "columns": [ + { "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" } + ], + "paging": { "start": 0, "length": -1 } + } + const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - } + if (result.data.code !== 200) { + NotificationManager.error('Gaga Menambah Data!!', 'Failed'); + } - const handleGetDataDashboardChart = async () => { - const URL = `${BASE_SIMPRO}/dashboard-status/search` - let str = '' - checkedKeysProjectTree.map((res, idx) => { - if (idx == 0) str += `${res}` - if (idx != 0) str += `,${res}` - }) - const payload = { - "columns": [ - { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" } - ], - "orders": { "columns": ["nama"], "ascending": true } - } - const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { + setDataDashboard(result.data.data); + } - const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data + const handleGetDataDashboardChart = async () => { + const URL = `${BASE_SIMPRO}/dashboard-status/search` + let str = '' - const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : [] - const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : [] - const persentaseProyek = { - labels: labelPersentaseProyek, - datasets: [ - { - label: 'Progress', - data: valuePersentaseProyek, - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], - }; - setDataPersentaseProyek(persentaseProyek) - const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : [] - const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] - const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : [] + checkedKeysProjectTree.map((res, idx) => { + if (idx == 0) str += `${res}` + if (idx != 0) str += `,${res}` + }) - const costProyek = { - labels: labelCostPlaning, - datasets: [ - { - label: 'Perencanaan', - data: valueCostPlaning, - fill: false, - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgba(255, 99, 132, 0.2)', - yAxisID: 'y-axis-1', - }, - { - label: 'Realisasi', - data: valueCostRealisasi, - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], - }; - setdataCostProyek(costProyek) + const payload = { + "columns": [ + { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" } + ], + "orders": { "columns": ["nama"], "ascending": true } + } - const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : [] + const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - const statusProyek = { - labels: ['Aman', 'Alert', 'Critical'], - datasets: [ - { - label: '# of Votes', - data: valueStatusProyek, - backgroundColor: [ - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(255, 99, 132, 0.2)', - ], - borderColor: [ - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(255, 99, 132, 1)', - ], - borderWidth: 1, - }, - ], - }; + if (result.data.code !== 200) { + NotificationManager.error('Gaga Menambah Data!!', 'Failed'); + } - setDataStatusProyek(statusProyek) + const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data + const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : [] + const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : [] + const persentaseProyek = { + labels: labelPersentaseProyek, + datasets: [ + { + label: 'Progress', + data: valuePersentaseProyek, + fill: false, + backgroundColor: 'rgb(54, 162, 235)', + borderColor: 'rgba(54, 162, 235, 0.2)', + yAxisID: 'y-axis-1', + }, + ], + }; + setDataPersentaseProyek(persentaseProyek) + const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : [] + const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] + const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : [] - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } + const costProyek = { + labels: labelCostPlaning, + datasets: [ + { + label: 'Perencanaan', + data: valueCostPlaning, + fill: false, + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgba(255, 99, 132, 0.2)', + yAxisID: 'y-axis-1', + }, + { + label: 'Realisasi', + data: valueCostRealisasi, + fill: false, + backgroundColor: 'rgb(54, 162, 235)', + borderColor: 'rgba(54, 162, 235, 0.2)', + yAxisID: 'y-axis-1', + }, + ], + }; + setdataCostProyek(costProyek) - } + const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : [] - const getProyek = async () => { - const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true` - const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { - setProjectTree(result.data.data); - const arr = result.data.data.map(res => res.id) - setCheckedKeysProjectTree(arr) - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } - } + const statusProyek = { + labels: ['Aman', 'Alert', 'Critical'], + datasets: [ + { + label: '# of Votes', + data: valueStatusProyek, + backgroundColor: [ + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(255, 99, 132, 0.2)', + ], + borderColor: [ + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(255, 99, 132, 1)', + ], + borderWidth: 1, + }, + ], + }; - const renderDailyInfo = () => { - return ( - <> -
-

{dataDashboard ? dataDashboard.panic_button : 0}

-

PANIC BUTTON

-
-
-

{dataDashboard ? dataDashboard.waspang_status.presensi : 0}

-

WASPANG ACTIVE

-
-
-

{dataDashboard ? dataDashboard.waspang_status.absensi : 0}

-

WASPANG ABSENT

-
- - ) - } + setDataStatusProyek(statusProyek) - const handleClickChart = param => { - if (!param.length) return; - const { _datasetIndex, _index } = param[0]; - const data = dataPersentaseProyek.datasets[_datasetIndex].label - setOpenModalTable(true) - } - const handleClickProyek = id => { - const arr = [...checkedKeysProjectTree] - const idx = arr.indexOf(id) - if (idx == -1) { - arr.push(id) - } else { - arr.splice(idx, 1) - } - setCheckedKeysProjectTree(arr) - } + } - return ( - <> - - + const getProyek = async () => { + const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + if (result.data.code !== 200) { + NotificationManager.error('Gaga Menambah Data!!', 'Failed'); + } + setProjectTree(result.data.data); + const arr = result.data.data.map(res => res.id) + setCheckedKeysProjectTree(arr) + } - ); + const renderDailyInfo = () => { + return ( + <> +
+

{dataDashboard ? dataDashboard.panic_button : 0}

+

PANIC BUTTON

+
+
+

{dataDashboard ? dataDashboard.waspang_status.presensi : 0}

+

WASPANG ACTIVE

+
+
+

{dataDashboard ? dataDashboard.waspang_status.absensi : 0}

+

WASPANG ABSENT

+
+ + ) + } + + const handleClickChart = param => { + if (!param.length) return; + const { _datasetIndex, _index } = param[0]; + const data = dataPersentaseProyek.datasets[_datasetIndex].label + setOpenModalTable(true) + } + + const handleClickProyek = id => { + const arr = [...checkedKeysProjectTree] + const idx = arr.indexOf(id) + if (idx == -1) { + arr.push(id) + } else { + arr.splice(idx, 1) + } + setCheckedKeysProjectTree(arr) + } + + return ( + <> + + + + ); } export default DashboardSimpro; diff --git a/src/views/Map/Map_16.js b/src/views/Map/Map_16.js index a0040aa..f9adde1 100644 --- a/src/views/Map/Map_16.js +++ b/src/views/Map/Map_16.js @@ -1,80 +1,77 @@ import React, { Component, Suspense, Fragment } from 'react'; import ReactDOM from 'react-dom'; -import { - Container, Col, Row, Button, UncontrolledTooltip, - Card, - CardBody, - CardHeader, - Table, - Modal, ModalHeader, ModalBody, ModalFooter, - Carousel, - CarouselItem, - CarouselIndicators, - CarouselControl, - CarouselCaption, - ListGroup, - ListGroupItem, - Badge, - Progress -} from 'reactstrap'; +import './CustomScroll.css'; import './Map.css'; import './Popup.css'; -import './CustomScroll.css'; -import 'ol/ol.css'; -import 'antd/dist/antd.css'; import './react-geo.css'; +import 'antd/dist/antd.css'; +import 'ol/ol.css'; +import { + Container, Col, Row, Button, UncontrolledTooltip, + Card, + CardBody, + CardHeader, + Table, + Modal, ModalHeader, ModalBody, ModalFooter, + Carousel, + CarouselItem, + CarouselIndicators, + CarouselControl, + CarouselCaption, + ListGroup, + ListGroupItem, + Badge, + Progress +} from 'reactstrap'; -import OlMap from 'ol/Map'; -import OlView from 'ol/View'; -import OlLayerTile from 'ol/layer/Tile'; +import Feature from 'ol/Feature'; +import GeoJSON from 'ol/format/GeoJSON'; import ImageLayer from 'ol/layer/Image'; +import OlLayerGroup from 'ol/layer/Group'; +import OlLayerTile from 'ol/layer/Tile'; +import OlMap from 'ol/Map'; +import OlSourceImageWMS from 'ol/source/ImageWMS'; import OlSourceOsm from 'ol/source/OSM'; import OlSourceTileJson from 'ol/source/TileJSON'; -import OlLayerGroup from 'ol/layer/Group'; import OlSourceTileWMS from 'ol/source/TileWMS'; -import OlSourceImageWMS from 'ol/source/ImageWMS'; -import { fromLonLat, transformExtent, transform } from 'ol/proj'; -import { Vector as VectorSource, XYZ as XYZSource, Cluster } from 'ol/source'; +import OlView from 'ol/View'; import Overlay from 'ol/Overlay'; +import WMSCapabilities from 'ol/format/WMSCapabilities'; +import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl } from 'ol/style'; import { Draw, Select, Modify } from 'ol/interaction'; -import Feature from 'ol/Feature'; import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom'; import { Vector as VectorLayer } from 'ol/layer'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl } from 'ol/style'; -import { defaults as defaultControls, MousePosition, ScaleLine } from 'ol/control'; +import { Vector as VectorSource, XYZ as XYZSource, Cluster } from 'ol/source'; import { createStringXY, toStringXY } from 'ol/coordinate'; -import GeoJSON from 'ol/format/GeoJSON'; -import WMSCapabilities from 'ol/format/WMSCapabilities'; +import { defaults as defaultControls, MousePosition, ScaleLine } from 'ol/control'; import { formatRupiah, formatThousand, sortBy, uniqueKeyValues } from '../../const/CustomFunc' - +import { fromLonLat, transformExtent, transform } from 'ol/proj'; import { Drawer } from 'antd'; import { - SimpleButton, - MapComponent, - NominatimSearch, - MeasureButton, - // LayerTree, - MapProvider, - mappify, - onDropAware, - // AddWmsPanel + SimpleButton, + MapComponent, + NominatimSearch, + MeasureButton, + MapProvider, + mappify, + onDropAware, } from '@terrestris/react-geo'; import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher'; -import axios from 'axios'; import PopupContainer from '../../components/PopupContainer/PopupContainer'; +import axios from 'axios'; import { - AppHeader + AppHeader } from '@coreui/react'; -import MapToolbar from '../../components/MapToolbar/MapToolbar'; import DrawingTool from '../../components/DrawingTool/DrawingTool'; import ImagePopup from '../../components/ImagePopup/ImagePopup'; import ImageSlider from '../../components/ImageSlider/ImageSlider'; +import MapToolbar from '../../components/MapToolbar/MapToolbar'; import RoutingBar from '../../components/RoutingBar/RoutingBar'; import { - appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants, - WMS_CAPABILITIES_URL_2 + appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants, + WMS_CAPABILITIES_URL_2 } from '../../const/MapConst.js'; import { Icon } from '@iconify/react'; import imageOutline from '@iconify/icons-ion/image-outline'; @@ -87,50 +84,50 @@ import contractIcon from '@iconify/icons-ion/contract'; import country_indonesia from '../../assets/json/indonesia.json'; import { test, getGeomType, updateMap, getLayerAttribute, getLayerColor, getRandomColor } from '../../const/GeoserverFunc.js'; import { - API_UPDATE_MAP, API_LOAD_MAP, API_LAYER_SEARCH_LABEL, API_GET_CHART_KATEGORI, PROYEK_SEARCH, - USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH, PRESENSI_SEARCH, ABSENSI_SEARCH, PANIC_BUTTON_SEARCH, - DASHBOARD_COST_PLANNING_ACTUAL, - DASHBOARD_PERSENTASE_PROGRESS_PROYEK, - DASHBOARD_REPORT_POINTS, - DASHBOARD_STATUS_PROYEK, - DASHBOARD_KURVA_S, - GET_PERCENTAGE_PERDAY, - APP_MODE, - PRESENCE_SEARCH + API_UPDATE_MAP, API_LOAD_MAP, API_LAYER_SEARCH_LABEL, API_GET_CHART_KATEGORI, PROYEK_SEARCH, + USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH, PRESENSI_SEARCH, ABSENSI_SEARCH, PANIC_BUTTON_SEARCH, + DASHBOARD_COST_PLANNING_ACTUAL, + DASHBOARD_PERSENTASE_PROGRESS_PROYEK, + DASHBOARD_REPORT_POINTS, + DASHBOARD_STATUS_PROYEK, + DASHBOARD_KURVA_S, + GET_PERCENTAGE_PERDAY, + APP_MODE, + PRESENCE_SEARCH } from '../../const/ApiConst.js'; -import { getSalesRoutingApi, getSalesFeatures, getOfficeFeatures, getCustomerFeatures, getEmployeeFeatures, getEmployeeRoutingApi, getWaspangRoutingApi, getPresensiRoutingApi } from '../../const/GeohrApiFunc.js'; -import { SALES_FEATURES_STYLE, CUSTOMER_FEATURES_STYLE, OFFICE_FEATURES_STYLE, ROUTE_MAP_STYLES, EMPLOYEE_FEATURES_STYLE, PROJECT_FEATURES_STYLE, WASPANG_FEATURES_STYLE, LAPORAN_FEATURES_STYLE, PRESENSI_FEATURES_STYLE } from '../../const/GeohrMapStyles.js'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import moment from "moment"; -import salesGeojson from '../../dummy_data/sales.geojson'; -import routeDummy from '../../dummy_data/route2.json'; -import { demografiTree, analisaTree } from '../../const/LayerTreeConst.js' -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; -import pinRouteStart from '../../assets/img/map/pin_route_green.png'; -import pinRouteEnd from '../../assets/img/map/pin_route_red.png'; -import domtoimage from 'dom-to-image'; -import Loader from 'react-loader-spinner' import "react-loader-spinner/dist/loader/css/react-spinner-loader.css" +import 'chartjs-plugin-zoom'; +import 'react-toastify/dist/ReactToastify.css'; import * as alasql from 'alasql'; import * as lodash from 'lodash'; -import { Pie, Line, Bar } from 'react-chartjs-2'; +import Loader from 'react-loader-spinner' +import SweetAlert from 'react-bootstrap-sweetalert'; +import domtoimage from 'dom-to-image'; +import moment from "moment"; import numeral from 'numeral'; +import pinRouteEnd from '../../assets/img/map/pin_route_red.png'; +import pinRouteStart from '../../assets/img/map/pin_route_green.png'; +import routeDummy from '../../dummy_data/route2.json'; +import salesGeojson from '../../dummy_data/sales.geojson'; import { NotificationContainer, NotificationManager } from 'react-notifications'; -import 'chartjs-plugin-zoom'; +import { Pie, Line, Bar } from 'react-chartjs-2'; +import { SALES_FEATURES_STYLE, CUSTOMER_FEATURES_STYLE, OFFICE_FEATURES_STYLE, ROUTE_MAP_STYLES, EMPLOYEE_FEATURES_STYLE, PROJECT_FEATURES_STYLE, WASPANG_FEATURES_STYLE, LAPORAN_FEATURES_STYLE, PRESENSI_FEATURES_STYLE } from '../../const/GeohrMapStyles.js'; +import { ToastContainer, toast } from 'react-toastify'; +import { demografiTree, analisaTree } from '../../const/LayerTreeConst.js' +import { getSalesRoutingApi, getSalesFeatures, getOfficeFeatures, getCustomerFeatures, getEmployeeFeatures, getEmployeeRoutingApi, getWaspangRoutingApi, getPresensiRoutingApi } from '../../const/GeohrApiFunc.js'; const HEADER = { - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${window.localStorage.getItem('token')}` - } + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${window.localStorage.getItem('token')}` + } } const MappifiedNominatimSearch = mappify(NominatimSearch); const MappifiedMeasureButton = mappify(MeasureButton); const Map = mappify(onDropAware(MapComponent)); -const projection = 'EPSG:3857'; //default +const projection = 'EPSG:3857'; const projection4326 = 'EPSG:4326'; const lat = -6.228000; @@ -141,3924 +138,2911 @@ const Indonesia = new fromLonLat([lon, lat], projection); const Bali_bbox = [115.178638994694, -8.71934970794214, 115.269238650799, -8.59763413248024]; const osmLayer = new OlLayerTile({ - source: new OlSourceOsm(), - name: 'OSM', - type: 'base', - imageName: 'osm.PNG', - // maxZoom: 9 + source: new OlSourceOsm(), + name: 'OSM', + type: 'base', + imageName: 'osm.PNG', }); const esriLayer = new OlLayerTile({ - name: "ESRI", - source: new XYZSource({ - url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', - projection: projection, - // maxZoom: 9 - }), - type: 'base', - imageName: 'esri.PNG' + name: "ESRI", + source: new XYZSource({ + url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', + projection: projection, + }), + type: 'base', + imageName: 'esri.PNG' }); const googleLayer = new OlLayerTile({ - name: "Google", - source: new XYZSource({ - url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', - projection: projection, - // maxZoom: 9 - }), - type: 'base', - imageName: 'google.PNG' + name: "Google", + source: new XYZSource({ + url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', + projection: projection, + }), + type: 'base', + imageName: 'google.PNG' }) const googleStreetLayer = new OlLayerTile({ - name: "Google Street", - source: new XYZSource({ - url: 'http://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', - projection: projection, - // maxZoom: 9 - }), - type: 'base', - imageName: 'google_street.PNG' + name: "Google Street", + source: new XYZSource({ + url: 'http://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', + projection: projection, + }), + type: 'base', + imageName: 'google_street.PNG' }) - - -let baseLayers = []; - -if (localStorage.getItem('u_group') == 'kominfo') { - baseLayers = [ - osmLayer, - esriLayer, - googleLayer, - googleStreetLayer, - // denpasarLayer, - // citraDenpasarLayer, - // iuLayerGroup - ]; -} -else { - baseLayers = [ - osmLayer, - esriLayer, - googleLayer, - googleStreetLayer, - // denpasarLayer, - // citraDenpasarLayer, - // iuLayerGroup - ]; -} +const baseLayers = [ + osmLayer, + esriLayer, + googleLayer, + googleStreetLayer, +]; const baseLayerGroup = new OlLayerGroup({ - name: 'Base Layers', - layers: [ - osmLayer, - esriLayer - ], - type: 'baseGroup' + name: 'Base Layers', + layers: [ + osmLayer, + esriLayer + ], + type: 'baseGroup' }); const defaultPersentaseProyek = { - labels: [], - datasets: [ - { - label: 'Perencanaan', - data: [], - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - // stack: 'Stack-0' - yAxisID: 'y-axis-1', - }, - { - label: 'Aktual', - data: [], - fill: false, - backgroundColor: 'rgba(54, 162, 235, 0.5)', - borderColor: 'rgba(54, 162, 235, 0.5)', - // stack: 'Stack-1' - yAxisID: 'y-axis-1', - }, - ], + labels: [], + datasets: [ + { + label: 'Perencanaan', + data: [], + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + { + label: 'Aktual', + data: [], + fill: false, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 0.5)', + yAxisID: 'y-axis-1', + }, + ], }; const defaultCostProyek = { - labels: [], - datasets: [ - { - label: 'Perencanaan', - data: [], - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - // stack: 'Stack-0' - yAxisID: 'y-axis-1', - }, - { - label: 'Aktual', - data: [], - fill: false, - backgroundColor: 'rgba(54, 162, 235, 0.5)', - borderColor: 'rgba(54, 162, 235, 0.5)', - // stack: 'Stack-1' - yAxisID: 'y-axis-1', - }, - ], + labels: [], + datasets: [ + { + label: 'Perencanaan', + data: [], + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + { + label: 'Aktual', + data: [], + fill: false, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 0.5)', + yAxisID: 'y-axis-1', + }, + ], }; const defaultKurvaS = { - labels: [], - datasets: [ - { - label: 'Perencanaan', - data: [], - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - // stack: 'Stack-0' - yAxisID: 'y-axis-1', - }, - { - label: 'Aktual', - data: [], - fill: false, - backgroundColor: 'rgba(54, 162, 235, 0.5)', - borderColor: 'rgba(54, 162, 235, 0.5)', - // stack: 'Stack-1' - yAxisID: 'y-axis-1', - }, - ], + labels: [], + datasets: [ + { + label: 'Perencanaan', + data: [], + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + { + label: 'Aktual', + data: [], + fill: false, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 0.5)', + yAxisID: 'y-axis-1', + }, + ], }; const defaultStatusProyek = { - labels: ['Aman', 'Alert', 'Critical'], - datasets: [ - { - label: '# of Votes', - data: [], - backgroundColor: [ - // 'rgba(54, 162, 235, 0.2)', - 'rgba(28, 165, 23, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(255, 99, 132, 0.2)', - ], - borderColor: [ - // 'rgba(54, 162, 235, 1)', - 'rgba(28, 165, 23, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(255, 99, 132, 1)', - ], - borderWidth: 1, - }, - ], + labels: ['Aman', 'Alert', 'Critical'], + datasets: [ + { + label: '# of Votes', + data: [], + backgroundColor: [ + 'rgba(28, 165, 23, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(255, 99, 132, 0.2)', + ], + borderColor: [ + 'rgba(28, 165, 23, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(255, 99, 132, 1)', + ], + borderWidth: 1, + }, + ], }; const defaultStatusWaspang = { - labels: ['Hadir', 'Izin', 'Panic Button'], - datasets: [ - { - label: '# of Votes', - data: [], - backgroundColor: [ - 'rgba(77,232,0, 0.2)', - 'rgba(255,146,3, 0.2)', - 'rgba(164,7,120, 0.2)', - ], - borderColor: [ - 'rgba(77,232,0, 1)', - 'rgba(255,146,3, 1)', - 'rgba(164,7,120, 1)', - ], - borderWidth: 1, - }, - ], + labels: ['Hadir', 'Izin', 'Panic Button'], + datasets: [ + { + label: '# of Votes', + data: [], + backgroundColor: [ + 'rgba(77,232,0, 0.2)', + 'rgba(255,146,3, 0.2)', + 'rgba(164,7,120, 0.2)', + ], + borderColor: [ + 'rgba(77,232,0, 1)', + 'rgba(255,146,3, 1)', + 'rgba(164,7,120, 1)', + ], + borderWidth: 1, + }, + ], }; const barPersentaseOptions = { - tooltips: { - callbacks: { - label: function (tooltipItem, data) { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${tooltipItem.value}%`; - } - } - }, - scales: { - yAxes: [ - { - // type: 'linear', - // display: true, - // position: 'left', - id: 'y-axis-1', - ticks: { - max: 100, - min: 1, - callback: function (value, index, values) { - return `${value}%`; - } - }, - } - ], - }, - plugins: { - datalabels: { - display: true - } - } + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ''; + return `${label}: ${tooltipItem.value}%`; + } + } + }, + scales: { + yAxes: [ + { + id: 'y-axis-1', + ticks: { + max: 100, + min: 1, + callback: function (value, index, values) { + return `${value}%`; + } + }, + } + ], + }, + plugins: { + datalabels: { + display: true + } + } } const barCostOptions = { - scales: { - yAxes: [ - { - // type: 'bar', - // display: true, - // position: 'left', - id: 'y-axis-1', - ticks: { - // beginAtZero: true, - callback: function (value, index, values) { - return numeral(value).format('0,0'); - } - }, - } - ], - }, - tooltips: { - callbacks: { - label: function (tooltipItem, data) { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; - } - } - }, - plugins: { - datalabels: { - display: false - } - } + scales: { + yAxes: [ + { + id: 'y-axis-1', + ticks: { + callback: function (value, index, values) { + return numeral(value).format('0,0'); + } + }, + } + ], + }, + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ''; + return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; + } + } + }, + plugins: { + datalabels: { + display: false + } + } }; const optionsChartStatusProyek = { - responsive: true, - maintainAspectRatio: false, - // title: { - // display: true, - // text: 'Status Proyek' - // }, - legend: { - display: true, - position: 'bottom' - // labels: { - // fontColor: 'rgb(255, 99, 132)' - // } - } + responsive: true, + maintainAspectRatio: false, + legend: { + display: true, + position: 'bottom' + } } const optionsChartPersentaseProgress = { - // title: { - // display: true, - // text: 'Persentase Progress Proyek' - // }, - responsive: true, - maintainAspectRatio: false, - tooltips: { - callbacks: { - label: function (tooltipItem, data) { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${tooltipItem.value}%`; - } - } - }, - scales: { - yAxes: [ - { - type: 'linear', - display: true, - position: 'left', - id: 'y-axis-1', - - ticks: { - max: 100, - min: 1, - callback: function (value, index, values) { - return `${value}%`; - } - }, - } - ], - } + responsive: true, + maintainAspectRatio: false, + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ''; + return `${label}: ${tooltipItem.value}%`; + } + } + }, + scales: { + yAxes: [ + { + type: 'linear', + display: true, + position: 'left', + id: 'y-axis-1', + + ticks: { + max: 100, + min: 1, + callback: function (value, index, values) { + return `${value}%`; + } + }, + } + ], + } } const optionsChartCostProyek = { - // title: { - // display: true, - // text: 'Progress Cost Perencanaan dan Realisasi' - // }, - responsive: true, - maintainAspectRatio: false, - tooltips: { - callbacks: { - label: function (tooltipItem, data) { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; - } - } - }, - scales: { - yAxes: [ - { - type: 'linear', - display: true, - position: 'left', - id: 'y-axis-1', - ticks: { - callback: function (value, index, values) { - return numeral(value).format('0,0'); - } - }, - } - ], - }, + responsive: true, + maintainAspectRatio: false, + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ''; + return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; + } + } + }, + scales: { + yAxes: [ + { + type: 'linear', + display: true, + position: 'left', + id: 'y-axis-1', + ticks: { + callback: function (value, index, values) { + return numeral(value).format('0,0'); + } + }, + } + ], + }, } const optionsChartKurvaS = { - // title: { - // display: true, - // text: 'Progress Cost Perencanaan dan Realisasi' - // }, - responsive: true, - maintainAspectRatio: false, - aspectRatio: 1, - tooltips: { - callbacks: { - label: function (tooltipItem, data) { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; - } - } - }, - scales: { - yAxes: [ - { - type: 'linear', - display: true, - position: 'left', - id: 'y-axis-1', - ticks: { - beginAtZero: true, - max: 100, - callback: function (value, index, values) { - return numeral(value).format('0,0'); - } - }, - min: 0, - max: 100 - } - ], - }, - zoom: { - enabled: true, - mode: 'xy', - limits: { - y: {min: 0, max: 100} - } - }, - pan: { - enabled: true, - mode: 'xy', - limits: { - y: {min: 0, max: 100} - } - } + responsive: true, + maintainAspectRatio: false, + aspectRatio: 1, + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ''; + return `${label}: ${numeral(tooltipItem.value).format('0,0')}`; + } + } + }, + scales: { + yAxes: [ + { + type: 'linear', + display: true, + position: 'left', + id: 'y-axis-1', + ticks: { + beginAtZero: true, + max: 100, + callback: function (value, index, values) { + return numeral(value).format('0,0'); + } + }, + min: 0, + max: 100 + } + ], + }, + zoom: { + enabled: true, + mode: 'xy', + limits: { + y: {min: 0, max: 100} + } + }, + pan: { + enabled: true, + mode: 'xy', + limits: { + y: {min: 0, max: 100} + } + } } const columnPresensi = [ - { name: "Nama Waspang" }, - { name: "Tanggal Kehadiran" }, - { name: "Jam Masuk" }, - { name: "Jam Keluar" }, - { name: "Durasi Kerja " }, + { name: "Nama Waspang" }, + { name: "Tanggal Kehadiran" }, + { name: "Jam Masuk" }, + { name: "Jam Keluar" }, + { name: "Durasi Kerja " }, ] const columnAbssensi = [ - { name: "Nama Waspang" }, - { name: "Deskripsi" }, - { name: "Tanggal Absensi" }, + { name: "Nama Waspang" }, + { name: "Deskripsi" }, + { name: "Tanggal Absensi" }, ] const columnPanic = [ - { name: "Tanggal" }, - { name: "Nama Waspang" }, - { name: "Status Response" }, + { name: "Tanggal" }, + { name: "Nama Waspang" }, + { name: "Status Response" }, ] const columnStatusProyek = [ - { name: "Nama" }, - { name: "Biaya" }, - { name: "SDM" }, - { name: "PM" }, - { name: "Aktivitas Mulai" }, - { name: "Aktivitas Selesai" }, + { name: "Nama" }, + { name: "Biaya" }, + { name: "SDM" }, + { name: "PM" }, + { name: "Aktivitas Mulai" }, + { name: "Aktivitas Selesai" }, ] class SiopasMap extends Component { - constructor(props) { - super(props); - - this.state = { - openTablePengawas: false, - openTableStatusProyek: false, - allDataWaspang: null, - tabelTypeWaspang: "", - columnWaspang: [], - dataWaspangHadir: [], - dataWaspangAbsent: [], - dataWaspangPanic: [], - dataTableStatusProyek: [], - typeTableStatusProyek: "", - mapZoom: null, - mapCenter: null, - mapProjection: null, - drawerLayerVisible: false, - drawerSearchVisible: false, - wmsLayers: [], - totalLayerHasFeature: 0, - countGetFeature: 0, - countNotGetFeature: 0, - popupDataTemp: [], - activeListFeatureId: '', - evtCoordinate: null, - visibleLS: false, - visibleLSProp: 'hide', - popupRightVisible: false, - imagePopupVisible: false, - alert: false, - successAlert: false, - dangerAlert: false, - messageAlert: "", - editGeometryVisible: false, - layerNameDraw: '', - geomTypeDraw: '', - activeStateAddGeometry: false, - layer_attribute: [], - searchLabelData: [], - layerInfo: [], - // LayerTree Panel - checkedKeysSales: [], - checkedKeysCustomer: [], - checkedKeysOffice: [], - checkedKeysDemografi: [], - checkedKeysAnalisa: [], - checkedKeysEmployeeDivision: [], - checkedKeysProjectTree: [], - salesGroupTree: null, - employeeDivisionTree: null, - projectTree: null, - routingBarVisible: false, - isSearchingRoute: false, - isProcessing: false, - queryBuilderOutput: '', - queryBuilderType: '', - currentQbTree: '', - currentQbType: '', - routeType: '', - chosenProyekIds: [], - dataStatusProyek: null, - // dataStatusProyekAdw: [ - // { - // "id": 1, - // "proyek_name": "Pembangunan Jembatan Layang", - // "current_budget": 220000, - // "acwp": 100000, - // "bcwp": 99000, - // "rem_to_complete": 120000, - // "add_cost_to_complete": 10000, - // "estimated_at_completion": 230000, - // "cost_deviation": 10000, - // "potential": "overrun" - // }, - // { - // "id": 2, - // "proyek_name": "Pembuatan Aplikasi Survey Covid Varian Baru", - // "current_budget": 220000, - // "acwp": 100000, - // "bcwp": 99000, - // "rem_to_complete": 120000, - // "add_cost_to_complete": 10000, - // "estimated_at_completion": 230000, - // "cost_deviation": 10000, - // "potential": "overrun" - // } - // ], - dataStatusProyekAdw: null, - dataPersentaseProyek: null, - dataCostProyek: null, - dataCurvaS: null, - dataStatusWaspang: null, - waspangData: [], - planning: 0, - realisasi: 0, - status_project: { - good: 0, - warning: 0, - critical: 0 - }, - waspang_status: { - presensi: 0, - absensi: 0 - }, - panic_button: 0, - statusRight: true, - proggressBottom: true, - // Dashboard Carousel - activeIndex: 0, - activeIndex2: 0, - activeIndex3: 0, - animating: false, - animating2: false, - animating3: false, - laporanData: [], - presensiData: [], - kurvaSWindowMode: 'default' - }; - - this.layers = [ - osmLayer, - // layerGroupSekolah, - // layerGroupRS, - // layerGroupKantorDesa, - // layerGroupSarPras, - // tanah_kantor_instansi_pemerintah, - // point_sekolah, - // polygon_rumah_sakit - // paxel - // testLayer - ]; - - this.overlay = new Overlay({ - element: document.getElementById('popup'), - autoPan: true, - autoPanAnimation: { - duration: 250 - } - }); - - this.scaleLineControl = new ScaleLine({ - units: 'metric', - bar: true, - steps: 4, - text: true, - // minWidth: 140 - }) - - this.mousePositionControl = new MousePosition({ - coordinateFormat: createStringXY(4), - projection: 'EPSG:4326', - // className: 'custom-mouse-position', - target: document.getElementById('custom-mouse-position'), - }); - - this.olmap = new OlMap({ - view: new OlView({ - center: Indonesia, - zoom: zoom, - maxZoom: maxZoom, - projection: projection - }), - layers: this.layers, - overlays: [this.overlay], - controls: defaultControls().extend([this.scaleLineControl, this.mousePositionControl]) - }); - - this.changeBaseLayer = this.changeBaseLayer.bind(this); - this.openPopupRight = this.openPopupRight.bind(this); - this.closePopupRight = this.closePopupRight.bind(this); - - this.projectFeatures = []; - this.waspangFeatures = []; - this.chosenProyekTemp = []; - this.laporanFeatures = []; - this.presensiFeatures = []; - } - - componentDidMount = () => { - // this.loadMap(); - // setRequestMapHeader(); - // this.getLayerSearchLabel(); - // this.getLayerInfo(); - - this.olmap.on("singleclick", (evt) => { - this.mapOnClick(evt); - }); - this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection)); - - // // set default to check all project - // if (this.state.projectTree && this.state.projectTree.length > 0) { - // let checked = []; - // this.state.projectTree.map((item, index) => checked.push(item.key)); - // console.log('checked', checked); - // this.setState({checkedKeysProjectTree: checked}); - // } - - } - - componentDidUpdate = (prevProps, prevState) => { - - if (!this.state.popupRightVisible && this.state.popupDataTemp.length > 0) { - // this.showPopup(); - this.openPopupRight(); - // this.setActiveListFeature(); - // console.log('popupDataTemp > 0'); - // console.log('popupDataTemp ', this.state.popupDataTemp); - } - else if (this.state.popupRightVisible && this.state.popupDataTemp.length < 1) { - // this.closePopup(); - this.closePopupRight(); - // console.log('popupDataTemp < 1'); - // console.log('popupDataTemp ', this.state.popupDataTemp); - } - - if (prevState.checkedKeysProjectTree !== this.state.checkedKeysProjectTree) { - this.setLayer('checkedKeysProjectTree'); - } - - if (prevState.routingBarVisible !== this.state.routingBarVisible) { - if (!this.state.routingBarVisible) { - this.removeLayerByName('routeLayer'); - } - } - - if (this.state.chosenProyekIds !== prevState.chosenProyekIds) { - if (this.state.chosenProyekIds.length > 0) { - // this.getDataUserToProyek(); - this.getDataLaporanMap(); - this.getDataPresensiMap(); - this.getChartData(); - // this.getDailyInfo(); - } - else { - this.resetCharts() - } - } - } - - loading = () =>
Loading...
- - resetCharts = () => { - this.setState({ - dataStatusProyek: null, - dataPersentaseProyek: null, - dataCostProyek: null, - dataStatusWaspang: null, - }) - } - - resetLayerDashboard = () => { - this.removeLayerByName('projectLayer'); - this.removeLayerByName('waspangLayer'); - this.removeLayerByName('routeLayer'); - this.removeLayerByName('laporanLayer'); - this.removeLayerByName('presensiLayer'); - this.projectFeatures = []; - this.waspangFeatures = []; - this.laporanFeatures = []; - this.presensiFeatures = []; - this.closePopupRight(); - // this.resetCharts(); - } - - // ngerequest API buat ngepush ke this.waspangFeatures - // getDataUserToProyek = async () => { - // const { chosenProyekIds } = this.state; - // let payload = { - // "columns": [], - // "joins": [ - // { - // "name": "m_proyek", - // "column_join": "proyek_id", - // "column_results": [ - // "nama", - // // "biaya", - // // "color_progress", - // // "jumlah_pekerja", - // // "pic", - // "mulai_proyek", - // "akhir_proyek" - // ] - // }, - // { - // "name": "m_subproyek", - // "column_join": "subproyek_id", - // "column_results": [ - // "nama", - // // "biaya", - // // "color_progress", - // // "jumlah_pekerja", - // // "pic", - // "mulai_proyek", - // "akhir_proyek" - // ] - // }, - // { - // "name": "m_users", - // "column_join": "user_id", - // "column_results": [ - // "name", - // "username", - // "email", - // "phone_number", - // "gender" - // ] - // } - // ], - // "orders": { - // "columns": [ - // "id" - // ], - // "ascending": true - // }, - // "paging": { - // "start": 0, - // "length": 25 - // } - // } - - // if (chosenProyekIds.length > 0) { - // payload.columns.push({ - // "name": "proyek_id", - // "logic_operator": "in", - // "value": chosenProyekIds.join(), - // "operator": "AND" - // }); - // } - - // // if(parseInt(localStorage.getItem('role_id'))!==1){ - // // payload.columns.push( - // // { - // // "name": "id", - // // "logic_operator": "=", - // // "value": localStorage.getItem('proyek_id'), - // // "operator": "AND" - // // } - // // ) - // // } - - // const config = { - // method: 'POST', // *GET, POST, PUT, DELETE, etc. - // // mode: 'cors', // no-cors, *cors, same-origin - // // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached - // // credentials: 'same-origin', // include, *same-origin, omit - // headers: { - // 'Content-Type': 'application/json', - // 'Authorization': 'Bearer ' + localStorage.getItem('token') - // // 'Content-Type': 'application/x-www-form-urlencoded', - // }, - // // redirect: 'follow', // manual, *follow, error - // // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url - // body: JSON.stringify(payload) // body data type must match "Content-Type" header - // } - - // const result = await fetch(USERPROYEK_SEARCH, config).then(response => response.json()).then(res => res); - // if (result && result.code == 200) { - // // this.getWaspangFeatures(result.data); - // this.setState({ waspangData: result.data }, () => this.getWaspangFeatures()); - // } else { - // toast.error('Gagal Mengambil Data!!'); - // } - // } - - // ngerequest API buat ngepush data this.laporanFeatures - getDataLaporanMap = async () => { - let payload = { - project_id: [] - } - if (this.state.chosenProyekIds && this.state.chosenProyekIds.length > 0) { - payload.project_id = this.state.chosenProyekIds; - } - - const result = await axios - .post(DASHBOARD_REPORT_POINTS, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - console.log("cek laporan points", result) - let dataRes = result.data.data || [] - this.setState({ laporanData: dataRes }, () => this.getLaporanFeatures()) - } - } - - getLaporanFeatures = async () => { - const { laporanData, checkedKeysProjectTree } = this.state; - if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { - if (laporanData.length > 0) { - for (let i = 0; i < laporanData.length; i++) { - let item = laporanData[i]; - if (item) { - if (item.lat && item.lon) { - this.laporanFeatures.push({ - "type": "Feature", - "id": `report_activity.${item.id}`, - "properties": { - "id": item.id, - "user_id": item.user_id, - "nama_user": item.created_by, - "nama_proyek": item.proyek_name, - "jumlah_pekerjaan": item.jumlah_pekerjaan, - "pekerjaan_yang_dilaporkan": item.job_count_report, - "tanggal_lapor": item.report_date ? moment(item.report_date).format("YYYY-MM-DD HH:mm:ss") : '-', - // "mulai_tugas": item.mulai, - // "akhir_tugas": item.akhir, - "_type": "report_activity" - }, - "geometry": { - "type": "Point", - "coordinates": [ - parseFloat(item.lon), - parseFloat(item.lat) - ] - } - }) - } - } - } - - console.log('this.laporanFeatures', this.laporanFeatures); - - let layersToAdd = []; - let vectorSource = null; - let vectorLayer = null; - let laporan = null; - laporan = { - type: "FeatureCollection", - features: this.laporanFeatures - } - - // generate new layer - if (laporan && laporan.features.length > 0) { - vectorSource = new VectorSource({ - features: new GeoJSON().readFeatures(laporan, { - dataProjection: projection4326, // from - featureProjection: projection // to - }) - }) - - vectorLayer = new VectorLayer({ - name: 'laporanLayer', - source_type: 'geojson', - source: vectorSource, - style: LAPORAN_FEATURES_STYLE - }); - - layersToAdd.push(vectorLayer); - } - else { - // toast.warn('Data laporan pada peta tidak ditemukan di project ini'); - } - - if (layersToAdd.length > 0) { - for (let i = 0; i < layersToAdd.length; i++) { - console.log('layersToAdd', layersToAdd[i]); - this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - console.log('check addLayer'); - if (i === layersToAdd.length - 1) { - let extent = await this.getExtentLayerByName(layersToAdd[i]); - if (extent) { - this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - } - } - } - } - } - } - - else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { - this.resetLayerDashboard(); - this.resetCharts(); - } - } - - // ngerequest API buat ngepush data this.presensiFeatures - getDataPresensiMap = async () => { - // let payload = { - // project_id: [] - // } - // if (this.state.chosenProyekIds && this.state.chosenProyekIds.length > 0) { - // payload.project_id = this.state.chosenProyekIds; - // } - - // const result = await axios - // .post('', payload, HEADER) - // .then(res => res) - // .catch((error) => error.response); - - // if (result && result.data && result.data.code == 200) { - // console.log("cek presensi points", result) - // let dataRes = result.data.data || [] - // this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures()) - // } - - let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); - let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); - - const payload = { - "paging": {"start": 0, "length": -1}, - "columns": [ - // {"name": "name", "logic_operator": "like", "value": search, "table_name": "m_users"}, - {"name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd}, - ], - "joins": [{ - "name":"m_users", - "column_join":"user_id", - "column_results":[ - "name", - "ktp_number" - ] - }], - "orders": {"columns": ["id"], "ascending": false} - } - - const result = await axios - .post(PRESENCE_SEARCH, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - // console.log(result) - - if(result && result.data && result.data.code == 200) { - let dataRes = result.data.data || [] - this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures()) - }else{ - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - - getPresensiFeatures = async () => { - const { presensiData, checkedKeysProjectTree } = this.state; - console.log('getPresensiFeature presensiData', presensiData); - if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { - if (presensiData.length > 0) { - for (let i = 0; i < presensiData.length; i++) { - let item = presensiData[i]; - if (item) { - if (item.clock_in_lat && item.clock_in_lng) { - this.presensiFeatures.push({ - "type": "Feature", - "id": `m_presensi.${item.id}`, - "properties": { - "id": item.id, - "user_id": item.user_id, - "name": item.created_by, // mandatory to fill in popup routing - "clock_in": item.clock_in ? moment(item.clock_in).format('D-M-YYYY HH:mm:ss') : '-', - "clock_out": item.clock_out ? moment(item.clock_out).format('D-M-YYYY HH:mm:ss') : '-', - "clock_in_location": item.clock_in_loc !== '' ? item.clock_in_loc : '-', - "clock_out_location": item.clock_out_loc !== '' ? item.clock_out_loc : '-', - // "nama_proyek": item.proyek_name, - // "mulai_tugas": item.mulai, - // "akhir_tugas": item.akhir, - "_type": "presensi" - }, - "geometry": { - "type": "Point", - "coordinates": [ - parseFloat(item.clock_in_lng), - parseFloat(item.clock_in_lat) - ] - } - }) - } - } - } - - console.log('this.presensiFeatures', this.presensiFeatures); - - let layersToAdd = []; - let vectorSource = null; - let vectorLayer = null; - let presensi = null; - presensi = { - type: "FeatureCollection", - features: this.presensiFeatures - } - - // generate new layer - if (presensi && presensi.features.length > 0) { - vectorSource = new VectorSource({ - features: new GeoJSON().readFeatures(presensi, { - dataProjection: projection4326, // from - featureProjection: projection // to - }) - }) - - vectorLayer = new VectorLayer({ - name: 'presensiLayer', - source_type: 'geojson', - source: vectorSource, - style: PRESENSI_FEATURES_STYLE - }); - - layersToAdd.push(vectorLayer); - } - else { - // toast.warn('Data laporan pada peta tidak ditemukan di project ini'); - } - - if (layersToAdd.length > 0) { - for (let i = 0; i < layersToAdd.length; i++) { - console.log('layersToAdd', layersToAdd[i]); - this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - console.log('check addLayer'); - if (i === layersToAdd.length - 1) { - let extent = await this.getExtentLayerByName(layersToAdd[i]); - if (extent) { - this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - } - } - } - } - } - } - - else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { - this.resetLayerDashboard(); - this.resetCharts(); - } - } - - - // ngerequest API buat ngepush data chart - getChartData = async () => { - - const payload = { - "project_id": [], - "period": "week" - } - - if (this.state.chosenProyekIds.length > 0) { - console.log('chosenProyekIds', this.state.chosenProyekIds); - payload.project_id = this.state.chosenProyekIds; - } - - // get cost proyek - const result = await axios - .post(DASHBOARD_KURVA_S, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - console.log("cek dashboard chart", result) - let dataRes = result.data.data || [] - // const labelCostPlaning = dataRes ? dataRes.map(res => res.total) : [] // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] - // const valueCostPlaning = [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // const valueCostRealisasi = [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - - // const costProyek = { - // labels: labelCostPlaning, - // datasets: [ - // { - // label: 'Perencanaan', - // data: valueCostPlaning, - // fill: false, - // backgroundColor: 'rgba(255, 99, 132, 0.5)', - // borderColor: 'rgba(255, 99, 132, 0.5)', - // yAxisID: 'y-axis-1', - // // stack: 'Stack-0' - // }, - // { - // label: 'Aktual', - // data: valueCostRealisasi, - // fill: false, - // backgroundColor: 'rgba(54, 162, 235, 0.5)', - // borderColor: 'rgba(54, 162, 235, 0.5)', - // yAxisID: 'y-axis-1', - // // stack: 'Stack-1' - // }, - // ], - // }; - this.setState({ dataCostProyek: dataRes }); - - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - - // get persentase progress proyek - const result2 = await axios - .post(DASHBOARD_KURVA_S, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - console.log('result kurva s', result2); - - if (result2 && result2.data && result2.data.code == 200) { - let dataRes2 = result2.data.data || [] - - // const labelPersentaseProyek = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] - // const valuePersentaseProyekPlan = [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // const valuePersentaseProyekActual = [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // const persentaseProyek = { - // labels: labelPersentaseProyek, - // datasets: [ - // { - // label: 'Perencanaan', - // data: valuePersentaseProyekPlan, - // fill: false, - // backgroundColor: 'rgba(255, 99, 132, 0.5)', - // borderColor: 'rgba(255, 99, 132, 0.5)', - // // stack: 'Stack 0' - // yAxisID: 'y-axis-1', - // }, - // { - // label: 'Aktual', - // data: valuePersentaseProyekActual, - // fill: false, - // backgroundColor: 'rgba(54, 162, 235, 0.5)', - // borderColor: 'rgba(54, 162, 235, 0.5)', - // // stack: 'Stack 1' - // yAxisID: 'y-axis-1', - // }, - // ], - // }; - // console.log("dataRes2", dataRes2); - // this.setState({ dataPersentaseProyek: dataRes2 }); - this.setState({dataCurvaS: dataRes2}); - console.log('dataRes2-----------', dataRes2); - - // set status proyek for adw - if ((APP_MODE === 'ADW')) { - let budgetControl = []; - if (dataRes2.length > 0) { - dataRes2.map((item, index) => { - let proyek_name = item.proyek_name; - item.data.budget_control.proyek_name = proyek_name; // adding key proyek_name in budget_control object - budgetControl.push(item.data.budget_control); - }); - } - this.setState({dataStatusProyekAdw: budgetControl}); - } - } - else { - NotificationManager.error('Gagal Mengambil Data Persentase Progress Proyek!!', 'Failed'); - } - - // const valueStatusProyek = [70, 20, 10] - // const statusProyek = { - // labels: ['Aman', 'Alert', 'Critical'], - // datasets: [ - // { - // label: '# of Votes', - // data: valueStatusProyek, - // backgroundColor: [ - // // 'rgba(54, 162, 235, 0.2)', - // 'rgba(28, 165, 23, 0.2)', - // 'rgba(255, 206, 86, 0.2)', - // 'rgba(255, 99, 132, 0.2)', - // ], - // borderColor: [ - // // 'rgba(54, 162, 235, 1)', - // 'rgba(28, 165, 23, 1)', - // 'rgba(255, 206, 86, 1)', - // 'rgba(255, 99, 132, 1)', - // ], - // borderWidth: 1, - // }, - // ], - // }; - - - // const statusProyek = [ - // { - // "id": "1", - // "proyek_name": "Pembuatan Aplikasi Survey Covid Varian Baru", - // "total_task": 80, - // "task_on_progress": 60, - // "day_left": 7, - // "percentage": 75 - // }, - // { - // "id": "2", - // "proyek_name": "Pembuatan Aplikasi Survey Covid Varian Baru", - // "total_task": 70, - // "task_on_progress": 70, - // "day_left": 0, - // "percentage": 100 - // }, - // { - // "id": "3", - // "proyek_name": "Pembuatan Aplikasi Survey Covid Varian Baru", - // "total_task": 70, - // "task_on_progress": 70, - // "day_left": 0, - // "percentage": 100 - // } - // ]; - - // get cost proyek - const result3 = await axios - .post(DASHBOARD_STATUS_PROYEK, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result3 && result3.data && result3.data.code == 200) { - let dataRes3 = result3.data.data || []; - console.log(" dataRes3 ", dataRes3) - this.setState({ dataStatusProyek: dataRes3 }); - } - else { - NotificationManager.error('Gagal Mengambil Data Status Proyek!!', 'Failed'); - } - - if ((APP_MODE === 'ADW')) { - // request to API get status proyek for ADW and save to dataStatusProyekAdw state - // cek di result2 - } - } - - 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" } - ], - "paging": { "start": 0, "length": -1 } - } - - const config = { - method: 'POST', // *GET, POST, PUT, DELETE, etc. - // mode: 'cors', // no-cors, *cors, same-origin - // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached - // credentials: 'same-origin', // include, *same-origin, omit - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + localStorage.getItem('token') - // 'Content-Type': 'application/x-www-form-urlencoded', - }, - // redirect: 'follow', // manual, *follow, error - // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url - 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({ - // planning: dataSum.planning, - // realisasi: dataSum.realisasi, - // status_project: dataSum.status_project, - // waspang_status: dataSum.waspang_status, - // panic_button: dataSum.panic_button, - // isReady: true - // }); - - const statusWaspang = { - labels: ['Hadir', 'Izin', 'Panic Button'], - datasets: [ - { - label: '# of Votes', - data: [dataSum.waspang_status.presensi, dataSum.waspang_status.absensi, dataSum.panic_button], - backgroundColor: [ - 'rgba(77,232,0, 0.2)', - 'rgba(255,146,3, 0.2)', - 'rgba(164,7,120, 0.2)', - ], - borderColor: [ - 'rgba(77,232,0, 1)', - 'rgba(255,146,3, 1)', - 'rgba(164,7,120, 1)', - ], - borderWidth: 1, - }, - ], - }; - this.setState({ dataStatusWaspang: statusWaspang, allDataWaspang: result.data }); - } - } - catch (e) { - toast.error('Gagal mengambil data'); - } - } - - 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 - }, () => console.log('getLayerSearchLabel searchLabelData', this.state.searchLabelData)); - } - } else { - - } - } catch (err) { - console.log(err); - // alert(err.message.toString()); - // toast.warn(err.message.toString()); - } - } - - - getLayerInfo = async () => { - let layerInfo = []; - const param = { - method: 'GET', - header: JSON.stringify({ 'Content-Type': 'application/json' }), - } - - try { - const result = await fetch(API_GET_CHART_KATEGORI, param).then(response => response.json()).then(res => res) - // console.log(result) - - if (result.data) { - if (result.data.length > 0) { - for (let i = 0; i < result.data.length; i++) { - let layer_name = result.data[i].layer_name; - let layer_title = result.data[i].layer_title; - let layer_geom_type = result.data[i].layer_geom_type; - let total_features = result.data[i].total_features; - - let SLD_URL = `${layerStyleUrl + layer_name}`;; - let reqColor = await getLayerColor(SLD_URL); - let color = ''; - if (reqColor.success) { - color = reqColor.result; - } - layerInfo.push({ - layer_name: layer_name, - layer_title: layer_title, - layer_geom_type: layer_geom_type, - layer_color: color, - total_features: total_features - }); - } - this.setState({ layerInfo: layerInfo }, () => console.log('layerInfo', this.state.layerInfo)); - } - // this.setState({alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false}) - } else { - // this.setState({chartKategori: pie}); - // this.setState({alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true}) - } - } catch (err) { - console.log(err); - // alert(err.message.toString()); - // toast.warn(err.message.toString()); - // this.setState({alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true}) - } - } - - setDefaultMap = () => { - this.olmap.getView().animate({ - zoom: zoom, - maxZoom: maxZoom, - center: Indonesia - }); - } - - changeBaseLayer(item) { - console.log('change baselayer', item); - // console.log(this.olmap.getLayers()); - if (this.olmap.getLayers().values_.length == 0) { - // check if layers empty, so just insert base layer to position 0 - this.olmap.getLayers().insertAt(0, item); - } - // check if layer exist - else if (this.olmap.getLayers().values_.length > 0) { - // check the position 0, if base layer then replace to new - if (this.olmap.getLayers().array_[0].get('type') === 'base') { - this.olmap.getLayers().removeAt(0); - this.olmap.getLayers().insertAt(0, item); - } - // else just insert base layer at position 0 - else { - this.olmap.getLayers().insertAt(0, item); - } - } - } - - getHomeView = () => { - // this should request to siopas map api to get current map - // this.olmap.getView().fit(new transformExtent(Bali_bbox, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - const { mapZoom, mapCenter } = this.state; - if (mapZoom && mapCenter !== null) { - this.olmap.getView().animate({ - zoom: mapZoom, - center: mapCenter - }); - } - else { - // alert("Map Zoom and Map Center are not set yet"); - this.olmap.getView().animate({ - zoom: zoom, - maxZoom: maxZoom, - center: Indonesia - }); - } - } - - mapOnClick = (evt) => { - evt.preventDefault(); - let isDrawing = false; - let removedFeature = []; - let isRemoving = false; - let transformedCoords4326 = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); - // console.log('transformedCoords4326', transformedCoords4326); - - let mapInteractions = []; - this.olmap.getInteractions().forEach((interaction) => { - // console.log('interaction', interaction); - if (interaction instanceof Draw) { - console.log('drawing is active!!'); - isDrawing = true; - } - // if (interaction instanceof Select) { - // console.log('select interaction is active'); - // isRemoving = true; - // } - - if (interaction instanceof Modify) { - console.log('modify feature is active'); - isDrawing = true; - } - }); - - if (isDrawing) { - return; - } - - let viewResolution = this.olmap.getView().getResolution(); - let viewProjection = this.olmap.getView().getProjection(); - let url = ''; - let promises = []; - let featureGet = []; - - let hitGeojson = null; - - this.olmap.getLayers().forEach((layer, i) => { - console.log('layer', layer.get('name')); - if (layer.get('type') !== 'base') { - 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)); - } - } - }); - } - else { - if (layer.getVisible()) { - if (layer.get('name') !== 'ChosenLayer') { - if (layer.get('source_type') && layer.get('source_type') === 'geojson') { - let layerSource = layer.getSource(); - hitGeojson = this.olmap.getFeaturesAtPixel(evt.pixel); - console.log('hitGeojson', hitGeojson); - } - else if (layer.get('source_type') === "wms") { - url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, { 'INFO_FORMAT': 'application/json' }); - if (url) { - promises.push(axios.get(url)); - } - } - } - } - } - } - }); - - - if (hitGeojson && hitGeojson.length > 0) { - for (let i = 0; i < hitGeojson.length; i++) { - let feature = hitGeojson[i]; - - let feat = { - "type": "Feature", - "id": "", - "geometry": { - "type": "", - "coordinates": [] - }, - "geometry_name": "the_geom", - "properties": {} - } - - feat.id = feature.id_; - feat.geometry.type = feature.getGeometry().getType(); - // feat.geometry.coordinates = transform(feature.getGeometry().getCoordinates(), 'EPSG:3857', 'EPSG:4326'); - feat.geometry.coordinates = feature.getGeometry().getCoordinates(); - feat.properties = feature.getProperties(); - delete feat.properties["geometry"]; - - console.log('feat', feat); - featureGet.push(feat); - } - - console.log('featureGet geojson', featureGet); - } - - - // kalo dari WMS - if (promises.length > 0) { - axios.all(promises).then((results) => { - results.forEach((response) => { - console.log('mapOnClick response promises', response); - if (response.data !== undefined) { - if (response.data.features.length > 0) { - for (let i = 0; i < response.data.features.length; i++) { - featureGet.push(response.data.features[i]); - } - } - } - }) - - - console.log('featureGet WMS', featureGet); - - // adding it here because it's trapped on axios callback - this.setState({ - popupDataTemp: featureGet, - evtCoordinate: evt.coordinate - }, () => this.setActiveListFeature()); - }); - } - - if (hitGeojson && promises) { - this.setState({ - popupDataTemp: featureGet, - evtCoordinate: evt.coordinate - }, () => this.setActiveListFeature()); - } - } - - removeChosenLayer = () => { - this.olmap.getLayers().forEach((layer, i) => { - if (layer) { - if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') { - layer.getSource().clear(); - this.olmap.removeLayer(layer); - } - } - }); - } - - openPopupRight() { - // console.log('opening popup right...') - this.setState({ popupRightVisible: true }, () => this.setActiveListFeature()); - } - - closePopupRight() { - // console.log('closing popup right...') - this.setState({ popupRightVisible: false, popupDataTemp: [] }, () => this.setActiveListFeature()); - this.removeChosenLayer(); // selected features - // this.removeLayerByName('routeLayer'); - this.setState({ editGeometryVisible: false, routingBarVisible: false }); // disable editing when no ChosenLayer on Map - } - - /*toggleImagePopup() { - this.setState({imagePopupVisible: !this.state.imagePopupVisible}); - }*/ - - setPopupDataTemp = (feature) => { - // console.log('setPopupDataTemp', feature); - this.setState({ popupDataTemp: [feature] }, () => this.setActiveListFeature()); - } - - reloadPopupData = () => { - const { evtCoordinate } = this.state; - } - - setActiveListFeature = () => { - // console.log('this.state.popupDataTemp', this.state.popupDataTemp); - if (this.state.popupRightVisible) { - if (this.state.popupDataTemp.length === 1) { - this.setState({ activeListFeatureId: this.state.popupDataTemp[0].id }, () => { - // console.log('activeListFeatureId', this.state.activeListFeatureId); - let layerName = this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''; - this.getLayerAttribute(layerName); - }) - } - else { - this.setState({ activeListFeatureId: '' }, () => { - // console.log('activeListFeatureId', this.state.activeListFeatureId); - }) - } - } - else { - this.setState({ activeListFeatureId: '' }, () => { - // console.log('activeListFeatureId', this.state.activeListFeatureId); - }) - } - } - - // getGeomType = async (layerName) => { - - // let res = await getGeomType(layerName); - // console.log('getGeomType', res); - // return res; - // } - - loadMap = async () => { - let response = await axios.get(API_LOAD_MAP).then(res => res).catch(error => error); - console.log('loadMap', response); - // this.getHomeView(response); - // this.olmap.getView().fit(new transformExtent(Bali_bbox, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - if (response.data !== undefined) { - if (response.data.length > 0) { - let dataMap = response.data[0]; - let layersToRemove = []; - - // if the API response about zoom is null - if (dataMap.zoom == null) { - this.setDefaultMap(); - } - // if the API response about center_x and center_y is null - else if (dataMap.center_x == null && dataMap.center_y == null) { - this.setDefaultMap(); - } - // otherwise, add layer to map from map_layer response - else { - // set the zoom and center - this.setState({ mapZoom: dataMap.zoom, mapCenter: [dataMap.center_x, dataMap.center_y] }); - this.olmap.getView().animate({ - zoom: dataMap.zoom, - center: [dataMap.center_x, dataMap.center_y] - }); - - // if map_layers from API is exist - if (dataMap.map_layers.length > 0) { - // first, removing all layers from the current map - this.olmap.getLayers().forEach((layer, i) => { - layersToRemove.push(layer); - }); - if (layersToRemove.length > 0) { - for (let i = 0; i < layersToRemove.length; i++) { - this.olmap.removeLayer(layersToRemove[i]); - } - } - - // add map_layers from api to view - if (this.olmap.getLayers().array_.length < 1) { - // console.log('layer empty', response.data); - let map_layers = dataMap.map_layers; - if (map_layers !== undefined) { - // console.log('ada map_layers', map_layers); - if (map_layers.length > 0) { - for (let i = 0; i < map_layers.length; i++) { - let newLayer = null; - - // if layer_type is not base - if (map_layers[i].layer_type !== 'base') { - newLayer = new ImageLayer({ - name: map_layers[i].layer_name, - title: map_layers[i].layer_title, - source: new OlSourceImageWMS(map_layers[i].layer_source), - type: map_layers[i].layer_type, - geom_type: map_layers[i].layer_geom_type, - visible: map_layers[i].layer_visible, - // zIndex: map_layers[i].layer_position - }) - } - // if layer_type is base - else { - // if base is OSM (OlSourceOsm); - if (map_layers[i].layer_name == 'OSM') { - newLayer = new OlLayerTile({ - name: map_layers[i].layer_name, - title: map_layers[i].layer_title, - source: new OlSourceOsm(), - type: map_layers[i].layer_type, - geom_type: map_layers[i].layer_geom_type, - visible: map_layers[i].layer_visible, - // zIndex: map_layers[i].layer_position - }) - } - // if base is other than OSM - else { - newLayer = new OlLayerTile({ - name: map_layers[i].layer_name, - title: map_layers[i].layer_title, - source: new XYZSource(map_layers[i].layer_source), - type: map_layers[i].layer_type, - geom_type: map_layers[i].layer_geom_type, - visible: map_layers[i].layer_visible, - // zIndex: map_layers[i].layer_position - }) - } - } - - // console.log('adding new layer', newLayer); - - // add the map_layers from API - this.olmap.addLayer(newLayer); - } - } - } - } - } - } - } - } - } - - saveMap = () => { - /* What map update data that are needed? - - title of map (o) - - zoom - - projection - - center_x - - center_y - - base_layer_id - - mapLayers[] - - layer_name - - layer_type (base / layer) - - layer_geom_type - - layer_source - - layer_visible - - layer_position - - Example of layer_source: - { - url: appConfig.geoserver_host+'wms', - params: { - 'LAYERS': appConfig.workspace_name+':tanah_sekolah', - 'TILED': true, - 'SLD': layerStyleUrl+'tanah_sekolah' - }, - serverType: 'geoserver', - transition: 0, - crossOrigin: 'anonymous' - } - */ - let confirmation = window.confirm('Are you sure you want to save this map?'); - // let mapId = localStorage.getItem('u_group') === "kominfo" ? 2 : 1; - let mapId = MAP_ID; // get from m_group - let mapTitle = localStorage.getItem('u_group') + "_map"; // get from m_group - let mapZoom = this.olmap.getView().getZoom(); - let mapProjection = this.olmap.getView().getProjection().code_; - let mapCenter = this.olmap.getView().getCenter(); - let center_x = mapCenter[0]; // longitude - let center_y = mapCenter[1]; // latitude - let mapLayers = []; - let requestPayload = null; - let layerType = ''; - let layerGeomType = ''; - let count = 0; - - if (confirmation) { - this.olmap.getLayers().forEach(async (layer, i) => { - - // console.log('layer after confirmation i', i, layer); - layerType = layer.get('type') !== undefined ? layer.get('type') : 'layer'; - - if (layer.get('name') !== "DrawingLayer" && layer.get('name') !== "ChosenLayer") { - if (layer.get('type') === "base") { - if (layer.get('name') === "OSM") { - // if the baselayer is OSM, use the OSM function from openlayers - mapLayers.push({ - idx: i, - layer_name: layer.get('name'), - layer_type: layerType, - layer_geom_type: 'base', - layer_source: "OlSourceOsm", // i don't know why null in database - layer_visible: layer.getVisible(), - layer_position: i - }); - } - else { - // or if the baselayer is other than OSM (such as ESRI, Google, etc), use the XYZSource - mapLayers.push({ - idx: i, - layer_name: layer.get('name'), - layer_type: layerType, - layer_geom_type: 'base', - layer_source: { - // url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', - url: layer.getSource().urls[0], - projection: mapProjection, - maxZoom: 18 - }, - layer_visible: layer.getVisible(), - layer_position: i - }); - } - } - else { - // if the layer is not base layer - // layerGeomType = layer.get('geom_type') !== undefined ? layer.get('geom_type') : await this.getGeomType(layer.get('name')); - let reqGeomType = await getGeomType(layer.get('name')); - if (reqGeomType.success) { - layerGeomType = reqGeomType.result; - - mapLayers.push({ - idx: i, - layer_name: layer.get('name'), - layer_type: layerType, - layer_geom_type: layerGeomType, - layer_source: { - url: appConfig.geoserver_host + 'wms', - // url: appConfig.geoserver_host+'gwc/service/wms?SERVICE=WMS', - params: { - 'LAYERS': appConfig.workspace_name + ':' + layer.get('name'), - 'TILED': true, - 'SLD': layerStyleUrl + layer.get('name') - }, - serverType: 'geoserver', - transition: 0, - crossOrigin: 'anonymous' - }, - layer_visible: layer.getVisible(), - layer_position: i - }); - } - } - } - count = count + 1; - - // the last loop, so send to updateMap API - // console.log('count', count); - // console.log('this.olmap.getLayers().array_.length',this.olmap.getLayers().array_.length); - // console.log('if count==this.olmap.getLayers().array_length', count == this.olmap.getLayers().array_.length); - if (count == this.olmap.getLayers().array_.length) { - console.log('terakhirrrrrr'); - requestPayload = { - 'map_id': mapId, - 'map_title': mapTitle, - 'map_zoom': mapZoom, - 'map_projection': mapProjection, - 'center_x': center_x, - 'center_y': center_y, - 'map_layers': mapLayers - }; - console.log('requestPayload', requestPayload); - this.saveMapToApi(requestPayload); - } - }); - } - } - - saveMapToApi = async (requestPayload) => { - - const param = { - method: 'POST', - header: JSON.stringify({ 'Content-Type': 'application/json' }), - body: JSON.stringify(requestPayload) - } - - try { - const result = await fetch(API_UPDATE_MAP, param).then(response => response.json()).then(res => res) - if (result.data) { - console.log('after save', result); - // this.(); - this.setState({ alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false }) - } else { - this.setState({ alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true }) - } - } catch (err) { - this.setState({ alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true }) - } - } - - toggleEditGeometry = (selectedPopupData) => { - let { editGeometryVisible } = this.state; - if (!editGeometryVisible) { - this.setState({ - editGeometryVisible: true, - layerNameDraw: selectedPopupData.id, - geomTypeDraw: selectedPopupData.geometry.type - }); - - } - else { - this.cancelDraw(); - } - } - - cancelDraw = () => { - this.setState({ - editGeometryVisible: false, - layerNameDraw: '', - geomTypeDraw: '' - }); - } - - toggleActiveStateAddGeometry = () => { - this.setState({ activeStateAddGeometry: !this.state.activeStateAddGeometry }); - } - - printMap = () => { - this.olmap.once('rendercomplete', () => { - domtoimage - .toJpeg(this.olmap.getViewport()) - .then((dataUrl) => { - console.log('dataUrl', dataUrl); - let link = document.getElementById('image-download'); - link.href = dataUrl; - link.click(); - toast.success("Success Print Map!") - }) - .catch(e => toast.error(e.toString())); - }); - - } - - signOut = (e) => { - e.preventDefault() - // localStorage.removeItem("u_group"); - // localStorage.removeItem("fullname"); - window.localStorage.clear(); - // emptyConstants(); - this.props.history.push('/login'); - } - - getLayerAttribute = async (layerName) => { - const res = await getLayerAttribute(layerName); - console.log('getLayerAttribute', res); - if (res.success) { - // console.log(res.result); - if (res.result.data) { - if (res.result.data.length > 0) { - this.setState({ layer_attribute: res.result.data }, () => { - console.log(this.state.layer_attribute); - }); - } - } - } - else { - // alert(res.result); - toast.warn(res.result); - } - } - - // when checking chekbox on Layer Tree Panel - onCheckOpt = (state, checkedKeys) => { - this.setState({ [state]: checkedKeys }); - } - - setLayer = async (state) => { - console.log('setLayer', state); - - await this.setState({ isProcessing: true }); - - this.closePopupRight(); - - const { checkedKeysSales, checkedKeysCustomer, checkedKeysOffice, checkedKeysDemografi, checkedKeysAnalisa, checkedKeysEmployeeDivision, - salesGroupTree, employeeDivisionTree, queryBuilderOutput, queryBuilderType, checkedKeysProjectTree, projectTree } = this.state; - let layersToAdd = []; - let newLayer = null; - let vectorSource = null; - let vectorLayer = null; - - if (state === 'checkedKeysProjectTree') { - console.log('checkedKeysProjectTree', checkedKeysProjectTree); - - // first remove projectLayer and its features - - // this.removeLayerByName('routeLayer'); - // this.removeLayerByName('projectLayer'); - // this.removeLayerByName('waspangLayer'); - // this.projectFeatures = []; - // this.waspangFeatures = []; - this.resetLayerDashboard(); - - this.getChosenProyekRealisasi(); - - if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { - - /* - Logic: - - looping all tree - - there are 3 variables - 1. features (Array) -> untuk nampung features yg ada di laporan planning - 2. projectTree (Array) - 3. checkedKeysProjectTree (Array) -> projectTree yg tercentang - - Jadi looping all nesting yg ada di projectTree (ambil object children) - Terus cek setiap levelnya dia ada di checkedKeysProjectTree gak? - Jika ada, cek apakah di object tersebut mengandung key namanya "plannings" tidak? - Jika iya, maka cek di dalamnya ada laporan_planning tidak? - Jika iya, maka push ke features[] dengan format: - { - "type": "Feature", - "properties": {}, // isian dari objectnya - "geometry": { - "type": "Point", - "coordinates": [ - 107.90771484375, // object.lon - -6.795535025719518 // object.lat - ] - } - } - */ - - this.getChildrenTree(projectTree[0].children); - // this.getWaspangFeatures(); - - console.log('projectFeatures', this.projectFeatures); - // console.log('waspangFeatures', this.waspangFeatures); - - let project = null; - project = { - type: "FeatureCollection", - features: this.projectFeatures - } - - // console.log('project', project); - - - // generate new layer - if (project && project.features.length > 0) { - vectorSource = new VectorSource({ - features: new GeoJSON().readFeatures(project, { - dataProjection: projection4326, // from - featureProjection: projection // to - }) - }) - - vectorLayer = new VectorLayer({ - name: 'projectLayer', - source_type: 'geojson', - source: vectorSource, - style: PROJECT_FEATURES_STYLE - }); - - layersToAdd.push(vectorLayer); - } - else { - // toast.warn('Data realisasi tidak ditemukan di project ini'); - } - - } - else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { - this.removeLayerByName('projectLayer'); - this.removeLayerByName('waspangLayer'); - this.removeLayerByName('routeLayer'); - this.projectFeatures = []; - this.waspangFeatures = []; - this.closePopupRight(); - this.resetCharts() - } - } - - if (layersToAdd.length > 0) { - for (let i = 0; i < layersToAdd.length; i++) { - - this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - - console.log('check addLayer'); - if (i === layersToAdd.length - 1) { - let extent = await this.getExtentLayerByName(layersToAdd[i]); - if (extent) { - this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - } - } - } - } - await this.setState({ isProcessing: false }); - } - - // find the lat lon inside laporan_plannings that the planning has been checked on projectTree - getChildrenTree = (data) => { - data.map((item, index) => { - if (item.children && item.children.length > 0) { - this.getChildrenTree(item.children); - } - else if (item.laporan_plannings && item.laporan_plannings.length > 0) { - if (this.state.checkedKeysProjectTree.includes(item.key)) { - for (let i = 0; i < item.laporan_plannings.length; i++) { - console.log('got features!!!!!'); - this.projectFeatures.push({ - "type": "Feature", - "id": `realisasi.${item.laporan_plannings[i].id}`, - "properties": { ...item.laporan_plannings[i] }, - "geometry": { - "type": "Point", - "coordinates": [ - item.laporan_plannings[i].lon, - item.laporan_plannings[i].lat - ] - } - }) - } - } - } - }); - } - - // getWaspangFeatures = async () => { - // // console.log('getWaspangFeatures', data); - // const { waspangData, checkedKeysProjectTree } = this.state; - // if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { - // if (waspangData.length > 0) { - // for (let i = 0; i < waspangData.length; i++) { - // let item = waspangData[i]; - // if (item.last_waypoint) { - // this.waspangFeatures.push({ - // "type": "Feature", - // "id": `m_waspang.${item.id}`, - // "properties": { - // "id": item.id, - // "user_id": item.user_id, - // "nama_user": item.join.m_users_name, - // "nama_proyek": item.join.m_proyek_nama, - // "mulai_tugas": item.mulai, - // "akhir_tugas": item.akhir, - // "_type": "waspang" - // }, - // "geometry": { - // "type": "Point", - // "coordinates": [ - // item.last_waypoint.lon, - // item.last_waypoint.lat - // ] - // } - // }) - // } - // } - - // console.log('this.waspangFeatures', this.waspangFeatures); - - // let layersToAdd = []; - // let vectorSource = null; - // let vectorLayer = null; - // let waspang = null; - // waspang = { - // type: "FeatureCollection", - // features: this.waspangFeatures - // } - - // // generate new layer - // if (waspang && waspang.features.length > 0) { - // vectorSource = new VectorSource({ - // features: new GeoJSON().readFeatures(waspang, { - // dataProjection: projection4326, // from - // featureProjection: projection // to - // }) - // }) - - // vectorLayer = new VectorLayer({ - // name: 'waspangLayer', - // source_type: 'geojson', - // source: vectorSource, - // style: WASPANG_FEATURES_STYLE - // }); - - // layersToAdd.push(vectorLayer); - // } - // else { - // toast.warn('Data human resource tidak ditemukan di project ini'); - // } - - // if (layersToAdd.length > 0) { - // for (let i = 0; i < layersToAdd.length; i++) { - - // this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map - - // console.log('check addLayer'); - // if (i === layersToAdd.length - 1) { - // let extent = await this.getExtentLayerByName(layersToAdd[i]); - // if (extent) { - // this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - // } - // } - // } - // } - - // } - // } - - // else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { - // this.removeLayerByName('projectLayer'); - // this.removeLayerByName('waspangLayer'); - // this.removeLayerByName('routeLayer'); - // this.projectFeatures = []; - // this.waspangFeatures = []; - // this.closePopupRight(); - // this.resetCharts(); - // } - - // // this.waspangFeatures = [{ - // // "type": "Feature", - // // "id": `m_waspang.1`, - // // "properties": { - // // "id": 1, - // // "user_id": 10, - // // "nama_user": "Ryan", - // // "nama_proyek": "FTTH Paket 2", - // // "mulai_tugas": "2021-11-01T09:31:32.775Z", - // // "akhir_tugas": "2021-11-30T09:31:32.775Z", - // // "_type": "waspang" - // // }, - // // "geometry": { - // // "type": "Point", - // // "coordinates": [ - // // 106.89285278320312, - // // -6.228275226686636 - // // ] - // // } - // // }, - // // { - // // "type": "Feature", - // // "id": `m_waspang.2`, - // // "properties": { - // // "id": 2, - // // "user_id": 12, - // // "nama_user": "Effendi", - // // "nama_proyek": "FTTH Paket 2", - // // "mulai_tugas": "2021-11-01T09:31:32.775Z", - // // "akhir_tugas": "2021-11-30T09:31:32.775Z", - // // "_type": "waspang" - // // }, - // // "geometry": { - // // "type": "Point", - // // "coordinates": [ - // // 106.9357681274414, - // // -6.267522831839373 - // // ] - // // } - // // }, - // // { - // // "type": "Feature", - // // "id": `m_waspang.3`, - // // "properties": { - // // "id": 1, - // // "user_id": 16, - // // "nama_user": "Waspang C", - // // "nama_proyek": "FTTH Paket 2", - // // "mulai_tugas": "2021-11-01T09:31:32.775Z", - // // "akhir_tugas": "2021-11-30T09:31:32.775Z", - // // "_type": "waspang" - // // }, - // // "geometry": { - // // "type": "Point", - // // "coordinates": [ - // // 106.80564880371092, - // // -6.263086293713913 - // // ] - // // } - // // }] - // } - - findChildLayerToRemove = (parentObj) => { - let layersToRemove = []; - if (parentObj.hasOwnProperty('children')) { - // get semua children layer name nya - for (let i = 0; i < parentObj.children.length; i++) { - layersToRemove.push(parentObj.children[i].layers.name) - } - } - else { - layersToRemove.push(parentObj.layers.name) - } - return layersToRemove; - } - - findChildLayerToAdd = (parentObj, checkedKeys) => { - - let layersToAdd = []; - let newLayer = null; - - // 1. cek apakah parentObj itu kecentang atau ngga - // 2. cek apakah parentObj itu punya child apa ngga - // kalo kecentang parent nya ya berarti loop aja - // 3. cek apakah childnya itu kecentang ngga - - console.log('parentObj', parentObj); - - if (checkedKeys.includes(parentObj["key"])) { - if (parentObj.hasOwnProperty('children')) { - // loop aja semua child layernya - for (let i = 0; i < parentObj.children.length; i++) { - newLayer = this.generateLayerWMSByName(parentObj.children[i].layers.name); - if (newLayer) { - layersToAdd.push(newLayer); - } - } - } - else { - newLayer = this.generateLayerWMSByName(parentObj.layers.name); - if (newLayer) { - layersToAdd.push(newLayer); - } - } - } - else { - if (parentObj.hasOwnProperty('children')) { - - } - - } - - return layersToAdd; - - } - - getExtentLayerByName = async (layer) => { - - // console.log('getExtentLayerByName', layerName, source_type); - - let layerName = layer.get('name'); - let source_type = layer.get('source_type'); - - // if source_type is undefined = WMS - // otherwise source_type is not undefined = geojson - - let extent = null; - - if (source_type === 'wms') { - let getExt = await fetch(WMS_CAPABILITIES_URL_2).then((response) => { - return response.text(); - }).then((text) => text); - - let result = new WMSCapabilities().read(getExt); - if (result && result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName)) { - extent = result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName).EX_GeographicBoundingBox; - } - } - else if (source_type === 'geojson') { - // extent = layer.getSource().getExtent(); - - // layer.getSource().once('change',(e) => { - // if (layer.getSource().getState() === 'ready') { - // extent = layer.getSource().getExtent(); - // console.log('extent------------', extent); - // // map.getView().fit(extent, map.getSize()); - // } - // }); - extent = null - } - console.log('extent', extent); - return extent; - - } - - generateLayerWMSByName = (layerName) => { - let theLayer = null; - if (layerName) { - theLayer = new OlLayerTile({ - name: layerName, - source_type: 'wms', - source: new OlSourceTileWMS({ - url: appConfig.geoserver_host + 'wms', - params: { - 'LAYERS': appConfig.workspace_name + ':' + layerName, - 'TILED': true, - 'SLD': layerStyleUrl + layerName, - // 'CQL_FILTER': CQL_QUERY - }, - serverType: 'geoserver', - transition: 0, - crossOrigin: 'anonymous', - }), - type: 'layer', - geom_type: 'Polygon' - }); - } - return theLayer; - } - - clearMapLayers = () => { - // console.log('clearing layers'); - // clear map. removing all layer other than OSM - let removeLayers = []; - this.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') !== 'OSM') { - removeLayers.push(layer); - } - }); - // console.log('removeLayers', removeLayers); - if (removeLayers.length > 0) { - for (let i = 0; i < removeLayers.length; i++) { - this.olmap.removeLayer(removeLayers[i]); - } - } - } - - removeLayerByName = (name) => { - - let removeLayers = []; - this.olmap.getLayers().forEach((layer, i) => { - if (layer.get('name') === name) { - removeLayers.push(layer); - } - }); - // console.log('removeLayers', removeLayers); - if (removeLayers.length > 0) { - for (let i = 0; i < removeLayers.length; i++) { - this.olmap.removeLayer(removeLayers[i]); - } - } - } - - getRoute = () => { - fetch(routeDummy).then((response) => { - response.json().then((result) => { - console.log('getRoute', result); - }) - }); - } - - handleGetPercentagePerDay = async () => { - console.log("GET_PERCENTAGE_PERDAY", GET_PERCENTAGE_PERDAY); - const result = await axios.post(GET_PERCENTAGE_PERDAY, HEADER).then(res => res).catch(err => err.response) - console.log("result", result); - if (result.data.code === 200) { - let dataRes = result.data.data - console.log("dataRes", dataRes); - } else { - NotificationManager.error('Gaga mengambil Data!!', 'Failed'); - } - } - - showRoute = (userRoute) => { - const { mapProjection } = this.state; - console.log('showRoute', userRoute); - - this.removeLayerByName('routeLayer'); - if (userRoute.features && userRoute.features.length < 1) { - toast.warn("Couldn't show route at selected time. Please select another range time."); - return; - } - - let route = null; - let polyline = null; - let extent = null; - - // polyline = routeDummy.routes[0].overview_polyline.points; - // console.log('polyline', polyline); - - // route = new Polyline({ - // }).readGeometry(polyline, { - // dataProjection: 'EPSG:4326', - // featureProjection: 'EPSG:4326', - // }); - - // let route = new Polyline().readGeometry(polyline); - - // polyline = { - // "type": "LineString", - // "coordinates": [ - // [ - // 106.78853, - // -6.26235 - // ], - // [ - // 106.78863, - // -6.26201 - // ], - // [ - // 106.80065, - // -6.24523 - // ] - // ] - // } - - // console.log('check route', userRoute.features.length > 0 && (userRoute.features[0].geometry && userRoute.features[0].geometry.coordinates)); - - if (userRoute.features.length > 0 && (userRoute.features[0].geometry && userRoute.features[0].geometry.coordinates)) { - // polyline = userRoute.features[0].geometry; - polyline = { - "type": "LineString", - "coordinates": [] - } - - for (let i=0; i < userRoute.features.length; i++) { - polyline.coordinates.push(userRoute.features[i].geometry.coordinates); - } - - route = new LineString(polyline.coordinates).transform('EPSG:4326', mapProjection); - extent = route.getExtent(); - - console.log('route', route); - console.log('extent', extent); - - let routeFeature = new Feature({ - type: 'route', - geometry: route, - geometry_name: userRoute.features[0].geometry_name, - id: userRoute.features[0].id, - properties: userRoute.features[0].properties, - routeColor: getRandomColor() - }); - let geoMarker = new Feature({ - type: 'geoMarker', - geometry: new Point(route.getCoordinateAt(0)), - id: userRoute.features[0].id, - properties: userRoute.features[0].properties - }); - let startMarker = new Feature({ - type: 'pinRouteStart', - geometry: new Point(route.getCoordinateAt(0)), - id: userRoute.features[0].id, - properties: userRoute.features[0].properties - }); - let endMarker = new Feature({ - type: 'pinRouteEnd', - geometry: new Point(route.getCoordinateAt(1)), - id: userRoute.features[0].id, - properties: userRoute.features[0].properties - }); - - let animating = false; - - let vectorLayer = new VectorLayer({ - name: 'routeLayer', - source_type: 'routeLayer', - source: new VectorSource({ - features: [routeFeature, geoMarker, startMarker, endMarker], - }), - style: (feature, resolution) => { - // hide geoMarker if animation is active - if (animating && feature.get('type') === 'geoMarker') { - return null; - } - // return ROUTE_MAP_STYLES[feature.get('type')]; - return ROUTE_MAP_STYLES(feature, resolution); - }, - }); - - this.olmap.addLayer(vectorLayer); - - if (extent) { - // this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); - this.olmap.getView().fit(extent, { size: this.olmap.getSize(), duration: 500 }); - - } - } - } - - searchRouting = async (userId, dateString) => { - await this.setState({ isSearchingRoute: true, isProcessing: true }); - - const { routeType } = this.state; - let routes = null; - - if (routeType === 'waspang') { - routes = await getWaspangRoutingApi(userId, dateString); - } - - if (routeType === 'presensi') { - routes = await getPresensiRoutingApi(userId, dateString); - } - - if (routes) { - this.setState({ isSearchingRoute: false, isProcessing: false }, () => this.showRoute(routes)) - } - else { - this.setState({ isSearchingRoute: false, isProcessing: false }, () => toast.warn("Sorry. Couldn't get user waypoint")); - } - } - - handleQueryBuilder = (query, type, tree) => { - console.log("query builder " + type, query); - this.setState({ queryBuilderOutput: query, queryBuilderType: type, currentQbTree: tree, currentQbType: type }, () => { - if (type === "Sales") { - this.setLayer('checkedKeysSales'); - } else if (type === "Customer") { - this.setLayer('checkedKeysCustomer'); - } else if (type === "Office") { - this.setLayer('checkedKeysOffice'); - } - }) - } - - handleQbReset = (type) => { - this.setState({ - queryBuilderOutput: '', - queryBuilderType: '', - currentQbTree: '', - currentQbType: '' - }, () => { - if (type === "Sales") { - this.setLayer('checkedKeysSales'); - } else if (type === "Customer") { - this.setLayer('checkedKeysCustomer'); - } else if (type === "Office") { - this.setLayer('checkedKeysOffice'); - } - }) - } - - - getChosenProyekRealisasi = () => { - const { chosenProyek, projectTree, checkedKeysProjectTree } = this.state; - - this.chosenProyekTemp = []; - let chosenProyekId = []; - - if (checkedKeysProjectTree.length > 0) { - chosenProyekId = this.getChosenProyekId(); // ini yang sudah diambil uniquenya - } - else { - chosenProyekId = [] - } - - console.log('chosenProyekId', chosenProyekId); - this.setState({ chosenProyekIds: chosenProyekId }); - } - - // ambil id atau proyek_id berdasarkan key yang tercentang di projectTree - // dengan cara mencocokkan di levelnya - // kalau dia gak punya parent_id, ambil "id" - // kalau dia punya parent_id, ambil "proyek_id" - // khusus untuk key = "project-0" berarti dia tercentang semua, gak usah cek dalemannya lagi, langsung ambil children -> id nya. - // masukin ke array chosenProyekTemp - // ambil unique nya aja lalu return uniquenya - getChosenProyekId = () => { - const { checkedKeysProjectTree, projectTree } = this.state; - // console.log('checkedKeysProjectTree', checkedKeysProjectTree); - - if (checkedKeysProjectTree.length > 0) { - if (checkedKeysProjectTree.includes('project-0')) { - // langsung ambil semua children di level pertama - for (let i = 0; i < projectTree[0].children.length; i++) { - this.chosenProyekTemp.push(projectTree[0].children[i].id); - } - } - else { - // for (let i=0; i < projectTree[0].children.length; i++) { - this.getChosenProyekIdByKey(projectTree[0].children); - // } - } - } - - // usage example: - // var myArray = ['a', 1, 'a', 2, '1']; - // var unique = myArray.filter((v, i, a) => a.indexOf(v) === i); - let unique = this.chosenProyekTemp.filter((v, i, a) => a.indexOf(v) === i); - return unique; - } - - getChosenProyekIdByKey = (dataTree) => { - const { checkedKeysProjectTree } = this.state; - - for (let i = 0; i < dataTree.length; i++) { - if (checkedKeysProjectTree.includes(dataTree[i].key)) { - // console.log('matched!!!', dataTree[i].key); - // get the proyek_id, then stop - if (dataTree[i].parent_id === undefined) { - this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek) - } - else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id === null) { // dia adalah subproyek pertama - this.chosenProyekTemp.push(dataTree[i].proyek_id); // ambil proyek_id - } - else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id !== null) { // dia adalah subproyek kedua, dst - this.chosenProyekTemp.push(dataTree[i].proyek_id); // ambil proyek_id - } - } - else { - // console.log('not matched, keep looping!', dataTree[i]); - // keep looping until get the matched key - if (dataTree[i].subproyeks) { - this.getChosenProyekIdByKey(dataTree[i].children); - } - } - } - } - - toggleStatusRight = () => { - this.setState({ statusRight: !this.state.statusRight }); - } - - toggleProggresBottom = () => { - this.setState({ proggressBottom: !this.state.proggressBottom }) - } - - closeStatusRight = () => { - this.setState({ statusRight: false }); - } - - closeProggressBottom = () => { - this.setState({ proggressBottom: false }) - } - - toggleKurvaSWindowMode = () => { - const { kurvaSWindowMode } = this.state; - console.log('toggleKurvaSWindowMode', kurvaSWindowMode); - if (kurvaSWindowMode === 'default') { - this.setState({kurvaSWindowMode: 'maximize'}, () => this.renderCarouselKurvaS()) - } - else { - this.setState({kurvaSWindowMode: 'default'}, () => this.renderCarouselKurvaS()); - } - } - - renderDurasiKerja = (jamMasuk, jamKeluar) => { - - if (jamMasuk && jamKeluar) { - - let start = moment(jamMasuk), - end = moment(jamKeluar); - - let diff = end.diff(start); - let result = moment.utc(diff).format('HH:mm:ss'); - - if (result) { - return result; - } else { - return "-" - } - - } else { - return "-" - } - } - - handleRequestDataTable = async (url, payload) => { - - const config = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + localStorage.getItem('token') - }, - body: JSON.stringify(payload) // body data type must match "Content-Type" header - } - try { - const result = await fetch(url, config).then(response => response.json()).then(res => res); - return result.data || [] - } - catch (e) { - toast.error('Gagal mengambil data'); - return [] - } - } - - - handleClickChartPengawas = async param => { - const { dataStatusWaspang } = this.state - const { start_time, end_time } = dataStatusWaspang - - // if (!param.length) return; - - console.log('handleClickChartPengawas param', param); - - const { _index } = param[0]; - const label = dataStatusWaspang.labels[_index] - // console.log({ param, label }) - console.log('label', label); - - const payload = { - "columns": [ - { "name": label == " Hadir" ? "clock_time" : "created_at", "logic_operator": "range", "value": `${moment(start_time).utc().format('YYYY-MM-DD')} 00:00:00`, "value1": `${moment(end_time).utc().format('YYYY-MM-DD')} 23:59:59`, "operator": "AND" } - ], - "joins": [ - { - "name": "m_users", - "column_join": "user_id", - "column_results": [ - "name", - ] - } - ], - "paging": { "start": 0, "length": -1 } - } - console.log(payload) - if (label == "Hadir") { - const result = await this.handleRequestDataTable(PRESENSI_SEARCH, payload) - console.log('data hadir pengawas', result) - this.setState({ dataWaspangHadir: result, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnPresensi }); - } - - if (label == "Izin") { - const result = await this.handleRequestDataTable(ABSENSI_SEARCH, payload) - console.log('data absen pengawas', result) - this.setState({ dataWaspangAbsent: result, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnAbssensi }); - } - - if (label == "Panic Button") { - const result = await this.handleRequestDataTable(PANIC_BUTTON_SEARCH, payload) - console.log('data panic pengawas', result) - - let resultSortedDesc = sortBy(result, { - prop: "created_at", - desc: true, - }); - - const resultMod = resultSortedDesc.filter((value, index, self) => { - return self.findIndex(v => v.user_id === value.user_id) === index; - }).map(ele => ele); - - console.log('resultMod', resultMod); - - this.setState({ dataWaspangPanic: resultMod, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnPanic }); - } - } - - handleClickChartProyek = async param => { - const { dataStatusProyek, chosenProyekIds } = this.state - const { _index } = param[0]; - const label = dataStatusProyek.labels[_index] - console.log({ param, label }) - let str = "" - chosenProyekIds.map((res, idx) => { - if (idx == 0) str += `${res}` - if (idx != 0) str += `,${res}` - - }) - const val = label == "Aman" ? "green" : label == "Alert" ? "orange" : "red" - - const payload = { - "columns": [ - { "name": "color_progress", "logic_operator": "like", "value": val, "operator": "AND" }, - { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" }, - ], - "joins": [ - { "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, - { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } - ], - "orders": { "columns": ["id"], "ascending": true }, - "paging": { "start": 0, "length": 25 } - } - console.log(payload) - const result = await this.handleRequestDataTable(PROYEK_SEARCH, payload) - console.log('data status proyek', result) - this.setState({ dataTableStatusProyek: result, openTableStatusProyek: true, typeTableStatusProyek: label }); - - } - - handleClickChartPersentase = async param => { - const { dataPersentaseProyek, chosenProyekIds } = this.state - const { _index } = param[0]; - const label = dataPersentaseProyek.labels[_index] - // console.log({ param, label }) - } - - handleClickChartCost = async param => { - const { dataCostProyek, chosenProyekIds } = this.state - const { _index } = param[0]; - const label = dataCostProyek.labels[_index] - } - - - renderTablePresensi = () => { - console.log('render hadir table', this.state.dataWaspangHadir) - const dataTable2 = this.state.dataWaspangHadir || []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - {n.join.m_users_name} - {n.clock_time !== null ? moment(n.clock_time).format("DD-MM-YYYY") : "-"} - {n.clock_time !== null ? moment(n.clock_time).format("HH:mm:ss") : "-"} - {n.clock_out_time !== null ? moment(n.clock_out_time).format("HH:mm:ss") : "-"} - {n.clock_time ? this.renderDurasiKerja(n.clock_time, n.clock_out_time) : "-"} - - ) - }) : - No Data Available - - } - - ) - } - - renderTablePanic = () => { - const dataTable2 = this.state.dataWaspangPanic || []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - {n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:MM:SS") : "-"} - {n.join.m_users_name !== null ? n.join.m_users_name : "-"} - {n.status_response !== null ? n.status_response : "-"} - {/* { n.clock_out_time!==null ? moment(n.clock_out_time).format("HH:mm:ss") : "-" } */} - - ) - }) : - No Data Available - - } - - ) - } - - renderTableAbsent = () => { - const dataTable2 = this.state.dataWaspangAbsent || []; - // const dataTable2 = []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - {n.join.m_users_name} - {n.description ? n.description : "-"} - {n.created_at ? moment(n.created_at).format("YYYY-MM-DD") : "-"} - - ) - }) : - No Data Available - - } - - ) - } - - renderFormatRupiah = (text, prefix) => { - if (text) { - return formatRupiah(text, prefix) - } else { - return "-" - } - } - - renderTableStatusProyek = () => { - // console.log('render hadir table', this.state.dataTableStatusProyek) - const dataTable2 = this.state.dataTableStatusProyek || []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - {n.nama} - {this.renderFormatRupiah(n.biaya, "Rp")} - {n.jumlah_pekerja} - {n.pic} - {n.mulai_proyek !== null ? moment(n.mulai_proyek).format("DD-MM-YYYY") : "-"} - {n.akhir_proyek !== null ? moment(n.akhir_proyek).format("DD-MM-YYYY") : "-"} - - ) - }) : - No Data Available - - } - - ) - } - - renderEmptyData = () => { - return ( -
- Data tidak ditemukan.
Pilih proyek untuk menampilkan data. -
- ) - } - - next = () => { - const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state; - if (animating) return; - if ((APP_MODE === 'ADW')) { - const nextIndex = activeIndex === dataStatusProyekAdw.length - 1 ? 0 : activeIndex + 1; - this.setState({activeIndex: nextIndex}); - } - else { - const nextIndex = activeIndex === dataStatusProyek.length - 1 ? 0 : activeIndex + 1; - this.setState({activeIndex: nextIndex}); - } - } - - next2 = () => { - const { animating2, activeIndex2, dataPersentaseProyek } = this.state; - if (animating2) return; - const nextIndex = activeIndex2 === dataPersentaseProyek.length - 1 ? 0 : activeIndex2 + 1; - this.setState({activeIndex2: nextIndex}); - } - - next3 = () => { - const { animating3, activeIndex3, dataCostProyek } = this.state; - if (animating3) return; - const nextIndex = activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1; - this.setState({activeIndex3: nextIndex}); - } - - previous = () => { - const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state; - if (animating) return; - if ((APP_MODE === 'ADW')) { - const nextIndex = activeIndex === 0 ? dataStatusProyekAdw.length - 1 : activeIndex - 1; - this.setState({activeIndex: nextIndex}); - } - else { - const nextIndex = activeIndex === 0 ? dataStatusProyek.length - 1 : activeIndex - 1; - this.setState({activeIndex: nextIndex}); - } - } - - previous2 = () => { - const { animating2, activeIndex2, dataPersentaseProyek } = this.state; - if (animating2) return; - const nextIndex = activeIndex2 === 0 ? dataPersentaseProyek.length - 1 : activeIndex2 - 1; - this.setState({activeIndex2: nextIndex}); - } - - previous3 = () => { - const { animating3, activeIndex3, dataCostProyek } = this.state; - if (animating3) return; - const nextIndex = activeIndex3 === 0 ? dataCostProyek.length - 1 : activeIndex3 - 1; - this.setState({activeIndex3: nextIndex}); - } - - goToIndex = (newIndex) => { - const { animating } = this.state; - if (animating) return; - this.setState({activeIndex: newIndex}) - } - - goToIndex2 = (newIndex) => { - const { animating2 } = this.state; - if (animating2) return; - this.setState({activeIndex2: newIndex}) - } - - goToIndex3 = (newIndex) => { - const { animating3 } = this.state; - if (animating3) return; - this.setState({activeIndex3: newIndex}) - } - - renderRemainingDays = (item) => { - const {day_left, percentage} = item; - if (day_left > 0 && day_left < 8) { - return {`${day_left} ${day_left > 1 ? 'days' : 'day'} left`} - } - else if (day_left === 0) { - return Today - } - else if (day_left < 0) { - return Overdue {day_left} {day_left < -1 ? 'days' : 'day'} - } - else { - return {`${day_left} days left`} - } - } - - renderCarouselStatusProyek = () => { - const { dataStatusProyek } = this.state; - if (dataStatusProyek) { - // return - if (dataStatusProyek.length > 0) { - return dataStatusProyek.map((item, index) => { - return ( - - {/* */} - -
{item.proyek_name}
- - { item.count_activity_done } / { item.count_activity } Task
- {this.renderRemainingDays(item)} - - {item.percentage}% -
Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}
- - - ) - }) - } - else { - return
No Data Found
- } - } - else { - return this.renderEmptyData() - } - } - - renderCarouselStatusProyekAdw = () => { - const { dataStatusProyekAdw } = this.state; - if (dataStatusProyekAdw) { - if (dataStatusProyekAdw.length > 0) { - return ( - - - {this.renderTableStatusProyekAdw()} - - - - ) - } - else { - return this.renderEmptyData() - } - } - else { - return this.renderEmptyData() - } - } - - renderTableStatusProyekAdw = () => { - // console.log('render hadir table', this.state.dataTableStatusProyek) - // const dataTable2 = this.state.dataTableStatusProyek || []; - // return ( - // - // {dataTable2.length !== 0 ? dataTable2.map((n) => { - // return ( - // - // {n.nama} - // {this.renderFormatRupiah(n.biaya, "Rp")} - // {n.jumlah_pekerja} - // {n.pic} - // {n.mulai_proyek !== null ? moment(n.mulai_proyek).format("DD-MM-YYYY") : "-"} - // {n.akhir_proyek !== null ? moment(n.akhir_proyek).format("DD-MM-YYYY") : "-"} - // - // ) - // }) : - // No Data Available - // - // } - // - // ) - const { dataStatusProyekAdw } = this.state; - - if (dataStatusProyekAdw && dataStatusProyekAdw.length > 0) { - return dataStatusProyekAdw.map((item, idx) => { - // let chartData = item.data; - return ( - this.setState({animating: true}) } - onExited={() => this.setState({animating: false})} - > -
-
-
{item.proyek_name}
-
-
- {/* */} - - - {/* - - */} - - - - - - - - - - - - - - - - - - - - - - - - - - - {this.renderCostDeviation(item.cost_deviation)} - - - - {this.renderPotentialBudget(item.potential)} - - -
Budget Control This Period
Current Budget{item.current_budget === null ? '-' : this.renderFormatRupiah(item.current_budget.toString(), "Rp")}
Actual to Date{item.acwp === null ? '-' : this.renderFormatRupiah(item.acwp.toString(), "Rp")}
BCWP (cost vs perform){item.bcwp === null ? '-' : this.renderFormatRupiah(item.bcwp.toString(), "Rp")}
Rem. to Complete{item.rem_to_complete === null ? '-' : this.renderFormatRupiah(item.rem_to_complete.toString(), "Rp")}
Add Cost to Complete{item.add_cost_to_complete === null ? '-' : this.renderFormatRupiah(item.add_cost_to_complete.toString(), "Rp")}
Estimated at Completion{item.estimated_at_completion === null ? '-' : this.renderFormatRupiah(item.estimated_at_completion.toString(), "Rp")}
Cost Deviation
POTENTIAL
-
-
- - ) - }) - } - else { - this.renderEmptyData() - } - } - - renderCostDeviation = (cost_deviation) => { - if (cost_deviation < 0) { - return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} - } - else if (cost_deviation === 0) { - return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} - } - else if (cost_deviation > 0) { - return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} - } - else { - return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} - } - } - - renderPotentialBudget = (pot) => { - let potential = pot.toLowerCase(); - if (potential === 'overrun') { - return {potential ? potential.toUpperCase() : '-'} - } - else if (potential === 'saving') { - return {potential ? potential.toUpperCase() : '-'} - } - else if (potential === 'on budget') { - return {potential ? potential.toUpperCase() : '-'} - } - else { - return {potential ? potential.toUpperCase() : '-'} - } - } - - renderChartStatusProyek = (items) => { - console.log('renderChartStatusProyek', items); - return items.map((item, idx) => { - let chartData = item.data; - return ( - this.setState({animating: true}) } - onExited={() => this.setState({animating: false})} - > -
-
-
Status Proyek
-
- {/* Luas coverage: */} - {/* { numberWithCommas(item.total_luas_opt) } km2 */} -
-
-
- -
-
- - ) - }) - } - - renderCarouselPersentaseProgress = () => { - const { dataPersentaseProyek } = this.state; - if (dataPersentaseProyek) { - if (dataPersentaseProyek.length > 0) { - let dataChart = []; - dataPersentaseProyek.map((item, idx) => { - let proyekName = item.proyek_name ? item.proyek_name : '-'; - let dataRes = item.data; - let labelPercentagePlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] - // let valuePercentagePlaning = dataRes ? dataRes.map(res => parseFloat(res.bobot_planning)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valuePercentagePlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_p)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // let valuePercentageRealisasi = dataRes ? dataRes.map(res => { - // let total = parseFloat(res.bobot_planning) * parseFloat(res.persentase_progress) / 100; - // if (Number.isNaN(total)) total = 0 - // return total; - // }) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valuePercentageRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_a)) : []; - - let chartData = { - proyek_name: proyekName, - labels: labelPercentagePlaning, - datasets: [ - { - label: 'Perencanaan', - data: valuePercentagePlaning, - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - yAxisID: 'y-axis-1', - // stack: 'Stack-0' - }, - // { - // label: 'Aktual', - // data: valuePercentageRealisasi, - // fill: false, - // backgroundColor: 'rgba(54, 162, 235, 0.5)', - // borderColor: 'rgba(54, 162, 235, 0.5)', - // yAxisID: 'y-axis-1', - // // stack: 'Stack-1' - // }, - ], - }; - - dataChart.push(chartData); - }); - - console.log('dataChart persentase', dataChart); - - return ( - - - {this.renderChartPersentaseProgress(dataChart)} - - - - ) - } - else { - return this.renderEmptyData() - } - } - else { - return this.renderEmptyData() - } - } - - renderChartPersentaseProgress = (items) => { - if (items.length > 0) { - return items.map((item, idx) => { - // let chartData = item.data; - // console.log('chart persentaseeeeee', item); - return ( - this.setState({animating2: true}) } - onExited={() => this.setState({animating2: false})} - > -
-
-
{item.proyek_name}
-
- {/* Luas coverage: */} - {/* { numberWithCommas(item.total_luas_opt) } km2 */} -
-
-
- { - item.labels.length > 0 ? - console.log('click persentase linechart')} - /> - : -
No data found
- } -
-
- - ) - }) - } - else { - return this.renderEmptyData(); - } - } - - renderCarouselCostProyek = () => { - const { dataCostProyek } = this.state; - if (dataCostProyek) { - if (dataCostProyek.length > 0) { - let dataChart = []; - - dataCostProyek.map((item, idx) => { - let proyekName = item.proyek_name ? item.proyek_name : '-'; - let dataRes = item.data; - let labelCostPlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] - // let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valueCostPlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // let valueCostRealisasi = dataRes ? dataRes.map(res => res.biaya_actual) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - - let chartData = { - proyek_name: proyekName, - labels: labelCostPlaning, - datasets: [ - { - label: 'Perencanaan', - data: valueCostPlaning, - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - yAxisID: 'y-axis-1', - // stack: 'Stack-0' - }, - { - label: 'Aktual', - data: valueCostRealisasi, - fill: false, - backgroundColor: 'rgba(54, 162, 235, 0.5)', - borderColor: 'rgba(54, 162, 235, 0.5)', - yAxisID: 'y-axis-1', - // stack: 'Stack-1' - }, - ], - }; - - dataChart.push(chartData); - }); - - // console.log('dataChart', dataChart); - - return ( - - - {this.renderChartCostProyek(dataChart)} - - - - ) - } - else { - return this.renderEmptyData() - } - } - else { - return this.renderEmptyData() - } - } - - renderChartCostProyek = (items) => { - if (items.length > 0) { - return items.map((item, idx) => { - return ( - this.setState({animating3: true})} - onExited={() => this.setState({animating3: false})} - > -
-
-
{item.proyek_name}
- {/*
- Luas coverage: - { numberWithCommas(item.total_luas_opt) } km2 -
*/} -
-
- { - item.labels.length > 0 ? - console.log('click persentase linechart')} - /> - : -
No data found
- } - {/*
Test
*/} -
-
- - ) - }) - } - else { - return this.renderEmptyData(); - } - } - - renderCarouselKurvaS = () => { - const { dataCurvaS } = this.state; - if (dataCurvaS) { - if (dataCurvaS.length > 0) { - let dataChart = []; - - dataCurvaS.map((item, idx) => { - let proyekName = item.proyek_name ? item.proyek_name : '-'; - let dataRes = item.data; - // let labelCostPlanning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] - // let labels = dataRes ? dataRes.date ? moment(dataRes.date).format('DD-MM-YY') : '-' : []; - let labels = dataRes && dataRes.date ? dataRes.date.map((item, idx) => { - let date = item[0]; - let bcwp = item[1]; - let acwp = item[2]; - date = date ? moment(date).format('DD MMM YY') : '-' - bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-'; - acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-'; - return [date,bcwp,acwp] - }) : []; - // let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valuePlanning = dataRes ? dataRes.percentage.map(res => res && res[0] !== null ? res[0] : null) : []; // validate if null (holiday) - // let valueCostRealisasi = dataRes ? dataRes.map(res => res.biaya_actual) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - // let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] - let valueRealisasi = dataRes ? dataRes.percentage.map(res => res && res[1] !== null ? res[1] : null) : []; // validate if null (holiday) - - // console.log('labelCostPlanning', labelCostPlanning) - let chartData = { - proyek_name: proyekName, - // labels: [['P1',1500,1000],['P2',2000,1500],['P3',2500,1800],['P4',3000,2000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000]], - labels: labels, - datasets: [ - { - label: 'Perencanaan', - data: valuePlanning, - fill: false, - backgroundColor: 'rgba(255, 99, 132, 0.5)', - borderColor: 'rgba(255, 99, 132, 0.5)', - yAxisID: 'y-axis-1', - // stack: 'Stack-0' - }, - { - label: 'Aktual', - data: valueRealisasi, - fill: false, - backgroundColor: 'rgba(54, 162, 235, 0.5)', - borderColor: 'rgba(54, 162, 235, 0.5)', - yAxisID: 'y-axis-1', - // stack: 'Stack-1' - }, - ], - }; - - dataChart.push(chartData); - }); - - // console.log('dataChart', dataChart); - - return ( - - - {this.renderChartKurvaS(dataChart)} - - - - ) - } - else { - return this.renderEmptyData() - } - } - else { - return this.renderEmptyData() - } - } - - renderChartKurvaS = (items) => { - if (items.length > 0) { - return items.map((item, idx) => { - return ( - this.setState({animating3: true})} - onExited={() => this.setState({animating3: false})} - > -
-
-
{item.proyek_name}
- {/*
- Luas coverage: - { numberWithCommas(item.total_luas_opt) } km2 -
*/} -
- { - this.state.kurvaSWindowMode === 'default' ? -
- { - item.labels.length > 0 ? - console.log('click persentase linechart')} - redraw={true} - /> - : -
No data found
- } -
- : -
- { - item.labels.length > 0 ? - console.log('click persentase linechart')} - redraw={true} - /> - : -
No data found
- } -
- } - {/*
- { - item.labels.length > 0 ? - console.log('click persentase linechart')} - /> - : -
No data found
- } -
*/} -
- - ) - }) - } - else { - return this.renderEmptyData(); - } - } - - - - render() { - const { alert, successAlert, dangerAlert, messageAlert, - dataStatusProyek, dataPersentaseProyek, dataCostProyek, dataStatusWaspang } = this.state; - - const headerHeight = document.getElementsByClassName('app-header').clientHeight; - const progressBottomHeight = document.getElementsByClassName(' progress-bottom').clientHeight; - const heightRightStatus = `calc(100vh - ${headerHeight + 10} - ${progressBottomHeight}` - return ( -
- {/* this.saveMap()} - printMap={() => this.printMap()} - onLogout={(e) => this.signOut(e)} - /> */} - this.setState({ openTablePengawas: false })} - > - this.setState({ openTablePengawas: false })}> - Data Waspang {this.state.tabelTypeWaspang} - - - - - - {/* */} - {this.state.columnWaspang.map((i, index) => { - return ( - - ) - })} - - - {this.state.tabelTypeWaspang == "Hadir" && this.renderTablePresensi()} - {this.state.tabelTypeWaspang == "Izin" && this.renderTableAbsent()} - {this.state.tabelTypeWaspang == "Panic Button" && this.renderTablePanic()} -
Actions{i.name}
- - - - - - - this.setState({ openTableStatusProyek: false })} - > - this.setState({ openTableStatusProyek: false })}> - Data Status Proyek {this.state.typeTableStatusProyek} - - - - - - {/* */} - {columnStatusProyek.map((i, index) => { - return ( - - ) - })} - - - {this.renderTableStatusProyek()} -
Actions{i.name}
- - {/* - - */} - - - - - - - -
- - this.setState({ alert: false, successAlert: false, dangerAlert: false })}> - {messageAlert} - - - {this.state.isProcessing && -
- -
- } - -
{this.state.popupRightVisible ? - this.setPopupDataTemp(feature)} - layerName={this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''} - toggleEditGeometry={(selectedPopupData) => this.toggleEditGeometry(selectedPopupData)} - activeStateAddGeometry={this.state.activeStateAddGeometry} - fid={this.state.activeListFeatureId} - closePopupRight={this.closePopupRight} - getLayerAttribute={(layerName) => this.getLayerAttribute(layerName)} - layer_attribute={this.state.layer_attribute} - searchLabelData={this.state.searchLabelData} - layerInfo={this.state.layerInfo} - toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })} - setRouteType={(routeType) => this.setState({ routeType: routeType })} - /> : null - }
- - - - - this.openPopupRight()} - closePopupRight={() => this.closePopupRight()} - popupDataTemp={this.state.popupDataTemp} - removeChosenLayer={() => this.removeChosenLayer()} - setPopupDataTemp={(feature) => this.setPopupDataTemp(feature)} - activeListFeatureId={this.state.activeListFeatureId} - editGeometryVisible={this.state.editGeometryVisible} - toggleActiveStateAddGeometry={() => this.toggleActiveStateAddGeometry()} - searchLabelData={this.state.searchLabelData} - layerInfo={this.state.layerInfo} - onCheckOpt={(state, checkedKeys) => this.onCheckOpt(state, checkedKeys)} - checkedKeysSales={this.state.checkedKeysSales} - checkedKeysCustomer={this.state.checkedKeysCustomer} - checkedKeysOffice={this.state.checkedKeysOffice} - checkedKeysDemografi={this.state.checkedKeysDemografi} - checkedKeysAnalisa={this.state.checkedKeysAnalisa} - checkedKeysEmployeeDivision={this.state.checkedKeysEmployeeDivision} - checkedKeysProjectTree={this.state.checkedKeysProjectTree} - setCheckedKeysProjectTree={(data) => this.setState({checkedKeysProjectTree: data})} - salesGroupTree={this.state.salesGroupTree} - employeeDivisionTree={this.state.employeeDivisionTree} - setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })} - setEmployeeDivisionTree={(data) => this.setState({ employeeDivisionTree: data })} - showRoute={(route) => this.showRoute(route)} - removeLayerByName={(layerName) => this.removeLayerByName(layerName)} - setIsProcessing={(data) => this.setState({ isProcessing: data })} - handleQueryBuilder={this.handleQueryBuilder} - currentQbTree={this.state.currentQbTree} - currentQbType={this.state.currentQbType} - handleQbReset={this.handleQbReset} - projectTree={this.state.projectTree} - setProjectTree={(data) => this.setState({ projectTree: data })} - proggressBottom={this.state.proggressBottom} - toggleStatusRight={this.toggleStatusRight} - toggleProggresBottom={this.toggleProggresBottom} - /> - - - { - this.state.editGeometryVisible && - this.cancelDraw()} - layerName={this.state.layerNameDraw} - geomType={this.state.geomTypeDraw} - olmap={this.olmap} - /> - } - - {this.state.routingBarVisible && - this.setState({ routingBarVisible: !this.state.routingBarVisible })} - popupDataTemp={this.state.popupDataTemp} - setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} - searchRouting={(userId, dateString) => this.searchRouting(userId, dateString)} - isSearchingRoute={this.state.isSearchingRoute} - setRouteType={(routeType) => this.setState({ routeType: routeType })} - /> - } - - - - -
- - - {this.state.proggressBottom ? - - - {/* */} - - - Kurva S -
- this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer'}}> { this.state.kurvaSWindowMode === 'default' ? : } - this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x -
- - - { this.renderCarouselKurvaS() } - - - - - : null} - - - {this.state.statusRight && -
- - - {(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek' } x - - - { - (APP_MODE === 'ADW') ? - this.renderCarouselStatusProyekAdw() - : - this.renderCarouselStatusProyek() - } - - -
- } - - -
- ); - } + constructor(props) { + super(props); + + this.state = { + activeListFeatureId: '', + activeStateAddGeometry: false, + alert: false, + allDataWaspang: null, + checkedKeysAnalisa: [], + checkedKeysCustomer: [], + checkedKeysDemografi: [], + checkedKeysEmployeeDivision: [], + checkedKeysOffice: [], + checkedKeysProjectTree: [], + checkedKeysSales: [], + chosenProyekIds: [], + columnWaspang: [], + countGetFeature: 0, + countNotGetFeature: 0, + currentQbTree: '', + currentQbType: '', + dangerAlert: false, + dataCostProyek: null, + dataCurvaS: null, + dataPersentaseProyek: null, + dataStatusProyek: null, + dataStatusProyekAdw: null, + dataStatusWaspang: null, + dataTableStatusProyek: [], + dataWaspangAbsent: [], + dataWaspangHadir: [], + dataWaspangPanic: [], + drawerLayerVisible: false, + drawerSearchVisible: false, + editGeometryVisible: false, + employeeDivisionTree: null, + evtCoordinate: null, + geomTypeDraw: '', + imagePopupVisible: false, + isProcessing: false, + isSearchingRoute: false, + layerInfo: [], + layerNameDraw: '', + layer_attribute: [], + mapCenter: null, + mapProjection: null, + mapZoom: null, + messageAlert: "", + openTablePengawas: false, + openTableStatusProyek: false, + panic_button: 0, + planning: 0, + popupDataTemp: [], + popupRightVisible: false, + proggressBottom: true, + projectTree: null, + queryBuilderOutput: '', + queryBuilderType: '', + realisasi: 0, + routeType: '', + routingBarVisible: false, + salesGroupTree: null, + searchLabelData: [], + statusRight: true, + successAlert: false, + tabelTypeWaspang: "", + totalLayerHasFeature: 0, + typeTableStatusProyek: "", + visibleLS: false, + visibleLSProp: 'hide', + waspangData: [], + wmsLayers: [], + status_project: { + good: 0, + warning: 0, + critical: 0 + }, + waspang_status: { + presensi: 0, + absensi: 0 + }, + + // Dashboard Carousel + activeIndex: 0, + activeIndex2: 0, + activeIndex3: 0, + animating: false, + animating2: false, + animating3: false, + laporanData: [], + presensiData: [], + kurvaSWindowMode: 'default' + }; + + this.layers = [ + osmLayer, + ]; + + this.overlay = new Overlay({ + element: document.getElementById('popup'), + autoPan: true, + autoPanAnimation: { + duration: 250 + } + }); + + this.scaleLineControl = new ScaleLine({ + units: 'metric', + bar: true, + steps: 4, + text: true, + }) + + this.mousePositionControl = new MousePosition({ + coordinateFormat: createStringXY(4), + projection: 'EPSG:4326', + target: document.getElementById('custom-mouse-position'), + }); + + this.olmap = new OlMap({ + view: new OlView({ + center: Indonesia, + zoom: zoom, + maxZoom: maxZoom, + projection: projection + }), + layers: this.layers, + overlays: [this.overlay], + controls: defaultControls().extend([this.scaleLineControl, this.mousePositionControl]) + }); + + this.changeBaseLayer = this.changeBaseLayer.bind(this); + this.openPopupRight = this.openPopupRight.bind(this); + this.closePopupRight = this.closePopupRight.bind(this); + + this.projectFeatures = []; + this.waspangFeatures = []; + this.chosenProyekTemp = []; + this.laporanFeatures = []; + this.presensiFeatures = []; + } + + componentDidMount = () => { + this.olmap.on("singleclick", (evt) => { + this.mapOnClick(evt); + }); + this.setState({ mapProjection: this.olmap.getView().getProjection() }); + } + + componentDidUpdate = (prevProps, prevState) => { + + if (!this.state.popupRightVisible && this.state.popupDataTemp.length > 0) { + this.openPopupRight(); + } + + if (this.state.popupRightVisible && this.state.popupDataTemp.length < 1) { + this.closePopupRight(); + } + + if (prevState.checkedKeysProjectTree !== this.state.checkedKeysProjectTree) { + this.setLayer('checkedKeysProjectTree'); + } + + if (prevState.routingBarVisible !== this.state.routingBarVisible) { + if (!this.state.routingBarVisible) { + this.removeLayerByName('routeLayer'); + } + } + + if (this.state.chosenProyekIds !== prevState.chosenProyekIds) { + if (this.state.chosenProyekIds.length == 0) { + this.resetCharts() + } + this.getDataLaporanMap(); + this.getDataPresensiMap(); + this.getChartData(); + } + } + + loading = () =>
Loading...
+ + resetCharts = () => { + this.setState({ + dataStatusProyek: null, + dataPersentaseProyek: null, + dataCostProyek: null, + dataStatusWaspang: null, + }) + } + + resetLayerDashboard = () => { + this.removeLayerByName('projectLayer'); + this.removeLayerByName('waspangLayer'); + this.removeLayerByName('routeLayer'); + this.removeLayerByName('laporanLayer'); + this.removeLayerByName('presensiLayer'); + this.projectFeatures = []; + this.waspangFeatures = []; + this.laporanFeatures = []; + this.presensiFeatures = []; + this.closePopupRight(); + } + + getDataLaporanMap = async () => { + let payload = { + project_id: [] + } + + if (this.state.chosenProyekIds && this.state.chosenProyekIds.length > 0) { + payload.project_id = this.state.chosenProyekIds; + } + + const result = await axios + .post(DASHBOARD_REPORT_POINTS, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + let dataRes = result.data.data || [] + this.setState({ laporanData: dataRes }, () => this.getLaporanFeatures()) + } + } + + getLaporanFeatures = async () => { + const { laporanData, checkedKeysProjectTree } = this.state; + if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { + this.resetLayerDashboard(); + this.resetCharts(); + } + if (laporanData.length > 0) { + for (let i = 0; i < laporanData.length; i++) { + let item = laporanData[i]; + if (item) { + if (item.lat && item.lon) { + this.laporanFeatures.push({ + "type": "Feature", + "id": `report_activity.${item.id}`, + "properties": { + "id": item.id, + "user_id": item.user_id, + "nama_user": item.created_by, + "nama_proyek": item.proyek_name, + "jumlah_pekerjaan": item.jumlah_pekerjaan, + "pekerjaan_yang_dilaporkan": item.job_count_report, + "tanggal_lapor": item.report_date ? moment(item.report_date).format("YYYY-MM-DD HH:mm:ss") : '-', + "_type": "report_activity" + }, + "geometry": { + "type": "Point", + "coordinates": [ + parseFloat(item.lon), + parseFloat(item.lat) + ] + } + }) + } + } + } + + let layersToAdd = []; + let vectorSource = null; + let vectorLayer = null; + let laporan = null; + laporan = { + type: "FeatureCollection", + features: this.laporanFeatures + } + + if (laporan && laporan.features.length > 0) { + vectorSource = new VectorSource({ + features: new GeoJSON().readFeatures(laporan, { + dataProjection: projection4326, // from + featureProjection: projection // to + }) + }) + + vectorLayer = new VectorLayer({ + name: 'laporanLayer', + source_type: 'geojson', + source: vectorSource, + style: LAPORAN_FEATURES_STYLE + }); + + layersToAdd.push(vectorLayer); + } + + if (layersToAdd.length > 0) { + for (let i = 0; i < layersToAdd.length; i++) { + this.olmap.addLayer(layersToAdd[i]); + if (i === layersToAdd.length - 1) { + let extent = await this.getExtentLayerByName(layersToAdd[i]); + if (extent) { + this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); + } + } + } + } + } + } + + getDataPresensiMap = async () => { + let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); + let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); + + const payload = { + "paging": {"start": 0, "length": -1}, + "columns": [ + {"name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd}, + ], + "joins": [{ + "name":"m_users", + "column_join":"user_id", + "column_results":[ + "name", + "ktp_number" + ] + }], + "orders": {"columns": ["id"], "ascending": false} + } + + const result = await axios + .post(PRESENCE_SEARCH, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if(result.data.code != 200) { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + + let dataRes = result.data.data || [] + this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures()) + } + + getPresensiFeatures = async () => { + const { presensiData, checkedKeysProjectTree } = this.state; + if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { + this.resetLayerDashboard(); + this.resetCharts(); + } + if (presensiData.length > 0) { + for (let i = 0; i < presensiData.length; i++) { + let item = presensiData[i]; + if (item) { + if (item.clock_in_lat && item.clock_in_lng) { + this.presensiFeatures.push({ + "type": "Feature", + "id": `m_presensi.${item.id}`, + "properties": { + "id": item.id, + "user_id": item.user_id, + "name": item.created_by, + "clock_in": item.clock_in ? moment(item.clock_in).format('D-M-YYYY HH:mm:ss') : '-', + "clock_out": item.clock_out ? moment(item.clock_out).format('D-M-YYYY HH:mm:ss') : '-', + "clock_in_location": item.clock_in_loc !== '' ? item.clock_in_loc : '-', + "clock_out_location": item.clock_out_loc !== '' ? item.clock_out_loc : '-', + "_type": "presensi" + }, + "geometry": { + "type": "Point", + "coordinates": [ + parseFloat(item.clock_in_lng), + parseFloat(item.clock_in_lat) + ] + } + }) + } + } + } + + let layersToAdd = []; + let vectorSource = null; + let vectorLayer = null; + let presensi = null; + presensi = { + type: "FeatureCollection", + features: this.presensiFeatures + } + + if (presensi && presensi.features.length > 0) { + vectorSource = new VectorSource({ + features: new GeoJSON().readFeatures(presensi, { + dataProjection: projection4326, + featureProjection: projection + }) + }) + + vectorLayer = new VectorLayer({ + name: 'presensiLayer', + source_type: 'geojson', + source: vectorSource, + style: PRESENSI_FEATURES_STYLE + }); + + layersToAdd.push(vectorLayer); + } + + if (layersToAdd.length > 0) { + for (let i = 0; i < layersToAdd.length; i++) { + this.olmap.addLayer(layersToAdd[i]); + if (i === layersToAdd.length - 1) { + let extent = await this.getExtentLayerByName(layersToAdd[i]); + if (extent) { + this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); + } + } + } + } + } + } + + getChartData = async () => { + const payload = { + "project_id": [], + "period": "week" + } + + if (this.state.chosenProyekIds.length > 0) { + payload.project_id = this.state.chosenProyekIds; + } + + const result = await axios + .post(DASHBOARD_KURVA_S, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result.data.code != 200) { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + let dataRes = result.data.data || [] + this.setState({ dataCostProyek: dataRes }); + const result2 = await axios + .post(DASHBOARD_KURVA_S, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result2.data.code != 200) { + NotificationManager.error('Gagal Mengambil Data Persentase Progress Proyek!!', 'Failed'); + } + let dataRes2 = result2.data.data || [] + this.setState({dataCurvaS: dataRes2}); + let budgetControl = []; + if (dataRes2.length > 0) { + dataRes2.map((item, index) => { + let proyek_name = item.proyek_name; + item.data.budget_control.proyek_name = proyek_name; + budgetControl.push(item.data.budget_control); + }); + } + this.setState({dataStatusProyekAdw: budgetControl}); + + // get cost proyek + const result3 = await axios + .post(DASHBOARD_STATUS_PROYEK, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result3.data.code != 200) { + NotificationManager.error('Gagal Mengambil Data Status Proyek!!', 'Failed'); + } + let dataRes3 = result3.data.data || []; + this.setState({ dataStatusProyek: dataRes3 }); + } + + 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" } + ], + "paging": { "start": 0, "length": -1 } + } + + const config = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + localStorage.getItem('token') + }, + body: JSON.stringify(payload) + } + try { + const result = await fetch(DASHBOARD_PROYEK_SEARCH, config).then(response => response.json()).then(res => res); + if (result.code === 200 && result.data) { + const dataSum = result.data; + const statusWaspang = { + labels: ['Hadir', 'Izin', 'Panic Button'], + datasets: [ + { + label: '# of Votes', + data: [dataSum.waspang_status.presensi, dataSum.waspang_status.absensi, dataSum.panic_button], + backgroundColor: [ + 'rgba(77,232,0, 0.2)', + 'rgba(255,146,3, 0.2)', + 'rgba(164,7,120, 0.2)', + ], + borderColor: [ + 'rgba(77,232,0, 1)', + 'rgba(255,146,3, 1)', + 'rgba(164,7,120, 1)', + ], + borderWidth: 1, + }, + ], + }; + this.setState({ dataStatusWaspang: statusWaspang, allDataWaspang: result.data }); + } + } + catch (e) { + toast.error('Gagal mengambil data'); + } + } + + 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 && result.data.length > 0) { + this.setState({ + searchLabelData: result.data + }, () => console.log('getLayerSearchLabel searchLabelData', this.state.searchLabelData)); + } + } catch (err) { + console.log(err); + } + } + + + getLayerInfo = async () => { + let layerInfo = []; + const param = { + method: 'GET', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + } + + try { + const result = await fetch(API_GET_CHART_KATEGORI, param).then(response => response.json()).then(res => res) + + if (result.data && result.data.length > 0) { + for (let i = 0; i < result.data.length; i++) { + let layer_name = result.data[i].layer_name; + let layer_title = result.data[i].layer_title; + let layer_geom_type = result.data[i].layer_geom_type; + let total_features = result.data[i].total_features; + + let SLD_URL = `${layerStyleUrl + layer_name}`;; + let reqColor = await getLayerColor(SLD_URL); + let color = ''; + if (reqColor.success) { + color = reqColor.result; + } + layerInfo.push({ + layer_name: layer_name, + layer_title: layer_title, + layer_geom_type: layer_geom_type, + layer_color: color, + total_features: total_features + }); + } + this.setState({ layerInfo: layerInfo }, () => console.log('layerInfo', this.state.layerInfo)); + } + } catch (err) { + console.log(err); + } + } + + setDefaultMap = () => { + this.olmap.getView().animate({ + zoom: zoom, + maxZoom: maxZoom, + center: Indonesia + }); + } + + changeBaseLayer(item) { + if (this.olmap.getLayers().values_.length == 0) { + this.olmap.getLayers().insertAt(0, item); + } + + if (this.olmap.getLayers().array_[0].get('type') !== 'base') { + this.olmap.getLayers().insertAt(0, item); + } + + this.olmap.getLayers().removeAt(0); + this.olmap.getLayers().insertAt(0, item); + } + + getHomeView = () => { + const { mapZoom, mapCenter } = this.state; + if (mapZoom && mapCenter !== null) { + this.olmap.getView().animate({ + zoom: mapZoom, + center: mapCenter + }); + } + + this.olmap.getView().animate({ + zoom: zoom, + maxZoom: maxZoom, + center: Indonesia + }); + } + + mapOnClick = (evt) => { + evt.preventDefault(); + let isDrawing = false; + let removedFeature = []; + let isRemoving = false; + let transformedCoords4326 = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + let mapInteractions = []; + this.olmap.getInteractions().forEach((interaction) => { + if (interaction instanceof Draw) { + isDrawing = true; + } + if (interaction instanceof Modify) { + isDrawing = true; + } + }); + + if (isDrawing) { + return; + } + + let viewResolution = this.olmap.getView().getResolution(); + let viewProjection = this.olmap.getView().getProjection(); + let url = ''; + let promises = []; + let featureGet = []; + + let hitGeojson = null; + + this.olmap.getLayers().forEach((layer, i) => { + if (layer.get('type') !== 'base') { + 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)); + } + } + }); + } + if (layer.getVisible()) { + if (layer.get('name') !== 'ChosenLayer') { + if (layer.get('source_type') && layer.get('source_type') === 'geojson') { + let layerSource = layer.getSource(); + hitGeojson = this.olmap.getFeaturesAtPixel(evt.pixel); + } + if (layer.get('source_type') === "wms") { + url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, { 'INFO_FORMAT': 'application/json' }); + if (url) { + promises.push(axios.get(url)); + } + } + } + } + } + }); + + if (hitGeojson && hitGeojson.length > 0) { + for (let i = 0; i < hitGeojson.length; i++) { + let feature = hitGeojson[i]; + let feat = { + "type": "Feature", + "id": "", + "geometry": { + "type": "", + "coordinates": [] + }, + "geometry_name": "the_geom", + "properties": {} + } + feat.id = feature.id_; + feat.geometry.type = feature.getGeometry().getType(); + feat.geometry.coordinates = feature.getGeometry().getCoordinates(); + feat.properties = feature.getProperties(); + delete feat.properties["geometry"]; + featureGet.push(feat); + } + } + + if (promises.length > 0) { + axios.all(promises).then((results) => { + results.forEach((response) => { + if (response.data !== undefined && response.data.features.length > 0) { + for (let i = 0; i < response.data.features.length; i++) { + featureGet.push(response.data.features[i]); + } + } + }) + + // adding it here because it's trapped on axios callback + this.setState({ + popupDataTemp: featureGet, + evtCoordinate: evt.coordinate + }, () => this.setActiveListFeature()); + }); + } + + if (hitGeojson && promises) { + this.setState({ + popupDataTemp: featureGet, + evtCoordinate: evt.coordinate + }, () => this.setActiveListFeature()); + } + } + + removeChosenLayer = () => { + this.olmap.getLayers().forEach((layer, i) => { + if (layer.get('name') !== undefined && layer.get('name') === 'ChosenLayer') { + layer.getSource().clear(); + this.olmap.removeLayer(layer); + } + }); + } + + openPopupRight() { + this.setState({ popupRightVisible: true }, () => this.setActiveListFeature()); + } + + closePopupRight() { + this.setState({ popupRightVisible: false, popupDataTemp: [] }, () => this.setActiveListFeature()); + this.removeChosenLayer(); + this.setState({ editGeometryVisible: false, routingBarVisible: false }); // disable editing when no ChosenLayer on Map + } + + setPopupDataTemp = (feature) => { + this.setState({ popupDataTemp: [feature] }, () => this.setActiveListFeature()); + } + + reloadPopupData = () => { + const { evtCoordinate } = this.state; + } + + setActiveListFeature = () => { + if (!this.state.popupRightVisible) { + this.setState({ activeListFeatureId: '' }, () => { + }) + } + if (this.state.popupDataTemp.length === 1) { + this.setState({ activeListFeatureId: this.state.popupDataTemp[0].id }, () => { + let layerName = this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''; + this.getLayerAttribute(layerName); + }) + } + this.setState({ activeListFeatureId: '' }, () => { + }) + } + + loadMap = async () => { + let response = await axios.get(API_LOAD_MAP).then(res => res).catch(error => error); + if (response.data !== undefined) { + if (response.data.length > 0) { + let dataMap = response.data[0]; + let layersToRemove = []; + + if (dataMap.zoom == null) { + this.setDefaultMap(); + } + else if (dataMap.center_x == null && dataMap.center_y == null) { + this.setDefaultMap(); + } + this.setState({ mapZoom: dataMap.zoom, mapCenter: [dataMap.center_x, dataMap.center_y] }); + this.olmap.getView().animate({ + zoom: dataMap.zoom, + center: [dataMap.center_x, dataMap.center_y] + }); + + if (dataMap.map_layers.length > 0) { + this.olmap.getLayers().forEach((layer, i) => { + layersToRemove.push(layer); + }); + if (layersToRemove.length > 0) { + for (let i = 0; i < layersToRemove.length; i++) { + this.olmap.removeLayer(layersToRemove[i]); + } + } + if (this.olmap.getLayers().array_.length < 1) { + let map_layers = dataMap.map_layers; + if (map_layers !== undefined) { + if (map_layers.length > 0) { + for (let i = 0; i < map_layers.length; i++) { + let newLayer = null; + if (map_layers[i].layer_type !== 'base') { + newLayer = new ImageLayer({ + name: map_layers[i].layer_name, + title: map_layers[i].layer_title, + source: new OlSourceImageWMS(map_layers[i].layer_source), + type: map_layers[i].layer_type, + geom_type: map_layers[i].layer_geom_type, + visible: map_layers[i].layer_visible, + }) + } + if (map_layers[i].layer_name == 'OSM') { + newLayer = new OlLayerTile({ + name: map_layers[i].layer_name, + title: map_layers[i].layer_title, + source: new OlSourceOsm(), + type: map_layers[i].layer_type, + geom_type: map_layers[i].layer_geom_type, + visible: map_layers[i].layer_visible, + }) + } + this.olmap.addLayer(newLayer); + } + } + } + } + } + } + } + } + + saveMap = () => { + /* What map update data that are needed? + - title of map (o) + - zoom + - projection + - center_x + - center_y + - base_layer_id + - mapLayers[] + - layer_name + - layer_type (base / layer) + - layer_geom_type + - layer_source + - layer_visible + - layer_position + + Example of layer_source: + { + url: appConfig.geoserver_host+'wms', + params: { + 'LAYERS': appConfig.workspace_name+':tanah_sekolah', + 'TILED': true, + 'SLD': layerStyleUrl+'tanah_sekolah' + }, + serverType: 'geoserver', + transition: 0, + crossOrigin: 'anonymous' + } + */ + let confirmation = window.confirm('Are you sure you want to save this map?'); + let mapId = MAP_ID; + let mapTitle = localStorage.getItem('u_group') + "_map"; + let mapZoom = this.olmap.getView().getZoom(); + let mapProjection = this.olmap.getView().getProjection().code_; + let mapCenter = this.olmap.getView().getCenter(); + let center_x = mapCenter[0]; + let center_y = mapCenter[1]; + let mapLayers = []; + let requestPayload = null; + let layerType = ''; + let layerGeomType = ''; + let count = 0; + + if (confirmation) { + this.olmap.getLayers().forEach(async (layer, i) => { + layerType = layer.get('type') !== undefined ? layer.get('type') : 'layer'; + + if (layer.get('name') !== "DrawingLayer" && layer.get('name') !== "ChosenLayer") { + if (layer.get('type') === "base") { + if (layer.get('name') === "OSM") { + mapLayers.push({ + idx: i, + layer_name: layer.get('name'), + layer_type: layerType, + layer_geom_type: 'base', + layer_source: "OlSourceOsm", + layer_visible: layer.getVisible(), + layer_position: i + }); + } + + mapLayers.push({ + idx: i, + layer_name: layer.get('name'), + layer_type: layerType, + layer_geom_type: 'base', + layer_source: { + url: layer.getSource().urls[0], + projection: mapProjection, + maxZoom: 18 + }, + layer_visible: layer.getVisible(), + layer_position: i + }); + } + let reqGeomType = await getGeomType(layer.get('name')); + if (reqGeomType.success) { + layerGeomType = reqGeomType.result; + mapLayers.push({ + idx: i, + layer_name: layer.get('name'), + layer_type: layerType, + layer_geom_type: layerGeomType, + layer_source: { + url: appConfig.geoserver_host + 'wms', + params: { + 'LAYERS': appConfig.workspace_name + ':' + layer.get('name'), + 'TILED': true, + 'SLD': layerStyleUrl + layer.get('name') + }, + serverType: 'geoserver', + transition: 0, + crossOrigin: 'anonymous' + }, + layer_visible: layer.getVisible(), + layer_position: i + }); + } + } + count = count + 1; + + if (count == this.olmap.getLayers().array_.length) { + requestPayload = { + 'map_id': mapId, + 'map_title': mapTitle, + 'map_zoom': mapZoom, + 'map_projection': mapProjection, + 'center_x': center_x, + 'center_y': center_y, + 'map_layers': mapLayers + }; + this.saveMapToApi(requestPayload); + } + }); + } + } + + saveMapToApi = async (requestPayload) => { + const param = { + method: 'POST', + header: JSON.stringify({ 'Content-Type': 'application/json' }), + body: JSON.stringify(requestPayload) + } + + try { + const result = await fetch(API_UPDATE_MAP, param).then(response => response.json()).then(res => res) + if (result.data) { + this.setState({ alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false }) + } + this.setState({ alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true }) + } catch (err) { + this.setState({ alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true }) + } + } + + toggleEditGeometry = (selectedPopupData) => { + let { editGeometryVisible } = this.state; + if (editGeometryVisible) { + this.cancelDraw(); + } + + this.setState({ + editGeometryVisible: true, + layerNameDraw: selectedPopupData.id, + geomTypeDraw: selectedPopupData.geometry.type + }); + } + + cancelDraw = () => { + this.setState({ + editGeometryVisible: false, + layerNameDraw: '', + geomTypeDraw: '' + }); + } + + toggleActiveStateAddGeometry = () => { + this.setState({ activeStateAddGeometry: !this.state.activeStateAddGeometry }); + } + + printMap = () => { + this.olmap.once('rendercomplete', () => { + domtoimage + .toJpeg(this.olmap.getViewport()) + .then((dataUrl) => { + console.log('dataUrl', dataUrl); + let link = document.getElementById('image-download'); + link.href = dataUrl; + link.click(); + toast.success("Success Print Map!") + }) + .catch(e => toast.error(e.toString())); + }); + + } + + signOut = (e) => { + e.preventDefault() + window.localStorage.clear(); + this.props.history.push('/login'); + } + + getLayerAttribute = async (layerName) => { + const res = await getLayerAttribute(layerName); + if (!res.success) { + toast.warn(res.result); + } + + if (res.result.data && res.result.data.length > 0) { + this.setState({ layer_attribute: res.result.data }); + } + } + + onCheckOpt = (state, checkedKeys) => { + this.setState({ [state]: checkedKeys }); + } + + setLayer = async (state) => { + await this.setState({ isProcessing: true }); + + this.closePopupRight(); + + const { checkedKeysSales, checkedKeysCustomer, checkedKeysOffice, checkedKeysDemografi, checkedKeysAnalisa, checkedKeysEmployeeDivision, + salesGroupTree, employeeDivisionTree, queryBuilderOutput, queryBuilderType, checkedKeysProjectTree, projectTree } = this.state; + let layersToAdd = []; + let newLayer = null; + let vectorSource = null; + let vectorLayer = null; + + if (state === 'checkedKeysProjectTree') { + this.resetLayerDashboard(); + this.getChosenProyekRealisasi(); + + if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) { + + /* + Logic: + - looping all tree + - there are 3 variables + 1. features (Array) -> untuk nampung features yg ada di laporan planning + 2. projectTree (Array) + 3. checkedKeysProjectTree (Array) -> projectTree yg tercentang + + Jadi looping all nesting yg ada di projectTree (ambil object children) + Terus cek setiap levelnya dia ada di checkedKeysProjectTree gak? + Jika ada, cek apakah di object tersebut mengandung key namanya "plannings" tidak? + Jika iya, maka cek di dalamnya ada laporan_planning tidak? + Jika iya, maka push ke features[] dengan format: + { + "type": "Feature", + "properties": {}, // isian dari objectnya + "geometry": { + "type": "Point", + "coordinates": [ + 107.90771484375, // object.lon + -6.795535025719518 // object.lat + ] + } + } + */ + + this.getChildrenTree(projectTree[0].children); + + let project = null; + project = { + type: "FeatureCollection", + features: this.projectFeatures + } + + if (project && project.features.length > 0) { + vectorSource = new VectorSource({ + features: new GeoJSON().readFeatures(project, { + dataProjection: projection4326, // from + featureProjection: projection // to + }) + }) + + vectorLayer = new VectorLayer({ + name: 'projectLayer', + source_type: 'geojson', + source: vectorSource, + style: PROJECT_FEATURES_STYLE + }); + + layersToAdd.push(vectorLayer); + } + } + if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) { + this.removeLayerByName('projectLayer'); + this.removeLayerByName('waspangLayer'); + this.removeLayerByName('routeLayer'); + this.projectFeatures = []; + this.waspangFeatures = []; + this.closePopupRight(); + this.resetCharts() + } + } + + if (layersToAdd.length > 0) { + for (let i = 0; i < layersToAdd.length; i++) { + this.olmap.addLayer(layersToAdd[i]); + if (i === layersToAdd.length - 1) { + let extent = await this.getExtentLayerByName(layersToAdd[i]); + if (extent) { + this.olmap.getView().fit(new transformExtent(extent, 'EPSG:4326', this.olmap.getView().getProjection()), { size: this.olmap.getSize(), duration: 500 }); + } + } + } + } + await this.setState({ isProcessing: false }); + } + + // find the lat lon inside laporan_plannings that the planning has been checked on projectTree + getChildrenTree = (data) => { + data.map((item, index) => { + if (item.children && item.children.length > 0) { + this.getChildrenTree(item.children); + } + if (item.laporan_plannings && item.laporan_plannings.length > 0) { + if (this.state.checkedKeysProjectTree.includes(item.key)) { + for (let i = 0; i < item.laporan_plannings.length; i++) { + this.projectFeatures.push({ + "type": "Feature", + "id": `realisasi.${item.laporan_plannings[i].id}`, + "properties": { ...item.laporan_plannings[i] }, + "geometry": { + "type": "Point", + "coordinates": [ + item.laporan_plannings[i].lon, + item.laporan_plannings[i].lat + ] + } + }) + } + } + } + }); + } + + findChildLayerToRemove = (parentObj) => { + let layersToRemove = []; + if (!parentObj.hasOwnProperty('children')) { + layersToRemove.push(parentObj.layers.name) + return layersToRemove; + } + for (let i = 0; i < parentObj.children.length; i++) { + layersToRemove.push(parentObj.children[i].layers.name) + } + return layersToRemove; + } + + findChildLayerToAdd = (parentObj, checkedKeys) => { + let layersToAdd = []; + let newLayer = null; + + if (checkedKeys.includes(parentObj["key"])) { + if (!parentObj.hasOwnProperty('children')) { + newLayer = this.generateLayerWMSByName(parentObj.layers.name); + if (newLayer) { + layersToAdd.push(newLayer); + return layersToAdd; + } + } + + for (let i = 0; i < parentObj.children.length; i++) { + newLayer = this.generateLayerWMSByName(parentObj.children[i].layers.name); + if (newLayer) { + layersToAdd.push(newLayer); + } + } + } + return layersToAdd; + } + + getExtentLayerByName = async (layer) => { + let layerName = layer.get('name'); + let source_type = layer.get('source_type'); + let extent = null; + + if (source_type === 'wms') { + let getExt = await fetch(WMS_CAPABILITIES_URL_2).then((response) => { + return response.text(); + }).then((text) => text); + + let result = new WMSCapabilities().read(getExt); + if (result && result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName)) { + extent = result.Capability.Layer.Layer.find(l => l.Name === appConfig.workspace_name + ':' + layerName).EX_GeographicBoundingBox; + } + } + + if (source_type === 'geojson') { + extent = null + } + + return extent; + } + + generateLayerWMSByName = (layerName) => { + let theLayer = null; + if (layerName) { + theLayer = new OlLayerTile({ + name: layerName, + source_type: 'wms', + source: new OlSourceTileWMS({ + url: appConfig.geoserver_host + 'wms', + params: { + 'LAYERS': appConfig.workspace_name + ':' + layerName, + 'TILED': true, + 'SLD': layerStyleUrl + layerName, + }, + serverType: 'geoserver', + transition: 0, + crossOrigin: 'anonymous', + }), + type: 'layer', + geom_type: 'Polygon' + }); + } + return theLayer; + } + + clearMapLayers = () => { + let removeLayers = []; + this.olmap.getLayers().forEach((layer, i) => { + if (layer.get('name') !== 'OSM') { + removeLayers.push(layer); + } + }); + if (removeLayers.length > 0) { + for (let i = 0; i < removeLayers.length; i++) { + this.olmap.removeLayer(removeLayers[i]); + } + } + } + + removeLayerByName = (name) => { + + let removeLayers = []; + this.olmap.getLayers().forEach((layer, i) => { + if (layer.get('name') === name) { + removeLayers.push(layer); + } + }); + if (removeLayers.length > 0) { + for (let i = 0; i < removeLayers.length; i++) { + this.olmap.removeLayer(removeLayers[i]); + } + } + } + + getRoute = () => { + fetch(routeDummy).then((response) => { + response.json().then((result) => { + console.log('getRoute', result); + }) + }); + } + + handleGetPercentagePerDay = async () => { + const result = await axios.post(GET_PERCENTAGE_PERDAY, HEADER).then(res => res).catch(err => err.response) + if (result.data.code !== 200) { + NotificationManager.error('Gaga mengambil Data!!', 'Failed'); + } + let dataRes = result.data.data + } + + showRoute = (userRoute) => { + const { mapProjection } = this.state; + + this.removeLayerByName('routeLayer'); + if (userRoute.features && userRoute.features.length < 1) { + toast.warn("Couldn't show route at selected time. Please select another range time."); + return; + } + + let route = null; + let polyline = null; + let extent = null; + + if (userRoute.features.length > 0 && (userRoute.features[0].geometry && userRoute.features[0].geometry.coordinates)) { + polyline = { + "type": "LineString", + "coordinates": [] + } + + for (let i=0; i < userRoute.features.length; i++) { + polyline.coordinates.push(userRoute.features[i].geometry.coordinates); + } + + route = new LineString(polyline.coordinates).transform('EPSG:4326', mapProjection); + extent = route.getExtent(); + + let routeFeature = new Feature({ + type: 'route', + geometry: route, + geometry_name: userRoute.features[0].geometry_name, + id: userRoute.features[0].id, + properties: userRoute.features[0].properties, + routeColor: getRandomColor() + }); + let geoMarker = new Feature({ + type: 'geoMarker', + geometry: new Point(route.getCoordinateAt(0)), + id: userRoute.features[0].id, + properties: userRoute.features[0].properties + }); + let startMarker = new Feature({ + type: 'pinRouteStart', + geometry: new Point(route.getCoordinateAt(0)), + id: userRoute.features[0].id, + properties: userRoute.features[0].properties + }); + let endMarker = new Feature({ + type: 'pinRouteEnd', + geometry: new Point(route.getCoordinateAt(1)), + id: userRoute.features[0].id, + properties: userRoute.features[0].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); + }, + }); + + this.olmap.addLayer(vectorLayer); + + if (extent) { + this.olmap.getView().fit(extent, { size: this.olmap.getSize(), duration: 500 }); + } + } + } + + searchRouting = async (userId, dateString) => { + await this.setState({ isSearchingRoute: true, isProcessing: true }); + + const { routeType } = this.state; + let routes = null; + + if (routeType === 'waspang') { + routes = await getWaspangRoutingApi(userId, dateString); + } + + if (routeType === 'presensi') { + routes = await getPresensiRoutingApi(userId, dateString); + } + + if (routes) { + this.setState({ isSearchingRoute: false, isProcessing: false }, () => this.showRoute(routes)) + } else { + this.setState({ isSearchingRoute: false, isProcessing: false }, () => toast.warn("Sorry. Couldn't get user waypoint")); + } + } + + handleQueryBuilder = (query, type, tree) => { + this.setState({ queryBuilderOutput: query, queryBuilderType: type, currentQbTree: tree, currentQbType: type }, () => { + if (type === "Sales") { + this.setLayer('checkedKeysSales'); + } else if (type === "Customer") { + this.setLayer('checkedKeysCustomer'); + } else if (type === "Office") { + this.setLayer('checkedKeysOffice'); + } + }) + } + + handleQbReset = (type) => { + this.setState({ + queryBuilderOutput: '', + queryBuilderType: '', + currentQbTree: '', + currentQbType: '' + }, () => { + if (type === "Sales") { + this.setLayer('checkedKeysSales'); + } else if (type === "Customer") { + this.setLayer('checkedKeysCustomer'); + } else if (type === "Office") { + this.setLayer('checkedKeysOffice'); + } + }) + } + + + getChosenProyekRealisasi = () => { + const { chosenProyek, projectTree, checkedKeysProjectTree } = this.state; + + this.chosenProyekTemp = []; + let chosenProyekId = []; + if (checkedKeysProjectTree.length > 0) { + chosenProyekId = this.getChosenProyekId(); + } + this.setState({ chosenProyekIds: chosenProyekId }); + } + + getChosenProyekId = () => { + const { checkedKeysProjectTree, projectTree } = this.state; + + if (checkedKeysProjectTree.length > 0) { + if (checkedKeysProjectTree.includes('project-0')) { + for (let i = 0; i < projectTree[0].children.length; i++) { + this.chosenProyekTemp.push(projectTree[0].children[i].id); + } + } + else { + this.getChosenProyekIdByKey(projectTree[0].children); + } + } + let unique = this.chosenProyekTemp.filter((v, i, a) => a.indexOf(v) === i); + return unique; + } + + getChosenProyekIdByKey = (dataTree) => { + const { checkedKeysProjectTree } = this.state; + + for (let i = 0; i < dataTree.length; i++) { + if (checkedKeysProjectTree.includes(dataTree[i].key)) { + if (dataTree[i].parent_id === undefined) { + this.chosenProyekTemp.push(dataTree[i].id) + } + else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id === null) { + this.chosenProyekTemp.push(dataTree[i].proyek_id); + } + else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id !== null) { + this.chosenProyekTemp.push(dataTree[i].proyek_id); + } + } + else { + if (dataTree[i].subproyeks) { + this.getChosenProyekIdByKey(dataTree[i].children); + } + } + } + } + + toggleStatusRight = () => { + this.setState({ statusRight: !this.state.statusRight }); + } + + toggleProggresBottom = () => { + this.setState({ proggressBottom: !this.state.proggressBottom }) + } + + closeStatusRight = () => { + this.setState({ statusRight: false }); + } + + closeProggressBottom = () => { + this.setState({ proggressBottom: false }) + } + + toggleKurvaSWindowMode = () => { + const { kurvaSWindowMode } = this.state; + if (kurvaSWindowMode === 'default') { + this.setState({kurvaSWindowMode: 'maximize'}, () => this.renderCarouselKurvaS()) + } + else { + this.setState({kurvaSWindowMode: 'default'}, () => this.renderCarouselKurvaS()); + } + } + + renderDurasiKerja = (jamMasuk, jamKeluar) => { + if (jamMasuk && jamKeluar) { + let start = moment(jamMasuk), + end = moment(jamKeluar); + let diff = end.diff(start); + let result = moment.utc(diff).format('HH:mm:ss'); + + if (result) { + return result; + } else { + return "-" + } + + } else { + return "-" + } + } + + handleRequestDataTable = async (url, payload) => { + const config = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + localStorage.getItem('token') + }, + body: JSON.stringify(payload) + } + try { + const result = await fetch(url, config).then(response => response.json()).then(res => res); + return result.data || [] + } + catch (e) { + toast.error('Gagal mengambil data'); + return [] + } + } + + + handleClickChartPengawas = async param => { + const { dataStatusWaspang } = this.state + const { start_time, end_time } = dataStatusWaspang + const { _index } = param[0]; + const label = dataStatusWaspang.labels[_index] + const payload = { + "columns": [ + { "name": label == " Hadir" ? "clock_time" : "created_at", "logic_operator": "range", "value": `${moment(start_time).utc().format('YYYY-MM-DD')} 00:00:00`, "value1": `${moment(end_time).utc().format('YYYY-MM-DD')} 23:59:59`, "operator": "AND" } + ], + "joins": [ + { + "name": "m_users", + "column_join": "user_id", + "column_results": [ + "name", + ] + } + ], + "paging": { "start": 0, "length": -1 } + } + if (label == "Hadir") { + const result = await this.handleRequestDataTable(PRESENSI_SEARCH, payload) + this.setState({ dataWaspangHadir: result, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnPresensi }); + } + + if (label == "Izin") { + const result = await this.handleRequestDataTable(ABSENSI_SEARCH, payload) + this.setState({ dataWaspangAbsent: result, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnAbssensi }); + } + + if (label == "Panic Button") { + const result = await this.handleRequestDataTable(PANIC_BUTTON_SEARCH, payload) + + let resultSortedDesc = sortBy(result, { + prop: "created_at", + desc: true, + }); + + const resultMod = resultSortedDesc.filter((value, index, self) => { + return self.findIndex(v => v.user_id === value.user_id) === index; + }).map(ele => ele); + + this.setState({ dataWaspangPanic: resultMod, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnPanic }); + } + } + + handleClickChartProyek = async param => { + const { dataStatusProyek, chosenProyekIds } = this.state + const { _index } = param[0]; + const label = dataStatusProyek.labels[_index] + let str = "" + chosenProyekIds.map((res, idx) => { + if (idx == 0) str += `${res}` + if (idx != 0) str += `,${res}` + + }) + const val = label == "Aman" ? "green" : label == "Alert" ? "orange" : "red" + + const payload = { + "columns": [ + { "name": "color_progress", "logic_operator": "like", "value": val, "operator": "AND" }, + { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" }, + ], + "joins": [ + { "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, + { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } + ], + "orders": { "columns": ["id"], "ascending": true }, + "paging": { "start": 0, "length": 25 } + } + const result = await this.handleRequestDataTable(PROYEK_SEARCH, payload) + this.setState({ dataTableStatusProyek: result, openTableStatusProyek: true, typeTableStatusProyek: label }); + + } + + handleClickChartPersentase = async param => { + const { dataPersentaseProyek, chosenProyekIds } = this.state + const { _index } = param[0]; + const label = dataPersentaseProyek.labels[_index] + } + + handleClickChartCost = async param => { + const { dataCostProyek, chosenProyekIds } = this.state + const { _index } = param[0]; + const label = dataCostProyek.labels[_index] + } + + + renderTablePresensi = () => { + const dataTable2 = this.state.dataWaspangHadir || []; + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + return ( + + {n.join.m_users_name} + {n.clock_time !== null ? moment(n.clock_time).format("DD-MM-YYYY") : "-"} + {n.clock_time !== null ? moment(n.clock_time).format("HH:mm:ss") : "-"} + {n.clock_out_time !== null ? moment(n.clock_out_time).format("HH:mm:ss") : "-"} + {n.clock_time ? this.renderDurasiKerja(n.clock_time, n.clock_out_time) : "-"} + + ) + }) : + No Data Available + + } + + ) + } + + renderTablePanic = () => { + const dataTable2 = this.state.dataWaspangPanic || []; + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + return ( + + {n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:MM:SS") : "-"} + {n.join.m_users_name !== null ? n.join.m_users_name : "-"} + {n.status_response !== null ? n.status_response : "-"} + + ) + }) : + No Data Available + + } + + ) + } + + renderTableAbsent = () => { + const dataTable2 = this.state.dataWaspangAbsent || []; + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + return ( + + {n.join.m_users_name} + {n.description ? n.description : "-"} + {n.created_at ? moment(n.created_at).format("YYYY-MM-DD") : "-"} + + ) + }) : + No Data Available + + } + + ) + } + + renderFormatRupiah = (text, prefix) => { + if (text) { + return formatRupiah(text, prefix) + } else { + return "-" + } + } + + renderTableStatusProyek = () => { + const dataTable2 = this.state.dataTableStatusProyek || []; + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + return ( + + {n.nama} + {this.renderFormatRupiah(n.biaya, "Rp")} + {n.jumlah_pekerja} + {n.pic} + {n.mulai_proyek !== null ? moment(n.mulai_proyek).format("DD-MM-YYYY") : "-"} + {n.akhir_proyek !== null ? moment(n.akhir_proyek).format("DD-MM-YYYY") : "-"} + + ) + }) : + No Data Available + + } + + ) + } + + renderEmptyData = () => { + return ( +
+ Data tidak ditemukan.
Pilih proyek untuk menampilkan data. +
+ ) + } + + next = () => { + const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state; + if (animating) return; + if ((APP_MODE === 'ADW')) { + const nextIndex = activeIndex === dataStatusProyekAdw.length - 1 ? 0 : activeIndex + 1; + this.setState({activeIndex: nextIndex}); + } + else { + const nextIndex = activeIndex === dataStatusProyek.length - 1 ? 0 : activeIndex + 1; + this.setState({activeIndex: nextIndex}); + } + } + + next2 = () => { + const { animating2, activeIndex2, dataPersentaseProyek } = this.state; + if (animating2) return; + const nextIndex = activeIndex2 === dataPersentaseProyek.length - 1 ? 0 : activeIndex2 + 1; + this.setState({activeIndex2: nextIndex}); + } + + next3 = () => { + const { animating3, activeIndex3, dataCostProyek } = this.state; + if (animating3) return; + const nextIndex = activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1; + this.setState({activeIndex3: nextIndex}); + } + + previous = () => { + const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state; + if (animating) return; + if ((APP_MODE === 'ADW')) { + const nextIndex = activeIndex === 0 ? dataStatusProyekAdw.length - 1 : activeIndex - 1; + this.setState({activeIndex: nextIndex}); + } + else { + const nextIndex = activeIndex === 0 ? dataStatusProyek.length - 1 : activeIndex - 1; + this.setState({activeIndex: nextIndex}); + } + } + + previous2 = () => { + const { animating2, activeIndex2, dataPersentaseProyek } = this.state; + if (animating2) return; + const nextIndex = activeIndex2 === 0 ? dataPersentaseProyek.length - 1 : activeIndex2 - 1; + this.setState({activeIndex2: nextIndex}); + } + + previous3 = () => { + const { animating3, activeIndex3, dataCostProyek } = this.state; + if (animating3) return; + const nextIndex = activeIndex3 === 0 ? dataCostProyek.length - 1 : activeIndex3 - 1; + this.setState({activeIndex3: nextIndex}); + } + + goToIndex = (newIndex) => { + const { animating } = this.state; + if (animating) return; + this.setState({activeIndex: newIndex}) + } + + goToIndex2 = (newIndex) => { + const { animating2 } = this.state; + if (animating2) return; + this.setState({activeIndex2: newIndex}) + } + + goToIndex3 = (newIndex) => { + const { animating3 } = this.state; + if (animating3) return; + this.setState({activeIndex3: newIndex}) + } + + renderRemainingDays = (item) => { + const {day_left, percentage} = item; + if (day_left > 0 && day_left < 8) { + return {`${day_left} ${day_left > 1 ? 'days' : 'day'} left`} + } + else if (day_left === 0) { + return Today + } + else if (day_left < 0) { + return Overdue {day_left} {day_left < -1 ? 'days' : 'day'} + } + else { + return {`${day_left} days left`} + } + } + + renderCarouselStatusProyek = () => { + const { dataStatusProyek } = this.state; + if (dataStatusProyek) { + if (dataStatusProyek.length > 0) { + return dataStatusProyek.map((item, index) => { + return ( + + +
{item.proyek_name}
+ + { item.count_activity_done } / { item.count_activity } Task
+ {this.renderRemainingDays(item)} + + {item.percentage}% +
Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}
+ + + ) + }) + } + else { + return
No Data Found
+ } + } + else { + return this.renderEmptyData() + } + } + + renderCarouselStatusProyekAdw = () => { + const { dataStatusProyekAdw } = this.state; + if (dataStatusProyekAdw) { + if (dataStatusProyekAdw.length > 0) { + return ( + + + {this.renderTableStatusProyekAdw()} + + + + ) + } + else { + return this.renderEmptyData() + } + } + else { + return this.renderEmptyData() + } + } + + renderTableStatusProyekAdw = () => { + const { dataStatusProyekAdw } = this.state; + + if (dataStatusProyekAdw && dataStatusProyekAdw.length > 0) { + return dataStatusProyekAdw.map((item, idx) => { + return ( + this.setState({animating: true}) } + onExited={() => this.setState({animating: false})} + > +
+
+
{item.proyek_name}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + {this.renderCostDeviation(item.cost_deviation)} + + + + {this.renderPotentialBudget(item.potential)} + + +
Current Budget{item.current_budget === null ? '-' : this.renderFormatRupiah(item.current_budget.toString(), "Rp")}
Actual to Date{item.acwp === null ? '-' : this.renderFormatRupiah(item.acwp.toString(), "Rp")}
BCWP (cost vs perform){item.bcwp === null ? '-' : this.renderFormatRupiah(item.bcwp.toString(), "Rp")}
Rem. to Complete{item.rem_to_complete === null ? '-' : this.renderFormatRupiah(item.rem_to_complete.toString(), "Rp")}
Add Cost to Complete{item.add_cost_to_complete === null ? '-' : this.renderFormatRupiah(item.add_cost_to_complete.toString(), "Rp")}
Estimated at Completion{item.estimated_at_completion === null ? '-' : this.renderFormatRupiah(item.estimated_at_completion.toString(), "Rp")}
Cost Deviation
POTENTIAL
+
+
+ + ) + }) + } + else { + this.renderEmptyData() + } + } + + renderCostDeviation = (cost_deviation) => { + if (cost_deviation < 0) { + return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} + } + else if (cost_deviation === 0) { + return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} + } + else if (cost_deviation > 0) { + return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} + } + else { + return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} + } + } + + renderPotentialBudget = (pot) => { + let potential = pot.toLowerCase(); + if (potential === 'overrun') { + return {potential ? potential.toUpperCase() : '-'} + } + else if (potential === 'saving') { + return {potential ? potential.toUpperCase() : '-'} + } + else if (potential === 'on budget') { + return {potential ? potential.toUpperCase() : '-'} + } + else { + return {potential ? potential.toUpperCase() : '-'} + } + } + +renderChartStatusProyek = (items) => { + return items.map((item, idx) => { + let chartData = item.data; + return ( + this.setState({animating: true}) } + onExited={() => this.setState({animating: false})} + > +
+
+
Status Proyek
+
+
+
+
+ +
+
+ + ) + }) +} + +renderCarouselPersentaseProgress = () => { + const { dataPersentaseProyek } = this.state; + if (dataPersentaseProyek) { + if (dataPersentaseProyek.length > 0) { + let dataChart = []; + dataPersentaseProyek.map((item, idx) => { + let proyekName = item.proyek_name ? item.proyek_name : '-'; + let dataRes = item.data; + let labelPercentagePlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; + let valuePercentagePlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_p)) : []; + let valuePercentageRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_a)) : []; + let chartData = { + proyek_name: proyekName, + labels: labelPercentagePlaning, + datasets: [ + { + label: 'Perencanaan', + data: valuePercentagePlaning, + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + ], + }; + + dataChart.push(chartData); + }); + + return ( + + + {this.renderChartPersentaseProgress(dataChart)} + + + + ) + } + else { + return this.renderEmptyData() + } + } + else { + return this.renderEmptyData() + } +} + +renderChartPersentaseProgress = (items) => { + if (items.length > 0) { + return items.map((item, idx) => { + return ( + this.setState({animating2: true}) } + onExited={() => this.setState({animating2: false})} + > +
+
+
{item.proyek_name}
+
+
+
+
+ { + item.labels.length > 0 ? + console.log('click persentase linechart')} + /> + : +
No data found
+ } +
+
+ + ) + }) + } + else { + return this.renderEmptyData(); + } +} + +renderCarouselCostProyek = () => { + const { dataCostProyek } = this.state; + if (dataCostProyek) { + if (dataCostProyek.length > 0) { + let dataChart = []; + dataCostProyek.map((item, idx) => { + let proyekName = item.proyek_name ? item.proyek_name : '-'; + let dataRes = item.data; + let labelCostPlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; + let valueCostPlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; + let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; + + let chartData = { + proyek_name: proyekName, + labels: labelCostPlaning, + datasets: [ + { + label: 'Perencanaan', + data: valueCostPlaning, + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + { + label: 'Aktual', + data: valueCostRealisasi, + fill: false, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 0.5)', + yAxisID: 'y-axis-1', + // stack: 'Stack-1' + }, + ], + }; + + dataChart.push(chartData); + }); + + return ( + + + {this.renderChartCostProyek(dataChart)} + + + + ) + } + else { + return this.renderEmptyData() + } + } + else { + return this.renderEmptyData() + } +} + +renderChartCostProyek = (items) => { + if (items.length > 0) { + return items.map((item, idx) => { + return ( + this.setState({animating3: true})} + onExited={() => this.setState({animating3: false})} + > +
+
+
{item.proyek_name}
+
+
+ { + item.labels.length > 0 ? + console.log('click persentase linechart')} + /> + : +
No data found
+ } +
+
+ + ) + }) + } + else { + return this.renderEmptyData(); + } +} + +renderCarouselKurvaS = () => { + const { dataCurvaS } = this.state; + if (dataCurvaS) { + if (dataCurvaS.length > 0) { + let dataChart = []; + dataCurvaS.map((item, idx) => { + let proyekName = item.proyek_name ? item.proyek_name : '-'; + let dataRes = item.data; + let labels = dataRes && dataRes.date ? dataRes.date.map((item, idx) => { + let date = item[0]; + let bcwp = item[1]; + let acwp = item[2]; + date = date ? moment(date).format('DD MMM YY') : '-' + bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-'; + acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-'; + return [date,bcwp,acwp] + }) : []; + let valuePlanning = dataRes ? dataRes.percentage.map(res => res && res[0] !== null ? res[0] : null) : []; + let valueRealisasi = dataRes ? dataRes.percentage.map(res => res && res[1] !== null ? res[1] : null) : []; + let chartData = { + proyek_name: proyekName, + labels: labels, + datasets: [ + { + label: 'Perencanaan', + data: valuePlanning, + fill: false, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132, 0.5)', + yAxisID: 'y-axis-1', + }, + { + label: 'Aktual', + data: valueRealisasi, + fill: false, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 0.5)', + yAxisID: 'y-axis-1', + }, + ], + }; + + dataChart.push(chartData); + }); + + return ( + + + {this.renderChartKurvaS(dataChart)} + + + + ) + } + else { + return this.renderEmptyData() + } + } + else { + return this.renderEmptyData() + } +} + +renderChartKurvaS = (items) => { + if (items.length > 0) { + return items.map((item, idx) => { + return ( + this.setState({animating3: true})} + onExited={() => this.setState({animating3: false})} + > +
+
+
{item.proyek_name}
+
+ { + this.state.kurvaSWindowMode === 'default' ? +
+ { + item.labels.length > 0 ? + console.log('click persentase linechart')} + redraw={true} + /> + : +
No data found
+ } +
+ : +
+ { + item.labels.length > 0 ? + console.log('click persentase linechart')} + redraw={true} + /> + : +
No data found
+ } +
+ } +
+ + ) + }) + } + else { + return this.renderEmptyData(); + } +} + +render() { + const { alert, successAlert, dangerAlert, messageAlert, + dataStatusProyek, dataPersentaseProyek, dataCostProyek, dataStatusWaspang } = this.state; + + const headerHeight = document.getElementsByClassName('app-header').clientHeight; + const progressBottomHeight = document.getElementsByClassName(' progress-bottom').clientHeight; + const heightRightStatus = `calc(100vh - ${headerHeight + 10} - ${progressBottomHeight}` + return ( +
+ this.setState({ openTablePengawas: false })} + > + this.setState({ openTablePengawas: false })}> + Data Waspang {this.state.tabelTypeWaspang} + + + + + + {this.state.columnWaspang.map((i, index) => { + return ( + + ) + })} + + + {this.state.tabelTypeWaspang == "Hadir" && this.renderTablePresensi()} + {this.state.tabelTypeWaspang == "Izin" && this.renderTableAbsent()} + {this.state.tabelTypeWaspang == "Panic Button" && this.renderTablePanic()} +
{i.name}
+ + + + + + + this.setState({ openTableStatusProyek: false })} + > + this.setState({ openTableStatusProyek: false })}> + Data Status Proyek {this.state.typeTableStatusProyek} + + + + + + {columnStatusProyek.map((i, index) => { + return ( + + ) + })} + + + {this.renderTableStatusProyek()} +
{i.name}
+ + + + + + + + +
+ + this.setState({ alert: false, successAlert: false, dangerAlert: false })}> + {messageAlert} + + + {this.state.isProcessing && +
+ +
+ } + +
{this.state.popupRightVisible ? + this.setPopupDataTemp(feature)} + layerName={this.state.activeListFeatureId ? this.state.activeListFeatureId.substr(0, this.state.activeListFeatureId.indexOf('.')) : ''} + toggleEditGeometry={(selectedPopupData) => this.toggleEditGeometry(selectedPopupData)} + activeStateAddGeometry={this.state.activeStateAddGeometry} + fid={this.state.activeListFeatureId} + closePopupRight={this.closePopupRight} + getLayerAttribute={(layerName) => this.getLayerAttribute(layerName)} + layer_attribute={this.state.layer_attribute} + searchLabelData={this.state.searchLabelData} + layerInfo={this.state.layerInfo} + toggleRoutingBarVisible={() => this.setState({ routingBarVisible: !this.state.routingBarVisible })} + setRouteType={(routeType) => this.setState({ routeType: routeType })} + /> : null + }
+ + + + + this.openPopupRight()} + closePopupRight={() => this.closePopupRight()} + popupDataTemp={this.state.popupDataTemp} + removeChosenLayer={() => this.removeChosenLayer()} + setPopupDataTemp={(feature) => this.setPopupDataTemp(feature)} + activeListFeatureId={this.state.activeListFeatureId} + editGeometryVisible={this.state.editGeometryVisible} + toggleActiveStateAddGeometry={() => this.toggleActiveStateAddGeometry()} + searchLabelData={this.state.searchLabelData} + layerInfo={this.state.layerInfo} + onCheckOpt={(state, checkedKeys) => this.onCheckOpt(state, checkedKeys)} + checkedKeysSales={this.state.checkedKeysSales} + checkedKeysCustomer={this.state.checkedKeysCustomer} + checkedKeysOffice={this.state.checkedKeysOffice} + checkedKeysDemografi={this.state.checkedKeysDemografi} + checkedKeysAnalisa={this.state.checkedKeysAnalisa} + checkedKeysEmployeeDivision={this.state.checkedKeysEmployeeDivision} + checkedKeysProjectTree={this.state.checkedKeysProjectTree} + setCheckedKeysProjectTree={(data) => this.setState({checkedKeysProjectTree: data})} + salesGroupTree={this.state.salesGroupTree} + employeeDivisionTree={this.state.employeeDivisionTree} + setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })} + setEmployeeDivisionTree={(data) => this.setState({ employeeDivisionTree: data })} + showRoute={(route) => this.showRoute(route)} + removeLayerByName={(layerName) => this.removeLayerByName(layerName)} + setIsProcessing={(data) => this.setState({ isProcessing: data })} + handleQueryBuilder={this.handleQueryBuilder} + currentQbTree={this.state.currentQbTree} + currentQbType={this.state.currentQbType} + handleQbReset={this.handleQbReset} + projectTree={this.state.projectTree} + setProjectTree={(data) => this.setState({ projectTree: data })} + proggressBottom={this.state.proggressBottom} + toggleStatusRight={this.toggleStatusRight} + toggleProggresBottom={this.toggleProggresBottom} + /> + + + { + this.state.editGeometryVisible && + this.cancelDraw()} + layerName={this.state.layerNameDraw} + geomType={this.state.geomTypeDraw} + olmap={this.olmap} + /> + } + + {this.state.routingBarVisible && + this.setState({ routingBarVisible: !this.state.routingBarVisible })} + popupDataTemp={this.state.popupDataTemp} + setPopupDataTemp={(feature) => this.props.setPopupDataTemp(feature)} + searchRouting={(userId, dateString) => this.searchRouting(userId, dateString)} + isSearchingRoute={this.state.isSearchingRoute} + setRouteType={(routeType) => this.setState({ routeType: routeType })} + /> + } + + + + +
+ + + {this.state.proggressBottom ? + + + + + Kurva S +
+ this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer'}}> { this.state.kurvaSWindowMode === 'default' ? : } + this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x +
+ + + { this.renderCarouselKurvaS() } + + + + + : null} + + + {this.state.statusRight && +
+ + + {(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek' } x + + + { + (APP_MODE === 'ADW') ? + this.renderCarouselStatusProyekAdw() + : + this.renderCarouselStatusProyek() + } + + +
+ } + + +
+ ); +} } -export default SiopasMap; \ No newline at end of file +export default SiopasMap; diff --git a/src/views/Report/ControlMonitoring/index.js b/src/views/Report/ControlMonitoring/index.js index 108a1f7..90c10b1 100644 --- a/src/views/Report/ControlMonitoring/index.js +++ b/src/views/Report/ControlMonitoring/index.js @@ -1,32 +1,56 @@ +import '../../../assets/css/customscroll.css' +import './ControlMonitoring.css' +import * as XLSX from 'xlsx'; +import ContentLoader from "react-content-loader" +import DialogEdit from './DialogEdit'; +import DialogForm from './DialogForm'; +import DialogUpdateProgress from './DialogUpdateProgress'; +import DialogView from './DialogView'; import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup, UncontrolledAccordion, UncontrolledCollapse } from 'reactstrap'; -import { Button } from 'reactstrap'; +import SweetAlert from 'react-bootstrap-sweetalert'; import axios from 'axios'; +import data from '@iconify/icons-ion/save-outline'; import moment from 'moment'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import DialogForm from './DialogForm'; -import DialogEdit from './DialogEdit'; +import { Button } from 'reactstrap'; +import { CONTROL_MONITORING_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH, PROYEK_EDIT } from '../../../const/ApiConst.js'; +import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup, UncontrolledAccordion, UncontrolledCollapse } from 'reactstrap'; +import { DatePicker, Badge } from 'antd'; import { NotificationContainer, NotificationManager } from 'react-notifications'; import { Pagination, Tooltip, Tree } from 'antd'; -import { DatePicker, Badge } from 'antd'; -import * as XLSX from 'xlsx'; -import { CONTROL_MONITORING_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH, PROYEK_EDIT } from '../../../const/ApiConst.js'; -import DialogView from './DialogView'; -import DialogUpdateProgress from './DialogUpdateProgress'; +import { formatNumber } from '../../../const/CustomFunc.js'; import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../../const/CustomFunc.js'; import { projectTreeConst } from '../../../const/LayerTreeConst.js'; -import ContentLoader from "react-content-loader" -import { formatNumber } from '../../../const/CustomFunc.js'; import { RED_COLOR, ORANGE_COLOR, GREEN_COLOR } from '../../../const/AppConst' -import '../../../assets/css/customscroll.css' -import './ControlMonitoring.css' -import data from '@iconify/icons-ion/save-outline'; +const { RangePicker } = DatePicker; + +const token = window.localStorage.getItem('token'); +const config = { + headers: + { + Authorization : `Bearer ${token}`, + "Content-type" : `application/json` + } +}; + +const proyek_id = localStorage.getItem('proyek_id'); +const role_id = localStorage.getItem('role_id'); + +const column = [ + { name: "No" }, + { name: "Nama Activity" }, + { name: "UOM" }, + { name: "Activity Mulai" }, + { name: "Activity Selesai" }, + { name: "Jumlah Report"}, + { name: "Lihat" }, +] +const LENGTH_DATA = 10 /* Logic Control Monitoring: @@ -35,7 +59,6 @@ ada variable - projectTree - checkedProjectTree - dataTable (filteran dari tanggal) -- 1. ambil proyek_id yang ada id projectTree yang tercentang saja 2. kalau ada yg sama, maka satu saja yg tercentang (dibikin unique proyek_id) @@ -88,77 +111,48 @@ ada variable ] */ - -const { RangePicker } = DatePicker; - -const token = window.localStorage.getItem('token'); -const config = { - headers: - { - Authorization : `Bearer ${token}`, - "Content-type" : `application/json` - } -}; - -const proyek_id = localStorage.getItem('proyek_id'); -const role_id = localStorage.getItem('role_id'); - -const column = [ - { name: "No" }, - // { name: "Proyek" }, - { name: "Nama Activity" }, - { name: "UOM" }, - { name: "Activity Mulai" }, - { name: "Activity Selesai" }, - { name: "Jumlah Report"}, - { name: "Lihat" }, -] - -const LENGTH_DATA = 10 - export default class index extends Component { constructor(props) { super(props) this.state = { - dataTable: [], - dataExport: [], - openDialog: false, - openDialogEdit:false, - typeDialog: 'Save', - dataEdit: null, + activityName: "", alertDelete: false, - idDelete: 0, + checkedKeysProjectTree: [], + choosenSubProyekId:[], + chosenProyekIds: [], + controlMonitoringData: [], + currentDay: 'today', + currentPage: 1, + dataEdit: null, + dataExport: [], dataGs: [], dataIdHo: [], - search: "", + dataMap:"", + dataRealisasi: [], + dataTable: [], + dataUpdateProgress: null, + endDate:moment(moment().format("YYYY-M-D")), + idDelete: 0, + idPlanning:0, + listReport:[], + openDialog: false, + openDialogEdit:false, + openDialogPlan: false, + openDialogUpdateProgress: false, page: 0, + projectTree: [], + projectTreeVisible: false, rowsPerPage: LENGTH_DATA, - currentPage: 1, - totalPage: 0, - tooltipMap: false, - tooltipDelete: false, - typeClock: "All", + search: "", startDate:moment(moment().format("YYYY-M-D")), - endDate:moment(moment().format("YYYY-M-D")), - currentDay: 'today', - dataMap:"", + tooltipDelete: false, tooltipExport:false, - openDialogPlan: false, - dataRealisasi: [], - projectTreeVisible: false, - projectTree: [], - checkedKeysProjectTree: [], - openDialogUpdateProgress: false, - chosenProyekIds: [], // buat di samping kanan (setelah dicentang dari tree dan difilter dari tanggal) - choosenSubProyekId:[], - controlMonitoringData: [], - listReport:[], - activityName: "", - dataUpdateProgress: null, - idPlanning:0 + tooltipMap: false, + totalPage: 0, + typeClock: "All", + typeDialog: 'Save', } - // this.updateProgress = this.updateProgress.bind(this); this.chosenProyekTemp = []; this.choosenSubProyekTemp = []; } @@ -202,12 +196,6 @@ export default class index extends Component { if(proyekIds.length < 1){ proyekIds.push(0); } - // { - // "name": "created_at", - // "logic_operator": "range", - // "value": dateStart, - // "value1": dateEnd - // } let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); @@ -241,32 +229,11 @@ export default class index extends Component { } } - // if(parseInt(role_id)!==1){ - // formData.columns.push( - // { - // "name": "id", - // "logic_operator": "=", - // "value": proyek_id, - // "operator": "AND", - // "table_name": "m_proyek" - // } - // ) - // } - // console.log("cek choosenSubProyekId", this.state.chosenProyekIds.join()) - // if (this.state.choosenSubProyekId.length > 0) { - // formData.columns.push({ - // "name": "subproyek_id", - // "logic_operator": "in", - // "value": this.state.choosenSubProyekId.join(), - // "operator": "AND" - // }) - // } - const result = await axios .post(CONTROL_MONITORING_SEARCH, formData, config) .then(res => res) .catch((error) => error.response); - + if(result && result.data && result.data.code==200){ console.log("cek data res", result.data.data) this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }, () => this.buildProyekView() ); @@ -283,30 +250,13 @@ export default class index extends Component { "orders": { "columns": ["id"], "ascending": false } } - // if(parseInt(localStorage.getItem('role_id'))!==1){ - // payload.columns.push( - // { - // "name": "id", - // "logic_operator": "=", - // "value": localStorage.getItem('proyek_id') ? localStorage.getItem('proyek_id') : '0', - // "operator": "AND" - // } - // ) - // } - const config = { - method: 'POST', // *GET, POST, PUT, DELETE, etc. - // mode: 'cors', // no-cors, *cors, same-origin - // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached - // credentials: 'same-origin', // include, *same-origin, omit + method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer '+window.localStorage.getItem('token') - // 'Content-Type': 'application/x-www-form-urlencoded', }, - // redirect: 'follow', // manual, *follow, error - // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url - body: JSON.stringify(payload) // body data type must match "Content-Type" header + body: JSON.stringify(payload) } const result = await fetch(PROYEK_SEARCH, config).then(response => response.json()).then(res => res); @@ -314,7 +264,6 @@ export default class index extends Component { if (result && result.code == 200) { let children = getChildrenTree(result.data); projectTreeConst[0].children = children; - // console.log('projectTreeConst', projectTreeConst); this.setState({projectTree: projectTreeConst, projectTreeVisible: true}); } else { NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); @@ -326,11 +275,9 @@ export default class index extends Component { } handleOpenDialogPlan = (param, name) => { - // console.log("cek cek list report", param) this.setState({listReport:param, activityName: name}, () => { this.setState({openDialogPlan: true}) }) - // await this.setState({idPlanning: param}) } toggleAddDialogPlan = () => { @@ -350,8 +297,6 @@ export default class index extends Component { this.setState({ openDialogUpdateProgress: true }) this.showDialogUpdateProgress(); } - - } handleCloseDialog = () => { @@ -455,7 +400,6 @@ export default class index extends Component { "column_results": [ "nama", "biaya", - // "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", @@ -498,19 +442,7 @@ export default class index extends Component { "length": -1 } } - - // if(parseInt(role_id)!==1){ - // payload.columns.push( - // { - // "name": "id", - // "logic_operator": "=", - // "value": proyek_id, - // "operator": "AND", - // "table_name": "m_proyek" - // } - // ) - // } - // console.log("cek choosenSubProyekId", this.state.choosenSubProyekId) + if (this.state.choosenSubProyekId.length > 0) { payload.columns.push({ "name": "subproyek_id", @@ -519,25 +451,15 @@ export default class index extends Component { "operator": "AND" }) } - + const result = await axios .post(CONTROL_MONITORING_SEARCH, payload, config) .then(res => res) .catch((error) => error.response); - // console.log(result) - if(result && result.data && result.data.code == 200){ let resData = result.data.data; const excelData = []; - // {index + 1} - // { n.join ? n.join.m_proyek_nama : "-" } - // { n.nama ? n.nama : "-"} - // { n.jumlah_titik ? n.jumlah_titik : "0" } - // { n.realisasi ? this.renderActual(n.realisasi) : "0" } - // { n.join.m_subproyek_pic ? `${n.join.m_subproyek_pic}` : "-" } - // { n.join.m_users_name ? `${n.join.m_users_name}` : "-" } - // { n.target_planning ? moment(n.target_planning).format("DD-MM-YYYY") : "-" } resData.map((n, index) => { let dataRow = { "Proyek": n.join ? n.join.m_proyek_nama : "-", @@ -549,12 +471,10 @@ export default class index extends Component { } excelData.push(dataRow) }) - // console.log("cek excel data", excelData) this.setState({dataExport:excelData}) - // exportExcel(); }else{ NotificationManager.error('Gagal Export Data!!', 'Failed'); - } + } } exportExcel = () => { @@ -580,7 +500,6 @@ export default class index extends Component { .post(url, formData) .then(res => res) .catch((error) => error.response); - // console.log(result) if(result && result.data){ if (result.data.code_status == 200) { NotificationManager.success('Berhasil update status response!!', 'Success!'); @@ -605,32 +524,18 @@ export default class index extends Component { } renderTable = (realisasi) => { - // const dataTable2 = this.state.dataTable || []; return ( {realisasi.length!==0 ? realisasi.map((n, index) => { - - // console.log("real real real", n) return ( {index + 1} - {/* { n.join ? n.join.m_proyek_nama : "-" } */} { n.name ? n.name : "-"} - {/* { n.jumlah_pekerja ? jumlah_pekerja : "0" } */} { n.uom ? n.uom : "-" } - { n.start_date ? `${ moment(n.start_date).format("DD-MM-YYYY") }` : "-" } - { n.end_date ? `${ moment(n.end_date).format("DD-MM-YYYY") }` : "-" } - { n.list_report ? n.list_report.length : 0 } + { n.start_date ? `${ moment(n.start_date).format("DD-MM-YYYY") }` : "-" } + { n.end_date ? `${ moment(n.end_date).format("DD-MM-YYYY") }` : "-" } + { n.list_report ? n.list_report.length : 0 } - {/* this.handleDelete(n.id)}> - this.toggle("delete")}> - Delete - */} - {/* this.handleEdit(n)}> - this.toggle("edit")}> - Edit - - {' '} */} this.handleOpenDialogPlan(n.list_report ? n.list_report : [], n.name)} id="tooltipMap" className="fa fa-eye fa-lg" style={{ color: 'black', cursor: "pointer" }}> @@ -640,7 +545,7 @@ export default class index extends Component { }) : No Data Available - } + } ) } @@ -649,46 +554,36 @@ export default class index extends Component { const val = e.target.value; this.setState({ currentDay:val }); if(val==="today"){ - // console.log("test 1 test",val); this.setState({ startDate:moment(moment().format("YYYY-M-D")), - endDate:moment(moment().format("YYYY-M-D")), + endDate:moment(moment().format("YYYY-M-D")), currentPage: 1 }) }else if(val==="3 day"){ - // console.log("test test",val); this.setState({ startDate:moment(moment().subtract(3, "days").format("YYYY-M-D")), - endDate:moment(moment().format("YYYY-M-D")), + endDate:moment(moment().format("YYYY-M-D")), currentPage: 1 }) }else if(val==="7 day"){ - // console.log("test test",val); this.setState({ startDate:moment(moment().subtract(7, "days").format("YYYY-M-D")), - endDate:moment(moment().format("YYYY-M-D")), + endDate:moment(moment().format("YYYY-M-D")), currentPage: 1 }) }else{ - // console.log("test 2 test",val); this.setState({ startDate:moment(moment().format("YYYY-M-D")), - endDate:moment(moment().format("YYYY-M-D")), + endDate:moment(moment().format("YYYY-M-D")), currentPage: 1 }) } } - // when checking chekbox on Layer Tree Panel onCheckOpt = (state, checkedKeys) => { this.setState({[state]: checkedKeys}); } - // updateProgress = (item) => { - // console.log('update progress', item); - // this.setState({dataUpdateProgress: item, openDialogUpdateProgress: true}); - // } - getChosenProyekRealisasi = () => { const { chosenProyek, projectTree, checkedKeysProjectTree } = this.state; @@ -697,14 +592,12 @@ export default class index extends Component { let chosenProyekId = []; if (checkedKeysProjectTree.length > 0) { - chosenProyekId = this.getChosenProyekId(); // ini yang sudah diambil uniquenya + chosenProyekId = this.getChosenProyekId(); } else { chosenProyekId = [] } - // console.log('choosenSubProyekTemp', this.choosenSubProyekTemp); - // this.setState({choosenSubProyekId: this.choosenSubProyekTemp}); this.setState({chosenProyekIds: chosenProyekId}); } @@ -717,7 +610,6 @@ export default class index extends Component { // ambil unique nya aja lalu return uniquenya getChosenProyekId = () => { const { checkedKeysProjectTree, projectTree } = this.state; - // console.log('checkedKeysProjectTree', checkedKeysProjectTree); if (checkedKeysProjectTree.length > 0) { if (checkedKeysProjectTree.includes('project-0')) { // langsung ambil semua children di level pertama @@ -726,105 +618,26 @@ export default class index extends Component { } } else { - // for (let i=0; i < projectTree[0].children.length; i++) { this.getChosenProyekIdByKey(projectTree[0].children); - // } } } - // usage example: - // var myArray = ['a', 1, 'a', 2, '1']; - // var unique = myArray.filter((v, i, a) => a.indexOf(v) === i); let unique = this.chosenProyekTemp.filter((v, i, a) => a.indexOf(v) === i); - // console.log("cek unique", unique) return unique; } getChosenProyekIdByKey = (dataTree) => { const { checkedKeysProjectTree } = this.state; - // console.log("dataTree", dataTree) for (let i=0; i < dataTree.length; i++) { if (checkedKeysProjectTree.includes(dataTree[i].key)) { console.log('matched!!!', dataTree[i].id); this.chosenProyekTemp.push(dataTree[i].id); - // get the proyek_id, then stop - // if (dataTree[i].parent_id === undefined) { - // this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek) - // this.getSubProyeksFromProyek(dataTree[i]); - // } - // else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id === null) { // dia adalah subproyek pertama - // this.chosenProyekTemp.push(dataTree[i].proyek_id); - // this.choosenSubProyekTemp.push(dataTree[i].id); // ambil proyek_id - // } - // else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id !== null) { // dia adalah subproyek kedua, dst - // this.chosenProyekTemp.push(dataTree[i].proyek_id); - // this.choosenSubProyekTemp.push(dataTree[i].id); // ambil proyek_id - // } } - // else { - // console.log('not matched, keep looping!', dataTree[i]); - // keep looping until get the matched key - // if (dataTree[i].subproyeks) { - // this.getChosenProyekIdByKey(dataTree[i].children); - // } - // } } } - // get subproyeks_id - // getSubProyeksFromProyek = (dataProyek) => { - // console.log("dataProyek getSubProyeksFromProyek", dataProyek) - // if(dataProyek.children){ - // dataProyek.children.map((val, index) => { - // if(val.children){ - // this.getSubProyeksFromProyek(val.children) - // }else{ - // this.choosenSubProyekTemp.push(val.id); - // } - // }); - // }else{ - // this.choosenSubProyekTemp.push(dataProyek.id); - // } - // } - - // loopForSubProyekId = (dataSubproyek) => { - - // } - - // proses menampilkan proyek yg terselect dan data realisasinya + buildProyekView = () => { const {dataTable} = this.state; - // let finalData = []; - // console.log("projectTree build view", projectTree) - // ambil object project yg terseleksi dan masukin ke controlMonitoringData - // if (chosenProyekIds.length > 0) { - // for (let i=0; i < chosenProyekIds.length; i++) { - // if (projectTree && projectTree.length > 0) { - // let found = projectTree[0].children.find((item) => item.id === chosenProyekIds[i]); - // // remove children and subproyeks object - // // if (found.children) delete found.children; - // // if (found.subproyeks) delete found.subproyeks; - // // add key realisasi - // if (found) { - // found.realisasi = []; - // finalData.push(found); - // } - // } - // } - // console.log("dataTable build view", dataTable) - - // plot response planning-realisasi api dan masukin ke controlMonitoringData - // if (dataTable.length > 0) { - // for (let i=0; i < dataTable.length; i++) { - // let foundProyekIndex = finalData.findIndex((item) => item.id === dataTable[i].proyek_id); - // finalData[foundProyekIndex].realisasi.push(dataTable[i]); - // } - // } - // } - // else { - // finalData = []; - // } - - // console.log('finalData', finalData); this.setState({controlMonitoringData: dataTable}); } @@ -899,7 +712,6 @@ export default class index extends Component {
- {/* */}
@@ -935,9 +747,7 @@ export default class index extends Component { pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} /> -
- ) }) @@ -962,18 +772,11 @@ export default class index extends Component { sendUpdateProgress = async (data) => { let urlEdit = PROYEK_EDIT(data.id) const formData = data - const result = await axios.put(urlEdit, formData, config) .then(res => res) .catch((error) => error.response); - if (result && result.data && result.data.code === 200) { NotificationManager.success(`Data proyek berhasil diupdate`, 'Success!!'); - // this.setState({controlMonitoringData: []}, () => { - // this.getLayerTreeData(); - // this.getDataReportPlanning(); - // this.renderControlMonitoringData(); - // }) window.location.reload(); // solusi sementara, soalnya pas rebuilding tree pada missing key karena keynya random } else { NotificationManager.error(`Data proyek gagal diupdate`, `Failed!!`); @@ -986,19 +789,6 @@ export default class index extends Component { return (
- {/* this.setState({ alertDelete: false, idDelete: 0 })} - focusCancelBtn - > - Data tipe karyawan akan terhapus!! - */}

Control & Monitoring

- {/* {' '} */} - {/* - - */}
- {/*
-
-
- this.handleChangeDay(e)} defaultValue={this.state.currentDay}> - - - - -
-
- {' '} - -
-
- -
*/} - {/* Breadcrumbs of proyek here... */} @@ -1070,10 +839,10 @@ export default class index extends Component {
-
@@ -1088,7 +857,7 @@ export default class index extends Component { style={{marginLeft: -10}} /> : - - + - + @@ -1129,7 +898,6 @@ export default class index extends Component { toggleDialog={() => this.toggleAddDialogPlan()} listReport={this.state.listReport} activityName={this.state.activityName} - // nameProyekParent={nameProyek} />