109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Multi‐Table Excel Import</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
|
||
<style>
|
||
body { padding: 2rem; background: #f8f9fa; }
|
||
#table-container { height: 600px; margin-top: 1rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1 class="mb-4">Excel Importer</h1>
|
||
|
||
<div class="mb-3">
|
||
<form id="upload-form" class="mb-3">
|
||
<input type="file" name="files" … multiple>
|
||
<button type="submit" class="btn btn-primary">Upload Files</button>
|
||
</form>
|
||
<button id="download-excel" class="btn btn-success">Download All Tables</button>
|
||
</div>
|
||
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-auto">
|
||
<label for="table-select" class="col-form-label">Select Table:</label>
|
||
</div>
|
||
<div class="col-auto">
|
||
<select id="table-select" class="form-select">
|
||
<option value="stripe_import">Stripe Import</option>
|
||
<option value="raiseNow_import">RaiseNow Import</option>
|
||
<option value="merged">Merged</option>
|
||
<option value="stripe_only">Stripe Only</option>
|
||
<option value="raisenow_only">RaiseNow Only</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="table-container">
|
||
<div id="table"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
|
||
<script>
|
||
const uploadForm = document.getElementById('upload-form');
|
||
const tableSelect = document.getElementById('table-select');
|
||
let table;
|
||
|
||
uploadForm.addEventListener('submit', async e => {
|
||
e.preventDefault();
|
||
const fd = new FormData(uploadForm);
|
||
const resp = await fetch('/upload', { method:'POST', body:fd });
|
||
const res = await resp.json();
|
||
if (resp.ok) {
|
||
loadTable(tableSelect.value);
|
||
} else alert(res.error || 'Upload failed');
|
||
});
|
||
|
||
tableSelect.addEventListener('change', () => loadTable(tableSelect.value));
|
||
|
||
async function loadTable(name) {
|
||
|
||
// fetch data
|
||
const resp = await fetch(`/get_table?table=${name}`);
|
||
const json = await resp.json();
|
||
|
||
// error handling
|
||
if (!resp.ok) {
|
||
return alert(json.error || 'Error loading');
|
||
}
|
||
|
||
// column definitions
|
||
const cols = json.columns.map(c => ({
|
||
title: c,
|
||
field: c,
|
||
headerFilter: true
|
||
}));
|
||
|
||
if (table) {
|
||
// update columns
|
||
table.setColumns(cols);
|
||
// returns a promise once render is done
|
||
table.replaceData(json.data);
|
||
} else {
|
||
// options for table
|
||
const opts = {
|
||
data: json.data,
|
||
layout: 'fitData',
|
||
height: '100%',
|
||
columns: cols
|
||
};
|
||
table = new Tabulator('#table', opts);
|
||
}
|
||
}
|
||
|
||
document.getElementById('download-excel')
|
||
.addEventListener('click', () => {
|
||
window.location = '/download';
|
||
});
|
||
|
||
// initialize
|
||
loadTable(tableSelect.value);
|
||
</script>
|
||
</body>
|
||
</html> |