wip

2026-01-14 18:02:47 +01:00
parent 2c41f5619b
commit 558bcbd946
68 changed files with 5490 additions and 4032 deletions
--- a/scripts/pdf/react-pdf/DatasheetDocument.tsx
+++ b/scripts/pdf/react-pdf/DatasheetDocument.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Document, Image, Page, Text, View } from '@react-pdf/renderer';
+
+import type { DatasheetModel, DatasheetVoltageTable } from '../model/types';
+import { styles } from './styles';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { Section } from './components/Section';
+import { KeyValueGrid } from './components/KeyValueGrid';
+import { DenseTable } from './components/DenseTable';
+
+type Assets = {
+  logoDataUrl: string | null;
+  heroDataUrl: string | null;
+  qrDataUrl: string | null;
+};
+
+function chunk<T>(arr: T[], size: number): T[][] {
+  if (size <= 0) return [arr];
+  const out: T[][] = [];
+  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
+  return out;
+}
+
+export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets }): React.ReactElement {
+  const { model, assets } = props;
+  const headerTitle = model.labels.datasheet;
+  const footerLeft = `${model.labels.sku}: ${model.product.sku}`;
+
+  const firstColLabel = model.locale === 'de' ? 'Adern & Querschnitt' : 'Cores & cross-section';
+
+  const tablePages: Array<{ table: DatasheetVoltageTable; rows: DatasheetVoltageTable['rows'] }> =
+    model.voltageTables.flatMap(t => {
+      const perPage = 30;
+      const chunks = chunk(t.rows, perPage);
+      return chunks.map(rows => ({ table: t, rows }));
+    });
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
+        <Footer leftText={footerLeft} locale={model.locale} />
+
+        <Text style={styles.h1}>{model.product.name}</Text>
+        {model.product.categoriesLine ? <Text style={styles.subhead}>{model.product.categoriesLine}</Text> : null}
+
+        <View style={styles.heroBox}>
+          {assets.heroDataUrl ? (
+            <Image src={assets.heroDataUrl} style={styles.heroImage} />
+          ) : (
+            <Text style={styles.noImage}>{model.labels.noImage}</Text>
+          )}
+        </View>
+
+        {model.product.descriptionText ? (
+          <Section title={model.labels.description}>
+            <Text style={styles.body}>{model.product.descriptionText}</Text>
+          </Section>
+        ) : null}
+
+        {model.technicalItems.length ? (
+          <Section title={model.labels.technicalData}>
+            <KeyValueGrid items={model.technicalItems} />
+          </Section>
+        ) : null}
+      </Page>
+
+      {tablePages.map((p, index) => (
+        <Page key={`${p.table.voltageLabel}-${index}`} size="A4" style={styles.page}>
+          <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
+          <Footer leftText={footerLeft} locale={model.locale} />
+
+          <Section title={`${model.labels.crossSection} — ${p.table.voltageLabel}`}>
+            {p.table.metaItems.length ? <KeyValueGrid items={p.table.metaItems} /> : null}
+          </Section>
+
+          <DenseTable table={{ columns: p.table.columns, rows: p.rows }} firstColLabel={firstColLabel} />
+        </Page>
+      ))}
+    </Document>
+  );
+}
+