123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- // 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
-
-
-
-
- });
-
|