Would Make Again: ${sharedBread.results.overall.makeAgain}
Notes for Improvement: ${sharedBread.results.overall.improvementNotes || 'None'}
`;
}
}
// Add save options
detailsHtml += `
Save Options
`;
modalContent.innerHTML = detailsHtml;
// Add close button
const closeButton = document.createElement('button');
closeButton.className = 'close-button';
closeButton.innerHTML = '×';
closeButton.addEventListener('click', () => {
document.body.removeChild(modal);
// Clear the URL parameters
window.history.replaceState({}, document.title, window.location.pathname);
});
// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
// Clear the URL parameters
window.history.replaceState({}, document.title, window.location.pathname);
}
});
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
// Add function to switch between result tabs in the modal
window.showResultTab = function(index) {
// Hide all result contents
document.querySelectorAll('.result-content').forEach(content => {
content.classList.remove('active');
});
// Remove active class from all tabs
document.querySelectorAll('.result-tab').forEach(tab => {
tab.classList.remove('active');
});
// Show the selected result content
document.getElementById(`result-${index}`).classList.add('active');
// Add active class to the clicked tab
event.currentTarget.classList.add('active');
};
}
// Store the current shared bread for saving
let currentSharedBread = null;
// Function to save a shared bread to IndexedDB
async function saveSharedBread() {
if (!currentSharedBread) {
alert('No bread data available to save.');
return;
}
try {
// Create a deep copy of the shared bread
const sharedBread = JSON.parse(JSON.stringify(currentSharedBread));
// Check if a similar bread already exists
// We'll compare name and basic ingredients to find potential matches
const existingBreads = breadData.filter(bread =>
bread.name.toLowerCase() === sharedBread.name.toLowerCase() &&
bread.ingredients.flourType === sharedBread.ingredients.flourType &&
Math.abs(parseFloat(bread.ingredients.hydration) - parseFloat(sharedBread.ingredients.hydration)) < 5
);
if (existingBreads.length > 0) {
// If we have matches, ask the user if they want to add results to an existing bread
if (sharedBread.results && confirm('A similar bread recipe already exists in your experiments. Would you like to add these results to your existing recipe instead of creating a new one?')) {
// Let user select which bread to add results to if multiple matches
let selectedBreadIndex = 0;
if (existingBreads.length > 1) {
const options = existingBreads.map((bread, index) =>
`${index + 1}: ${bread.name} (${bread.date})`
).join('\n');
const selection = prompt(`Multiple matching recipes found. Enter the number of the recipe you want to add results to:\n\n${options}`);
if (selection && !isNaN(parseInt(selection)) && parseInt(selection) <= existingBreads.length) {
selectedBreadIndex = parseInt(selection) - 1;
} else if (!selection) {
// User cancelled, abort
return;
}
}
const selectedBread = existingBreads[selectedBreadIndex];
const breadIndex = breadData.findIndex(bread => bread.id === selectedBread.id);
// Initialize results array if it doesn't exist
if (!Array.isArray(breadData[breadIndex].results)) {
// Handle legacy single result format
if (breadData[breadIndex].results) {
// Convert existing single result to array
breadData[breadIndex].results = [breadData[breadIndex].results];
} else {
breadData[breadIndex].results = [];
}
}
// Add the shared results to the existing bread
if (Array.isArray(sharedBread.results)) {
// Add each result with a timestamp
sharedBread.results.forEach(result => {
result.timestamp = result.timestamp || new Date().toISOString();
breadData[breadIndex].results.push(result);
});
} else if (sharedBread.results) {
// Add single result with timestamp
sharedBread.results.timestamp = sharedBread.results.timestamp || new Date().toISOString();
breadData[breadIndex].results.push(sharedBread.results);
}
// Save to IndexedDB
await storage.saveAllBread(breadData);
// Update the bread list
updateBreadList();
updateBreadSelect();
// Close the modal
document.querySelector('.modal').remove();
// Clear the URL parameters
window.history.replaceState({}, document.title, window.location.pathname);
// Show success message
alert('Results added to your existing experiment!');
return;
}
}
// If no match or user chose not to add to existing, create a new entry
// Generate a new ID to avoid conflicts
sharedBread.id = Date.now().toString();
sharedBread.date = new Date().toLocaleDateString();
// Add to bread data
breadData.push(sharedBread);
// Save to IndexedDB
await storage.saveAllBread(breadData);
// Update the bread list
updateBreadList();
updateBreadSelect();
// Close the modal
document.querySelector('.modal').remove();
// Clear the URL parameters
window.history.replaceState({}, document.title, window.location.pathname);
// Show success message
alert('Recipe saved to your experiments!');
} catch (e) {
console.error('Failed to save shared bread:', e);
alert('Failed to save the recipe. Please try again.');
}
}
// Calculate average score from results
function calculateAverageScore(results) {
if (!results) return 0;
// Handle array of results
if (Array.isArray(results)) {
if (results.length === 0) return 0;
let totalScore = 0;
let validScores = 0;
results.forEach(result => {
if (result.overall && result.overall.score) {
totalScore += parseInt(result.overall.score);
validScores++;
}
});
return validScores > 0 ? (totalScore / validScores).toFixed(1) : 0;
}
// Handle single result object
else if (results.overall && results.overall.score) {
return results.overall.score;
}
return 0;
}
// Update the bread list display
function updateBreadList() {
const breadEntriesDiv = document.getElementById('bread-entries');
if (breadData.length === 0) {
breadEntriesDiv.innerHTML = '
No bread experiments yet. Start by adding a new recipe!
';
return;
}
// Sort bread data by date (newest first)
const sortedBreadData = [...breadData].sort((a, b) => {
// Convert dates to timestamps for comparison
const dateA = new Date(a.date).getTime();
const dateB = new Date(b.date).getTime();
return dateB - dateA; // Descending order (newest first)
});
let html = '';
sortedBreadData.forEach(bread => {
// Determine the rating display for the header
let ratingDisplay = '(no results yet)';
if (bread.results) {
if (Array.isArray(bread.results) && bread.results.length > 0) {
// Show the average score of all results
const avgScore = calculateAverageScore(bread.results);
ratingDisplay = `${avgScore}/10 (avg of ${bread.results.length})`;
} else if (bread.results.overall && bread.results.overall.score) {
// Legacy single result
ratingDisplay = `${bread.results.overall.score}/10`;
}
}
html += `
`;
if (bread.results) {
if (Array.isArray(bread.results) && bread.results.length > 0) {
// Show the average score
const avgScore = calculateAverageScore(bread.results);
// Get the most recent result for "Make Again"
const latestResult = bread.results[bread.results.length - 1];
html += `
Rating: ${avgScore}/10 (average)
Make Again: ${latestResult.overall.makeAgain}
Results: ${bread.results.length} recorded
`;
} else {
// Legacy single result
html += `
Rating: ${bread.results.overall.score}/10
Make Again: ${bread.results.overall.makeAgain}
`;
}
} else {
html += `
Results not yet recorded
`;
}
html += `
${bread.results ? `` : ''}
`;
});
breadEntriesDiv.innerHTML = html;
}
// Toggle bread card accordion
function toggleBreadCard(breadId) {
const card = document.getElementById(`bread-${breadId}`);
if (card) {
card.classList.toggle('active');
}
}
// Update the bread select dropdown
function updateBreadSelect() {
const breadSelect = document.getElementById('bread-select');
// Clear existing options except the first one
while (breadSelect.options.length > 1) {
breadSelect.remove(1);
}
// Add options for all breads
breadData.forEach(bread => {
const option = document.createElement('option');
option.value = bread.id;
option.textContent = bread.name;
// Add a note if results already exist
if (bread.results) {
option.textContent += ' (update existing results)';
}
breadSelect.appendChild(option);
});
}
// Function to share a bread experiment as a URL
function shareBreadAsUrl(breadId, includeResults = true) {
const bread = breadData.find(b => b.id === breadId);
if (!bread) return null;
// Create a copy of the bread object
const breadCopy = JSON.parse(JSON.stringify(bread));
// Remove results if not requested
if (!includeResults) {
delete breadCopy.results;
}
// Add sender information
const userName = localStorage.getItem('userName') || prompt('Enter your name for sharing:');
if (userName) {
localStorage.setItem('userName', userName);
breadCopy.sender = userName;
}
// Add a unique share ID
breadCopy.shareId = generateUUID();
// Compress the data using LZString
const compressedData = LZString.compressToEncodedURIComponent(JSON.stringify(breadCopy));
// Create the URL
const baseUrl = window.location.origin + window.location.pathname;
const shareUrl = `${baseUrl}?shared=${compressedData}`;
return shareUrl;
}
// Function to show share options
function showShareOptions(breadId, includeResults = true) {
const modal = document.createElement('div');
modal.className = 'modal';
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';
const title = document.createElement('h2');
title.textContent = 'Share Options';
modalContent.appendChild(title);
const description = document.createElement('p');
description.textContent = `Share your ${includeResults ? 'recipe with results' : 'recipe'} using one of these options:`;
modalContent.appendChild(description);
const optionsDiv = document.createElement('div');
optionsDiv.className = 'share-options';
// URL Copy button
const copyUrlButton = document.createElement('button');
copyUrlButton.textContent = 'Copy URL to Clipboard';
copyUrlButton.addEventListener('click', () => {
copyShareUrlToClipboard(breadId, includeResults);
document.body.removeChild(modal);
});
optionsDiv.appendChild(copyUrlButton);
// QR Code button
const showQrButton = document.createElement('button');
showQrButton.textContent = 'Show QR Code';
showQrButton.addEventListener('click', () => {
document.body.removeChild(modal);
showQrCode(breadId, includeResults);
});
optionsDiv.appendChild(showQrButton);
modalContent.appendChild(optionsDiv);
// Close button
const closeButton = document.createElement('button');
closeButton.className = 'close-button';
closeButton.innerHTML = '×';
closeButton.addEventListener('click', () => {
document.body.removeChild(modal);
});
// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
// Function to show QR code
function showQrCode(breadId, includeResults = true) {
const shareUrl = shareBreadAsUrl(breadId, includeResults);
if (!shareUrl) {
alert('Failed to generate share URL');
return;
}
const modal = document.createElement('div');
modal.className = 'modal';
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';
const title = document.createElement('h2');
title.textContent = 'QR Code for Sharing';
modalContent.appendChild(title);
const description = document.createElement('p');
description.textContent = `Scan this QR code to share your ${includeResults ? 'recipe with results' : 'recipe'}:`;
modalContent.appendChild(description);
const qrContainer = document.createElement('div');
qrContainer.className = 'qr-code-container';
const qrCanvas = document.createElement('canvas');
qrCanvas.id = 'qr-code';
qrContainer.appendChild(qrCanvas);
modalContent.appendChild(qrContainer);
// Generate QR code
QRCode.toCanvas(qrCanvas, shareUrl, {
width: 250,
margin: 2,
color: {
dark: '#8b5a2b',
light: '#ffffff'
}
}, function(error) {
if (error) {
console.error('Error generating QR code:', error);
alert('Failed to generate QR code');
}
});
// Copy URL button
const copyButton = document.createElement('button');
copyButton.textContent = 'Copy URL to Clipboard';
copyButton.style.marginTop = '15px';
copyButton.addEventListener('click', () => {
copyShareUrlToClipboard(breadId, includeResults);
});
modalContent.appendChild(copyButton);
// Close button
const closeButton = document.createElement('button');
closeButton.className = 'close-button';
closeButton.innerHTML = '×';
closeButton.addEventListener('click', () => {
document.body.removeChild(modal);
});
// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
// Function to copy URL to clipboard
function copyShareUrlToClipboard(breadId, includeResults = true) {
const shareUrl = shareBreadAsUrl(breadId, includeResults);
if (shareUrl) {
navigator.clipboard.writeText(shareUrl)
.then(() => {
alert('Share URL copied to clipboard!');
})
.catch(err => {
console.error('Failed to copy URL: ', err);
// Fallback
const textArea = document.createElement('textarea');
textArea.value = shareUrl;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Share URL copied to clipboard!');
});
}
}
// View bread details
function viewBreadDetails(breadId) {
const bread = breadData.find(b => b.id === breadId);
if (!bread) {
alert('Bread not found!');
return;
}
let detailsHtml = `
Would Make Again: ${bread.results.overall.makeAgain}
Notes for Improvement: ${bread.results.overall.improvementNotes || 'None'}
`;
} else {
detailsHtml += `
Results
Results not yet recorded
`;
}
// Add sharing options
detailsHtml += `
Share This Recipe
${bread.results ? `` : ''}
`;
// Create a modal to display the details
const modal = document.createElement('div');
modal.className = 'modal';
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';
modalContent.innerHTML = detailsHtml;
const closeButton = document.createElement('button');
closeButton.className = 'close-button';
closeButton.innerHTML = '×';
closeButton.addEventListener('click', () => {
document.body.removeChild(modal);
});
// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
// Function to switch between result tabs
window.showResultTab = function(index) {
// Hide all result contents
document.querySelectorAll('.result-content').forEach(content => {
content.classList.remove('active');
});
// Remove active class from all tabs
document.querySelectorAll('.result-tab').forEach(tab => {
tab.classList.remove('active');
});
// Show the selected result content
document.getElementById(`result-${index}`).classList.add('active');
// Add active class to the clicked tab
event.currentTarget.classList.add('active');
};
// Delete a bread
async function deleteBread(breadId) {
if (confirm('Are you sure you want to delete this bread?')) {
breadData = breadData.filter(bread => bread.id !== breadId);
await storage.saveAllBread(breadData);
updateBreadList();
updateBreadSelect();
}
}
// Reset forms when switching tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
if (this.textContent === 'Recipe Input' && editingBreadId) {
// Keep the form filled if we're editing
} else {
// Reset forms
document.getElementById('recipe-form').reset();
document.getElementById('results-form').reset();
// Reset editing state if switching to results tab
if (this.textContent === 'Results Input') {
editingBreadId = null;
document.getElementById('recipe-form').querySelector('button[type="submit"]').textContent = 'Save Recipe';
}
}
});
});
// iOS detection and Add to Home Screen banner
function isIOS() {
return /iPhone|iPad|iPod/.test(navigator.userAgent) && !window.MSStream;
}
function isInStandaloneMode() {
return ('standalone' in window.navigator) && (window.navigator.standalone);
}
function showIOSInstallBanner() {
// Only show on iOS Safari when not in standalone mode
if (!isIOS() || isInStandaloneMode()) {
return;
}
// Check if user has dismissed the banner before
const dismissed = localStorage.getItem('iosBannerDismissed');
if (dismissed) {
return;
}
// Create the banner
const banner = document.createElement('div');
banner.id = 'ios-install-banner';
banner.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #8b5a2b 0%, #a67c52 100%);
color: white;
padding: 15px;
text-align: center;
z-index: 10000;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
`;
banner.innerHTML = `
📱 Keep Your Recipes Safe!
On iOS, recipes may disappear after 7 days. Add this app to your Home Screen for permanent storage!
Tap ⎘ (Share) then "Add to Home Screen"
`;
document.body.insertBefore(banner, document.body.firstChild);
// Add some padding to the body to prevent content from being hidden
document.body.style.paddingTop = '180px';
}
function dismissIOSBanner() {
const banner = document.getElementById('ios-install-banner');
if (banner) {
banner.remove();
document.body.style.paddingTop = '0';
localStorage.setItem('iosBannerDismissed', 'true');
}
}
// Make dismissIOSBanner globally available
window.dismissIOSBanner = dismissIOSBanner;
// Load data from IndexedDB on page load
window.addEventListener('load', async function() {
// First, try to migrate from localStorage if data exists there
await storage.migrateFromLocalStorage();
// Load data from IndexedDB
breadData = await storage.getAllBread();
if (breadData && breadData.length > 0) {
updateBreadList();
updateBreadSelect();
// Open the first bread card by default if any exist
setTimeout(() => {
const firstCard = document.querySelector('.bread-card');
if (firstCard) {
firstCard.classList.add('active');
}
}, 100);
}
// Request persistent storage permission
const isPersisted = await storage.requestPersistentStorage();
if (isPersisted) {
console.log('Persistent storage granted - your data is protected!');
} else {
console.log('Persistent storage not granted - data may be cleared after 7 days on iOS Safari');
}
// Show iOS install banner if applicable
showIOSInstallBanner();
// Handle shared URLs
handleSharedUrl();
});