Eintrag in SQlite einfügen

app/(tabs)/_layout.tsx

@@ -1,12 +1,12 @@
-import { Tabs } from 'expo-router';
+import { Tabs } from "expo-router";
-import React from 'react';
+import React from "react";
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
 
-import { HapticTab } from '@/components/HapticTab';
+import { HapticTab } from "@/components/HapticTab";
-import { IconSymbol } from '@/components/ui/IconSymbol';
+import { IconSymbol } from "@/components/ui/IconSymbol";
-import TabBarBackground from '@/components/ui/TabBarBackground';
+import TabBarBackground from "@/components/ui/TabBarBackground";
-import { Colors } from '@/constants/Colors';
+import { Colors } from "@/constants/Colors";
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { useColorScheme } from "@/hooks/useColorScheme";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
@@ -14,30 +14,35 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
           ios: {
             // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
+            position: "absolute",
           },
           default: {},
         }),
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: "Home",
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="house.fill" color={color} />
+          ),
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="calendar"
         options={{
-          title: 'Explore',
+          title: "Kalender",
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="calendar" color={color} />
+          ),
         }}
       />
     </Tabs>

app/(tabs)/calendar.tsx

@@ -1,11 +1,15 @@
+import { Ionicons } from "@expo/vector-icons";
 import * as Calendar from "expo-calendar";
 import * as SQLite from "expo-sqlite";
 import React, { useEffect, useState } from "react";
 import {
+  Button,
   FlatList,
+  Modal,
   SafeAreaView,
   StyleSheet,
   Text,
+  TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -30,6 +34,10 @@ export default function CalendarTab() {
   const [calendarType, setCalendarType] = useState<"calendar" | "reminder">(
     "calendar"
   );
+  const [modalVisible, setModalVisible] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  const [newStart, setNewStart] = useState("");
+  const [newEnd, setNewEnd] = useState("");
 
   useEffect(() => {
     if (source === "sqlite") {
@@ -129,6 +137,21 @@ export default function CalendarTab() {
     }
   };
 
+  const addEventToDB = async () => {
+    if (!newTitle || !newStart || !newEnd) return;
+    await db.execAsync(
+      `INSERT INTO events (id, title, startDate, endDate) VALUES ('${Date.now()}', '${newTitle.replace(
+        /'/g,
+        "''"
+      )}', '${newStart}', '${newEnd}');`
+    );
+    setModalVisible(false);
+    setNewTitle("");
+    setNewStart("");
+    setNewEnd("");
+    await loadEventsFromDB();
+  };
+
   const renderItem = ({ item }: { item: EventItem }) => (
     <View style={styles.item}>
       <Text style={styles.title}>{item.title}</Text>
@@ -141,6 +164,20 @@ export default function CalendarTab() {
 
   return (
     <SafeAreaView style={styles.container}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          alignItems: "center",
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => setModalVisible(true)}
+          style={{ padding: 10 }}
+        >
+          <Ionicons name="add-circle" size={32} color="#007AFF" />
+        </TouchableOpacity>
+      </View>
       <View style={styles.switchRow}>
         <TouchableOpacity
           style={[
@@ -204,6 +241,49 @@ export default function CalendarTab() {
           source === "sqlite" ? loadEventsFromDB : loadEventsFromDevice
         }
       />
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.header}>Neuer SQLite-Eintrag</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="Titel"
+              value={newTitle}
+              onChangeText={setNewTitle}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Start (YYYY-MM-DD HH:mm)"
+              value={newStart}
+              onChangeText={setNewStart}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Ende (YYYY-MM-DD HH:mm)"
+              value={newEnd}
+              onChangeText={setNewEnd}
+            />
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                marginTop: 10,
+              }}
+            >
+              <Button
+                title="Abbrechen"
+                onPress={() => setModalVisible(false)}
+              />
+              <Button title="Speichern" onPress={addEventToDB} />
+            </View>
+          </View>
+        </View>
+      </Modal>
     </SafeAreaView>
   );
 }
@@ -237,4 +317,25 @@ const styles = StyleSheet.create({
   },
   activeButton: { backgroundColor: "#007AFF" },
   switchText: { color: "#333", fontWeight: "bold" },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContent: {
+    width: 320,
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 20,
+    elevation: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 12,
+    fontSize: 16,
+  },
 });

app/(tabs)/index.tsx

@@ -1,5 +1,6 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as LocalAuthentication from "expo-local-authentication";
+import { useRouter } from "expo-router";
 import * as SQLite from "expo-sqlite";
 import React, { useEffect, useState } from "react";
 import {
@@ -14,7 +15,6 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import CalendarSync from "../../components/CalendarSync";
 
 // Types
 interface User {
@@ -42,6 +42,7 @@ export default function AuthScreen() {
 
   // Database
   const [db, setDb] = useState<SQLite.SQLiteDatabase | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     initApp();
@@ -267,14 +268,10 @@ export default function AuthScreen() {
 
           <TouchableOpacity
             style={[styles.submitButton, { marginTop: 20 }]}
-            onPress={() => setShowCalendar((prev) => !prev)}
+            onPress={() => router.push("/calendar")}
           >
-            <Text style={styles.submitButtonText}>
+            <Text style={styles.submitButtonText}>Zum Kalender</Text>
-              {showCalendar ? "Kalender ausblenden" : "Kalender anzeigen"}
-            </Text>
           </TouchableOpacity>
-
-          {showCalendar && <CalendarSync />}
         </View>
       </SafeAreaView>
     );