152 lines
5.6 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Excel Contact Import & Export</title>
<script src="/backend/xlsx/xlsx.full.min.js"></script>
<script src="/backend/handsontable/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="/backend/handsontable/handsontable/dist/handsontable.full.min.css">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: inline-block;
}
button {
margin: 10px;
padding: 10px 20px;
border: none;
background-color: red;
color: white;
border-radius: 5px;
cursor: pointer;
}
#import-table {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Excel Export & Import</h2>
<button id="export-button">ERP Groups Excel Export</button>
<input type="file" id="file-input" accept=".xlsx">
<button id="send-button">Daten Senden</button>
<div id="import-table"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
let importedData = [];
let hot; // Handsontable instance
const url = sessionStorage.getItem("url");
const stationNumber = sessionStorage.getItem("stationNumber");
function exportExcel() {
fetch(url + '/backend/api/getERPGroups', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ station: stationNumber, })
})
.then(response => response.json())
.then(data => {
if (!data || data.length === 0) {
alert("Keine Daten zum Exportieren.");
return;
}
// Gewünschte Reihenfolge festlegen
const headers = ["erp_grp_nr", "erp_grp_bez", "kap_nr"];
const headersNew = ["ERP_GROUP_NUMBER", "ERP_GROUP_DESC", "KAP_NR"];
const rows = data.map(obj => headers.map(header => obj[header]));
const worksheet = XLSX.utils.aoa_to_sheet([headersNew, ...rows]);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "ERPGroup");
XLSX.writeFile(workbook, "ERPGropExport.xlsx");
})
.catch(error => alert("Fehler beim Exportieren: " + error.message));
}
function importExcelData(event) {
const fileInput = document.getElementById("file-input");
if (!fileInput.files.length) return;
const reader = new FileReader();
reader.onload = function(event) {
const workbook = XLSX.read(event.target.result, { type: "binary" });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
if (jsonData.length < 2) return;
const headers = jsonData[0];
importedData = jsonData.slice(1)
.filter(row =>
Array.isArray(row) &&
row.some(cell => cell !== null && cell !== undefined && String(cell).trim() !== "")
);
if (hot) {
hot.loadData(importedData);
hot.updateSettings({ colHeaders: headers });
} else {
const container = document.getElementById("import-table");
hot = new Handsontable(container, {
data: importedData,
colHeaders: headers,
rowHeaders: true,
width: '100%',
height: 300,
licenseKey: 'non-commercial-and-evaluation'
});
}
};
reader.readAsBinaryString(fileInput.files[0]);
}
function sendExcelData() {
const jsonData = importedData.map(row => {
let obj = {};
hot.getColHeader().forEach((header, index) => {
obj[header] = row[index] || "";
});
return obj;
});
if (!url) {
alert("Backend URL is not defined.");
return;
}
fetch(url + '/backend/api/updateERP', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ station: stationNumber, data: jsonData })
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(result => alert("Daten erfolgreich gesendet!"))
.catch(error => alert("Fehler beim Senden der Daten: " + error.message));
}
document.getElementById("export-button").addEventListener("click", exportExcel);
document.getElementById("file-input").addEventListener("change", importExcelData);
document.getElementById("send-button").addEventListener("click", sendExcelData);
});
</script>
</body>
</html>