Anmeldung und Kalendar

2025-07-15 20:38:04 +02:00
parent 2a34091404
commit 1cc8951c12
51 changed files with 19961 additions and 177 deletions
--- a/components/CalendarSync.tsx
+++ b/components/CalendarSync.tsx
@@ -0,0 +1,135 @@
+import { Picker } from "@react-native-picker/picker";
+import * as Calendar from "expo-calendar";
+import * as SQLite from "expo-sqlite";
+import React, { useEffect, useState } from "react";
+import { FlatList, StyleSheet, Text, View } from "react-native";
+
+const db = SQLite.openDatabaseSync("events.db");
+
+export interface EventItem {
+  id: string;
+  title: string;
+  startDate: string;
+  endDate: string;
+}
+
+const CalendarSync: React.FC = () => {
+  const [events, setEvents] = useState<EventItem[]>([]);
+  const [selectedYear, setSelectedYear] = useState<number>(
+    new Date().getFullYear()
+  );
+
+  // Initialisierung: SQLite laden, dann Kalender synchronisieren
+  useEffect(() => {
+    initDB();
+    loadEventsFromDB();
+    syncCalendarEvents(selectedYear);
+  }, [selectedYear]);
+
+  // Erstellt die Tabelle, falls nicht vorhanden
+  const initDB = async () => {
+    await db.execAsync(
+      "CREATE TABLE IF NOT EXISTS events (id TEXT PRIMARY KEY, title TEXT, startDate TEXT, endDate TEXT);"
+    );
+  };
+
+  const loadEventsFromDB = async () => {
+    const stmt = await db.prepareAsync("SELECT * FROM events;");
+    const loadedEvents: EventItem[] = [];
+    const result = await stmt.executeAsync([]);
+    for await (const row of result) {
+      loadedEvents.push(row as EventItem);
+    }
+    setEvents(loadedEvents);
+    await stmt.finalizeAsync();
+  };
+
+  // Synchronisiert Kalender-Events und speichert sie in SQLite
+  const syncCalendarEvents = async (year: number) => {
+    const perm = await Calendar.requestCalendarPermissionsAsync();
+    if (!perm.granted) return;
+    const calendars = await Calendar.getCalendarsAsync();
+    const start = new Date(year, 0, 1);
+    const end = new Date(year, 11, 31, 23, 59, 59);
+    let allEvents: EventItem[] = [];
+    for (const cal of calendars) {
+      const calEvents = await Calendar.getEventsAsync([cal.id], start, end);
+      allEvents = allEvents.concat(
+        calEvents.map((e) => ({
+          id: e.id,
+          title: e.title || "(Kein Titel)",
+          startDate:
+            typeof e.startDate === "string"
+              ? e.startDate
+              : new Date(e.startDate).toISOString(),
+          endDate:
+            typeof e.endDate === "string"
+              ? e.endDate
+              : new Date(e.endDate).toISOString(),
+        }))
+      );
+    }
+    // Speichern in SQLite
+    await db.execAsync("DELETE FROM events;");
+    for (const ev of allEvents) {
+      await db.execAsync(
+        `INSERT OR REPLACE INTO events (id, title, startDate, endDate) VALUES ('${
+          ev.id
+        }', '${ev.title.replace(/'/g, "''")}', '${ev.startDate}', '${
+          ev.endDate
+        }');`
+      );
+    }
+    await loadEventsFromDB();
+  };
+
+  // UI
+  const renderItem = ({ item }: { item: EventItem }) => (
+    <View style={styles.item}>
+      <Text style={styles.title}>{item.title}</Text>
+      <Text style={styles.time}>
+        {new Date(item.startDate).toLocaleString()} -{" "}
+        {new Date(item.endDate).toLocaleString()}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Kalender Events ({selectedYear})</Text>
+      <Picker
+        selectedValue={selectedYear}
+        style={{ height: 50, width: 180, marginBottom: 16 }}
+        onValueChange={(year) => setSelectedYear(year)}
+      >
+        {[...Array(10)].map((_, i) => {
+          const year = new Date().getFullYear() - 5 + i;
+          return (
+            <Picker.Item key={year} label={year.toString()} value={year} />
+          );
+        })}
+      </Picker>
+      <FlatList
+        data={events}
+        keyExtractor={(item) => item.id}
+        renderItem={renderItem}
+        ListEmptyComponent={<Text>Keine Events gefunden.</Text>}
+      />
+    </View>
+  );
+};
+
+export default CalendarSync;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16, backgroundColor: "#fff" },
+  header: { fontSize: 20, fontWeight: "bold", marginBottom: 16 },
+  item: {
+    marginBottom: 12,
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: "#f2f2f2",
+  },
+  title: { fontSize: 16, fontWeight: "600" },
+  time: { fontSize: 14, color: "#555" },
+});