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/index.js
+++ b/public/js/index.js
@@ -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) : '&nbsp;'}</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();