first release 0.0.0.2

2026-03-08 23:31:46 +01:00
parent ea52a4cec4
commit 5eb3ebf199
1432 changed files with 99065 additions and 60 deletions
@@ -0,0 +1,245 @@
+/**
+ * ModeSelector - Modus-Auswahl fuer ARIA
+ *
+ * Zeigt den aktuellen Betriebsmodus an und ermoeglicht das Umschalten
+ * ueber ein Modal-Dropdown.
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  StyleSheet,
+} from 'react-native';
+import rvs from '../services/rvs';
+
+// --- Typen ---
+
+export interface Mode {
+  id: string;
+  label: string;
+  emoji: string;
+  description: string;
+}
+
+interface ModeSelectorProps {
+  currentModeId: string;
+  onModeChange: (modeId: string) => void;
+}
+
+// --- Verfuegbare Modi ---
+
+export const MODES: Mode[] = [
+  {
+    id: 'normal',
+    label: 'Normal',
+    emoji: '\uD83D\uDFE2',
+    description: 'Standardmodus - ARIA reagiert auf alle Eingaben',
+  },
+  {
+    id: 'nicht_stoeren',
+    label: 'Nicht st\u00F6ren',
+    emoji: '\uD83D\uDD34',
+    description: 'Nur kritische Benachrichtigungen',
+  },
+  {
+    id: 'fluester',
+    label: 'Fl\u00FCster',
+    emoji: '\uD83D\uDFE1',
+    description: 'Leise Antworten, reduzierte Aktivit\u00E4t',
+  },
+  {
+    id: 'hangar',
+    label: 'Hangar',
+    emoji: '\u2708\uFE0F',
+    description: 'Flugmodus - minimale Kommunikation',
+  },
+  {
+    id: 'gaming',
+    label: 'Gaming',
+    emoji: '\uD83C\uDFAE',
+    description: 'Spielmodus - nur dringende Meldungen',
+  },
+];
+
+// --- Komponente ---
+
+const ModeSelector: React.FC<ModeSelectorProps> = ({ currentModeId, onModeChange }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const currentMode = MODES.find(m => m.id === currentModeId) || MODES[0];
+
+  const handleSelectMode = (mode: Mode) => {
+    setModalVisible(false);
+    onModeChange(mode.id);
+
+    // Moduswechsel an ARIA senden
+    rvs.send('mode', { mode: mode.id });
+  };
+
+  const renderModeItem = ({ item }: { item: Mode }) => {
+    const isActive = item.id === currentModeId;
+    return (
+      <TouchableOpacity
+        style={[styles.modeItem, isActive && styles.modeItemActive]}
+        onPress={() => handleSelectMode(item)}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.modeEmoji}>{item.emoji}</Text>
+        <View style={styles.modeTextContainer}>
+          <Text style={[styles.modeLabel, isActive && styles.modeLabelActive]}>
+            {item.label}
+          </Text>
+          <Text style={styles.modeDescription}>{item.description}</Text>
+        </View>
+        {isActive && <Text style={styles.checkmark}>{'\u2713'}</Text>}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View>
+      {/* Aktueller Modus - Tappen zum Oeffnen */}
+      <TouchableOpacity
+        style={styles.currentMode}
+        onPress={() => setModalVisible(true)}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.currentEmoji}>{currentMode.emoji}</Text>
+        <Text style={styles.currentLabel}>{currentMode.label}</Text>
+        <Text style={styles.chevron}>{'\u25BC'}</Text>
+      </TouchableOpacity>
+
+      {/* Modus-Auswahl Modal */}
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPress={() => setModalVisible(false)}
+        >
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Modus w\u00E4hlen</Text>
+            <FlatList
+              data={MODES}
+              keyExtractor={item => item.id}
+              renderItem={renderModeItem}
+              scrollEnabled={false}
+            />
+            <TouchableOpacity
+              style={styles.cancelButton}
+              onPress={() => setModalVisible(false)}
+            >
+              <Text style={styles.cancelText}>Abbrechen</Text>
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};
+
+// --- Styles ---
+
+const styles = StyleSheet.create({
+  currentMode: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: '#2A2A3E',
+  },
+  currentEmoji: {
+    fontSize: 22,
+    marginRight: 10,
+  },
+  currentLabel: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+  chevron: {
+    color: '#8888AA',
+    fontSize: 12,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'flex-end',
+  },
+  modalContent: {
+    backgroundColor: '#1A1A2E',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    paddingBottom: 40,
+  },
+  modalTitle: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  modeItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    borderRadius: 10,
+    marginBottom: 6,
+  },
+  modeItemActive: {
+    backgroundColor: 'rgba(0, 150, 255, 0.15)',
+  },
+  modeEmoji: {
+    fontSize: 26,
+    marginRight: 14,
+  },
+  modeTextContainer: {
+    flex: 1,
+  },
+  modeLabel: {
+    color: '#CCCCDD',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  modeLabelActive: {
+    color: '#0096FF',
+    fontWeight: '700',
+  },
+  modeDescription: {
+    color: '#666680',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  checkmark: {
+    color: '#0096FF',
+    fontSize: 18,
+    fontWeight: '700',
+    marginLeft: 8,
+  },
+  cancelButton: {
+    marginTop: 12,
+    padding: 14,
+    borderRadius: 10,
+    backgroundColor: '#2A2A3E',
+    alignItems: 'center',
+  },
+  cancelText: {
+    color: '#8888AA',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default ModeSelector;