fix: form factor detail panel shows only Flexoptix transceivers

- API call: +&vendor=Flexoptix filter
- Section renamed to 'Flexoptix-Lösungen' with favicon
- Each row shows 'Shop ↗' link directly to flexoptix.net search
- 'Show all' button labeled 'Alle X Flexoptix-{FF}-Produkte'
- Primary button: flexoptix.net with form factor filter
- Empty state: friendly message when no Flexoptix products yet
This commit is contained in:
Rene Fichtmueller 2026-04-25 21:29:25 +02:00
parent 3f7395ea8d
commit 15a456a0ce

View File

@ -4861,9 +4861,10 @@ async function openFormFactorDetail(name) {
// Open panel immediately with skeleton
openPanel('<div style="padding:0.5rem;color:var(--text-dim);font-size:0.85rem" class="loading pulse">Lade ' + esc(name) + '…</div>');
// Fetch transceivers for this form factor
var txData = await api('/api/transceivers?form_factor=' + encodeURIComponent(f.name) + '&limit=10').catch(function(){ return {}; });
// Fetch Flexoptix transceivers for this form factor
var txData = await api('/api/transceivers?form_factor=' + encodeURIComponent(f.name) + '&vendor=Flexoptix&limit=10').catch(function(){ return {}; });
var txRows = txData.data || [];
var txTotal = txData.total || txRows.length;
var h = '';
@ -4950,39 +4951,42 @@ async function openFormFactorDetail(name) {
// ── Transceivers in Catalog ────────────────────────────────────────────────
h += '<div style="margin-bottom:0.85rem">';
h += '<div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.45rem">';
h += 'Unsere Transceiver (' + (f.transceiver_count || txRows.length) + ' in Datenbank)';
h += '<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.45rem">';
h += '<div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim)">Flexoptix-Lösungen</div>';
h += '<img src="https://www.flexoptix.net/favicon.ico" onerror="this.style.display=\'none\'" style="width:12px;height:12px;border-radius:2px">';
h += (txTotal > 0 ? '<span style="font-size:0.68rem;color:var(--accent);font-weight:600;margin-left:auto">' + txTotal + ' verfügbar</span>' : '');
h += '</div>';
if (txRows.length) {
var speedColors2 = { 1600:'#7c3aed', 800:'#c1121f', 400:'#FF8100', 200:'#e6a800', 100:'#2d6a4f', 40:'#4287f5', 25:'#0ea5e9', 10:'#888', 1:'#555' };
h += '<div style="display:flex;flex-direction:column;gap:0.3rem">';
txRows.slice(0,8).forEach(function(t) {
txRows.forEach(function(t) {
var spCol = speedColors2[t.speed_gbps] || '#888';
var reach = t.reach_label || (t.reach_meters ? (t.reach_meters >= 1000 ? (t.reach_meters/1000)+'km' : t.reach_meters+'m') : '');
var shopUrl = 'https://www.flexoptix.net/en/search/ajax/suggest/?q=' + encodeURIComponent(t.part_number || '');
h += '<div style="display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.6rem;background:var(--surface3);border-radius:7px;cursor:pointer" onclick="closePanel();openTxDetail(\'' + esc(t.id) + '\')">'
+ '<span style="background:' + spCol + '22;color:' + spCol + ';padding:1px 6px;border-radius:5px;font-size:0.68rem;font-weight:700;white-space:nowrap">' + (t.speed_gbps || '?') + 'G</span>'
+ '<span style="font-size:0.78rem;font-weight:600;color:var(--text-bright);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(t.part_number || '—') + '</span>'
+ (t.vendor_name ? '<span style="font-size:0.68rem;color:var(--text-dim);white-space:nowrap">' + esc(t.vendor_name) + '</span>' : '')
+ (reach ? '<span style="font-size:0.68rem;color:var(--cyan);white-space:nowrap">' + esc(reach) + '</span>' : '')
+ '<a href="' + esc(shopUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation()" style="font-size:0.65rem;color:var(--accent);white-space:nowrap;text-decoration:none" title="Im Webshop ansehen">Shop ↗</a>'
+ '</div>';
});
h += '</div>';
if ((f.transceiver_count || 0) > 8) {
if (txTotal > 10) {
h += '<button class="btn" style="width:100%;margin-top:0.5rem;font-size:0.78rem;background:var(--surface3);color:var(--text)" '
+ 'onclick="goToTab(\'transceivers\');el(\'tx-search\').value=\'' + esc(f.name) + '\';searchTransceivers();closePanel()">'
+ 'Alle ' + (f.transceiver_count || '') + ' ' + esc(f.name) + '-Transceiver anzeigen →</button>';
+ 'Alle ' + txTotal + ' Flexoptix-' + esc(f.name) + '-Produkte anzeigen →</button>';
}
} else {
h += '<div style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem 0">Noch keine Transceiver in der Datenbank.</div>';
h += '<div style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem 0;border:1px dashed var(--border);border-radius:6px;text-align:center">Noch keine Flexoptix-Produkte für ' + esc(f.name) + ' in der Datenbank.</div>';
}
h += '</div>';
// ── Action buttons ─────────────────────────────────────────────────────────
h += '<div style="display:flex;gap:0.5rem;flex-wrap:wrap">';
h += '<button class="btn" style="flex:1;background:' + fCl + ';color:#fff;font-size:0.8rem" '
h += '<a href="https://www.flexoptix.net/en/optical-transceivers/?form_factor=' + encodeURIComponent(f.name.toLowerCase().replace(/[^a-z0-9]/g,'-')) + '" target="_blank" rel="noopener" class="btn" style="flex:1;background:#FF8100;color:#fff;font-size:0.8rem;text-align:center;text-decoration:none">flexoptix.net — ' + esc(f.name) + ' ↗</a>';
h += '<button class="btn" style="font-size:0.8rem;background:var(--surface3);color:var(--text)" '
+ 'onclick="goToTab(\'transceivers\');el(\'tx-search\').value=\'' + esc(f.name) + '\';searchTransceivers();closePanel()">'
+ 'Alle Transceiver anzeigen →</button>';
h += '<a href="https://www.flexoptix.net/en/search/ajax/suggest/?q=' + encodeURIComponent(f.name) + '" target="_blank" rel="noopener" class="btn" style="font-size:0.8rem;text-decoration:none">flexoptix.net ↗</a>';
+ 'TIP DB →</button>';
h += '</div>';
// ── Technical notes ────────────────────────────────────────────────────────