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/RemindersList.tsx
+++ b/components/RemindersList.tsx
@@ -0,0 +1,195 @@
+import * as SQLite from "expo-sqlite";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  FlatList,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+const db = SQLite.openDatabaseSync("reminders.db");
+
+export interface Reminder {
+  id: string;
+  title: string;
+  description: string;
+  date: string;
+}
+
+const RemindersList: React.FC = () => {
+  const [reminders, setReminders] = useState<Reminder[]>([]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [date, setDate] = useState("");
+
+  useEffect(() => {
+    initDB();
+    loadReminders();
+  }, []);
+
+  const initDB = async () => {
+    await db.execAsync(
+      "CREATE TABLE IF NOT EXISTS reminders (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, description TEXT, date TEXT);"
+    );
+  };
+
+  const loadReminders = async () => {
+    const stmt = await db.prepareAsync(
+      "SELECT * FROM reminders ORDER BY date ASC;"
+    );
+    const loaded: Reminder[] = [];
+    const result = await stmt.executeAsync([]);
+    for await (const row of result) {
+      loaded.push(row as Reminder);
+    }
+    setReminders(loaded);
+    await stmt.finalizeAsync();
+  };
+
+  const saveReminder = async () => {
+    if (!title || !date) return;
+    await db.execAsync(
+      `INSERT INTO reminders (title, description, date) VALUES ('${title.replace(/'/g, "''")}', '${description.replace(/'/g, "''")}', '${date}');`
+    );
+    setTitle("");
+    setDescription("");
+    setDate("");
+    setModalVisible(false);
+    await loadReminders();
+  };
+
+  const renderItem = ({ item }: { item: Reminder }) => (
+    <View style={styles.item}>
+      <Text style={styles.title}>{item.title}</Text>
+      <Text style={styles.desc}>{item.description}</Text>
+      <Text style={styles.date}>{new Date(item.date).toLocaleString()}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.addButton}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles.addButtonText}>＋</Text>
+      </TouchableOpacity>
+      <FlatList
+        data={reminders}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={renderItem}
+        ListEmptyComponent={
+          <Text style={{ textAlign: "center" }}>Keine Erinnerungen.</Text>
+        }
+      />
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Neue Erinnerung</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="Titel"
+              value={title}
+              onChangeText={setTitle}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Beschreibung"
+              value={description}
+              onChangeText={setDescription}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Datum (YYYY-MM-DD HH:mm)"
+              value={date}
+              onChangeText={setDate}
+            />
+            <View style={styles.modalButtons}>
+              <Button
+                title="Abbrechen"
+                onPress={() => setModalVisible(false)}
+              />
+              <Button title="Speichern" onPress={saveReminder} />
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default RemindersList;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#fff" },
+  addButton: {
+    position: "absolute",
+    top: Platform.OS === "ios" ? 50 : 20,
+    right: 30,
+    zIndex: 10,
+    backgroundColor: "#007AFF",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  addButtonText: { color: "#fff", fontSize: 32, fontWeight: "bold" },
+  item: {
+    margin: 12,
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: "#f2f2f2",
+  },
+  title: { fontSize: 16, fontWeight: "600" },
+  desc: { fontSize: 14, color: "#555", marginTop: 4 },
+  date: { fontSize: 13, color: "#888", marginTop: 8 },
+  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,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 12,
+    fontSize: 16,
+  },
+  modalButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 10,
+  },
+});