Erster commit wie von Claude erstellt (unverändert)
This commit is contained in:
191
public/js/edit.js
Normal file
191
public/js/edit.js
Normal file
@@ -0,0 +1,191 @@
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const recipeId = urlParams.get('id');
|
||||
let currentRecipe = null;
|
||||
|
||||
if (recipeId) {
|
||||
document.getElementById('pageTitle').textContent = 'Rezept bearbeiten';
|
||||
document.getElementById('deleteBtn').style.display = 'inline-block';
|
||||
document.getElementById('viewRecipeBtn').style.display = 'inline-block';
|
||||
loadRecipe();
|
||||
}
|
||||
|
||||
async function loadRecipe() {
|
||||
try {
|
||||
const response = await fetch(`/api/recipes/${recipeId}`);
|
||||
if (!response.ok) throw new Error('Rezept nicht gefunden');
|
||||
|
||||
currentRecipe = await response.json();
|
||||
populateForm(currentRecipe);
|
||||
loadImages();
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Laden des Rezepts');
|
||||
}
|
||||
}
|
||||
|
||||
function populateForm(recipe) {
|
||||
document.getElementById('recipeId').value = recipe._id;
|
||||
document.getElementById('rezeptnummer').value = recipe.rezeptnummer;
|
||||
document.getElementById('bezeichnung').value = recipe.bezeichnung || '';
|
||||
document.getElementById('beschreibung').value = recipe.beschreibung || '';
|
||||
document.getElementById('kategorie').value = recipe.kategorie || '';
|
||||
document.getElementById('vorbereitung').value = recipe.vorbereitung || '';
|
||||
document.getElementById('anzahl').value = recipe.anzahl || 2;
|
||||
document.getElementById('zutaten').value = recipe.zutaten || '';
|
||||
|
||||
const zubereitungText = recipe.zubereitung
|
||||
? recipe.zubereitung.map(z => z.text).join('\n')
|
||||
: '';
|
||||
document.getElementById('zubereitung').value = zubereitungText;
|
||||
document.getElementById('kommentar').value = recipe.kommentar || '';
|
||||
}
|
||||
|
||||
async function loadImages() {
|
||||
if (!recipeId) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/images/recipe/${recipeId}`);
|
||||
if (!response.ok) return;
|
||||
|
||||
const images = await response.json();
|
||||
displayImages(images);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Bilder:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function displayImages(images) {
|
||||
const container = document.getElementById('bildvorschau');
|
||||
container.innerHTML = images.map(img => `
|
||||
<div class="bild-vorschau">
|
||||
<img src="/${img.dateiPfad}" alt="Vorschau" onclick="openLightbox('/${img.dateiPfad}')">
|
||||
<button class="bild-loeschen" onclick="deleteImage('${img._id}')">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
document.getElementById('recipeForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
rezeptnummer: document.getElementById('rezeptnummer').value,
|
||||
bezeichnung: document.getElementById('bezeichnung').value,
|
||||
beschreibung: document.getElementById('beschreibung').value,
|
||||
kategorie: document.getElementById('kategorie').value,
|
||||
vorbereitung: document.getElementById('vorbereitung').value,
|
||||
anzahl: document.getElementById('anzahl').value,
|
||||
zutaten: document.getElementById('zutaten').value,
|
||||
zubereitung: document.getElementById('zubereitung').value,
|
||||
kommentar: document.getElementById('kommentar').value
|
||||
};
|
||||
|
||||
try {
|
||||
let response;
|
||||
if (recipeId) {
|
||||
response = await fetch(`/api/recipes/${recipeId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
} else {
|
||||
response = await fetch('/api/recipes', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Fehler beim Speichern');
|
||||
}
|
||||
|
||||
alert('Rezept erfolgreich gespeichert');
|
||||
window.location.href = '/index.html';
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Speichern: ' + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('uploadImageBtn').addEventListener('click', async () => {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (!file) {
|
||||
alert('Bitte wähle zuerst ein Bild aus');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!recipeId) {
|
||||
alert('Bitte speichere zuerst das Rezept, bevor du Bilder hochlädst');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('bild', file);
|
||||
formData.append('rezeptnummer', document.getElementById('rezeptnummer').value);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/images/${recipeId}`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Upload fehlgeschlagen');
|
||||
|
||||
fileInput.value = '';
|
||||
loadImages();
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Hochladen des Bildes');
|
||||
}
|
||||
});
|
||||
|
||||
async function deleteImage(imageId) {
|
||||
if (!confirm('Möchtest du dieses Bild wirklich löschen?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/images/${imageId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Löschen fehlgeschlagen');
|
||||
|
||||
loadImages();
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Löschen des Bildes');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('deleteBtn').addEventListener('click', async () => {
|
||||
if (!confirm('Möchtest du dieses Rezept wirklich löschen?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/recipes/${recipeId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Löschen fehlgeschlagen');
|
||||
|
||||
alert('Rezept gelöscht');
|
||||
window.location.href = '/index.html';
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Löschen des Rezepts');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('viewRecipeBtn').addEventListener('click', () => {
|
||||
window.location.href = `/recipe.html?id=${recipeId}`;
|
||||
});
|
||||
|
||||
function openLightbox(src) {
|
||||
document.getElementById('lightbox').style.display = 'block';
|
||||
document.getElementById('lightbox-img').src = src;
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById('lightbox').style.display = 'none';
|
||||
}
|
||||
108
public/js/index.js
Normal file
108
public/js/index.js
Normal file
@@ -0,0 +1,108 @@
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const recipeId = urlParams.get('id');
|
||||
|
||||
if (!recipeId) {
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
|
||||
async function loadRecipe() {
|
||||
try {
|
||||
const response = await fetch(`/api/recipes/${recipeId}`);
|
||||
if (!response.ok) throw new Error('Rezept nicht gefunden');
|
||||
|
||||
const recipe = await response.json();
|
||||
displayRecipe(recipe);
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Laden des Rezepts');
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
}
|
||||
|
||||
function displayRecipe(recipe) {
|
||||
const rNummer = 'R' + String(recipe.rezeptnummer).padStart(3, '0');
|
||||
|
||||
document.getElementById('rezeptnummer').textContent = rNummer;
|
||||
document.getElementById('bezeichnung').textContent = recipe.bezeichnung;
|
||||
document.getElementById('beschreibung').innerHTML = makeClickableLinks(recipe.beschreibung || '');
|
||||
|
||||
if (recipe.bilder && recipe.bilder.length > 0) {
|
||||
document.getElementById('hauptbild').innerHTML =
|
||||
`<img class="oben" src="/${recipe.bilder[0].dateiPfad}" alt="Rezeptbild">`;
|
||||
}
|
||||
|
||||
if (recipe.vorbereitung && recipe.vorbereitung.trim()) {
|
||||
document.getElementById('vorbereitung').innerHTML =
|
||||
`<br>Vorbereitung: <span style="font-size:0.9em;">${makeClickableLinks(recipe.vorbereitung)}</span>`;
|
||||
}
|
||||
|
||||
if (recipe.zutaten && recipe.zutaten.trim()) {
|
||||
let header = '<br>Zutaten';
|
||||
if (recipe.anzahl) {
|
||||
header += ` <span style="font-size: 1.2em;">für ${recipe.anzahl} Personen:</span>`;
|
||||
}
|
||||
document.getElementById('zutatenHeader').innerHTML = header;
|
||||
document.getElementById('zutaten').textContent = recipe.zutaten;
|
||||
} else {
|
||||
document.getElementById('zutatenContainer').style.display = 'none';
|
||||
}
|
||||
|
||||
if (recipe.zubereitung && recipe.zubereitung.length > 0) {
|
||||
const maxSteps = Math.max(recipe.zubereitung.length, recipe.bilder ? recipe.bilder.length - 1 : 0);
|
||||
let html = '';
|
||||
|
||||
for (let i = 0; i < maxSteps; i++) {
|
||||
const step = recipe.zubereitung[i];
|
||||
const bild = recipe.bilder && recipe.bilder[i + 1] ? recipe.bilder[i + 1] : null;
|
||||
|
||||
html += '<tr>';
|
||||
if (bild) {
|
||||
html += `<td><img class="vergroesserbar" src="/${bild.dateiPfad}" alt="Schritt ${i+1}" onclick="openLightbox('/${bild.dateiPfad}')"></td>`;
|
||||
} else {
|
||||
html += '<td></td>';
|
||||
}
|
||||
|
||||
html += `<td style="text-align:justify;padding:20px;font-size:1.2em;">${step ? escapeHtml(step.text) : ' '}</td>`;
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
document.getElementById('zubereitungSteps').innerHTML = html;
|
||||
} else {
|
||||
document.getElementById('zubereitungContainer').style.display = 'none';
|
||||
}
|
||||
|
||||
if (recipe.kommentar && recipe.kommentar.trim()) {
|
||||
document.getElementById('kommentarContainer').innerHTML = `
|
||||
<table>
|
||||
<tr><td><br><br><span style="font-size:1.4em">Kommentar</span><br><br>
|
||||
<span style="font-size: 1.2em; display: block;">${makeClickableLinks(recipe.kommentar)}</span></td></tr>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
document.getElementById('editBtn').onclick = () => {
|
||||
window.location.href = `/edit.html?id=${recipeId}`;
|
||||
};
|
||||
}
|
||||
|
||||
function makeClickableLinks(text) {
|
||||
const urlPattern = /(?:(?:https?:\/\/)|(?:www\.))[^\s<>"'()]+/gi;
|
||||
return text.replace(urlPattern, url => `<a href="${url}" target="_blank">${url}</a>`);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function openLightbox(src) {
|
||||
document.getElementById('lightbox').style.display = 'block';
|
||||
document.getElementById('lightbox-img').src = src;
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById('lightbox').style.display = 'none';
|
||||
}
|
||||
|
||||
loadRecipe();
|
||||
108
public/js/recipe.js
Normal file
108
public/js/recipe.js
Normal file
@@ -0,0 +1,108 @@
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const recipeId = urlParams.get('id');
|
||||
|
||||
if (!recipeId) {
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
|
||||
async function loadRecipe() {
|
||||
try {
|
||||
const response = await fetch(`/api/recipes/${recipeId}`);
|
||||
if (!response.ok) throw new Error('Rezept nicht gefunden');
|
||||
|
||||
const recipe = await response.json();
|
||||
displayRecipe(recipe);
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
alert('Fehler beim Laden des Rezepts');
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
}
|
||||
|
||||
function displayRecipe(recipe) {
|
||||
const rNummer = 'R' + String(recipe.rezeptnummer).padStart(3, '0');
|
||||
|
||||
document.getElementById('rezeptnummer').textContent = rNummer;
|
||||
document.getElementById('bezeichnung').textContent = recipe.bezeichnung;
|
||||
document.getElementById('beschreibung').innerHTML = makeClickableLinks(recipe.beschreibung || '');
|
||||
|
||||
if (recipe.bilder && recipe.bilder.length > 0) {
|
||||
document.getElementById('hauptbild').innerHTML =
|
||||
`<img class="oben" src="/${recipe.bilder[0].dateiPfad}" alt="Rezeptbild">`;
|
||||
}
|
||||
|
||||
if (recipe.vorbereitung && recipe.vorbereitung.trim()) {
|
||||
document.getElementById('vorbereitung').innerHTML =
|
||||
`<br>Vorbereitung: <span style="font-size:0.9em;">${makeClickableLinks(recipe.vorbereitung)}</span>`;
|
||||
}
|
||||
|
||||
if (recipe.zutaten && recipe.zutaten.trim()) {
|
||||
let header = '<br>Zutaten';
|
||||
if (recipe.anzahl) {
|
||||
header += ` <span style="font-size: 1.2em;">für ${recipe.anzahl} Personen:</span>`;
|
||||
}
|
||||
document.getElementById('zutatenHeader').innerHTML = header;
|
||||
document.getElementById('zutaten').textContent = recipe.zutaten;
|
||||
} else {
|
||||
document.getElementById('zutatenContainer').style.display = 'none';
|
||||
}
|
||||
|
||||
if (recipe.zubereitung && recipe.zubereitung.length > 0) {
|
||||
const maxSteps = Math.max(recipe.zubereitung.length, recipe.bilder ? recipe.bilder.length - 1 : 0);
|
||||
let html = '';
|
||||
|
||||
for (let i = 0; i < maxSteps; i++) {
|
||||
const step = recipe.zubereitung[i];
|
||||
const bild = recipe.bilder && recipe.bilder[i + 1] ? recipe.bilder[i + 1] : null;
|
||||
|
||||
html += '<tr>';
|
||||
if (bild) {
|
||||
html += `<td><img class="vergroesserbar" src="/${bild.dateiPfad}" alt="Schritt ${i+1}" onclick="openLightbox('/${bild.dateiPfad}')"></td>`;
|
||||
} else {
|
||||
html += '<td></td>';
|
||||
}
|
||||
|
||||
html += `<td style="text-align:justify;padding:20px;font-size:1.2em;">${step ? escapeHtml(step.text) : ' '}</td>`;
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
document.getElementById('zubereitungSteps').innerHTML = html;
|
||||
} else {
|
||||
document.getElementById('zubereitungContainer').style.display = 'none';
|
||||
}
|
||||
|
||||
if (recipe.kommentar && recipe.kommentar.trim()) {
|
||||
document.getElementById('kommentarContainer').innerHTML = `
|
||||
<table>
|
||||
<tr><td><br><br><span style="font-size:1.4em">Kommentar</span><br><br>
|
||||
<span style="font-size: 1.2em; display: block;">${makeClickableLinks(recipe.kommentar)}</span></td></tr>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
document.getElementById('editBtn').onclick = () => {
|
||||
window.location.href = `/edit.html?id=${recipeId}`;
|
||||
};
|
||||
}
|
||||
|
||||
function makeClickableLinks(text) {
|
||||
const urlPattern = /(?:(?:https?:\/\/)|(?:www\.))[^\s<>"'()]+/gi;
|
||||
return text.replace(urlPattern, url => `<a href="${url}" target="_blank">${url}</a>`);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function openLightbox(src) {
|
||||
document.getElementById('lightbox').style.display = 'block';
|
||||
document.getElementById('lightbox-img').src = src;
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById('lightbox').style.display = 'none';
|
||||
}
|
||||
|
||||
loadRecipe();
|
||||
Reference in New Issue
Block a user