updated RefGraph view

SE/se-lib/Route/RefGraph.php.view.js

@@ -7,6 +7,13 @@ if ('undefined' === typeof PRIMARY_KEY) throw "Missing PRIMARY_KEY";
 // if ('undefined' === typeof JS_CHANNEL_UPDATE_NAME) throw "Missing JS_CHANNEL_UPDATE_NAME";
 var DBG = DBG || 0;
 
+var _isFullScreen = true; // TODO: get from arg
+var _html = {
+	container: null,
+	top: null,
+	fullscreenBtn: null,
+	selected: null
+}
 var _nodes = new vis.DataSet(); // [ { id: '', label: '' }, ... ]
 var _edges = new vis.DataSet(); // [ { id: '', from: '', to: '' }, ... ]
 var _network = null; // graph object
@@ -46,14 +53,6 @@ var _defaultVisJsOptions = {
 	}
 };
 
-function makeShortLabel(label) { // TODO: shorter name
-	// BI_audit_ENERGA_RUM_KONTRAHENCI_POWIAZANIA_row_object.1234567
-	if (label.length < 30) return label;
-	var exLabel = label.split('.')
-	if (exLabel.length !== 2) return label;
-	return exLabel[0].substr(0, 24) + '...' + exLabel[0].substr(-10) + '.' + exLabel[1];
-}
-
 (function () {
 	var form = document.getElementById('wfs_request')
 	var featureTypeName = TYPENAME
@@ -69,6 +68,7 @@ function makeShortLabel(label) { // TODO: shorter name
 		p5UI__notifyAjaxCallback({ type: 'error', msg: e })
 	})
 
+	renderLayout()
 })();
 
 function updateWfsResponse(features, featureTypeName) {
@@ -105,13 +105,10 @@ function updateWfsResponse(features, featureTypeName) {
 		}
 	})
 
-	// create a network
-	var container = document.getElementById(HTML_ID_REF_GRAPH)
-	container.style.height = '' + (window.innerHeight - 40) + 'px'
 	var options = _defaultVisJsOptions
 	if(DBG)console.log('_graphData', _graphData)
 	if (!_network) {
-		_network = new vis.Network(container, _graphData, options); // graphData: { nodes: [], edges: [] }
+		_network = new vis.Network(_html['container'], _graphData, options); // graphData: { nodes: [], edges: [] }
 
 		// add event listeners
 		_network.on('selectNode', function (params) {
@@ -125,6 +122,7 @@ function updateWfsResponse(features, featureTypeName) {
 			}
 			var selectedNode = _nodes.get(featureID)
 			if (!selectedNode) return;
+			renderSelectedNode(selectedNode)
 			if (selectedNode._loaded) return;
 			try {
 				var featureEx = featureID.split('.')
@@ -200,7 +198,14 @@ function parseResponseRec(_todoGraphData, json, typeName, parentNodeId, level) {
 		{
 			// _todoGraphData.nodes.add({ id: nodeId, label: nodeId })
 			if (!_todoGraphData[level]) _todoGraphData[level] = { nodes: [], edges: [] }
-			_todoGraphData[level].nodes.push({ id: nodeId, label: makeShortLabel(nodeId), group: objectName, _loaded: true })
+			_todoGraphData[level].nodes.push({
+				id: nodeId,
+				label: makeShortLabel(nodeId),
+				group: objectName,
+				_loaded: true,
+				typeName: typeName,
+				primaryKey: (json['ID']) ? json['ID'] : null // TODO: _primaryKey
+			})
 			if (parentNodeId) {
 				// _graphData.edges.add({ id: parentNodeId+nodeId, from: parentNodeId, to: nodeId })
 				_todoGraphData[level].edges.push({ id: parentNodeId+nodeId, from: parentNodeId, to: nodeId })
@@ -227,7 +232,14 @@ function parseResponseXlinkListRec(_todoGraphData, json, typeName, parentNodeId,
 		{
 			// _graphData.nodes.add({ id: nodeId, label: nodeId })
 			if (!_todoGraphData[level]) _todoGraphData[level] = { nodes: [], edges: [] }
-			_todoGraphData[level].nodes.push({ id: nodeId, label: makeShortLabel(nodeId) + ' (?)', group: objectName, _loaded: false })
+			_todoGraphData[level].nodes.push({
+				id: nodeId,
+				label: makeShortLabel(nodeId) + ' (?)',
+				group: objectName,
+				_loaded: false,
+				typeName: typeName,
+				primaryKey: nodeId.substr(nodeId.lastIndexOf('.') + 1)
+			})
 			if (parentNodeId) {
 				// _graphData.edges.add({ id: parentNodeId+nodeId, from: parentNodeId, to: nodeId })
 				_todoGraphData[level].edges.push({ id: parentNodeId+nodeId, from: parentNodeId, to: nodeId })
@@ -251,5 +263,92 @@ function parseResponseXlinkListRec(_todoGraphData, json, typeName, parentNodeId,
 	}
 }
 
+function makeShortLabel(label) { // TODO: shorter name
+	// BI_audit_ENERGA_RUM_KONTRAHENCI_POWIAZANIA_row_object.1234567
+	if (label.length < 30) return label;
+	var exLabel = label.split('.')
+	if (exLabel.length !== 2) return label;
+	return exLabel[0].substr(0, 24) + '...' + exLabel[0].substr(-10) + '.' + exLabel[1];
+}
+
+function renderLayout(mode) {
+	if ('undefined' !== typeof mode && _isFullScreen !== mode) _isFullScreen = mode
+
+	// create a network
+	if (!_html['container']) {
+		_html['container'] = document.getElementById(HTML_ID_REF_GRAPH)
+	}
+	_html['container'].style.position = (_isFullScreen) ? 'fixed' : 'relative'
+	_html['container'].style.top = (_isFullScreen) ? '40px' : ''
+	_html['container'].style.left = '0px'
+	_html['container'].style.margin = '0'
+	_html['container'].style.border = (_isFullScreen) ? '0' : '1px solid silver'
+	_html['container'].style.padding = '0'
+	_html['container'].style.backgroundColor = '#fff'
+	_html['container'].style.height = (_isFullScreen) ? ''+(window.innerHeight-40)+'px' : ''+(window.innerHeight-60-_html['container'].offsetTop)+'px'
+	_html['container'].style.width = (_isFullScreen) ? '' + (window.innerWidth) + 'px' : '100%'
+
+	if (!_html['top']) {
+		_html['top'] = document.createElement('div')
+		_html['container'].parentNode.insertBefore(_html['top'], _html['container'].nextSibling)
+	}
+	_html['top'].style.position = (_isFullScreen) ? 'fixed' : 'relative'
+	_html['top'].style.top = '0px'
+	_html['top'].style.left = '0px'
+	_html['top'].style.margin = '0'
+	_html['top'].style.border = '0'
+	_html['top'].style.padding = '0'
+	_html['top'].style.backgroundColor = '#101010'
+	_html['top'].style.height = '40px'
+	_html['top'].style.width =  (_isFullScreen) ? '' + (window.innerWidth) + 'px' : '100%'
+	_html['top'].style.zIndex = 3
+
+	if (!_html['fullscreenBtn']) {
+		_html['fullscreenBtn'] = document.createElement('button')
+		_html['fullscreenBtn'].className = 'btn btn-lg btn-link'
+		_html['top'].appendChild(_html['fullscreenBtn'])
+		_html['fullscreenBtn'].style.color = '#fff'
+		_html['fullscreenBtn'].style.float = 'right'
+		_html['fullscreenBtn'].style.outline = 'none'
+		_html['fullscreenBtn'].addEventListener('click', function () {
+			_isFullScreen = !_isFullScreen
+			renderLayout()
+		})
+	}
+	_html['fullscreenBtn'].innerHTML = (_isFullScreen)
+		? '<i class="glyphicon glyphicon-resize-small" title="Zamknij pełny ekran"></i>'
+		: '<i class="glyphicon glyphicon-resize-full" title="Pełny ekran"></i>'
+	;
+
+	if (!_html['selected']) {
+		_html['selected'] = document.createElement('span')
+		var htmlSelectedWrap = document.createElement('div')
+		htmlSelectedWrap.style.color = '#fff'
+		htmlSelectedWrap.style.fontSize = '14px'
+		htmlSelectedWrap.style.lineHeight = '40px'
+		htmlSelectedWrap.style.paddingLeft = '12px'
+		htmlSelectedWrap.appendChild(document.createTextNode("Wybrany: "))
+		htmlSelectedWrap.appendChild(_html['selected'])
+		_html['top'].appendChild(htmlSelectedWrap)
+		_html['selected'].innerHTML = 'brak'
+	}
+
+}
+function renderSelectedNode(node) {
+	var gotToTableLink = (node.typeName)
+		? '<a href="index.php?_route=ViewTableAjax&namespace=' + node.typeName.replace('__x3A__', '/').replace(':', '/') + '" class="btn btn-link" style="color:#fff" title="Przejdź do tabeli ' + node.typeName + '">' +
+				'<i class="glyphicon glyphicon-list-alt"></i>' +
+			'</a>'
+		: ''
+	;
+	var editLink = (node.typeName && node.primaryKey)
+		? '<a href="index.php?_route=ViewTableAjax&namespace=' + node.typeName.replace('__x3A__', '/').replace(':', '/') + '#EDIT/' + node.primaryKey + '" class="btn btn-link" style="color:#fff" title="Edytuj rekord ' + node.primaryKey + '">' +
+				'<i class="glyphicon glyphicon-pencil"></i>' +
+			'</a>'
+		: ''
+	;
+	_html['selected'].innerHTML = '' + node.id + ' ' + gotToTableLink + ' ' + editLink;
+}
+
 // global['FUNCTION_FETCH_CHILDRENS'] = 'refGraphFetchChildrens'
 // global['FUNCTION_FETCH_PARENTS'] = 'refGraphFetchParents'