feat: Add image upload for tea varieties

- Add image upload field to tea form with preview
- Add image property to tea data model
- Update addTea() to include image data (base64)
- Update openTeaModal() to display image when editing
- Display tea images on tea cards
- Add handleImageUpload() method for file processing
- Add migration for existing teas without image field
- Add CSS styles for image preview and display on cards
- Images stored as base64 in localStorage/Nextcloud

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

app.js

@@ -283,12 +283,16 @@ class TeeTracker {
             if (teas) {
                 this.teas = teas.map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
             }
             
             if (entries) {
-                this.entries = entries;
+                this.entries = entries.map(entry => ({
+                    ...entry,
+                    teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                }));
             }
             
             // If Nextcloud loading failed, fall back to localStorage
@@ -309,7 +313,8 @@ class TeeTracker {
             try {
                 this.teas = JSON.parse(teasData).map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
             } catch (error) {
                 this.teas = [];
@@ -318,7 +323,10 @@ class TeeTracker {
         
         if (entriesData) {
             try {
-                this.entries = JSON.parse(entriesData);
+                this.entries = JSON.parse(entriesData).map(entry => ({
+                    ...entry,
+                    teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                }));
             } catch (error) {
                 this.entries = [];
             }
@@ -413,6 +421,8 @@ class TeeTracker {
             description: tea.description || '',
             color: tea.color || '#8B4513',
             organic: tea.organic || false,
+            rating: tea.rating || 3,
+            image: tea.image || '',
             createdAt: new Date().toISOString()
         };
         this.teas.push(newTea);
@@ -452,6 +462,7 @@ class TeeTracker {
             date: entry.date,
             time: entry.time || '',
             amount: parseInt(entry.amount) || 1,
+            teaspoons: entry.teaspoons ? parseFloat(entry.teaspoons) : 1,
             notes: entry.notes || '',
             createdAt: new Date().toISOString()
         };
@@ -620,6 +631,18 @@ class TeeTracker {
             document.getElementById('delete-tea-btn').addEventListener('click', () => this.handleDeleteTea());
         }
         
+        // Star rating for tea form
+        const teaRating = document.getElementById('tea-rating');
+        if (teaRating) {
+            teaRating.addEventListener('click', (e) => this.handleStarRatingClick(e));
+        }
+        
+        // Tea image upload
+        const teaImageUpload = document.getElementById('tea-image-upload');
+        if (teaImageUpload) {
+            teaImageUpload.addEventListener('change', (e) => this.handleImageUpload(e));
+        }
+        
         // Confirm modal
         if (document.getElementById('close-confirm')) {
             document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
@@ -1207,7 +1230,7 @@ class TeeTracker {
                         <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
                         <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
                     </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
+                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}${entry.teaspoons ? ` (${entry.teaspoons} TL)` : ''}</div>
                 </div>
             `;
         }).join('');
@@ -1235,11 +1258,15 @@ class TeeTracker {
         container.innerHTML = this.teas.map(tea => `
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
+                    <div>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
                         <div>
                             <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                             <span class="tea-type">${tea.type}</span>
                         </div>
                     </div>
+                </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
                 ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
                 <div class="tea-actions">
@@ -1279,11 +1306,15 @@ class TeeTracker {
         container.innerHTML = filteredTeas.map(tea => `
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
+                    <div>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
                         <div>
                             <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                             <span class="tea-type">${tea.type}</span>
                         </div>
                     </div>
+                </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
                 ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
                 <div class="tea-actions">
@@ -1312,6 +1343,17 @@ class TeeTracker {
                 document.getElementById('tea-description').value = tea.description || '';
                 document.getElementById('tea-color').value = tea.color || '#8B4513';
                 document.getElementById('tea-organic').checked = tea.organic || false;
+                document.getElementById('tea-rating-value').value = tea.rating || 3;
+                this.renderStarRating(tea.rating || 3, 'tea-rating');
+                if (tea.image) {
+                    document.getElementById('tea-image-data').value = tea.image;
+                    document.getElementById('tea-image-preview-img').src = tea.image;
+                    document.getElementById('tea-image-preview').style.display = 'block';
+                } else {
+                    document.getElementById('tea-image-data').value = '';
+                    document.getElementById('tea-image-preview-img').src = '';
+                    document.getElementById('tea-image-preview').style.display = 'none';
+                }
                 deleteBtn.style.display = 'inline-flex';
                 this.currentTeaId = tea.id;
             }
@@ -1319,6 +1361,11 @@ class TeeTracker {
             document.getElementById('modal-title').textContent = 'Tee hinzufügen';
             form.reset();
             document.getElementById('tea-id').value = '';
+            document.getElementById('tea-rating-value').value = 3;
+            this.renderStarRating(3, 'tea-rating');
+            document.getElementById('tea-image-data').value = '';
+            document.getElementById('tea-image-preview-img').src = '';
+            document.getElementById('tea-image-preview').style.display = 'none';
             deleteBtn.style.display = 'none';
             this.currentTeaId = null;
         }
@@ -1345,7 +1392,9 @@ class TeeTracker {
             brand: document.getElementById('tea-brand').value.trim(),
             description: document.getElementById('tea-description').value.trim(),
             color: document.getElementById('tea-color').value,
-            organic: document.getElementById('tea-organic').checked
+            organic: document.getElementById('tea-organic').checked,
+            rating: parseInt(document.getElementById('tea-rating-value').value) || 3,
+            image: document.getElementById('tea-image-data').value || ''
         };
         
         const teaId = document.getElementById('tea-id').value;
@@ -1366,6 +1415,63 @@ class TeeTracker {
         this.updateSettingsStats();
     }
     
+    handleStarRatingClick(e) {
+        const star = e.target.closest('.star');
+        if (!star) return;
+        
+        const value = parseInt(star.dataset.value);
+        const ratingContainer = document.getElementById('tea-rating');
+        const ratingInput = document.getElementById('tea-rating-value');
+        
+        if (ratingContainer && ratingInput) {
+            // Update active stars
+            ratingContainer.querySelectorAll('.star').forEach((s, index) => {
+                s.classList.toggle('active', index < value);
+            });
+            
+            // Set the hidden input value
+            ratingInput.value = value;
+        }
+    }
+    
+    handleImageUpload(e) {
+        const file = e.target.files[0];
+        if (!file || !file.type.startsWith('image/')) return;
+        
+        const preview = document.getElementById('tea-image-preview-img');
+        const previewContainer = document.getElementById('tea-image-preview');
+        const imageDataInput = document.getElementById('tea-image-data');
+        
+        if (preview && previewContainer && imageDataInput) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                preview.src = event.target.result;
+                previewContainer.style.display = 'block';
+                imageDataInput.value = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
+    renderStarRating(rating, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}" data-value="${i}">★</span>`);
+        }
+        container.innerHTML = stars.join('');
+    }
+    
+    renderStarRatingStatic(rating) {
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}">★</span>`);
+        }
+        return stars.join('');
+    }
+    
     editTea(teaId) {
         this.openTeaModal(teaId);
     }
@@ -1454,6 +1560,7 @@ class TeeTracker {
         const date = document.getElementById('track-date').value;
         const time = document.getElementById('track-time').value;
         const amount = document.getElementById('track-amount').value;
+        const teaspoons = document.getElementById('track-teaspoons').value;
         const notes = document.getElementById('track-notes').value.trim();
         
         if (!teaId || !date || !amount) {
@@ -1466,6 +1573,7 @@ class TeeTracker {
             date,
             time,
             amount,
+            teaspoons,
             notes
         };
         
@@ -1521,7 +1629,7 @@ class TeeTracker {
                         <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
                         <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
                     </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
+                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}${entry.teaspoons ? ` (${entry.teaspoons} TL)` : ''}</div>
                 </div>
             `;
         }).join('');

index.html

@@ -101,6 +101,11 @@
                         <input type="number" id="track-amount" min="1" max="10" value="1" required>
                     </div>
                     
+                    <div class="form-group">
+                        <label for="track-teaspoons">Menge Tee-Pulver (Teelöffel)</label>
+                        <input type="number" id="track-teaspoons" min="0" max="10" value="1" step="0.5">
+                    </div>
+                    
                     <div class="form-group">
                         <label for="track-notes">Notizen</label>
                         <textarea id="track-notes" rows="3" placeholder="z.B. Mit Honig, besonders stark..."></textarea>
@@ -285,6 +290,27 @@
                         </label>
                     </div>
                     
+                    <div class="form-group">
+                        <label>Bewertung</label>
+                        <div class="star-rating" id="tea-rating">
+                            <span class="star" data-value="1">★</span>
+                            <span class="star" data-value="2">★</span>
+                            <span class="star" data-value="3">★</span>
+                            <span class="star" data-value="4">★</span>
+                            <span class="star" data-value="5">★</span>
+                        </div>
+                        <input type="hidden" id="tea-rating-value" value="3">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="tea-image-upload">Tee-Foto</label>
+                        <input type="file" id="tea-image-upload" accept="image/*">
+                        <div id="tea-image-preview" class="image-preview" style="display: none; margin-top: 10px;">
+                            <img id="tea-image-preview-img" style="max-width: 150px; max-height: 150px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
+                        </div>
+                        <input type="hidden" id="tea-image-data" value="">
+                    </div>
+                    
                     <div class="form-group">
                         <label for="tea-color">Farbe</label>
                         <input type="color" id="tea-color" value="#8B4513">

styles.css

@@ -971,3 +971,68 @@ header p {
     z-index: -1;
     pointer-events: none;
 }
+
+/* Star Rating */
+.star-rating {
+    display: flex;
+    gap: 5px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    margin-top: 5px;
+}
+
+.star-rating .star {
+    color: #ccc;
+    transition: color 0.2s;
+}
+
+.star-rating .star:hover,
+.star-rating .star.active {
+    color: #FFD700;
+}
+
+.star-rating .star:hover ~ .star {
+    color: #ccc;
+}
+
+/* Rating display on tea cards */
+.rating-display {
+    color: #FFD700;
+    font-size: 0.9rem;
+    margin-left: 5px;
+}
+
+/* Rating display on tea cards */
+.tea-rating-display {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0.9rem;
+}
+
+.tea-rating-display .star {
+    color: #FFD700;
+    font-size: 1rem;
+}
+
+/* Image Upload Preview */
+.image-preview {
+    margin-top: 10px;
+}
+
+.image-preview img {
+    max-width: 150px;
+    max-height: 150px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    object-fit: cover;
+}
+
+/* Tea card image */
+.tea-image {
+    width: 60px;
+    height: 60px;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+    box-shadow: var(--box-shadow);
+    margin-right: 10px;
+}