dongho/Munich-news
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Dongho Kim
2025-11-12 22:33:56 +01:00
parent 95669fd211
commit 45df834d5b
12 changed files with 1172 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
frontend/public/preferences.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Preferences - Munich News Daily</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#667eea',
secondary: '#764ba2',
}
}
}
}
</script>
</head>
<body class="bg-gradient-to-br from-primary to-secondary min-h-screen">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Header -->
<header class="text-center text-white py-12">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4">📰 Munich News Daily</h1>
<p class="text-xl opacity-95">Manage Your Preferences</p>
</header>
<!-- Preferences Form -->
<div class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
<div id="loadingState" class="text-center py-10">
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
<p class="mt-4 text-gray-600">Loading your preferences...</p>
</div>
<div id="emailForm" class="hidden">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Enter Your Email</h2>
<p class="text-gray-600 mb-6">Enter your email address to manage your newsletter preferences.</p>
<input
type="email"
id="emailInput"
placeholder="your@email.com"
class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary mb-4"
>
<button
onclick="loadPreferences()"
class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition"
>
Load Preferences
</button>
<p id="emailError" class="mt-4 text-sm text-red-600 hidden"></p>
</div>
<div id="preferencesForm" class="hidden">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Your Preferences</h2>
<p class="text-gray-600 mb-6">Email: <strong id="userEmail"></strong></p>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3">Choose your interests:</h3>
<div class="space-y-3" id="categoryCheckboxes">
<!-- Categories will be loaded dynamically -->
</div>
</div>
<button
onclick="savePreferences()"
class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition mb-3"
>
Save Preferences
</button>
<button
onclick="showEmailForm()"
class="w-full px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg transition"
>
Change Email
</button>
<p id="saveMessage" class="mt-4 text-sm min-h-[20px]"></p>
</div>
</div>
<!-- Back to Home -->
<div class="text-center">
<a href="/" class="text-white underline hover:opacity-80">← Back to Home</a>
</div>
</div>
<script>
let currentEmail = '';
let availableCategories = [];
// Load categories from API
async function loadCategories() {
try {
const response = await fetch('/api/categories');
const data = await response.json();
availableCategories = data.categories || [];
renderCategories();
} catch (error) {
console.error('Failed to load categories:', error);
// Fallback to default categories
availableCategories = [
{ id: 'general', name: 'Top Trending', description: 'Top trending news and updates', icon: '🔥' },
{ id: 'local', name: 'Local Events', description: 'Local events and community news', icon: '🏛️' },
{ id: 'sports', name: 'Sports', description: 'Sports news', icon: '⚽' }
];
renderCategories();
}
}
function renderCategories(selectedCategories = []) {
const container = document.getElementById('categoryCheckboxes');
container.innerHTML = '';
availableCategories.forEach(category => {
const isChecked = selectedCategories.length === 0 || selectedCategories.includes(category.id);
const label = document.createElement('label');
label.className = 'flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-primary transition';
label.innerHTML = `
<input type="checkbox" value="${category.id}" ${isChecked ? 'checked' : ''} class="w-5 h-5 text-primary rounded focus:ring-2 focus:ring-primary">
<div>
<div class="font-semibold text-gray-800">${category.icon} ${category.name}</div>
<div class="text-sm text-gray-500">${category.description}</div>
</div>
`;
container.appendChild(label);
});
}
// Check if email is in URL parameter
window.addEventListener('DOMContentLoaded', async () => {
// Load categories first
await loadCategories();
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get('email');
if (email) {
document.getElementById('emailInput').value = email;
loadPreferences();
} else {
showEmailForm();
}
});
function showEmailForm() {
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('emailForm').classList.remove('hidden');
document.getElementById('preferencesForm').classList.add('hidden');
}
async function loadPreferences() {
const emailInput = document.getElementById('emailInput');
const email = emailInput.value.trim().toLowerCase();
const emailError = document.getElementById('emailError');
if (!email || !email.includes('@')) {
emailError.textContent = 'Please enter a valid email address';
emailError.classList.remove('hidden');
return;
}
emailError.classList.add('hidden');
currentEmail = email;
// Show loading
document.getElementById('emailForm').classList.add('hidden');
document.getElementById('loadingState').classList.remove('hidden');
try {
// Try to get subscriber info (we'll need to add this endpoint)
const response = await fetch(`/api/subscribers/${encodeURIComponent(email)}`);
if (response.ok) {
const data = await response.json();
const categories = data.categories || [];
// Update UI
document.getElementById('userEmail').textContent = email;
// Render categories with user's selections
renderCategories(categories);
// Show preferences form
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('preferencesForm').classList.remove('hidden');
} else if (response.status === 404) {
// Email not found - show preferences form with all categories checked (new subscription)
document.getElementById('userEmail').textContent = email;
// Render all categories checked by default
renderCategories([]);
// Show preferences form
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('preferencesForm').classList.remove('hidden');
// Show info message
const saveMessage = document.getElementById('saveMessage');
saveMessage.textContent = 'New subscriber - select your preferences and save to subscribe!';
saveMessage.className = 'mt-4 text-sm text-blue-600';
} else {
throw new Error('Failed to load preferences');
}
} catch (error) {
emailError.textContent = 'Error loading preferences. Please try again.';
emailError.classList.remove('hidden');
showEmailForm();
}
}
async function savePreferences() {
const saveMessage = document.getElementById('saveMessage');
const checkboxes = document.querySelectorAll('#preferencesForm input[type="checkbox"]:checked');
const categories = Array.from(checkboxes).map(cb => cb.value);
if (categories.length === 0) {
saveMessage.textContent = 'Please select at least one category';
saveMessage.className = 'mt-4 text-sm text-red-600';
return;
}
saveMessage.textContent = 'Saving...';
saveMessage.className = 'mt-4 text-sm text-gray-600';
try {
const response = await fetch('/api/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: currentEmail,
categories: categories
})
});
const data = await response.json();
if (response.ok) {
saveMessage.textContent = '✓ Preferences saved successfully!';
saveMessage.className = 'mt-4 text-sm text-green-600 font-semibold';
} else {
saveMessage.textContent = data.error || 'Failed to save preferences';
saveMessage.className = 'mt-4 text-sm text-red-600';
}
} catch (error) {
saveMessage.textContent = 'Network error. Please try again.';
saveMessage.className = 'mt-4 text-sm text-red-600';
}
}
</script>
</body>
</html>