https://www.outdoor-magazin.com/_next/static/chunks/mehrtankenlistssearchform.3dfaec8da1717edb.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7307],{44178:(e,t,l)=>{"use strict";l.d(t,{d:()=>g,h:()=>b});var s=l(6029),r=l(47789),i=l.n(r),a=l(55729),n=l(32988),c=l.n(n),o=l(67460),d=l(57887),u=l.n(d),h=l(42704),p=l.n(h),m=l(41498),x=l(92476),f=l(81278);let g=({label:e,options:t,type:l,inputType:r="checkbox",selected:n,onClick:c=()=>{},useLink:o=!1,page:d,isSingleFilter:h=!1,filterName:g})=>{let[b,v]=(0,a.useState)(!1),k=(0,f.useRouter)();return(0,a.useEffect)(()=>{v(!1)},[k?.asPath]),(0,s.jsxs)("div",{className:"va-select-filter relative w-full "+i().selectFilter,children:[(0,s.jsx)("input",{onClick:e=>{v(!b),c&&c(e)},checked:b,type:"checkbox",id:"select"+l,className:"selectTop absolute top-0 left-0 z-10 w-full opacity-0 cursor-pointer "+i().input}),(0,s.jsxs)("label",{htmlFor:"select"+l,className:"block relative py-2 px-4 w-full font-skin-primary text-sm border border-solid cursor-pointer "+i().label,children:[g||e,(0,s.jsx)(m.B,{src:u(),className:"absolute right-2 top-1/2 -mt-px-8 size-px-16 rotate-90"})]}),(0,s.jsx)("div",{className:"va-select-dropdown hidden absolute left-0 px-4 w-full font-skin-primary text-sm border-r border-b border-l border-solid divide-y "+i().dropdown,id:"select-"+l,children:h&&o?(0,s.jsx)("ul",{className:"relative",children:t.map((t,l)=>{let r=null;if(n.length)for(let e=0;e<n.length;e++)n[e].label===t.label&&(r="checked");return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("li",{className:"w-full h-full cursor-pointer",children:(0,s.jsxs)(x.N_,{href:d+t?.url,className:`-mx-4 flex items-center justify-between px-4 py-2 ${r?"font-extrabold ":""}`,children:[t.label,r?" ✔":""]})},`select-${e}-${l}`)})})}):(0,s.jsxs)(s.Fragment,{children:["  ",t.map((t,l)=>{let a=null;if(n.length)for(let e=0;e<n.length;e++)n[e].label===t.label&&(a="checked");return(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsx)("input",{type:r,id:t.label,name:"radio"===r?e:t.label,className:"absolute left-0 top-0 w-full h-full cursor-pointer opacity-0 "+i().dropdownChecked,value:"radio"===r?t.url:t.value,checked:a}),(0,s.jsxs)("label",{htmlFor:t.label,className:"-mx-4 flex items-center justify-between px-4 py-2",children:[t?.label,(0,s.jsx)(m.B,{src:p(),className:"va-option-check hidden w-px-12"})]})]},`select-${e}-${l}`)})]})})]})},b=({label:e,options:t,type:l,onChange:r,values:n})=>{let d="select"+l,h=(0,a.useRef)(null),x=(0,a.useRef)(null);return(0,o._)("click",e=>{let l=!h.current.classList.contains("hidden");if(t.map(e=>e.label).includes(e.target.id))return;let s=!1;e.target.id!==d||l||(s=!0),s?(h.current.classList.remove("hidden"),x.current.style.fontWeight=700):(h.current.classList.add("hidden"),x.current.style.fontWeight=400)}),(0,s.jsxs)("div",{className:"va-select-filter max-w-px-200 relative w-full "+i().bgColor+" "+i().selectFilter,children:[(0,s.jsx)("input",{type:"checkbox",id:d,className:"selectTop absolute left-0 top-0 z-10 w-full cursor-pointer opacity-0"}),(0,s.jsxs)("label",{ref:x,htmlFor:"select"+l,className:"block relative py-2 px-4 w-full font-skin-primary text-sm border border-solid cursor-pointer "+i().label,children:[e,(0,s.jsx)(m.B,{src:u(),className:"absolute right-2 top-1/2 -mt-px-8 size-px-16 rotate-90"})]}),(0,s.jsx)("div",{ref:h,className:"va-select-dropdown hidden absolute left-0 px-4 w-full font-skin-primary text-sm border-r border-b border-l border-solid divide-y "+i().dropdown,id:"select-"+l,children:t.map((t,l)=>(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsx)("input",{type:"checkbox",id:t.label,className:c()({"absolute left-0 top-0 w-full h-full cursor-pointer opacity-0":!0,[i().filter]:!0,[i().dropdownChecked]:!0}),value:t.value,checked:n.includes(String(t.value)),onChange:r}),(0,s.jsxs)("label",{htmlFor:t.label,className:"-mx-4 flex items-center justify-between px-4 py-2",children:[t.label,(0,s.jsx)(m.B,{src:p(),className:"va-option-check hidden w-px-12"})]})]},`select-${e}-${l}`))})]})}},47789:e=>{e.exports={label:"selectFilter_label__O311W",dropdown:"selectFilter_dropdown__M4fco","dropdown-checked":"selectFilter_dropdown-checked__crjxT",dropdownChecked:"selectFilter_dropdown-checked__crjxT","bg-color":"selectFilter_bg-color__f_ZO8",bgColor:"selectFilter_bg-color__f_ZO8",input:"selectFilter_input__xh6Kg","select-filter":"selectFilter_select-filter__YvOqV",selectFilter:"selectFilter_select-filter__YvOqV",filter:"selectFilter_filter___xwI8"}},50435:(e,t,l)=>{"use strict";l.d(t,{A:()=>r});var s=l(55729);

1function r(e,t){let[l,r]=(0,s.useState)(e);return(0,s.useEffect)(()=>{let l=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(l)}},[e]),l}},50622:e=>{e.exports={search:"listsSearchForm_search___61CX","hover-color":"listsSearchForm_hover-color__X1_o2",hoverColor:"listsSearchForm_hover-color__X1_o2",wrapper:"listsSearchForm_wrapper__ZtvU3",button:"listsSearchForm_button__a3hv_","select-filter":"listsSearchForm_select-filter__o1TgQ",selectFilter:"listsSearchForm_select-filter__o1TgQ"}},70540:(e,t,l)=>{e.exports=l.p+"static/img/map.svg"},71115:(e,t,l)=>{"use strict";l.r(t),l.d(t,{default:()=>C,getDisplayNameForSearchPoi:()=>N});var s=l(6029),r=l(50622),i=l.n(r),a=l(55729),n=l(56760),c=l(67460),o=l(50435),d=l(81278),u=l(53268),h=l(99089),p=l(46756),m=l(44178),x=l(38252),f=l(81163),g=l(70217),b=l(31332),v=l(70540),k=l.n(v),j=l(41498);let _=({headline:e="Letzte Suchanfragen",icon:t="map",history:l=[]})=>{let{searchHistory:r,setValue:i,setSelectedSearchPOI:n}=(0,a.useContext)(u.ZW);function c(e,t){n(e.selectedSearchPOI),i({searchText:e.selectedSearchPOI._id,range:e.range,fuelType:e.fuelType,brand:e.brand})}return l=l?.length?l:r,(0,s.jsx)("div",{id:"mehr-tanken-search-history",className:"relative z-10 col-span-2 mx-4 mb-4 border-2 border-solid border-skin-mt-yellow bg-skin-mt-yellow-light p-4 shadow-md lg:mx-0",children:l.length>0?(0,s.jsxs)(a.Fragment,{children:[(0,s.jsx)("div",{className:"mb-2 lg:mb-4",children:(0,s.jsx)(b.Headline,{size:"xs",headline:e})}),(0,s.jsx)("div",{className:"lg:flex lg:space-x-20",children:l.map((e,l)=>(0,s.jsxs)("div",{className:"mtm-last-queries flex cursor-pointer space-x-3 py-2",onClick:c.bind(void 0,e),children:[(0,s.jsx)("div",{className:"size-5",children:(0,s.jsx)(j.B,{src:k(),icon:t,className:"size-full mtm-last-queries z-20"})}),(0,s.jsxs)(g.Text,{size:"small",className:"mtm-last-queries",children:[(0,s.jsxs)("strong",{className:"mtm-last-queries block lg:inline-block",children:[e.selectedSearchPOI?._id," ",e.selectedSearchPOI?.name]})," ",e.range+" km",", ",u.lL[e.fuelType],", ",e.brand.split(",").map(e=>u.Lg[e]).join(", ")]})]},`last-searches-mt-${e._id}-${l}`))})]}):null})};var y=l(58376);let w=[],N=e=>{let{_id:t,name:l,districtName:s}=e,r=`${t} ${l}`;return s&&(r+=`, ${s}`),r},S=({hit:e,onClick:t})=>(0,s.jsx)("li",{className:"py-2 px-3 hover:bg-skin-grey-medium cursor-pointer "+i().hoverColor,onClick:t,children:(0,s.jsxs)(g.Text,{size:"small",children:[(0,s.jsx)("strong",{children:e._id})," "+e.name,e.districtName?`/${e.districtName}`:""]})}),F=({tracking:e})=>{let[t,l]=(0,a.useState)(!1),[r,c]=(0,a.useState)(null);return((0,a.useEffect)(()=>

1{l(!0);let e=document.getElementById("va-header-container");e&&c(e)},[]),t&&r)?(0,n.createPortal)((0,s.jsx)("div",{style:{zIndex:51},className:"relative inset-x-0 flex items-center justify-center p-4 "+i().button,children:(0,s.jsx)(f.Button,{onClick:()=>{e?.track("mt.tankstellenSucheStickyButton.cl"),e?.track("spritpreisvergleich.open.cl")},style:"primary",text:"Spritpreise vergleichen",icon:"fuel",iconPosition:"before",link:"/"})}),r):null},C=({options:e,isResultPage:t,isHome:l,is404:r,resultPageUrl:n})=>{let g,v=(0,d.useRouter)(),k=(0,a.useContext)(x.HP),j=(0,y.z1)(),C=(0,a.useRef)(!1),T=()=>{C.current||(C.current=!0,j.track("spritpreisvergleich.form.cl"))},{setValue:$,searchSettings:z,selectedSearchPOI:O,setSelectedSearchPOI:B,saveSearchHistory:P}=(0,a.useContext)(u.ZW),[I,E]=(0,a.useState)(""),[q,L]=(0,a.useState)([]),[A,W]=(0,a.useState)(!1),H=(0,o.A)(I,400);function R(e,t){let l=String(t.target.value);l!==String(z[e])&&("range"==e&&j.track("mt.tankstellenSucheUmkreis.cl",l),"fuelType"==e&&j.track("mt.tankstellenSucheSpritsorte.cl",t.target.options[`${t.target.options.selectedIndex}`].text),$(e,l))}async function Z(e){if(!e?.success)return;j.track("mt.tankstellenSucheStandorterkennung.cl");let t=await Q(e.coords.latitude,e.coords.longitude);t?.length&&(E(""),W(!0),L(t))}function M(e,t){O?._id!==e?._id&&(B(e),W(!1))}function X(){return(z.brand||"").split(",")}async function J(){try{let e=await fetch(k.apiHost+"/mt/city-search-autocomplete",{method:"POST",credentials:"include",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({q:H,...z})}).then(e=>e.json());e?.hits&&(L(e?.hits),W(!0))}catch(e){console.log("error in listsSearchForm autocomplete")}}async function Q(e,t){try{let l=await fetch(k.apiHost+"/mt/reverse-city-search-autocomplete",{method:"POST",credentials:"include",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({lat:e,lon:t,...z})}).then(e=>e.json());return l?.hits}catch(e){console.log("error in listsSearchForm reverseAutocomplete")}}return((0,c._)("click",e=>{let t=q?.length>0&&A,l=document.activeElement.id;t&&"mehr-tanken-geocode-input"!==l&&W(!1)}),(0,a.useEffect)(()=>{H?J():L([])},[H]),l||t||r)?(0,s.jsx)(a.Fragment,{children:(0,s.jsxs)(y.yI,{className:"bg-skin-mt-yellow col-span-2 mx-4 mt-5 p-4 shadow-md lg:mx-0 lg:mt-0",visible:!0,name:"spritpreisvergleich.form",children:[(0,s.jsx)("div",{className:"mb-4",children:(0,s.jsx)(b.Headline,{size:"medium",headline:"Finde die g\xfcnstigste Tankstelle in deiner N\xe4he"})}),(0,s.jsxs)("div",{className:"relative flex w-full flex-col items-center gap-4 lg:flex-row "+i().wrapper,onClickCapture:T,onFocusCapture:T,children:[(0,s.jsxs)("div",{className:"w-full lg:w-auto lg:grow",children:[(0,s.jsx)(h.p,{id:"mehr-tanken-geocode-input",placeholder:"Wo m\xf6chtest du tanken?",disableAutocomplete:!0,value:O?N(O):I,onChange:function(e){O&&B(null),E(e.target.value)},isSearch:!1,showLocation:!0,highlightText:!!O,getGeoPosition:Z,onFocus:()=>{W(!0)}}),q?.length>0&&A&&(0,s.jsx)("div",{className:"top-px-30 absolute right-4 lg:right-auto left-4 lg:left-0 z-20 lg:w-1/2 font-skin-primary bg-skin-white shadow-lg "+i().search,children:(0,s.jsx)("ul",{className:"max-h-60 overflow-auto",children:q.map((e,t)=>(0,s.jsx)(S,{hit:e,onClick:M.bind(void 0,e)}

1,`mt-geocode-result-gh-${t}`))})})]}),(0,s.jsxs)("div",{className:"lg:max-w-px-300 grid w-full grid-cols-2 gap-4 lg:w-2/5",children:[(0,s.jsx)(p.l,{onChange:R.bind(void 0,"range"),options:e.ranges,value:z.range}),(0,s.jsx)(p.l,{onChange:R.bind(void 0,"fuelType"),options:e.fuels,value:z.fuelType})]}),(0,s.jsx)("div",{className:"w-full lg:w-2/5 lg:max-w-px-250 "+i().selectFilter,children:(0,s.jsx)(m.h,{onChange:(function(e,t){let l=String(t.target.value),s=t.target.checked,r=z[e].split(",").filter(Boolean);if(l){if(s){let e=w.indexOf("alle");e>-1&&w.splice(e,1),r.push(l),w.push(t.target.id)}else r.splice(r.indexOf(l),1),w.splice(w.indexOf(t.target.id),1);$(e,r.filter(Boolean).join(",")),0==w.length&&w.push("alle"),j.track("mt.tankstellenSucheMarken.cl",w.filter(Boolean).join(","))}else $(e,""),w.push("alle"),j.track("mt.tankstellenSucheMarken.cl",w.filter(Boolean).join(","))}).bind(void 0,"brand"),options:e.brands,values:X(),label:(g=X(),e.brands.filter(e=>g.includes(String(e.value))).map(e=>e.label).join(", ")),noBlank:!0,type:"mt-brands"})}),(0,s.jsx)("div",{className:"",children:(0,s.jsx)(f.Button,{style:O?"primary":"greyInverted",text:"Spritpreise vergleichen",disabled:!O,onClick:O?function(){if(!O)return v.push({pathname:n});let{_id:e,lowerCasedName:t,federalStateNameLowerCased:l,coordinates:s}=O;P({coordinates:{lat:s.latitude,lon:s.longitude},displayName:N(O)}),j.track("mt.tankstellenSucheButton.cl");let r=`/regional-tanken/${l}/${t}/`;e&&(r+=`${e}/`),j.track("spritpreisvergleich.form.submit",{destination_host:window.location.hostname,href:window.location.origin+r}),v.push({pathname:r})}:void 0,id:"mehr-tanken-search-button"})})]}),(0,s.jsx)(_,{})]})}):(0,s.jsx)(F,{tracking:j})}}}]);