Erster commit wie von Claude erstellt (unverändert)
This commit is contained in:
331
public/css/style.css
Normal file
331
public/css/style.css
Normal file
@@ -0,0 +1,331 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #fcf6e3;
|
||||
color: #5b4636;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.custom-button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #bb7e19;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-button:hover {
|
||||
background-color: #a06f15;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #d65c5c;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: #b83d3d;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.search-container {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-container form {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-container input[type="text"] {
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
width: 15ch;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-container button {
|
||||
padding: 8px 16px;
|
||||
background: #bb7e19;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.search-container button:hover {
|
||||
background: #a06d15;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table-aufgaben {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-aufgaben th,
|
||||
.table-aufgaben td {
|
||||
padding: 8px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-aufgaben th:first-child,
|
||||
.table-aufgaben td:first-child {
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-aufgaben th a {
|
||||
color: #8b5a2b;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-aufgaben th a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table-aufgaben td.bezeichnung {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-aufgaben td.bezeichnung a {
|
||||
color: #c17e1b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.table-aufgaben td.bezeichnung a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table-aufgaben th.kategorie,
|
||||
.table-aufgaben td.kategorie {
|
||||
width: 30%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-aufgaben tr {
|
||||
background: #fbeee6;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-container table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.form-container th,
|
||||
.form-container td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #8b5a2b;
|
||||
}
|
||||
|
||||
.form-container input[type="text"],
|
||||
.form-container input[type="number"],
|
||||
.form-container textarea,
|
||||
.form-container select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
color: #5b4636;
|
||||
}
|
||||
|
||||
.form-container textarea {
|
||||
height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.bilder-container {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bild-vorschau {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.bild-vorschau img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bild-loeschen {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #d65c5c;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Lightbox */
|
||||
#lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
#lightbox img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#lightbox .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: #fff;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Recipe View */
|
||||
.recipe-container {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.recipe-container img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.recipe-container img.oben {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.recipe-container img.vergroesserbar {
|
||||
width: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-container img.vergroessert {
|
||||
width: 400px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.recipe-container pre.zutaten {
|
||||
font-size: 1.2em;
|
||||
font-family: Arial, sans-serif;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.recipe-container .unter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.recipe-container .title {
|
||||
font-size: 1.6em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.neu-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.neu {
|
||||
background: #bb7e19;
|
||||
color: #fff;
|
||||
padding: 10px 22px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
box-shadow: 1px 1px 4px #efd7b1;
|
||||
}
|
||||
|
||||
.file-upload-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-upload-container input[type="file"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload-btn {
|
||||
background: #bb7e19;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
87
public/edit.html
Normal file
87
public/edit.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rezept bearbeiten</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<a href="/index.html" class="custom-button">Zurück zur Übersicht</a>
|
||||
<button id="viewRecipeBtn" class="custom-button" style="display:none;">Rezept anzeigen</button>
|
||||
|
||||
<h1 id="pageTitle">Neues Rezept</h1>
|
||||
|
||||
<form id="recipeForm">
|
||||
<input type="hidden" id="recipeId" name="id">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Rezeptnummer:</th>
|
||||
<td><input type="number" id="rezeptnummer" name="rezeptnummer" required></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bezeichnung:</th>
|
||||
<td><input type="text" id="bezeichnung" name="bezeichnung"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Beschreibung:</th>
|
||||
<td><textarea id="beschreibung" name="beschreibung"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kategorie:</th>
|
||||
<td><input type="text" id="kategorie" name="kategorie"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Vorbereitung:</th>
|
||||
<td><textarea id="vorbereitung" name="vorbereitung"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anzahl der Personen:</th>
|
||||
<td><input type="number" id="anzahl" name="anzahl" value="2" min="0" required></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zutaten:</th>
|
||||
<td><textarea id="zutaten" name="zutaten"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zubereitung:</th>
|
||||
<td><textarea id="zubereitung" name="zubereitung"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kommentar:</th>
|
||||
<td><textarea id="kommentar" name="kommentar"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bilder hochladen:</th>
|
||||
<td>
|
||||
<div class="file-upload-row">
|
||||
<div class="file-upload-container">
|
||||
<button type="button" class="file-upload-btn" onclick="document.getElementById('fileInput').click()">
|
||||
Bild auswählen
|
||||
</button>
|
||||
<input type="file" id="fileInput" accept=".jpg,.jpeg,.png" style="display:none;">
|
||||
</div>
|
||||
<button type="button" id="uploadImageBtn" class="save-single-image-btn">Bild speichern</button>
|
||||
</div>
|
||||
<div id="bildvorschau" class="bilder-container"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="button-container">
|
||||
<button type="submit" class="submit-btn">Speichern</button>
|
||||
<button type="button" id="deleteBtn" class="delete-btn" style="display:none;">Rezept löschen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="lightbox" onclick="closeLightbox()">
|
||||
<span class="close">×</span>
|
||||
<img id="lightbox-img" src="" alt="Vergrößerte Ansicht">
|
||||
</div>
|
||||
|
||||
<script src="/js/edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
public/index.html
Normal file
46
public/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rezepte Übersicht</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="search-container">
|
||||
<form id="searchForm">
|
||||
<input type="text" id="searchInput" placeholder="Suche..." />
|
||||
<button type="submit" class="search-btn">Suche</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabelle-container">
|
||||
<table class="table-aufgaben">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="rezeptnr">
|
||||
<a href="#" data-sort="rezeptnummer">Rezeptnr.</a>
|
||||
</th>
|
||||
<th class="bezeichnung">
|
||||
<a href="#" data-sort="bezeichnung">Bezeichnung</a>
|
||||
</th>
|
||||
<th class="kategorie">
|
||||
<a href="#" data-sort="kategorie">Kategorie</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recipeTable">
|
||||
<tr><td colspan="3">Lade Rezepte...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="neu-container">
|
||||
<a href="/edit.html" class="neu">Neues Rezept</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
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();
|
||||
46
public/recipe.html
Normal file
46
public/recipe.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rezept</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body class="sans">
|
||||
<table width="800px" align="center" border="0">
|
||||
<tr><td>
|
||||
<a href="/index.html" class="custom-button">Zurück zur Übersicht</a>
|
||||
<button id="editBtn" class="custom-button">Rezept editieren</button>
|
||||
</td></tr>
|
||||
<tr><td>
|
||||
<table align="left" border="0">
|
||||
<tr><td id="rezeptnummer" style="font-size:1.6em"></td></tr>
|
||||
<tr><td id="bezeichnung" style="font-size:1.6em"></td></tr>
|
||||
<tr><td id="beschreibung" class="unter"></td></tr>
|
||||
<tr><td id="hauptbild" align="left"></td></tr>
|
||||
<tr><td id="vorbereitung" class="unter"></td></tr>
|
||||
<tr><td id="zutatenHeader" class="unter"></td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td id="zutatenContainer">
|
||||
<table align="center" border="0">
|
||||
<tr><td><pre id="zutaten" class="zutaten"></pre></td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td id="zubereitungContainer">
|
||||
<table align="left" border="0">
|
||||
<tr><td class="unter" align="left" colspan="2"><br>Zubereitung<br><br></td></tr>
|
||||
<tbody id="zubereitungSteps"></tbody>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td id="kommentarContainer"></td></tr>
|
||||
</table>
|
||||
|
||||
<div id="lightbox" onclick="closeLightbox()">
|
||||
<span class="close" onclick="closeLightbox()">×</span>
|
||||
<img id="lightbox-img" src="" alt="Vergrößerte Ansicht">
|
||||
</div>
|
||||
|
||||
<script src="/js/recipe.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user