added vehicles and vehicles extra, dynamic tables for entities, dynamic dropdowns with overlay for selecting and manage data

2026-02-10 17:32:33 +02:00
parent ed35a90cc0
commit 6a42099169
60 changed files with 4845 additions and 81 deletions
@@ -0,0 +1,145 @@
+import React from 'react';
+import './Toolbar.css';
+
+function Toolbar({
+  toolMode,
+  onToolChange,
+  borderStyle,
+  onBorderStyleChange,
+  previewMode = false,
+  onTogglePreview,
+  onConfigureAPI,
+  onSave,
+  onLoad,
+  reportName,
+  onReportNameChange,
+  isSaving = false
+}) {
+  return (
+    <div className="toolbar">
+      <div className="toolbar-group">
+        <button
+          className={`toolbar-button ${toolMode === 'select' ? 'active' : ''}`}
+          onClick={() => onToolChange('select')}
+          title="Select Tool"
+        >
+          ↖️ Select
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addText' ? 'active' : ''}`}
+          onClick={() => onToolChange('addText')}
+          title="Add Text Field"
+        >
+          T Add Text
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addDBText' ? 'active' : ''}`}
+          onClick={() => onToolChange('addDBText')}
+          title="Add Database Text Field"
+        >
+          DB DB Text
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addFrame' ? 'active' : ''}`}
+          onClick={() => onToolChange('addFrame')}
+          title="Add Frame"
+        >
+          ▭ Add Frame
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addHLine' ? 'active' : ''}`}
+          onClick={() => onToolChange('addHLine')}
+          title="Add Horizontal Line"
+        >
+          ─ H-Line
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addVLine' ? 'active' : ''}`}
+          onClick={() => onToolChange('addVLine')}
+          title="Add Vertical Line"
+        >
+          │ V-Line
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'drawTable' ? 'active' : ''}`}
+          onClick={() => onToolChange('drawTable')}
+          title="Draw Table (D)"
+        >
+          ⊞ Draw
+        </button>
+        <button
+          className={`toolbar-button ${toolMode === 'addBand' ? 'active' : ''}`}
+          onClick={() => onToolChange('addBand')}
+          title="Add Band (B)"
+        >
+          ▦ Band
+        </button>
+      </div>
+      <div className="toolbar-separator"></div>
+      <div className="toolbar-group">
+        <label className="toolbar-label">Line Style:</label>
+        <button
+          className={`toolbar-button ${borderStyle === 'single' ? 'active' : ''}`}
+          onClick={() => onBorderStyleChange('single')}
+          title="Single Line"
+        >
+          ─ Single
+        </button>
+        <button
+          className={`toolbar-button ${borderStyle === 'double' ? 'active' : ''}`}
+          onClick={() => onBorderStyleChange('double')}
+          title="Double Line"
+        >
+          ═ Double
+        </button>
+      </div>
+      <div className="toolbar-separator"></div>
+      <div className="toolbar-group">
+        <button
+          className={`toolbar-button ${previewMode ? 'active' : ''}`}
+          onClick={onTogglePreview}
+          title="Toggle Preview Mode"
+        >
+          {previewMode ? '👁️ Design Mode' : '📝 Preview Mode'}
+        </button>
+        {onConfigureAPI && (
+          <button
+            className="toolbar-button"
+            onClick={onConfigureAPI}
+            title="Configure API Endpoint"
+          >
+            ⚙️ Configure
+          </button>
+        )}
+      </div>
+      <div className="toolbar-separator"></div>
+      <div className="toolbar-group toolbar-group--file">
+        <input
+          type="text"
+          className="toolbar-report-name"
+          value={reportName || ''}
+          onChange={e => onReportNameChange && onReportNameChange(e.target.value)}
+          placeholder="Report name"
+          title="Report name"
+        />
+        <button
+          className="toolbar-button"
+          onClick={onSave}
+          disabled={isSaving}
+          title="Save Report"
+        >
+          {isSaving ? '...' : '💾 Save'}
+        </button>
+        <button
+          className="toolbar-button"
+          onClick={onLoad}
+          title="Load Report"
+        >
+          📂 Load
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Toolbar;