<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Kimera Sheet</title> <link rel="stylesheet" href="../../node_modules/handsontable/dist/handsontable.full.min.css"> <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"> <!-- <link rel="stylesheet" href="../sweetAlert2/sweetAlert2.min.css"> --> <link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/all.css"> <link rel="stylesheet" href="../main.css"> <!-- <script>window.$ = window.jQuery = require('jquery');</script> --> <script src="../../node_modules/jquery/dist/jquery.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- <script src="../sweetAlert2/sweetalert2.min.js"></script> --> <script src="../../node_modules/handsontable/dist/handsontable.full.min.js"></script> <!-- <script src="../handsontable/main_renderer.js"></script> --> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="navbar-brand">Kimera Sheet</div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> </ul> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" id="example1console"> <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <!-- <div class="custom-control custom-switch mr-2"> <input type="checkbox" class="custom-control-input" name="autosave" id="autosave"> <label class="custom-control-label" for="autosave">Autosave</label> </div> --> <div class="custom-control custom-checkbox mr-2"> <input type="checkbox" class="custom-control-input" name="autosave" id="autosave"> <label class="custom-control-label" for="autosave">Autosave</label> </div> <button type="button" class="btn btn-outline-secondary btn-sm mr-1" name="load" id="load"><i class="fas fa-download"></i> Load</button> <button type="button" class="btn btn-outline-primary btn-sm mr-1" name="save" id="save"><i class="far fa-save"></i> Save</button> <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> </form> </div> </nav> <div id="kimera_sheet"></div> <script> var $save = document.getElementById('save'), $load = document.getElementById('load'), $autosave = document.getElementById('autosave'), $console = document.getElementById('example1console'), container = document.getElementById('kimera_sheet'), autosaveNotification, hot; hot = new Handsontable(container, { startRows: 500, startCols: 26, stretchH: "all", rowHeaders: true, colHeaders: true, afterChange: function (change, source) { if (source === 'loadData') { return; } if (!$autosave.checked) { return; } clearTimeout(autosaveNotification); $.ajax({ url: '../../autoSave/kimera.json', type: 'POST', dataType: 'json', contentType: 'application/json', data: JSON.stringify({data: change}), // async: true, processData: true, cache: false, success: function(data){ $console.innerHTML = 'Changes will be autosaved'; autosaveNotification = setTimeout(() => { $console.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')'; }, 1000); }, error: function(xhr){ $console.innerHTML = 'Error, data not saved'; } }); }, contextMenu: true, licenseKey: 'non-commercial-and-evaluation', }); // load function Handsontable.dom.addEvent($load, 'click', function () { $.ajax('../../autoSave/kimera.json', 'GET', '', function(res) { var data = JSON.parse(res.response); hot.loadData(data.data); $console.innerText = 'Data loaded'; }); }); //save function Handsontable.dom.addEvent($save, 'click', function () { $.ajax('../../autoSave/kimera.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) { var response = JSON.parse(res.response); if (response.result === 'ok') { exampleConsole.innerText = 'Data saved'; } else { exampleConsole.innerText = 'Save error'; } }); }) Handsontable.dom.addEvent($autosave, 'click', function () { if ($autosave.checked) { $console.innerHTML = 'Changes will be autosaved'; } else { $console.innerHTML = 'Changes will not be autosaved'; } }); </script> </body> </html>