restUI/frontend/static-web/res/main.js

// Start headers
var requester = {
		headers: {
			'x-sgw':12345,
			'othertest':1234
		},
		params: {
			
		}
};

class MLog {
	constructor(jElem,listobj) {
		this.jElem = jElem;
		this.count = 0;
	}
	raw(msg) {
		var $output = $(this.jElem);
		
		$output.each(function() {
			var $this = $(this); // Cache element
			var tolerance = 100;
			
			
			var doscroll = false;
			if($this.scrollTop() + $this.innerHeight() >= $this.prop('scrollHeight')-tolerance){
				doscroll = true;
			
			}
		
			$this.append( msg );
		
			if(doscroll) {
				$this.scrollTop($this.prop('scrollHeight'));
			}
		});
		this.count++;
	}
	info(msg) {

		this.raw('<p>[' + this.count + '] ' + msg + '</p>');
	}
	error(msg) {
		this.raw('<p class="error">[' + this.count + '] ' + msg + '</p>');
	}
	clear() {
		$(this.jElem).html('');
	}
}

var mlog = new MLog('.output');


class ListController {
	constructor(targetPane,targetObject) {
		this.targetPane = targetPane;
		this.targetObject = targetObject;
	}
	setupInteraction() {
		var self = this;
		$(document).on('click', this.targetPane + ' .entry-remove',function() {
			$(this).parent().remove() 
		});
		$(document).on('click', this.targetPane + ' .entry-new',function() {
			self.add(); 
		});
		$(this.targetPane + ' .entry-input').on('keypress', function(e) {
			if(e.which != 13) return;
			
			var content = $(this).val();
			var arr = content.split(':');
			if(arr.length != 2) {
				mlog.error('Invalid format');
				return;
			}
			var headerKey = arr[0].trim();
			var headerContent = arr[1].trim();
			mlog.info('Header:' + headerKey + ' as "' + headerContent +'"');
			
			self.targetObject[arr[0].trim()] = arr[1].trim();
			self.update();
			$(this).val('');
			
		});
		
	}
	update() {
		console.log("HEaders: %o", this.targetObject);
		
		for( var k in this.targetObject) {
			this.add(k,this.targetObject[k]);
		}
	}
	add(key,value) {
		var k = key || "";
		var v = value || "";
		
		var $list = $(this.targetPane + ' .entry-list');
		$list.append('<li>'
				+ '<input type="text" class="entry-name" value="' + k + '">' 
				+ '<input type="text" class="entry-content" value="' + v + '">'
				+ '<button class="entry-remove">X</button>'
				+ '</li>');
		
	}
	values() {
		var ret = {};
		$(this.targetPane + ' .entry-list > li').each(function() {
			
			var k = $(this).find('.entry-name').val();
			var v = $(this).find('.entry-content').val();
			ret[k] = v
			
		});
		return ret;
	}
	
}


	
$(function() {
		
	$('.output-clear').on('click',function(e) {
		e.preventDefault();
		e.stopPropagation();
		mlog.clear();
	})
		var headerList = new ListController('#header-list',requester.headers);
	
		headerList.setupInteraction();
		headerList.update();
		
		var paramList = new ListController('#params-list',requester.params);
		paramList.setupInteraction();
		paramList.update();
		
		$('#request-input').val('/api/endpoint/1234/named1/method1');
		
		$('.request').on('click',function() {
			var req = $('#request-input').val();
			var method= $(this).attr('data-method');
			
			mlog.info(method.toUpperCase() + ": " + req + " with var: " + Prism.highlight(JSON.stringify(requester.params),Prism.languages.json)); 
			var params = paramList.values();
			$.ajax({
				url: req,
				method: method,
				data: params,
				beforeSend: function(xhr) {
					var headers = headerList.values();
					for( var k in headers) {
						xhr.setRequestHeader(k,headers[k]);	
					}
					 
				},
				success: function(data) {
					var result = data;
					try {
						if(typeof(data) === "string") {
							data = JSON.parse(data);
						}
						var json = JSON.stringify(data,null,'    ');
						result = Prism.highlight(json,Prism.languages.json);
					} catch(e) {
						mlog.error(e.message);
					}
		
					mlog.raw('<pre><code>'+ result + '</code></pre>');
					
				},
				error: function(xhr, err, thrown) {
				
					mlog.error('[' + xhr.status + '] ' +thrown + '</font>');
				}
			})
		});
		
		
		// Header handler area
		
	
		
		
	});