contrib/pep8analysis/www/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Pep/8 Analysis</title>
   5
   6     <meta charset="utf-8">
   7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   8         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   9
  10         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  11         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  12         <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  13
  14         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
  15         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
  16         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
  17         <script>
  18                 // Redirect print to HTML
  19                 var Module = {
  20                         'print': function(text) {
  21                                 $("#console").append(text + "<br>")
  22                         },
  23                         'noInitialRun': true,
  24                 }
  25
  26                 $(document).ready(function() {
  27                         // Report full loading
  28                         $("#loading").hide()
  29                         $("#analyze").prop('disabled', false)
  30                 });
  31
  32                 function exec() {
  33                         // Clean output console
  34                         $("#console").text("")
  35
  36                         // Get code
  37                         var input = editor.getValue()
  38
  39                         // Invoke the full Nit program
  40                 ret = Module['callMain']([input])
  41
  42                         // Shot and set color of output console
  43                         $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
  44                         $("#consolePanel").show()
  45                         var analysis = $("#consolePanel").text();
  46                         if (analysis.indexOf("Error") >= 0)
  47                                 $("#consolePanel").addClass("panel-danger")
  48                         else if (analysis.indexOf("Warning") >= 0)
  49                                 $("#consolePanel").addClass("panel-warning")
  50                         else
  51                                 $("#consolePanel").addClass("panel-success")
  52                 }
  53
  54                 function load(file) {
  55                         // Load a sample program
  56                         $.get('samples/' + file, function(data){
  57                                 editor.setValue(data)
  58                         })
  59                 }
  60                 }
  61         </script>
  62 </head>
  63 <body>
  64
  65 <nav class="navbar navbar-default" role="navigation">
  66   <div class="container-fluid">
  67     <div class="navbar-header">
  68       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  69         <span class="sr-only">Toggle navigation</span>
  70                 <span class="icon-bar"></span>
  71                 <span class="icon-bar"></span>
  72                 <span class="icon-bar"></span>
  73       </button>
  74       <a class="navbar-brand">Pep/8 Analysis</a>
  75     </div>
  76
  77     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  78       <ul class="nav navbar-nav">
  79         <li class="active"><a>Web interface</a></li>
  80         <li><a href="https://github.com/privat/nit/tree/master/contrib/pep8analysis/">Tool source and manual</a></li>
  81       </ul>
  82       <ul class="nav navbar-nav navbar-right">
  83         <li><a href="http://nitlanguage.org/">nitlanguage.org</a></li>
  84         <li><a href="https://code.google.com/p/pep8-1/">Pep/8 project</a></li>
  85       </ul>
  86     </div>
  87   </div>
  88 </nav>
  89
  90 <div class="container-fluid">
  91
  92         <div class="alert alert-warning" id="loading">Loading the tool... This may take some time.</div>
  93
  94         <div class="row">
  95           <div class="col-sm-12 col-lg-6">
  96                 <div class="panel panel-default">
  97                         <div class="panel-heading">Pep/8 Source Code</div>
  98                         <div class="panel-body" id="code-panel">
  99                                 <textarea id="listing"></textarea>
 100                                 <script>
 101                                         var editor = CodeMirror.fromTextArea(listing, {
 102                                                 lineNumbers: true,
 103                                                 mode: "z80"
 104                                         });
 105                                         editor.setSize("100%", 500);
 106                                 </script>
 107
 108                                 <div class="btn-group">
 109                                   <button type="button" class="btn btn-default" id="analyze" onclick="exec();" disabled>Analyze program</button>
 110                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 111                                          <span class="glyphicon glyphicon-folder-open"></span>
 112                                         Load sample program
 113                                         <span class="caret"></span>
 114                                   </button>
 115                                   <ul class="dropdown-menu">
 116                                         <li><a onclick="load('02-fibo.pep')">fibo.pep - clean program </a></li>
 117                                         <li><a onclick="load('06-calc-non-pur.pep');">calc-non-pur.pep - self rewriting program </a></li>
 118                                         <li><a onclick="load('types.pep');"/>types.pep - strange data manipulation </a></li>
 119                                         <li><a onclick="load('directive-in-code.pep');">directive-in-code.pep - mixed directives and instructions</a></li>
 120                                   </ul>
 121                                 </div>
 122                         </div>
 123                 </div>
 124           </div>
 125
 126           <div class="clearfix visible-xs"></div>
 127           <div class="col-sm-12 col-lg-6">
 128                 <div class="panel" id="consolePanel" style="display: none;">
 129                         <div class="panel-heading">Analysis Result</div>
 130                         <div class="panel-body">
 131                                 <samp id="console"></samp>
 132                         </div>
 133                 </div>
 134           </div>
 135         </div>
 136
 137         <script src="pep8analysis.js"></script>
 138 </div>
 139
 140 </body>
 141 </html>