diff options
Diffstat (limited to 'index.php')
| -rw-r--r-- | index.php | 753 |
1 files changed, 753 insertions, 0 deletions
diff --git a/index.php b/index.php new file mode 100644 index 0000000..e51ad61 --- /dev/null +++ b/index.php @@ -0,0 +1,753 @@ +<!DOCTYPE html> +<html lang="de"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Savoy Cocktail Database</title> + <!-- Bootstrap 4 CDN --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> + <link rel="stylesheet" href="dark-mode.css"> + <style> + .cocktail-card { transition: all 0.3s; } + .cocktail-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); } + .ingredient-badge { font-size: 0.8em; margin: 2px; } + .search-result { min-height: 100px; } +.zutaten-preview { + max-height: 60px; + overflow: hidden; +} +.ingredient-badge { + font-size: 0.75em; + padding: 0.4em 0.6em; +} + +/* Bootstrap 4: Gap zwischen Suchfeldern */ +.card-body .row > [class*="col-"] { + padding-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .card-body .row > [class*="col-md"] { + padding-bottom: 1rem; + } +} +.zutat-item { + display: flex; + align-items: center; + margin-bottom: 0.5rem; + padding: 0.25rem 0; + border-bottom: 1px solid #eee; +} +.zutat-item:last-child { border-bottom: none; } +.zutat-item strong { + min-width: 70px; + color: #ffc107; + font-size: 0.95rem; +} +/* Badge + zutat_de PERFECT getrennt */ +.ingredient-badge { + font-size: 0.85rem !important; + padding: 0.45em 0.75em !important; + margin-right: 0.75rem !important; + font-weight: 600 !important; + min-width: 75px; + text-align: center; +} + +.zutat-hilfe { + font-size: 0.88rem !important; + color: #adb5bd !important; /* Hellgrau */ + font-style: italic; + padding-left: 0.25rem; + border-left: 2px solid #ffc107; + margin-left: 0.5rem; + padding: 0.25rem 0.5rem; + background: rgba(255,193,7,0.1); + border-radius: 4px; +} + +/* Hover-Effekt */ +.zutat-item:hover .zutat-hilfe { + color: #ffc107 !important; + background: rgba(255,193,7,0.2); +} + +.zutat { + color: #000; +} +.dark-mode .zutat { + color: #ffffff !important; +} +.zutat-muted { + color: #cccccc; +} +.dark-mode .zutat-muted { + color: #6c757d !important; +} + +/* Dark Mode Button */ +body.dark-mode .mode-btn { + border: 2px solid #ffffff !important; + color: #ffffff !important; + background: rgba(0,0,0,0.3) !important; +} + +body.dark-mode .mode-btn:hover { + background: rgba(255,255,255,0.1) !important; +} + +/* Light Mode Button */ +body:not(.dark-mode) .mode-btn { + border: 2px solid #212529 !important; + color: #212529 !important; + background: rgba(248,249,250,0.9) !important; +} + +body:not(.dark-mode) .mode-btn:hover { + background: rgba(33,37,41,0.1) !important; +} + + + </style> +</head> +<body class="dark-mode"> + <div class="container-fluid py-4"> + <!-- Header --> + <div class="row mb-5"> + <div class="col-12 text-center"> + <h1 class="display-4 mb-3"><i class="fas fa-cocktail text-warning"></i> Savoy Cocktail Book</h1> + <p class="lead text-muted">Die klassische Cocktail-Bibel von Harry Craddock (1930)</p> + </div> + </div> + +<!-- Toggle Button (oben rechts) --> +<div id="themeToggle" class="position-fixed" style="top: 20px; right: 20px; z-index: 9999;"> + <button id="darkModeBtn" class="mode-btn btn btn-sm btn-outline-light rounded-circle p-2 shadow"> + <i class="fas fa-sun"></i> + </button> +</div + + <!-- Suchformular --> + <div class="row mb-4"> + <div class="col-12"> + <div class="card shadow"> + <div class="card-body p-3 p-md-4"> + <div class="row g-2 g-md-3"> + <div class="col-md-3 col-12"> + <div class="input-group"> + <div class="input-group-prepend"> + <span class="input-group-text"><i class="fas fa-search"></i></span> + </div> + <input type="text" class="form-control form-control-lg" id="searchName" placeholder="Cocktail suchen... (z.B. Martini, Daiquiri)"> + </div> + </div> + <div class="col-md-3 col-12"> + <div class="input-group"> + <div class="input-group-prepend"> + <span class="input-group-text"><i class="fas fa-utensils"></i></span> + </div> + <input type="text" class="form-control form-control-lg" id="searchZutaten" + placeholder="Zutaten (z.B. Gin Rum Zitrone)"> + <div class="input-group-append"> + <span class="input-group-text"><small>UND</small></span> + </div> + </div> + </div> + <div class="col-md-2 col-12"> + <select class="form-control form-control-lg" id="searchKategorie"> + <option value="">Alle Kategorien</option> + <option value="Gin">Gin</option> + <option value="Rum">Rum</option> + <option value="Whisky">Whisky</option> + <option value="Bitter">Bitter</option> + <option value="Fruchtsaft">Fruchtsaft</option> + <option value="Kräuterlikör">Kräuterlikör</option> + </select> + </div> + <div class="col-md-2 col-12"> + <input type="number" class="form-control form-control-lg" id="searchSeite" placeholder="Seite" min="1" max="300"> + </div> + <div class="col-md-2 col-6 col-sm-4"> + <button class="btn btn-warning btn-lg btn-block" onclick="searchCocktails()"> + <i class="fas fa-search"></i> Suchen + </button> + </div> + </div> + </div> + </div> + </div> + </div> + + <!-- Filter-Ergebnisse --> + <div class="row mb-4"> + <div class="col-12"> + <div class="d-flex justify-content-between align-items-center"> + <h4 id="resultsTitle" class="mb-0"><i class="fas fa-list"></i> Alle Cocktails</h4> + <span id="resultsCount" class="badge badge-secondary">0 Ergebnisse</span> + </div> + </div> + </div> + + <!-- Ergebnisse --> + <div class="row" id="cocktailResults"> + <div class="col-12 text-center py-5"> + <div class="spinner-border text-warning" role="status"> + <span class="sr-only">Laden...</span> + </div> + <p class="mt-3 text-muted">Cocktails werden geladen...</p> + </div> + </div> + + <!-- Detail-Modal --> +<!-- + <div class="modal fade" id="cocktailModal" tabindex="-1"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + <div class="modal-header bg-warning text-dark"> + <h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5> + <button type="button" class="close" data-dismiss="modal"> + <span>×</span> + </button> + </div> + <div class="modal-body" id="modalBody"> + <div class="form-group mb-3"> + <div class="btn-group btn-group-toggle w-100" data-toggle="buttons"> + <label class="btn btn-outline-primary active ml-view"> + <input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml + </label> + <label class="btn btn-outline-secondary original-view"> + <input type="radio" name="zutatenView" id="originalView"> Original + </label> + </div> + </div> + + <div id="modalZutaten" class="zutaten-list"></div> + + ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p>${cocktail.rezept}</p>` : ''} + </div> + </div> + </div> + </div> +--> + + <!-- Detail-Modal --> + <div class="modal fade" id="cocktailModal" tabindex="-1"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + <div class="modal-header bg-warning text-dark"> + <h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5> + <button type="button" class="close" data-dismiss="modal"> + <span>×</span> + </button> + </div> + <div class="modal-body"> + <!-- TOGGLE (PERFEKT!) --> + <div class="form-group mb-3"> + <!-- + <div class="btn-group btn-group-toggle w-100" data-toggle="buttons"> + <label class="btn btn-outline-primary active ml-view"> + <input type="radio" name="zutatenView" id="mlView" checked> + <i class="fas fa-tint"></i> ml + </label> + <label class="btn btn-outline-secondary original-view"> + <input type="radio" name="zutatenView" id="originalView"> Original + </label> + </div> + --> + <div class="btn-group w-100 mb-3" id="zutatenToggle"> + <button type="button" class="btn btn-outline-warning ml-view w-50" data-view="ml"> + <i class="fas fa-tint"></i> ml (modern) + </button> + <button type="button" class="btn btn-outline-warning original-view w-50" data-view="original"> + <i class="fas fa-balance-scale"></i> + <i class="fas fa-wine-glass"></i> + Parts & Glasses (original) + </button> + </div> + + </div> + + <!-- **Container zum Füllen (PERFEKT!)** --> + <div id="modalInfo" class="mb-3"></div> + <h6>Zutaten:</h6> + <div id="modalZutaten" class="zutaten-list mb-4"></div> + <div id="modalRezept"></div> <!-- ← Rezept hier! --> + </div> + </div> + </div> + </div> + </div> + + + +<!-- Bootstrap 4 + VOLLSTÄNDIGES jQuery (NICHT slim!) --> +<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> +<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> + + <script> + let allCocktails = []; + + function loadAllCocktails() { + $.getJSON('api_cocktails.php', function(data) { + allCocktails = data; + displayCocktails(allCocktails); + updateResultsCount(allCocktails.length); + }).fail(function() { + $('#cocktailResults').html('<div class="col-12 text-center py-5"><div class="alert alert-danger">Fehler beim Laden der Cocktails!</div></div>'); + }); + } + + +function updateResultsCount(count) { + $('#resultsCount').html(`<i class="fas fa-cocktail"></i> ${count} Cocktails`); + //$('#resultsTitle').html(`<i class="fas fa-list"></i> Alle Cocktails (${count})`); +} + +function searchCocktails() { + const name = $('#searchName').val().toLowerCase(); + const kategorie = $('#searchKategorie').val(); + const seite = $('#searchSeite').val(); + const zutatenSuche = $('#searchZutaten').val().toLowerCase().trim(); + + const filtered = allCocktails.filter(cocktail => { + const matchesName = !name || cocktail.name.toLowerCase().includes(name); + const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie); + const matchesSeite = !seite || cocktail.seite == seite; + + // 🔍 MULTI-ZUTATEN-SUCHE (jede Zutat muss vorkommen) + let matchesZutaten = true; + if (zutatenSuche) { + const gesuchteZutaten = zutatenSuche.split(/\s+/).filter(w => w.length > 0); + matchesZutaten = gesuchteZutaten.every(zutat => + cocktail.zutaten.some(ing => + ing.zutat.toLowerCase().includes(zutat) || + ing.kategorie.toLowerCase().includes(zutat) + ) + ); + } + + return matchesName && matchesKategorie && matchesSeite && matchesZutaten; + }); + + displayCocktails(filtered); + $('#resultsCount').text(filtered.length + ' Ergebnisse'); + $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse'); +} + +/* + function searchCocktails() { + const name = $('#searchName').val().toLowerCase(); + const kategorie = $('#searchKategorie').val(); + const seite = $('#searchSeite').val(); + + const filtered = allCocktails.filter(cocktail => { + const matchesName = !name || cocktail.name.toLowerCase().includes(name); + const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie); + const matchesSeite = !seite || cocktail.seite == seite; + + return matchesName && matchesKategorie && matchesSeite; + }); + + displayCocktails(filtered); + $('#resultsCount').text(filtered.length + ' Ergebnisse'); + $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse'); + } +*/ + +function formatiereZutaten(z) { + if (z.einheit === null && z.kategorie === 'Ei') { + output = ''; + } else if (z.einheit === 'Dash') { + output = z.menge_anteil + " " + z.einheit; + } else if (z.einheit === 'piece') { + output = ""; + } else { + output = z.menge_ml ? z.menge_ml + " ml" : (z.original_text || '—'); + } + + return output; +} + +function displayCocktails(cocktails) { + let html = ''; + cocktails.forEach(cocktail => { + // 🛡️ Sichere Zutaten-Anzahl + const zutatenCount = cocktail.zutaten ? cocktail.zutaten.length : (cocktail.zutaten_count || 0); + + // Top 3 Zutaten für Vorschau + let topZutatenHtml = ''; + if (cocktail.zutaten && cocktail.zutaten.length > 0) { + const top3 = cocktail.zutaten.slice(0, 3); + top3.forEach(z => { + output = formatiereZutaten(z); + topZutatenHtml += ` + <span class="badge badge-${getKategorieColor(z.kategorie)} ingredient-badge mr-1 mb-1"> + <span class="menge_ml"> + ${output} + </span> ${z.zutat} + </span> + `; + }); + if (cocktail.zutaten.length > 3) { + topZutatenHtml += `<span class="badge badge-light ingredient-badge mr-1 mb-1">+${zutatenCount-3}</span>`; + } + } + + html += ` + <div class="col-lg-4 col-md-6 mb-4"> + <div class="card cocktail-card h-100 shadow-sm border-0"> + <div class="card-body"> + <h5 class="card-title">${cocktail.name}</h5> + <p class="text-muted small mb-2"> + <i class="fas fa-utensils"></i> ${zutatenCount} Zutaten + <i class="fas fa-book"></i> Seite ${cocktail.seite || '?'} | + </p> + + <!-- ZUTATEN VORSCHAU --> + <div class="zutaten-preview mb-3"> + ${topZutatenHtml} + </div> + + <p class="card-text small mb-3">${cocktail.zubereitung || cocktail.zubereitung}</p> + + <button class="btn btn-warning btn-sm cocktail-detail-btn" data-action="cocktail-detail" data-id="${cocktail.id}"> + <i class="fas fa-eye"></i> Alle Zutaten & Details + </button> + </div> + </div> + </div> + `; + }); + + if (cocktails.length === 0) { + html = '<div class="col-12"><div class="alert alert-info text-center">Keine Cocktails gefunden.</div></div>'; + } + + $('#cocktailResults').html(html); + +} + + + function showCocktailDetail(id) { +$('#searchName, #searchZutaten, #searchKategorie, #searchSeite').off('input change'); + $.getJSON(`api_cocktail.php?id=${id}`, function(cocktail) { + + // **ML-Ansicht (KORREKT):** + currentCocktailMlZutaten = cocktail.zutaten.map(z => { + const output = formatiereZutaten(z); + return `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;"> + <!-- Badge (kompakt) --> + <span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1" + style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;"> + ${output || (z.menge_anteil + (z.einheit ? ` ${z.einheit}` : '')) || ''} + </span> + <!-- Zutat (HOHER KONTRAST) --> + <div class="flex-grow-1 pr-3" style="max-width: 300px;"> + <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div> + <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small> + </div> + </div>` + }).join(''); +/* + ${z.einheit === 'Dash' + ? `${z.menge_anteil} ${z.einheit}` + : (z.menge_ml ? `${z.menge_ml} ml` : (z.original_text || '—'))} +*/ + + currentCocktailOriginalZutaten = cocktail.zutaten.map(z => + `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;"> + <!-- Badge (kompakt) --> + <span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1" + style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;"> + ${z.menge_anteil} ${z.einheit ? ` ${z.einheit}` : ''} + </span> + <!-- Zutat (HOHER KONTRAST) --> + <div class="flex-grow-1 pr-3" style="max-width: 300px;"> + <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div> + <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small> + </div> + </div>` + ).join(''); + //style="background: #ffc107 !important; color: #000 !important; min-width: 60px; font-size: 0.9rem;"> + //${z.original_text || `${z.menge_anteil} ${z.einheit}`} + + + $('#modalTitle').html(`<i class="fas fa-cocktail"></i> ${cocktail.name}`); + $('#modalZutaten').html(currentCocktailMlZutaten); + + // Info-Bereich + $('#modalInfo').html(` + <div class="row mb-4"> + <div class="col-md-4"> + <h6><i class="fas fa-utensils text-muted"></i> ${cocktail.zutaten.length} Zutaten</h6> + <h6><i class="fas fa-book text-muted"></i> Seite ${cocktail.seite}</h6> + </div> + </div> + `); + + $('#modalRezept').html(` + <h6><i class="fas fa-concierge-bell"></i> Zubereitung:</h6> + <p class="lead">${cocktail.zubereitung}</p> + `); + +$('#zutatenToggle .btn').removeClass('active btn-warning') + .addClass('btn-outline-warning btn-outline-warning'); +$('#zutatenToggle .ml-view').addClass('active btn-warning') + .removeClass('btn-outline-warning'); + + $('#cocktailModal').modal('show'); + + // **Toggle sofort aktivieren** + setTimeout(() => { + $('#zutatenToggle .ml-view').addClass('active btn-warning').removeClass('btn-outline-warning'); + }, 100); + }); + +// **WICHTIG: NACH Modal-ZU Events WIEDER AN!** + $('#cocktailModal').one('hidden.bs.modal', function() { + // Live-Suche WIEDER AKTIVIEREN + $('#searchName, #searchZutaten').on('input', function() { + let searchTimeout; + clearTimeout(searchTimeout); + searchTimeout = setTimeout(searchCocktails, 300); + }); + + $('#searchKategorie, #searchSeite').on('change', searchCocktails); + }) + + } + + function getKategorieColor(kategorie) { + const colors = { + 'Gin': 'primary', + 'Rum': 'success', + 'Whisky': 'warning', + 'Bitter': 'danger', + 'Fruchtsaft': 'info', + 'Kräuterlikör': 'secondary' + }; + //return colors[kategorie] || 'light'; + return 'light'; + } + + // Enter-Taste für Suche + $('#searchName, #searchSeite').keypress(function(e) { + if (e.which == 13) searchCocktails(); + }); + // Live-Suche bei Eingabe + // ✅ RICHTIG - NUR 'input' für Text + 'change' für Select: + $('#searchName, #searchZutaten').on('input', function() { + searchCocktails(); + }); + + $('#searchKategorie, #searchSeite').on('change', function() { + searchCocktails(); + }); + + // Nach allCocktails laden: + async function loadKategorien() { + try { + const response = await fetch('api_kategorien.php'); + const kategorien = await response.json(); + + const select = $('#searchKategorie'); + select.empty(); + select.append('<option value="">Alle Kategorien</option>'); + + kategorien.forEach(kat => { + select.append(`<option value="${kat}">${kat}</option>`); + }); + } catch(e) { + console.log('Kategorien laden fehlgeschlagen'); + } + } + + // Beim Laden aufrufen: + $(document).ready(function() { + loadAllCocktails(); // Bestehende Funktion + loadKategorien(); // NEU! + // Bootstrap Buttons initialisieren + $('.btn-group-toggle').button(); + + // Toggle-Event für Zutaten-Wechsel + $(document).on('change', '[name="zutatenView"]', function() { + if ($(this).attr('id') === 'mlView') { + $('#modalZutaten').html(currentCocktailMlZutaten); + } else { + $('#modalZutaten').html(currentCocktailOriginalZutaten); + } + }); + $(document).on('click', '#zutatenToggle .btn', function() { + // Active Klasse wechseln + $('#zutatenToggle .btn').removeClass('active btn-warning').addClass('btn-outline-warning btn-outline-warning'); + $(this).addClass('active btn-warning').removeClass('btn-outline-warning btn-outline-warning'); + + // Zutaten wechseln + if ($(this).data('view') === 'ml') { + $('#modalZutaten').html(currentCocktailMlZutaten); + } else { + $('#modalZutaten').html(currentCocktailOriginalZutaten); + } + }); + // NUR HIER - EINMALIG! + $(document).on('click', '.cocktail-detail-btn', function(e) { + e.preventDefault(); + const id = $(this).data('id'); + showCocktailDetail(id); + return false; + }); + // **Nach DOM-Update Buttons "wecken"** + $(document).on('cocktails:updated', function() { + $('.cocktail-detail-btn').css('pointer-events', 'auto'); + }); +$(document).off('click', '[data-id]'); +$(document).on('click', '[data-id]', function(e) { + e.preventDefault(); + e.stopPropagation(); + const id = $(this).data('id'); + showCocktailDetail(id); + return false; +}); + + // 1. DARK MODE BEIM LADEN (Default) + /* + $('body').addClass('dark-mode'); + $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun'); + localStorage.setItem('darkMode', 'enabled'); + + // 2. TOGGLE: Dark → Light (SUN → MOON) + $('#darkModeBtn').on('click', function() { + $('body').toggleClass('dark-mode'); + + if ($('body').hasClass('dark-mode')) { + // Dark aktiv → Icon Sonne + localStorage.setItem('darkMode', 'enabled'); + $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun'); + } else { + // **LIGHT MODUS!** → Icon Mond + localStorage.setItem('darkMode', 'disabled'); + $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon'); + } +}); +*/ + // **1. LocalStorage prüfen** + const savedMode = localStorage.getItem('darkMode'); + + if (savedMode === 'enable') { + $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun'); + // Light Mode gespeichert + //$('body').removeClass('dark-mode'); + } else if (savedMode === 'disabled'){ + $('body').removeClass('dark-mode'); // Light aktiv + $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon'); + // **LIGHT MODE DEFAULT** (auch bei null/undefined/enabled) + //localStorage.setItem('darkMode', 'disabled'); // Default setzen + } else { + $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun'); + } + + + // **2. TOGGLE (Light ↔ Dark)** + $('#darkModeBtn').on('click', function() { + $('body').toggleClass('dark-mode'); + + if ($('body').hasClass('dark-mode')) { + // Dark aktiv → Sonne + localStorage.setItem('darkMode', 'enabled'); + $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun'); + } else { + // Light aktiv → Mond + localStorage.setItem('darkMode', 'disabled'); + $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon'); + } + }); + + }); + +let currentModalView = 'ml'; // Globaler State + +// Globale Variablen für aktuelle Zutaten (Performance) +let currentCocktailMlZutaten = ''; +let currentCocktailOriginalZutaten = ''; + +function getMlZutaten() { return currentCocktailMlZutaten; } +function getOriginalZutaten() { return currentCocktailOriginalZutaten; } + +function displayModal(cocktail) { + // Zutaten VORAB berechnen + currentCocktailMlZutaten = cocktail.zutaten.map(z => + z.menge_ml > 0 ? `<div class="zutat-item"><strong>${z.menge_ml.toFixed(0)} ml</strong> ${z.zutat}</div>` : `<div class="zutat-item">${z.zutat}</div>` + ).join(''); + + currentCocktailOriginalZutaten = cocktail.zutaten.map(z => + `<div class="zutat-item"><strong>${z.original_text || ''}</strong> ${z.zutat}</div>` + ).join(''); + + // Zutaten für BEIDE Ansichten vorbereiten + const mlZutaten = cocktail.zutaten.map(zutat => { + const menge_ml = zutat.menge_ml; + if (menge_ml && menge_ml > 0) { + return `<div class="zutat-item"><strong>${menge_ml.toFixed(0)} ml ${zutat.zutat}</strong> ${zutat.zutat_de}</div>`; + } + return `<div class="zutat-item">${zutat.zutat}</div>`; + }).join(''); + + const originalZutaten = cocktail.zutaten.map(zutat => { + return `<div class="zutat-item"><strong>${zutat.original_text || zutat.menge_anteil || ''}</strong> ${zutat.zutat}</div>`; + }).join(''); + + // Modal-HTML mit aktueller Ansicht + /* + const modalHtml = ` + <div class="modal-header"> + <h5 class="modal-title">${cocktail.name} <small class="text-muted">(Seite ${cocktail.seite})</small></h5> + <button type="button" class="close" data-dismiss="modal">×</button> + </div> + <div class="modal-body"> + <div class="form-group mb-3"> + <div class="btn-group btn-group-toggle w-100" data-toggle="buttons"> + <label class="btn btn-outline-primary active ml-view"> + <input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml + </label> + <label class="btn btn-outline-secondary original-view"> + <input type="radio" name="zutatenView" id="originalView"> Original + </label> + </div> + </div> + +*/ + const modalHtml = ` + <div id="modalZutaten" class="zutaten-list">Hallo${currentModalView === 'ml' ? mlZutaten : originalZutaten}</div> + ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p class="small">${cocktail.rezept}</p>` : ''} + </div> + `; + + //$('#cocktailModal .modal-content').html(modalHtml); + $('#cocktailModal .modalZutaten').html(modalHtml); + $('#cocktailModal').modal('show'); + + // Toggle-Event-Bindings + bindModalToggle(); +} + +function bindModalToggle() { + $('.ml-view').off('click').on('click', function() { + currentModalView = 'ml'; + $('#modalZutaten').html(getMlZutaten()); // Funktion unten + $('.ml-view').addClass('active btn-warning').removeClass('btn-outline-warning'); + $('.original-view').removeClass('active btn-warning').addClass('btn-outline-warning'); + }); + + $('.original-view').off('click').on('click', function() { + currentModalView = 'original'; + $('#modalZutaten').html(getOriginalZutaten()); // Funktion unten + $('.original-view').addClass('active btn-warning').removeClass('btn-outline-warning'); + $('.ml-view').removeClass('active btn-warning').addClass('btn-outline-warning'); + }); +} + + </script> +</body> +</html> |