bryanchriswhite/pmrpc-example.html

## pmrpc-example.html
<!DOCTYPE html>
<html>
	<head>
		<script type='text/javascript' src='/pmrpc.js'></script>
	</head>
	<body>
		<style>
			input {
				display: block;
				width: 200px;
			}
			textarea {
				width: 100%;
				height: 300px;
			}
		</style>
		<script>
			var retries = 5
				, timeout = 1000
				;

			function clearLog(){
		       		log.value = '';
			};

			function validate(input){
				if (isNaN(parseInt(input.value, 10)) && input.value != '') {
					input.setAttribute('placeholder', 'that was NaN!');
					input.value = '';
				}
			};

			function updateTimeout(input){
				validate(input);
				if(input.value === '') {
					timeout = 1000;
					setTimeout(function(){
						input.setAttribute('placeholder', 'Default: 1000')
					}, 2000)
				};
				timeout = parseInt(input.value, 10)
			};

			function updateRetries(input){
				validate(input);
				if(input.value === '') {
					retries = 5;
					setTimeout(function(){
						input.setAttribute('placeholder', 'Default: 5')
					}, 2000)
				};
				retries = parseInt(input.value, 10)
			};

			function get(id){
				result.value = '';
				result.setAttribute('placeholder', 'wait for it...');
				console.log(timeout);
				console.log(retries);
				pmrpc.call({
					destination: 'publish',
					publicProcedureName: 'test',
					params: [id],
					retries: retries,
					timeout: timeout,
					onSuccess: function(returnObj){
						//console.log('callback called: ',returnObj.returnValue);
						result.value = returnObj.returnValue;
						result.setAttribute('placeholder', 'nothin to see here');
					},
					onError: function(err){
						//console.log('onError called: ',err);
						result.setAttribute('placeholder', 'computer says no :-(');
						console.dir(err);
						log.value += 'ERROR: ' + err.message + '\n';
						setTimeout(function(){
							result.setAttribute('placeholder', 'nothin to see here');
						}, 1000);
					}
				})
			};
		</script>
		<div style='width: 10px; height: 10px; background-color: red;'></div>
		<label>Timeout: </label><input placeholder='Default: 1000' onkeyup='updateTimeout(this)' type='text'></input>
		<label>Retries: </label><input placeholder='Default: 5' onkeypress='updateRetries(this)' type='text'></input>
		<button onclick='get(1234)'>Get value for 1234</button>
		<button onclick='get(9876)'>Get value for 9876</button>
		<br />
		<label>Result: </label><input placeholder='nothin to see here' id='result' type='text'></input>
		<label>Error Log: </label><button onclick='clearLog()'>Clear Log</button
		<textarea type='text' id='log'></textarea>
		<script>
			var result = document.querySelector('#result')
				, log = document.querySelector('#log')
			;
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type='text/javascript' src='/pmrpc.js'></script>
	</head>
	<body>
	<style>
	input {
	display: block;
	width: 200px;
	}
	textarea {
	width: 100%;
	height: 300px;
	}
	</style>
	<script>
	var retries = 5
	, timeout = 1000
	;

	function clearLog(){
	log.value = '';
	};

	function validate(input){
	if (isNaN(parseInt(input.value, 10)) && input.value != '') {
	input.setAttribute('placeholder', 'that was NaN!');
	input.value = '';
	}
	};

	function updateTimeout(input){
	validate(input);
	if(input.value === '') {
	timeout = 1000;
	setTimeout(function(){
	input.setAttribute('placeholder', 'Default: 1000')
	}, 2000)
	};
	timeout = parseInt(input.value, 10)
	};

	function updateRetries(input){
	validate(input);
	if(input.value === '') {
	retries = 5;
	setTimeout(function(){
	input.setAttribute('placeholder', 'Default: 5')
	}, 2000)
	};
	retries = parseInt(input.value, 10)
	};

	function get(id){
	result.value = '';
	result.setAttribute('placeholder', 'wait for it...');
	console.log(timeout);
	console.log(retries);
	pmrpc.call({
	destination: 'publish',
	publicProcedureName: 'test',
	params: [id],
	retries: retries,
	timeout: timeout,
	onSuccess: function(returnObj){
	//console.log('callback called: ',returnObj.returnValue);
	result.value = returnObj.returnValue;
	result.setAttribute('placeholder', 'nothin to see here');
	},
	onError: function(err){
	//console.log('onError called: ',err);
	result.setAttribute('placeholder', 'computer says no :-(');
	console.dir(err);
	log.value += 'ERROR: ' + err.message + '\n';
	setTimeout(function(){
	result.setAttribute('placeholder', 'nothin to see here');
	}, 1000);
	}
	})
	};
	</script>
	<div style='width: 10px; height: 10px; background-color: red;'></div>
	<label>Timeout: </label><input placeholder='Default: 1000' onkeyup='updateTimeout(this)' type='text'></input>
	<label>Retries: </label><input placeholder='Default: 5' onkeypress='updateRetries(this)' type='text'></input>
	<button onclick='get(1234)'>Get value for 1234</button>
	<button onclick='get(9876)'>Get value for 9876</button>
	<br />
	<label>Result: </label><input placeholder='nothin to see here' id='result' type='text'></input>
	<label>Error Log: </label><button onclick='clearLog()'>Clear Log</button
	<textarea type='text' id='log'></textarea>
	<script>
	var result = document.querySelector('#result')
	, log = document.querySelector('#log')
	;
	</script>
	</body>
	</html>