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
-
+
{dataDashboard ? dataDashboard.panic_button : 0}
+
PANIC BUTTON
+
+
{dataDashboard ? dataDashboard.waspang_status.presensi : 0}
+
WASPANG ACTIVE
+
+
{dataDashboard ? dataDashboard.waspang_status.absensi : 0}
+
WASPANG ABSENT
+
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)}
-
-
- 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})}
- >
-
-
-
- {/*
*/}
-
-
- {/*
- | 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 |
- {this.renderCostDeviation(item.cost_deviation)}
-
-
- | POTENTIAL |
- {this.renderPotentialBudget(item.potential)}
-
-
-
-
-
{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 */}
-
-
-
-
-
-
{item.proyek_name}
-
- {/* Luas coverage: */}
- {/* { numberWithCommas(item.total_luas_opt) } km2 */}
-
-
-
- {
- item.labels.length > 0 ?
-
console.log('click persentase linechart')}
- />
- :
- No data found
- }
-
-
-
-
{item.proyek_name}
- {/*
- Luas coverage:
- { numberWithCommas(item.total_luas_opt) } km2
-
*/}
-
-
- {
- item.labels.length > 0 ?
-
console.log('click persentase linechart')}
- />
- :
- No data found
- }
- {/* Test
*/}
-
-
-
-
{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
- }
- */}
-
- {/*
this.saveMap()}
- printMap={() => this.printMap()}
- onLogout={(e) => this.signOut(e)}
- /> */}
- this.setState({ openTablePengawas: false })}
- >
- this.setState({ openTablePengawas: false })}>
- Data Waspang {this.state.tabelTypeWaspang}
-
-
-
-
-
- {/* | Actions | */}
- {this.state.columnWaspang.map((i, index) => {
- return (
- {i.name} |
- )
- })}
-
-
- {this.state.tabelTypeWaspang == "Hadir" && this.renderTablePresensi()}
- {this.state.tabelTypeWaspang == "Izin" && this.renderTableAbsent()}
- {this.state.tabelTypeWaspang == "Panic Button" && this.renderTablePanic()}
-
-
-
-
-
-
-
- this.setState({ openTableStatusProyek: false })}
- >
- this.setState({ openTableStatusProyek: false })}>
- Data Status Proyek {this.state.typeTableStatusProyek}
-
-
-
-
-
- {/* | Actions | */}
- {columnStatusProyek.map((i, index) => {
- return (
- {i.name} |
- )
- })}
-
-
- {this.renderTableStatusProyek()}
-
-
- {/*
-
- */}
-
-
-
-
-
-
-
-
-
-
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()
- }
-
-
-
- }
-
-
- 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)}
+
+
+ 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})}
+ >
+
+
+
+
+
+
+ | 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 |
+ {this.renderCostDeviation(item.cost_deviation)}
+
+
+ | POTENTIAL |
+ {this.renderPotentialBudget(item.potential)}
+
+
+
+
+
{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})}
+ >
+
+
+ )
+ })
+}
+
+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
+ }
+
+
+
+
+ {
+ item.labels.length > 0 ?
+
console.log('click persentase linechart')}
+ />
+ :
+ No data found
+ }
+
+
+
+ {
+ 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
+ }
+
+ }
+
+
this.setState({ openTablePengawas: false })}
+ >
+ this.setState({ openTablePengawas: false })}>
+ Data Waspang {this.state.tabelTypeWaspang}
+
+
+
+
+
+ {this.state.columnWaspang.map((i, index) => {
+ return (
+ | {i.name} |
+ )
+ })}
+
+
+ {this.state.tabelTypeWaspang == "Hadir" && this.renderTablePresensi()}
+ {this.state.tabelTypeWaspang == "Izin" && this.renderTableAbsent()}
+ {this.state.tabelTypeWaspang == "Panic Button" && this.renderTablePanic()}
+
+
+
+
+
+
+
+
this.setState({ openTableStatusProyek: false })}
+ >
+ this.setState({ openTableStatusProyek: false })}>
+ Data Status Proyek {this.state.typeTableStatusProyek}
+
+
+
+
+
+ {columnStatusProyek.map((i, index) => {
+ return (
+ | {i.name} |
+ )
+ })}
+
+
+ {this.renderTableStatusProyek()}
+
+
+
+
+
+
+
+
+
+
+
+
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()
+ }
+
+
+
+ }
+
+
+
{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}
/>