- <!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>