241 lines
5.9 KiB
HTML
241 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>BOM Import</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>
|
|
/* ===== Base Theme (gleich wie Workbench/HMI) ===== */
|
|
:root{
|
|
--bg:#0b1020;
|
|
--card:rgba(255,255,255,0.08);
|
|
--text:rgba(255,255,255,0.92);
|
|
--muted:rgba(255,255,255,0.6);
|
|
--border:rgba(255,255,255,0.14);
|
|
--shadow:0 16px 60px rgba(0,0,0,.4);
|
|
--accent:#4f7cff;
|
|
--radius:20px;
|
|
--tap:44px;
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
|
|
body{
|
|
margin:0;
|
|
font-family:-apple-system,system-ui,Segoe UI,Roboto;
|
|
background:
|
|
radial-gradient(900px 600px at 20% 10%, rgba(79,124,255,.35), transparent 60%),
|
|
var(--bg);
|
|
color:var(--text);
|
|
padding:16px;
|
|
}
|
|
|
|
/* ===== Panel Layout ===== */
|
|
.panel{
|
|
background:linear-gradient(180deg,var(--card),rgba(255,255,255,.04));
|
|
border:1px solid var(--border);
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
padding:16px;
|
|
}
|
|
|
|
.header{
|
|
margin-bottom:12px;
|
|
}
|
|
|
|
.header h2{
|
|
margin:0;
|
|
font-size:18px;
|
|
}
|
|
|
|
.actions{
|
|
display:flex;
|
|
gap:10px;
|
|
flex-wrap:wrap;
|
|
margin-top:10px;
|
|
}
|
|
|
|
/* ===== Buttons ===== */
|
|
button{
|
|
min-height:var(--tap);
|
|
padding:10px 16px;
|
|
border-radius:14px;
|
|
border:1px solid var(--border);
|
|
background:rgba(255,255,255,.06);
|
|
color:var(--text);
|
|
cursor:pointer;
|
|
}
|
|
|
|
button.primary{
|
|
background:linear-gradient(180deg,rgba(79,124,255,.95),rgba(79,124,255,.6));
|
|
border-color:rgba(79,124,255,.6);
|
|
}
|
|
|
|
input[type="file"]{
|
|
min-height:var(--tap);
|
|
color:var(--text);
|
|
}
|
|
|
|
/* ===== Table Container ===== */
|
|
.table-wrap{
|
|
margin-top:16px;
|
|
border-radius:16px;
|
|
border:1px solid var(--border);
|
|
background:rgba(2,6,23,.85);
|
|
padding:6px;
|
|
}
|
|
|
|
/* ===== Handsontable Dark Fix ===== */
|
|
.handsontable{
|
|
color:#e5e7eb;
|
|
}
|
|
|
|
.handsontable .htCore td,
|
|
.handsontable .htCore th{
|
|
background:#020617;
|
|
color:#e5e7eb;
|
|
border-color:#334155;
|
|
}
|
|
|
|
.handsontable .htCore th{
|
|
background:#020617;
|
|
font-weight:600;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section class="panel">
|
|
|
|
<div class="header">
|
|
<h2>Excel BOM Import</h2>
|
|
<div class="muted">Export, Import und Übertragung der BOM-Daten</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button id="export-button" class="primary">BOM Excel Export</button>
|
|
<input type="file" id="file-input" accept=".xlsx">
|
|
<button id="send-button">Daten senden</button>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<div id="import-table"></div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let importedData = [];
|
|
let hot;
|
|
|
|
const url = sessionStorage.getItem("url");
|
|
const stationNumber = sessionStorage.getItem("stationNumber");
|
|
|
|
function exportExcel() {
|
|
const headers = [
|
|
"PRODUCT","BOM_VERSION_ERP","Part_NO","COMP_NAME","POS_TYPE",
|
|
"ALTERNATIVE","WS_ERP","LAYER","QTY","UNIT","SETUP","PRODUKT","PROCESS_GROUP"
|
|
];
|
|
const worksheet = XLSX.utils.aoa_to_sheet([headers]);
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, "BOM");
|
|
XLSX.writeFile(workbook, "BOMExport.xlsx");
|
|
}
|
|
|
|
function importExcelData() {
|
|
const fileInput = document.getElementById("file-input");
|
|
if (!fileInput.files.length) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
const workbook = XLSX.read(e.target.result, { type: "binary" });
|
|
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
const rawData = XLSX.utils
|
|
.sheet_to_json(sheet, { header: 1 })
|
|
.slice(1)
|
|
.filter(row =>
|
|
Array.isArray(row) &&
|
|
row.some(cell => cell !== null && cell !== undefined && String(cell).trim() !== "")
|
|
);
|
|
|
|
importedData = rawData.filter(row => !isRowEmpty(row));
|
|
|
|
|
|
if (!hot) {
|
|
hot = new Handsontable(document.getElementById("import-table"), {
|
|
data: importedData,
|
|
colHeaders:[
|
|
"MATERIAL_NO","BOM_VERSION_ERP","COMPONENT_NO","COMP_NAME",
|
|
"POS_TYPE","ALTERNATIVE","WS_ERP","LAYER","QTY","UNIT",
|
|
"SETUP_FLAG","PRODUKT","PROCESS_GROUP"
|
|
],
|
|
rowHeaders:true,
|
|
width:"100%",
|
|
height:420,
|
|
licenseKey:"non-commercial-and-evaluation"
|
|
});
|
|
} else {
|
|
hot.loadData(importedData);
|
|
}
|
|
};
|
|
reader.readAsBinaryString(fileInput.files[0]);
|
|
}
|
|
|
|
function sendExcelData() {
|
|
if (!url) {
|
|
alert("Backend URL fehlt");
|
|
return;
|
|
}
|
|
|
|
const jsonData = importedData
|
|
.filter(row => !isRowEmpty(row))
|
|
.map(row => ({
|
|
MATERIAL_NO: ""+row[0],
|
|
BOM_VERSION_ERP: ""+row[1],
|
|
COMPONENT_NO: ""+row[2],
|
|
COMP_NAME: ""+row[3],
|
|
POS_TYPE: ""+row[4],
|
|
ALTERNATIVE: ""+row[5],
|
|
WS_ERP: ""+row[6],
|
|
LAYER: ""+row[7],
|
|
QTY: ""+row[8],
|
|
UNIT: ""+row[9],
|
|
SETUP_FLAG: ""+row[10],
|
|
PRODUKT: ""+row[11],
|
|
PROCESS_GROUP: ""+row[12]
|
|
}));
|
|
|
|
|
|
fetch(url + "/backend/api/updateBom", {
|
|
method:"POST",
|
|
headers:{ "Content-Type":"application/json" },
|
|
body:JSON.stringify({ station:stationNumber, data:jsonData })
|
|
})
|
|
.then(r => r.ok ? r.json() : Promise.reject(r.status))
|
|
.then(() => alert("✅ Daten erfolgreich gesendet"))
|
|
.catch(err => alert("❌ Fehler beim Senden: " + err));
|
|
}
|
|
|
|
document.getElementById("export-button").onclick = exportExcel;
|
|
document.getElementById("file-input").onchange = importExcelData;
|
|
document.getElementById("send-button").onclick = sendExcelData;
|
|
});
|
|
|
|
function isRowEmpty(row) {
|
|
return !row || row.every(
|
|
cell => cell === null || cell === undefined || String(cell).trim() === ""
|
|
);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|