se/SE/se-lib/Route/WfsJsRequestPanel.php.updateResponseView.js

var DBG = 0;
var NODE_ID_TREE_VIEW_FROM_TEXT = NODE_ID_TREE_VIEW_FROM_TEXT || null // 'NODE_ID_TREE_VIEW_FROM_TEXT' => "wfsResponseTreeView",
var NODE_ID_TREE_VIEW_FROM_JSON = NODE_ID_TREE_VIEW_FROM_JSON || null // 'NODE_ID_TREE_VIEW_FROM_JSON' => "jsonResponseTreeView",
// 'NODE_ID_WFS_RESPONSE' => "wfsResponse",
// 'JS_FUNCTION_UPDATE_RESPONSE' => "updateWfsResponse"
// 'JS_FUNCTION_GET_SELECTED_FORMAT' => "getWfsResponseFormat"

// Object.prototype.toString.call([]) // "[object Array]"
// Object.prototype.toString.call('') // "[object String]"
// Object.prototype.toString.call({}) // "[object Object]"
// Object.prototype.toString.call(null) // "[object Null]"
// Object.prototype.toString.call() // "[object Undefined]"
function p5Utils_isString(arg) { return '[object String]' === Object.prototype.toString.call(arg); }
function p5Utils_isArray(arg) { return '[object Array]' === Object.prototype.toString.call(arg); }
function p5Utils_isObject(arg) { return '[object Object]' === Object.prototype.toString.call(arg); }

// private var - global for this file
var _RESPONSE_DATA = null

function updateResponse(values) {
	if ('undefined' !== typeof values) _RESPONSE_DATA = values
	var responseFormat = global[JS_FUNCTION_GET_SELECTED_FORMAT]() // json, text
	console.warn('format: '+responseFormat+', _RESPONSE_DATA: '+_RESPONSE_DATA)

	document.getElementById(NODE_ID_WFS_RESPONSE).innerHTML = (p5Utils_isString(_RESPONSE_DATA)) ? _RESPONSE_DATA : JSON.stringify(_RESPONSE_DATA, null, 2)
	if (NODE_ID_TREE_VIEW_FROM_JSON) {
		var treeViewNode = document.getElementById(NODE_ID_TREE_VIEW_FROM_JSON)
		if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
	}
	if (NODE_ID_TREE_VIEW_FROM_JSON) {
		var treeViewNode = document.getElementById(NODE_ID_TREE_VIEW_FROM_JSON)
		if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
	}

	if (NODE_ID_TREE_VIEW_FROM_JSON) {
		if ('json' === responseFormat) {
			document.getElementById(NODE_ID_WFS_RESPONSE).style.display = 'none'
			if (!document.getElementById(NODE_ID_TREE_VIEW_FROM_JSON)) {
				var respTxtNode = document.getElementById(NODE_ID_WFS_RESPONSE)
				var treeViewNode = document.createElement('div')
				treeViewNode.id = NODE_ID_TREE_VIEW_FROM_JSON
				treeViewNode.style.margin = '0'
				treeViewNode.style.padding = '9.5px'
				treeViewNode.style.border = '1px solid #ccc'
				treeViewNode.style.color = '#333'
				treeViewNode.style.backgroundColor = '#f5f5f5'
				treeViewNode.style.fontFamily = 'monospace'
				treeViewNode.style.fontSize = 'x-small'
				treeViewNode.style.lineHeight = '1.42857143'
				treeViewNode.style.wordBreak = 'break-all'
				treeViewNode.style.wordWrap = 'break-word'
				respTxtNode.parentNode.insertBefore(treeViewNode, respTxtNode.nextSibling);

				// var jsonResponse = document.getElementById(NODE_ID_WFS_RESPONSE).data_jsonResponse
				// if (jsonResponse) {
				// 	parseJsonToTreeViewRec(jsonResponse, treeViewNode)
				// }
				parseJsonToTreeViewRec( _RESPONSE_DATA ? _RESPONSE_DATA : 'TODO:xxx' , treeViewNode)
			}
			document.getElementById(NODE_ID_TREE_VIEW_FROM_JSON).style.display = 'block'
		} else { // 'text' === responseFormat
			var treeViewNode = document.getElementById(NODE_ID_TREE_VIEW_FROM_JSON)
			if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
			document.getElementById(NODE_ID_WFS_RESPONSE).style.display = 'block'
		}
	}

	if (NODE_ID_TREE_VIEW_FROM_TEXT) {
		if ('json' === responseFormat) {
			document.getElementById(NODE_ID_WFS_RESPONSE).style.display = 'none'
			if (!document.getElementById(NODE_ID_TREE_VIEW_FROM_TEXT)) {
				var respTxtNode = document.getElementById(NODE_ID_WFS_RESPONSE)
				var treeViewNode = document.createElement('div')
				treeViewNode.id = NODE_ID_TREE_VIEW_FROM_TEXT
				treeViewNode.style.margin = '0'
				treeViewNode.style.padding = '9.5px'
				treeViewNode.style.border = '1px solid #ccc'
				treeViewNode.style.color = '#333'
				treeViewNode.style.backgroundColor = '#f5f5f5'
				treeViewNode.style.fontFamily = 'monospace'
				treeViewNode.style.fontSize = 'x-small'
				treeViewNode.style.lineHeight = '1.42857143'
				treeViewNode.style.wordBreak = 'break-all'
				treeViewNode.style.wordWrap = 'break-word'
				treeViewNode.innerHTML = parseJsonTextToTreeView(respTxtNode.innerHTML)
				respTxtNode.parentNode.insertBefore(treeViewNode, respTxtNode.nextSibling);
			}
			document.getElementById(NODE_ID_TREE_VIEW_FROM_TEXT).style.display = 'block'
		} else { // 'text' === responseFormat
			var treeViewNode = document.getElementById(NODE_ID_TREE_VIEW_FROM_TEXT)
			if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
			document.getElementById(NODE_ID_WFS_RESPONSE).style.display = 'block'
		}
	}
}

function shortValue(str, limit) {
	var limit = limit || 100;
	return (str.length > limit) ? str.substr(0, limit)+'...' : str;
}

function parseJsonToTreeViewRec(json, node, xpath, name) {
	var name = name || '';
	var xpath = xpath || '/root';
	if(DBG)console.warn('DBG::parseJsonToTreeViewRec(json, node, "'+xpath+'", "'+name+'")', { isString: p5Utils_isString(json), 'isArray': p5Utils_isArray(json), 'isObject': p5Utils_isObject(json), json: json, node: node });
	if (p5Utils_isArray(json)) {
		var details = document.createElement('details')
		details.setAttribute('title', 'xpath: '+xpath)
		if ('/root' === xpath) details.setAttribute('open', 'open')
		node.appendChild(details)
		var summary = document.createElement('summary');
		details.appendChild(summary)
		summary.style.outline = 'none'
		summary.style.cursor = 'pointer'
		summary.appendChild(document.createTextNode( ( name ? '"'+name+'": ' : '' ) + '['))
		var div = document.createElement('div')
		div.style.paddingLeft = '20px'
		details.appendChild(div)
		json.forEach(function (subJson, idx) {
			parseJsonToTreeViewRec(subJson, div, xpath+'['+idx+']')
		})
	} else if (p5Utils_isObject(json)) {
		var details = document.createElement('details')
		details.setAttribute('title', 'xpath: '+xpath)
		if ('/root' === xpath) details.setAttribute('open', 'open')
		node.appendChild(details)
		var summary = document.createElement('summary');
		details.appendChild(summary)
		summary.style.outline = 'none'
		summary.style.cursor = 'pointer'
		summary.appendChild(document.createTextNode( ( name ? '"'+name+'": ' : '' ) + '{'))
		var div = document.createElement('div')
		div.style.paddingLeft = '20px'
		details.appendChild(div)
		Object.keys(json).forEach(function (fieldName) {
			parseJsonToTreeViewRec(json[fieldName], div, xpath+'/'+fieldName, fieldName)
		})
	} else if (p5Utils_isString(json)) {
		var div = document.createElement('div')
		div.style.paddingLeft = '11px'
		div.setAttribute('title', 'xpath: '+xpath+( name ? '/'+name : '' ))
		node.appendChild(div)
		div.appendChild(document.createTextNode( name ? '"'+name+'": "'+shortValue(json, 100)+'",' : '"'+json+'",' ));
	} else {
		if(DBG)console.warn('TODO: Not implemented - parseJsonToTreeViewRec(json, node)', { isString: p5Utils_isString(json), 'isArray': p5Utils_isArray(json), 'isObject': p5Utils_isObject(json), json: json });
	}
}

function p5WFS_ParseXlink(name) {
	if (!name || !name.length) return false;
	var splitName = name.split('#')
	if (2 !== splitName.length) return false;
	var splitFeatureID = splitName[1].split('.')
	if (2 !== splitFeatureID.length) return false;
	return {
		namespace: splitName[0],
		featureID: splitName[1],
		featureName: splitFeatureID[0],
		primaryKey: splitFeatureID[1],
	}
}

function parseJsonTextToTreeView(txtJson) {
	var out = ''
	var jsonLines = txtJson.split('\n').map(function (line) {
		var whiteSpacePrefix = line.match(/^\s*/)[0].length
		return [ whiteSpacePrefix, line.substr(whiteSpacePrefix) ]
	})
	if(DBG)console.table(jsonLines)
	jsonLines = jsonLines.map(function (jsonLine) {
		if (jsonLine[1].length > 100) return [ jsonLine[0], jsonLine[1].substr(0, 100) + '..."' ]
		return jsonLine
	})
	return generateTreeView(jsonLines)
}
function generateTreeView(jsonLines) {
	if (!jsonLines || !jsonLines.length) return ''
	out = ''
	if(DBG)console.log('----------------- group Childrens jsonLines:', jsonLines)
	groupedChildrens = jsonLines.reduce(function (grouped, cur, idx) {
		var last = grouped.pop()
		if (!last) {
			grouped.push({ deep: cur[0], label: cur[1], childrens: [] })
			if(DBG)console.log('groupedChildrens::(!last)', ' cur:[ '+cur[0]+', "'+cur[1]+'" ]')
		} else if (cur[0] > last.deep) {
			last.childrens.push([ cur[0] - 2, cur[1] ])
			grouped.push(last)
			if(DBG)console.log('groupedChildrens::(deep > cur[0])', ' cur:[ '+cur[0]+', "'+cur[1]+'" ]')
		} else if (cur[0] === last.deep) {
			var isEndOfObject = ([ ']', '],', '}', '},' ].indexOf(cur[1]) > -1)
			if (isEndOfObject && !last.childrens.length) last.label += ' ' + cur[1];
			grouped.push(last)
			if (!isEndOfObject) grouped.push({ deep: cur[0], label: cur[1], childrens: [] })
			// if (!isEndOfObject) console.log('groupedChildrens::(deep === cur[0] && !isEndOfObject)', ' cur:[ '+cur[0]+', "'+cur[1]+'" ]')
			if(DBG)console.log('groupedChildrens::(deep === cur[0])', ' cur:[ '+cur[0]+', "'+cur[1]+'" ]')
		}
		return grouped
	}, [])
	if(DBG)console.log('groupedChildrens', groupedChildrens)
	return groupedChildrens.map(function (group) {
		return (group.childrens.length > 0)
		?	'<details><summary style="outline:none; cursor:pointer">' + group.label + '</summary><div style="padding:0 0 0 20px">' + generateTreeView(group.childrens) + '</div></details>'
		:	'<div style="padding:0 0 0 11px">' + group.label + '</div>'
	}).join('\n')
}

global[JS_FUNCTION_UPDATE_RESPONSE] = updateResponse