feat: enhance ExtrasSelector and GrowTentKonfigurator for improved extras handling and UI

- Refactored ExtrasSelector to implement dynamic image loading with caching, improving performance and user experience. - Updated GrowTentKonfigurator to fetch and display extras from a new category, ensuring accurate pricing and availability. - Enhanced UI elements for better layout and clarity, including loading indicators and improved styling for extras display. - Added handling for cases when no extras are available, providing clear feedback to users.
2025-09-04 10:45:55 +02:00
parent 479e328e7c
commit cbb8dc463f
2 changed files with 187 additions and 123 deletions
--- a/src/components/configurator/ExtrasSelector.js
+++ b/src/components/configurator/ExtrasSelector.js
@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
 import Grid from '@mui/material/Grid';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import CircularProgress from '@mui/material/CircularProgress';

 class ExtrasSelector extends Component {
  formatPrice(price) {
@@ -16,131 +13,159 @@ class ExtrasSelector extends Component {
    }).format(price);
  }

+  // Render product image using working code from GrowTentKonfigurator
+  renderProductImage(product) {
+    if (!window.smallPicCache) {
+      window.smallPicCache = {};
+    }
+
+    const pictureList = product.pictureList;
+    
+    if (!pictureList || pictureList.length === 0 || !pictureList.split(',').length) {
+      return (
+        <CardMedia
+          component="img"
+          height="160"
+          image="/assets/images/nopicture.jpg"
+          alt={product.name || 'Produktbild'}
+          sx={{ 
+            objectFit: 'contain', 
+            width: '100%'
+          }}
+        />
+      );
+    }
+
+    const bildId = pictureList.split(',')[0];
+    
+    if (window.smallPicCache[bildId]) {
+      return (
+        <CardMedia
+          component="img"
+          height="160"
+          image={window.smallPicCache[bildId]}
+          alt={product.name || 'Produktbild'}
+          sx={{ 
+            objectFit: 'contain', 
+            width: '100%'
+          }}
+        />
+      );
+    }
+
+    // Load image if not cached
+    if (!this.loadingImages) this.loadingImages = new Set();
+    if (!this.loadingImages.has(bildId)) {
+      this.loadingImages.add(bildId);
+      window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
+        if (res.success) {
+          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+          this.forceUpdate();
+        }
+        this.loadingImages.delete(bildId);
+      });
+    }
+
+    return (
+      <Box sx={{ height: '160px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <CircularProgress sx={{ color: '#90ffc0' }} />
+      </Box>
+    );
+  }
+
  renderExtraCard(extra) {
    const { selectedExtras, onExtraToggle, showImage = true } = this.props;
    const isSelected = selectedExtras.includes(extra.id);

    return (
-      <Card 
-        key={extra.id}
-        sx={{ 
-          height: '100%',
-          border: '2px solid',
-          borderColor: isSelected ? '#2e7d32' : '#e0e0e0',
-          backgroundColor: isSelected ? '#f1f8e9' : '#ffffff',
-          '&:hover': {
-            boxShadow: 5,
-            borderColor: isSelected ? '#2e7d32' : '#90caf9'
-          },
-          transition: 'all 0.3s ease',
-          cursor: 'pointer'
-        }}
-        onClick={() => onExtraToggle(extra.id)}
-      >
+      <Box sx={{
+        width: { xs: '100%', sm: '250px' },
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        border: '2px solid',
+        borderColor: isSelected ? '#2e7d32' : '#e0e0e0',
+        backgroundColor: isSelected ? '#f1f8e9' : '#ffffff',
+        '&:hover': {
+          boxShadow: 6,
+          borderColor: isSelected ? '#2e7d32' : '#90caf9'
+        },
+        transition: 'all 0.3s ease'
+      }}
+      onClick={() => onExtraToggle(extra.id)}>
+        {/* Image */}
        {showImage && (
-          <CardMedia
-            component="img"
-            height="160"
-            image={extra.image}
-            alt={extra.name}
-            sx={{ objectFit: 'cover' }}
-          />
-        )}
-        <CardContent>
-          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 2 }}>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={isSelected}
-                  onChange={(e) => {
-                    e.stopPropagation();
-                    onExtraToggle(extra.id);
-                  }}
-                  sx={{ 
-                    color: '#2e7d32', 
-                    '&.Mui-checked': { color: '#2e7d32' },
-                    padding: 0
-                  }}
-                />
-              }
-              label=""
-              sx={{ margin: 0 }}
-              onClick={(e) => e.stopPropagation()}
-            />
-            <Box sx={{ textAlign: 'right' }}>
-              <Typography variant="h6" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
-                {this.formatPrice(extra.price)}
-              </Typography>
-              {extra.vat && (
-                <Typography variant="caption" sx={{ color: '#77aa77', fontSize: '0.6em' }}>
-                  (incl. {extra.vat}% MwSt.,*)
-                </Typography>
-              )}
-            </Box>
+          <Box sx={{
+            height: { xs: '240px', sm: '180px' },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#ffffff'
+          }}>
+            {this.renderProductImage(extra)}
          </Box>
-          
+        )}
+
+        {/* Content */}
+        <Box sx={{ p: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+          {/* Name */}
          <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
            {extra.name}
          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {extra.description}
+
+          {/* Price with VAT - Same as other sections */}
+          <Typography variant="h6" sx={{ 
+            color: '#2e7d32', 
+            fontWeight: 'bold', 
+            mt: 2,
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 1,
+            flexWrap: 'wrap'
+          }}>
+            <span>{extra.price ? this.formatPrice(extra.price) : 'Kein Preis'}</span>
+            {extra.vat && (
+              <small style={{ color: '#77aa77', fontSize: '0.6em' }}>
+                (incl. {extra.vat}% MwSt.,*)
+              </small>
+            )}
          </Typography>
-          
+
+          {/* Selection Indicator - Separate line */}
          {isSelected && (
-            <Box sx={{ mt: 2, textAlign: 'center' }}>
-              <Typography variant="body2" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
-                ✓ Hinzugefügt
-              </Typography>
-            </Box>
+            <Typography variant="body2" sx={{ 
+              color: '#2e7d32', 
+              fontWeight: 'bold',
+              mt: 1,
+              textAlign: 'center'
+            }}>
+              ✓ Ausgewählt
+            </Typography>
          )}
-        </CardContent>
-      </Card>
+        </Box>
+      </Box>
    );
  }

  render() {
-    const { extras, title, subtitle, groupByCategory = true, gridSize = { xs: 12, sm: 6, md: 4 } } = this.props;
-
-    if (groupByCategory) {
-      // Group extras by category
-      const groupedExtras = extras.reduce((acc, extra) => {
-        if (!acc[extra.category]) {
-          acc[extra.category] = [];
-        }
-        acc[extra.category].push(extra);
-        return acc;
-      }, {});
+    const { extras, title, subtitle, gridSize = { xs: 12, sm: 6, md: 4 } } = this.props;

+    if (!extras || !Array.isArray(extras)) {
      return (
        <Box sx={{ mb: 4 }}>
          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
            {title}
          </Typography>
-          {subtitle && (
-            <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-              {subtitle}
-            </Typography>
-          )}
-          
-          {Object.entries(groupedExtras).map(([category, categoryExtras]) => (
-            <Box key={category} sx={{ mb: 3 }}>
-              <Typography variant="h6" gutterBottom sx={{ color: '#1976d2' }}>
-                {category}
-              </Typography>
-              <Grid container spacing={2}>
-                {categoryExtras.map(extra => (
-                  <Grid item {...gridSize} key={extra.id}>
-                    {this.renderExtraCard(extra)}
-                  </Grid>
-                ))}
-              </Grid>
-            </Box>
-          ))}
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Keine Extras verfügbar
+          </Typography>
        </Box>
      );
    }

-    // Render without category grouping
    return (
      <Box sx={{ mb: 4 }}>
        <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
--- a/src/pages/GrowTentKonfigurator.js
+++ b/src/pages/GrowTentKonfigurator.js
@@ -109,6 +109,7 @@ class GrowTentKonfigurator extends Component {
    this.fetchCategoryData("Zelte");
    this.fetchCategoryData("Lampen");
    this.fetchCategoryData("Abluft-sets");
+    this.fetchCategoryData("Set-zubehoer");
  }

  componentDidUpdate(prevProps, prevState) {
@@ -497,15 +498,19 @@ class GrowTentKonfigurator extends Component {
      }
    }
    
-    const extras = getCachedCategoryData('Extras');
-    // Add extras prices
-    selectedExtras.forEach(extraId => {
-      const extra = extras.find(e => e.id === extraId);
-      if (extra) {
-        total += extra.price;
-        itemCount++;
-      }
-    });
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    if (!extrasData || !Array.isArray(extrasData.products)) {
+      console.warn('Extras data not available; skipping extras price in total calculation');
+    } else {
+      // Add extras prices
+      selectedExtras.forEach(extraId => {
+        const extra = extrasData.products.find(e => e.id === extraId);
+        if (extra) {
+          total += extra.price;
+          itemCount++;
+        }
+      });
+    }
    
    // Apply bundle discount
    let discountPercentage = 0;
@@ -571,14 +576,18 @@ class GrowTentKonfigurator extends Component {
      }
    }
    
-    const extras = getCachedCategoryData('Extras');
-    selectedExtras.forEach(extraId => {
-      const extra = extras.find(e => e.id === extraId);
-      if (extra) {
-        originalTotal += extra.price;
-        itemCount++;
-      }
-    });
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    if (!extrasData || !Array.isArray(extrasData.products)) {
+      console.warn('Extras data not available; skipping extras in savings calculation');
+    } else {
+      selectedExtras.forEach(extraId => {
+        const extra = extrasData.products.find(e => e.id === extraId);
+        if (extra) {
+          originalTotal += extra.price;
+          itemCount++;
+        }
+      });
+    }
    
    // Progressive discount based on number of selected items
    let discountPercentage = 0;
@@ -1036,14 +1045,42 @@ class GrowTentKonfigurator extends Component {

  renderExtrasSection() {
    const { selectedExtras } = this.state;
-    const extras = getCachedCategoryData('Extras');
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+
+    if (!extrasData) {
+      return (
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            5. Extras hinzufügen (optional)
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Lade Extras...
+          </Typography>
+        </Box>
+      );
+    }
+
+    const extras = Array.isArray(extrasData.products) ? extrasData.products : [];
+
+    if (extras.length === 0) {
+      return (
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            5. Extras hinzufügen (optional)
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Keine Extras verfügbar
+          </Typography>
+        </Box>
+      );
+    }
+
    return (
      <ExtrasSelector
        extras={extras}
        selectedExtras={selectedExtras}
        onExtraToggle={this.handleExtraToggle}
        title="5. Extras hinzufügen (optional)"
-        groupByCategory={true}
        gridSize={{ xs: 12, sm: 6, md: 4 }}
      />
    );
@@ -1064,8 +1101,10 @@ class GrowTentKonfigurator extends Component {
    const selectedLight = availableLamps.find(l => l.id === selectedLightType);
    const availableVentilation = this.state.selectedTentShape ? this.getVentilationForTentShape(this.state.selectedTentShape) : [];
    const selectedVentilation = availableVentilation.find(v => v.id === selectedVentilationType && v.isDeliverable);
-    const extras = getCachedCategoryData('Extras');
-    const selectedExtrasItems = extras.filter(e => selectedExtras.includes(e.id));
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    const selectedExtrasItems = Array.isArray(extrasData?.products)
+      ? extrasData.products.filter(e => selectedExtras.includes(e.id))
+      : [];
    const savingsInfo = this.calculateSavings();
    
    return (