se/SE/se-lib/Route/Test/BuildDom.php

<?php

Lib::loadClass('RouteBase');
Lib::loadClass('Response');

class Route_Test_BuildDom extends RouteBase {

	function defaultAction() {
		UI::gora();
		try {
			echo UI::h('script', ['src'=>"static/vendor.js"]);
			echo UI::h('script', [ 'src' => "static/p5UI/buildDom.js" ]);
			$listExampleProp = [];
			$listExampleProp['main'] = '
				[ "div", { "class": "container" }, [
					[ "h1", [], "Test H1"],
					[ "h2", [], "Test H2"],
					[ "div", { "class": "alert alert-info" }, "Test alert info" ],
					[ "button", { "class": "btn btn-primary" }, "button" ]
				] ]
			';
			$listExampleProp['alerts'] = '
				[ "div", { "class": "container" }, [
					[ "div", { "class": "alert alert-info" }, "Test alert info" ],
					[ "div", { "class": "alert alert-warning" }, "Test alert warning" ],
					[ "div", { "class": "alert alert-danger" }, "Test alert danger" ],
					[ "div", { "class": "alert alert-success" }, "Test alert success" ]
				] ]
			';
			$listExampleProp['proces'] = '
				[ "div", { "class": "container" }, [
					[ "P5UI__ProcessStep", { "id": "996" }, [
						[ "div", { "class": "alert alert-info" }, "Test 996 custom children" ]
					] ]
				] ]
			';
			$examplePreload = $listExampleProp['proces'];

			echo '<div class="container-fluid">';

			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" ], "buildDom input"),
				UI::h('textarea', [ 'id' => 'exampleBuildDomInput', 'style' => "width:100%; height:300px; margin:0; font-size:small; font-family:monospace; border-radius:0; color:#000" ], $examplePreload),
			]);
			echo UI::h('button', [ 'class' => "btn btn-primary", 'onClick' => "return runBuildDomExample()" ], "Uruchom (Ctrl + Enter)");
			echo UI::h('div', [ 'style' => "display:inline", 'id' => "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" ], "buildDom output"),
				UI::h('div', [ 'id' => 'exampleBuildDomOutput', 'style' => "margin:0; padding:12px 0; font-size:normal; border-radius:0; background-color:#fff; color:#000" ], 'loading...'),
			]);
			UI::endContainer();
			$jsExamples = json_encode($listExampleProp);
			$js = [];
			$js['URL_GET_PROCES_STEP_INFO'] = $this->getLink('getProcesStepGuiAjax');
			echo UI::h('script', [], "
				(function (global, p5VendorJs) {
					var URL_GET_PROCES_STEP_INFO = '{$js['URL_GET_PROCES_STEP_INFO']}';
					if (!p5VendorJs.React) throw 'Missing React'
					if (!p5VendorJs.ReactDOM) throw 'Missing ReactDOM'
					if (!p5VendorJs.createReactClass) throw 'Missing createReactClass'
					var React = p5VendorJs.React
					var ReactDOM = p5VendorJs.ReactDOM
					var createReactClass = p5VendorJs.createReactClass
					var h = React.createElement

					global.p5VendorJs['P5UI__ProcessStep'] = createReactClass({
						componentWillMount: function () {
							this.setState({ // default values
								zasobyRaw: []
							})
							var updateZasoby = function (zasobyRaw) {
								this.setState({
									zasobyRaw: zasobyRaw
								})
							}.bind(this)
							console.log('ProcessStep::componentWillMount...');
							global.fetch(URL_GET_PROCES_STEP_INFO + '&id=' + this.props.id, {
								credentials: 'same-origin',
							}).then(function (response) {
								return response.json()
							}).then(function (resp) {
								p5UI__notifyAjaxCallback(resp)
								updateZasoby(resp.body.zasobyRaw)
							}).catch(function (e) {
								p5UI__notifyAjaxCallback({ type: 'error', msg: '' + e })
							})
						},
						render: function () {
							console.log('ProcessStep::render... state, props', this.state, this.props);
							var formProps = {}
							return h('div', Object.assign(formProps, {
								ref: function (node) { this.rootNode = node; }.bind(this),
								// onSubmit: this.submit.bind(this)
							}), [].concat(
								[ h('h1', {}, 'Test P5UI__ProcessStep...') ],
								this.props.children,
								this.state.zasobyRaw.map(function (zasob) {
									return h('pre', {}, JSON.stringify(zasob));
								})
							))
						},
						// componentDidMount: function () { console.log('ProcessStep::componentDidMount...'); },
						// componentWillReceiveProps: function (nextProps) { console.log('ProcessStep::componentWillReceiveProps(nextProps)...', nextProps); },
						// shouldComponentUpdate: function (nextProps, nextState) { console.log('ProcessStep::shouldComponentUpdate(nextProps, nextState)...', nextProps, nextState); },
						// componentWillUpdate: function (nextProps, nextState) { console.log('ProcessStep::componentWillUpdate(nextProps, nextState)...', nextProps, nextState); },
						// componentDidUpdate: function (prevProps, prevState) { console.log('ProcessStep::componentDidUpdate(prevProps, prevState)...', prevProps, prevState); },
						// componentWillUnmount: function () { console.log('ProcessStep::componentWillUnmount...'); },
					})
				})(window, window.p5VendorJs)
			");
			echo UI::h('script', [], "
				var examples = {$jsExamples};
				console.log('examples', examples)
				function setBuildDomExample(i) {
					document.getElementById('exampleBuildDomInput').value = examples[i]
					runBuildDomExample()
				}
				for (var i in examples) {
					jQuery(document.getElementById('example-btns')).append('<button class=\"btn btn-default\" style=\"margin-left:12px\" onClick=\"setBuildDomExample(\''+i+'\')\">'+i+'</button>')
				}
			");
			echo UI::h('script', [], "
				function runBuildDomExample() {
					document.getElementById('exampleBuildDomOutput').innerHTML = 'loading...'
					var exampleBody = document.getElementById('exampleBuildDomInput').value.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
					console.log('exampleBuildDomInput:', exampleBody)
					try {
						exampleBody = JSON.parse(exampleBody)
					} catch (e) {
						p5UI__buildDom(['div', {'class': 'alert alert-danger'}, '' + e], document.getElementById('exampleBuildDomOutput'))
						return false
					}
					p5UI__buildDom(exampleBody, document.getElementById('exampleBuildDomOutput'))
					return false
				}

				(function () {
					runBuildDomExample()
				})()
			");
			echo UI::h('script', [], "
			    document.getElementById('exampleBuildDomInput').onkeydown = function(e) {
			        if ( e.keyCode == 9 || e.which == 9 ) {
			            e.preventDefault();
			            var s = this.selectionStart;
			            this.value = this.value.substring(0, this.selectionStart) + '\t' + this.value.substring(this.selectionEnd);
			            this.selectionEnd = s + 1;
			        }
			    }

				window.onkeyup = function(e) {
					if (!e.ctrlKey) return;
					if (13 !== e.keyCode) return; // 13: Enter
					runBuildDomExample()
				}
				// window.onkeyup = function(e) {
				//     var pressed = '';
				//     if (e.shiftKey) {
				//         pressed += ' + Shift';
				//     } else if (e.ctrlKey) {
				//         pressed += ' + Ctrl';
				//     } else if (e.cmdKey) {
				//         pressed += ' + Command';
				//     }
				//     pressed = e.keyCode + pressed;
				//     console.log(pressed, 'metaKey', e.metaKey);
				// }
			");
		} catch (Exception $e) {
			DBG::log($e);
			UI::alert('danger', $e->getMessage());
		}
		UI::dol();
	}

	function getProcesStepGuiAjaxAction() {
		Response::sendTryCatchJson( [ $this, 'getProcesStepGuiAjax' ], $args = $_GET );
	}
	function getProcesStepGuiAjax($args) {
		$id = V::get('id', 0, $args);
		if (!$id) throw new Exception("Missing id");
		return [
			'type' => "success",
			'msg' => "OK",
			'body' => [
				'zasobyRaw' => DB::getPDO()->fetchAll("
					select w.*, z.*
					from CRM_PROCES p
						left join CRM_WSKAZNIK w on ( w.ID_PROCES = p.ID )
						left join CRM_LISTA_ZASOBOW z on ( z.ID = w.ID_ZASOB )
					where p.ID = :id
				", [ ':id' => $id ]),
			]
		];
	}

}