Re-format API Examples page

.gitignore

@@ -12,6 +12,7 @@ pids
 *.pid.lock
 
 config_backups
+config/glass_config.json
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

public/assets/js/api-examples.js

@@ -3,15 +3,21 @@
  */
 
 function api_example(example) {
+    var start_time = new Date().getTime();
+
 	switch(example) {
 		case "get_active_leases":
+            $("#get_active_leases").html(loader_html);
 			$.getJSON( "/api/get_active_leases", function( data ) {
-				$("#get_active_leases").html('<pre>' + JSON.stringify(data, null, 2) + '</pre>').fadeOut(100).fadeIn(100);
+                var request_time = (new Date().getTime() - start_time) / 1000;
+				$("#get_active_leases").html('Server Response Time: ' + request_time + 'ms <pre style="margin-top:20px">' + JSON.stringify(data, null, 2) + '</pre>');
 			});
 			break;
 		case "get_subnet_details":
+			$("#get_subnet_details").html(loader_html);
 			$.getJSON( "/api/get_subnet_details", function( data ) {
-				$("#get_subnet_details").html('<pre>' + JSON.stringify(data, null, 2) + '</pre>').fadeOut(100).fadeIn(100);
+                var request_time = (new Date().getTime() - start_time) / 1000;
+				$("#get_subnet_details").html('Server Response Time: ' + request_time + 'ms <pre style="margin-top:20px">' + JSON.stringify(data, null, 2) + '</pre>');
 			});
 			break;
 		default:
@@ -19,6 +25,15 @@ function api_example(example) {
 	}
 }
 
+function raw_api(call){
+    switch(call) {
+        default:
+            var win = window.open(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + call, '_blank');
+            win.focus();
+            return;
+    }
+}
+
 function clear_api(example) {
 	$("#" + example).html('');
 }

public/assets/js/glass-core.js

@@ -13,42 +13,8 @@ var loader_html = '<div class="preloader"> \
     </div> \
     </div>';
 
-$( document ).ajaxComplete(function( event, request, settings ) {
-	/*
-	* Form input focus event
-	*/
-	$('.form-control').focus(function () {
-		$(this).parent().addClass('focused');
-	});
-
-	//On focusout event
-	$('.form-control').focusout(function () {
-		var $this = $(this);
-		if ($this.parents('.form-group').hasClass('form-float')) {
-			if ($this.val() == '') { $this.parents('.form-line').removeClass('focused'); }
-		}
-		else {
-			$this.parents('.form-line').removeClass('focused');
-		}
-	});
-
-	//On label click
-	$('body').on('click', '.form-float .form-line .form-label', function () {
-		$(this).parent().find('input').focus();
-	});
-
-	//Not blank form
-	$('.form-control').each(function () {
-		if ($(this).val() !== '') {
-			$(this).parents('.form-line').addClass('focused');
-		}
-	});
-
-	$('.form-line').removeClass("focused");
-});
-
 $( document ).ready(function() {
-	$('.form-line').removeClass("focused");
+	remove_init_form();
 });
 
 /*
@@ -60,8 +26,48 @@ $(document).on('on_pjax_complete',function(){
 		$('body').removeClass('overlay-open');
 		$('.overlay').css("display", "none");
 	}
+
+	/*
+	 * Form input focus event
+	 */
+    $('.form-control').focus(function () {
+        $(this).parent().addClass('focused');
+    });
+
+    //On focusout event
+    $('.form-control').focusout(function () {
+        var $this = $(this);
+        if ($this.parents('.form-group').hasClass('form-float')) {
+            if ($this.val() == '') { $this.parents('.form-line').removeClass('focused'); }
+        }
+        else {
+            $this.parents('.form-line').removeClass('focused');
+        }
+    });
+
+    //On label click
+    $('body').on('click', '.form-float .form-line .form-label', function () {
+        $(this).parent().find('input').focus();
+    });
+
+    //Not blank form
+    $('.form-control').each(function () {
+        if ($(this).val() !== '') {
+            $(this).parents('.form-line').addClass('focused');
+        }
+    });
+
+    remove_init_form();
+
+    remove_init_form();
 });
 
+function remove_init_form(){
+    setTimeout(function(){
+        $('.form-line').removeClass("focused");
+    }, 10);
+}
+
 function modal (title, content, buttons) {
 	$('#modal-buttons').html('');
 	$('#modal-title').html(title);

public/templates/api_examples.html

@@ -1,14 +1,76 @@
-<div class="row">
+<!-- Get Active Leases -->
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <div class="card">
+    <div class="card">
-            <div class="header">
+        <div class="header">
-                <h2>
+            <h2>
-                    [title]
+                GET: Active Leases
-                </h2>
+            </h2>
+        </div>
+        <div class="body">
+            <label>Call</label>
+            <div class="form-group">
+                <div class="form-line">
+                    <input disabled type="input" class="form-control" value="/api/get_active_leases" autocomplete="off">
+                </div>
             </div>
-            <div class="body">
+            <label>URL Example</label>
-                [example_body]
+            <div class="form-group">
+                <div class="form-line">
+                    <input disabled type="input" class="form-control api_url" value="/api/get_active_leases" autocomplete="off">
+                </div>
             </div>
+            <label>Test</label>
+            <div class="form-group">
+                <div>
+                    <button type="button" onclick="api_example('get_active_leases')" class="btn btn-default waves-effect">Try It!</button>
+                    <button type="button" onclick="raw_api('/api/get_active_leases')" class="btn btn-default waves-effect">Raw</button>
+                    <button type="button" onclick="clear_api('get_active_leases')" class="btn btn-default waves-effect">Clear</button>
+                    <div id="get_active_leases" style="margin-top:20px"></div>
+                </div>
+            </div>
+
         </div>
     </div>
-</div>
+</div>
+
+<!-- Get Subnet Details -->
+<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <div class="card">
+        <div class="header">
+            <h2>
+                GET: Subnet Details
+            </h2>
+        </div>
+        <div class="body">
+            <label>Call</label>
+            <div class="form-group">
+                <div class="form-line">
+                    <input disabled type="input" class="form-control" value="/api/get_subnet_details" autocomplete="off">
+                </div>
+            </div>
+            <label>URL Example</label>
+            <div class="form-group">
+                <div class="form-line">
+                    <input disabled type="input" class="form-control api_url" value="/api/get_subnet_details" autocomplete="off">
+                </div>
+            </div>
+            <label>Test</label>
+            <div class="form-group">
+                <div>
+                    <button type="button" onclick="api_example('get_subnet_details')" class="btn btn-default waves-effect">Try It!</button>
+                    <button type="button" onclick="raw_api('/api/get_subnet_details')" class="btn btn-default waves-effect">Raw</button>
+                    <button type="button" onclick="clear_api('get_subnet_details')" class="btn btn-default waves-effect">Clear</button>
+                    <div id="get_subnet_details" style="margin-top:20px"></div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    $( ".api_url" ).each(function( index ) {
+        $(this).val(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + $(this).val());
+    });
+    $('.form-line').removeClass("focused");
+</script>

public/templates/dhcp_config.html

@@ -32,5 +32,4 @@
 
 <script src="assets/js/ace_editor/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="assets/js/ace_editor/theme-terminal.js" type="text/javascript" charset="utf-8"></script>
-<script src="assets/js/glass-pages/dhcp-config.js" type="text/javascript" charset="utf-8"></script>
+<script src="assets/js/glass-pages/dhcp-config.js" type="text/javascript" charset="utf-8"></script>
-

public/templates/index.html

@@ -198,10 +198,15 @@
 <script src="assets/plugins/raphael/raphael.min.js"></script>
 <script src="assets/plugins/morris/morris.min.js"></script>
 
+<!-- Glass -->
+<script src="assets/js/api-examples.js"></script>
+<script src="assets/js/glass-core.js"></script>
+<script src="assets/js/glass-websockets.js"></script>
+
 <section class="content">
     <div class="container-fluid">
-        <div class="block-header">
+        <div class="block-header" style="display:none">
-            <h2>Dashboard</h2>
+            <h2 id="block-header">Dashboard</h2>
         </div>
         <div id="body-content">
             [body_content]
@@ -227,12 +232,10 @@
 <!-- Custom Js -->
 <script src="assets/js/admin.js"></script>
 
-<script src="assets/js/api-examples.js"></script>
+<!-- File Saver: Used in DHCP Logs -->
-<script src="assets/js/glass-core.js"></script>
-<script src="assets/js/glass-websockets.js"></script>
-
 <script src="assets/js/file-saver.js"></script>
 
+<!-- PJAX Framework -->
 <script src="assets/js/pjax.js"></script>
 
 <script type="text/javascript">

routes/api_examples.js

@@ -8,33 +8,11 @@ var template_render = require('../lib/render_template.js');
 
 router.get('/', function(req, res, next) {
 
-	/* Get Active Leases */
+	api_template = template_render.get_template("api_examples");
-	get_active_leases = template_render.get_template("api_examples");
-	get_active_leases = template_render.set_template_variable(get_active_leases, "title", "Get Active Leases");
-
-	example_body = 'URL: <code>/api/get_active_leases</code><br><br>';
-	example_body = example_body + '<button type="button" onclick="api_example(\'get_active_leases\')" class="btn btn-default waves-effect">Try It!</button> ';
-	example_body = example_body + '<button type="button" onclick="clear_api(\'get_active_leases\')" class="btn btn-default waves-effect">Clear</button><br><br>';
-	example_body = example_body + '<div id="get_active_leases"></div>';
-
-	get_active_leases = template_render.set_template_variable(get_active_leases, "example_body", example_body);
-
-	/* Get Subnet Details */
-	get_subnet_details = template_render.get_template("api_examples");
-	get_subnet_details = template_render.set_template_variable(get_subnet_details, "title", "Get Subnet Details");
-
-	example_body = 'URL: <code>/api/get_subnet_details</code><br><br>';
-	example_body = example_body + '<button type="button" onclick="api_example(\'get_subnet_details\')" class="btn btn-default waves-effect">Try It!</button> ';
-	example_body = example_body + '<button type="button" onclick="clear_api(\'get_subnet_details\')" class="btn btn-default waves-effect">Clear</button><br><br>';
-	example_body = example_body + '<div id="get_subnet_details"></div>';
-
-	get_subnet_details = template_render.set_template_variable(get_subnet_details, "example_body", example_body);
 
 	res.send (
 		template_render.get_index_template(
-			get_active_leases +
+            api_template,
-			get_subnet_details
-			,
 			req.url
 		)
 	);