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.     

  22.         <div class="collapse navbar-collapse" id="navbarSupportedContent">

  23.             <ul class="navbar-nav mr-auto">

  24.             </ul>

  25.             <ul class="navbar-nav">

  26.                 <li class="nav-item active">

  27.                     <a class="nav-link" href="#" id="example1console"> <span class="sr-only">(current)</span></a>

  28.                 </li>

  29.             </ul>

  30.             <form class="form-inline my-2 my-lg-0">

  31.                 <!-- <div class="custom-control custom-switch mr-2">

  32.                     <input type="checkbox" class="custom-control-input" name="autosave" id="autosave">

  33.                     <label class="custom-control-label" for="autosave">Autosave</label>

  34.                 </div> -->

  35.                 <div class="custom-control custom-checkbox mr-2">

  36.                     <input type="checkbox" class="custom-control-input" name="autosave" id="autosave">

  37.                     <label class="custom-control-label" for="autosave">Autosave</label>

  38.                 </div>

  39.                 <button type="button" class="btn btn-outline-secondary btn-sm mr-1" name="load" id="load"><i class="fas fa-download"></i> Load</button>

  40.                 <button type="button" class="btn btn-outline-primary btn-sm mr-1" name="save" id="save"><i class="far fa-save"></i> Save</button>

  41.                 <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>

  42.             </form>

  43.         </div>

  44.     </nav>

  45.     <div id="kimera_sheet"></div>

  46.     <script>

  47.         var 

  48.         $save       = document.getElementById('save'),

  49.         $load       = document.getElementById('load'),

  50.         $autosave   = document.getElementById('autosave'),

  51.         $console    = document.getElementById('example1console'),

  52.         container   = document.getElementById('kimera_sheet'),

  53.         autosaveNotification,

  54.         hot;

  55. 

  56.         hot = new Handsontable(container, {

  57.             startRows: 500,

  58.             startCols: 26,

  59.             stretchH: "all",

  60.             rowHeaders: true,

  61.             colHeaders: true,

  62.             afterChange: function (change, source) {

  63.                 if (source === 'loadData') { return; }

  64.                 if (!$autosave.checked) { return; }

  65.                 clearTimeout(autosaveNotification);

  66.                 $.ajax({

  67.                     url: '../../autoSave/kimera.json',

  68.                     type: 'POST',

  69.                     dataType: 'json',

  70.                     contentType: 'application/json',

  71.                     data: JSON.stringify({data: change}),

  72.                     // async: true,

  73.                     processData: true,

  74.                     cache: false,

  75.                     success: function(data){

  76.                         $console.innerHTML = 'Changes will be autosaved';

  77.                         autosaveNotification = setTimeout(() => {

  78.                             $console.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';

  79.                         }, 1000);

  80.                     },

  81.                     error: function(xhr){

  82.                         $console.innerHTML = 'Error, data not saved';

  83.                     }

  84.                 });

  85.             },

  86.             contextMenu: true,

  87.             licenseKey: 'non-commercial-and-evaluation',

  88.         });

  89.         

  90.         // load function

  91.         Handsontable.dom.addEvent($load, 'click', function () {

  92.             $.ajax('../../autoSave/kimera.json', 'GET', '', function(res) {

  93.                 var data = JSON.parse(res.response);

  94. 

  95.                 hot.loadData(data.data);

  96.                 $console.innerText = 'Data loaded';

  97.             });

  98.         });

  99. 

  100.          //save function

  101.          Handsontable.dom.addEvent($save, 'click', function () {

  102.             $.ajax('../../autoSave/kimera.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {

  103.                 var response = JSON.parse(res.response);

  104. 

  105.                 if (response.result === 'ok') {

  106.                 exampleConsole.innerText = 'Data saved';

  107.                 }

  108.                 else {

  109.                 exampleConsole.innerText = 'Save error';

  110.                 }

  111.             });

  112.         })

  113. 

  114.         Handsontable.dom.addEvent($autosave, 'click', function () {

  115.             if ($autosave.checked) {

  116.                 $console.innerHTML = 'Changes will be autosaved';

  117.             } else {

  118.                 $console.innerHTML = 'Changes will not be autosaved';

  119.             }

  120.         });

  121.     </script>

  122.   </body>

  123. </html>