Erster commit wie von Claude erstellt (unverändert)

2025-10-03 18:16:58 +02:00
commit b3160de204
23 changed files with 1955 additions and 0 deletions
--- a/public/js/edit.js
+++ b/public/js/edit.js
@@ -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';
+}