surveyor_indonesia_frontend/src/const/GeoserverFunc.js

import axios from 'axios';
import { wfsDispatcherUrl, appConfig } from './MapConst.js';
import { API_GET_COLUMN_TABLE, API_LOGIN, API_CREATE_NEW_LAYER, API_UPDATE_MAP, API_GET_IMAGE, API_UPDATE_FEATURE,
API_LAYER_ATTRIBUTE_BY_LAYERNAME, IMAGE_SEARCH } from './ApiConst.js';
import { findWhere } from 'underscore';
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style';
import { Select } from 'ol/interaction';
import Feature from 'ol/Feature';
import {Vector as VectorLayer} from 'ol/layer';
import {Vector as VectorSource} from 'ol/source';
import {getArea, getLength} from 'ol/sphere';

export const reqTableData = async (typeName) => {
	let xmlDoc = null;
  let resTableData = null;

	if (typeName === undefined) {
		return;
	}

	const config = {
		headers: {'Content-Type': 'text/xml'}
	};
	
  const reqPayload = `<?xml version="1.0" encoding="UTF-8"?>
    <wfs:GetFeature service="WFS" 
      version="1.1.0" 
      outputFormat="JSON" 
      startIndex="0" 
      xmlns:wfs="http://www.opengis.net/wfs" 
      xmlns:ogc="http://www.opengis.net/ogc" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
        <wfs:Query typeName="${typeName}" srsName="EPSG:4326">
        </wfs:Query>
    </wfs:GetFeature>`;

  let reqAxios = await axios.post(wfsDispatcherUrl, reqPayload, config).then((res) => { return res; }).catch(err => err.message);
  console.log('reqAxios',reqAxios);

  if (reqAxios.data !== undefined) {
  	console.log('typeof response', typeof(reqAxios.data));
  	if (typeof(reqAxios.data) == 'object') {
  		resTableData = reqAxios.data;
  		return {
  			"success": true,
  			"result": resTableData
  		}
  	}
  	else {
  		let parser = new DOMParser();
			if (reqAxios.data !== undefined) {
				xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
				resTableData = xmlDoc.getElementsByTagName('ows:ExceptionText')[0].childNodes[0].nodeValue;
			}
	  	console.log('xmlDoc',xmlDoc)
	  	console.log('resTableData',resTableData);
	  	return {
  			"success": false,
  			"result": resTableData
  		}
  	}  	
  }
  else {
  	resTableData = reqAxios;
  	return {
			"success": false,
			"result": resTableData
		}
  }

}

/*export const getTableColumns = async (tableName) => {

	let result = null;

	let reqPayload = {
		tableName: tableName
	}
	const config = {
		headers: {
			'Content-Type': 'application/json',
		}
	};

	let reqAxios = await axios.post(API_GET_COLUMN_TABLE, reqPayload, config).then((res) => { return res; });

	if (reqAxios.data !== undefined) {
  	result = reqAxios.data;
  	return result;
  }
  else {
  	result = reqAxios;
  	return result;
  }
}*/

export const getTableColumns = async (tableName) => {
	let obj = {
		tableName: tableName
	}
	const param = {
    method: 'POST',
    header: JSON.stringify({'Content-Type': 'application/json'}),
    body: JSON.stringify(obj)
  }
  
  try {
    const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res)
    if(result){

      return {
      	"success": true,
      	"result": result
      }
    } else {
      return {
      	"success": false,
      	"result": result
      }
    }
  } catch(err) {
  	return {
  		"success": false,
  		"result": err.message
  	}
  }
}

export const test = () => {
	axios.get("http://localhost/osmap-php/index.php/siopas/user/test_user").then((res) => { console.log('test axios', res) });
}

export const loginSiopas = (username, password) => {
	let result = null;
	fetch(API_LOGIN, {
		method: 'POST',
		header: JSON.stringify({
			'Content-Type': 'multipart/form-data'  
		}),
		body: JSON.stringify({
		      username: username,
		      password: password     
		    })

		}).then((response) => {
			console.log('response', response);
			response.json();
		}).then((responseJson) => {
		 		console.log('responseJson login', responseJson) 
		 		return;
		 	})
		 	.catch((error) => {
		 		console.log('error login', error)
		 	});
}

export const getGeomType = async (layerName) => {
	let url = appConfig.geoserver_host + 'rest/workspaces/' + appConfig.workspace_name + '/featuretypes/' + layerName + '.json';
	let reqAxios = await axios.get(url).then((res) => { return res }).catch(err => err.message);
	console.log('getGeomType reqAxios', reqAxios);
	let geomType = '';

	if (reqAxios !== "Request failed with status code 404") {
		if (reqAxios !== undefined) {
			if (reqAxios.data !== undefined) {
				if (reqAxios.data.featureType !== undefined) {
					if (reqAxios.data.featureType.attributes !== undefined) {
						if (reqAxios.data.featureType.attributes.attribute !== undefined) {
							if (reqAxios.data.featureType.attributes.attribute.length > 0) {
								let attribute = reqAxios.data.featureType.attributes.attribute;
								for (let i=0; i < attribute.length; i++) {
									if (attribute[i].binding.includes('geom')) {
										let str = attribute[i].binding;
										let geomStr = str.substr(str.indexOf('geom')+5); // so I get the MultiPolygon (or other geom type provided in geoserver api)
										geomType = geomStr;
									}
								}
							}
						}
					}
				}
			}
		}
		return {
			"success": true,
			"result": geomType
		}
	}
	else {

		return {
			"success": false,
			"result": reqAxios 
		};
	}
}

export const createNewLayer = async (reqPayload) => {
	let payload = {
		workspace_name: appConfig.workspace_name,
		datastore_name: appConfig.datastore_name,
		layer_name: reqPayload.layer_name,
		layer_type: reqPayload.layer_type,
		columns: reqPayload.columns
	}


	let reqAxios = await axios({
		method: 'post',
		url: API_CREATE_NEW_LAYER,
		headers: {
			'Content-Type': 'application/json',
		},
		data: payload
	}).then((res) => {
		return res;
	}).catch((error) => {
		return error;
	});

	console.log('createNewLayer API',reqAxios);

	return reqAxios;
}


export const updateFeature = async (layerName, fid, properties) => {
	/*
	Example:

	Edit Attributes / Edit Feature
	---------------------
	URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
	Method: POST
	Request Payload:
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="geonode:test12" xmlns:feature="http://www.geonode.org/">
			<wfs:Property>
				<wfs:Name>nama_area</wfs:Name>
				<wfs:Value>bandara3_edit</wfs:Value>
			</wfs:Property>
			<wfs:Property>
				<wfs:Name>status_area</wfs:Name>
				<wfs:Value>0</wfs:Value>
			</wfs:Property>
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				<ogc:FeatureId fid="test12.3"/>
			</ogc:Filter>
		</wfs:Update>
	</wfs:Transaction>
	*/

	console.log('layerName, fid, properties', layerName, fid, properties);

	const config = {
		headers: {'Content-Type': 'text/xml'}
	};
	let result = null;
	let xmlDoc = null;

	let xml_fid = `<ogc:FeatureId fid="${fid}"/>`;
	let xml_properties = '';

	for (let i=0; i<properties.length; i++) {
		xml_properties += `
			<wfs:Property>
				<wfs:Name>${properties[i].label}</wfs:Name>
				<wfs:Value>${properties[i].value}</wfs:Value>
			</wfs:Property>`;
	}

	let payload = `<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Modified 1 feature" service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
		<wfs:Update typeName="${appConfig.workspace_name}:${layerName}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
			${xml_properties}
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				${xml_fid}
			</ogc:Filter>
		</wfs:Update>
	</wfs:Transaction>`;

	let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
  console.log('updateFeature reqAxios',reqAxios);

  if (reqAxios.data !== undefined) {
  	console.log('typeof response', typeof(reqAxios.data));
  	let parser = new DOMParser();
  	xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
  	let status =  xmlDoc.getElementsByTagName('wfs:Status')[0];
  	console.log('xml status', status);
  	let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName;
  	console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED
  	if (status !== undefined) {
  		if (statusText == 'SUCCESS') {
  			result = 'Success Update Feature';
  			return {
					"success": true,
					"result": result
				}
  		}
  		else if (statusText == 'FAILED') {
  			result = 'Error Update Feature';
  			let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML;
  			return {
					"success": false,
					"result": errMessage
				}
  		}
  	}
  	else {
  		return {
  			"success": false,
  			"result": "The entity name must immediately follow the entity reference."
  		}
  	}
  }
  else {
  	result = reqAxios;
  	return {
			"success": false,
			"result": result
		}
  }
}


export const updateFeature2 = async (layerName, fid, column_value) => {
	const config = {
		headers: {'Content-Type': 'application/json'}
	};
	console.log('layerName', layerName);
	console.log('fid', fid);
	let payload = {
		"layer_name": layerName,
		"fid": fid,
		"column_value": column_value
	};

	console.log('payload',payload);


	const param = {
			method: 'POST',
			header: JSON.stringify({'Content-Type': 'application/json'}),
			body: JSON.stringify(payload)
		}
		
	const resFetch = await fetch(API_UPDATE_FEATURE, param).then(response => response.json()).then(res => res)
	console.log('resFetch', resFetch);


  console.log('updateFeature resFetch',resFetch);
  if (resFetch !== undefined) {
  	if (resFetch.code_type == 'success') {
  		return {
				"success": true,
				"result": "Update Success"
			}
  	}
  	else {
  		return {
				"success": false,
				"result": "Update Failed"
			}
  	}
  }
  else {
  	return {
			"success": false,
			"result": resFetch
		}
  }
}

export const updateMap = async (requestPayload) => {

	/*let requestPayload = {
		"map_title": "BMD Denpasar",
		"map_zoom": 9,
		"map_projection": "EPSG:3857",
		"center_x": "12826670.196943447",
		"center_y": "-967549.1600801547",
		"map_layers": [
			{
				"idx": 0, 
				"layer_name": "OSM", 
				"layer_type": "base", 
				"layer_source": "OlSourceOsm", 
				"layer_visible": true,
				"layer_position": 0
			},
			{
				"idx": 1, 
				"layer_name": "point_tanah_kantor_desa_lurah0", 
				"layer_type": "Point", 
				"layer_source": {
	              "url": "http://192.168.99.110/geoserver/wms",
	              "params": {
	                "LAYERS": "bmd_denpasar:point_tanah_kantor_desa_lurah0", 
	                "TILED": true,
	                "SLD": "http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:point_tanah_kantor_desa_lurah0"
	              },
	              "serverType": "geoserver",
	              "transition": 0,
	              "crossOrigin": "anonymous"
	            }, 
				"layer_visible": true,
				"layer_position": 1
			}
		]
	}*/

	const config = {
		headers: {'Content-Type': 'application/json'}
	};
	let reqAxios = await axios.post(API_UPDATE_MAP, requestPayload, config).then(res => res ).catch(error => error);
	return reqAxios;
}


export const getRandomColor = () => {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

export const createNewFeature = async (obj) => {
	/*
	Create New Feature
	-------------------
	URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
	Method: POST
	Request Payload:
	- layer name
	- geom type (multi / single)
	- map projection
	- coordinates
	- other feature atrributes (fields)

	The obj example:
	{
		"layer_name": "test_bmd_2_point",
		"layer_geom_type": "Point",
		"map_projection": "EPSG:3857",
		"coordinates": [
			[12859380.865788266, -975611.0164268095]
		],
		"layer_attributes": [{
			"idx": 0
			"label": "nama_point"
			"value": "nusa penida"
		}]
	}

	Examples:
	(Point)
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
			<feature:test_bmd_2_point xmlns:feature="http://siopas.co.id/bmd-denpasar">
				<feature:the_geom>
					<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
						<gml:coordinates cs="," decimal="." ts=" ">11886499.833369536,-693527.4813667177</gml:coordinates>
					</gml:Point>
				</feature:the_geom>
				<feature:nama_point>point1</feature:nama_point>
			</feature:test_bmd_2_point>
		</wfs:Insert>
	</wfs:Transaction>

	Full example documentation on src/assets/docs/wfs_example.txt file
	*/

	const config = {
		headers: {'Content-Type': 'text/xml'}
	};
	let coords = ``;
	let layer_attributes = ``;
	let result = null;
	let xmlDoc = null;

	if (obj.layer_geom_type == "Point") {
		let longitude = obj.coordinates[0][0];
		let latitude = obj.coordinates[0][1];
		coords = `<gml:Point srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
					<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
				</gml:Point>`
	}
	else if (obj.layer_geom_type == "MultiPoint") {
		console.log('obj.coordinates', obj.coordinates);
		/*coordinates: Array(2)
			0: Array(1)
				0: (2) [12854303.787587587, -955479.4157146217]
			1: Array(1)
				0: (2) [12855873.913617639, -955135.2785083359]*/
		coords = `<gml:MultiPoint srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
		for (let i=0; i<obj.coordinates.length; i++) {
			let longitude = obj.coordinates[i][0][0];
			let latitude = obj.coordinates[i][0][1];
			coords += `<gml:pointMember>
						<gml:Point>
							<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
						</gml:Point>
					</gml:pointMember>`;
		}
		coords += `</gml:MultiPoint>`;
	}
	else if (obj.layer_geom_type == "LineString") {
		console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ]

		coords = `<gml:LineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
			<gml:coordinates cs="," decimal="." ts=" ">`;

			for(let i=0; i<obj.coordinates[0].length; i++) {
				let longitude = obj.coordinates[0][i][0];
				let latitude = obj.coordinates[0][i][1];
				let lastLoop = obj.coordinates[0].length - 1;
				if (i == lastLoop) {
					coords += `${longitude},${latitude}`; // no space at the end of loop
				} else {
					coords += `${longitude},${latitude} `; // with space
				}
			}

		coords += `</gml:coordinates>
		</gml:LineString>`;
	}
	else if (obj.layer_geom_type == "MultiLineString") {
		console.log('obj.coordinates', obj.coordinates);

		coords += `<gml:MultiLineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;

		for (let i=0; i < obj.coordinates.length; i++) {
			coords += `<gml:lineMember>
									<gml:LineString>
										<gml:coordinates cs="," decimal="." ts=" ">`;
			for(let j=0; j < obj.coordinates[i][0].length; j++) {
				let longitude = obj.coordinates[i][0][j][0];
				let latitude = obj.coordinates[i][0][j][1];
				let lastLoop = obj.coordinates[i][0].length - 1;

				if (j == lastLoop) {
					coords += `${longitude},${latitude}`; // no space at the end of loop
				} else {
					coords += `${longitude},${latitude} `; // with space
				}
			}
			coords += `</gml:coordinates>
					</gml:LineString>
				</gml:lineMember>`;
		}

		coords +=	`</gml:MultiLineString>`;
	}
	else if (obj.layer_geom_type == "Polygon") {
		console.log('obj.coordinates', obj.coordinates);
		/*coordinates: Array(1)
			0: Array(1)
				0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
		*/
		coords = `<gml:Polygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
					<gml:outerBoundaryIs>
						<gml:LinearRing>
							<gml:coordinates cs="," decimal="." ts=" ">`;
		for (let i=0; i < obj.coordinates[0][0].length; i++) {
			let longitude = obj.coordinates[0][0][i][0];
			let latitude = obj.coordinates[0][0][i][1];
			let lastLoop = obj.coordinates[0][0].length - 1;
			if (i == lastLoop) {
				coords += `${longitude},${latitude}`; // no space at the end of loop
			} else {
				coords += `${longitude},${latitude} `; // with space
			}
		}
		coords +=	`</gml:coordinates>
						</gml:LinearRing>
					</gml:outerBoundaryIs>
				</gml:Polygon>`;

	
	}
	else if (obj.layer_geom_type == "MultiPolygon") {
		console.log('obj.coordinates', obj.coordinates); 
		/*coordinates: Array(2)
			0: Array(1)
				0: [Array(5)]
					0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
			1: Array(1)
				0: [Array(5)]
					0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
		*/

		coords += `<gml:MultiPolygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
		for(let i=0; i<obj.coordinates.length; i++) {
			coords += `
				<gml:polygonMember>
						<gml:Polygon>
							<gml:outerBoundaryIs>
								<gml:LinearRing>
									<gml:coordinates cs="," decimal="." ts=" ">`;
									for (let j=0; j<obj.coordinates[i][0][0].length; j++) {
										let longitude = obj.coordinates[i][0][0][j][0];
										let latitude = obj.coordinates[i][0][0][j][1];
										let lastLoop = obj.coordinates[i][0][0].length - 1;
										if (j == lastLoop) {
											coords += `${longitude},${latitude}`; // no space at the end of loop
										} else {
											coords += `${longitude},${latitude} `; // with space
										}
									}
			coords +=		`</gml:coordinates>
								</gml:LinearRing>
							</gml:outerBoundaryIs>
						</gml:Polygon>
					</gml:polygonMember>`;
		}
		coords += `
			</gml:MultiPolygon>`;

	}

	if (obj.layer_attributes) {
		if (obj.layer_attributes.length > 0) {
			for(let i=0; i<obj.layer_attributes.length; i++) {
				layer_attributes += `<feature:${obj.layer_attributes[i].label}>${obj.layer_attributes[i].value}</feature:${obj.layer_attributes[i].label}>`;
			}
		}
	}

	let payload = `<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
			<feature:${obj.layer_name} xmlns:feature="http://siopas.co.id/bmd-denpasar">
				<feature:the_geom>
					${coords}
				</feature:the_geom>
				${layer_attributes}
			</feature:${obj.layer_name}>
		</wfs:Insert>
	</wfs:Transaction>`;

	console.log('payload', payload);

	let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
  console.log('createNewFeature reqAxios',reqAxios);

  if (reqAxios.data !== undefined) {
  	console.log('typeof response', typeof(reqAxios.data));
  	let parser = new DOMParser();
  	xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
  	let status =  xmlDoc.getElementsByTagName('wfs:Status')[0];
  	console.log('xml status', status);
		let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName;
  	console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED
  	if (status !== undefined) {
  		if (statusText == 'SUCCESS') {
  			result = 'Successfully create new feature!';
  			return {
					"success": true,
					"result": result
				}
  		}
  		else if (statusText == 'FAILED') {
  			result = 'Error create new feature';
  			let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML;
  			return {
					"success": false,
					"result": errMessage
				}
  		}
  	}
  }
  else {
  	result = reqAxios;
  	return {
			"success": false,
			"result": result
		}
  }

}

export const updateFeatureGeometry = async (obj) => {

	/*
	Edit Geometry
	-----------------
	URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
	Method: POST
	Request Payload:
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
			<wfs:Property>
				<wfs:Name>the_geom</wfs:Name>
				<wfs:Value>
					<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
						<gml:coordinates cs="," decimal="." ts=" ">12630296.161275087,-871501.5712076114</gml:coordinates>
					</gml:Point>
				</wfs:Value>
			</wfs:Property>
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				<ogc:FeatureId fid="test_bmd_2_point.1"/>
			</ogc:Filter>
		</wfs:Update>
	</wfs:Transaction>
	Response:
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
		<wfs:InsertResult>
			<ogc:FeatureId fid="none"/>
		</wfs:InsertResult>
		<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
			<wfs:Status>
				<wfs:SUCCESS/>
			</wfs:Status>
		</wfs:TransactionResult>
	</wfs:WFS_TransactionResponse>
	*/

	const config = {
		headers: {'Content-Type': 'text/xml'}
	};
	let coords = ``;
	let result = null;
	let xmlDoc = null;

	let splittedLayerName = obj.layer_name.toString().split(".");
	let layer_name = splittedLayerName[0];
	let fid = splittedLayerName[1];

	if (obj.layer_geom_type == "Point") {
		let longitude = obj.coordinates[0][0];
		let latitude = obj.coordinates[0][1];
		coords = `<gml:Point srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
					<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
				</gml:Point>`
	}
	else if (obj.layer_geom_type == "MultiPoint") {
		console.log('obj.coordinates', obj.coordinates);
		/*coordinates: Array(2)
			0: Array(1)
				0: (2) [12854303.787587587, -955479.4157146217]
			1: Array(1)
				0: (2) [12855873.913617639, -955135.2785083359]*/
		coords = `<gml:MultiPoint srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
		for (let i=0; i<obj.coordinates.length; i++) {
			let longitude = obj.coordinates[i][0][0];
			let latitude = obj.coordinates[i][0][1];
			coords += `<gml:pointMember>
						<gml:Point>
							<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
						</gml:Point>
					</gml:pointMember>`;
		}
		coords += `</gml:MultiPoint>`;
	}
	else if (obj.layer_geom_type == "LineString") {
		console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ]

		coords = `<gml:LineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
			<gml:coordinates cs="," decimal="." ts=" ">`;

			for(let i=0; i<obj.coordinates[0].length; i++) {
				let longitude = obj.coordinates[0][i][0];
				let latitude = obj.coordinates[0][i][1];
				let lastLoop = obj.coordinates[0].length - 1;
				if (i == lastLoop) {
					coords += `${longitude},${latitude}`; // no space at the end of loop
				} else {
					coords += `${longitude},${latitude} `; // with space
				}
			}

		coords += `</gml:coordinates>
		</gml:LineString>`;
	}
	else if (obj.layer_geom_type == "MultiLineString") {

	}
	else if (obj.layer_geom_type == "Polygon") {
		console.log('obj.coordinates', obj.coordinates);
		/*coordinates: Array(1)
			0: Array(1)
				0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
		*/
		coords = `<gml:Polygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
					<gml:outerBoundaryIs>
						<gml:LinearRing>
							<gml:coordinates cs="," decimal="." ts=" ">`;
		for (let i=0; i < obj.coordinates[0][0].length; i++) {
			let longitude = obj.coordinates[0][0][i][0];
			let latitude = obj.coordinates[0][0][i][1];
			let lastLoop = obj.coordinates[0][0].length - 1;
			if (i == lastLoop) {
				coords += `${longitude},${latitude}`; // no space at the end of loop
			} else {
				coords += `${longitude},${latitude} `; // with space
			}
		}
		coords +=	`</gml:coordinates>
						</gml:LinearRing>
					</gml:outerBoundaryIs>
				</gml:Polygon>`;

	
	}
	else if (obj.layer_geom_type == "MultiPolygon") {
		console.log('obj.coordinates', obj.coordinates); 
		/*coordinates: Array(2)
			0: Array(1)
				0: [Array(5)]
					0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
			1: Array(1)
				0: [Array(5)]
					0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
		*/

		coords += `<gml:MultiPolygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
		for(let i=0; i<obj.coordinates.length; i++) {
			coords += `<gml:polygonMember>
						<gml:Polygon>
							<gml:outerBoundaryIs>
								<gml:LinearRing>
									<gml:coordinates cs="," decimal="." ts=" ">`;
									for (let j=0; j<obj.coordinates[i][0][0].length; j++) {
										let longitude = obj.coordinates[i][0][0][j][0];
										let latitude = obj.coordinates[i][0][0][j][1];
										let lastLoop = obj.coordinates[i][0][0].length - 1;
										if (j == lastLoop) {
											coords += `${longitude},${latitude}`; // no space at the end of loop
										} else {
											coords += `${longitude},${latitude} `; // with space
										}
									}
			coords +=		`</gml:coordinates>
								</gml:LinearRing>
							</gml:outerBoundaryIs>
						</gml:Polygon>
					</gml:polygonMember>`;
		}
		coords += `</gml:MultiPolygon>`;

	}


	let payload = `<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="${appConfig.workspace_name}:${layer_name}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
			<wfs:Property>
				<wfs:Name>the_geom</wfs:Name>
				<wfs:Value>
					${coords}
				</wfs:Value>
			</wfs:Property>
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				<ogc:FeatureId fid="${fid}"/>
			</ogc:Filter>
		</wfs:Update>
	</wfs:Transaction>`;

	console.log('payload', payload);

	let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
  console.log('createNewFeature reqAxios',reqAxios);

  if (reqAxios.data !== undefined) {
  	console.log('typeof response', typeof(reqAxios.data));
  	let parser = new DOMParser();
  	xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
  	let status =  xmlDoc.getElementsByTagName('wfs:Status')[0];
  	console.log('xml status', status);
  	result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
  	console.log('xml result', result);
  	return {
			"success": true,
			"result": result
		}
  }
  else {
  	result = reqAxios;
  	return {
			"success": false,
			"result": result
		}
  }

} 


export const deleteFeature = async (layerName, fid) => {
	/*
	Delete Feature
	-------------------------------
	URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
	Method: POST
	Request Payload:
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				<ogc:FeatureId fid="test_bmd_2_point.1"/>
			</ogc:Filter>
		</wfs:Delete>
	</wfs:Transaction>
	Response:
	<?xml version="1.0" encoding="UTF-8"?>
	<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
		<wfs:InsertResult>
			<ogc:FeatureId fid="none"/>
		</wfs:InsertResult>
		<wfs:TransactionResult handle="Removed 1 feature from '' via MapLoom.">
			<wfs:Status>
				<wfs:SUCCESS/>
			</wfs:Status>
		</wfs:TransactionResult>
	</wfs:WFS_TransactionResponse>
	*/
	const config = {
		headers: {'Content-Type': 'text/xml'}
	};
	let result = null;
	let xmlDoc = null;
	let payload = `<?xml version="1.0" encoding="UTF-8"?>
	<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
		<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="${appConfig.workspace_name}:${layerName}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
			<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
				<ogc:FeatureId fid="${fid}"/>
			</ogc:Filter>
		</wfs:Delete>
	</wfs:Transaction>`;
	let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
  console.log('deleteFeature reqAxios',reqAxios);

  if (reqAxios.data !== undefined) {
  	let parser = new DOMParser();
  	xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
  	let status =  xmlDoc.getElementsByTagName('wfs:Status')[0];
  	console.log('xml status', status);
  	result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
  	console.log('xml result', result);
  	return {
			"success": true,
			"result": result
		}
  }
  else {
  	result = reqAxios;
  	return {
			"success": false,
			"result": result
		}
  }

}


export const getLayerColor = async (SLD_URL) => {

	let result = null;
	let xmlDoc = null;
	let resAxios = await axios.get(SLD_URL).then(res => res).catch(err => err.message);


	if (resAxios.data) {
		let parser = new DOMParser();
  	xmlDoc = parser.parseFromString(resAxios.data, "text/xml");
  	let fillColor = '';
  	let cssParameter =  xmlDoc.getElementsByTagName('sld:CssParameter');
  	for (let i=0; i<cssParameter.length; i++) {
  		if (cssParameter[i].getAttribute('name') == 'fill') {
  			fillColor = cssParameter[i].innerHTML;
  		}
  		else {
  			if (cssParameter[i].getAttribute('name') == 'stroke') {
  				fillColor = cssParameter[i].innerHTML;
  			}

  		}

  	}
  	result = fillColor;
  	return {
			"success": true,
			"result": result
		}
  }
  else {
  	result = resAxios;
  	return {
			"success": false,
			"result": result
		}
  }
}


export const getImagePopup = async (type, id) => {
	let category = '';
	if(type==="m_sales"){
		category = "m_sales";
	}else if(type==="m_office"){
		category = "office";
	}else if(type==="m_customer"){
		category = "customer";
	}else if(type==="m_employee"){
		category = "employee"
	}else if(type==="realisasi"){
		category = "laporan-planning"
	}
	else if (type==="report_activity") {
		category = "report_activity"
	}



	let payload = {
		"paging": {"start": 0, "length": -1},
		"columns": [
			{"name":"category", "logic_operator": "=", "value": category.toString(), "operator": "and"},
			{"name": "ref_id", "logic_operator": "=", "value": id.toString(), "operator": "and"}
		],
		"orders": {"columns": ["image"], "ascending": true}
	}

	let config = {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer '+window.localStorage.getItem('token')
    },
    body: JSON.stringify(payload) // body data type must match "Content-Type" header
  }

  let resFetch = await fetch(IMAGE_SEARCH, config).then(response => response.json()).then(res => res);
	let resAxios = {data: resFetch} // karena pake fetch return api nya gak di dalam data.data
	return resAxios;
}


export const getLayerAttribute = async (layerName) => {
	const param = {
    method: 'GET',
    header: JSON.stringify({'Content-Type': 'application/json'}),
  }
  
  try {
    const result = await fetch(API_LAYER_ATTRIBUTE_BY_LAYERNAME+layerName, param).then(response => response.json()).then(res => res)

    if (result.code_type == 'success') {
    	return {
				"success": true,
				"result": result
			}
    }
    else {
    	return {
				"success": false,
				"result": result.code_message
			}
    }
  } catch(err) {
    console.log(err);
    return {
			"success": false,
			"result": err.message.toString()
		}
  }
}


/**
 * Format length output.
 * @param {LineString} line The line.
 * @return {string} The formatted length.
 */
export const formatLength = (line) => {
  var length = getLength(line);
  var output;
  if (length > 100) {
    output = (Math.round(length / 1000 * 100) / 100) +
        ' ' + 'km';
  } else {
    output = (Math.round(length * 100) / 100) +
        ' ' + 'm';
  }
  return output;
};

/**
 * Format area output.
 * @param {Polygon} polygon The polygon.
 * @return {string} Formatted area.
 */
export const formatArea = (polygon) => {
  var area = getArea(polygon);
  console.log('area', area);
  var output;
  if (area > 10000) {
    output = (Math.round(area / 1000000 * 100) / 100) +
        ' ' + 'km2';
  } else {
    output = (Math.round(area * 100) / 100) +
        ' ' + 'm2';
  }
  return output;
};

export const lightOrDark = (color) => {
	let r, g, b, hsp;

  if (color.match(/^rgb/)) {

    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

    r = color[1];
    g = color[2];
    b = color[3];
  } 
  else {

    color = +("0x" + color.slice(1).replace( 
      color.length < 5 && /./g, '$&$&'
    )
             );

    r = color >> 16;
    g = color >> 8 & 255;
    b = color & 255;
  }

  hsp = Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
  );

  if (hsp>127.5) {

    return 'light';
  } 
  else {

    return 'dark';
  }
}

export const numberWithCommas = (x) => {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}