653 lines
20 KiB
JavaScript
653 lines
20 KiB
JavaScript
const state = {
|
||
bootstrap: null,
|
||
rackTemplateId: null,
|
||
projectName: "Neues Rack-Projekt",
|
||
components: [],
|
||
placedItems: [],
|
||
nextPlacementId: 1,
|
||
dragPlacementId: null,
|
||
};
|
||
|
||
const ui = {};
|
||
|
||
document.addEventListener("DOMContentLoaded", async () => {
|
||
cacheDom();
|
||
bindEvents();
|
||
await loadBootstrap();
|
||
});
|
||
|
||
function cacheDom() {
|
||
ui.templateSelect = document.getElementById("rack-template-select");
|
||
ui.projectName = document.getElementById("project-name");
|
||
ui.componentFilter = document.getElementById("component-filter");
|
||
ui.pluginInput = document.getElementById("plugin-input");
|
||
ui.componentLibrary = document.getElementById("component-library");
|
||
ui.rackSummary = document.getElementById("rack-summary");
|
||
ui.rackGrid = document.getElementById("rack-grid");
|
||
ui.projectStats = document.getElementById("project-stats");
|
||
ui.bomOutput = document.getElementById("bom-output");
|
||
ui.cableFrom = document.getElementById("cable-from");
|
||
ui.cableTo = document.getElementById("cable-to");
|
||
ui.cableSlack = document.getElementById("cable-slack");
|
||
ui.cableOutput = document.getElementById("cable-output");
|
||
ui.validationOutput = document.getElementById("validation-output");
|
||
ui.exportBom = document.getElementById("export-bom");
|
||
}
|
||
|
||
function bindEvents() {
|
||
ui.templateSelect.addEventListener("change", () => {
|
||
state.rackTemplateId = ui.templateSelect.value;
|
||
state.placedItems = [];
|
||
renderAll();
|
||
});
|
||
|
||
ui.projectName.addEventListener("input", () => {
|
||
state.projectName = ui.projectName.value.trim() || "Neues Rack-Projekt";
|
||
renderSummary();
|
||
});
|
||
|
||
ui.componentFilter.addEventListener("input", renderLibrary);
|
||
ui.cableSlack.addEventListener("input", renderCableEstimate);
|
||
ui.cableFrom.addEventListener("change", renderCableEstimate);
|
||
ui.cableTo.addEventListener("change", renderCableEstimate);
|
||
ui.pluginInput.addEventListener("change", importPluginPack);
|
||
ui.exportBom.addEventListener("click", copyBomCsv);
|
||
}
|
||
|
||
async function loadBootstrap() {
|
||
const response = await fetch(window.APP_CONFIG.apiBootstrapUrl, {
|
||
headers: {
|
||
Accept: "application/json",
|
||
},
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Bootstrap request failed: ${response.status}`);
|
||
}
|
||
|
||
state.bootstrap = await response.json();
|
||
state.components = [...state.bootstrap.components];
|
||
state.rackTemplateId = state.bootstrap.rackTemplates[0]?.id ?? null;
|
||
|
||
renderTemplateOptions();
|
||
renderAll();
|
||
}
|
||
|
||
function renderAll() {
|
||
renderSummary();
|
||
renderLibrary();
|
||
renderRack();
|
||
renderStats();
|
||
renderBom();
|
||
renderCableSelectors();
|
||
renderCableEstimate();
|
||
renderValidation();
|
||
}
|
||
|
||
function renderTemplateOptions() {
|
||
const options = state.bootstrap.rackTemplates
|
||
.map((template) => {
|
||
const selected = template.id === state.rackTemplateId ? " selected" : "";
|
||
return `<option value="${escapeHtml(template.id)}"${selected}>${escapeHtml(template.name)}</option>`;
|
||
})
|
||
.join("");
|
||
|
||
ui.templateSelect.innerHTML = options;
|
||
}
|
||
|
||
function renderSummary() {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
ui.rackSummary.innerHTML = "";
|
||
return;
|
||
}
|
||
|
||
ui.rackSummary.innerHTML = `
|
||
<div class="summary-card">
|
||
<span>Projekt</span>
|
||
<strong>${escapeHtml(state.projectName)}</strong>
|
||
</div>
|
||
<div class="summary-card">
|
||
<span>Rack-Standard</span>
|
||
<strong>${rack.rackStandard === "19_inch" ? "19 inch" : "10 inch"}</strong>
|
||
</div>
|
||
<div class="summary-card">
|
||
<span>Kapazitaet</span>
|
||
<strong>${rack.totalU}U / ${rack.usableDepthMm} mm</strong>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderLibrary() {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
return;
|
||
}
|
||
|
||
const needle = ui.componentFilter.value.trim().toLowerCase();
|
||
const filtered = state.components.filter((component) => {
|
||
const compatible = component.rackStandard === rack.rackStandard;
|
||
const haystack = `${component.name} ${component.category} ${component.partNumber}`.toLowerCase();
|
||
return compatible && (!needle || haystack.includes(needle));
|
||
});
|
||
|
||
if (filtered.length === 0) {
|
||
ui.componentLibrary.innerHTML = `<div class="empty-state">Keine passenden Komponenten gefunden.</div>`;
|
||
return;
|
||
}
|
||
|
||
ui.componentLibrary.innerHTML = filtered
|
||
.map(
|
||
(component) => `
|
||
<article class="component-card">
|
||
<div class="component-card__header">
|
||
<div>
|
||
<strong>${escapeHtml(component.name)}</strong>
|
||
<div>${escapeHtml(component.partNumber)}</div>
|
||
</div>
|
||
<span class="chip">${component.heightU}U</span>
|
||
</div>
|
||
<div class="component-card__meta">
|
||
<span>${escapeHtml(component.category)}</span>
|
||
<span>${component.depthMm} mm tief</span>
|
||
<span>${formatCurrency(component.priceNet, component.currency)}</span>
|
||
</div>
|
||
<button type="button" data-action="add-component" data-component-id="${escapeHtml(component.id)}">
|
||
In Rack einfuegen
|
||
</button>
|
||
</article>
|
||
`
|
||
)
|
||
.join("");
|
||
|
||
ui.componentLibrary.querySelectorAll("[data-action='add-component']").forEach((button) => {
|
||
button.addEventListener("click", () => addComponentToRack(button.dataset.componentId));
|
||
});
|
||
}
|
||
|
||
function addComponentToRack(componentId) {
|
||
const component = state.components.find((entry) => entry.id === componentId);
|
||
const rack = getCurrentRackTemplate();
|
||
if (!component || !rack) {
|
||
return;
|
||
}
|
||
|
||
const position = findFirstFreePosition(component.heightU);
|
||
if (position === null) {
|
||
alert("Keine freie Position fuer diese Komponente im aktuellen Rack.");
|
||
return;
|
||
}
|
||
|
||
state.placedItems.push({
|
||
placementId: `p${state.nextPlacementId++}`,
|
||
componentId: component.id,
|
||
startU: position,
|
||
});
|
||
|
||
renderAll();
|
||
}
|
||
|
||
function renderRack() {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
return;
|
||
}
|
||
|
||
ui.rackGrid.style.setProperty("--rack-unit-height", "38px");
|
||
|
||
const slots = [];
|
||
for (let u = rack.totalU; u >= 1; u -= 1) {
|
||
slots.push(`
|
||
<div class="rack-slot" data-slot-u="${u}">
|
||
<span class="rack-slot__label">${u}U</span>
|
||
</div>
|
||
`);
|
||
}
|
||
|
||
ui.rackGrid.innerHTML = `${slots.join("")}<div class="rack-items-layer" id="rack-items-layer"></div>`;
|
||
|
||
ui.rackGrid.querySelectorAll(".rack-slot").forEach((slot) => {
|
||
slot.addEventListener("dragover", (event) => {
|
||
event.preventDefault();
|
||
slot.classList.add("is-drop-target");
|
||
});
|
||
slot.addEventListener("dragleave", () => slot.classList.remove("is-drop-target"));
|
||
slot.addEventListener("drop", (event) => {
|
||
event.preventDefault();
|
||
slot.classList.remove("is-drop-target");
|
||
if (!state.dragPlacementId) {
|
||
return;
|
||
}
|
||
movePlacedItem(state.dragPlacementId, Number(slot.dataset.slotU));
|
||
});
|
||
});
|
||
|
||
const layer = document.getElementById("rack-items-layer");
|
||
const rackHeight = rack.totalU * 38;
|
||
layer.style.height = `${rackHeight}px`;
|
||
|
||
state.placedItems.forEach((item) => {
|
||
const component = getComponent(item.componentId);
|
||
if (!component) {
|
||
return;
|
||
}
|
||
|
||
const top = (rack.totalU - (item.startU + component.heightU) + 1) * 38;
|
||
const height = component.heightU * 38 - 2;
|
||
const element = document.createElement("article");
|
||
element.className = "rack-item";
|
||
element.dataset.standard = component.rackStandard;
|
||
element.draggable = true;
|
||
element.style.top = `${top}px`;
|
||
element.style.height = `${height}px`;
|
||
element.innerHTML = `
|
||
<div class="rack-item__header">
|
||
<div>
|
||
<strong>${escapeHtml(component.name)}</strong>
|
||
<div class="rack-item__meta">${component.heightU}U · ${component.depthMm} mm · ${formatCurrency(component.priceNet, component.currency)}</div>
|
||
</div>
|
||
<span class="chip">${item.startU}U</span>
|
||
</div>
|
||
<div class="rack-item__actions">
|
||
<button type="button" data-action="move-up">+1U</button>
|
||
<button type="button" data-action="move-down">-1U</button>
|
||
<button type="button" data-action="remove">Entfernen</button>
|
||
</div>
|
||
`;
|
||
|
||
element.addEventListener("dragstart", () => {
|
||
state.dragPlacementId = item.placementId;
|
||
element.classList.add("is-dragging");
|
||
});
|
||
element.addEventListener("dragend", () => {
|
||
state.dragPlacementId = null;
|
||
element.classList.remove("is-dragging");
|
||
});
|
||
element.querySelector("[data-action='move-up']").addEventListener("click", () => movePlacedItem(item.placementId, item.startU + 1));
|
||
element.querySelector("[data-action='move-down']").addEventListener("click", () => movePlacedItem(item.placementId, item.startU - 1));
|
||
element.querySelector("[data-action='remove']").addEventListener("click", () => {
|
||
state.placedItems = state.placedItems.filter((entry) => entry.placementId !== item.placementId);
|
||
renderAll();
|
||
});
|
||
|
||
layer.appendChild(element);
|
||
});
|
||
}
|
||
|
||
function movePlacedItem(placementId, requestedStartU) {
|
||
const rack = getCurrentRackTemplate();
|
||
const item = state.placedItems.find((entry) => entry.placementId === placementId);
|
||
const component = item ? getComponent(item.componentId) : null;
|
||
if (!rack || !item || !component) {
|
||
return;
|
||
}
|
||
|
||
const normalizedStart = Math.max(1, Math.min(requestedStartU, rack.totalU - component.heightU + 1));
|
||
const occupied = state.placedItems.some((entry) => {
|
||
if (entry.placementId === placementId) {
|
||
return false;
|
||
}
|
||
const other = getComponent(entry.componentId);
|
||
if (!other) {
|
||
return false;
|
||
}
|
||
return rangesOverlap(normalizedStart, component.heightU, entry.startU, other.heightU);
|
||
});
|
||
|
||
if (occupied) {
|
||
return;
|
||
}
|
||
|
||
item.startU = normalizedStart;
|
||
renderAll();
|
||
}
|
||
|
||
function renderStats() {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
return;
|
||
}
|
||
|
||
const usedU = state.placedItems.reduce((sum, item) => {
|
||
const component = getComponent(item.componentId);
|
||
return sum + (component?.heightU ?? 0);
|
||
}, 0);
|
||
|
||
const usedWeight = state.placedItems.reduce((sum, item) => {
|
||
const component = getComponent(item.componentId);
|
||
return sum + (component?.weightKg ?? 0);
|
||
}, 0);
|
||
|
||
const usedPower = state.placedItems.reduce((sum, item) => {
|
||
const component = getComponent(item.componentId);
|
||
return sum + (component?.powerW ?? 0);
|
||
}, 0);
|
||
|
||
ui.projectStats.innerHTML = `
|
||
<div class="stat-card">
|
||
<span>Belegte U</span>
|
||
<strong>${usedU} / ${rack.totalU}</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span>Freie U</span>
|
||
<strong>${rack.totalU - usedU}</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span>Gewicht</span>
|
||
<strong>${usedWeight.toFixed(1)} / ${rack.maxWeightKg} kg</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span>Leistung</span>
|
||
<strong>${usedPower} W</strong>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderBom() {
|
||
const aggregated = new Map();
|
||
|
||
state.placedItems.forEach((item) => {
|
||
const component = getComponent(item.componentId);
|
||
if (!component) {
|
||
return;
|
||
}
|
||
|
||
const key = component.partNumber;
|
||
if (!aggregated.has(key)) {
|
||
aggregated.set(key, {
|
||
quantity: 0,
|
||
name: component.name,
|
||
manufacturer: component.manufacturer,
|
||
partNumber: component.partNumber,
|
||
currency: component.currency,
|
||
priceNet: component.priceNet,
|
||
});
|
||
}
|
||
|
||
aggregated.get(key).quantity += 1;
|
||
});
|
||
|
||
const lines = Array.from(aggregated.values());
|
||
if (lines.length === 0) {
|
||
ui.bomOutput.innerHTML = `<div class="empty-state">Noch keine Komponenten platziert.</div>`;
|
||
return;
|
||
}
|
||
|
||
ui.bomOutput.innerHTML = lines
|
||
.map((line) => {
|
||
const total = line.quantity * line.priceNet;
|
||
return `
|
||
<div class="bom-line">
|
||
<div>
|
||
<strong>${escapeHtml(line.name)}</strong>
|
||
<div>${escapeHtml(line.partNumber)} · ${escapeHtml(line.manufacturer)}</div>
|
||
</div>
|
||
<div>${line.quantity} × ${formatCurrency(total, line.currency)}</div>
|
||
</div>
|
||
`;
|
||
})
|
||
.join("");
|
||
}
|
||
|
||
function renderCableSelectors() {
|
||
const options = ['<option value="">Bitte waehlen</option>']
|
||
.concat(
|
||
state.placedItems.map((item) => {
|
||
const component = getComponent(item.componentId);
|
||
if (!component) {
|
||
return "";
|
||
}
|
||
return `<option value="${escapeHtml(item.placementId)}">${escapeHtml(component.name)} @ ${item.startU}U</option>`;
|
||
})
|
||
)
|
||
.join("");
|
||
|
||
ui.cableFrom.innerHTML = options;
|
||
ui.cableTo.innerHTML = options;
|
||
}
|
||
|
||
function renderCableEstimate() {
|
||
const fromId = ui.cableFrom.value;
|
||
const toId = ui.cableTo.value;
|
||
const slackPercent = Number(ui.cableSlack.value || 0);
|
||
|
||
if (!fromId || !toId || fromId === toId) {
|
||
ui.cableOutput.textContent = "Fuer eine Schaetzung zwei verschiedene Komponenten auswaehlen.";
|
||
return;
|
||
}
|
||
|
||
const from = state.placedItems.find((item) => item.placementId === fromId);
|
||
const to = state.placedItems.find((item) => item.placementId === toId);
|
||
const rack = getCurrentRackTemplate();
|
||
const fromComponent = from ? getComponent(from.componentId) : null;
|
||
const toComponent = to ? getComponent(to.componentId) : null;
|
||
|
||
if (!from || !to || !rack || !fromComponent || !toComponent) {
|
||
ui.cableOutput.textContent = "Kabelschaetzung momentan nicht verfuegbar.";
|
||
return;
|
||
}
|
||
|
||
const verticalMm = Math.abs(from.startU - to.startU) * 44.45;
|
||
const depthAllowance = Math.min(rack.usableDepthMm * 0.35, 280);
|
||
const sideAllowance = estimateSideAllowance(fromComponent, toComponent);
|
||
const rawLength = verticalMm + depthAllowance + sideAllowance;
|
||
const withSlack = rawLength * (1 + slackPercent / 100);
|
||
const recommended = recommendCableLength(withSlack);
|
||
|
||
ui.cableOutput.innerHTML = `
|
||
Geschaetzt: <strong>${Math.round(rawLength)} mm</strong><br>
|
||
Mit Reserve: <strong>${Math.round(withSlack)} mm</strong><br>
|
||
Bestelllaenge: <strong>${recommended.toFixed(2)} m</strong>
|
||
`;
|
||
}
|
||
|
||
function renderValidation() {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
return;
|
||
}
|
||
|
||
const notes = [];
|
||
const usedU = state.placedItems.reduce((sum, item) => {
|
||
const component = getComponent(item.componentId);
|
||
return sum + (component?.heightU ?? 0);
|
||
}, 0);
|
||
const usedWeight = state.placedItems.reduce((sum, item) => {
|
||
const component = getComponent(item.componentId);
|
||
return sum + (component?.weightKg ?? 0);
|
||
}, 0);
|
||
|
||
if (usedU <= rack.totalU) {
|
||
notes.push({ className: "ok", text: `U-Belegung ist gueltig. ${rack.totalU - usedU}U frei.` });
|
||
} else {
|
||
notes.push({ className: "warn", text: "Rack ist ueberbelegt." });
|
||
}
|
||
|
||
if (usedWeight <= rack.maxWeightKg) {
|
||
notes.push({ className: "ok", text: `Gewicht innerhalb der Rack-Grenze (${usedWeight.toFixed(1)} kg).` });
|
||
} else {
|
||
notes.push({ className: "warn", text: `Gewicht ueberschreitet die Rack-Grenze von ${rack.maxWeightKg} kg.` });
|
||
}
|
||
|
||
const tooDeep = state.placedItems
|
||
.map((item) => ({ item, component: getComponent(item.componentId) }))
|
||
.filter(({ component }) => component && component.depthMm > rack.usableDepthMm);
|
||
|
||
if (tooDeep.length === 0) {
|
||
notes.push({ className: "ok", text: "Keine Tiefenkonflikte erkannt." });
|
||
} else {
|
||
tooDeep.forEach(({ component }) => {
|
||
notes.push({ className: "warn", text: `${component.name} ist tiefer als das Rack erlaubt.` });
|
||
});
|
||
}
|
||
|
||
ui.validationOutput.innerHTML = notes.map((note) => `<li class="${note.className}">${escapeHtml(note.text)}</li>`).join("");
|
||
}
|
||
|
||
function importPluginPack(event) {
|
||
const file = event.target.files?.[0];
|
||
if (!file) {
|
||
return;
|
||
}
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
try {
|
||
const payload = JSON.parse(String(reader.result || "{}"));
|
||
validatePluginPack(payload);
|
||
const imported = payload.components.map((component, index) => ({
|
||
...component,
|
||
id: component.id || `plugin-${Date.now()}-${index}`,
|
||
}));
|
||
state.components = deduplicateComponents([...state.components, ...imported]);
|
||
renderAll();
|
||
ui.pluginInput.value = "";
|
||
alert(`Plugin-Pack "${payload.name}" importiert.`);
|
||
} catch (error) {
|
||
alert(`Plugin-Import fehlgeschlagen: ${error.message}`);
|
||
}
|
||
};
|
||
reader.readAsText(file);
|
||
}
|
||
|
||
function validatePluginPack(payload) {
|
||
if (!payload || typeof payload !== "object") {
|
||
throw new Error("Ungueltiges JSON.");
|
||
}
|
||
["manifestVersion", "name", "version", "components"].forEach((key) => {
|
||
if (!(key in payload)) {
|
||
throw new Error(`Pflichtfeld fehlt: ${key}`);
|
||
}
|
||
});
|
||
if (!Array.isArray(payload.components) || payload.components.length === 0) {
|
||
throw new Error("Plugin enthaelt keine Komponenten.");
|
||
}
|
||
payload.components.forEach((component) => {
|
||
["name", "partNumber", "rackStandard", "heightU", "depthMm", "priceNet", "currency"].forEach((key) => {
|
||
if (!(key in component)) {
|
||
throw new Error(`Komponente unvollstaendig: ${component.name || "unbekannt"} (${key} fehlt)`);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
async function copyBomCsv() {
|
||
const rows = [["quantity", "manufacturer", "partNumber", "name", "unitPrice", "currency", "totalPrice"]];
|
||
const aggregated = new Map();
|
||
|
||
state.placedItems.forEach((item) => {
|
||
const component = getComponent(item.componentId);
|
||
if (!component) {
|
||
return;
|
||
}
|
||
const key = component.partNumber;
|
||
if (!aggregated.has(key)) {
|
||
aggregated.set(key, { quantity: 0, component });
|
||
}
|
||
aggregated.get(key).quantity += 1;
|
||
});
|
||
|
||
aggregated.forEach(({ quantity, component }) => {
|
||
rows.push([
|
||
String(quantity),
|
||
component.manufacturer,
|
||
component.partNumber,
|
||
component.name,
|
||
String(component.priceNet),
|
||
component.currency,
|
||
String(quantity * component.priceNet),
|
||
]);
|
||
});
|
||
|
||
const csv = rows.map((row) => row.map(csvEscape).join(",")).join("\n");
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(csv);
|
||
ui.exportBom.textContent = "CSV kopiert";
|
||
window.setTimeout(() => {
|
||
ui.exportBom.textContent = "CSV kopieren";
|
||
}, 1600);
|
||
} catch (error) {
|
||
console.error(error);
|
||
alert("CSV konnte nicht in die Zwischenablage kopiert werden.");
|
||
}
|
||
}
|
||
|
||
function findFirstFreePosition(heightU) {
|
||
const rack = getCurrentRackTemplate();
|
||
if (!rack) {
|
||
return null;
|
||
}
|
||
|
||
for (let start = 1; start <= rack.totalU - heightU + 1; start += 1) {
|
||
const blocked = state.placedItems.some((item) => {
|
||
const component = getComponent(item.componentId);
|
||
return component && rangesOverlap(start, heightU, item.startU, component.heightU);
|
||
});
|
||
if (!blocked) {
|
||
return start;
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
function rangesOverlap(startA, heightA, startB, heightB) {
|
||
const endA = startA + heightA - 1;
|
||
const endB = startB + heightB - 1;
|
||
return startA <= endB && startB <= endA;
|
||
}
|
||
|
||
function getCurrentRackTemplate() {
|
||
return state.bootstrap?.rackTemplates.find((template) => template.id === state.rackTemplateId) ?? null;
|
||
}
|
||
|
||
function getComponent(componentId) {
|
||
return state.components.find((component) => component.id === componentId) ?? null;
|
||
}
|
||
|
||
function deduplicateComponents(components) {
|
||
const byId = new Map();
|
||
components.forEach((component) => {
|
||
byId.set(component.id, component);
|
||
});
|
||
return Array.from(byId.values());
|
||
}
|
||
|
||
function estimateSideAllowance(fromComponent, toComponent) {
|
||
const fromSide = fromComponent.ports?.[0]?.side ?? "front";
|
||
const toSide = toComponent.ports?.[0]?.side ?? "front";
|
||
return fromSide === toSide ? 160 : 420;
|
||
}
|
||
|
||
function recommendCableLength(lengthMm) {
|
||
const options = [0.25, 0.5, 1, 1.5, 2, 3, 5, 7.5, 10];
|
||
const meters = lengthMm / 1000;
|
||
return options.find((option) => option >= meters) ?? Math.ceil(meters);
|
||
}
|
||
|
||
function formatCurrency(value, currency) {
|
||
return new Intl.NumberFormat("de-DE", {
|
||
style: "currency",
|
||
currency: currency || "EUR",
|
||
maximumFractionDigits: 0,
|
||
}).format(value);
|
||
}
|
||
|
||
function escapeHtml(value) {
|
||
return String(value)
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """)
|
||
.replaceAll("'", "'");
|
||
}
|
||
|
||
function csvEscape(value) {
|
||
const stringValue = String(value ?? "");
|
||
if (stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n")) {
|
||
return `"${stringValue.replaceAll('"', '""')}"`;
|
||
}
|
||
return stringValue;
|
||
}
|