Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: combine all features from both codebases - mobile dashboard + layer panel + notifications + shares + all fixes

Browse Source
This commit is contained in:
Leopoldadmin
2026-07-04 16:43:55 +02:00
parent 0606dbb501
commit be62470b53
79 changed files with 9562 additions and 3132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/StatusBar.tsx
+36 -9
View File
@@ -1,49 +1,76 @@
import React from 'react';
import type { StatusBarProps } from '../types/ui.types';
import { formatCoordinate, type UnitType } from '../utils/format';
const StatusBar: React.FC<StatusBarProps> = ({
snapEnabled, orthoEnabled, polarEnabled, gridEnabled,
cursorX, cursorY, activeLayer, activeTool, onlineCount,
onToggleSnap, onToggleOrtho, onTogglePolar, onToggleGrid, seatCount,
unit = 'mm', scaleFactor = 1, onUnitChange,
}) => {
const xDisplay = formatCoordinate(cursorX, unit, scaleFactor);
const yDisplay = formatCoordinate(cursorY, unit, scaleFactor);
return (
<footer className="statusbar" role="status">
<div className={`status-item${snapEnabled ? ' active' : ''}`} title="Snap-Modus (F3)" aria-pressed={snapEnabled} onClick={onToggleSnap}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
<span>SNAP</span>
</div>
<div className={`status-item${orthoEnabled ? ' active' : ''}`} title="Ortho-Modus (F8)" aria-pressed={orthoEnabled} onClick={onToggleOrtho}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
<span>ORTHO</span>
</div>
<div className={`status-item hide-mobile${polarEnabled ? ' active' : ''}`} title="Polar-Tracking" aria-pressed={polarEnabled} onClick={onTogglePolar}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="16 12 12 8 8 12"/><line x1="12" y1="2" x2="12" y2="16"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="16 12 12 8 8 12"/><line x1="12" y1="2" x2="12" y2="16"/></svg>
<span>POLAR</span>
</div>
<div className={`status-item${gridEnabled ? ' active' : ''}`} title="Grid anzeigen (F7)" aria-pressed={gridEnabled} onClick={onToggleGrid}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
<span>GRID</span>
</div>
<div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
<span>X: {cursorX.toFixed(3)} m</span>
<span>X: {xDisplay} {unit}</span>
</div>
<div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
<span>Y: {cursorY.toFixed(3)} m</span>
<span>Y: {yDisplay} {unit}</span>
</div>
<div className="status-item hide-mobile" title="Layer">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
<span>{activeLayer}</span>
</div>
<div className="status-item hide-mobile" title="Werkzeug">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
<span>{activeTool}</span>
</div>
{seatCount !== undefined && seatCount > 0 && (
<div className="status-item hide-mobile" title="Stuhl-Anzahl" style={{ fontFamily: 'var(--font-mono)' }}>
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="1"/><line x1="6" y1="7" x2="18" y2="7"/></svg>
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="3" width="12" height="18" rx="1"/><line x1="6" y1="7" x2="18" y2="7"/></svg>
<span>{seatCount} Stühle</span>
</div>
)}
{onUnitChange && (
<div className="status-item" title="Maßeinheit">
<select
value={unit}
onChange={(e) => onUnitChange(e.target.value as UnitType)}
style={{
background: 'transparent',
color: 'inherit',
border: '1px solid var(--color-border)',
borderRadius: '3px',
padding: '1px 4px',
fontSize: '11px',
cursor: 'pointer',
}}
aria-label="Maßeinheit auswählen"
>
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="m">m</option>
</select>
</div>
)}
<div className="status-item" title={`${onlineCount} anderer Nutzer online`}>
<span className="status-dot"></span>
<span>Online · {onlineCount} weiterer</span>