Added tabs to choose view for the response. #8

senpy/static/css/main.css

@@ -60,6 +60,15 @@ body {
      border-radius: 20px;
 
 }
+#jsonraw {
+    overflow: auto;
+    padding: 20px;
+    background: lightgray;
+     -moz-border-radius: 20px;
+     -webkit-border-radius: 20px;
+     -khtml-border-radius: 20px;
+     border-radius: 20px;
+}
 #input_request { 
     display:block;
     width:150px;

senpy/static/js/main.js

@@ -102,22 +102,17 @@ function load_JSON(){
         }
       }
       var response = JSON.parse($.ajax({type: "GET", url: url , async: false}).responseText);
-
       var container = document.getElementById('results');
-      
       var options = {
         mode: 'view'
       };
-
       try { 
         container.removeChild(container.firstChild);
       }
-      
       catch(err) {
-
       }
       var editor = new JSONEditor(container, options, response);
-      //document.getElementById("results").innerHTML = replaceURLWithHTMLLinks(JSON.stringify(response, undefined, 2))
+      document.getElementById("jsonraw").innerHTML = replaceURLWithHTMLLinks(JSON.stringify(response, undefined, 2))
       document.getElementById("input_request").innerHTML = "<label>"+url+"</label>"
       
 

senpy/templates/index.html

@@ -77,10 +77,25 @@ I cannot believe it!</textarea></div>
                 <a id="preview" class="btn btn-lg btn-primary" href="#" onclick="load_JSON()">Analyse!</a>
                 <!--<button id="visualise" name="type" type="button">Visualise!</button>-->
             </form>
-            <div id="content">
               <span id="input_request"></span>
-              <pre id="results"></pre>
+              <ul class="nav nav-tabs" role="tablist">
-            </div>
+                <li role="presentation" class="active"><a class="active" href="#viewer">Viewer</a></li>
+                <li role="presentation"><a class="active" href="#raw">Raw</a></li>
+              </ul>
+              <div class="tab-content">
+                
+                <div class="tab-pane active" id="viewer">
+                    <div id="content">
+                      <pre id="results"></pre>
+                    </div>
+                </div>
+                
+                <div class="tab-pane" id="raw">
+                    <div id="content">
+                       <pre id="jsonraw"></pre>
+                    </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>