Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@sguggilla
sguggilla authored Nov 10, 2024
1 parent 44c23ac commit 9761733
Showing 1 changed file with 94 additions and 14 deletions.
108 changes: 94 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -10,24 +11,31 @@

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

<!-- DataTables Buttons CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">

<!-- jQuery and DataTables JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>

<!-- Bootstrap JS and Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<style></style>

<!-- SheetJS (xlsx) Library for Excel Parsing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>

<body>
<div class="container my-4">
<h2 class="text-center">Courier Tracking</h2>
<button id="openFormButton" class="btn btn-primary mb-3">Add New Entry</button>
<button id="deleteSelected" class="btn btn-danger mb-3">Delete Selected</button>
<button id="uploadExcelButton" class="btn btn-info mb-3">Upload Excel</button>

<!-- File Input for Excel Upload -->
<input type="file" id="excelFile" class="d-none" accept=".xlsx, .xls">

<!-- Modal for Data Entry Form -->
<div id="entryModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Expand Down Expand Up @@ -103,7 +111,7 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
</div>

<script>
$(document).ready(function() {
$(document).ready(function () {
// Initialize DataTable
const table = $('#courierTable').DataTable({
"scrollY": "400px",
Expand All @@ -112,14 +120,14 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
});

// Show the modal form for adding new entry
$('#openFormButton').on('click', function() {
$('#openFormButton').on('click', function () {
$('#entryModal').modal('show');
$('#entryForm')[0].reset(); // Reset the form
$('#entryForm').data('edit', false); // Set form to add mode
});

// Handle form submission (Add or Edit)
$('#entryForm').on('submit', function(event) {
$('#entryForm').on('submit', function (event) {
event.preventDefault();

// Get form data
Expand All @@ -129,7 +137,7 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
const customerMobile2 = $('#customerMobile2').val();
const amount = $('#amount').val();
const address = $('#address').val();

if ($(this).data('edit')) {
// Edit mode: update the existing row
const rowData = table.row($(this).data('row')).data();
Expand All @@ -150,7 +158,7 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
customerMobile2,
amount,
address,
'<button class="btn btn-warning btn-sm edit-btn">Edit</button>' // Edit button for new row
'<button class="btn btn-warning btn-sm edit-btn">Edit</button>'
]).draw();
}

Expand All @@ -160,7 +168,7 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
});

// Edit button functionality
$('#courierTable').on('click', '.edit-btn', function() {
$('#courierTable').on('click', '.edit-btn', function () {
const row = table.row($(this).closest('tr'));
const rowData = row.data();

Expand All @@ -182,23 +190,95 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Courier Entry</h5>
});

// Select/Deselect all rows
$('#selectAll').on('click', function() {
$('#selectAll').on('click', function () {
const isChecked = $(this).prop('checked');
$('#courierTable tbody .selectRow').prop('checked', isChecked);
});

// Delete selected rows
$('#deleteSelected').on('click', function() {
$('#deleteSelected').on('click', function () {
// Get selected rows
const selectedRows = $('#courierTable tbody .selectRow:checked');

// Delete each selected row
selectedRows.each(function() {
selectedRows.each(function () {
const row = $(this).closest('tr');
table.row(row).remove().draw();
});
});

// Handle Excel file upload
$('#uploadExcelButton').on('click', function () {
$('#excelFile').click();
});

// Parse the Excel file and add data to the table
$('#excelFile').on('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const json = XLSX.utils.sheet_to_json(sheet, { header: 1 });

// Define the required columns for the table
const requiredColumns = {
'Date': 'invoicedate',
'Customer Name': 'customer_name',
'Customer Mobile1': 'customer_mobile1',
'Customer Mobile2': 'customer_mobile2',
'Amount': 'total',
'Address': 'customer_address1'
};

// Find the indexes for the required columns based on the header row
const headers = json[0];
const columnIndexes = {};

// Map Excel column names to table column names
Object.keys(requiredColumns).forEach((tableColumn) => {
const excelColumn = requiredColumns[tableColumn];
const index = headers.indexOf(excelColumn);
if (index !== -1) {
columnIndexes[tableColumn] = index; // Store the index of the Excel column that matches the table column
}
});

// Loop through Excel rows and add them to the table
json.forEach((row, index) => {
if (index > 0) { // Skip the header row
const rowData = [
'<input type="checkbox" class="selectRow">'
];

// Add the data from the matched columns
Object.keys(requiredColumns).forEach((tableColumn) => {
if (columnIndexes[tableColumn] !== undefined) {
rowData.push(row[columnIndexes[tableColumn]]); // Add the value from the Excel file
} else {
rowData.push(""); // If the column is not found, add an empty value
}
});

// Add the Edit button
rowData.push('<button class="btn btn-warning btn-sm edit-btn">Edit</button>');

// Add the row to the DataTable
table.row.add(rowData).draw();
}
});

// Reset the file input after processing the file to allow multiple uploads
$('#excelFile').val('');
};
reader.readAsArrayBuffer(file);
}
});

});
</script>
</body>
</html>

</html>

0 comments on commit 9761733

Please sign in to comment.