Ajax Panel

diagnostics.jsonpanel.ajax.js

(function($, undefined) {
	/**
	 * Shows info on Ajax request
	 */
	$.nette.ext('diagnostics.jsonpanel', {
		start: function (xhr, settings) {
			var $panel = this.getPanel();
			if (!$panel) return;
			if (this.singleReport) this.clear();
			$(this.getTitle(++this.counter, 'request')).appendTo($panel);
			$("<p><b>Type</b> : " + settings.type + "</p>").appendTo($panel);
			$("<p><b>Url</b> : <a href='" + settings.url + "' target='_blank'>" + settings.url + "</a></p>").appendTo($panel);
		},
		success: function (payload) {
			var $panel = this.getPanel();
			if (!$panel || !payload || payload.length == 0) return;
			$(this.getTitle(this.counter, 'response')).appendTo($panel);			
			$.each(this.getMonitored(), function(i, key) {
				var count;
				$helper = $('<div class="nette-ContainerPanel-parameters">');
				if (key in payload) {
					var count = 0;
					$.each(payload[key], function(name, value) {
						var output;
						var code = null;
						output = '<i style="color: #060">' + (typeof value) + '</i> ';
						if (value === null) {
							output += '<i style="color: #900">null</i>';
						} else if (value === "") {
							output +=  '<i style="color: #ccc">empty string</i>';
						} else if (typeof value === 'boolean') {
							output += '<i style="color: #900">' + (value ? 'true' : 'false') + '</i>';
						} else if (typeof value === 'undefined') {
							output +=  '<i style="color: #ccc">undefined</i>';
						} else if (typeof value === 'number') {
							output += '<i style="color: #009">' + value + '</i>';
						} else {
							
							//output += value.substr(0,100);
							code = $('<pre class="nette-dump">').text(value);
							code = $('<code style="display: inline;" class="nette-collapsed">').text(value.substr(0,100));
						}
						if (code) {
							$('<a href="#" rel="next"><span class="php-key">' + name + '</span> <abbr>►</abbr> </a>').appendTo($helper);
							var pre = $('<pre class="nette-dump" style="display:block;">');
							code.appendTo(pre);
							pre.appendTo($helper);
						} else {
							$('<p><b style="color: #009; font-wight: bold">' + name + "</b> : " + output + "</p>").appendTo($helper);
						}
				        count++;
				    });
					count = "("+ count +")";
				} else {
					count = "(<i>not present</i>)";
				}
		        $("<h3 style='font-weight:bold;'>" + key + " " + count + "</h3>").appendTo($panel);
		        $helper.appendTo($panel);
		    });
		}
	}, {
		counter: 0,
		singleReport: true,
		initialize: function () {
			if (!($("#nette-debug").length > 0)) return false;
			var panel = $('<div id="nette-debug-panel-nette-ajax-json" class="nette.panel nette-mode-float" style="background-color: #FFFFFF;position:fixed;top:100px;left:0;width:300px;">').appendTo($("#nette-debug"));
			panel.html('<h1 id="nette-ajax-json-panel-title">Ajax Panel<span class="pull-right" style="font-size: 16px;">'
					+ 'Single:<a href="#" id="nette-debug-panel-nette-ajax-json-mode" onclick="javacript:$.nette.ext(\'diagnostics.jsonpanel\').toggleMode();return false;">' + (this.singleReport ? 'on' : 'off') + '</a>'
					+ ' | <a href="#" id="nette-debug-panel-nette-ajax-clear"  onclick="javacript:$.nette.ext(\'diagnostics.jsonpanel\').clear();">Clear</a>'
					+'</span></h1><div id="nette-ajax-json-panel" style="position:relative;max-height:700px;overflow:auto;width:100%;"></div>');
			//$('body').css('margin-left', '300px');
			return $("#nette-ajax-json-panel");
		},
		clear: function () {
			this.panel.html('');
		},
		toggleMode: function () {
			this.singleReport = !this.singleReport;
			$("#nette-debug-panel-nette-ajax-json-mode").text(this.singleReport ? 'on' : 'off');
			
		},
		getMonitored: function () {
			return ['state', 'snippets', 'bsmodals'];
		},
		getTitle: function (count, type) {
			return '<h2 style="font:11pt/1.5 sans-serif;margin:0;padding:2px 8px;background:#3484d2;color:white">Ajax ' + type + ' #' + count + '</h2>';
		},
		getPanel: function () {
			if (!this.panel) this.panel = this.initialize();
			return this.panel;	
		}
	});
})(jQuery);