alf/teatracker
1
0
Fork 0
mirror of https://github.com/trevor1969/teatracker.git synced 2026-08-09 10:41:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add 5-star rating system for tea varieties

Browse Source 
- Add star rating component (5 stars) to tea form
- Add rating field to tea data model (default: 3)
- Update addTea() to include rating
- Update openTeaModal() to set rating when editing
- Display rating on tea cards with star icons
- Add renderStarRating() for interactive rating in form
- Add renderStarRatingStatic() for display on cards
- Add handleStarRatingClick() for user interaction
- Add migration for existing teas without rating
- Add CSS styles for rating display and interaction

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
Vibe Nuage Agent
2026-06-04 17:00:50 +00:00
parent 394480c516
commit ac12cc5cab
3 changed files with 111 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app.js
View File

@ -283,7 +283,8 @@ 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
}));
}
@ -312,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 = [];
@ -419,6 +421,7 @@ class TeeTracker {
description: tea.description || '',
color: tea.color || '#8B4513',
organic: tea.organic || false,
rating: tea.rating || 3,
createdAt: new Date().toISOString()
};
this.teas.push(newTea);
@ -627,6 +630,12 @@ 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));
}
// Confirm modal
if (document.getElementById('close-confirm')) {
document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
@ -1244,6 +1253,7 @@ class TeeTracker {
<div class="tea-card-header">
<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>
@ -1288,6 +1298,7 @@ class TeeTracker {
<div class="tea-card-header">
<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>
@ -1319,6 +1330,8 @@ 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');
deleteBtn.style.display = 'inline-flex';
this.currentTeaId = tea.id;
}
@ -1326,6 +1339,8 @@ 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');
deleteBtn.style.display = 'none';
this.currentTeaId = null;
}
@ -1352,7 +1367,8 @@ 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
};
const teaId = document.getElementById('tea-id').value;
@ -1373,6 +1389,44 @@ 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;
}
}
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);
}

12
index.html
View File

@ -290,6 +290,18 @@
</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-color">Farbe</label>
<input type="color" id="tea-color" value="#8B4513">

42
styles.css
View File

@ -971,3 +971,45 @@ 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;
}