265ce28 by Anon Ray at 2013-02-08 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);
4c68da7 by Arvind at 2013-02-08 44
        $.post('/saveJSON', {"json": JSON.stringify(json), "filename": filename}, function(data) {
265ce28 by Anon Ray at 2013-02-08 45
          console.log(data);
46
          $('#json-saved').show();
47
        }, 'json');
48
      } catch(e) {
49
        $('#json-error').show();
50
      }
51
    }
52
  </script>
53
</body>
54
</html>