gitea-enwelo-jba
/
bwscheddebrock_trassenplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Update Sicherungsstand styling and optimize PDF export

This commit is contained in:
Johannes Baumeister 2026-04-22 11:21:51 +02:00
parent 10381a86f2
commit 24f376bc60
1 changed files with 97 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
index.html
View File

@ -132,11 +132,18 @@
width: 100%; width: 100%;
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
font-size: 12px; font-size: 13px;
background: rgba(0, 0, 0, 0.2); background: #eee;
color: white; color: #333;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
outline: none; outline: none;
cursor: pointer;
font-weight: 700;
transition: all 0.2s;
}
.status-select:hover {
filter: brightness(0.95);
} }
.owner-card { .owner-card {
@ -612,13 +619,18 @@
style="font-size: 10px; color: var(--info); opacity: 0.9; margin-left: 30px; margin-top: -2px; font-weight: 600;">v1.0.5</span> style="font-size: 10px; color: var(--info); opacity: 0.9; margin-left: 30px; margin-top: -2px; font-weight: 600;">v1.0.5</span>
</div> </div>
<div id="quick-toggles" style="padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; margin-top: 8px;"> <div id="quick-toggles" style="padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 8px; display: flex; flex-direction: column; gap: 8px;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; font-size: 12px; font-weight: 600; padding: 4px 0;"> <div style="display: flex; align-items: center; justify-content: space-between;">
<input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 14px; height: 14px; cursor: pointer;"> <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; font-size: 12px; font-weight: 600;">
<span style="display: flex; align-items: center; gap: 6px;"> <input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 14px; height: 14px; cursor: pointer;">
<i data-lucide="shield-check" style="width: 16px; color: var(--info);"></i> Sicherungsstand aktiv <span style="display: flex; align-items: center; gap: 6px;">
</span> <i data-lucide="shield-check" style="width: 16px; color: var(--info);"></i> Sicherungsstand aktiv
</label> </span>
</label>
<button id="btn-pdf-export" class="btn" title="PDF Karte erzeugen" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 4px 8px; font-size: 11px; border-radius: 6px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="file-text" style="width: 14px;"></i> PDF
</button>
</div>
</div> </div>
<div id="owner-search-container" style="margin-top: 8px;"> <div id="owner-search-container" style="margin-top: 8px;">
<input type="text" class="search-box" id="owner-search" placeholder="Eigentümer suchen..." <input type="text" class="search-box" id="owner-search" placeholder="Eigentümer suchen..."
@ -707,10 +719,6 @@
</button> </button>
</div> </div>
</div> </div>
<hr>
<button class="btn" id="btn-pdf-export-alt">
<i data-lucide="file-text" style="width: 16px;"></i> Als PDF exportieren
</button>
</div> </div>
<button class="btn btn-outline" id="btn-toggle-options" <button class="btn btn-outline" id="btn-toggle-options"
@ -1669,6 +1677,10 @@
card.style.boxShadow = '0 0 10px rgba(255, 238, 0, 0.4)'; card.style.boxShadow = '0 0 10px rgba(255, 238, 0, 0.4)';
} }
const statusKey = getStatusKey(f.properties.status || 'Unbekannt');
const statusColor = STATUS_CONFIG[statusKey] || 'transparent';
const isStatusTransparent = statusColor === 'transparent';
card.innerHTML = ` card.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: flex-start;"> <div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div> <div>
@ -1685,12 +1697,14 @@
</div> </div>
</div> </div>
${currentNote ? `<div style="font-size: 11px; margin-top: 6px; padding: 6px; background: rgba(0,75,80,0.05); border-radius: 4px; border-left: 2px solid var(--corporate-teal); color: #333; font-style: italic;">${currentNote.replace(/\n/g, '<br>')}</div>` : ''} ${currentNote ? `<div style="font-size: 11px; margin-top: 6px; padding: 6px; background: rgba(0,75,80,0.05); border-radius: 4px; border-left: 2px solid var(--corporate-teal); color: #333; font-style: italic;">${currentNote.replace(/\n/g, '<br>')}</div>` : ''}
<select class="status-select" data-id="${f.id}" style="margin-top: 8px;"> <div style="margin-top: 8px; position: relative;">
${STATUS_ORDER.map(s => { <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: ${isStatusTransparent ? 'transparent' : statusColor}; border: ${isStatusTransparent ? '1px dashed #64748b' : '1px solid rgba(0,0,0,0.2)'}; pointer-events: none;"></span>
const current = getStatusKey(f.properties.status || 'Unbekannt'); <select class="status-select" data-id="${f.id}" style="margin: 0; padding-left: 28px; background-color: ${isStatusTransparent ? '#f1f5f9' : statusColor}; color: #000; border-color: ${isStatusTransparent ? '#cbd5e1' : 'rgba(0,0,0,0.1)'};">
return `<option value="${s}" ${current === s ? 'selected' : ''}>${s}</option>`; ${STATUS_ORDER.map(s => {
}).join('')} return `<option value="${s}" ${statusKey === s ? 'selected' : ''} style="background-color: ${STATUS_CONFIG[s] === 'transparent' ? '#fff' : STATUS_CONFIG[s]}; color: #000;">${s}</option>`;
</select> }).join('')}
</select>
</div>
`; `;
card.addEventListener('click', (e) => { card.addEventListener('click', (e) => {
@ -3120,51 +3134,85 @@
doc.setTextColor(100, 100, 100); doc.setTextColor(100, 100, 100);
doc.text(`Datum: ${new Date().toLocaleDateString('de-DE')} | Projektstand: v1.0.4`, margin + 50, margin + 16); doc.text(`Datum: ${new Date().toLocaleDateString('de-DE')} | Projektstand: v1.0.4`, margin + 50, margin + 16);
// 3. North Arrow // 3. North Arrow - REMOVED per user request
const nx = pageWidth - margin - 15;
const ny = margin + 12;
doc.setDrawColor(0, 0, 0);
doc.line(nx, ny, nx, ny + 12);
doc.line(nx, ny, nx - 4, ny + 4);
doc.line(nx, ny, nx + 4, ny + 4);
doc.text("N", nx - 1.5, ny - 3);
// 4. Legend // 4. Disclaimer
const legendX = margin + 5; doc.setFontSize(7);
const legendY = pageHeight - margin - 35; doc.setFont("helvetica", "italic");
doc.setTextColor(120, 120, 120);
const disclaimer = "Hinweis: Diese Karte wurde automatisch mit dem Planungstool generiert und vom Kunden erstellt.";
doc.text(disclaimer, pageWidth - margin, pageHeight - margin + 5, { align: 'right' });
// 5. Legend
const legendW = 70;
const legendH = 65;
const legendX = margin + 2;
const legendY = pageHeight - margin - legendH - 2;
// Background White Box for Legend
doc.setFillColor(255, 255, 255); doc.setFillColor(255, 255, 255);
doc.rect(legendX, legendY, 65, 35, 'F');
doc.setDrawColor(200, 200, 200); doc.setDrawColor(200, 200, 200);
doc.rect(legendX, legendY, 65, 35, 'S'); doc.rect(legendX, legendY, legendW, legendH, 'FD');
doc.setFontSize(9); doc.setFontSize(9);
doc.setFont("helvetica", "bold"); doc.setFont("helvetica", "bold");
doc.setTextColor(0, 0, 0); doc.setTextColor(0, 75, 80);
doc.text("Legende", legendX + 5, legendY + 7); doc.text("Legende", legendX + 5, legendY + 7);
let ly = legendY + 13; let ly = legendY + 13;
doc.setFont("helvetica", "normal"); doc.setFont("helvetica", "normal");
doc.setFontSize(8); doc.setFontSize(8);
doc.setFillColor(41, 149, 0); // Helper for status colors
doc.rect(legendX + 5, ly - 3, 4, 4, 'F'); const hexToRgb = (hex) => {
doc.text("Vertraglich gesichert", legendX + 12, ly); if (!hex || hex === 'transparent') return [255, 255, 255];
ly += 5; const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return [r, g, b];
};
doc.setFillColor(102, 230, 89); // Render all statuses from config
doc.rect(legendX + 5, ly - 3, 4, 4, 'F'); STATUS_ORDER.forEach(label => {
doc.text("Zustimmung liegt vor", legendX + 12, ly); const color = STATUS_CONFIG[label];
ly += 5; const rgb = hexToRgb(color);
if (color === 'transparent') {
doc.setDrawColor(150, 150, 150);
doc.setLineDash([0.5, 0.5], 0);
doc.rect(legendX + 5, ly - 3, 4, 4, 'S');
doc.setLineDash([], 0);
} else {
doc.setFillColor(rgb[0], rgb[1], rgb[2]);
doc.rect(legendX + 5, ly - 3, 4, 4, 'F');
doc.setDrawColor(0, 0, 0);
doc.setLineWidth(0.1);
doc.rect(legendX + 5, ly - 3, 4, 4, 'S');
}
doc.setTextColor(0, 0, 0);
doc.text(label, legendX + 12, ly);
ly += 4.5;
});
doc.setDrawColor(204, 163, 0); // Separator
doc.line(legendX + 5, ly - 1, legendX + 9, ly - 1); doc.setDrawColor(230, 230, 230);
doc.line(legendX + 5, ly - 1, legendX + legendW - 5, ly - 1);
ly += 4.5;
// Technical Layers
// Geplante Trasse
doc.setDrawColor(204, 163, 0); // #cca300
doc.setLineWidth(1.0);
doc.line(legendX + 5, ly - 1, legendX + 10, ly - 1);
doc.setTextColor(0, 0, 0);
doc.text("Geplante Trasse", legendX + 12, ly); doc.text("Geplante Trasse", legendX + 12, ly);
ly += 5; ly += 4.5;
// HDD-Bohrung
doc.setDrawColor(0, 0, 0); doc.setDrawColor(0, 0, 0);
doc.setLineDash([1, 1], 0); doc.setLineWidth(1.5);
doc.line(legendX + 5, ly - 1, legendX + 9, ly - 1); doc.line(legendX + 5, ly - 1, legendX + 10, ly - 1);
doc.setLineDash([], 0);
doc.text("HDD-Bohrung", legendX + 12, ly); doc.text("HDD-Bohrung", legendX + 12, ly);
doc.save(`Trassenplan_Export_${new Date().toISOString().split('T')[0]}.pdf`); doc.save(`Trassenplan_Export_${new Date().toISOString().split('T')[0]}.pdf`);