1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Kimera Sheet</title>
  6. <link rel="stylesheet" href="../../node_modules/handsontable/dist/handsontable.full.min.css">
  7. <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
  8. <!-- <link rel="stylesheet" href="../sweetAlert2/sweetAlert2.min.css"> -->
  9. <link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/all.css">
  10. <link rel="stylesheet" href="../main.css">
  11. <!-- <script>window.$ = window.jQuery = require('jquery');</script> -->
  12. <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
  13. <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  14. <!-- <script src="../sweetAlert2/sweetalert2.min.js"></script> -->
  15. <script src="../../node_modules/handsontable/dist/handsontable.full.min.js"></script>
  16. <!-- <script src="../handsontable/main_renderer.js"></script> -->
  17. </head>
  18. <body>
  19. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  20. <div class="navbar-brand">Kimera Sheet</div>
  21. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  22. <ul class="navbar-nav mr-auto">
  23. </ul>
  24. <ul class="navbar-nav">
  25. <li class="nav-item active">
  26. <a class="nav-link" href="#" id="example1console"> <span class="sr-only">(current)</span></a>
  27. </li>
  28. </ul>
  29. <form class="form-inline my-2 my-lg-0">
  30. <!-- <div class="custom-control custom-switch mr-2">
  31. <input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
  32. <label class="custom-control-label" for="autosave">Autosave</label>
  33. </div> -->
  34. <div class="custom-control custom-checkbox mr-2">
  35. <input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
  36. <label class="custom-control-label" for="autosave">Autosave</label>
  37. </div>
  38. <button type="button" class="btn btn-outline-secondary btn-sm mr-1" name="load" id="load"><i class="fas fa-download"></i> Load</button>
  39. <button type="button" class="btn btn-outline-primary btn-sm mr-1" name="save" id="save"><i class="far fa-save"></i> Save</button>
  40. <button class="btn btn-outline-success my-sm-0 btn-sm" id="export-csv" type="button"><i class="fas fa-file-export"></i> Export to CSV</button>
  41. </form>
  42. </div>
  43. </nav>
  44. <div id="kimera_sheet"></div>
  45. <script>
  46. var
  47. $save = document.getElementById('save'),
  48. $load = document.getElementById('load'),
  49. $autosave = document.getElementById('autosave'),
  50. $console = document.getElementById('example1console'),
  51. container = document.getElementById('kimera_sheet'),
  52. autosaveNotification,
  53. hot;
  54. hot = new Handsontable(container, {
  55. startRows: 500,
  56. startCols: 26,
  57. stretchH: "all",
  58. rowHeaders: true,
  59. colHeaders: true,
  60. afterChange: function (change, source) {
  61. if (source === 'loadData') { return; }
  62. if (!$autosave.checked) { return; }
  63. clearTimeout(autosaveNotification);
  64. $.ajax({
  65. url: '../../autoSave/kimera.json',
  66. type: 'POST',
  67. dataType: 'json',
  68. contentType: 'application/json',
  69. data: JSON.stringify({data: change}),
  70. // async: true,
  71. processData: true,
  72. cache: false,
  73. success: function(data){
  74. $console.innerHTML = 'Changes will be autosaved';
  75. autosaveNotification = setTimeout(() => {
  76. $console.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
  77. }, 1000);
  78. },
  79. error: function(xhr){
  80. $console.innerHTML = 'Error, data not saved';
  81. }
  82. });
  83. },
  84. contextMenu: true,
  85. licenseKey: 'non-commercial-and-evaluation',
  86. });
  87. // load function
  88. Handsontable.dom.addEvent($load, 'click', function () {
  89. $.ajax('../../autoSave/kimera.json', 'GET', '', function(res) {
  90. var data = JSON.parse(res.response);
  91. hot.loadData(data.data);
  92. $console.innerText = 'Data loaded';
  93. });
  94. });
  95. //save function
  96. Handsontable.dom.addEvent($save, 'click', function () {
  97. $.ajax('../../autoSave/kimera.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {
  98. var response = JSON.parse(res.response);
  99. if (response.result === 'ok') {
  100. exampleConsole.innerText = 'Data saved';
  101. }
  102. else {
  103. exampleConsole.innerText = 'Save error';
  104. }
  105. });
  106. })
  107. Handsontable.dom.addEvent($autosave, 'click', function () {
  108. if ($autosave.checked) {
  109. $console.innerHTML = 'Changes will be autosaved';
  110. } else {
  111. $console.innerHTML = 'Changes will not be autosaved';
  112. }
  113. });
  114. </script>
  115. </body>
  116. </html>