Merge pull request #27 from kwheelan/23-excel-data-handling

Local data storage and Excel upload/download

.gitignore

@@ -1,2 +1,2 @@
 # Ignore all .xlsx files
-*.xlsx
+# *.xlsx

index.html

@@ -22,6 +22,7 @@
 <link rel="stylesheet" href="js/components/form/form.css">
 <link rel="stylesheet" href="js/components/sidebar/sidebar.css">
 <link rel="stylesheet" href="js/components/table/table.css">
+<link rel="stylesheet" href="js/components/file_upload/file_upload.css">
 
 <!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
@@ -75,6 +76,9 @@ <h3 id="accordion-baseline-title">Baseline</h3>
     <div id="prompt-div">
         <h3 id="prompt"></h3>
         <br>
+        <!-- File upload -->
+        <input type="file" id="file-input" accept=".xls,.xlsx" />
+        <!-- Prompt buttons -->
         <button class="btn" id="option1"></button>
         <button class="btn" id="option2"></button>
     </div>

js/components/body/body.js

@@ -1,5 +1,6 @@
 import Welcome from '../../components/welcome/welcome.js'
 import { Accordion } from '../accordion/accordion.js';
+import { FileUpload } from '../file_upload/file_upload.js';
 import Modal from '../modal/modal.js';
 import NavButtons from '../nav_buttons/nav_buttons.js';
 import Prompt from '../prompt/prompt.js';
@@ -16,6 +17,7 @@ function resetPage() {
     Table.hide();
     Sidebar.hide();
     Accordion.hide();
+    FileUpload.hide();
     // disable next button
     NavButtons.Next.disable();
     Prompt.Buttons.reset();

js/components/file_upload/file_upload.css

@@ -0,0 +1,3 @@
+#file-input {
+    margin-left: 40%;
+}

js/components/file_upload/file_upload.js

@@ -0,0 +1,32 @@
+import { processWorkbook } from "../../utils/data_utils/XLSX_handlers.js";
+
+export const FileUpload = {
+    init : function() {
+        const inputObject = document.getElementById('file-input');
+        inputObject.addEventListener('change', function(event) {readXL(event) });
+    },
+    show : function(){
+        const inputObject = document.getElementById('file-input');
+        inputObject.style.display = '';
+    },
+    hide : function(){
+        const inputObject = document.getElementById('file-input');
+        inputObject.style.display = 'none';
+    }
+}
+
+function readXL(event) {
+    const file = event.target.files[0];
+
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const arrayBuffer = e.target.result;
+            processWorkbook(arrayBuffer);
+        };
+        reader.onerror = function(err) {
+            console.error('Error reading file:', err);
+        };
+        reader.readAsArrayBuffer(file); // Read the file as an ArrayBuffer
+    }
+}

js/components/table/subcomponents/cells.js

@@ -29,7 +29,6 @@ function createEditableCell(cellClass, isCost){
     textbox.type = 'text';
     if (isCost){
         var value = cell.getAttribute('value');
-        console.log(value);
     } else {
         var value = cell.textContent;
     }

js/components/table/subcomponents/data.js

@@ -3,49 +3,54 @@ import { CurrentFund, CurrentPage, loadTableData, saveTableData } from "../../..
 
 function fillTable(data) {
     try {
-        if(Array.isArray(data)) {
-            const table = document.getElementById('main-table');
-            const thead = table.querySelector('thead');
-            const tbody = table.querySelector('tbody');
-
-            // clear existing data
-            thead.innerHTML = '';
-            tbody.innerHTML = '';
-
-            // Create table header row
-            const headerRow = document.createElement('tr');
-            Object.keys(data[0]).forEach(key => {
-              const header = document.createElement('th');
-              header.textContent = key;
-              headerRow.appendChild(header);
+        const table = document.getElementById('main-table');
+        const thead = table.querySelector('thead');
+        const tbody = table.querySelector('tbody');
+
+        // clear existing data
+        thead.innerHTML = '';
+        tbody.innerHTML = '';
+
+        // Create table header row
+        const headerRow = document.createElement('tr');
+        Object.keys(data[0]).forEach(key => {
+            const header = document.createElement('th');
+            header.textContent = key;
+            headerRow.appendChild(header);
+        });
+        thead.appendChild(headerRow);
+
+        // Create table body rows
+        data.forEach(item => {
+            const row = document.createElement('tr');
+            Object.values(item).forEach(val => {
+            const cell = document.createElement('td');
+            cell.textContent = val;
+            row.appendChild(cell);
             });
-            thead.appendChild(headerRow);
-
-            // Create table body rows
-            data.forEach(item => {
-              const row = document.createElement('tr');
-              Object.values(item).forEach(val => {
-                const cell = document.createElement('td');
-                cell.textContent = val;
-                row.appendChild(cell);
-              });
-              tbody.appendChild(row);
-            });
-
-        } else {
-            console.error('Empty table saved in localStorage.');
-        }
+            tbody.appendChild(row);
+        });
     } catch(error) {
         console.error('No table saved in localStorage:', error);
     }
     saveTableData();
 }
 
 async function loadFromStorage(){
-    // look up table in storage and pass to table load function
-    const key = `${CurrentPage.load()}_${CurrentFund.number()}`;
+    // look up table in storage and pass to table load function\
+    if (CurrentFund.number()){
+        var key = `${CurrentPage.load()}_${CurrentFund.number()}`;
+    } else {
+        var key = CurrentPage.load();
+    }
     const data = await loadTableData(key);
-    fillTable(data);
+    if (!data){
+        // if no table in storage, return 0
+        return 0;
+    } else {
+        fillTable(data);
+        return 1;
+    }
 }
 
 

js/components/table/table.css

@@ -49,7 +49,7 @@ div.table-container {
     /* max-width: calc(100vw - var(--sidebar-width));  */
     /* margin: auto; */
     max-height: max(350px, 6vh);
-    min-height: 350px;
+    /* min-height: 350px; */
 
 }
 

js/init.js

@@ -1,5 +1,4 @@
 // import functions
-import { fetchAndProcessExcel } from './utils/data_utils/XLSX_handlers.js';
 import { CurrentPage } from './utils/data_utils/local_storage_handlers.js';
 
 // path for my laptop
@@ -8,7 +7,7 @@ export let DATA_ROOT = '../../../data/law_dept_sample/'
 // export let DATA_ROOT = '../../budget-request-demo/data/law_dept_sample/'
 
 export let REVENUE = 0;
-export let TARGET = 20000000;
+export let TARGET = 14000000;
 export var FISCAL_YEAR = '26';
 export var OT_FRINGE = 0.0765;