serversettings erstellt

2024-09-19 09:09:36 +02:00
parent b63e55de52
commit 113face8bf
2 changed files with 198 additions and 75 deletions
--- a/screens/Login.tsx
+++ b/screens/Login.tsx
@@ -6,6 +6,7 @@ import ErrorBoundary from 'react-native-error-boundary';
 import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes';
 import Credits from '../common/Credits';
 import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import { ServerSettings } from './Settings';

 const Login = () => {
    const colors = useColors();
@@ -140,55 +141,7 @@ const Login = () => {
                <View style={[styles.section, styles.logoContainer]}>
                    <Image style={styles.logo} source={require('../assets/favicon.png')} />
                </View>
-                <View style={styles.section}>
-                    <ThemeText style={styles.label}>Benutzername</ThemeText>
-                    <ThemeTextInput
-                        value={username}
-                        onValueChange={handleChange(setUsername)}
-                        placeholder="Benutzername"
-                        disabled={!requireAuth}
-                    />
-                    <ThemeText style={styles.label}>Passwort</ThemeText>
-                    <ThemeTextInput
-                        value={password}
-                        onValueChange={handleChange(setPassword)}
-                        secureTextEntry
-                        placeholder="Passwort"
-                        disabled={!requireAuth}
-                    />
-                </View>
-                <View style={styles.section}>
-                    <Button title={isSaving ? "" : "Einloggen"} onPress={handleSave} disabled={isSaving} />
-                    {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
-                </View>
-
-                <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
-                    <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
-                        <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
-                    </Animated.View>
-                    <Text style={styles.advancedButtonText}>
-                        {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
-                    </Text>
-                </TouchableOpacity>
-
-                {/* Animated section for advanced settings */}
-                <Animated.View style={[styles.advancedSection, { height: advancedHeightAnim }]}>
-                    <View ref={advancedSectionRef}>
-                        <ThemeText style={styles.label}>URL</ThemeText>
-                        <ThemeTextInput
-                            value={url}
-                            onValueChange={handleChange(setUrl)}
-                            placeholder="URL"
-                        />
-                        <View style={styles.switchContainer}>
-                            <ThemeText>Authentifizierung</ThemeText>
-                            <ThemeSwitch
-                                value={requireAuth}
-                                onValueChange={handleChange(setRequireAuth)}
-                            />
-                        </View>
-                    </View>
-                </Animated.View>
+                <ServerSettings />
                <Credits />
            </ScrollView>
        </ErrorBoundary>
--- a/screens/Settings.tsx
+++ b/screens/Settings.tsx
@@ -1,11 +1,13 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { View, Text, ScrollView, TextInput, Button, StyleSheet, Alert, Linking, TouchableOpacity, Platform, ActivityIndicator, Image } from 'react-native';
-import { SettingsContext } from '../SettingsProvider';
-import { useColors } from '../common/colors';
-import ErrorBoundary from 'react-native-error-boundary';
-import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes'
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 import * as Application from 'expo-application';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, Animated, Button, Image, Linking, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import ErrorBoundary from 'react-native-error-boundary';
+import { SettingsContext } from '../SettingsProvider';
+import Credits from '../common/Credits';
+import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes';
 import { ToastType, useToast } from '../common/ToastProvider';
+import { useColors } from '../common/colors';

 const Settings = () => {
  const { showToast, hideToast } = useToast();
@@ -107,6 +109,7 @@ const Settings = () => {
  return (
    <ErrorBoundary>
      <ScrollView style={[styles.container, { backgroundColor: colors.backPrimary }]}>
+        <ServerSettings />
        <View style={styles.section}>
          <ThemeText style={styles.title}>Server</ThemeText>
          <ThemeText style={styles.label}>URL</ThemeText>
@@ -164,29 +167,196 @@ const Settings = () => {
          {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
        </View>

-        <View style={[styles.section, {marginTop: 20}]}>
-          <ThemeText>EDV-Schule Plattling</ThemeText>
-          <TouchableOpacity onPress={() => handleLinkPress('https://www.edvschule-plattling.de/impressum')}>
-            <Text style={{ color: colors.primary }}>Impressum</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={[styles.section, styles.endSection]}>
-          <View>
-            { /* Wer des löscht werd weggeklagt */}
-            <ThemeText>Heinrich Thaler</ThemeText>
-            <TouchableOpacity onPress={() => handleLinkPress('mailto:Heinrich.Thaler@edvschule-plattling.de')}>
-              <Text style={{ color: colors.primary }}>Heinrich.Thaler@edvschule-plattling.de</Text>
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => handleLinkPress('https://www.it-thaler.de')}>
-              <Text style={{ color: colors.primary }}>www.it-thaler.de</Text>
-            </TouchableOpacity>
-            {Platform.OS != 'web' && <ThemeText>Version: {Application.nativeApplicationVersion} ({Application.nativeBuildVersion})</ThemeText>}
-          </View>
-          <Image style={styles.logo} source={require('../assets/logo-thaler.png')} />
-        </View>
+        <Credits />
      </ScrollView>
    </ErrorBoundary>
  );
 };

 export default Settings;
+
+
+export const ServerSettings = () => {
+  const colors = useColors();
+  const { settings, updateSettings } = useContext(SettingsContext);
+
+  const [url, setUrl] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSystemTheme, setIsSystemTheme] = useState(settings.systemTheme);
+  const [isDarkMode, setIsDarkMode] = useState(settings.darkTheme);
+  const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [rotateAnim] = useState(new Animated.Value(0)); // Animation state for the arrow
+  const [advancedHeightAnim] = useState(new Animated.Value(0)); // Animation state for the advanced settings height
+
+  const advancedSectionRef = useRef(null);
+
+  useEffect(() => {
+    if (settings) {
+      setUrl(settings.url || '');
+      setUsername(settings.username || '');
+      setPassword(settings.password || '');
+      setIsSystemTheme(settings.systemTheme);
+      setIsDarkMode(settings.darkTheme);
+      setRequireAuth(settings.requireAuth);
+    }
+  }, [settings]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+
+    try {
+      setIsSaving(true);
+      await updateSettings({
+        url,
+        username,
+        password,
+        systemTheme: isSystemTheme,
+        darkTheme: isDarkMode,
+        requireAuth,
+      });
+    } catch (error) {
+      console.error('Error updating settings:', error);
+      Alert.alert('Error', 'Failed to save settings.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleChange = (setter) => (value) => {
+    setter(value);
+  };
+
+  const toggleAdvancedSettings = () => {
+    setShowAdvanced(!showAdvanced);
+
+    // Rotate the arrow
+    Animated.timing(rotateAnim, {
+      toValue: showAdvanced ? 0 : 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    // Animate the height of the advanced settings
+    const targetHeight = showAdvanced ? 0 : 150; // You can adjust this height
+    Animated.timing(advancedHeightAnim, {
+      toValue: targetHeight,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const arrowRotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+    },
+    label: {
+      fontWeight: 'bold',
+      marginTop: 8,
+      marginBottom: 6,
+    },
+    section: {
+      marginBottom: 40,
+    },
+    switchContainer: {
+      marginTop: 15,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    activityindicator: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+    },
+    arrowContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: 20,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    advancedButtonText: {
+      marginLeft: 8,
+      fontSize: 16,
+      color: colors.text,
+    },
+    advancedSection: {
+      overflow: 'hidden',
+    },
+    logo: {
+      width: 100,
+      height: 100,
+    },
+    logoContainer: {
+      marginTop: 10,
+      display: 'flex',
+      alignItems: 'center',
+    },
+  });
+
+  return (
+    <ErrorBoundary>
+      <ScrollView style={[styles.container, { backgroundColor: colors.backPrimary }]}>
+        <View style={styles.section}>
+          <ThemeText style={styles.label}>Benutzername</ThemeText>
+          <ThemeTextInput
+            value={username}
+            onValueChange={handleChange(setUsername)}
+            placeholder="Benutzername"
+            disabled={!requireAuth}
+          />
+          <ThemeText style={styles.label}>Passwort</ThemeText>
+          <ThemeTextInput
+            value={password}
+            onValueChange={handleChange(setPassword)}
+            secureTextEntry
+            placeholder="Passwort"
+            disabled={!requireAuth}
+          />
+        </View>
+        <View style={styles.section}>
+          <Button title={isSaving ? "" : "Einloggen"} onPress={handleSave} disabled={isSaving} />
+          {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
+        </View>
+
+        <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
+          <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
+            <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
+          </Animated.View>
+          <Text style={styles.advancedButtonText}>
+            {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
+          </Text>
+        </TouchableOpacity>
+
+        {/* Animated section for advanced settings */}
+        <Animated.View style={[styles.advancedSection, { height: advancedHeightAnim }]}>
+          <View ref={advancedSectionRef}>
+            <ThemeText style={styles.label}>URL</ThemeText>
+            <ThemeTextInput
+              value={url}
+              onValueChange={handleChange(setUrl)}
+              placeholder="URL"
+            />
+            <View style={styles.switchContainer}>
+              <ThemeText>Authentifizierung</ThemeText>
+              <ThemeSwitch
+                value={requireAuth}
+                onValueChange={handleChange(setRequireAuth)}
+              />
+            </View>
+          </View>
+        </Animated.View>
+      </ScrollView>
+    </ErrorBoundary>
+  );
+};
+