initial feature/react-migration commit

2025-06-22 20:57:21 +00:00
parent 6653f3cf72
commit 76f6baf533
66 changed files with 12038 additions and 91 deletions
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -0,0 +1,113 @@
+// import 'react-app-polyfill/ie11'; // optional, falls benötigt
+import './App.css';
+import React from 'react';
+import {
+  ScheduleComponent,
+  Day,
+  Week,
+  WorkWeek,
+  Month,
+  Agenda,
+  TimelineViews,
+  TimelineMonth,
+  Inject,
+  ViewsDirective,
+  ViewDirective,
+  ResourcesDirective,
+  ResourceDirective,
+} from '@syncfusion/ej2-react-schedule';
+import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
+import * as de from 'cldr-data/main/de/ca-gregorian.json';
+import * as numbers from 'cldr-data/main/de/numbers.json';
+import * as timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';
+import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
+
+// CLDR-Daten laden
+loadCldr(
+  (de as unknown as { default: object }).default,
+  (numbers as unknown as { default: object }).default,
+  (timeZoneNames as unknown as { default: object }).default,
+  (numberingSystems as unknown as { default: object }).default
+);
+
+// Deutsche Lokalisierung für den Scheduler
+L10n.load({
+  de: {
+    schedule: {
+      day: 'Tag',
+      week: 'Woche',
+      workWeek: 'Arbeitswoche',
+      month: 'Monat',
+      agenda: 'Agenda',
+      today: 'Heute',
+      noEvents: 'Keine Termine',
+    },
+  },
+});
+
+// Kultur setzen
+setCulture('de');
+
+// Ressourcen-Daten
+const resources = [
+  { text: 'Raum A', id: 1, color: '#1aaa55' },
+  { text: 'Raum B', id: 2, color: '#357cd2' },
+  { text: 'Raum C', id: 3, color: '#7fa900' },
+];
+
+// Dummy-Termine generieren
+const now = new Date();
+const appointments = Array.from({ length: 10 }).map((_, i) => {
+  const dayOffset = Math.floor(i * 1.4); // verteilt auf 14 Tage
+  const start = new Date(now);
+  start.setDate(now.getDate() + dayOffset);
+  start.setHours(9 + (i % 4), 0, 0, 0);
+  const end = new Date(start);
+  end.setHours(start.getHours() + 1);
+
+  return {
+    Id: i + 1,
+    Subject: `Termin ${i + 1}`,
+    StartTime: start,
+    EndTime: end,
+    ResourceId: (i % 3) + 1,
+    Location: resources[i % 3].text,
+  };
+});
+
+const App: React.FC = () => {
+  return (
+    <div className="p-8 bg-gray-100 min-h-screen">
+      <h1 className="text-2xl font-bold mb-4">Infoscreen Kalendersteuerung</h1>
+      <ScheduleComponent
+        height="650px"
+        locale="de"
+        currentView="TimelineWeek"
+        eventSettings={{ dataSource: appointments }}
+        group={{ resources: ['Räume'] }}
+      >
+        <ViewsDirective>
+          <ViewDirective option="Week" />
+          <ViewDirective option="TimelineWeek" />
+          <ViewDirective option="Month" />
+          <ViewDirective option="TimelineMonth" />
+        </ViewsDirective>
+        <ResourcesDirective>
+          <ResourceDirective
+            field="ResourceId"
+            title="Räume"
+            name="Räume"
+            allowMultiple={false}
+            dataSource={resources}
+            textField="text"
+            idField="id"
+            colorField="color"
+          />
+        </ResourcesDirective>
+        <Inject services={[Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth]} />
+      </ScheduleComponent>
+    </div>
+  );
+};
+
+export default App;