index.mustache 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
  2. <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  3. <style>
  4. .highlight {
  5. padding: 20px;
  6. background-color: #f8f9fa;
  7. }
  8. </style>
  9. <table class="table table-responsive">
  10. {{#list}}
  11. <tr id="{{id}}">
  12. <td>{{id}}</td>
  13. <td>{{key}}</td>
  14. <td>{{type}}</td>
  15. <td>{{format}}</td>
  16. <td>{{created_at}}</td>
  17. </tr>
  18. {{/list}}
  19. </table>
  20. <pre>
  21. <code id="canvas" class="language-json"></code>
  22. </pre>
  23. <script>
  24. // https://highlightjs.org/download/
  25. // https://www.tutorialspoint.com/how-to-format-json-string-in-javascript
  26. $('tr').on('click', function (e) {
  27. let id = $(this).attr('id');
  28. fetch("/cache/" + id)
  29. .then(response => response.json())
  30. .then(function (data) {
  31. $('#canvas').html(JSON.stringify(data, null, 4));
  32. hljs.highlightAll();
  33. });
  34. });
  35. </script>