1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
    <title>Lepakshi Mural - JSON editor</title>
5 
    <link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
6 
    <meta charset="utf-8" />
7 
    <style>
8 
      textarea {
9 
        width: 500px;
10 
      }
11 
    </style>
12 
</head>
13 
<body>
14 
  <p></p><br>
15 
  <div class="container">
16 
    <h3> JSON Editor </h3>
17 
    <div id="json-saved" class="alert alert-success" style="display: none; width: 300px; margin: auto;">
18 
      <button type="button" class="close" data-dismiss="alert">&times;</button>
19 
      <b>Success!</b> JSON saved. See <a href="/history">here</a>
20 
    </div>
21 
    <div id="json-error" class="alert alert-error" style="display: none; width: 300px; margin: auto;">
22 
      <button type="button" class="close" data-dismiss="alert">&times;</button>
23 
      <b>Invalid JSON!</b> Verify at <a href="http://jsonlint.com">jsonlint.com</a>
24 
    </div>
25 
    <textarea id="json" rows="30">
26 
      {{ json }}
27 
    </textarea>
28 
    Enter JSON filename
29 
    <input type="text" id="filename" placeholder="newname.json">
30 
    <button class="btn" onclick="save();"> Save </button>
31 
  </div>
32 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
33 
  <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
34 
  <script type="text/javascript" src="static/bootstrap.js"></script>
35 
  <script>
36 
    function save() {
37 
      var json = $('#json').val();
38 
      var filename = $('#filename').val();
39 
      if(!filename.match(/.json$/)) {
40 
        filename += '.json';
41 
      }
42 
      try {
43 
        json = JSON.parse(json);
44 
        console.log(json);
45 
        console.log(filename);
46 
        $.post('/saveJSON', {"json": json, "filename": filename}, function(data) {
47 
          console.log(data);
48 
          $('#json-saved').show();
49 
        }, 'json');
50 
      } catch(e) {
51 
        $('#json-error').show();
52 
      }
53 
    }
54 
  </script>
55 
</body>
56 
</html>