473 lines
18 KiB
TypeScript
473 lines
18 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
ScrollView,
|
|
ActivityIndicator,
|
|
Alert,
|
|
Image,
|
|
Platform,
|
|
} from 'react-native';
|
|
import { DatePickerModal } from '../../src/components/ui/DatePicker';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import { CameraView, useCameraPermissions, BarcodeScanningResult } from 'expo-camera';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
import { format } from 'date-fns';
|
|
import { de } from 'date-fns/locale';
|
|
import { createItem } from '../../src/services/items';
|
|
import { recognizeItemFromPhoto } from '../../src/services/ai';
|
|
import { lookupBarcode } from '../../src/services/barcode';
|
|
import { getStoredHouseholdId, getOrCreateDeviceId } from '../../src/services/household';
|
|
import { useHouseholdStore } from '../../src/hooks/useHousehold';
|
|
import { COLORS, CATEGORY_LABELS, BASE_CATEGORIES, STORAGE_LOCATIONS } from '../../src/constants';
|
|
import { ChipSelectInput } from '../../src/components/ui/ChipSelectInput';
|
|
import { useCustomOptions } from '../../src/hooks/useCustomOptions';
|
|
import { ItemCategory } from '../../src/types';
|
|
|
|
type Step = 'camera' | 'form';
|
|
|
|
export default function AddItemModal() {
|
|
const { householdId: paramHouseholdId, deviceId: paramDeviceId } = useLocalSearchParams<{ householdId: string; deviceId: string }>();
|
|
const householdFromStore = useHouseholdStore((s) => s.household);
|
|
const deviceIdFromStore = useHouseholdStore((s) => s.deviceId);
|
|
|
|
const [householdId, setHouseholdId] = useState(paramHouseholdId || householdFromStore?.id || '');
|
|
const [deviceId, setDeviceId] = useState(paramDeviceId || deviceIdFromStore || '');
|
|
|
|
useEffect(() => {
|
|
const resolve = async () => {
|
|
if (!householdId) {
|
|
const stored = await getStoredHouseholdId();
|
|
if (stored) setHouseholdId(stored);
|
|
}
|
|
if (!deviceId) {
|
|
const stored = await getOrCreateDeviceId();
|
|
if (stored) setDeviceId(stored);
|
|
}
|
|
};
|
|
resolve();
|
|
}, []);
|
|
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
|
|
const [step, setStep] = useState<Step>('camera');
|
|
const [mode, setMode] = useState<'photo' | 'barcode'>('photo');
|
|
const [recognizing, setRecognizing] = useState(false);
|
|
const recognizingRef = useRef(false);
|
|
const [photoUri, setPhotoUri] = useState<string | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const cameraRef = useRef<CameraView>(null);
|
|
|
|
// Form fields
|
|
const [name, setName] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [category, setCategory] = useState<ItemCategory>('food');
|
|
const [quantity, setQuantity] = useState('1');
|
|
const [unit, setUnit] = useState<string>('Stück');
|
|
const [minStock, setMinStock] = useState('0');
|
|
const [storageLocation, setStorageLocation] = useState('');
|
|
const [shoppingLocation, setShoppingLocation] = useState('');
|
|
const [price, setPrice] = useState('');
|
|
const [barcode, setBarcode] = useState<string | null>(null);
|
|
const [expiryDate, setExpiryDate] = useState<Date | null>(null);
|
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
|
|
const { options: locationOptions, customOptions: customLocations, addOption: addLocation, removeOption: removeLocation } = useCustomOptions(
|
|
'houseorg_custom_locations',
|
|
STORAGE_LOCATIONS
|
|
);
|
|
const { options: categoryOptions, customOptions: customCategories, addOption: addCategory, removeOption: removeCategory } = useCustomOptions(
|
|
'houseorg_custom_categories',
|
|
[...BASE_CATEGORIES]
|
|
);
|
|
|
|
const takePhoto = async () => {
|
|
if (!cameraRef.current) return;
|
|
setRecognizing(true);
|
|
try {
|
|
const photo = await cameraRef.current.takePictureAsync({ quality: 0.8, base64: false });
|
|
if (!photo) return;
|
|
setPhotoUri(photo.uri);
|
|
|
|
const result = await recognizeItemFromPhoto(photo.uri);
|
|
setName(result.name);
|
|
setDescription(result.description);
|
|
setCategory(result.category);
|
|
setStep('form');
|
|
} catch {
|
|
Alert.alert('KI-Erkennung fehlgeschlagen', 'Bitte manuell ausfüllen.');
|
|
setStep('form');
|
|
} finally {
|
|
setRecognizing(false);
|
|
}
|
|
};
|
|
|
|
const onBarcodeScanned = async (result: BarcodeScanningResult) => {
|
|
if (recognizingRef.current) return;
|
|
recognizingRef.current = true;
|
|
setRecognizing(true);
|
|
setBarcode(result.data);
|
|
try {
|
|
const product = await lookupBarcode(result.data);
|
|
if (product) {
|
|
setName(product.name);
|
|
setDescription(product.description);
|
|
setCategory(product.category);
|
|
if (product.imageUrl) setPhotoUri(product.imageUrl);
|
|
} else {
|
|
Alert.alert('Barcode nicht gefunden', 'Bitte manuell ausfüllen.');
|
|
}
|
|
} catch (e: any) {
|
|
Alert.alert('Barcode-Abfrage fehlgeschlagen', e?.message ?? 'Netzwerkfehler');
|
|
} finally {
|
|
recognizingRef.current = false;
|
|
setRecognizing(false);
|
|
setStep('form');
|
|
}
|
|
};
|
|
|
|
const pickImage = () => {
|
|
Alert.alert('Foto hinzufügen', '', [
|
|
{
|
|
text: 'Kamera',
|
|
onPress: async () => {
|
|
const result = await ImagePicker.launchCameraAsync({ quality: 0.8, allowsEditing: true, aspect: [4, 3] });
|
|
if (!result.canceled) setPhotoUri(result.assets[0].uri);
|
|
},
|
|
},
|
|
{
|
|
text: 'Galerie',
|
|
onPress: async () => {
|
|
const result = await ImagePicker.launchImageLibraryAsync({ quality: 0.8, allowsEditing: true, aspect: [4, 3] });
|
|
if (!result.canceled) setPhotoUri(result.assets[0].uri);
|
|
},
|
|
},
|
|
{ text: 'Abbrechen', style: 'cancel' },
|
|
]);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!householdId) {
|
|
Alert.alert('Fehler', 'Kein Haushalt gefunden. Bitte App neu starten.');
|
|
return;
|
|
}
|
|
if (!deviceId) {
|
|
Alert.alert('Fehler', 'Geräte-ID fehlt. Bitte App neu starten.');
|
|
return;
|
|
}
|
|
if (!name.trim()) {
|
|
Alert.alert('Bitte gib einen Namen ein.');
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
console.log('Saving item to household:', householdId);
|
|
await createItem(householdId, {
|
|
name: name.trim(),
|
|
description: description.trim(),
|
|
category,
|
|
quantity: parseFloat(quantity) || 0,
|
|
unit,
|
|
minStockThreshold: parseFloat(minStock) || 0,
|
|
photoUrl: null,
|
|
storageLocation: storageLocation.trim(),
|
|
shoppingLocation: shoppingLocation.trim(),
|
|
price: price ? parseFloat(price) : null,
|
|
expiryDate,
|
|
barcode,
|
|
addedByDevice: deviceId,
|
|
photoUri: photoUri && !photoUri.startsWith('http') ? photoUri : undefined,
|
|
});
|
|
console.log('Item saved successfully');
|
|
router.back();
|
|
} catch (e: any) {
|
|
console.error('createItem error:', e);
|
|
Alert.alert('Speichern fehlgeschlagen', e?.message ?? String(e));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (!permission) return null;
|
|
if (!permission.granted) {
|
|
return (
|
|
<View style={styles.permissionContainer}>
|
|
<MaterialIcons name="camera-alt" size={64} color={COLORS.primaryLight} />
|
|
<Text style={styles.permissionText}>Kamera-Zugriff benötigt</Text>
|
|
<TouchableOpacity style={styles.btn} onPress={requestPermission}>
|
|
<Text style={styles.btnText}>Zugriff erlauben</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (step === 'camera') {
|
|
return (
|
|
<View style={styles.cameraContainer}>
|
|
<CameraView
|
|
ref={cameraRef}
|
|
style={StyleSheet.absoluteFillObject}
|
|
barcodeScannerSettings={mode === 'barcode' ? { barcodeTypes: ['ean13', 'ean8', 'qr', 'upc_e', 'upc_a', 'code128'] } : undefined}
|
|
onBarcodeScanned={mode === 'barcode' ? onBarcodeScanned : undefined}
|
|
/>
|
|
|
|
{recognizing && (
|
|
<View style={styles.overlay}>
|
|
<ActivityIndicator size="large" color={COLORS.white} />
|
|
<Text style={styles.overlayText}>
|
|
{mode === 'photo' ? 'Artikel wird erkannt…' : 'Barcode wird gesucht…'}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.cameraTop}>
|
|
<TouchableOpacity onPress={() => router.back()} style={styles.cameraTopBtn}>
|
|
<MaterialIcons name="close" size={24} color={COLORS.white} />
|
|
</TouchableOpacity>
|
|
{Platform.OS !== 'web' && (
|
|
<View style={styles.modeToggle}>
|
|
<TouchableOpacity
|
|
style={[styles.modeBtn, mode === 'photo' && styles.modeBtnActive]}
|
|
onPress={() => setMode('photo')}
|
|
>
|
|
<Text style={styles.modeBtnText}>Foto</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.modeBtn, mode === 'barcode' && styles.modeBtnActive]}
|
|
onPress={() => setMode('barcode')}
|
|
>
|
|
<Text style={styles.modeBtnText}>Barcode</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
<TouchableOpacity
|
|
onPress={() => { setStep('form'); }}
|
|
style={styles.cameraTopBtn}
|
|
>
|
|
<Text style={{ color: COLORS.white, fontSize: 13 }}>Manuell</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{mode === 'photo' && !recognizing && (
|
|
<View style={styles.cameraBottom}>
|
|
<TouchableOpacity style={styles.shutter} onPress={takePhoto}>
|
|
<View style={styles.shutterInner} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
|
|
{mode === 'barcode' && (
|
|
<View style={styles.barcodeHint}>
|
|
<Text style={styles.barcodeHintText}>Barcode in den Rahmen halten</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={styles.form} contentContainerStyle={styles.formContent} keyboardShouldPersistTaps="handled">
|
|
|
|
{/* Foto-Sektion */}
|
|
<TouchableOpacity onPress={pickImage} style={styles.photoSection} activeOpacity={0.8}>
|
|
{photoUri ? (
|
|
<>
|
|
<Image source={{ uri: photoUri }} style={styles.preview} />
|
|
<View style={styles.photoOverlay}>
|
|
<MaterialIcons name="photo-camera" size={18} color={COLORS.white} />
|
|
<Text style={styles.photoOverlayText}>Foto ändern</Text>
|
|
</View>
|
|
</>
|
|
) : (
|
|
<View style={styles.photoPlaceholder}>
|
|
<MaterialIcons name="add-a-photo" size={32} color={COLORS.primaryLight} />
|
|
<Text style={styles.photoPlaceholderText}>Foto hinzufügen</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<Field label="Name *">
|
|
<TextInput style={styles.input} value={name} onChangeText={setName} placeholder="z. B. Haferflocken" />
|
|
</Field>
|
|
|
|
<Field label="Beschreibung">
|
|
<TextInput style={[styles.input, styles.inputMulti]} value={description} onChangeText={setDescription} placeholder="Kurze Beschreibung" multiline />
|
|
</Field>
|
|
|
|
<Field label="Kategorie">
|
|
<ChipSelectInput
|
|
value={category}
|
|
onSelect={setCategory}
|
|
options={categoryOptions}
|
|
onAddOption={addCategory}
|
|
onRemoveOption={removeCategory}
|
|
removableOptions={customCategories}
|
|
getLabel={(cat) => CATEGORY_LABELS[cat] ?? cat}
|
|
addPlaceholder="Neue Kategorie…"
|
|
/>
|
|
</Field>
|
|
|
|
<View style={styles.row}>
|
|
<Field label="Menge" style={{ flex: 1 }}>
|
|
<TextInput style={styles.input} value={quantity} onChangeText={setQuantity} keyboardType="numeric" />
|
|
</Field>
|
|
<Field label="Einheit" style={{ flex: 1 }}>
|
|
<TextInput style={styles.input} value={unit} onChangeText={setUnit} placeholder="Stück" />
|
|
</Field>
|
|
</View>
|
|
|
|
<Field label="Mindestbestand (Warnschwelle)">
|
|
<TextInput style={styles.input} value={minStock} onChangeText={setMinStock} keyboardType="numeric" placeholder="0" />
|
|
</Field>
|
|
|
|
<Field label="Mindesthaltbarkeitsdatum">
|
|
<TouchableOpacity
|
|
style={[styles.input, styles.dateInput]}
|
|
onPress={() => setShowDatePicker(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<MaterialIcons name="event" size={18} color={expiryDate ? COLORS.text : COLORS.textSecondary} />
|
|
<Text style={[styles.dateText, !expiryDate && styles.datePlaceholder]}>
|
|
{expiryDate ? format(expiryDate, 'dd. MMMM yyyy', { locale: de }) : 'Kein MHD'}
|
|
</Text>
|
|
{expiryDate && (
|
|
<TouchableOpacity onPress={() => setExpiryDate(null)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
|
<MaterialIcons name="close" size={16} color={COLORS.textSecondary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</TouchableOpacity>
|
|
{showDatePicker && (
|
|
<DatePickerModal
|
|
value={expiryDate ?? new Date()}
|
|
minimumDate={new Date()}
|
|
onChange={setExpiryDate}
|
|
onDismiss={() => setShowDatePicker(false)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field label="Lagerort">
|
|
<ChipSelectInput
|
|
value={storageLocation}
|
|
onSelect={setStorageLocation}
|
|
options={locationOptions}
|
|
onAddOption={addLocation}
|
|
onRemoveOption={removeLocation}
|
|
removableOptions={customLocations}
|
|
addPlaceholder="Neuer Lagerort…"
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Einkaufsort">
|
|
<TextInput style={styles.input} value={shoppingLocation} onChangeText={setShoppingLocation} placeholder="z. B. REWE" />
|
|
</Field>
|
|
|
|
<Field label="Preis (€)">
|
|
<TextInput style={styles.input} value={price} onChangeText={setPrice} keyboardType="numeric" placeholder="0.00" />
|
|
</Field>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.btn, saving && styles.btnDisabled]}
|
|
onPress={handleSave}
|
|
disabled={saving}
|
|
>
|
|
{saving ? (
|
|
<ActivityIndicator color={COLORS.white} />
|
|
) : (
|
|
<Text style={styles.btnText}>Artikel speichern</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
function Field({ label, children, style }: { label: string; children: React.ReactNode; style?: object }) {
|
|
return (
|
|
<View style={[{ marginBottom: 16 }, style]}>
|
|
<Text style={styles.label}>{label}</Text>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
permissionContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16, padding: 32 },
|
|
permissionText: { fontSize: 18, fontWeight: '600', color: COLORS.text, textAlign: 'center' },
|
|
cameraContainer: { flex: 1, backgroundColor: '#000' },
|
|
overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', gap: 16 },
|
|
overlayText: { color: COLORS.white, fontSize: 16, fontWeight: '600' },
|
|
cameraTop: { position: 'absolute', top: 48, left: 0, right: 0, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16 },
|
|
cameraTopBtn: { padding: 8 },
|
|
modeToggle: { flex: 1, flexDirection: 'row', justifyContent: 'center', gap: 8 },
|
|
modeBtn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.2)' },
|
|
modeBtnActive: { backgroundColor: COLORS.white },
|
|
modeBtnText: { color: COLORS.white, fontWeight: '600', fontSize: 14 },
|
|
cameraBottom: { position: 'absolute', bottom: 48, left: 0, right: 0, alignItems: 'center' },
|
|
shutter: { width: 72, height: 72, borderRadius: 36, backgroundColor: 'rgba(255,255,255,0.3)', justifyContent: 'center', alignItems: 'center', borderWidth: 3, borderColor: COLORS.white },
|
|
shutterInner: { width: 56, height: 56, borderRadius: 28, backgroundColor: COLORS.white },
|
|
barcodeHint: { position: 'absolute', bottom: 80, left: 0, right: 0, alignItems: 'center' },
|
|
barcodeHintText: { color: COLORS.white, fontSize: 14, backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8 },
|
|
form: { flex: 1, backgroundColor: COLORS.white },
|
|
formContent: { padding: 24, paddingBottom: 48 },
|
|
photoSection: { marginBottom: 20, borderRadius: 12, overflow: 'hidden' },
|
|
preview: { width: '100%', height: 180, borderRadius: 12, resizeMode: 'cover' },
|
|
photoOverlay: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
backgroundColor: 'rgba(0,0,0,0.45)',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
paddingVertical: 8,
|
|
},
|
|
photoOverlayText: { color: COLORS.white, fontSize: 13, fontWeight: '600' },
|
|
photoPlaceholder: {
|
|
height: 120,
|
|
borderRadius: 12,
|
|
borderWidth: 1.5,
|
|
borderColor: COLORS.border,
|
|
borderStyle: 'dashed',
|
|
backgroundColor: COLORS.surface,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 8,
|
|
},
|
|
photoPlaceholderText: { fontSize: 14, color: COLORS.primaryLight, fontWeight: '500' },
|
|
label: { fontSize: 13, fontWeight: '600', color: COLORS.textSecondary, marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.3 },
|
|
input: { borderWidth: 1.5, borderColor: COLORS.border, borderRadius: 12, padding: 13, fontSize: 16, backgroundColor: COLORS.surface, color: COLORS.text },
|
|
inputMulti: { height: 80, textAlignVertical: 'top' },
|
|
dateInput: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
dateText: { flex: 1, fontSize: 16, color: COLORS.text },
|
|
datePlaceholder: { color: COLORS.textSecondary },
|
|
dateConfirm: { alignSelf: 'flex-end', marginTop: 8, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: COLORS.primary, borderRadius: 8 },
|
|
dateConfirmText: { color: COLORS.white, fontWeight: '600', fontSize: 14 },
|
|
segmented: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
|
|
segBtn: { paddingHorizontal: 14, paddingVertical: 8, borderRadius: 20, borderWidth: 1.5, borderColor: COLORS.border },
|
|
segBtnActive: { backgroundColor: COLORS.primary, borderColor: COLORS.primary },
|
|
segBtnText: { fontSize: 13, color: COLORS.textSecondary, fontWeight: '500' },
|
|
segBtnTextActive: { color: COLORS.white },
|
|
row: { flexDirection: 'row', gap: 12 },
|
|
btn: {
|
|
backgroundColor: COLORS.primary,
|
|
borderRadius: 14,
|
|
paddingVertical: 16,
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
shadowColor: COLORS.primary,
|
|
shadowOpacity: 0.28,
|
|
shadowRadius: 10,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
elevation: 4,
|
|
},
|
|
btnDisabled: { opacity: 0.6, shadowOpacity: 0 },
|
|
btnText: { color: COLORS.white, fontSize: 16, fontWeight: '600' },
|
|
});
|