- {layer.get('title') ? layer.get('title') : layer.get('name')}
+ {layer.get("title") ? layer.get("title") : layer.get("name")}
{/*
@@ -893,45 +929,77 @@ class MapToolbar extends Component {
{/*10*/}
- {localStorage.getItem('u_group') !== 'kominfo' ?
- layer.get('type') == 'layer' ?
- {this.getLayerCount(layer)}
- : null
- : layer.get('type') == 'layer' ?
-
- : null
- }
- this.onClickLayerMenu(layer)}>
+ {localStorage.getItem("u_group") !== "kominfo" ? (
+ layer.get("type") == "layer" ? (
+
+ {this.getLayerCount(layer)}
+
+ ) : null
+ ) : layer.get("type") == "layer" ? (
+
+ {" "}
+
+ ) : null}
+ this.onClickLayerMenu(layer)}
+ >
-
+
- {layer.get('title') ? layer.get('title') : layer.get('name')}
+
+ {layer.get("title")
+ ? layer.get("title")
+ : layer.get("name")}
+
- {
- layer.get('type') === 'layer' || layer instanceof OlLayerImage ?
- // layer instanceof OlLayerTile || layer instanceof OlLayerImage ?
-
-
- this.zoomToLayer(layer)}> Zoom To Layer
- this.showTableData(layer)}> Show Data
- {this.props.editGeometryVisible ?
- Add Feature
- : this.addFeature(layer)}> Add Feature
- }
- {/* this.addFeature(layer)}> Add Feature*/}
- this.styleLayer(layer)}> Layer Styles
-
- :
- null}
- this.removeLayer(layer)}> Remove Layer
+ {layer.get("type") === "layer" ||
+ layer instanceof OlLayerImage ? (
+ // layer instanceof OlLayerTile || layer instanceof OlLayerImage ?
+
+
+ this.zoomToLayer(layer)}>
+ Zoom To Layer
+
+ this.showTableData(layer)}>
+ Show Data
+
+ {this.props.editGeometryVisible ? (
+
+ Add Feature
+
+ ) : (
+ this.addFeature(layer)}>
+ Add Feature
+
+ )}
+ {/* this.addFeature(layer)}> Add Feature*/}
+ this.styleLayer(layer)}>
+ Layer Styles
+
+
+ ) : null}
+ this.removeLayer(layer)}>
+ Remove Layer
+
- )
+ );
// }
// else {
// return null;
@@ -939,7 +1007,7 @@ class MapToolbar extends Component {
}
onRightClickLayerTree(layer) {
- console.log('right click layer tree', layer);
+ console.log("right click layer tree", layer);
return (
@@ -950,15 +1018,13 @@ class MapToolbar extends Component {
Another Action
- )
+ );
}
onDropLayerTree() {
- console.log('dropped');
+ console.log("dropped");
}
-
-
/*showTableData = (layer) => {
console.log('showTableData', layer);
this.setState({
@@ -985,42 +1051,43 @@ class MapToolbar extends Component {
}*/
showTableData = (layer) => {
- this.setState({
- mapTableTitle: layer.get('title'),
- mapTableName: layer.get('name')
- // mapTableTitleSrc: layer.getSource().params_.LAYERS
- }, () => this.toggleMapTable());
- }
+ this.setState(
+ {
+ mapTableTitle: layer.get("title"),
+ mapTableName: layer.get("name"),
+ // mapTableTitleSrc: layer.getSource().params_.LAYERS
+ },
+ () => this.toggleMapTable()
+ );
+ };
refreshMapTable = async () => {
const { mapTableTitle, mapTableName } = this.state;
let res = await reqTableData(mapTableName);
if (res.success) {
this.setState({ resTableData: res.result });
- }
- else {
+ } else {
alert(res.result);
return;
}
- }
+ };
styleLayer = async (layer) => {
- console.log('styling layer...', layer);
+ console.log("styling layer...", layer);
let SLD_URL = layer.getSource().params_.SLD;
- console.log('SLD_URL', SLD_URL);
+ console.log("SLD_URL", SLD_URL);
let resGetLayerColor = await getLayerColor(SLD_URL);
- console.log('styleLayer resGetLayerColor', resGetLayerColor);
+ console.log("styleLayer resGetLayerColor", resGetLayerColor);
// this.toggleLayerStyles();
if (this.state.drawerLayerStylesVisible) {
this.closeLayerStyles();
this.openLayerStyles();
- }
- else {
+ } else {
this.openLayerStyles();
}
/*
@@ -1060,7 +1127,7 @@ class MapToolbar extends Component {
else {
this.openLayerStyles();
}*/
- }
+ };
openLayerStyles() {
this.setState({ drawerLayerStylesVisible: true });
@@ -1071,18 +1138,17 @@ class MapToolbar extends Component {
}
addFeature = async (layer) => {
- console.log('adding feature on layer...', layer);
+ console.log("adding feature on layer...", layer);
// console.log(layer.get('name'));
- let geomType = '';
+ let geomType = "";
// request Geom Type from API
- let reqGeomType = await getGeomType(layer.get('name'));
- console.log('addFeature reqGeomType', reqGeomType)
+ let reqGeomType = await getGeomType(layer.get("name"));
+ console.log("addFeature reqGeomType", reqGeomType);
if (reqGeomType.success) {
geomType = reqGeomType.result;
- }
- else {
- geomType = '';
+ } else {
+ geomType = "";
alert(reqGeomType.result);
return;
}
@@ -1091,44 +1157,43 @@ class MapToolbar extends Component {
// let featureColumns = await getTableColumns(layer.get('name'));
// console.log('addFeature featureColumns', featureColumns);
- let reqTableColumns = await getTableColumns(layer.get('name'));
- console.log('reqTableColumns', reqTableColumns);
+ let reqTableColumns = await getTableColumns(layer.get("name"));
+ console.log("reqTableColumns", reqTableColumns);
if (reqTableColumns.success) {
this.setState({ addFeatureColumns: reqTableColumns.result });
- }
- else {
+ } else {
alert(reqTableColumns.result);
// return;
}
-
this.setState({
drawingToolVisible: true,
- layerNameDraw: layer.get('name'),
+ layerNameDraw: layer.get("name"),
geomTypeDraw: geomType,
// addFeatureColumns: reqTableColumns.result
});
this.props.toggleActiveStateAddGeometry();
-
- }
+ };
cancelDraw() {
this.setState({
drawingToolVisible: false,
- layerNameDraw: '',
- geomTypeDraw: ''
+ layerNameDraw: "",
+ geomTypeDraw: "",
});
this.props.toggleActiveStateAddGeometry();
}
removeLayer = (layer) => {
- console.log('removing layer', layer);
- let confirmation = window.confirm('Are you sure you want to remove this layer?');
+ console.log("removing layer", layer);
+ let confirmation = window.confirm(
+ "Are you sure you want to remove this layer?"
+ );
if (!confirmation) {
return;
}
this.props.olmap.removeLayer(layer);
- }
+ };
/*zoomToLayer = (layer) => {
console.log('zoomToLayer', layer);
@@ -1168,10 +1233,10 @@ class MapToolbar extends Component {
}*/
zoomToLayer = (layer) => {
- console.log('zoomToLayer getSource', layer.getSource());
+ console.log("zoomToLayer getSource", layer.getSource());
// let layerName = layer.getSource().params_.LAYERS;
- let layerName = layer.get('name');
- console.log('layerName', layerName);
+ let layerName = layer.get("name");
+ console.log("layerName", layerName);
const { fitOption } = this.state;
// if (layer instanceof OlLayerImage) {
@@ -1181,53 +1246,65 @@ class MapToolbar extends Component {
// else if (layer instanceof OlLayerTile) {
// }
- CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then(response => {
- console.log('capabilities response', response);
- if (response !== undefined) {
- let layer = findWhere(response.Capability.Layer.Layer, { "Name": layerName });
- console.log('layer', layer);
-
- if (layer === undefined) {
- alert('Layer ' + layerName + ' is not found');
- return;
- }
+ CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL).then(
+ (response) => {
+ console.log("capabilities response", response);
+ if (response !== undefined) {
+ let layer = findWhere(response.Capability.Layer.Layer, {
+ Name: layerName,
+ });
+ console.log("layer", layer);
+
+ if (layer === undefined) {
+ alert("Layer " + layerName + " is not found");
+ return;
+ }
- let proj = "CRS:84";
- let bbox = findWhere(layer.BoundingBox, { "crs": proj });
- let extent = bbox.extent;
- console.log('layer', layer);
- console.log('zoomToLayer extent', extent);
- // map.getView().fit(new transformExtent(layerExtent, 'EPSG:4326', map.getView().getProjection()), { size: map.getSize() });
+ let proj = "CRS:84";
+ let bbox = findWhere(layer.BoundingBox, { crs: proj });
+ let extent = bbox.extent;
+ console.log("layer", layer);
+ console.log("zoomToLayer extent", extent);
+ // map.getView().fit(new transformExtent(layerExtent, 'EPSG:4326', map.getView().getProjection()), { size: map.getSize() });
- // console.log('layer', layer);
- // this.props.olmap.getView().fit(extent, fitOption);
- // console.log('getProjection', this.props.olmap.getView().getProjection());
- // var boundingExtent = ol.extent.boundingExtent(coordinates);
- // boundingExtent = ol.proj.transformExtent(boundingExtent, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
+ // console.log('layer', layer);
+ // this.props.olmap.getView().fit(extent, fitOption);
+ // console.log('getProjection', this.props.olmap.getView().getProjection());
+ // var boundingExtent = ol.extent.boundingExtent(coordinates);
+ // boundingExtent = ol.proj.transformExtent(boundingExtent, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
- /*// other option
+ /*// other option
extent = new transformExtent(extent, "EPSG:4326", "EPSG:3857");
console.log('extent now', extent);
this.props.olmap.getView().fit(extent, fitOption); */
- this.props.olmap.getView().fit(new transformExtent(extent, proj, this.props.olmap.getView().getProjection()), fitOption);
-
+ this.props.olmap
+ .getView()
+ .fit(
+ new transformExtent(
+ extent,
+ proj,
+ this.props.olmap.getView().getProjection()
+ ),
+ fitOption
+ );
+ }
}
- })
- }
+ );
+ };
onDragEndLayerTree = (callback) => {
- console.log('onDragEndLayerTree', callback);
- }
+ console.log("onDragEndLayerTree", callback);
+ };
rebuildTreeNodes = (evt) => {
- console.log('rebuildTreeNodes', evt);
- }
+ console.log("rebuildTreeNodes", evt);
+ };
// to be populated on search feature menu
getFeaturesOnMap = async () => {
- let layerSource = '';
- let layerTypeName = '';
+ let layerSource = "";
+ let layerTypeName = "";
let layerSourceArr = [];
let layerTypeNameArr = [];
let layerNameArr = [];
@@ -1236,26 +1313,25 @@ class MapToolbar extends Component {
this.props.olmap.getLayers().forEach((layer, i) => {
// console.log('layer', layer);
// console.log('layer type', layer.get('type'));
- if (layer.get('type' !== 'base')) {
- if (layer.get('type') !== 'vector') {
- if (layer.get('type') !== 'layerGroup') {
+ if (layer.get("type" !== "base")) {
+ if (layer.get("type") !== "vector") {
+ if (layer.get("type") !== "layerGroup") {
layer.getLayers().forEach((sublayer, i) => {
if (sublayer.getVisible()) {
// get the features
layerSource = sublayer.getSource();
layerTypeName = layerSource.params_.LAYERS;
layerTypeNameArr.push(layerTypeName);
- layerNameArr.push(sublayer.get('name'));
+ layerNameArr.push(sublayer.get("name"));
}
});
- }
- else {
+ } else {
if (layer.getVisible()) {
// get the features
layerSource = layer.getSource();
layerTypeName = layerSource.params_.LAYERS;
layerTypeNameArr.push(layerTypeName);
- layerNameArr.push(layer.get('name'));
+ layerNameArr.push(layer.get("name"));
}
}
}
@@ -1266,15 +1342,14 @@ class MapToolbar extends Component {
layerSource = layer.getSource();
layerTypeName = layerSource.params_.LAYERS;
layerTypeNameArr.push(layerTypeName);
- layerNameArr.push(layer.get('name'));
+ layerNameArr.push(layer.get("name"));
}
-
}
- })
+ });
// console.log('layerSourceArr', layerSourceArr);
- console.log('layerTypeNameArr', layerTypeNameArr);
- console.log('layerNameArr', layerNameArr);
+ console.log("layerTypeNameArr", layerTypeNameArr);
+ console.log("layerNameArr", layerNameArr);
for (let i = 0; i < layerTypeNameArr.length; i++) {
let req = await reqTableData(layerTypeNameArr[i]);
@@ -1285,19 +1360,16 @@ class MapToolbar extends Component {
if (req.result.features.length > 0) {
allFeatures.push(req.result.features);
}
- }
- else {
+ } else {
alert(req.result);
return;
}
-
}
allFeatures = flatten(allFeatures);
this.setState({ allFeatures: allFeatures });
-
- }
+ };
/*getLayerSearchLabel = async() => {
const param = {
@@ -1324,19 +1396,19 @@ class MapToolbar extends Component {
}*/
setAddFeatureValue = (obj) => {
- this.setState({ addFeatureValue: obj })
- }
+ this.setState({ addFeatureValue: obj });
+ };
renderToolbarButtons = () => {
- const { activeSideLeft } = this.state
- let olMousePosition = document.getElementsByClassName("ol-mouse-position")[0];
+ const { activeSideLeft } = this.state;
+ let olMousePosition =
+ document.getElementsByClassName("ol-mouse-position")[0];
let olScaleLine = document.getElementsByClassName("ol-scale-line")[0];
if (activeSideLeft) {
olMousePosition.classList.add("active-side-left");
olScaleLine.classList.add("active-side-left");
- }
- else {
+ } else {
olMousePosition.classList.remove("active-side-left");
olScaleLine.classList.remove("active-side-left");
}
@@ -1344,7 +1416,7 @@ class MapToolbar extends Component {
return (
*/}
-
{/* this.toggleBtnDropMeasure()}>
@@ -1441,7 +1512,7 @@ class MapToolbar extends Component {
*/}
-
{/**/}
*/}
*/}
- )
- }
+ );
+ };
toggleBarProggress = () => {
- this.props.toggleProggresBottom()
- }
+ this.props.toggleProggresBottom();
+ };
togglePieStatus = () => {
- this.props.toggleStatusRight()
- }
+ this.props.toggleStatusRight();
+ };
finishDrawingAdd = () => {
// const { DrawingUtil, drawingLayer, chosenLayer } = this.state;
@@ -1550,10 +1620,16 @@ class MapToolbar extends Component {
// Removing DrawingLayer and ChosenLayer layer
let layersToRemove = [];
this.props.olmap.getLayers().forEach(function (layer) {
- if (layer.get('name') !== undefined && layer.get('name') === 'DrawingLayer') {
+ if (
+ layer.get("name") !== undefined &&
+ layer.get("name") === "DrawingLayer"
+ ) {
layersToRemove.push(layer);
}
- if (layer.get('name') !== undefined && layer.get('name') == 'ChosenLayer') {
+ if (
+ layer.get("name") !== undefined &&
+ layer.get("name") == "ChosenLayer"
+ ) {
layersToRemove.push(layer);
}
});
@@ -1566,7 +1642,7 @@ class MapToolbar extends Component {
// // Calling props cancelDraw in MapToolbar.js
// this.props.cancelDraw();
- }
+ };
mapMeasurement = () => {
// console.log()
@@ -1585,19 +1661,22 @@ class MapToolbar extends Component {
)*/
- }
+ };
toggleBtnDropMeasure = () => {
- this.setState({ btnDropMeasureVisible: !this.state.btnDropMeasureVisible }, () => {
- if (!this.state.btnDropMeasureVisible) {
- this.setState({
- // measureVisible: false,
- measureName: '',
- measureType: ''
- });
+ this.setState(
+ { btnDropMeasureVisible: !this.state.btnDropMeasureVisible },
+ () => {
+ if (!this.state.btnDropMeasureVisible) {
+ this.setState({
+ // measureVisible: false,
+ measureName: "",
+ measureType: "",
+ });
+ }
}
- });
- }
+ );
+ };
// toggleBt
@@ -1610,12 +1689,18 @@ class MapToolbar extends Component {
}*/
pointerMoveHandler = (evt) => {
- let { sketch, helpTooltipElement, helpTooltip, continuePolygonMsg, continueLineMsg } = this.state;
+ let {
+ sketch,
+ helpTooltipElement,
+ helpTooltip,
+ continuePolygonMsg,
+ continueLineMsg,
+ } = this.state;
if (evt.dragging) {
return;
}
/** @type {string} */
- var helpMsg = 'Click to start drawing';
+ var helpMsg = "Click to start drawing";
if (sketch) {
var geom = sketch.getGeometry();
@@ -1629,7 +1714,7 @@ class MapToolbar extends Component {
// helpTooltipElement.innerHTML = helpMsg;
helpTooltip.setPosition(evt.coordinate);
- helpTooltipElement.classList.remove('hidden');
+ helpTooltipElement.classList.remove("hidden");
};
restartMeasureMap = () => {
@@ -1637,52 +1722,55 @@ class MapToolbar extends Component {
let { measureType, measureDraw } = this.state;
// empty measureValue
- this.setState({ measureValue: '' });
+ this.setState({ measureValue: "" });
// clear the layer source of measureLayer
this.measureLayer.getSource().clear();
// remove interaction of measureDraw
olmap.removeInteraction(measureDraw);
- }
+ };
deactiveMeasureMap = () => {
const { olmap } = this.props;
this.restartMeasureMap();
- this.setState({ measureType: '' });
+ this.setState({ measureType: "" });
// removing measure_layer
olmap.getLayers().forEach((layer, i) => {
- if (layer.get('name') == 'measure_layer') {
+ if (layer.get("name") == "measure_layer") {
olmap.removeLayer(layer);
}
- })
- }
+ });
+ };
toggleMeasure = (type) => {
- this.setState({
- measureType: type
- }, () => {
- let { olmap } = this.props;
- let { measureType, measureDraw } = this.state;
+ this.setState(
+ {
+ measureType: type,
+ },
+ () => {
+ let { olmap } = this.props;
+ let { measureType, measureDraw } = this.state;
- this.restartMeasureMap();
+ this.restartMeasureMap();
- // olmap.on('pointermove', this.pointerMoveHandler.bind(this));
+ // olmap.on('pointermove', this.pointerMoveHandler.bind(this));
- // removing measure_layer first
- olmap.getLayers().forEach((layer, i) => {
- if (layer.get('name') == 'measure_layer') {
- olmap.removeLayer(layer);
- }
- })
+ // removing measure_layer first
+ olmap.getLayers().forEach((layer, i) => {
+ if (layer.get("name") == "measure_layer") {
+ olmap.removeLayer(layer);
+ }
+ });
- // then recreate new measure_layer (in case if user changing measure type)
- olmap.addLayer(this.measureLayer);
+ // then recreate new measure_layer (in case if user changing measure type)
+ olmap.addLayer(this.measureLayer);
- this.addInteractionMeasure(measureType);
- })
- }
+ this.addInteractionMeasure(measureType);
+ }
+ );
+ };
addInteractionMeasure = (measureType) => {
// let type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
@@ -1693,85 +1781,79 @@ class MapToolbar extends Component {
type: measureType,
style: new Style({
fill: new Fill({
- color: 'rgba(255, 255, 255, 0.7)'
+ color: "rgba(255, 255, 255, 0.7)",
}),
stroke: new Stroke({
- color: 'rgba(0, 0, 0, 0.5)',
+ color: "rgba(0, 0, 0, 0.5)",
lineDash: [10, 10],
- width: 3
+ width: 3,
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
- color: 'rgba(0, 0, 0, 0.7)'
+ color: "rgba(0, 0, 0, 0.7)",
}),
fill: new Fill({
- color: 'rgba(255, 255, 255, 0.2)'
- })
- })
- })
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ }),
+ }),
});
this.setState({ measureDraw: measure }, () => {
let { measureDraw, measureTooltipElement, measureTooltip } = this.state;
let { olmap } = this.props;
olmap.addInteraction(measureDraw);
-
// createMeasureTooltip();
// createHelpTooltip();
-
-
var listener;
- measureDraw.on('drawstart',
- (evt) => {
-
- // clear the layer source of measureLayer
- this.measureLayer.getSource().clear();
-
- // set sketch
- sketch = evt.feature;
-
- /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
- var tooltipCoord = evt.coordinate;
-
- listener = sketch.getGeometry().on('change', (evt) => {
- var geom = evt.target;
- var output;
- if (geom instanceof Polygon) {
- // console.log('geom Polygon',geom);
- output = formatArea(geom);
- tooltipCoord = geom.getInteriorPoint().getCoordinates();
- console.log('tooltipCoord', tooltipCoord);
- // console.log('output Polygon', output);
- this.setState({ measureValue: output });
- } else if (geom instanceof LineString) {
- output = formatLength(geom);
- tooltipCoord = geom.getLastCoordinate();
- // console.log('tooltipCoord', tooltipCoord);
- // console.log('output LineString', output);
- this.setState({ measureValue: output });
- }
- // measureTooltipElement.innerHTML = output;
- // measureTooltip.setPosition(tooltipCoord);
- });
+ measureDraw.on("drawstart", (evt) => {
+ // clear the layer source of measureLayer
+ this.measureLayer.getSource().clear();
+
+ // set sketch
+ sketch = evt.feature;
+
+ /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
+ var tooltipCoord = evt.coordinate;
+
+ listener = sketch.getGeometry().on("change", (evt) => {
+ var geom = evt.target;
+ var output;
+ if (geom instanceof Polygon) {
+ // console.log('geom Polygon',geom);
+ output = formatArea(geom);
+ tooltipCoord = geom.getInteriorPoint().getCoordinates();
+ console.log("tooltipCoord", tooltipCoord);
+ // console.log('output Polygon', output);
+ this.setState({ measureValue: output });
+ } else if (geom instanceof LineString) {
+ output = formatLength(geom);
+ tooltipCoord = geom.getLastCoordinate();
+ // console.log('tooltipCoord', tooltipCoord);
+ // console.log('output LineString', output);
+ this.setState({ measureValue: output });
+ }
+ // measureTooltipElement.innerHTML = output;
+ // measureTooltip.setPosition(tooltipCoord);
});
+ });
- measureDraw.on('drawend',
- () => {
- // measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
- // measureTooltip.setOffset([0, -7]);
- // unset sketch
- sketch = null;
- // unset tooltip so that a new one can be created
- measureTooltipElement = null;
- // this.createMeasureTooltip();
- // olmap.removeInteraction(measureDraw);
-
- unByKey(listener);
- });
+ measureDraw.on("drawend", () => {
+ // measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+ // measureTooltip.setOffset([0, -7]);
+ // unset sketch
+ sketch = null;
+ // unset tooltip so that a new one can be created
+ measureTooltipElement = null;
+ // this.createMeasureTooltip();
+ // olmap.removeInteraction(measureDraw);
+
+ unByKey(listener);
+ });
});
- }
+ };
/**
* Creates a new measure tooltip
@@ -1782,15 +1864,15 @@ class MapToolbar extends Component {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
- measureTooltipElement = document.createElement('div');
- measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+ measureTooltipElement = document.createElement("div");
+ measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
measureTooltip = new Overlay({
element: measureTooltipElement,
offset: [0, -15],
- positioning: 'bottom-center'
+ positioning: "bottom-center",
});
olmap.addOverlay(measureTooltip);
- }
+ };
/*renderMeasureContent = () => {
const { measureVisible } = this.state;
@@ -1810,21 +1892,19 @@ class MapToolbar extends Component {
let layers = [];
olmap.getLayers().forEach((layer, i) => {
- if (layer.get('type') !== 'base') {
- if (layer.get('type') !== 'vector') {
- if (layer.get('type') == 'layerGroup') {
+ if (layer.get("type") !== "base") {
+ if (layer.get("type") !== "vector") {
+ if (layer.get("type") == "layerGroup") {
// layer.getLayers().forEach((sublayer, i) => {
// if (sublayer.getVisible()) {
// url = sublayer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/json'});
// if (url) {
// promises.push(axios.get(url));
// }
-
// }
// });
// layers.push(layer);
- }
- else {
+ } else {
// if (layer.getVisible()) {
// url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/json'});
// if (url) {
@@ -1836,69 +1916,68 @@ class MapToolbar extends Component {
}
}
});
-
-
- }
+ };
toggleQueryBuilder = () => {
- this.setState({ queryBuilderVisible: !this.state.queryBuilderVisible })
- }
+ this.setState({ queryBuilderVisible: !this.state.queryBuilderVisible });
+ };
handleQbClose = (query, type, tree) => {
this.toggleQueryBuilder();
- this.props.handleQueryBuilder(query, type, tree)
- }
+ this.props.handleQueryBuilder(query, type, tree);
+ };
handleQbReset = (query, type) => {
- this.setState({ queryBuilderVisible: false })
- this.props.handleQueryBuilder(query, type, '')
- }
+ this.setState({ queryBuilderVisible: false });
+ this.props.handleQueryBuilder(query, type, "");
+ };
onPagination = (current, pageSize) => {
- this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
- this.getDataTableDetail();
- })
- }
+ this.setState(
+ { currentPage: current, page: (current - 1) * pageSize },
+ () => {
+ this.getDataTableDetail();
+ }
+ );
+ };
onShowSizeChange = (current, pageSize) => {
this.setState({ rowsPerPage: pageSize }, () => {
this.getDataTableDetail();
- })
- }
+ });
+ };
handleSearchtype = (field) => {
- this.setState({ searchDetailField:field });
- }
+ this.setState({ searchDetailField: field });
+ };
handleSearch = (val) => {
- this.setState({ search:val });
+ this.setState({ search: val });
this.getDataTableDetail();
- }
+ };
setTableType = (type) => {
- this.setState({table_type:type, search:""},()=> {
+ this.setState({ table_type: type, search: "" }, () => {
this.getDataTableDetail();
- })
- }
+ });
+ };
getDataTableDetail = async () => {
- const {
- searchDetailField,
- search,
- currentPage,
- rowsPerPage
- } = this.state
+ const { searchDetailField, search, currentPage, rowsPerPage } = this.state;
let param = {
- table_type:this.state.table_type,
+ table_type: this.state.table_type,
currentPage,
rowsPerPage,
searchDetailField,
search,
- }
+ };
let dataRes = await requestTableDailyInfoApi(param);
- this.setState({ mapTableData:dataRes.data, totalRecord:dataRes.total_record});
- }
+ this.setState({
+ mapTableData: dataRes.data,
+ totalRecord: dataRes.total_record,
+ });
+ };
render() {
const { isReady } = this.state;
@@ -1915,10 +1994,15 @@ class MapToolbar extends Component {
visible={this.state.drawerLayerVisible}
mask={false}
width={300}
- style={{ height: this.props.proggressBottom ? `50vh` : `100vh`, position: 'absolute' }}
+ style={{
+ height: this.props.proggressBottom ? `50vh` : `100vh`,
+ position: "absolute",
+ }}
>
this.props.onCheckOpt(state, checkedKeys)}
+ onCheckOpt={(state, checkedKeys) =>
+ this.props.onCheckOpt(state, checkedKeys)
+ }
checkedKeysSales={this.props.checkedKeysSales}
checkedKeysCustomer={this.props.checkedKeysCustomer}
checkedKeysOffice={this.props.checkedKeysOffice}
@@ -1928,11 +2012,15 @@ class MapToolbar extends Component {
salesGroupTree={this.props.salesGroupTree}
employeeDivisionTree={this.props.employeeDivisionTree}
setSalesGroupTree={(data) => this.props.setSalesGroupTree(data)}
- setEmployeeDivisionTree={(data) => this.props.setEmployeeDivisionTree(data)}
+ setEmployeeDivisionTree={(data) =>
+ this.props.setEmployeeDivisionTree(data)
+ }
projectTree={this.props.projectTree}
setProjectTree={(data) => this.props.setProjectTree(data)}
checkedKeysProjectTree={this.props.checkedKeysProjectTree}
- setCheckedKeysProjectTree={(data) => this.props.setCheckedKeysProjectTree(data)}
+ setCheckedKeysProjectTree={(data) =>
+ this.props.setCheckedKeysProjectTree(data)
+ }
/>
@@ -1944,15 +2032,19 @@ class MapToolbar extends Component {
visible={this.state.drawerDailyInfo}
mask={false}
width={250}
- style={{ height: 'calc(100vh - (100vh / 2))', position: 'absolute' }}
+ style={{ height: "calc(100vh - (100vh / 2))", position: "absolute" }}
>
this.setState({ mapTableTitle: name })}
- setMapTableColumns={(data) => this.setState({ mapTableColumns: data })}
+ setMapTableColumns={(data) =>
+ this.setState({ mapTableColumns: data })
+ }
setMapTableData={(data) => this.setState({ mapTableData: data })}
- removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)}
+ removeLayerByName={(layerName) =>
+ this.props.removeLayerByName(layerName)
+ }
setIsProcessing={(data) => this.props.setIsProcessing(data)}
getDataTableDetail={this.getDataTableDetail}
setTableType={this.setTableType}
@@ -1967,7 +2059,7 @@ class MapToolbar extends Component {
visible={this.state.drawerSearchVisible}
mask={false}
width={300}
- style={{ height: 'calc(100vh - (100vh / 2))', position: 'absolute' }}
+ style={{ height: "calc(100vh - (100vh / 2))", position: "absolute" }}
>
-
+ style={{ height: "calc(100vh - (100vh / 2))", position: "absolute" }}
+ >
{this.renderToolbarButtons()}
-
+
-
} */}
- {this.state.mapTableModalVisible &&
+ {this.state.mapTableModalVisible && (
this.props.openPopupRight()}
refreshMapTable={() => this.refreshMapTable()}
showRoute={(route) => this.props.showRoute(route)}
- removeLayerByName={(layerName) => this.props.removeLayerByName(layerName)}
+ removeLayerByName={(layerName) =>
+ this.props.removeLayerByName(layerName)
+ }
setIsProcessing={(data) => this.props.setIsProcessing(data)}
onShowSizeChange={this.onShowSizeChange}
onPagination={this.onPagination}
@@ -2078,9 +2170,9 @@ class MapToolbar extends Component {
handleSearch={this.handleSearch}
search={this.state.search}
/>
- }
+ )}
- {this.state.drawingToolVisible &&
+ {this.state.drawingToolVisible && (
this.toggleAddFeatureVisible()}
setAddFeatureValue={(obj) => this.setAddFeatureValue(obj)}
- setDrawingState={(DrawingUtil, drawingLayer, chosenLayer) => this.setState({
- DrawingUtil: DrawingUtil,
- drawingLayer: drawingLayer,
- chosenLayer: chosenLayer
- })}
+ setDrawingState={(DrawingUtil, drawingLayer, chosenLayer) =>
+ this.setState({
+ DrawingUtil: DrawingUtil,
+ drawingLayer: drawingLayer,
+ chosenLayer: chosenLayer,
+ })
+ }
/>
- }
+ )}
- {this.state.addFeatureVisible &&
+ {this.state.addFeatureVisible && (
this.finishDrawingAdd()}
/>
- }
+ )}
- {this.state.createNewLayerVisible &&
+ {this.state.createNewLayerVisible && (
- }
+ )}
- {this.state.legendVisible && this.toggleLegend()} />}
+ {this.state.legendVisible && (
+ this.toggleLegend()}
+ />
+ )}
{/* this.state.measureVisible &&
} */}
- {this.state.measureVisible &&
+ {this.state.measureVisible && (
this.toggleMeasure(type)}
toggleMeasureVisible={() => this.toggleMeasureVisible()}
measureType={this.state.measureType}
measureValue={this.state.measureValue}
/>
- }
+ )}
- )
+ );
}
}
-export default MapToolbar;
\ No newline at end of file
+export default MapToolbar;
diff --git a/src/routes.js b/src/routes.js
index 5c8163c..be14404 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,113 +1,280 @@
-import React from 'react';
+import React from "react";
-const BaseLayers = React.lazy(() => import('./views/BaseLayers'));
-const Layers = React.lazy(() => import('./views/Layers/Layers'));
-const Layer = React.lazy(() => import('./views/Layers/Layer'));
-const MapConfig = React.lazy(() => import('./views/MapConfig'));
+const BaseLayers = React.lazy(() => import("./views/BaseLayers"));
+const Layers = React.lazy(() => import("./views/Layers/Layers"));
+const Layer = React.lazy(() => import("./views/Layers/Layer"));
+const MapConfig = React.lazy(() => import("./views/MapConfig"));
// const DashboardKominfo = React.lazy(() => import('./views/DashboardKominfo'));
// const Sales = React.lazy(() => import('./views/Master/MasterSales'));
// const GroupSales = React.lazy(() => import('./views/Master/MasterGroupSales'));
-const OfficeHours = React.lazy(() => import('./views/Master/MasterOfficeHours'));
+const OfficeHours = React.lazy(() =>
+ import("./views/Master/MasterOfficeHours")
+);
// const Customer = React.lazy(() => import('./views/Master/MasterCustomer'));
// const SettingSales = React.lazy(() => import('./views/Master/MasterSales/SettingSales'));
// const SettingOffice = React.lazy(() => import('./views/Master/MasterOffice/SettingOffice'));
// const SettingCustomer = React.lazy(() => import('./views/Master/MasterCustomer/SettingCustomer'));
// new
-const DivisiKaryawan = React.lazy(() => import('./views/Master/MasterTipeKaryawan'));
-const UserAdmin = React.lazy(() => import('./views/Master/UserAdmin'));
+const DivisiKaryawan = React.lazy(() =>
+ import("./views/Master/MasterTipeKaryawan")
+);
+const UserAdmin = React.lazy(() => import("./views/Master/UserAdmin"));
// const UserWaspang = React.lazy(() => import('./views/Master/UserWaspang'));
-const Presensi = React.lazy(() => import('./views/SimproV2/Presence'));
-const LaporanTugas = React.lazy(() => import('./views/Master/MasterTask'));
-const Izin = React.lazy(() => import('./views/Master/MasterCuti'));
-const Roles = React.lazy(() => import('./views/Master/MasterRoles'));
-const ProjectRole = React.lazy(() => import('./views/Master/RoleProject'));
-const Menu = React.lazy(() => import('./views/Master/MasterMenu'));
-const Broadcast = React.lazy(() => import('./views/Master/MasterBroadcast'));
-const PanicButton = React.lazy(() => import('./views/SimproV2/PanicButton'));
-const Absensi = React.lazy(() => import('./views/Master/MasterAbsensi'));
-const Lembur = React.lazy(() => import('./views/Master/MasterLembur'));
-const Organization = React.lazy(() => import('./views/Master/MasterOrganization'));
-const Proyek = React.lazy(() => import('./views/Master/Proyek'));
+const Presensi = React.lazy(() => import("./views/SimproV2/Presence"));
+const LaporanTugas = React.lazy(() => import("./views/Master/MasterTask"));
+const Izin = React.lazy(() => import("./views/Master/MasterCuti"));
+const Roles = React.lazy(() => import("./views/Master/MasterRoles"));
+const ProjectRole = React.lazy(() => import("./views/Master/RoleProject"));
+const Menu = React.lazy(() => import("./views/Master/MasterMenu"));
+const Broadcast = React.lazy(() => import("./views/Master/MasterBroadcast"));
+const PanicButton = React.lazy(() => import("./views/SimproV2/PanicButton"));
+const Absensi = React.lazy(() => import("./views/Master/MasterAbsensi"));
+const Lembur = React.lazy(() => import("./views/Master/MasterLembur"));
+const Organization = React.lazy(() =>
+ import("./views/Master/MasterOrganization")
+);
+const Proyek = React.lazy(() => import("./views/Master/Proyek"));
// const SubProyek = React.lazy(() => import('./views/Master/SubProyek'));
-const DashboardSimpro = React.lazy(() => import('./views/DashboardSimpro'));
-const controlMonitoring = React.lazy(() => import('./views/Report/ControlMonitoring'));
-const K3 = React.lazy(() => import('./views/Report/k3'));
-const TestGantt = React.lazy(() => import('./views/testgantt'));
-const ConfigAlert = React.lazy(() => import('./views/Master/ConfigAlert'));
+const DashboardSimpro = React.lazy(() => import("./views/DashboardSimpro"));
+const controlMonitoring = React.lazy(() =>
+ import("./views/Report/ControlMonitoring")
+);
+const K3 = React.lazy(() => import("./views/Report/k3"));
+const TestGantt = React.lazy(() => import("./views/testgantt"));
+const ConfigAlert = React.lazy(() => import("./views/Master/ConfigAlert"));
// const NetworkDiagram = React.lazy(() => import('./views/Master/NetworkDiagram'));
-const LaporanAlert = React.lazy(() => import('./views/Report/alert'));
-const ControlMonitoringGantt = React.lazy(() => import('./views/ControlMonitoringGantt'));
-const CreatedProyek = React.lazy(() => import('./views/SimproV2/CreatedProyek'));
-const ResourceWorker = React.lazy(() => import('./views/SimproV2/ResourceWorker'));
-const ResourceMaterial = React.lazy(() => import('./views/SimproV2/ResourceMaterial'));
-const ResourceTools = React.lazy(() => import('./views/SimproV2/ResourceTools'));
-const PlanningHarian = React.lazy(() => import('./views/SimproV2/PlanningHarian'));
-const Closing = React.lazy(() => import('./views/SimproV2/Closing'));
-const ProjectType = React.lazy(() => import('./views/SimproV2/ProjectType'));
-const Divisi = React.lazy(() => import('./views/SimproV2/Divisi'));
-const Satuan = React.lazy(() => import('./views/SimproV2/Satuan'));
-const RateCost = React.lazy(() => import('./views/SimproV2/RateCost'));
-const Gantt = React.lazy(() => import('./views/SimproV2/Gantt'));
-const Shift = React.lazy(() => import('./views/SimproV2/Shift'));
-const UserShift = React.lazy(() => import('./views/SimproV2/UserShift'));
-const ScheduleShift = React.lazy(() => import('./views/SimproV2/ScheduleShift'));
-const ChecklistK3 = React.lazy(() => import('./views/SimproV2/ChecklistK3'));
-const DashboardPMO = React.lazy(() => import('./views/DashboardPMO'));
-const DashboardProject = React.lazy(() => import('./views/DashboardProject'));
-const DashboardSecurity = React.lazy(() => import('./views/DashboardSecurity'));
+const LaporanAlert = React.lazy(() => import("./views/Report/alert"));
+const ControlMonitoringGantt = React.lazy(() =>
+ import("./views/ControlMonitoringGantt")
+);
+const CreatedProyek = React.lazy(() =>
+ import("./views/SimproV2/CreatedProyek")
+);
+const ResourceWorker = React.lazy(() =>
+ import("./views/SimproV2/ResourceWorker")
+);
+const ResourceMaterial = React.lazy(() =>
+ import("./views/SimproV2/ResourceMaterial")
+);
+const ResourceTools = React.lazy(() =>
+ import("./views/SimproV2/ResourceTools")
+);
+const PlanningHarian = React.lazy(() =>
+ import("./views/SimproV2/PlanningHarian")
+);
+const Closing = React.lazy(() => import("./views/SimproV2/Closing"));
+const ProjectType = React.lazy(() => import("./views/SimproV2/ProjectType"));
+const Divisi = React.lazy(() => import("./views/SimproV2/Divisi"));
+const Satuan = React.lazy(() => import("./views/SimproV2/Satuan"));
+const RateCost = React.lazy(() => import("./views/SimproV2/RateCost"));
+const Gantt = React.lazy(() => import("./views/SimproV2/Gantt"));
+const Shift = React.lazy(() => import("./views/SimproV2/Shift"));
+const UserShift = React.lazy(() => import("./views/SimproV2/UserShift"));
+const ScheduleShift = React.lazy(() =>
+ import("./views/SimproV2/ScheduleShift")
+);
+const ChecklistK3 = React.lazy(() => import("./views/SimproV2/ChecklistK3"));
+const DashboardPMO = React.lazy(() => import("./views/DashboardPMO"));
+const DashboardProject = React.lazy(() => import("./views/DashboardProject"));
+const DashboardSecurity = React.lazy(() => import("./views/DashboardSecurity"));
// const PlanningVsRealisasi = React.lazy(() => import('./views/Master/PlanningVsRealisasi'));
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
- { path: '/', exact: true, name: 'Home' },
- { path: '/dashboard', name: 'Dashboard', component: DashboardSimpro },
- { path: '/map/config', exact: true, name: 'Config', component: MapConfig },
- { path: '/map/baselayers', exact: true, name: 'Base Layers', component: BaseLayers },
- { path: '/map/layers', exact: true, name: 'Layers', component: Layers },
- { path: '/map/layers/:id', exact: true, name: 'Layer Details', component: Layer },
- { path: '/office-hours', exact: true, name: 'Jam Kerja', component: OfficeHours },
- { path: '/user-admin', exact: true, name: 'User Admin', component: UserAdmin },
+ { path: "/", exact: true, name: "Home" },
+ { path: "/dashboard", name: "Dashboard", component: DashboardSimpro },
+ { path: "/map/config", exact: true, name: "Config", component: MapConfig },
+ {
+ path: "/map/baselayers",
+ exact: true,
+ name: "Base Layers",
+ component: BaseLayers,
+ },
+ { path: "/map/layers", exact: true, name: "Layers", component: Layers },
+ {
+ path: "/map/layers/:id",
+ exact: true,
+ name: "Layer Details",
+ component: Layer,
+ },
+ {
+ path: "/office-hours",
+ exact: true,
+ name: "Jam Kerja",
+ component: OfficeHours,
+ },
+ {
+ path: "/user-admin",
+ exact: true,
+ name: "User Admin",
+ component: UserAdmin,
+ },
// { path: '/user-waspang', exact: true, name: 'User Waspang', component: UserWaspang },
- { path: '/divisi-karyawan', exact: true, name: 'Divisi Karyawan', component: DivisiKaryawan },
- { path: '/presensi', exact: true, name: 'Presensi', component: Presensi },
- { path: '/absensi', exact: true, name: 'Absensi', component: Absensi },
- { path: '/laporan-tugas-karyawan', exact: true, name: 'Laporan Tugas Karyawan', component: LaporanTugas },
- { path: '/izin', exact: true, name: 'Izin', component: Izin },
- { path: '/broadcast', exact: true, name: 'Broadcast', component: Broadcast },
- { path: '/panic-button', exact: true, name: 'Tombol Darurat', component: PanicButton },
- { path: '/proyek', exact: true, name: 'Created Project', component: Proyek },
+ {
+ path: "/divisi-karyawan",
+ exact: true,
+ name: "Divisi Karyawan",
+ component: DivisiKaryawan,
+ },
+ { path: "/presensi", exact: true, name: "Presensi", component: Presensi },
+ { path: "/absensi", exact: true, name: "Absensi", component: Absensi },
+ {
+ path: "/laporan-tugas-karyawan",
+ exact: true,
+ name: "Laporan Tugas Karyawan",
+ component: LaporanTugas,
+ },
+ { path: "/izin", exact: true, name: "Izin", component: Izin },
+ { path: "/broadcast", exact: true, name: "Broadcast", component: Broadcast },
+ {
+ path: "/panic-button",
+ exact: true,
+ name: "Tombol Darurat",
+ component: PanicButton,
+ },
+ { path: "/proyek", exact: true, name: "Created Project", component: Proyek },
// { path: '/sub-proyek', exact: true, name: 'Subproyek', component: SubProyek },
- { path: '/menu', exact: true, name: 'Menu', component: Menu },
- { path: '/roles', exact: true, name: 'Roles', component: Roles },
- { path: '/lembur', exact: true, name: 'Lembur', component: Lembur },
- { path: '/organization', exact: true, name: 'Organisasi', component: Organization },
- { path: '/control-monitoring', exact: true, name: 'Control Monitoring', component: controlMonitoring },
- { path: '/laporan-k3', exact: true, name: 'Laporan K3', component: K3 },
- { path: '/proyek-gantt', exact: true, name: 'Gantt Chart Proyek', component: TestGantt },
- { path: '/config-alert', exact: true, name: 'Config Alert', component: ConfigAlert },
- { path: '/laporan-alert', exact: true, name: 'Laporan Alert', component: LaporanAlert },
- { path: '/control-monitoring-gantt', exact: true, name: 'Control Monitoring Gantt', component: ControlMonitoringGantt },
- { path: '/projects', exact: true, name: 'Projects', component: CreatedProyek },
- { path: '/human-resource', exact: true, name: 'Human Resource', component: ResourceWorker },
- { path: '/material-resource', exact: true, name: 'Material Resource', component: ResourceMaterial },
- { path: '/tools-resource', exact: true, name: 'Tools Resource', component: ResourceTools },
- { path: '/projects/:id/:project/gantt', exact: true, name: 'Gantt', component: Gantt },
- { path: '/planning-harian', exact: true, name: 'Planning Harian', component: PlanningHarian },
- { path: '/presensi-resource', exact: true, name: 'Presensi Resource', component: Presensi },
- { path: '/absensi-resource', exact: true, name: 'Absensi Resource', component: Absensi },
- { path: '/closing', exact: true, name: 'Closing', component: Closing },
- { path: '/project-type', exact: true, name: 'Project Type', component: ProjectType },
- { path: '/divisi', exact: true, name: 'Divisi', component: Divisi },
- { path: '/satuan', exact: true, name: 'Satuan', component: Satuan },
- { path: '/rate-cost', exact: true, name: 'Rate Cost', component: RateCost },
- { path: '/project-role', exact: true, name: 'Project Role', component: ProjectRole },
- { path: '/working-hour', exact: true, name: 'Working Hour', component: Shift },
- { path: '/user-shift', exact: true, name: 'Shift', component: UserShift },
- { path: '/schedule-shift', exact: true, name: 'Schedule Shift', component: ScheduleShift },
- { path: '/checklist-k3', exact: true, name: 'Checklist K3', component: ChecklistK3 },
- { path: '/dashboard-pmo', exact: true, name: 'Dashboard PMO', component: DashboardPMO },
- { path: '/dashboard-security', exact: true, name: 'Dashboard Security', component: DashboardSecurity },
- { path: '/dashboard-project', exact: true, name: 'Dashboard Project', component: DashboardProject },
+ { path: "/menu", exact: true, name: "Menu", component: Menu },
+ { path: "/roles", exact: true, name: "Roles", component: Roles },
+ { path: "/lembur", exact: true, name: "Lembur", component: Lembur },
+ {
+ path: "/organization",
+ exact: true,
+ name: "Organisasi",
+ component: Organization,
+ },
+ {
+ path: "/control-monitoring",
+ exact: true,
+ name: "Control Monitoring",
+ component: controlMonitoring,
+ },
+ { path: "/laporan-k3", exact: true, name: "Laporan K3", component: K3 },
+ {
+ path: "/proyek-gantt",
+ exact: true,
+ name: "Gantt Chart Proyek",
+ component: TestGantt,
+ },
+ {
+ path: "/config-alert",
+ exact: true,
+ name: "Config Alert",
+ component: ConfigAlert,
+ },
+ {
+ path: "/laporan-alert",
+ exact: true,
+ name: "Laporan Alert",
+ component: LaporanAlert,
+ },
+ {
+ path: "/control-monitoring-gantt",
+ exact: true,
+ name: "Control Monitoring Gantt",
+ component: ControlMonitoringGantt,
+ },
+ {
+ path: "/projects",
+ exact: true,
+ name: "Projects",
+ component: CreatedProyek,
+ },
+ {
+ path: "/human-resource",
+ exact: true,
+ name: "Human Resource",
+ component: ResourceWorker,
+ },
+ {
+ path: "/material-resource",
+ exact: true,
+ name: "Material Resource",
+ component: ResourceMaterial,
+ },
+ {
+ path: "/tools-resource",
+ exact: true,
+ name: "Tools Resource",
+ component: ResourceTools,
+ },
+ {
+ path: "/projects/:id/:project/gantt",
+ exact: true,
+ name: "Gantt",
+ component: Gantt,
+ },
+ {
+ path: "/planning-harian",
+ exact: true,
+ name: "Planning Harian",
+ component: PlanningHarian,
+ },
+ {
+ path: "/presensi-resource",
+ exact: true,
+ name: "Presensi Resource",
+ component: Presensi,
+ },
+ {
+ path: "/absensi-resource",
+ exact: true,
+ name: "Absensi Resource",
+ component: Absensi,
+ },
+ { path: "/closing", exact: true, name: "Closing", component: Closing },
+ {
+ path: "/project-type",
+ exact: true,
+ name: "Project Type",
+ component: ProjectType,
+ },
+ { path: "/divisi", exact: true, name: "Divisi", component: Divisi },
+ { path: "/satuan", exact: true, name: "Satuan", component: Satuan },
+ { path: "/rate-cost", exact: true, name: "Rate Cost", component: RateCost },
+ {
+ path: "/project-role",
+ exact: true,
+ name: "Project Role",
+ component: ProjectRole,
+ },
+ {
+ path: "/working-hour",
+ exact: true,
+ name: "Working Hour",
+ component: Shift,
+ },
+ { path: "/user-shift", exact: true, name: "Shift", component: UserShift },
+ {
+ path: "/schedule-shift",
+ exact: true,
+ name: "Schedule Shift",
+ component: ScheduleShift,
+ },
+ {
+ path: "/checklist-k3",
+ exact: true,
+ name: "Checklist K3",
+ component: ChecklistK3,
+ },
+ {
+ path: "/dashboard-pmo",
+ exact: true,
+ name: "Dashboard PMO",
+ component: DashboardPMO,
+ },
+ {
+ path: "/dashboard-security",
+ exact: true,
+ name: "Dashboard Security",
+ component: DashboardSecurity,
+ },
+ {
+ path: "/dashboard-project",
+ exact: true,
+ name: "Dashboard Project",
+ component: DashboardProject,
+ },
];
export default routes;
diff --git a/src/views/Map/Map_16.js b/src/views/Map/Map_16.js
index 1030c72..3ff9263 100644
--- a/src/views/Map/Map_16.js
+++ b/src/views/Map/Map_16.js
@@ -1,12 +1,19 @@
-import React, { Component, Suspense, Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import React, { Component, Suspense, Fragment } from "react";
+import ReactDOM from "react-dom";
import {
- Container, Col, Row, Button, UncontrolledTooltip,
+ Container,
+ Col,
+ Row,
+ Button,
+ UncontrolledTooltip,
Card,
CardBody,
CardHeader,
Table,
- Modal, ModalHeader, ModalBody, ModalFooter,
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
Carousel,
CarouselItem,
CarouselIndicators,
@@ -15,40 +22,63 @@ import {
ListGroup,
ListGroupItem,
Badge,
- Progress
-} from 'reactstrap';
-import './Map.css';
-import './Popup.css';
-import './CustomScroll.css';
-import 'ol/ol.css';
-import 'antd/dist/antd.css';
-import './react-geo.css';
-
-import OlMap from 'ol/Map';
-import OlView from 'ol/View';
-import OlLayerTile from 'ol/layer/Tile';
-import ImageLayer from 'ol/layer/Image';
-import OlSourceOsm from 'ol/source/OSM';
-import OlSourceTileJson from 'ol/source/TileJSON';
-import OlLayerGroup from 'ol/layer/Group';
-import OlSourceTileWMS from 'ol/source/TileWMS';
-import OlSourceImageWMS from 'ol/source/ImageWMS';
+ Progress,
+} from "reactstrap";
+import "./Map.css";
+import "./Popup.css";
+import "./CustomScroll.css";
+import "ol/ol.css";
+import "antd/dist/antd.css";
+import "./react-geo.css";
+
+import OlMap from "ol/Map";
+import OlView from "ol/View";
+import OlLayerTile from "ol/layer/Tile";
+import ImageLayer from "ol/layer/Image";
+import OlSourceOsm from "ol/source/OSM";
+import OlSourceTileJson from "ol/source/TileJSON";
+import OlLayerGroup from "ol/layer/Group";
+import OlSourceTileWMS from "ol/source/TileWMS";
+import OlSourceImageWMS from "ol/source/ImageWMS";
// import OlLayerSwitcher from 'ol/control/LayerSwitcher';
-import { fromLonLat, transformExtent, transform } from 'ol/proj';
-import { Vector as VectorSource, XYZ as XYZSource, Cluster } from 'ol/source';
-import Overlay from 'ol/Overlay';
-import { Draw, Select, Modify } from 'ol/interaction';
-import Feature from 'ol/Feature';
-import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
-import { Vector as VectorLayer } from 'ol/layer';
-import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl } from 'ol/style';
-import { defaults as defaultControls, MousePosition, ScaleLine } from 'ol/control';
-import { createStringXY, toStringXY } from 'ol/coordinate';
-import GeoJSON from 'ol/format/GeoJSON';
-import WMSCapabilities from 'ol/format/WMSCapabilities';
-import { formatRupiah, formatThousand, sortBy, uniqueKeyValues } from '../../const/CustomFunc'
-
-import { Drawer } from 'antd';
+import { fromLonLat, transformExtent, transform } from "ol/proj";
+import { Vector as VectorSource, XYZ as XYZSource, Cluster } from "ol/source";
+import Overlay from "ol/Overlay";
+import { Draw, Select, Modify } from "ol/interaction";
+import Feature from "ol/Feature";
+import {
+ Point,
+ LineString,
+ Polygon,
+ MultiPoint,
+ MultiLineString,
+ MultiPolygon,
+} from "ol/geom";
+import { Vector as VectorLayer } from "ol/layer";
+import {
+ Circle as CircleStyle,
+ Fill,
+ Stroke,
+ Style,
+ Text,
+ Icon as IconOl,
+} from "ol/style";
+import {
+ defaults as defaultControls,
+ MousePosition,
+ ScaleLine,
+} from "ol/control";
+import { createStringXY, toStringXY } from "ol/coordinate";
+import GeoJSON from "ol/format/GeoJSON";
+import WMSCapabilities from "ol/format/WMSCapabilities";
+import {
+ formatRupiah,
+ formatThousand,
+ sortBy,
+ uniqueKeyValues,
+} from "../../const/CustomFunc";
+
+import { Drawer } from "antd";
import {
SimpleButton,
MapComponent,
@@ -59,39 +89,59 @@ import {
mappify,
onDropAware,
// AddWmsPanel
-} from '@terrestris/react-geo';
+} from "@terrestris/react-geo";
-import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil';
-import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher';
-import axios from 'axios';
-import PopupContainer from '../../components/PopupContainer/PopupContainer';
-import {
- AppHeader
-} from '@coreui/react';
+import CapabilitiesUtil from "@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil";
+import LayerSwitcher from "@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher";
+import axios from "axios";
+import PopupContainer from "../../components/PopupContainer/PopupContainer";
+import { AppHeader } from "@coreui/react";
// import MapHeader from '../../components/MapHeader/MapHeader';
-import MapToolbar from '../../components/MapToolbar/MapToolbar';
-import DrawingTool from '../../components/DrawingTool/DrawingTool';
-import ImagePopup from '../../components/ImagePopup/ImagePopup';
-import ImageSlider from '../../components/ImageSlider/ImageSlider';
-import RoutingBar from '../../components/RoutingBar/RoutingBar';
+import MapToolbar from "../../components/MapToolbar/MapToolbar";
+import DrawingTool from "../../components/DrawingTool/DrawingTool";
+import ImagePopup from "../../components/ImagePopup/ImagePopup";
+import ImageSlider from "../../components/ImageSlider/ImageSlider";
+import RoutingBar from "../../components/RoutingBar/RoutingBar";
// import MapLayerSwitcher from '../../components/MapLayerSwitcher';
import {
- appConfig, setRequestMapHeader, layerStyleUrl, BMD_DENPASAR_MAPSERVICE_URL, IU_MAPSERVICE_URL, MAP_ID, emptyConstants,
- WMS_CAPABILITIES_URL_2
-} from '../../const/MapConst.js';
-import { Icon } from '@iconify/react';
-import imageOutline from '@iconify/icons-ion/image-outline';
-import trashOutline from '@iconify/icons-ion/trash-outline';
-import ellipsisVerticalSharp from '@iconify/icons-ion/ellipsis-vertical-sharp';
-import listOutline from '@iconify/icons-ion/list-outline';
-import brushIcon from '@iconify/icons-ion/brush';
-import createOutline from '@iconify/icons-ion/create-outline';
-import contractIcon from '@iconify/icons-ion/contract';
-import country_indonesia from '../../assets/json/indonesia.json';
-import { test, getGeomType, updateMap, getLayerAttribute, getLayerColor, getRandomColor } from '../../const/GeoserverFunc.js';
+ appConfig,
+ setRequestMapHeader,
+ layerStyleUrl,
+ BMD_DENPASAR_MAPSERVICE_URL,
+ IU_MAPSERVICE_URL,
+ MAP_ID,
+ emptyConstants,
+ WMS_CAPABILITIES_URL_2,
+} from "../../const/MapConst.js";
+import { Icon } from "@iconify/react";
+import imageOutline from "@iconify/icons-ion/image-outline";
+import trashOutline from "@iconify/icons-ion/trash-outline";
+import ellipsisVerticalSharp from "@iconify/icons-ion/ellipsis-vertical-sharp";
+import listOutline from "@iconify/icons-ion/list-outline";
+import brushIcon from "@iconify/icons-ion/brush";
+import createOutline from "@iconify/icons-ion/create-outline";
+import contractIcon from "@iconify/icons-ion/contract";
+import country_indonesia from "../../assets/json/indonesia.json";
import {
- API_UPDATE_MAP, API_LOAD_MAP, API_LAYER_SEARCH_LABEL, API_GET_CHART_KATEGORI, PROYEK_SEARCH,
- USERPROYEK_SEARCH, DASHBOARD_STATUS_SEARCH, DASHBOARD_PROYEK_SEARCH, PRESENSI_SEARCH, ABSENSI_SEARCH, PANIC_BUTTON_SEARCH,
+ test,
+ getGeomType,
+ updateMap,
+ getLayerAttribute,
+ getLayerColor,
+ getRandomColor,
+} from "../../const/GeoserverFunc.js";
+import {
+ API_UPDATE_MAP,
+ API_LOAD_MAP,
+ API_LAYER_SEARCH_LABEL,
+ API_GET_CHART_KATEGORI,
+ PROYEK_SEARCH,
+ USERPROYEK_SEARCH,
+ DASHBOARD_STATUS_SEARCH,
+ DASHBOARD_PROYEK_SEARCH,
+ PRESENSI_SEARCH,
+ ABSENSI_SEARCH,
+ PANIC_BUTTON_SEARCH,
DASHBOARD_COST_PLANNING_ACTUAL,
DASHBOARD_PERSENTASE_PROGRESS_PROYEK,
DASHBOARD_REPORT_POINTS,
@@ -99,38 +149,60 @@ import {
DASHBOARD_KURVA_S,
GET_PERCENTAGE_PERDAY,
APP_MODE,
- PRESENCE_SEARCH
-} from '../../const/ApiConst.js';
-import { getSalesRoutingApi, getSalesFeatures, getOfficeFeatures, getCustomerFeatures, getEmployeeFeatures, getEmployeeRoutingApi, getWaspangRoutingApi, getPresensiRoutingApi } from '../../const/GeohrApiFunc.js';
-import { SALES_FEATURES_STYLE, CUSTOMER_FEATURES_STYLE, OFFICE_FEATURES_STYLE, ROUTE_MAP_STYLES, EMPLOYEE_FEATURES_STYLE, PROJECT_FEATURES_STYLE, WASPANG_FEATURES_STYLE, LAPORAN_FEATURES_STYLE, PRESENSI_FEATURES_STYLE } from '../../const/GeohrMapStyles.js';
-import SweetAlert from 'react-bootstrap-sweetalert';
+ PRESENCE_SEARCH,
+} from "../../const/ApiConst.js";
+import {
+ getSalesRoutingApi,
+ getSalesFeatures,
+ getOfficeFeatures,
+ getCustomerFeatures,
+ getEmployeeFeatures,
+ getEmployeeRoutingApi,
+ getWaspangRoutingApi,
+ getPresensiRoutingApi,
+} from "../../const/GeohrApiFunc.js";
+import {
+ SALES_FEATURES_STYLE,
+ CUSTOMER_FEATURES_STYLE,
+ OFFICE_FEATURES_STYLE,
+ ROUTE_MAP_STYLES,
+ EMPLOYEE_FEATURES_STYLE,
+ PROJECT_FEATURES_STYLE,
+ WASPANG_FEATURES_STYLE,
+ LAPORAN_FEATURES_STYLE,
+ PRESENSI_FEATURES_STYLE,
+} from "../../const/GeohrMapStyles.js";
+import SweetAlert from "react-bootstrap-sweetalert";
import moment from "moment";
-import salesGeojson from '../../dummy_data/sales.geojson';
-import routeDummy from '../../dummy_data/route2.json';
-import { demografiTree, analisaTree } from '../../const/LayerTreeConst.js'
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import pinRouteStart from '../../assets/img/map/pin_route_green.png';
-import pinRouteEnd from '../../assets/img/map/pin_route_red.png';
-import domtoimage from 'dom-to-image';
-import Loader from 'react-loader-spinner'
-import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
-import * as alasql from 'alasql';
-import * as lodash from 'lodash';
+import salesGeojson from "../../dummy_data/sales.geojson";
+import routeDummy from "../../dummy_data/route2.json";
+import { demografiTree, analisaTree } from "../../const/LayerTreeConst.js";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import pinRouteStart from "../../assets/img/map/pin_route_green.png";
+import pinRouteEnd from "../../assets/img/map/pin_route_red.png";
+import domtoimage from "dom-to-image";
+import Loader from "react-loader-spinner";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import * as alasql from "alasql";
+import * as lodash from "lodash";
// import LineChart from './LineChart'
// import PieChart from './PieChart'
// import Chart from 'chart.js'
-import { Pie, Line, Bar } from 'react-chartjs-2';
-import numeral from 'numeral';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import 'chartjs-plugin-zoom';
+import { Pie, Line, Bar } from "react-chartjs-2";
+import numeral from "numeral";
+import {
+ NotificationContainer,
+ NotificationManager,
+} from "react-notifications";
+import "chartjs-plugin-zoom";
const HEADER = {
headers: {
"Content-Type": "application/json",
- "Authorization": `Bearer ${window.localStorage.getItem('token')}`
- }
-}
+ Authorization: `Bearer ${window.localStorage.getItem("token")}`,
+ },
+};
const MappifiedNominatimSearch = mappify(NominatimSearch);
const MappifiedMeasureButton = mappify(MeasureButton);
@@ -138,8 +210,8 @@ const MappifiedMeasureButton = mappify(MeasureButton);
const Map = mappify(onDropAware(MapComponent));
// const center = [ 788453.4890155146, 6573085.729161344 ];
-const projection = 'EPSG:3857'; //default
-const projection4326 = 'EPSG:4326';
+const projection = "EPSG:3857"; //default
+const projection4326 = "EPSG:4326";
// const projection = 'EPSG:4326'; // lat long
// Indonesia
// const lat = -2.6000285;
@@ -150,55 +222,56 @@ const projection4326 = 'EPSG:4326';
// const lat = -2.36;
// const lon = 121.96;
-const lat = -6.228000;
+const lat = -6.228;
const lon = 106.559242;
const zoom = 9;
-const maxZoom = APP_MODE === 'KIT' ? 9 : 22;
+const maxZoom = APP_MODE === "KIT" ? 9 : 22;
// const maxZoom = 22
const Indonesia = new fromLonLat([lon, lat], projection);
-const Bali_bbox = [115.178638994694, -8.71934970794214, 115.269238650799, -8.59763413248024];
+const Bali_bbox = [
+ 115.178638994694, -8.71934970794214, 115.269238650799, -8.59763413248024,
+];
const osmLayer = new OlLayerTile({
source: new OlSourceOsm(),
- name: 'OSM',
- type: 'base',
- imageName: 'osm.PNG',
+ name: "OSM",
+ type: "base",
+ imageName: "osm.PNG",
// maxZoom: 9
});
const esriLayer = new OlLayerTile({
name: "ESRI",
source: new XYZSource({
- url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+ url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
projection: projection,
// maxZoom: 9
}),
- type: 'base',
- imageName: 'esri.PNG'
+ type: "base",
+ imageName: "esri.PNG",
});
const googleLayer = new OlLayerTile({
name: "Google",
source: new XYZSource({
- url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
+ url: "http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
projection: projection,
// maxZoom: 9
}),
- type: 'base',
- imageName: 'google.PNG'
-})
+ type: "base",
+ imageName: "google.PNG",
+});
const googleStreetLayer = new OlLayerTile({
name: "Google Street",
source: new XYZSource({
- url: 'http://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
+ url: "http://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}",
projection: projection,
// maxZoom: 9
}),
- type: 'base',
- imageName: 'google_street.PNG'
-})
-
+ type: "base",
+ imageName: "google_street.PNG",
+});
// let baseLayers = [
// osmLayer,
@@ -212,7 +285,7 @@ const googleStreetLayer = new OlLayerTile({
let baseLayers = [];
-if (localStorage.getItem('u_group') == 'kominfo') {
+if (localStorage.getItem("u_group") == "kominfo") {
baseLayers = [
osmLayer,
esriLayer,
@@ -222,8 +295,7 @@ if (localStorage.getItem('u_group') == 'kominfo') {
// citraDenpasarLayer,
// iuLayerGroup
];
-}
-else {
+} else {
baseLayers = [
osmLayer,
esriLayer,
@@ -236,34 +308,31 @@ else {
}
const baseLayerGroup = new OlLayerGroup({
- name: 'Base Layers',
- layers: [
- osmLayer,
- esriLayer
- ],
- type: 'baseGroup'
+ name: "Base Layers",
+ layers: [osmLayer, esriLayer],
+ type: "baseGroup",
});
const defaultPersentaseProyek = {
labels: [],
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: [],
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
// stack: 'Stack-0'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
{
- label: 'Aktual',
+ label: "Aktual",
data: [],
fill: false,
- backgroundColor: 'rgba(54, 162, 235, 0.5)',
- borderColor: 'rgba(54, 162, 235, 0.5)',
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ borderColor: "rgba(54, 162, 235, 0.5)",
// stack: 'Stack-1'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
],
};
@@ -272,22 +341,22 @@ const defaultCostProyek = {
labels: [],
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: [],
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
// stack: 'Stack-0'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
{
- label: 'Aktual',
+ label: "Aktual",
data: [],
fill: false,
- backgroundColor: 'rgba(54, 162, 235, 0.5)',
- borderColor: 'rgba(54, 162, 235, 0.5)',
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ borderColor: "rgba(54, 162, 235, 0.5)",
// stack: 'Stack-1'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
],
};
@@ -296,43 +365,43 @@ const defaultKurvaS = {
labels: [],
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: [],
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
// stack: 'Stack-0'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
{
- label: 'Aktual',
+ label: "Aktual",
data: [],
fill: false,
- backgroundColor: 'rgba(54, 162, 235, 0.5)',
- borderColor: 'rgba(54, 162, 235, 0.5)',
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ borderColor: "rgba(54, 162, 235, 0.5)",
// stack: 'Stack-1'
- yAxisID: 'y-axis-1',
+ yAxisID: "y-axis-1",
},
],
};
const defaultStatusProyek = {
- labels: ['Aman', 'Alert', 'Critical'],
+ labels: ["Aman", "Alert", "Critical"],
datasets: [
{
- label: '# of Votes',
+ label: "# of Votes",
data: [],
backgroundColor: [
// 'rgba(54, 162, 235, 0.2)',
- 'rgba(28, 165, 23, 0.2)',
- 'rgba(255, 206, 86, 0.2)',
- 'rgba(255, 99, 132, 0.2)',
+ "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)',
+ "rgba(28, 165, 23, 1)",
+ "rgba(255, 206, 86, 1)",
+ "rgba(255, 99, 132, 1)",
],
borderWidth: 1,
},
@@ -340,20 +409,20 @@ const defaultStatusProyek = {
};
const defaultStatusWaspang = {
- labels: ['Hadir', 'Izin', 'Panic Button'],
+ labels: ["Hadir", "Izin", "Panic Button"],
datasets: [
{
- label: '# of Votes',
+ label: "# of Votes",
data: [],
backgroundColor: [
- 'rgba(77,232,0, 0.2)',
- 'rgba(255,146,3, 0.2)',
- 'rgba(164,7,120, 0.2)',
+ "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)',
+ "rgba(77,232,0, 1)",
+ "rgba(255,146,3, 1)",
+ "rgba(164,7,120, 1)",
],
borderWidth: 1,
},
@@ -364,10 +433,10 @@ const barPersentaseOptions = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
+ const label = data.datasets[tooltipItem.datasetIndex].label || "";
return `${label}: ${tooltipItem.value}%`;
- }
- }
+ },
+ },
},
scales: {
yAxes: [
@@ -375,23 +444,23 @@ const barPersentaseOptions = {
// type: 'linear',
// display: true,
// position: 'left',
- id: 'y-axis-1',
+ id: "y-axis-1",
ticks: {
max: 100,
min: 1,
callback: function (value, index, values) {
return `${value}%`;
- }
+ },
},
- }
+ },
],
},
plugins: {
datalabels: {
- display: true
- }
- }
-}
+ display: true,
+ },
+ },
+};
const barCostOptions = {
scales: {
@@ -400,29 +469,29 @@ const barCostOptions = {
// type: 'bar',
// display: true,
// position: 'left',
- id: 'y-axis-1',
+ id: "y-axis-1",
ticks: {
// beginAtZero: true,
callback: function (value, index, values) {
- return numeral(value).format('0,0');
- }
+ return numeral(value).format("0,0");
+ },
},
- }
+ },
],
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
- return `${label}: ${numeral(tooltipItem.value).format('0,0')}`;
- }
- }
+ const label = data.datasets[tooltipItem.datasetIndex].label || "";
+ return `${label}: ${numeral(tooltipItem.value).format("0,0")}`;
+ },
+ },
},
plugins: {
datalabels: {
- display: false
- }
- }
+ display: false,
+ },
+ },
};
const optionsChartStatusProyek = {
@@ -434,12 +503,12 @@ const optionsChartStatusProyek = {
// },
legend: {
display: true,
- position: 'bottom'
+ position: "bottom",
// labels: {
// fontColor: 'rgb(255, 99, 132)'
// }
- }
-}
+ },
+};
const optionsChartPersentaseProgress = {
// title: {
@@ -451,30 +520,30 @@ const optionsChartPersentaseProgress = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
+ const label = data.datasets[tooltipItem.datasetIndex].label || "";
return `${label}: ${tooltipItem.value}%`;
- }
- }
+ },
+ },
},
scales: {
yAxes: [
{
- type: 'linear',
+ type: "linear",
display: true,
- position: 'left',
- id: 'y-axis-1',
+ position: "left",
+ id: "y-axis-1",
ticks: {
max: 100,
min: 1,
callback: function (value, index, values) {
return `${value}%`;
- }
+ },
},
- }
+ },
],
- }
-}
+ },
+};
const optionsChartCostProyek = {
// title: {
@@ -486,27 +555,27 @@ const optionsChartCostProyek = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
- return `${label}: ${numeral(tooltipItem.value).format('0,0')}`;
- }
- }
+ const label = data.datasets[tooltipItem.datasetIndex].label || "";
+ return `${label}: ${numeral(tooltipItem.value).format("0,0")}`;
+ },
+ },
},
scales: {
yAxes: [
{
- type: 'linear',
+ type: "linear",
display: true,
- position: 'left',
- id: 'y-axis-1',
+ position: "left",
+ id: "y-axis-1",
ticks: {
callback: function (value, index, values) {
- return numeral(value).format('0,0');
- }
+ return numeral(value).format("0,0");
+ },
},
- }
+ },
],
},
-}
+};
const optionsChartKurvaS = {
// title: {
@@ -519,45 +588,45 @@ const optionsChartKurvaS = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
- return `${label}: ${numeral(tooltipItem.value).format('0,0')}`;
- }
- }
+ const label = data.datasets[tooltipItem.datasetIndex].label || "";
+ return `${label}: ${numeral(tooltipItem.value).format("0,0")}`;
+ },
+ },
},
scales: {
yAxes: [
{
- type: 'linear',
+ type: "linear",
display: true,
- position: 'left',
- id: 'y-axis-1',
+ position: "left",
+ id: "y-axis-1",
ticks: {
beginAtZero: true,
max: 100,
callback: function (value, index, values) {
- return numeral(value).format('0,0');
- }
+ return numeral(value).format("0,0");
+ },
},
min: 0,
- max: 100
- }
+ max: 100,
+ },
],
},
zoom: {
enabled: true,
- mode: 'xy',
+ mode: "xy",
limits: {
- y: {min: 0, max: 100}
- }
+ y: { min: 0, max: 100 },
+ },
},
pan: {
enabled: true,
- mode: 'xy',
+ mode: "xy",
limits: {
- y: {min: 0, max: 100}
- }
- }
-}
+ y: { min: 0, max: 100 },
+ },
+ },
+};
const columnPresensi = [
{ name: "Nama Waspang" },
@@ -565,19 +634,19 @@ const columnPresensi = [
{ name: "Jam Masuk" },
{ name: "Jam Keluar" },
{ name: "Durasi Kerja " },
-]
+];
const columnAbssensi = [
{ name: "Nama Waspang" },
{ name: "Deskripsi" },
{ name: "Tanggal Absensi" },
-]
+];
const columnPanic = [
{ name: "Tanggal" },
{ name: "Nama Waspang" },
{ name: "Status Response" },
-]
+];
const columnStatusProyek = [
{ name: "Nama" },
@@ -586,8 +655,7 @@ const columnStatusProyek = [
{ name: "PM" },
{ name: "Aktivitas Mulai" },
{ name: "Aktivitas Selesai" },
-]
-
+];
class SiopasMap extends Component {
constructor(props) {
@@ -614,10 +682,10 @@ class SiopasMap extends Component {
countGetFeature: 0,
countNotGetFeature: 0,
popupDataTemp: [],
- activeListFeatureId: '',
+ activeListFeatureId: "",
evtCoordinate: null,
visibleLS: false,
- visibleLSProp: 'hide',
+ visibleLSProp: "hide",
popupRightVisible: false,
imagePopupVisible: false,
alert: false,
@@ -625,8 +693,8 @@ class SiopasMap extends Component {
dangerAlert: false,
messageAlert: "",
editGeometryVisible: false,
- layerNameDraw: '',
- geomTypeDraw: '',
+ layerNameDraw: "",
+ geomTypeDraw: "",
activeStateAddGeometry: false,
layer_attribute: [],
searchLabelData: [],
@@ -645,11 +713,11 @@ class SiopasMap extends Component {
routingBarVisible: false,
isSearchingRoute: false,
isProcessing: false,
- queryBuilderOutput: '',
- queryBuilderType: '',
- currentQbTree: '',
- currentQbType: '',
- routeType: '',
+ queryBuilderOutput: "",
+ queryBuilderType: "",
+ currentQbTree: "",
+ currentQbType: "",
+ routeType: "",
chosenProyekIds: [],
dataStatusProyek: null,
// dataStatusProyekAdw: [
@@ -689,11 +757,11 @@ class SiopasMap extends Component {
status_project: {
good: 0,
warning: 0,
- critical: 0
+ critical: 0,
},
waspang_status: {
presensi: 0,
- absensi: 0
+ absensi: 0,
},
panic_button: 0,
statusRight: true,
@@ -707,15 +775,15 @@ class SiopasMap extends Component {
animating3: false,
laporanData: [],
presensiData: [],
- kurvaSWindowMode: 'default'
+ kurvaSWindowMode: "default",
};
this.layers = [
osmLayer,
- // layerGroupSekolah,
- // layerGroupRS,
- // layerGroupKantorDesa,
- // layerGroupSarPras,
+ // layerGroupSekolah,
+ // layerGroupRS,
+ // layerGroupKantorDesa,
+ // layerGroupSarPras,
// tanah_kantor_instansi_pemerintah,
// point_sekolah,
// polygon_rumah_sakit
@@ -724,26 +792,26 @@ class SiopasMap extends Component {
];
this.overlay = new Overlay({
- element: document.getElementById('popup'),
+ element: document.getElementById("popup"),
autoPan: true,
autoPanAnimation: {
- duration: 250
- }
+ duration: 250,
+ },
});
this.scaleLineControl = new ScaleLine({
- units: 'metric',
+ units: "metric",
bar: true,
steps: 4,
text: true,
// minWidth: 140
- })
+ });
this.mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
- projection: 'EPSG:4326',
+ projection: "EPSG:4326",
// className: 'custom-mouse-position',
- target: document.getElementById('custom-mouse-position'),
+ target: document.getElementById("custom-mouse-position"),
});
this.olmap = new OlMap({
@@ -751,11 +819,14 @@ class SiopasMap extends Component {
center: Indonesia,
zoom: zoom,
maxZoom: maxZoom,
- projection: projection
+ projection: projection,
}),
layers: this.layers,
overlays: [this.overlay],
- controls: defaultControls().extend([this.scaleLineControl, this.mousePositionControl])
+ controls: defaultControls().extend([
+ this.scaleLineControl,
+ this.mousePositionControl,
+ ]),
});
this.changeBaseLayer = this.changeBaseLayer.bind(this);
@@ -778,8 +849,10 @@ class SiopasMap extends Component {
this.olmap.on("singleclick", (evt) => {
this.mapOnClick(evt);
});
- this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection));
-
+ this.setState({ mapProjection: this.olmap.getView().getProjection() }, () =>
+ console.log("mapProjection", this.state.mapProjection)
+ );
+
// // set default to check all project
// if (this.state.projectTree && this.state.projectTree.length > 0) {
// let checked = [];
@@ -787,32 +860,34 @@ class SiopasMap extends Component {
// console.log('checked', checked);
// this.setState({checkedKeysProjectTree: checked});
// }
-
- }
+ };
componentDidUpdate = (prevProps, prevState) => {
-
if (!this.state.popupRightVisible && this.state.popupDataTemp.length > 0) {
// this.showPopup();
this.openPopupRight();
// this.setActiveListFeature();
// console.log('popupDataTemp > 0');
// console.log('popupDataTemp ', this.state.popupDataTemp);
- }
- else if (this.state.popupRightVisible && this.state.popupDataTemp.length < 1) {
+ } else if (
+ this.state.popupRightVisible &&
+ this.state.popupDataTemp.length < 1
+ ) {
// this.closePopup();
this.closePopupRight();
// console.log('popupDataTemp < 1');
// console.log('popupDataTemp ', this.state.popupDataTemp);
}
- if (prevState.checkedKeysProjectTree !== this.state.checkedKeysProjectTree) {
- this.setLayer('checkedKeysProjectTree');
+ if (
+ prevState.checkedKeysProjectTree !== this.state.checkedKeysProjectTree
+ ) {
+ this.setLayer("checkedKeysProjectTree");
}
if (prevState.routingBarVisible !== this.state.routingBarVisible) {
if (!this.state.routingBarVisible) {
- this.removeLayerByName('routeLayer');
+ this.removeLayerByName("routeLayer");
}
}
@@ -823,14 +898,15 @@ class SiopasMap extends Component {
this.getDataPresensiMap();
this.getChartData();
// this.getDailyInfo();
- }
- else {
- this.resetCharts()
+ } else {
+ this.resetCharts();
}
}
- }
+ };
- loading = () => Loading...
+ loading = () => (
+ Loading...
+ );
resetCharts = () => {
this.setState({
@@ -838,22 +914,22 @@ class SiopasMap extends Component {
dataPersentaseProyek: null,
dataCostProyek: null,
dataStatusWaspang: null,
- })
- }
+ });
+ };
resetLayerDashboard = () => {
- this.removeLayerByName('projectLayer');
- this.removeLayerByName('waspangLayer');
- this.removeLayerByName('routeLayer');
- this.removeLayerByName('laporanLayer');
- this.removeLayerByName('presensiLayer');
+ 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 () => {
@@ -958,23 +1034,23 @@ class SiopasMap extends Component {
// ngerequest API buat ngepush data this.laporanFeatures
getDataLaporanMap = async () => {
let payload = {
- project_id: []
- }
+ 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)
+ .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())
+ console.log("cek laporan points", result);
+ let dataRes = result.data.data || [];
+ this.setState({ laporanData: dataRes }, () => this.getLaporanFeatures());
}
- }
+ };
getLaporanFeatures = async () => {
const { laporanData, checkedKeysProjectTree } = this.state;
@@ -985,33 +1061,32 @@ class SiopasMap extends Component {
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: "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"
+ _type: "report_activity",
},
- "geometry": {
- "type": "Point",
- "coordinates": [
- parseFloat(item.lon),
- parseFloat(item.lat)
- ]
- }
- })
+ geometry: {
+ type: "Point",
+ coordinates: [parseFloat(item.lon), parseFloat(item.lat)],
+ },
+ });
}
}
}
- console.log('this.laporanFeatures', this.laporanFeatures);
+ console.log("this.laporanFeatures", this.laporanFeatures);
let layersToAdd = [];
let vectorSource = null;
@@ -1019,52 +1094,58 @@ class SiopasMap extends Component {
let laporan = null;
laporan = {
type: "FeatureCollection",
- features: this.laporanFeatures
- }
+ 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
- })
- })
+ featureProjection: projection, // to
+ }),
+ });
vectorLayer = new VectorLayer({
- name: 'laporanLayer',
- source_type: 'geojson',
+ name: "laporanLayer",
+ source_type: "geojson",
source: vectorSource,
- style: LAPORAN_FEATURES_STYLE
+ style: LAPORAN_FEATURES_STYLE,
});
layersToAdd.push(vectorLayer);
- }
- else {
+ } 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]);
+ console.log("layersToAdd", layersToAdd[i]);
this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map
- console.log('check addLayer');
+ 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 });
+ 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) {
+ } else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) {
this.resetLayerDashboard();
this.resetCharts();
}
- }
+ };
// ngerequest API buat ngepush data this.presensiFeatures
getDataPresensiMap = async () => {
@@ -1089,41 +1170,47 @@ class SiopasMap extends Component {
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": [
+ 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},
+ {
+ name: "clock_in",
+ logic_operator: "range",
+ value: dateStart,
+ value1: dateEnd,
+ },
+ ],
+ joins: [
+ {
+ name: "m_users",
+ column_join: "user_id",
+ column_results: ["name", "ktp_number"],
+ },
],
- "joins": [{
- "name":"m_users",
- "column_join":"user_id",
- "column_results":[
- "name",
- "ktp_number"
- ]
- }],
- "orders": {"columns": ["id"], "ascending": false}
- }
-
+ orders: { columns: ["id"], ascending: false },
+ };
+
const result = await axios
.post(PRESENCE_SEARCH, payload, HEADER)
- .then(res => res)
+ .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');
+ 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);
+ console.log("getPresensiFeature presensiData", presensiData);
if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) {
if (presensiData.length > 0) {
for (let i = 0; i < presensiData.length; i++) {
@@ -1131,34 +1218,40 @@ class SiopasMap extends Component {
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 : '-',
+ 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"
+ _type: "presensi",
},
- "geometry": {
- "type": "Point",
- "coordinates": [
+ geometry: {
+ type: "Point",
+ coordinates: [
parseFloat(item.clock_in_lng),
- parseFloat(item.clock_in_lat)
- ]
- }
- })
+ parseFloat(item.clock_in_lat),
+ ],
+ },
+ });
}
}
}
- console.log('this.presensiFeatures', this.presensiFeatures);
+ console.log("this.presensiFeatures", this.presensiFeatures);
let layersToAdd = [];
let vectorSource = null;
@@ -1166,76 +1259,80 @@ class SiopasMap extends Component {
let presensi = null;
presensi = {
type: "FeatureCollection",
- features: this.presensiFeatures
- }
+ 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
- })
- })
+ featureProjection: projection, // to
+ }),
+ });
vectorLayer = new VectorLayer({
- name: 'presensiLayer',
- source_type: 'geojson',
+ name: "presensiLayer",
+ source_type: "geojson",
source: vectorSource,
- style: PRESENSI_FEATURES_STYLE
+ style: PRESENSI_FEATURES_STYLE,
});
layersToAdd.push(vectorLayer);
- }
- else {
+ } 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]);
+ console.log("layersToAdd", layersToAdd[i]);
this.olmap.addLayer(layersToAdd[i]); // adding layer to exist map
- console.log('check addLayer');
+ 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 });
+ 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) {
+ } else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) {
this.resetLayerDashboard();
this.resetCharts();
}
- }
+ };
-
- // ngerequest API buat ngepush data chart
+ // ngerequest API buat ngepush data chart
getChartData = async () => {
-
const payload = {
- "project_id": [],
- "period": "week"
- }
+ project_id: [],
+ period: "week",
+ };
if (this.state.chosenProyekIds.length > 0) {
- console.log('chosenProyekIds', this.state.chosenProyekIds);
+ 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)
+ .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 || []
+ 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]
@@ -1264,21 +1361,20 @@ class SiopasMap extends Component {
// ],
// };
this.setState({ dataCostProyek: dataRes });
-
} else {
- NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
// get persentase progress proyek
const result2 = await axios
.post(DASHBOARD_KURVA_S, payload, HEADER)
- .then(res => res)
+ .then((res) => res)
.catch((error) => error.response);
- console.log('result kurva s', result2);
+ console.log("result kurva s", result2);
if (result2 && result2.data && result2.data.code == 200) {
- let dataRes2 = result2.data.data || []
+ 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]
@@ -1308,11 +1404,11 @@ class SiopasMap extends Component {
// };
// console.log("dataRes2", dataRes2);
// this.setState({ dataPersentaseProyek: dataRes2 });
- this.setState({dataCurvaS: dataRes2});
- console.log('dataRes2-----------', dataRes2);
+ this.setState({ dataCurvaS: dataRes2 });
+ console.log("dataRes2-----------", dataRes2);
// set status proyek for adw
- if ((APP_MODE === 'ADW')) {
+ if (APP_MODE === "ADW") {
let budgetControl = [];
if (dataRes2.length > 0) {
dataRes2.map((item, index) => {
@@ -1321,11 +1417,13 @@ class SiopasMap extends Component {
budgetControl.push(item.data.budget_control);
});
}
- this.setState({dataStatusProyekAdw: budgetControl});
+ this.setState({ dataStatusProyekAdw: budgetControl });
}
- }
- else {
- NotificationManager.error('Gagal Mengambil Data Persentase Progress Proyek!!', 'Failed');
+ } else {
+ NotificationManager.error(
+ "Gagal Mengambil Data Persentase Progress Proyek!!",
+ "Failed"
+ );
}
// const valueStatusProyek = [70, 20, 10]
@@ -1352,7 +1450,6 @@ class SiopasMap extends Component {
// ],
// };
-
// const statusProyek = [
// {
// "id": "1",
@@ -1383,49 +1480,59 @@ class SiopasMap extends Component {
// get cost proyek
const result3 = await axios
.post(DASHBOARD_STATUS_PROYEK, payload, HEADER)
- .then(res => res)
+ .then((res) => res)
.catch((error) => error.response);
if (result3 && result3.data && result3.data.code == 200) {
let dataRes3 = result3.data.data || [];
- console.log(" dataRes3 ", dataRes3)
+ console.log(" dataRes3 ", dataRes3);
this.setState({ dataStatusProyek: dataRes3 });
- }
- else {
- NotificationManager.error('Gagal Mengambil Data Status Proyek!!', 'Failed');
+ } else {
+ NotificationManager.error(
+ "Gagal Mengambil Data Status Proyek!!",
+ "Failed"
+ );
}
- if ((APP_MODE === 'ADW')) {
+ 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" }
+ 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 }
- }
+ paging: { start: 0, length: -1 },
+ };
const config = {
- method: 'POST', // *GET, POST, PUT, DELETE, etc.
+ 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/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
- }
+ 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);
+ 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({
@@ -1438,68 +1545,83 @@ class SiopasMap extends Component {
// });
const statusWaspang = {
- labels: ['Hadir', 'Izin', 'Panic Button'],
+ labels: ["Hadir", "Izin", "Panic Button"],
datasets: [
{
- label: '# of Votes',
- data: [dataSum.waspang_status.presensi, dataSum.waspang_status.absensi, dataSum.panic_button],
+ 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)',
+ "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)',
+ "rgba(77,232,0, 1)",
+ "rgba(255,146,3, 1)",
+ "rgba(164,7,120, 1)",
],
borderWidth: 1,
},
],
};
- this.setState({ dataStatusWaspang: statusWaspang, allDataWaspang: result.data });
+ this.setState({
+ dataStatusWaspang: statusWaspang,
+ allDataWaspang: result.data,
+ });
}
+ } catch (e) {
+ toast.error("Gagal mengambil data");
}
- catch (e) {
- toast.error('Gagal mengambil data');
- }
- }
+ };
getLayerSearchLabel = async () => {
const param = {
- method: 'GET',
- header: JSON.stringify({ 'Content-Type': 'application/json' }),
- }
+ 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)
+ 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));
+ 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' }),
- }
+ 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)
+ const result = await fetch(API_GET_CHART_KATEGORI, param)
+ .then((response) => response.json())
+ .then((res) => res);
// console.log(result)
if (result.data) {
@@ -1510,9 +1632,9 @@ class SiopasMap extends Component {
let layer_geom_type = result.data[i].layer_geom_type;
let total_features = result.data[i].total_features;
- let SLD_URL = `${layerStyleUrl + layer_name}`;;
+ let SLD_URL = `${layerStyleUrl + layer_name}`;
let reqColor = await getLayerColor(SLD_URL);
- let color = '';
+ let color = "";
if (reqColor.success) {
color = reqColor.result;
}
@@ -1521,10 +1643,12 @@ class SiopasMap extends Component {
layer_title: layer_title,
layer_geom_type: layer_geom_type,
layer_color: color,
- total_features: total_features
+ total_features: total_features,
});
}
- this.setState({ layerInfo: layerInfo }, () => console.log('layerInfo', this.state.layerInfo));
+ this.setState({ layerInfo: layerInfo }, () =>
+ console.log("layerInfo", this.state.layerInfo)
+ );
}
// this.setState({alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false})
} else {
@@ -1537,18 +1661,18 @@ class SiopasMap extends Component {
// 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
+ center: Indonesia,
});
- }
+ };
changeBaseLayer(item) {
- console.log('change baselayer', 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
@@ -1556,8 +1680,8 @@ class SiopasMap extends Component {
}
// 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') {
+ // 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);
}
@@ -1575,32 +1699,35 @@ class SiopasMap extends Component {
if (mapZoom && mapCenter !== null) {
this.olmap.getView().animate({
zoom: mapZoom,
- center: mapCenter
+ center: mapCenter,
});
- }
- else {
+ } else {
// alert("Map Zoom and Map Center are not set yet");
this.olmap.getView().animate({
zoom: zoom,
maxZoom: maxZoom,
- center: Indonesia
+ center: Indonesia,
});
}
- }
+ };
mapOnClick = (evt) => {
evt.preventDefault();
let isDrawing = false;
let removedFeature = [];
let isRemoving = false;
- let transformedCoords4326 = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
+ 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!!');
+ console.log("drawing is active!!");
isDrawing = true;
}
// if (interaction instanceof Select) {
@@ -1609,7 +1736,7 @@ class SiopasMap extends Component {
// }
if (interaction instanceof Modify) {
- console.log('modify feature is active');
+ console.log("modify feature is active");
isDrawing = true;
}
});
@@ -1620,35 +1747,50 @@ class SiopasMap extends Component {
let viewResolution = this.olmap.getView().getResolution();
let viewProjection = this.olmap.getView().getProjection();
- let url = '';
+ 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') {
+ 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' });
+ url = sublayer
+ .getSource()
+ .getGetFeatureInfoUrl(
+ evt.coordinate,
+ viewResolution,
+ viewProjection,
+ { INFO_FORMAT: "application/json" }
+ );
if (url) {
promises.push(axios.get(url));
}
}
});
- }
- else {
+ } else {
if (layer.getVisible()) {
- if (layer.get('name') !== 'ChosenLayer') {
- if (layer.get('source_type') && layer.get('source_type') === 'geojson') {
+ 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' });
+ 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));
}
@@ -1659,21 +1801,20 @@ class SiopasMap extends Component {
}
});
-
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": []
+ type: "Feature",
+ id: "",
+ geometry: {
+ type: "",
+ coordinates: [],
},
- "geometry_name": "the_geom",
- "properties": {}
- }
+ geometry_name: "the_geom",
+ properties: {},
+ };
feat.id = feature.id_;
feat.geometry.type = feature.getGeometry().getType();
@@ -1682,19 +1823,18 @@ class SiopasMap extends Component {
feat.properties = feature.getProperties();
delete feat.properties["geometry"];
- console.log('feat', feat);
+ console.log("feat", feat);
featureGet.push(feat);
}
- console.log('featureGet geojson', featureGet);
+ 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);
+ 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++) {
@@ -1702,48 +1842,60 @@ class SiopasMap extends Component {
}
}
}
- })
-
+ });
- console.log('featureGet WMS', featureGet);
+ console.log("featureGet WMS", featureGet);
// adding it here because it's trapped on axios callback
- this.setState({
- popupDataTemp: featureGet,
- evtCoordinate: evt.coordinate
- }, () => this.setActiveListFeature());
+ this.setState(
+ {
+ popupDataTemp: featureGet,
+ evtCoordinate: evt.coordinate,
+ },
+ () => this.setActiveListFeature()
+ );
});
}
if (hitGeojson && promises) {
- this.setState({
- popupDataTemp: featureGet,
- evtCoordinate: evt.coordinate
- }, () => this.setActiveListFeature());
+ 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') {
+ 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());
+ this.setState({ popupRightVisible: true }, () =>
+ this.setActiveListFeature()
+ );
}
closePopupRight() {
// console.log('closing popup right...')
- this.setState({ popupRightVisible: false, popupDataTemp: [] }, () => this.setActiveListFeature());
+ this.setState({ popupRightVisible: false, popupDataTemp: [] }, () =>
+ this.setActiveListFeature()
+ );
this.removeChosenLayer(); // selected features
- // this.removeLayerByName('routeLayer');
+ // this.removeLayerByName('routeLayer');
this.setState({ editGeometryVisible: false, routingBarVisible: false }); // disable editing when no ChosenLayer on Map
}
@@ -1753,35 +1905,43 @@ class SiopasMap extends Component {
setPopupDataTemp = (feature) => {
// console.log('setPopupDataTemp', feature);
- this.setState({ popupDataTemp: [feature] }, () => this.setActiveListFeature());
- }
+ 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: '' }, () => {
+ 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: '' }, () => {
+ } else {
+ this.setState({ activeListFeatureId: "" }, () => {
// console.log('activeListFeatureId', this.state.activeListFeatureId);
- })
+ });
}
- }
+ };
// getGeomType = async (layerName) => {
@@ -1791,8 +1951,11 @@ class SiopasMap extends Component {
// }
loadMap = async () => {
- let response = await axios.get(API_LOAD_MAP).then(res => res).catch(error => error);
- console.log('loadMap', response);
+ 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) {
@@ -1811,10 +1974,13 @@ class SiopasMap extends Component {
// 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.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]
+ center: [dataMap.center_x, dataMap.center_y],
});
// if map_layers from API is exist
@@ -1840,21 +2006,23 @@ class SiopasMap extends Component {
let newLayer = null;
// if layer_type is not base
- if (map_layers[i].layer_type !== '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),
+ 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') {
+ if (map_layers[i].layer_name == "OSM") {
newLayer = new OlLayerTile({
name: map_layers[i].layer_name,
title: map_layers[i].layer_title,
@@ -1863,7 +2031,7 @@ class SiopasMap extends Component {
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 {
@@ -1875,7 +2043,7 @@ class SiopasMap extends Component {
geom_type: map_layers[i].layer_geom_type,
visible: map_layers[i].layer_visible,
// zIndex: map_layers[i].layer_position
- })
+ });
}
}
@@ -1891,7 +2059,7 @@ class SiopasMap extends Component {
}
}
}
- }
+ };
saveMap = () => {
/* What map update data that are needed?
@@ -1922,10 +2090,12 @@ class SiopasMap extends Component {
crossOrigin: 'anonymous'
}
*/
- let confirmation = window.confirm('Are you sure you want to save this map?');
+ let confirmation = window.confirm(
+ "Are you sure you want to save this map?"
+ );
// let mapId = 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 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();
@@ -1933,74 +2103,75 @@ class SiopasMap extends Component {
let center_y = mapCenter[1]; // latitude
let mapLayers = [];
let requestPayload = null;
- let layerType = '';
- let layerGeomType = '';
+ 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") {
+ 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_name: layer.get("name"),
layer_type: layerType,
- layer_geom_type: 'base',
+ layer_geom_type: "base",
layer_source: "OlSourceOsm", // i don't know why null in database
layer_visible: layer.getVisible(),
- layer_position: i
+ layer_position: i,
});
- }
- else {
+ } 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_name: layer.get("name"),
layer_type: layerType,
- layer_geom_type: 'base',
+ 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
+ maxZoom: 18,
},
layer_visible: layer.getVisible(),
- layer_position: i
+ layer_position: i,
});
}
- }
- else {
+ } 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'));
+ let reqGeomType = await getGeomType(layer.get("name"));
if (reqGeomType.success) {
layerGeomType = reqGeomType.result;
mapLayers.push({
idx: i,
- layer_name: layer.get('name'),
+ layer_name: layer.get("name"),
layer_type: layerType,
layer_geom_type: layerGeomType,
layer_source: {
- url: appConfig.geoserver_host + 'wms',
+ 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')
+ LAYERS: appConfig.workspace_name + ":" + layer.get("name"),
+ TILED: true,
+ SLD: layerStyleUrl + layer.get("name"),
},
- serverType: 'geoserver',
+ serverType: "geoserver",
transition: 0,
- crossOrigin: 'anonymous'
+ crossOrigin: "anonymous",
},
layer_visible: layer.getVisible(),
- layer_position: i
+ layer_position: i,
});
}
}
@@ -2012,44 +2183,60 @@ class SiopasMap extends Component {
// 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');
+ 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
+ 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);
+ 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)
- }
+ 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)
+ const result = await fetch(API_UPDATE_MAP, param)
+ .then((response) => response.json())
+ .then((res) => res);
if (result.data) {
- console.log('after save', result);
+ console.log("after save", result);
// this.();
- this.setState({ alert: true, messageAlert: result.code_message, successAlert: true, dangerAlert: false })
+ this.setState({
+ alert: true,
+ messageAlert: result.code_message,
+ successAlert: true,
+ dangerAlert: false,
+ });
} else {
- this.setState({ alert: true, messageAlert: result.code_message, successAlert: false, dangerAlert: true })
+ this.setState({
+ alert: true,
+ messageAlert: result.code_message,
+ successAlert: false,
+ dangerAlert: true,
+ });
}
} catch (err) {
- this.setState({ alert: true, messageAlert: err.message.toString(), successAlert: false, dangerAlert: true })
+ this.setState({
+ alert: true,
+ messageAlert: err.message.toString(),
+ successAlert: false,
+ dangerAlert: true,
+ });
}
- }
+ };
toggleEditGeometry = (selectedPopupData) => {
let { editGeometryVisible } = this.state;
@@ -2057,55 +2244,54 @@ class SiopasMap extends Component {
this.setState({
editGeometryVisible: true,
layerNameDraw: selectedPopupData.id,
- geomTypeDraw: selectedPopupData.geometry.type
+ geomTypeDraw: selectedPopupData.geometry.type,
});
-
- }
- else {
+ } else {
this.cancelDraw();
}
- }
+ };
cancelDraw = () => {
this.setState({
editGeometryVisible: false,
- layerNameDraw: '',
- geomTypeDraw: ''
+ layerNameDraw: "",
+ geomTypeDraw: "",
});
- }
+ };
toggleActiveStateAddGeometry = () => {
- this.setState({ activeStateAddGeometry: !this.state.activeStateAddGeometry });
- }
+ this.setState({
+ activeStateAddGeometry: !this.state.activeStateAddGeometry,
+ });
+ };
printMap = () => {
- this.olmap.once('rendercomplete', () => {
+ this.olmap.once("rendercomplete", () => {
domtoimage
.toJpeg(this.olmap.getViewport())
.then((dataUrl) => {
- console.log('dataUrl', dataUrl);
- let link = document.getElementById('image-download');
+ console.log("dataUrl", dataUrl);
+ let link = document.getElementById("image-download");
link.href = dataUrl;
link.click();
- toast.success("Success Print Map!")
+ toast.success("Success Print Map!");
})
- .catch(e => toast.error(e.toString()));
+ .catch((e) => toast.error(e.toString()));
});
-
- }
+ };
signOut = (e) => {
- e.preventDefault()
+ e.preventDefault();
// localStorage.removeItem("u_group");
// localStorage.removeItem("fullname");
window.localStorage.clear();
// emptyConstants();
- this.props.history.push('/login');
- }
+ this.props.history.push("/login");
+ };
getLayerAttribute = async (layerName) => {
const res = await getLayerAttribute(layerName);
- console.log('getLayerAttribute', res);
+ console.log("getLayerAttribute", res);
if (res.success) {
// console.log(res.result);
if (res.result.data) {
@@ -2115,37 +2301,48 @@ class SiopasMap extends Component {
});
}
}
- }
- else {
+ } 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);
+ 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;
+ 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);
+ if (state === "checkedKeysProjectTree") {
+ console.log("checkedKeysProjectTree", checkedKeysProjectTree);
// first remove projectLayer and its features
-
+
// this.removeLayerByName('routeLayer');
// this.removeLayerByName('projectLayer');
// this.removeLayerByName('waspangLayer');
@@ -2156,7 +2353,6 @@ class SiopasMap extends Component {
this.getChosenProyekRealisasi();
if (checkedKeysProjectTree && checkedKeysProjectTree.length > 0) {
-
/*
Logic:
- looping all tree
@@ -2186,96 +2382,99 @@ class SiopasMap extends Component {
this.getChildrenTree(projectTree[0].children);
// this.getWaspangFeatures();
- console.log('projectFeatures', this.projectFeatures);
+ console.log("projectFeatures", this.projectFeatures);
// console.log('waspangFeatures', this.waspangFeatures);
let project = null;
project = {
type: "FeatureCollection",
- features: this.projectFeatures
- }
+ 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
- })
- })
+ featureProjection: projection, // to
+ }),
+ });
vectorLayer = new VectorLayer({
- name: 'projectLayer',
- source_type: 'geojson',
+ name: "projectLayer",
+ source_type: "geojson",
source: vectorSource,
- style: PROJECT_FEATURES_STYLE
+ style: PROJECT_FEATURES_STYLE,
});
layersToAdd.push(vectorLayer);
- }
- else {
+ } 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');
+ } else if (checkedKeysProjectTree && checkedKeysProjectTree.length < 1) {
+ this.removeLayerByName("projectLayer");
+ this.removeLayerByName("waspangLayer");
+ this.removeLayerByName("routeLayer");
this.projectFeatures = [];
this.waspangFeatures = [];
this.closePopupRight();
- this.resetCharts()
+ 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');
+ 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 });
+ 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) {
+ } 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!!!!!');
+ 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": [
+ 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
- ]
- }
- })
+ item.laporan_plannings[i].lat,
+ ],
+ },
+ });
}
}
}
});
- }
+ };
// getWaspangFeatures = async () => {
// // console.log('getWaspangFeatures', data);
@@ -2433,20 +2632,18 @@ class SiopasMap extends Component {
findChildLayerToRemove = (parentObj) => {
let layersToRemove = [];
- if (parentObj.hasOwnProperty('children')) {
+ 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)
+ layersToRemove.push(parentObj.children[i].layers.name);
}
- }
- else {
- layersToRemove.push(parentObj.layers.name)
+ } else {
+ layersToRemove.push(parentObj.layers.name);
}
return layersToRemove;
- }
+ };
findChildLayerToAdd = (parentObj, checkedKeys) => {
-
let layersToAdd = [];
let newLayer = null;
@@ -2455,59 +2652,63 @@ class SiopasMap extends Component {
// kalo kecentang parent nya ya berarti loop aja
// 3. cek apakah childnya itu kecentang ngga
- console.log('parentObj', parentObj);
+ console.log("parentObj", parentObj);
if (checkedKeys.includes(parentObj["key"])) {
- if (parentObj.hasOwnProperty('children')) {
+ 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);
+ newLayer = this.generateLayerWMSByName(
+ parentObj.children[i].layers.name
+ );
if (newLayer) {
layersToAdd.push(newLayer);
}
}
- }
- else {
+ } else {
newLayer = this.generateLayerWMSByName(parentObj.layers.name);
if (newLayer) {
layersToAdd.push(newLayer);
}
}
- }
- else {
- if (parentObj.hasOwnProperty('children')) {
-
+ } 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');
+ 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);
+ 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 (
+ 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') {
+ } else if (source_type === "geojson") {
// extent = layer.getSource().getExtent();
// layer.getSource().once('change',(e) => {
@@ -2517,44 +2718,43 @@ class SiopasMap extends Component {
// // map.getView().fit(extent, map.getSize());
// }
// });
- extent = null
+ extent = null;
}
- console.log('extent', extent);
+ console.log("extent", extent);
return extent;
-
- }
+ };
generateLayerWMSByName = (layerName) => {
let theLayer = null;
if (layerName) {
theLayer = new OlLayerTile({
name: layerName,
- source_type: 'wms',
+ source_type: "wms",
source: new OlSourceTileWMS({
- url: appConfig.geoserver_host + 'wms',
+ url: appConfig.geoserver_host + "wms",
params: {
- 'LAYERS': appConfig.workspace_name + ':' + layerName,
- 'TILED': true,
- 'SLD': layerStyleUrl + layerName,
+ LAYERS: appConfig.workspace_name + ":" + layerName,
+ TILED: true,
+ SLD: layerStyleUrl + layerName,
// 'CQL_FILTER': CQL_QUERY
},
- serverType: 'geoserver',
+ serverType: "geoserver",
transition: 0,
- crossOrigin: 'anonymous',
+ crossOrigin: "anonymous",
}),
- type: 'layer',
- geom_type: 'Polygon'
+ 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') {
+ if (layer.get("name") !== "OSM") {
removeLayers.push(layer);
}
});
@@ -2564,13 +2764,12 @@ class SiopasMap extends Component {
this.olmap.removeLayer(removeLayers[i]);
}
}
- }
+ };
removeLayerByName = (name) => {
-
let removeLayers = [];
this.olmap.getLayers().forEach((layer, i) => {
- if (layer.get('name') === name) {
+ if (layer.get("name") === name) {
removeLayers.push(layer);
}
});
@@ -2580,35 +2779,40 @@ class SiopasMap extends Component {
this.olmap.removeLayer(removeLayers[i]);
}
}
- }
+ };
getRoute = () => {
fetch(routeDummy).then((response) => {
response.json().then((result) => {
- console.log('getRoute', 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)
+ 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
+ let dataRes = result.data.data;
console.log("dataRes", dataRes);
} else {
- NotificationManager.error('Gaga mengambil Data!!', 'Failed');
+ NotificationManager.error("Gaga mengambil Data!!", "Failed");
}
- }
+ };
showRoute = (userRoute) => {
const { mapProjection } = this.state;
- console.log('showRoute', userRoute);
+ console.log("showRoute", userRoute);
- this.removeLayerByName('routeLayer');
+ this.removeLayerByName("routeLayer");
if (userRoute.features && userRoute.features.length < 1) {
- toast.warn("Couldn't show route at selected time. Please select another range time.");
+ toast.warn(
+ "Couldn't show route at selected time. Please select another range time."
+ );
return;
}
@@ -2647,61 +2851,68 @@ class SiopasMap extends Component {
// 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)) {
+ if (
+ userRoute.features.length > 0 &&
+ userRoute.features[0].geometry &&
+ userRoute.features[0].geometry.coordinates
+ ) {
// polyline = userRoute.features[0].geometry;
polyline = {
- "type": "LineString",
- "coordinates": []
- }
+ type: "LineString",
+ coordinates: [],
+ };
- for (let i=0; i < userRoute.features.length; i++) {
+ 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);
+ route = new LineString(polyline.coordinates).transform(
+ "EPSG:4326",
+ mapProjection
+ );
extent = route.getExtent();
- console.log('route', route);
- console.log('extent', extent);
+ console.log("route", route);
+ console.log("extent", extent);
let routeFeature = new Feature({
- type: 'route',
+ type: "route",
geometry: route,
geometry_name: userRoute.features[0].geometry_name,
id: userRoute.features[0].id,
properties: userRoute.features[0].properties,
- routeColor: getRandomColor()
+ routeColor: getRandomColor(),
});
let geoMarker = new Feature({
- type: 'geoMarker',
+ type: "geoMarker",
geometry: new Point(route.getCoordinateAt(0)),
id: userRoute.features[0].id,
- properties: userRoute.features[0].properties
+ properties: userRoute.features[0].properties,
});
let startMarker = new Feature({
- type: 'pinRouteStart',
+ type: "pinRouteStart",
geometry: new Point(route.getCoordinateAt(0)),
id: userRoute.features[0].id,
- properties: userRoute.features[0].properties
+ properties: userRoute.features[0].properties,
});
let endMarker = new Feature({
- type: 'pinRouteEnd',
+ type: "pinRouteEnd",
geometry: new Point(route.getCoordinateAt(1)),
id: userRoute.features[0].id,
- properties: userRoute.features[0].properties
+ properties: userRoute.features[0].properties,
});
let animating = false;
let vectorLayer = new VectorLayer({
- name: 'routeLayer',
- source_type: 'routeLayer',
+ 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') {
+ if (animating && feature.get("type") === "geoMarker") {
return null;
}
// return ROUTE_MAP_STYLES[feature.get('type')];
@@ -2713,11 +2924,12 @@ class SiopasMap extends Component {
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 });
-
+ this.olmap
+ .getView()
+ .fit(extent, { size: this.olmap.getSize(), duration: 500 });
}
}
- }
+ };
searchRouting = async (userId, dateString) => {
await this.setState({ isSearchingRoute: true, isProcessing: true });
@@ -2725,52 +2937,65 @@ class SiopasMap extends Component {
const { routeType } = this.state;
let routes = null;
- if (routeType === 'waspang') {
+ if (routeType === "waspang") {
routes = await getWaspangRoutingApi(userId, dateString);
}
- if (routeType === 'presensi') {
+ 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"));
+ 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');
+ 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');
+ 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;
@@ -2780,14 +3005,13 @@ class SiopasMap extends Component {
if (checkedKeysProjectTree.length > 0) {
chosenProyekId = this.getChosenProyekId(); // ini yang sudah diambil uniquenya
- }
- else {
- chosenProyekId = []
+ } else {
+ chosenProyekId = [];
}
- console.log('chosenProyekId', 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
@@ -2801,13 +3025,12 @@ class SiopasMap extends Component {
// console.log('checkedKeysProjectTree', checkedKeysProjectTree);
if (checkedKeysProjectTree.length > 0) {
- if (checkedKeysProjectTree.includes('project-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 {
+ } else {
// for (let i=0; i < projectTree[0].children.length; i++) {
this.getChosenProyekIdByKey(projectTree[0].children);
// }
@@ -2819,7 +3042,7 @@ class SiopasMap extends Component {
// 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;
@@ -2829,16 +3052,21 @@ class SiopasMap extends Component {
// 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].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
+ } 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 {
+ } else {
// console.log('not matched, keep looping!', dataTree[i]);
// keep looping until get the matched key
if (dataTree[i].subproyeks) {
@@ -2846,375 +3074,517 @@ class SiopasMap extends Component {
}
}
}
- }
+ };
toggleStatusRight = () => {
this.setState({ statusRight: !this.state.statusRight });
- }
+ };
toggleProggresBottom = () => {
- this.setState({ proggressBottom: !this.state.proggressBottom })
- }
+ this.setState({ proggressBottom: !this.state.proggressBottom });
+ };
closeStatusRight = () => {
this.setState({ statusRight: false });
- }
+ };
closeProggressBottom = () => {
- this.setState({ proggressBottom: false })
- }
+ 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());
+ 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');
+ let result = moment.utc(diff).format("HH:mm:ss");
if (result) {
return result;
} else {
- return "-"
+ return "-";
}
-
} else {
- return "-"
+ return "-";
}
- }
+ };
handleRequestDataTable = async (url, payload) => {
-
const config = {
- method: 'POST',
+ method: "POST",
headers: {
- 'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + localStorage.getItem('token')
+ "Content-Type": "application/json",
+ Authorization: "Bearer " + localStorage.getItem("token"),
},
- body: JSON.stringify(payload) // body data type must match "Content-Type" header
- }
+ body: JSON.stringify(payload), // body data type must match "Content-Type" header
+ };
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 []
+ 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
+ handleClickChartPengawas = async (param) => {
+ const { dataStatusWaspang } = this.state;
+ const { start_time, end_time } = dataStatusWaspang;
// if (!param.length) return;
- console.log('handleClickChartPengawas param', param);
+ console.log("handleClickChartPengawas param", param);
const { _index } = param[0];
- const label = dataStatusWaspang.labels[_index]
+ const label = dataStatusWaspang.labels[_index];
// console.log({ param, label })
- console.log('label', 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" }
+ 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": [
+ joins: [
{
- "name": "m_users",
- "column_join": "user_id",
- "column_results": [
- "name",
- ]
- }
+ name: "m_users",
+ column_join: "user_id",
+ column_results: ["name"],
+ },
],
- "paging": { "start": 0, "length": -1 }
- }
- console.log(payload)
+ 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 });
+ 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 });
+ 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)
+ 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);
+ 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);
+ console.log("resultMod", resultMod);
- this.setState({ dataWaspangPanic: resultMod, openTablePengawas: true, tabelTypeWaspang: label, columnWaspang: columnPanic });
+ this.setState({
+ dataWaspangPanic: resultMod,
+ openTablePengawas: true,
+ tabelTypeWaspang: label,
+ columnWaspang: columnPanic,
+ });
}
- }
+ };
- handleClickChartProyek = async param => {
- const { dataStatusProyek, chosenProyekIds } = this.state
+ handleClickChartProyek = async (param) => {
+ const { dataStatusProyek, chosenProyekIds } = this.state;
const { _index } = param[0];
- const label = dataStatusProyek.labels[_index]
- console.log({ param, label })
- let str = ""
+ 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"
+ 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" },
+ 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"] }
+ 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 });
-
- }
+ 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
+ handleClickChartPersentase = async (param) => {
+ const { dataPersentaseProyek, chosenProyekIds } = this.state;
const { _index } = param[0];
- const label = dataPersentaseProyek.labels[_index]
+ const label = dataPersentaseProyek.labels[_index];
// console.log({ param, label })
- }
+ };
- handleClickChartCost = async param => {
- const { dataCostProyek, chosenProyekIds } = this.state
+ handleClickChartCost = async (param) => {
+ const { dataCostProyek, chosenProyekIds } = this.state;
const { _index } = param[0];
- const label = dataCostProyek.labels[_index]
- }
-
+ const label = dataCostProyek.labels[_index];
+ };
renderTablePresensi = () => {
- console.log('render hadir table', this.state.dataWaspangHadir)
+ 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 |
-
- }
+ {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 |
-
- }
+ {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 |
-
- }
+ {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)
+ return formatRupiah(text, prefix);
} else {
- return "-"
+ 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 |
-
- }
+ {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.
+
+ Data tidak ditemukan.
+
+ Pilih proyek untuk menampilkan data.
- )
- }
+ );
+ };
next = () => {
- const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state;
+ 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});
+ 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});
- }
+ 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});
- }
+ const nextIndex =
+ activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1;
+ this.setState({ activeIndex3: nextIndex });
+ };
previous = () => {
- const { animating, activeIndex, dataStatusProyek, dataStatusProyekAdw } = this.state;
+ 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});
+ 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});
- }
+ 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});
- }
+ 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})
- }
+ this.setState({ activeIndex: newIndex });
+ };
goToIndex2 = (newIndex) => {
const { animating2 } = this.state;
if (animating2) return;
- this.setState({activeIndex2: newIndex})
- }
+ this.setState({ activeIndex2: newIndex });
+ };
goToIndex3 = (newIndex) => {
const { animating3 } = this.state;
if (animating3) return;
- this.setState({activeIndex3: newIndex})
- }
+ this.setState({ activeIndex3: newIndex });
+ };
renderRemainingDays = (item) => {
- const {day_left, percentage} = 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`}
+ 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;
@@ -3223,29 +3593,53 @@ class SiopasMap extends Component {
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"}
+
+ {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 (
+
+ No Data Found
+
+ );
}
+ } else {
+ return this.renderEmptyData();
}
- else {
- return this.renderEmptyData()
- }
- }
+ };
renderCarouselStatusProyekAdw = () => {
const { dataStatusProyekAdw } = this.state;
@@ -3259,21 +3653,33 @@ class SiopasMap extends Component {
interval={false}
className="chart-doughnut-carousel"
>
-
- {this.renderTableStatusProyekAdw()}
-
-
+
+ {this.renderTableStatusProyekAdw()}
+
+
- )
- }
- else {
- return this.renderEmptyData()
+ );
+ } else {
+ return this.renderEmptyData();
}
+ } else {
+ return this.renderEmptyData();
}
- else {
- return this.renderEmptyData()
- }
- }
+ };
renderTableStatusProyekAdw = () => {
// console.log('render hadir table', this.state.dataTableStatusProyek)
@@ -3305,8 +3711,8 @@ class SiopasMap extends Component {
return (
this.setState({animating: true}) }
- onExited={() => this.setState({animating: false})}
+ onExiting={() => this.setState({ animating: true })}
+ onExited={() => this.setState({ animating: false })}
>
@@ -3321,27 +3727,67 @@ class SiopasMap extends Component {
*/}
| Current Budget |
- {item.current_budget === null ? '-' : this.renderFormatRupiah(item.current_budget.toString(), "Rp")} |
+
+ {item.current_budget === null
+ ? "-"
+ : this.renderFormatRupiah(
+ item.current_budget.toString(),
+ "Rp"
+ )}
+ |
| Actual to Date |
- {item.acwp === null ? '-' : this.renderFormatRupiah(item.acwp.toString(), "Rp")} |
+
+ {item.acwp === null
+ ? "-"
+ : this.renderFormatRupiah(item.acwp.toString(), "Rp")}
+ |
- | BCWP (cost vs perform) |
- {item.bcwp === null ? '-' : this.renderFormatRupiah(item.bcwp.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")} |
+
+ {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")} |
+
+ {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")} |
+
+ Estimated at Completion
+ |
+
+ {item.estimated_at_completion === null
+ ? "-"
+ : this.renderFormatRupiah(
+ item.estimated_at_completion.toString(),
+ "Rp"
+ )}
+ |
| Cost Deviation |
@@ -3356,71 +3802,108 @@ class SiopasMap extends Component {
- )
- })
- }
- else {
- this.renderEmptyData()
+ );
+ });
+ } else {
+ this.renderEmptyData();
}
- }
+ };
renderCostDeviation = (cost_deviation) => {
if (cost_deviation < 0) {
- return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} |
- }
- else if (cost_deviation === 0) {
- return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} |
- }
- else if (cost_deviation > 0) {
- return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} |
- }
- else {
- return {cost_deviation === null ? '-' : this.renderFormatRupiah(cost_deviation.toString(), "Rp")} |
+ return (
+
+ {cost_deviation === null
+ ? "-"
+ : this.renderFormatRupiah(cost_deviation.toString(), "Rp")}
+ |
+ );
+ } else if (cost_deviation === 0) {
+ return (
+
+ {cost_deviation === null
+ ? "-"
+ : this.renderFormatRupiah(cost_deviation.toString(), "Rp")}
+ |
+ );
+ } else if (cost_deviation > 0) {
+ return (
+
+ {cost_deviation === null
+ ? "-"
+ : this.renderFormatRupiah(cost_deviation.toString(), "Rp")}
+ |
+ );
+ } else {
+ return (
+
+ {cost_deviation === null
+ ? "-"
+ : this.renderFormatRupiah(cost_deviation.toString(), "Rp")}
+ |
+ );
}
- }
+ };
renderPotentialBudget = (pot) => {
let potential = pot.toLowerCase();
- if (potential === 'overrun') {
- return {potential ? potential.toUpperCase() : '-'} |
- }
- else if (potential === 'saving') {
- return {potential ? potential.toUpperCase() : '-'} |
- }
- else if (potential === 'on budget') {
- return {potential ? potential.toUpperCase() : '-'} |
+ 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() : "-"}
+ |
+ );
}
- else {
- return {potential ? potential.toUpperCase() : '-'} |
- }
- }
+ };
renderChartStatusProyek = (items) => {
- console.log('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})}
+ onExiting={() => this.setState({ animating: true })}
+ onExited={() => this.setState({ animating: false })}
>
Status Proyek
- {/* Luas coverage: */}
+ {/* Luas coverage: */}
{/* { numberWithCommas(item.total_luas_opt) } km2 */}
- )
- })
- }
+ );
+ });
+ };
renderCarouselPersentaseProgress = () => {
const { dataPersentaseProyek } = this.state;
@@ -3428,29 +3911,35 @@ class SiopasMap extends Component {
if (dataPersentaseProyek.length > 0) {
let dataChart = [];
dataPersentaseProyek.map((item, idx) => {
- let proyekName = item.proyek_name ? item.proyek_name : '-';
+ let proyekName = item.proyek_name ? item.proyek_name : "-";
let dataRes = item.data;
- let labelPercentagePlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+ let labelPercentagePlaning = dataRes
+ ? dataRes.map((res) => res.kode_sortname)
+ : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
// let valuePercentagePlaning = dataRes ? dataRes.map(res => parseFloat(res.bobot_planning)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valuePercentagePlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_p)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
+ let valuePercentagePlaning = dataRes
+ ? dataRes.map((res) => parseFloat(res.cal_bobot_p))
+ : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
// let valuePercentageRealisasi = dataRes ? dataRes.map(res => {
// let total = parseFloat(res.bobot_planning) * parseFloat(res.persentase_progress) / 100;
// if (Number.isNaN(total)) total = 0
// return total;
// }) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valuePercentageRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_bobot_a)) : [];
+ let valuePercentageRealisasi = dataRes
+ ? dataRes.map((res) => parseFloat(res.cal_bobot_a))
+ : [];
let chartData = {
proyek_name: proyekName,
labels: labelPercentagePlaning,
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: valuePercentagePlaning,
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
- yAxisID: 'y-axis-1',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
+ yAxisID: "y-axis-1",
// stack: 'Stack-0'
},
// {
@@ -3468,8 +3957,8 @@ class SiopasMap extends Component {
dataChart.push(chartData);
});
- console.log('dataChart persentase', dataChart);
-
+ console.log("dataChart persentase", dataChart);
+
return (
-
- {this.renderChartPersentaseProgress(dataChart)}
-
-
+
+ {this.renderChartPersentaseProgress(dataChart)}
+
+
- )
- }
- else {
- return this.renderEmptyData()
+ );
+ } else {
+ return this.renderEmptyData();
}
+ } else {
+ return this.renderEmptyData();
}
- else {
- return this.renderEmptyData()
- }
- }
-
+ };
+
renderChartPersentaseProgress = (items) => {
if (items.length > 0) {
return items.map((item, idx) => {
@@ -3502,38 +4001,44 @@ class SiopasMap extends Component {
return (
this.setState({animating2: true}) }
- onExited={() => this.setState({animating2: false})}
+ onExiting={() => this.setState({ animating2: true })}
+ onExited={() => this.setState({ animating2: false })}
>
-
{item.proyek_name}
+
+ {item.proyek_name}
+
- {/* Luas coverage: */}
+ {/* Luas coverage: */}
{/* { numberWithCommas(item.total_luas_opt) } km2 */}
- {
- item.labels.length > 0 ?
+ {item.labels.length > 0 ? (
console.log('click persentase linechart')}
+ handleClickChart={() =>
+ console.log("click persentase linechart")
+ }
/>
- :
- No data found
- }
+ ) : (
+
+ No data found
+
+ )}
- )
- })
- }
- else {
+ );
+ });
+ } else {
return this.renderEmptyData();
}
- }
+ };
renderCarouselCostProyek = () => {
const { dataCostProyek } = this.state;
@@ -3542,34 +4047,40 @@ class SiopasMap extends Component {
let dataChart = [];
dataCostProyek.map((item, idx) => {
- let proyekName = item.proyek_name ? item.proyek_name : '-';
+ let proyekName = item.proyek_name ? item.proyek_name : "-";
let dataRes = item.data;
- let labelCostPlaning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+ let labelCostPlaning = dataRes
+ ? dataRes.map((res) => res.kode_sortname)
+ : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
// let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valueCostPlaning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
+ let valueCostPlaning = dataRes
+ ? dataRes.map((res) => parseFloat(res.cal_budget_cost))
+ : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
// let valueCostRealisasi = dataRes ? dataRes.map(res => res.biaya_actual) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
+ let valueCostRealisasi = dataRes
+ ? dataRes.map((res) => parseFloat(res.cal_actual_cost))
+ : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
let chartData = {
proyek_name: proyekName,
labels: labelCostPlaning,
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: valueCostPlaning,
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
- yAxisID: 'y-axis-1',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
+ yAxisID: "y-axis-1",
// stack: 'Stack-0'
},
{
- label: 'Aktual',
+ label: "Aktual",
data: valueCostRealisasi,
fill: false,
- backgroundColor: 'rgba(54, 162, 235, 0.5)',
- borderColor: 'rgba(54, 162, 235, 0.5)',
- yAxisID: 'y-axis-1',
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ borderColor: "rgba(54, 162, 235, 0.5)",
+ yAxisID: "y-axis-1",
// stack: 'Stack-1'
},
],
@@ -3579,7 +4090,7 @@ class SiopasMap extends Component {
});
// console.log('dataChart', dataChart);
-
+
return (
-
- {this.renderChartCostProyek(dataChart)}
-
-
+
+ {this.renderChartCostProyek(dataChart)}
+
+
- )
- }
- else {
- return this.renderEmptyData()
+ );
+ } else {
+ return this.renderEmptyData();
}
+ } else {
+ return this.renderEmptyData();
}
- else {
- return this.renderEmptyData()
- }
- }
+ };
renderChartCostProyek = (items) => {
if (items.length > 0) {
@@ -3610,39 +4133,45 @@ class SiopasMap extends Component {
return (
this.setState({animating3: true})}
- onExited={() => this.setState({animating3: false})}
+ onExiting={() => this.setState({ animating3: true })}
+ onExited={() => this.setState({ animating3: false })}
>
-
{item.proyek_name}
+
+ {item.proyek_name}
+
{/*
Luas coverage:
{ numberWithCommas(item.total_luas_opt) } km2
*/}
- {
- item.labels.length > 0 ?
+ {item.labels.length > 0 ? (
console.log('click persentase linechart')}
+ handleClickChart={() =>
+ console.log("click persentase linechart")
+ }
/>
- :
- No data found
- }
+ ) : (
+
+ No data found
+
+ )}
{/* Test
*/}
- )
- })
- }
- else {
+ );
+ });
+ } else {
return this.renderEmptyData();
}
- }
+ };
renderCarouselKurvaS = () => {
const { dataCurvaS } = this.state;
@@ -3651,25 +4180,40 @@ class SiopasMap extends Component {
let dataChart = [];
dataCurvaS.map((item, idx) => {
- let proyekName = item.proyek_name ? item.proyek_name : '-';
+ let proyekName = item.proyek_name ? item.proyek_name : "-";
let dataRes = item.data;
// let labelCostPlanning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
// let labels = dataRes ? dataRes.date ? moment(dataRes.date).format('DD-MM-YY') : '-' : [];
- let labels = dataRes && dataRes.date ? dataRes.date.map((item, idx) => {
- let date = item[0];
- let bcwp = item[1];
- let acwp = item[2];
- date = date ? moment(date).format('DD MMM YY') : '-'
- bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-';
- acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-';
- return [date,bcwp,acwp]
- }) : [];
+ let labels =
+ dataRes && dataRes.date
+ ? dataRes.date.map((item, idx) => {
+ let date = item[0];
+ let bcwp = item[1];
+ let acwp = item[2];
+ date = date ? moment(date).format("DD MMM YY") : "-";
+ bcwp = bcwp
+ ? this.renderFormatRupiah(bcwp.toString(), "Rp")
+ : "-";
+ acwp = acwp
+ ? this.renderFormatRupiah(acwp.toString(), "Rp")
+ : "-";
+ return [date, bcwp, acwp];
+ })
+ : [];
// let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
// let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valuePlanning = dataRes ? dataRes.percentage.map(res => res && res[0] !== null ? res[0] : null) : []; // validate if null (holiday)
+ let valuePlanning = dataRes
+ ? dataRes.percentage.map((res) =>
+ res && res[0] !== null ? res[0] : null
+ )
+ : []; // validate if null (holiday)
// let valueCostRealisasi = dataRes ? dataRes.map(res => res.biaya_actual) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
// let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
- let valueRealisasi = dataRes ? dataRes.percentage.map(res => res && res[1] !== null ? res[1] : null) : []; // validate if null (holiday)
+ let valueRealisasi = dataRes
+ ? dataRes.percentage.map((res) =>
+ res && res[1] !== null ? res[1] : null
+ )
+ : []; // validate if null (holiday)
// console.log('labelCostPlanning', labelCostPlanning)
let chartData = {
@@ -3678,21 +4222,21 @@ class SiopasMap extends Component {
labels: labels,
datasets: [
{
- label: 'Perencanaan',
+ label: "Perencanaan",
data: valuePlanning,
fill: false,
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
- borderColor: 'rgba(255, 99, 132, 0.5)',
- yAxisID: 'y-axis-1',
+ backgroundColor: "rgba(255, 99, 132, 0.5)",
+ borderColor: "rgba(255, 99, 132, 0.5)",
+ yAxisID: "y-axis-1",
// stack: 'Stack-0'
},
{
- label: 'Aktual',
+ label: "Aktual",
data: valueRealisasi,
fill: false,
- backgroundColor: 'rgba(54, 162, 235, 0.5)',
- borderColor: 'rgba(54, 162, 235, 0.5)',
- yAxisID: 'y-axis-1',
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ borderColor: "rgba(54, 162, 235, 0.5)",
+ yAxisID: "y-axis-1",
// stack: 'Stack-1'
},
],
@@ -3702,30 +4246,46 @@ class SiopasMap extends Component {
});
// console.log('dataChart', dataChart);
-
+
return (
-
- {this.renderChartKurvaS(dataChart)}
-
-
+
+ {this.renderChartKurvaS(dataChart)}
+
+
- )
- }
- else {
- return this.renderEmptyData()
+ );
+ } else {
+ return this.renderEmptyData();
}
+ } else {
+ return this.renderEmptyData();
}
- else {
- return this.renderEmptyData()
- }
- }
+ };
renderChartKurvaS = (items) => {
if (items.length > 0) {
@@ -3733,51 +4293,76 @@ class SiopasMap extends Component {
return (
this.setState({animating3: true})}
- onExited={() => this.setState({animating3: false})}
+ onExiting={() => this.setState({ animating3: true })}
+ onExited={() => this.setState({ animating3: false })}
>
-
+
-
{item.proyek_name}
+
+ {item.proyek_name}
+
{/*
Luas coverage:
{ numberWithCommas(item.total_luas_opt) } km2
*/}
- {
- this.state.kurvaSWindowMode === 'default' ?
+ {this.state.kurvaSWindowMode === "default" ? (
- {
- item.labels.length > 0 ?
+ {item.labels.length > 0 ? (
console.log('click persentase linechart')}
+ handleClickChart={() =>
+ console.log("click persentase linechart")
+ }
redraw={true}
/>
- :
- No data found
- }
+ ) : (
+
+ No data found
+
+ )}
- :
+ ) : (
- {
- item.labels.length > 0 ?
+ {item.labels.length > 0 ? (
console.log('click persentase linechart')}
+ handleClickChart={() =>
+ console.log("click persentase linechart")
+ }
redraw={true}
/>
- :
- No data found
- }
+ ) : (
+
+ No data found
+
+ )}
- }
+ )}
{/*
{
item.labels.length > 0 ?
@@ -3792,23 +4377,32 @@ class SiopasMap extends Component {
*/}
- )
- })
- }
- else {
+ );
+ });
+ } else {
return this.renderEmptyData();
}
- }
-
-
+ };
render() {
- const { alert, successAlert, dangerAlert, messageAlert,
- dataStatusProyek, dataPersentaseProyek, dataCostProyek, dataStatusWaspang } = this.state;
-
- const headerHeight = document.getElementsByClassName('app-header').clientHeight;
- const progressBottomHeight = document.getElementsByClassName(' progress-bottom').clientHeight;
- const heightRightStatus = `calc(100vh - ${headerHeight + 10} - ${progressBottomHeight}`
+ const {
+ alert,
+ successAlert,
+ dangerAlert,
+ messageAlert,
+ dataStatusProyek,
+ dataPersentaseProyek,
+ dataCostProyek,
+ dataStatusWaspang,
+ } = this.state;
+
+ const headerHeight =
+ document.getElementsByClassName("app-header").clientHeight;
+ const progressBottomHeight =
+ document.getElementsByClassName(" progress-bottom").clientHeight;
+ const heightRightStatus = `calc(100vh - ${
+ headerHeight + 10
+ } - ${progressBottomHeight}`;
return (
{/* this.setState({ openTablePengawas: false })}
>
- this.setState({ openTablePengawas: false })}>
+ this.setState({ openTablePengawas: false })}
+ >
Data Waspang {this.state.tabelTypeWaspang}
@@ -3833,14 +4429,19 @@ class SiopasMap extends Component {
{/* | Actions | */}
{this.state.columnWaspang.map((i, index) => {
return (
- {i.name} |
- )
+
+ {i.name}
+ |
+ );
})}
- {this.state.tabelTypeWaspang == "Hadir" && this.renderTablePresensi()}
- {this.state.tabelTypeWaspang == "Izin" && this.renderTableAbsent()}
- {this.state.tabelTypeWaspang == "Panic Button" && this.renderTablePanic()}
+ {this.state.tabelTypeWaspang == "Hadir" &&
+ this.renderTablePresensi()}
+ {this.state.tabelTypeWaspang == "Izin" &&
+ this.renderTableAbsent()}
+ {this.state.tabelTypeWaspang == "Panic Button" &&
+ this.renderTablePanic()}
@@ -3856,7 +4457,9 @@ class SiopasMap extends Component {
isOpen={this.state.openTableStatusProyek}
toggle={() => this.setState({ openTableStatusProyek: false })}
>
- this.setState({ openTableStatusProyek: false })}>
+ this.setState({ openTableStatusProyek: false })}
+ >
Data Status Proyek {this.state.typeTableStatusProyek}
@@ -3866,8 +4469,10 @@ class SiopasMap extends Component {
{/* Actions | */}
{columnStatusProyek.map((i, index) => {
return (
- {i.name} |
- )
+
+ {i.name}
+ |
+ );
})}
@@ -3881,12 +4486,24 @@ class SiopasMap extends Component {
*/}
-
+
-
+
-
this.setState({ alert: false, successAlert: false, dangerAlert: false })}>
+
+ this.setState({
+ alert: false,
+ successAlert: false,
+ dangerAlert: false,
+ })
+ }
+ >
{messageAlert}
- {this.state.isProcessing &&
+ {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.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.state.proggressBottom ?
-
+ {/* KURVA S */}
+ {this.state.proggressBottom ? (
+
{/* */}
-
+
- Kurva S
-
-
this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer'}}> { this.state.kurvaSWindowMode === 'default' ? : }
-
this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x
+
+ Kurva S
+
+
+ this.toggleKurvaSWindowMode()}
+ style={{ marginRight: "15px", cursor: "pointer" }}
+ >
+ {" "}
+ {this.state.kurvaSWindowMode === "default" ? (
+
+ ) : (
+
+ )}
+
+ this.closeProggressBottom()}
+ style={{ marginRight: "5px", cursor: "pointer" }}
+ >
+ x
+
- { this.renderCarouselKurvaS() }
+ {this.renderCarouselKurvaS()}
- : null}
-
+ ) : null}
- {this.state.statusRight &&
+ {this.state.statusRight && (
+ width: "calc(100vw - 250px - (100vw / 2))",
+ }}
+ >
- {(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek' } x
+
+ {APP_MODE === "ADW"
+ ? "Budget Control This Period"
+ : "Status Proyek"}
+ {" "}
+
+ x
+
-
- {
- (APP_MODE === 'ADW') ?
- this.renderCarouselStatusProyekAdw()
- :
- this.renderCarouselStatusProyek()
- }
+
+ {APP_MODE === "ADW"
+ ? this.renderCarouselStatusProyekAdw()
+ : this.renderCarouselStatusProyek()}
- }
+ )}
-
handleOpenDialogViewDetail(text)}>
-
+
handleOpenDialogViewDetail(text)}
+ >
+
+
+
Project Charter
handleOpenDokumen(text)}>
-
+
+
+
Project Documents
handleOpenAsignHr(text)}>
-
+
+
+
Assign Human Resource
handleOpenAssignK3(text)}>
-
+
+
+
Assign Checklist K3
-
handleOpenDialogMaterial(text)}>
-
+
handleOpenDialogMaterial(text)}
+ >
+
+
+
Request Material Resource
handleOpenDialogTools(text)}>
-
+
+
+
Request Tools
{/*
*/}
handleOpenDialogGantt(text)}>
-
+
+
+
Gantt
{/* */}
-
handleOpenDialogProyek(text.id)}>
-
+
handleOpenDialogProyek(text.id)}
+ >
+
+
+
Edit Project
handleDelete(text.id)}>
-
+
+
+
Delete Project
- )
- }
+ );
+ };
const popupMenuGantt = (text, record) => {
return (
@@ -799,66 +907,119 @@ const CreatedProyek = ({ params, ...props }) => {
)}
- {!loadVersionGantt &&
+ {!loadVersionGantt && (
<>
- {dataVersionGantt.slice(0, 8).map(res => (
+ {dataVersionGantt.slice(0, 8).map((res) => (
-
+
+
+
{res.name_version}
))}
- {dataVersionGantt.length > 0 &&
}
-
handleOpenDialogGantt(text)}>
-
+ {dataVersionGantt.length > 0 && (
+
+ )}
+
handleOpenDialogGantt(text)}
+ >
+
+
+
More Gantt Menu ...
- }
-
+ )}
- )
- }
+ );
+ };
const RenderTable = useMemo(() => {
const columns = [
{
- title: 'Action',
- dataIndex: '',
- key: 'x',
- render: (text, record) => <>
-
-
-
-
-
-
-
+ title: "Action",
+ dataIndex: "",
+ key: "x",
+ render: (text, record) => (
+ <>
+
+
+
+
+
+
+
+ ),
},
- { title: 'Project Name', dataIndex: 'nama', key: 'nama' },
+ { title: "Project Name", dataIndex: "nama", key: "nama" },
{
- title: 'Budget',
- dataIndex: 'rencana_biaya',
- key: 'rencana_biaya',
+ title: "Budget",
+ dataIndex: "rencana_biaya",
+ key: "rencana_biaya",
// render: (text, record) => { return renderFormatRupiah(text, "Rp") }
- render: (text, record) => { return record.currency_symbol ? `${record.currency_symbol} ${formatThousand(text)}` : `${formatThousand(text)}` }
+ render: (text, record) => {
+ return record.currency_symbol
+ ? `${record.currency_symbol} ${formatThousand(text)}`
+ : `${formatThousand(text)}`;
+ },
},
{
- title: 'Project Type',
- dataIndex: 'color_progress',
- key: 'color_progress',
- render: (text, record) => <>{record.join_second_name ? record.join_second_name : "-"}
+ title: "Project Type",
+ dataIndex: "color_progress",
+ key: "color_progress",
+ render: (text, record) => (
+ <>{record.join_second_name ? record.join_second_name : "-"}
+ ),
},
{
- title: 'PM', dataIndex: 'pic', key: 'pic',
- render: (text, record) => <>{record.join_first_name ? record.join_first_name : "-"}
+ title: "PM",
+ dataIndex: "pic",
+ key: "pic",
+ render: (text, record) => (
+ <>{record.join_first_name ? record.join_first_name : "-"}
+ ),
},
{
- title: 'Time Project',
- dataIndex: 'akhir_proyek',
- key: 'akhir_proyek',
- render: (text, record) => <>{moment(record.mulai_proyek).format(format)} - {moment(record.akhir_proyek).format(format)},
+ title: "Time Project",
+ dataIndex: "akhir_proyek",
+ key: "akhir_proyek",
+ render: (text, record) => (
+ <>
+ {moment(record.mulai_proyek).format(format)} -{" "}
+ {moment(record.akhir_proyek).format(format)}
+
+ ),
},
];
@@ -868,142 +1029,172 @@ const CreatedProyek = ({ params, ...props }) => {
columns={columns}
dataSource={dataTable}
pagination={false}
- rowKey={'id'}
+ rowKey={"id"}
/>
- )
- }, [dataTable, dataVersionGantt, loadVersionGantt])
-
-
+ );
+ }, [dataTable, dataVersionGantt, loadVersionGantt]);
const handleCloseDialogDoc = () => {
- setOpenDialogDoc(false)
- setidTask(0)
- }
+ setOpenDialogDoc(false);
+ setidTask(0);
+ };
const handleCloseDialogAsignHr = () => {
- setidTask(0)
+ setidTask(0);
setOpenDialogAsignHR(false);
- }
+ };
const handleCloseDialogAssignK3 = (status) => {
if (status == "success") {
- NotificationManager.success(`Assign K3 to Project berhasil disimpan!`, 'Success!!');
+ NotificationManager.success(
+ `Assign K3 to Project berhasil disimpan!`,
+ "Success!!"
+ );
} else if (status == "failed") {
- NotificationManager.error(`Assign K3 to Project gagal disimpan!`, 'Failed!!');
+ NotificationManager.error(
+ `Assign K3 to Project gagal disimpan!`,
+ "Failed!!"
+ );
}
- setidTask(0)
+ setidTask(0);
setOpenDialogAssignK3(false);
- }
-
- const RenderDialogForm = useMemo(() => (
-
toggleAddDialog}
- idTask={idTask}
- dataTypeProyek={dataTypeProyek}
- dataPM={dataPm}
- />
- ), [openDialog])
-
- const RenderDialogFormProyek = useMemo(() => (
- toggleAddDialogProyek}
- idTask={idTask}
- dataTypeProyek={dataTypeProyek}
- dataPM={dataPm}
- />
- ), [openDialogProyek])
-
- const RenderDialogFormMaterial = useMemo(() => (
- setOpenDialogMaterial(false)}
- toggleDialog={() => setOpenDialogMaterial(!openDialogMaterial)}
- idTask={idTask}
- userProyek={userProyek}
- materialProyek={materialProyek}
- materialResource={materialResource}
- proyekName={proyekName}
- />
- ), [openDialogMaterial])
-
- const RenderDialogTableTools = useMemo(() => (
- setOpenDialogTools(false)}
- toggleDialog={() => setOpenDialogTools(!openDialogTools)}
- idTask={idTask}
- toolsResource={toolsResource}
- userProyek={userProyek}
- proyekName={proyekName}
- />
- ), [openDialogTools])
+ };
- // DialogAsignHr
- const RenderDialogAsignHr = useMemo(() => (
- setOpenDialogAsignHR(false)}
- toggleDialog={() => setOpenDialogAsignHR(!openDialogAsignHR)}
- handleClose={handleCloseDialogAsignHr}
- idTask={idTask}
- proyekName={proyekName}
- />
- ), [openDialogAsignHR])
+ const RenderDialogForm = useMemo(
+ () => (
+ toggleAddDialog}
+ idTask={idTask}
+ dataTypeProyek={dataTypeProyek}
+ dataPM={dataPm}
+ />
+ ),
+ [openDialog]
+ );
+
+ const RenderDialogFormProyek = useMemo(
+ () => (
+ toggleAddDialogProyek}
+ idTask={idTask}
+ dataTypeProyek={dataTypeProyek}
+ dataPM={dataPm}
+ />
+ ),
+ [openDialogProyek]
+ );
+
+ const RenderDialogFormMaterial = useMemo(
+ () => (
+ setOpenDialogMaterial(false)}
+ toggleDialog={() => setOpenDialogMaterial(!openDialogMaterial)}
+ idTask={idTask}
+ userProyek={userProyek}
+ materialProyek={materialProyek}
+ materialResource={materialResource}
+ proyekName={proyekName}
+ />
+ ),
+ [openDialogMaterial]
+ );
+
+ const RenderDialogTableTools = useMemo(
+ () => (
+ setOpenDialogTools(false)}
+ toggleDialog={() => setOpenDialogTools(!openDialogTools)}
+ idTask={idTask}
+ toolsResource={toolsResource}
+ userProyek={userProyek}
+ proyekName={proyekName}
+ />
+ ),
+ [openDialogTools]
+ );
+ // DialogAsignHr
+ const RenderDialogAsignHr = useMemo(
+ () => (
+ setOpenDialogAsignHR(false)}
+ toggleDialog={() => setOpenDialogAsignHR(!openDialogAsignHR)}
+ handleClose={handleCloseDialogAsignHr}
+ idTask={idTask}
+ proyekName={proyekName}
+ />
+ ),
+ [openDialogAsignHR]
+ );
// DialogAssignK3
- const RenderDialogAssignK3 = useMemo(() => (
- {
- if (openDialogAssignK3) {
- setidTask(0)
- }
- setOpenDialogAssignK3(!openDialogAssignK3)
- }}
- idTask={idTask}
- proyekName={proyekName}
- dataK3={dataK3}
- />
- ), [openDialogAssignK3])
-
- const RenderDialogDoc = useMemo(() => (
- setOpenDialogDoc(false)}
- toggleDialog={() => setOpenDialogDoc(!openDialogDoc)}
- handleClose={handleCloseDialogDoc}
- idTask={idTask}
- proyekName={proyekName}
- />
- ), [openDialogDoc])
-
- const ViewProyek = useMemo(() => (
-
- ), [openDialogViewDetail])
-
- const renderDialogGantt = useMemo(() => (
-
- ), [openDialogGantt])
+ const RenderDialogAssignK3 = useMemo(
+ () => (
+ {
+ if (openDialogAssignK3) {
+ setidTask(0);
+ }
+ setOpenDialogAssignK3(!openDialogAssignK3);
+ }}
+ idTask={idTask}
+ proyekName={proyekName}
+ dataK3={dataK3}
+ />
+ ),
+ [openDialogAssignK3]
+ );
+
+ const RenderDialogDoc = useMemo(
+ () => (
+ setOpenDialogDoc(false)}
+ toggleDialog={() => setOpenDialogDoc(!openDialogDoc)}
+ handleClose={handleCloseDialogDoc}
+ idTask={idTask}
+ proyekName={proyekName}
+ />
+ ),
+ [openDialogDoc]
+ );
+
+ const ViewProyek = useMemo(
+ () => (
+
+ ),
+ [openDialogViewDetail]
+ );
+
+ const renderDialogGantt = useMemo(
+ () => (
+
+ ),
+ [openDialogGantt]
+ );
return (
@@ -1032,18 +1223,38 @@ const CreatedProyek = ({ params, ...props }) => {
{RenderDialogAsignHr}
{RenderDialogAssignK3}
-
+
Project Information
-
+
-
+
-
+
@@ -1063,7 +1274,7 @@ const CreatedProyek = ({ params, ...props }) => {
- )
-}
+ );
+};
-export default CreatedProyek;
\ No newline at end of file
+export default CreatedProyek;