added tree view for json output in wfs js panel

SE/se-lib/Route/Storage/AclStruct.php

@@ -793,9 +793,6 @@ class Route_Storage_AclStruct extends RouteBase {
 		]);
 		$removedFields = array_filter($item['field'], function ($field) { return !$field['isActive']; });
 		if (!empty($removedFields)) {
-			// echo UI::h('details', [ 'style' => "padding:6px; background-color:#333; color:#fff", 'open' => "open" ], [
-			// 	UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "WFS Response converted to JSON"),
-			// 	UI::h('pre', [ 'id' => 'wfsResponse', 'style' => "margin:0; font-size:x-small; border-radius:0" ], 'loading...'),
 			echo UI::h('details', [ 'style' => "margin-bottom:12px; padding:6px; background-color:#dedede; color:#000" ], [
 				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "Pola w koszu (".count($removedFields).")"),
 				UI::h('table', [ 'style' => "margin:6px 0 0 0; background-color:#fff; font-size:x-small", 'class' => "table table-bordered table-hover table-condensed" ], [

SE/se-lib/Route/WfsJsRequestPanel.php

@@ -134,7 +134,10 @@ class Route_WfsJsRequestPanel extends RouteBase {
 			echo UI::h('button', [ 'class' => "btn btn-primary", 'onClick' => "return sendWfsRequest(this)" ], "Wyslij");
 			echo UI::h('div', [ 'style' => "display:inline", 'id' => "wfs-example-btns" ]);
 			echo UI::h('details', [ 'style' => "padding:6px; background-color:#333; color:#fff", 'open' => "open" ], [
-				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "WFS Response converted to JSON"),
+				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], [
+					"WFS Response converted to JSON ",
+					UI::h('button', [ 'class' => "btn btn-xs btn-default", 'onClick' => "return wfsResponseToggleTreeView(this)" ], "toggle tree view"),
+				]),
 				UI::h('pre', [ 'id' => 'wfsResponse', 'style' => "margin:0; font-size:x-small; border-radius:0" ], 'loading...'),
 			]);
 			echo UI::h('details', [ 'style' => "padding:6px; background-color:#68cbfd; color:#fff" ], [
@@ -209,14 +212,19 @@ class Route_WfsJsRequestPanel extends RouteBase {
 			");
 			echo UI::h('script', [], "
 				function sendWfsRequest() {
+					var treeViewNode = document.getElementById('wfsResponseTreeView')
+					if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
+					document.getElementById('wfsResponse').style.display = 'block'
+
 					document.getElementById('wfsResponse').innerHTML = 'loading...'
 					var featureTypeName = document.getElementById('wfsRequestFeatureTypeName').value
 					var postBody = document.getElementById('wfsRequestBody').value.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
 					console.log('wfsRequestBody:', postBody)
-					p5WFS_GetFeature(featureTypeName, Object.assign({
+					var wfsParams = Object.assign({
 						'maxFeatures': 5,
 					}, (!postBody) ? {} : { 'ogc:Filter': postBody }
-					)).then(function (features) {
+					)
+					p5WFS_GetFeature(featureTypeName, wfsParams).then(function (features) {
 						console.log('features', features)
 						document.getElementById('wfsResponse').innerHTML = JSON.stringify(features, null, 2)
 					}).catch(function (e) {
@@ -233,6 +241,84 @@ class Route_WfsJsRequestPanel extends RouteBase {
 					sendWfsRequest()
 				})()
 			");
+			echo UI::h('script', [], "
+				var DBG = 0;
+
+				function wfsResponseToggleTreeView(btnNode) {
+					btnNode.isTreeViewActive = ! btnNode.isTreeViewActive
+					if(DBG)console.log('btnNode.isTreeViewActive', btnNode.isTreeViewActive)
+
+					if (btnNode.isTreeViewActive) {
+						document.getElementById('wfsResponse').style.display = 'none'
+						if (!document.getElementById('wfsResponseTreeView')) {
+							var respTxtNode = document.getElementById('wfsResponse')
+							var treeViewNode = document.createElement('div')
+							treeViewNode.id = 'wfsResponseTreeView'
+							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('wfsResponseTreeView').style.display = 'block'
+					} else {
+						var treeViewNode = document.getElementById('wfsResponseTreeView')
+						if (treeViewNode) treeViewNode.parentNode.removeChild(treeViewNode)
+						document.getElementById('wfsResponse').style.display = 'block'
+					}
+				}
+
+				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) jsonLine[1] = 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>' + group.label + '</div>'
+					}).join('\\n')
+				}
+			");
 		} catch (Exception $e) {
 			UI::alert('danger', $e);
 		}