web/index.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8">
   5                 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   6                 <title>FastCGI API Test</title>
   7                 <style>
   8                         body {
   9                                 font-family: "Trebuchet MS", "Verdana", "Arial", "Sans";
  10                                 font-size: 12px;
  11                                 margin: 1em;
  12                         }
  13                         h2 {
  14                                 border-bottom: 1px solid gray;
  15                         }
  16                         .io {
  17                                 border: 1px solid gray;
  18                                 padding: 0.5em;
  19                                 margin: 1em;
  20                                 min-height: 5em;
  21                                 background-color: GhostWhite;
  22                         }
  23                 </style>
  24
  25                 <script>
  26                 $(document).ready(function()
  27                 {
  28                         $('#inputquery').submit(function ()
  29                         {
  30                                 $('#output').text("Submitting query...");
  31                                 var query = $('#inputquery').find('input[name="query"]').val();
  32
  33                                 var d = new Date();
  34                                 var start = d.getMilliseconds();
  35                                 var domain = document.domain == "mctx.us.to" ? "mctx.us.to:8080" : document.domain;
  36                                 $.getJSON('http://'+domain+'/api/'+query, function(data) {
  37                                         var items = [];
  38                                         var timeDiff = d.getMilliseconds() - start; //Not precise at all, use web console
  39
  40                                         $.each(data, function(key, val) {
  41                                                 items.push('<li>"' + key + '" : "' + val + '"</li>');
  42                                         });
  43
  44
  45                                         $('#output').html("Response ok (" + timeDiff + "ms)! Output:<br>");
  46                                         $('<ul/>', {
  47                                                 html: items.join("\n")
  48                                         }).appendTo('#output');
  49
  50                                 }).fail(function(jqXHR) {
  51                                         $('#output').text("Query failed with response code: " + jqXHR.status);
  52                                 });
  53                                 return false;
  54                         });
  55                 });
  56                 </script>
  57         </head>
  58
  59         <body>
  60                 <h1>FastCGI API Test</h1>
  61                 The API is located at: <a href="http://mctx.us.to:8080/api/">http://mctx.us.to:8080/api/</a><br>
  62                 <h2>Input</h2>
  63                 Place a query string here. Examples include:<br>
  64                 <ul>
  65                         <li><pre>sensors?key=value&amp;key2</pre></li>
  66                         <li><pre>doesntexist?f</pre></li>
  67                 </ul>
  68                 Response times are inaccurate via JavaScript. Use the web console of
  69                 your browser to determine how long the query takes.<br>
  70                 Hopefully this doesn't break!
  71                 <div class="io">
  72                         <form id="inputquery" name="input" action="#">
  73                                 Query string: <input type="text" name="query"><br>
  74                                 <input type="submit" value="Submit">
  75                         </form>
  76                 </div>
  77
  78                 <h2>Output</h2>
  79                 <div id="output" class="io">
  80                 </div>
  81         </body>
  82 </html>