initial commit

2026-07-01 13:54:21 +02:00
parent ac7ba88422
commit 43ef81b8e8
16 changed files with 1061 additions and 228 deletions
@@ -1,9 +1,29 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

 import { colors } from '../../utils/constants';
 import { formatPrice } from '../../utils/formatPrice';

-export default function ShoppingListItem({ item, onToggle, onDelete }) {
+export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePrice }) {
+  const [priceText, setPriceText] = useState(priceToInputValue(item.estimatedPrice));
+  const [priceError, setPriceError] = useState('');
+
+  useEffect(() => {
+    setPriceText(priceToInputValue(item.estimatedPrice));
+  }, [item.estimatedPrice]);
+
+  function savePrice() {
+    const parsedPrice = parsePrice(priceText);
+
+    if (parsedPrice === undefined) {
+      setPriceError('Preis prüfen');
+      return;
+    }
+
+    setPriceError('');
+    onUpdatePrice(item.id, parsedPrice);
+  }
+
  return (
    <View style={styles.row}>
      <Pressable accessibilityRole="checkbox" onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
@@ -11,7 +31,25 @@ export default function ShoppingListItem({ item, onToggle, onDelete }) {
      </Pressable>
      <View style={styles.copy}>
        <Text style={[styles.name, item.checked ? styles.done : null]}>{item.productName}</Text>
-        <Text style={styles.meta}>Menge {item.quantity} · {formatPrice(item.estimatedPrice, 'CHF')}</Text>
+        <Text style={styles.meta}>Menge {item.quantity} · {formatPrice(item.estimatedPrice, item.currency || 'CHF')}</Text>
+        <View style={styles.priceRow}>
+          <Text style={styles.currency}>{item.currency || 'CHF'}</Text>
+          <TextInput
+            accessibilityLabel={`Preis für ${item.productName}`}
+            keyboardType="decimal-pad"
+            onBlur={savePrice}
+            onChangeText={(value) => {
+              setPriceText(value);
+              setPriceError('');
+            }}
+            onSubmitEditing={savePrice}
+            placeholder="0.00"
+            placeholderTextColor={colors.muted}
+            style={styles.priceInput}
+            value={priceText}
+          />
+        </View>
+        {priceError ? <Text style={styles.errorText}>{priceError}</Text> : null}
      </View>
      <Pressable accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
        <Text style={styles.deleteText}>Löschen</Text>
@@ -20,6 +58,21 @@ export default function ShoppingListItem({ item, onToggle, onDelete }) {
  );
 }

+function priceToInputValue(price) {
+  return typeof price === 'number' ? price.toFixed(2) : '';
+}
+
+function parsePrice(value) {
+  const normalizedValue = value.trim().replace(',', '.');
+  const parsedValue = Number(normalizedValue);
+
+  if (!normalizedValue || !Number.isFinite(parsedValue) || parsedValue < 0) {
+    return undefined;
+  }
+
+  return Math.round(parsedValue * 100) / 100;
+}
+
 const styles = StyleSheet.create({
  row: {
    alignItems: 'center',
@@ -63,6 +116,33 @@ const styles = StyleSheet.create({
    fontSize: 13,
    marginTop: 3
  },
+  priceRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 10
+  },
+  currency: {
+    color: colors.muted,
+    fontSize: 13,
+    fontWeight: '800'
+  },
+  priceInput: {
+    borderColor: colors.border,
+    borderRadius: 8,
+    borderWidth: 1,
+    color: colors.text,
+    fontSize: 14,
+    minWidth: 92,
+    paddingHorizontal: 10,
+    paddingVertical: 7
+  },
+  errorText: {
+    color: colors.danger,
+    fontSize: 12,
+    fontWeight: '800',
+    marginTop: 4
+  },
  deleteButton: {
    paddingHorizontal: 8,
    paddingVertical: 6
@@ -9,7 +9,7 @@ export default function ProductCard({ product, rating, onPress }) {
  return (
    <Pressable accessibilityRole="button" onPress={onPress} style={styles.card}>
      <View style={styles.topRow}>
-        <ProductImage imageUrl={product.imageUrl} />
+        <ProductImage imageUrl={product.imageUrl} productName={product.name} />
        <View style={styles.copy}>
          <Text style={styles.name}>{product.name}</Text>
          <Text style={styles.meta}>
@@ -18,6 +18,7 @@ export default function ProductCard({ product, rating, onPress }) {
          <Text style={styles.note}>
            {product.category || 'Produkt'} · Barcode {product.barcode}
          </Text>
+          <Text style={styles.source}>{sourceLabel(product.dataSource)}</Text>
        </View>
        {rating ? <ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} /> : null}
      </View>
@@ -25,6 +26,16 @@ export default function ProductCard({ product, rating, onPress }) {
  );
 }

+function sourceLabel(source) {
+  const labels = {
+    cache: 'Lokaler Cache',
+    local: 'Lokale Beispieldaten',
+    'open-food-facts': 'Open Food Facts'
+  };
+
+  return labels[source] || 'Quelle unbekannt';
+}
+
 const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
@@ -57,5 +68,16 @@ const styles = StyleSheet.create({
    fontSize: 13,
    lineHeight: 18,
    marginTop: 8
+  },
+  source: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#eef3ef',
+    borderRadius: 8,
+    color: colors.primaryDark,
+    fontSize: 12,
+    fontWeight: '800',
+    marginTop: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4
  }
 });
@@ -2,13 +2,15 @@ import { Image, StyleSheet, Text, View } from 'react-native';

 import { colors } from '../../utils/constants';

-export default function ProductImage({ imageUrl, size = 'card' }) {
+export default function ProductImage({ imageUrl, productName, size = 'card' }) {
  const style = size === 'large' ? styles.large : styles.card;

  if (!imageUrl) {
    return (
      <View style={[styles.placeholder, style]}>
-        <Text style={styles.placeholderText}>Kein Bild</Text>
+        <Text style={[styles.placeholderText, size === 'large' ? styles.largePlaceholderText : null]}>
+          {initialsFromName(productName)}
+        </Text>
      </View>
    );
  }
@@ -23,6 +25,15 @@ export default function ProductImage({ imageUrl, size = 'card' }) {
  );
 }

+function initialsFromName(name) {
+  const words = String(name || 'Produkt')
+    .split(/\s+/)
+    .map((word) => word.trim())
+    .filter(Boolean);
+
+  return words.slice(0, 2).map((word) => word[0].toUpperCase()).join('');
+}
+
 const styles = StyleSheet.create({
  image: {
    backgroundColor: colors.surface,
@@ -48,9 +59,12 @@ const styles = StyleSheet.create({
    justifyContent: 'center'
  },
  placeholderText: {
-    color: colors.muted,
-    fontSize: 12,
+    color: colors.primaryDark,
+    fontSize: 22,
    fontWeight: '800',
    textAlign: 'center'
+  },
+  largePlaceholderText: {
+    fontSize: 54
  }
 });
@@ -16,8 +16,11 @@ export default function RatingCategoryRow({ category, rating }) {
      <View style={styles.copy}>
        <Text style={styles.title}>{labels[category] || category}</Text>
        <Text style={styles.message}>{rating.message}</Text>
+        {(rating.missingData || []).map((message) => (
+          <Text key={message} style={styles.missingData}>{message}</Text>
+        ))}
      </View>
-      <ProductScoreBadge status={rating.status} score={rating.status === 'good' ? 25 : rating.status === 'medium' ? 14 : 0} />
+      <ProductScoreBadge status={rating.status} score={rating.score} />
    </View>
  );
 }
@@ -46,5 +49,12 @@ const styles = StyleSheet.create({
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20
+  },
+  missingData: {
+    color: colors.warning,
+    fontSize: 13,
+    fontWeight: '700',
+    lineHeight: 19,
+    marginTop: 4
  }
 });
@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';

 import { colors } from '../../utils/constants';

-export default function BarcodeScannerView({ isScanning, onBarcodeScanned }) {
+export default function BarcodeScannerView({ isLoadingProduct, isScanning, onBarcodeScanned }) {
  return (
    <View style={styles.wrap}>
      <CameraView
@@ -16,7 +16,7 @@ export default function BarcodeScannerView({ isScanning, onBarcodeScanned }) {
        <View style={styles.overlay}>
          <View style={styles.frame} />
          <Text style={styles.hint}>
-            Barcode in den Rahmen halten. Bei Problemen manuell suchen.
+            {isLoadingProduct ? 'Produkt wird geladen...' : 'Barcode in den Rahmen halten. Bei Problemen manuell suchen.'}
          </Text>
        </View>
      </CameraView>