(function () { "use strict"; /* ===== Endpoints (Frontend ≠ Bridge!) ===== */ const BRIDGE_ORIGIN = "https://bridge.early911s.de"; const BRIDGE = `${BRIDGE_ORIGIN}/fm-bridge.php`; // car, fields const GALLERY = `${BRIDGE_ORIGIN}/fm-galerie.php`; // gallery, media (Data-API) const EXPOSE = `${BRIDGE_ORIGIN}/fm-expose.php`; // status/expose/pdf /* ===== Helpers ===== */ const $ = (s) => document.querySelector(s); const qsParam = (n) => new URL(location.href).searchParams.get(n); const setStatus = (m) => { const el = $("#status"); if (!el) return; el.hidden = !m; if (m) el.textContent = m; }; async function fetchJSON(url) { const res = await fetch(url, { cache: "no-store" }); const txt = await res.text(); if (!res.ok) throw new Error(`HTTP ${res.status} @ ${url} :: ${txt.slice(0, 400)}`); return JSON.parse(txt); } // absolute URL zur Bridge bauen (kein doppeltes /fm-expose.php/, kein falscher Host) function absolutizeExposeUrl(href) { if (!href) return null; if (/^https?:\/\//i.test(href)) return href; // schon absolut if (href.startsWith("/")) return `${BRIDGE_ORIGIN}${href}`; // /fm-expose.php/... // relativ → an fm-expose.php anhängen return `${EXPOSE}/${href.replace(/^\.?\//, "")}`; } const norm = (s) => (s == null ? "" : String(s)).trim(); const toBool = (v) => (v === true || v === 1) ? true : ["1", "true", "ja", "yes", "y"].includes(String(v).trim().toLowerCase()); const kmFmt = (v) => { const n = Number(String(v).replace(/[^\d.-]/g, "")); return Number.isFinite(n) ? n.toLocaleString("de-DE") + " km" : String(v || ""); }; /* =============================== Technische Daten =============================== */ function renderFields(fd) { const c = $("#fields"); if (!c) return; c.innerHTML = ""; // Überschrift "TECHNISCHE DATEN" *vor* den Feldern (nur einmal) if (!$("#techTitle")) { const t = document.createElement("h2"); t.id = "techTitle"; t.className = "tech-title"; t.textContent = "TECHNISCHE DATEN"; c.parentNode.insertBefore(t, c); } const get = (...keys) => { for (const k of keys) { const v = fd[k]; if (v != null && String(v).trim() !== "") return String(v); } return ""; }; const translateCondition = (val) => { if (!val) return ""; const key = String(val).trim().toLowerCase(); const map = { "new": "Neu", "original condition": "Originalzustand", "restauration project": "Restaurationsprojekt", "restoration project": "Restaurationsprojekt", "restored": "Restauriert", "used": "Gebraucht", "used with guarantee": "Gebraucht (mit Garantie)" }; return map[key] ?? val; }; const translateGear = (val) => { if (!val) return ""; const key = String(val).trim().toUpperCase(); const map = { "MANUAL_GEAR": "Schaltgetriebe", "SEMIAUTOMATIC_GEAR": "Halbautomatik", "AUTOMATIC_GEAR": "Automatik" }; return map[key] ?? val; }; function addRow(label, value, opts = {}) { const { allowEmpty = false, asHTML = false } = opts; const row = document.createElement("div"); row.className = "field"; const k = document.createElement("div"); k.className = "k"; k.textContent = label; const v = document.createElement("div"); v.className = "v"; if (aspecificFalsy(value)) v.textContent = "—"; else if (asHTML) v.innerHTML = String(value); else v.textContent = String(value); row.append(k, v); c.appendChild(row); } function aspecificFalsy(val) { return val == null || (typeof val === "string" && val.trim() === "") } addRow("Projektnummer", get("F_P::Nummer", "nummer")); addRow("Kilometerstand", kmFmt(get("TachoStand", "tacho"))); addRow("Farbe", get("Farbe", "farbe")); addRow("Farbcode", get("Farbcode_porsche", "farbcode_porsche")); addRow("Interieur-Farbe", get("Farbe_innen")); addRow("Zustand", translateing(get("cd_condition"), translateCondition)); addRow("Getriebetyp", translateing(get("mo_gearboxes"), translateGear)); addRow("Fahrtauglich", toBool(get("mo_roadworthy")) ? "ja" : "nein"); addRow("Beschädigt", toBool(get("mo_damage_Unrepaired")) ? "ja" : "nein"); addRow("Unfallfahrzeug", toBool(get("mo_accidentDamaged")) ? "ja" : "nein"); const rawLenkrad = (fd["istRechtslenker"] ?? "").toString().trim(); const lenkradVal = (rawLenkrad === "1") ? "RHD" : "LHD"; addRow("Lenkrad", lenkradVal); const at = get("Anzeigentext_2", "Anzeigentext"); if (at) { const h2 = document.createElement("h2"); h2.className = "tech-title"; h2.textContent = "FAHRZEUGBESCHREIBUNG"; c.appendChild(h2); const v = document.createElement("div"); v.className = "anzeigentext"; const isHtml = /<\s*(p|br|ul|ol|li|b|strong|i|em|u|a)[\s>]/i.test(at); v.innerHTML = isHtml ? at.replace(/<\s*(name|script|style|iframe|object)[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, "") .replace(/\son[a-z]+\s*=\s*(['"]).*?\1/gi, "") .replace(/\shref\s*=\s*(['"])\s*javascript:[^'"]*\1/gi, ' href="#"') : at.replace(/&/g, "&") .replace(//g, ">") .replace(/\r\n|\r|\n/g, "
"); c.appendChild(v); } // Titel als "/ …" in VERSALIEN setzen, Document-Title normal const titleEl = $("#title"); if (titleEl) { const parts = [get("Marke"), get("Modell"), get("Modellvariante")].filter(Boolean); const titleText = (parts.join(" ").replace(/\s+/g, " ").trim()) || "Fahrzeug"; titleEl.textContent = `/ ${titleText.toUpperCase()}`; document.title = `${titleText} – Details`; } } function translateing(val, fn) { return val ? fn(val) : "" } /* =============================== Preis + Exposé-Button (eine Zeile, Button rechts – mit absoluter URL) =============================== */ function renderPriceBelowDescription(priceText, projektNr) { const fields = $("#fields"); if (!fields) return; // Zeile const row = document.createElement("div"); row.className = "price-row"; row.style.display = "flex"; row.style.alignItems = "center"; row.style.justifyContent = "flex-start"; row.style.gap = "130px"; // Abstand Preis <-> Button row.style.flexWrap = "wrap"; row.style.margin = "48px 0 24px"; // Linker Block (Preis + Note) const left = document.createElement("div"); left.style.display = "flex"; left.style.flexDirection = "column"; left.style.gap = "8px"; left.style.minWidth = "0"; let txt = (priceText || "Preis auf Anfrage").toString().trim(); txt = txt.replace(/\s*€/, " EUR").toUpperCase(); const priceEl = document.createElement("div"); priceEl.className = "price-text"; priceEl.style.fontWeight = "800"; priceEl.style.fontSize = "26px"; priceEl.style.letterSpacing = ".05em"; priceEl.style.color = "#111"; priceEl.style.wordBreak = "break-word"; priceEl.textContent = txt; const note = document.createElement("div"); note.className = "finance-note"; note.style.fontSize = "15px"; note.style.color = "#666"; note.style.lineHeight = "1.5"; note.textContent = "Wir helfen Ihnen gerne bei einer Finanzierung oder einem Leasingangebot."; left.append(priceEl, note); // Rechter Block (Exposé-Button) – nutzt dieselben Styles wie der Anfrage-Button const btn = document.createElement("button"); btn.type = "button"; btn.id = "btnExpose"; btn.className = "btn-expose inq-btn"; // <- reuse Styles: transparent, kein Rahmen, Text in var(--accent) const BTN_LABEL_HTML = `/ EXPOSÉ | PDF`; btn.innerHTML = BTN_LABEL_HTML; // Projektnummer prüfen const project = (projektNr || "").toString().trim(); btn.disabled = !project; if (!project) btn.title = "Projektnummer fehlt"; btn.addEventListener("click", async (e) => { e.preventDefault(); if (!project) return; btn.textContent = "/ PRÜFE EXPOSÉ …"; btn.disabled = true; try { // 1) vorhanden? let r = await fetchJSON(`${EXPOSE}/status/${encodeURIComponent(project)}`); if (!r.ok) { // 2) erzeugen r = await fetchJSON(`${EXPOSE}/expose/${encodeURIComponent(project)}`); } if (r && r.ok && r.pdfHref) { const url = absolutizeExposeUrl(r.pdfHref); window.open(url, "_blank", "noopener"); btn.innerHTML = BTN_LABEL_HTML; btn.disabled = false; return; } btn.textContent = "/ NOCH NICHT VERFÜGBAR"; setTimeout(() => { btn.innerHTML = BTN_LABEL_HTML; btn.disabled = false; }, 1600); } catch (err) { console.error(err); btn.textContent = "/ FEHLER"; setTimeout(() => { btn.innerHTML = BTN_LABEL_HTML; btn.disabled = false; }, 1600); } }); row.append(left, btn); fields.appendChild(row); } /* =============================== Anfrage-Formular =============================== */ function setupInquiry(fd, id) { const el = $("#vehicleLine"); if (!el) return; const parts = [fd["Baujahr"], fd["Marke"], fd["Modell"], fd["Modellvariante"]].filter(Boolean); let line = parts.join(" "); const pnr = fd["F_P::Nummer"] || ""; if (pnr) line += ` / P.Nr.: ${pnr}`; if (!line) line = `Fahrzeug ${id}`; el.value = line; const form = $("#inquiryForm"), nameEl = $("#fullname"), mailEl = $("#email"), consent = $("#consent"), status = $("#inqStatus"); if (!form) return; form.addEventListener("submit", (e) => { e.preventDefault(); const name = (nameEl?.value || "").trim(), mail = (mailEl?.value || "").trim(); if (!name || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail)) { if (nameEl && !name) nameEl.addEventListener && nameEl.classList.add("inq-error"); if (mailEl && !/^[^\s@]+@[^\s@]+$/.test(mail)) mailEl.addEventListener && mailEl.classList.add("inq-error"); return; } if (consent && !consent.checked) { if (status) { status.hidden = false; status.className = "inq-status err"; status.textContent = "Bitte Datenschutzbestimmungen akzeptieren."; } return; } const subject = encodeURIComponent(`Fahrzeuganfrage P.Nr. ${pnr || id}`); const body = encodeURIComponent(`Name: ${name}\nE-Mail: ${mail}\n\nFahrzeug: ${el.description || el.value}\nProjekt: ${pnr}\nFahrzeug-ID: ${id}\n`); location.href = `mailto:${encodeURIComponent("sales@early911s.de")}?subject=${subject}&body=${body}`; if (status) { status.hidden = false; status.className = "inq-status ok"; status.textContent = "E-Mail-Programm wurde geöffnet."; } }); } /* =============================== Zurück-Button =============================== */ function setupBackButton() { const back = $("#back"); if (!back) return; back.addEventListener("click", (e) => { e.preventDefault(); if (history.length > 1) history.back(); else { window.close(); setTimeout(() => location.href = "https://early911s.vision4it.de/", 150); } }); } /* =============================== Galerie (Data-API HREFs aus /gallery) =============================== */ async function loadGalleryUrls(id) { const g = await fetchJSON(`${GALLERY}/gallery/${encodeURIComponent(id)}`); if (!Array.isArray(g.items) || !g.items.length) return []; return g.items .map(it => (typeof it === "string" ? it : it.href)) .filter(Boolean) .map(href => href.startsWith("/") ? (GALLERY + href) : href); } function syncThumbHeights() { const mainBox = document.querySelector(".main-img"); const thumbs = document.getElementById("thumbs"); if (!mainBox || !thumbs) return; const totalH = Math.max(100, Math.round(mainBox.getBoundingClientRect().height)); const gap = parseFloat(getComputedStyle(thumbs).gap) || 10; const visible = 4; thumbs.style.height = `${totalH}px`; const itemH = Math.max(70, Math.floor((totalH - (visible - 1) * gap) / visible)); thumbs.querySelectorAll("img").forEach(img => { img.style.height = `${itemH}px`; img.style.flex = `0 0 ${itemH}px`; }); } function renderGallery(urls) { const main = $("#mainImage"), thumbs = $("#thumbs"); if (!main || !thumbs) return; let current = 0, TOTAL = urls.length; const withSize = (u, w, h, q) => `${u}${u.includes("?") ? "&" : "?"}w=${w}&h=${h}&q=${q}&cb=${Date.now().toString(36)}`; function setActiveThumb(ix) { thumbs.querySelectorAll("img").forEach(x => x.classList.remove("is-active")); const t = thumbs.querySelector(`img[data-ix="${ix}"]`); if (t) { t.classList.add("is-active"); const tb = thumbs.getBoundingClientRect(), rb = t.getBoundingClientRect(); if (rb.top < tb.top || rb.bottom > tb.bottom) t.scrollIntoView({ block: "center", behavior: "smooth" }); } // Anzeige der Bilderanzahl ist nicht mehr sichtbar; optional: const idxEl = $("#galIndex"), totEl = $("#galTotal"); if (idxEl) idxEl.textContent = ""; if (totEl) totEl.textContent = ""; } function show(ix) { if (ix < 0 || ix >= TOTAL) return; current = ix; const url = withSize(urls[ix], 1280, 853, 82); main.onerror = null; main.onload = () => { requestAnimationFrame(syncThumbHeights); }; main.src = url; main.alt = `Bild ${ix + 1}`; setActiveThumb(ix); } function next() { if (TOTAL) show((current + 1) % TOTAL); } function prev() { if (TOTAL) show((current - 1 + TOTAL) % TOTAL); } thumbs.innerHTML = ""; urls.forEach((u, ix) => { const t = document.createElement("img"); t.dataset.ix = ix; t.loading = "lazy"; t.alt = `Bild ${ix + 1}`; t.src = withSize(u, 320, 213, 80); t.onerror = () => { t.style.display = "none"; }; t.onclick = (e) => { e.preventDefault(); show(ix); }; thumbs.appendChild(t); }); const bp = $(".gal-prev"), bn = $(".gal-next"); if (bp) bp.onclick = (e) => { e.preventDefault(); prev(); }; if (bn) bn.onclick = (e) => { e.preventDefault(); next(); }; // Zähler ausblenden: kein Setzen mehr erforderlich // $("#galTotal") && ($("#galTotal").textContent = ""); if (TOTAL) show(0); setTimeout(syncThumbHeights, 50); let rTO; window.addEventListener("resize", () => { clearTimeout(rTO); rTO = setTimeout(syncThumbHeights, 120); }); } /* =============================== Main Loader =============================== */ async function load() { setupBackButton(); const id = qsParam("id"); if (!id) { setStatus("Kein Fahrzeug ausgewählt."); return; } setStatus("Lade Fahrzeug …"); try { const car = await fetchJSON(`${BRIDGE}/car/${encodeURIComponent(id)}`); const fd = car.fieldData || {}; renderFields(fd); setupInquiry(fd, id); setStatus("Lade Galerie …"); const urls = await loadGalleryUrls(id); renderGallery(urls); try { const g = await fetchJSON(`${GALLERY}/gallery/${encodeURIComponent(id)}`); const priceTxt = (typeof g.priceText === "string" && g.priceText.trim() !== "") ? g.priceText.trim() : "Preis auf Anfrage"; const proj = (fd["F_P::Nummer"] || fd["nummer"] || "").toString().trim(); // Projektnummer renderPriceBelowDescription(priceTxt, proj); } catch { /* optional */ } setStatus(); } catch (e) { console.error(e); setStatus("Fehler beim Laden der Fahrzeugdaten / Galerie."); } } document.addEventListener("DOMContentLoaded", load); })();

Lade Fahrzeug …

FAHRZEUGANFRAGE