Karte: Marktnamen + Status sind echte Händler-Such-Links (OBI/toom/Bauhaus/Hornbach/MediaMarkt/Saturn/...), Link-Styling, anklickbar
This commit is contained in:
+20
-3
@@ -131,7 +131,11 @@ const jsonld={'@context':'https://schema.org','@type':'WebApplication',name:'Kü
|
||||
.mtab td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
|
||||
.mtab tbody tr{animation:kf-in .3s ease both}
|
||||
.mtab tbody tr:hover{background:var(--petrol-soft)}
|
||||
.fname{font-weight:600;font-size:.92rem}.faddr{font-size:.78rem;color:var(--slate)}
|
||||
.fname{font-weight:600;font-size:.92rem;color:var(--petrol-deep);text-decoration:none}
|
||||
.fname:hover{text-decoration:underline}
|
||||
.faddr{font-size:.78rem;color:var(--slate)}
|
||||
.mtab tbody tr{cursor:default}
|
||||
.chk-link{font-size:.78rem;color:var(--petrol);white-space:nowrap}
|
||||
.kindb{font-size:.66rem;padding:.05rem .4rem;border-radius:99px;background:var(--surface-2);color:var(--slate);margin-left:.4rem;border:1px solid var(--line)}
|
||||
.ce .num{font-size:.86rem}
|
||||
.stk{font-size:.72rem;font-weight:600}.stk.ok{color:var(--ok-dot)}.stk.off{color:var(--slate)}
|
||||
@@ -143,6 +147,19 @@ const jsonld={'@context':'https://schema.org','@type':'WebApplication',name:'Kü
|
||||
<script>
|
||||
import maplibregl from 'maplibre-gl';
|
||||
const FLAG={DE:'🇩🇪',AT:'🇦🇹',CH:'🇨🇭',NL:'🇳🇱',PL:'🇵🇱',DK:'🇩🇰'};
|
||||
const CHAIN_SEARCH={
|
||||
'OBI':q=>'https://www.obi.de/search/'+encodeURIComponent(q)+'/',
|
||||
'toom':q=>'https://toom.de/search/?text='+encodeURIComponent(q),
|
||||
'Bauhaus':q=>'https://www.bauhaus.info/suche/produkte?text='+encodeURIComponent(q),
|
||||
'Hornbach':q=>'https://www.hornbach.de/s/'+encodeURIComponent(q),
|
||||
'Hagebau':q=>'https://www.hagebau.de/search/?q='+encodeURIComponent(q),
|
||||
'Globus':q=>'https://www.globus-baumarkt.de/search?q='+encodeURIComponent(q),
|
||||
'MediaMarkt':q=>'https://www.mediamarkt.de/de/search.html?query='+encodeURIComponent(q),
|
||||
'Saturn':q=>'https://www.saturn.de/de/search.html?query='+encodeURIComponent(q),
|
||||
'expert':q=>'https://www.expert.de/shop/search?q='+encodeURIComponent(q),
|
||||
'Euronics':q=>'https://www.euronics.de/search?sQuery='+encodeURIComponent(q)
|
||||
};
|
||||
const storeLink=(s)=>{ const q=(state.model!=='all'&&DATA.products[state.model]?DATA.products[state.model].name:'Klimagerät'); const fn=CHAIN_SEARCH[s.c]; return fn?fn(q):('https://www.google.com/search?q='+encodeURIComponent(s.c+' '+s.ci+' '+q)); };
|
||||
const LIVE_URL=(import.meta.env.PUBLIC_CRAWLER_URL)||'http://vnqwgi4gq520hs1p4bsgi4w6.46.224.49.66.sslip.io';
|
||||
const fmt=(n,c)=>n==null?'–':new Intl.NumberFormat('de-DE',{style:'currency',currency:c||'EUR',maximumFractionDigits:0}).format(n);
|
||||
const $=s=>document.querySelector(s),$$=s=>Array.from(document.querySelectorAll(s));
|
||||
@@ -191,9 +208,9 @@ const jsonld={'@context':'https://schema.org','@type':'WebApplication',name:'Kü
|
||||
const tb=$('#rows');tb.innerHTML='';
|
||||
for(const s of list.slice(0,shown)){
|
||||
const st=status(s);
|
||||
const stk = st.a?`<span class="stk ok"><span class="dot ok"></span> live verfügbar</span>`:`<span class="stk off"><span class="dot off"></span> Demo · beim Händler prüfen</span>`;
|
||||
const stk = st.a?`<span class="stk ok"><span class="dot ok"></span> live verfügbar</span>`:`<a class="chk-link" href="${surl}" target="_blank" rel="noopener">beim Händler prüfen ↗</a>`;
|
||||
const distTd=center?`<td class="ce num">${dist(center[1],center[0],s.la,s.lo).toFixed(0)} km</td>`:'';
|
||||
const surl="https://www.google.com/search?q="+encodeURIComponent(s.c+" "+s.ci+" Klimagerät");
|
||||
const surl=storeLink(s);
|
||||
tb.insertAdjacentHTML('beforeend',`<tr><td><span class="flag">${s.flag||FLAG[s.cc]||''}</span> <a class="fname" href="${surl}" target="_blank" rel="noopener">${s.n}</a><span class="kindb">${s.kind==='elektro'?'Elektro':'Baumarkt'}</span><div class="faddr">${s.z} ${s.ci} · <span title="zuletzt geprüft">Stand vor ${s.t||'?'} Min</span></div></td>
|
||||
<td class="ce">${stk}</td><td class="ce num" title="Referenzpreis (Demo)">${st.p?fmt(st.p,s.cur):"–"}</td>
|
||||
<td class="ce"><span class="prog"><span class="progbar"><i style="width:${st.q||0}%"></i></span><span class="num">${st.q||0}%</span></span></td>${distTd}</tr>`);
|
||||
|
||||
Reference in New Issue
Block a user