openhandler.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. if (typeof(PhpDebugBar) == 'undefined') {
  2. // namespace
  3. var PhpDebugBar = {};
  4. PhpDebugBar.$ = jQuery;
  5. }
  6. (function($) {
  7. var csscls = function(cls) {
  8. return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-openhandler-');
  9. };
  10. PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({
  11. className: 'phpdebugbar-openhandler',
  12. defaults: {
  13. items_per_page: 20
  14. },
  15. render: function() {
  16. var self = this;
  17. this.$el.appendTo('body').hide();
  18. this.$closebtn = $('<a><i class="phpdebugbar-fa phpdebugbar-fa-times"></i></a>');
  19. this.$table = $('<tbody />');
  20. $('<div>PHP DebugBar | Open</div>').addClass(csscls('header')).append(this.$closebtn).appendTo(this.$el);
  21. $('<table><thead><tr><th width="150">Date</th><th width="55">Method</th><th>URL</th><th width="125">IP</th><th width="100">Filter data</th></tr></thead></table>').append(this.$table).appendTo(this.$el);
  22. this.$actions = $('<div />').addClass(csscls('actions')).appendTo(this.$el);
  23. this.$closebtn.on('click', function() {
  24. self.hide();
  25. });
  26. this.$loadmorebtn = $('<a>Load more</a>')
  27. .appendTo(this.$actions)
  28. .on('click', function() {
  29. self.find(self.last_find_request, self.last_find_request.offset + self.get('items_per_page'), self.handleFind.bind(self));
  30. });
  31. this.$showonlycurrentbtn = $('<a>Show only current URL</a>')
  32. .appendTo(this.$actions)
  33. .on('click', function() {
  34. self.$table.empty();
  35. self.find({uri: window.location.pathname}, 0, self.handleFind.bind(self));
  36. });
  37. this.$showallbtn = $('<a>Show all</a>')
  38. .appendTo(this.$actions)
  39. .on('click', function() {
  40. self.refresh();
  41. });
  42. this.$clearbtn = $('<a>Delete all</a>')
  43. .appendTo(this.$actions)
  44. .on('click', function() {
  45. self.clear(function() {
  46. self.hide();
  47. });
  48. });
  49. this.addSearch();
  50. this.$overlay = $('<div />').addClass(csscls('overlay')).hide().appendTo('body');
  51. this.$overlay.on('click', function() {
  52. self.hide();
  53. });
  54. },
  55. refresh: function() {
  56. this.$table.empty();
  57. this.$loadmorebtn.show();
  58. this.find({}, 0, this.handleFind.bind(this));
  59. },
  60. addSearch: function(){
  61. var self = this;
  62. var searchBtn = $('<button />')
  63. .text('Search')
  64. .attr('type', 'submit')
  65. .on('click', function(e) {
  66. self.$table.empty();
  67. var search = {};
  68. var a = $(this).parent().serializeArray();
  69. $.each(a, function() {
  70. if(this.value){
  71. search[this.name] = this.value;
  72. }
  73. });
  74. self.find(search, 0, self.handleFind.bind(self));
  75. e.preventDefault();
  76. });
  77. $('<form />')
  78. .append('<br/><b>Filter results</b><br/>')
  79. .append('Method: <select name="method"><option></option><option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option></select><br/>')
  80. .append('Uri: <input type="text" name="uri"><br/>')
  81. .append('IP: <input type="text" name="ip"><br/>')
  82. .append(searchBtn)
  83. .appendTo(this.$actions);
  84. },
  85. handleFind: function(data) {
  86. var self = this;
  87. $.each(data, function(i, meta) {
  88. var a = $('<a />')
  89. .text('Load dataset')
  90. .on('click', function(e) {
  91. self.hide();
  92. self.load(meta['id'], function(data) {
  93. self.callback(meta['id'], data);
  94. });
  95. e.preventDefault();
  96. });
  97. var method = $('<a />')
  98. .text(meta['method'])
  99. .on('click', function(e) {
  100. self.$table.empty();
  101. self.find({method: meta['method']}, 0, self.handleFind.bind(self));
  102. e.preventDefault();
  103. });
  104. var uri = $('<a />')
  105. .text(meta['uri'])
  106. .on('click', function(e) {
  107. self.hide();
  108. self.load(meta['id'], function(data) {
  109. self.callback(meta['id'], data);
  110. });
  111. e.preventDefault();
  112. });
  113. var ip = $('<a />')
  114. .text(meta['ip'])
  115. .on('click', function(e) {
  116. self.$table.empty();
  117. self.find({ip: meta['ip']}, 0, self.handleFind.bind(self));
  118. e.preventDefault();
  119. });
  120. var search = $('<a />')
  121. .text('Show URL')
  122. .on('click', function(e) {
  123. self.$table.empty();
  124. self.find({uri: meta['uri']}, 0, self.handleFind.bind(self));
  125. e.preventDefault();
  126. });
  127. $('<tr />')
  128. .append('<td>' + meta['datetime'] + '</td>')
  129. .append('<td>' + meta['method'] + '</td>')
  130. .append($('<td />').append(uri))
  131. .append($('<td />').append(ip))
  132. .append($('<td />').append(search))
  133. .appendTo(self.$table);
  134. });
  135. if (data.length < this.get('items_per_page')) {
  136. this.$loadmorebtn.hide();
  137. }
  138. },
  139. show: function(callback) {
  140. this.callback = callback;
  141. this.$el.show();
  142. this.$overlay.show();
  143. this.refresh();
  144. },
  145. hide: function() {
  146. this.$el.hide();
  147. this.$overlay.hide();
  148. },
  149. find: function(filters, offset, callback) {
  150. var data = $.extend({}, filters, {max: this.get('items_per_page'), offset: offset || 0});
  151. this.last_find_request = data;
  152. this.ajax(data, callback);
  153. },
  154. load: function(id, callback) {
  155. this.ajax({op: "get", id: id}, callback);
  156. },
  157. clear: function(callback) {
  158. this.ajax({op: "clear"}, callback);
  159. },
  160. ajax: function(data, callback) {
  161. $.ajax({
  162. dataType: 'json',
  163. url: this.get('url'),
  164. data: data,
  165. success: callback,
  166. ignoreDebugBarAjaxHandler: true
  167. });
  168. }
  169. });
  170. })(PhpDebugBar.$);