let cacheBuster = Math.round((new Date).getTime() / 1e3); export default class WidgetComponent extends HTMLElement { constructor() { super(); const t = this.attachShadow({ mode: "open" }) , e = document.createElement("div"); this.container = e, this.listId = this.getAttribute("list-id") || "", this.path = "https://www.naturadb.de", this.dataUrl = `${this.path}/api/liste/${this.listId}/`, e.setAttribute("class", "widget"), e.innerHTML = `\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t`, t.appendChild(e), this.widgetHeader = e.querySelector(".widget__header"), this.widgetContent = e.querySelector(".widget__content"), this.loadStyles(t), this.addInlineStyles(t) } ucwords(t) { return t.replace(/\b\w/g, (t=>t.toUpperCase())) } encodeLink(t) { var e = /([^<]*)<\/a>/gi , n = (t = t.replace(' target="_blank"', "").replace(' rel="license"', "").replace(' xmlns:cc="http://creativecommons.org/ns#" rel="cc:attributionURL" property="cc:attributionName"', "")).match(e); if (n && n.length > 0) for (var a = 0; a < n.length; a++) { var s = e.exec(n[a]); if (s) { var i = s[1] , l = s[2] , d = btoa(i); t = t.replace(n[a], '' + l + "") } } return t } addInlineStyles(t) { const e = document.createElement("style"); e.textContent = '\n\t\t\t:host {\n\t\t\t\t--gray-50: #edf0f3;\n\t\t\t\t--gray-100: #dde2e5;\n\t\t\t\t--gray-200: #d0ccc8;\n\t\t\t\t--gray-300: #b8b2ad;\n\t\t\t\t--gray-400: #a09892;\n\t\t\t\t--gray-500: #897f76;\n\t\t\t\t--gray-600: #6d655f;\n\t\t\t\t--gray-700: #524c47;\n\t\t\t\t--gray-800: #37332f;\n\t\t\t\t--gray-900: #1b1918;\n\n\t\t\t\t--brand-primary--lighter: #9be996;\n\t\t\t\t--brand-primary--light: #60db57;\n\t\t\t\t--brand-primary: #31ba28;\n\t\t\t\t--brand-primary--dark: #27931f;\n\t\t\t\t--brand-primary--darker: #1c6916;\n\n\t\t\t\t--brand-secondary--lighter: #ebf8d3;\n\t\t\t\t--brand-secondary--light: #cdee91;\n\t\t\t\t--brand-secondary: #b4e557;\n\t\t\t\t--brand-secondary--dark: #8cc71f;\n\t\t\t\t--brand-secondary--darker: #7cb01c;\n\n\t\t\t\t--brand-accent-1: #f8d931;\n\t\t\t\t--brand-accent-2: #fdb447;\n\t\t\t\t--brand-accent-3: #ffa4f9;\n\t\t\t\t--brand-accent-4: #98528a;\n\n\t\t\t\t--brand-cta: #c10d5b;\n\t\t\t\t--brand-cta-2: #f92b52;\n\n\t\t\t\t--black: #000;\n\t\t\t\t--trans-black: #243021a8;\n\t\t\t\t--white: #fff;\n\n\t\t\t\t--link: #4185f4;\n\n\t\t\t\t--text: #484848;\n\t\t\t\t--bg: #fff;\n\n\t\t\t\t--footer: #328815;\n\n\t\t\t\t--success: #96da2a;\n\t\t\t\t--success-light: #f2ffdd;\n\t\t\t\t--info: #17a2b8;\n\t\t\t\t--info-light: #daf5fa;\n\t\t\t\t--warning: #f39f0a;\n\t\t\t\t--warning-light: #fcf4db;\n\t\t\t\t--danger: #dc3545;\n\t\t\t\t--danger-light: #fae0e2;\n\n\t\t\t\t--bee: #f7bb06;\n\t\t\t\t--butterfly: #97d9ff;\n\t\t\t\t--bird: #c2a07c;\n\t\t\t\t--bug: #eeb981;\n\t\t\t\t--hoverfly: #f3e175;\n\t\t\t\t--mammal: #a4a690;\n\n\t\t\t\t--font-base: "Inter", "Helvetica", Verdana, sans-serif;\n\t\t\t\t--font-heading: "Josefin Sans", "Helvetica", Verdana, sans-serif;\n\n\t\t\t\t--radius: 10px;\n\t\t\t\t--radius-big: 16px;\n\t\t\t}\n\t\t', t.appendChild(e) } async loadStyles(t) { try { const e = this.path + "/css/dev/widget.css?v=" + cacheBuster , n = await fetch(e) , a = await n.text() , s = document.createElement("style"); s.textContent = a, t.appendChild(s), await this.loadData() } catch (t) { console.error("⚠️ Fehler beim laden der Styles:", t) } } async loadData() { try { const t = await fetch(this.dataUrl, { method: "GET" }) , e = await t.json(); console.log(e), this.renderData(e), this.renderPlants(e.plants), this.renderStats(e.statistics) } catch (t) { console.error("⚠️ Fehler beim laden:", t), this.widgetContent.innerHTML = "

⚠️ Fehler beim laden

" } } renderData(t) { let e = JSON.parse(t.list.eigenschaften) , n = ""; e && "object" == typeof e && ("object" == typeof e.boden && Object.keys(e.boden).length > 0 && (n += `

Boden: ${e.boden.join(", ")}

`), "object" == typeof e.light && Object.keys(e.light).length > 0 && (n += `

Licht: ${this.ucwords(e.licht.join(", "))}

`), e.kuebelgeeignet && 1 == e.kuebelgeeignet && (n += '

kübelgeeignet

')), this.widgetHeader.innerHTML += `\n\t\t\t

\n\t\t\t\t${void 0 !== t.list.name && "" != t.list.name ? `

${t.list.name}

` : ""}\n\t\t\t\t ${void 0 !== t.list.description && "" != t.list.description ? `

${t.list.description}

` : ""}\n\t\t\t\t ${"" != n ? `

${n}

` : ""}\n\t\t\t\t ${e && e.beschreibung && "" != e.beschreibung ? `

${e.beschreibung}

` : ""}\n\t\t\t

\n\t\t\tZur Liste auf NaturaDB\n\t\t` } renderPlants(t) { this.widgetContent.innerHTML = "", this.widgetContent.innerHTML = "

Pflanzen

"; const e = document.createDocumentFragment() , n = document.createElement("div"); n.classList.add("grid"), Object.keys(t).forEach((n=>{ const a = t[n] , s = document.createElement("div"); s.classList.add("col-lg-3", "col-md-6", "col-sm-2", "mb-1"); const i = document.createElement("div"); i.classList.add("card", "is--clickable", "is--hoverable", "full-height"); const l = document.createElement("div"); l.classList.add("card__image"); const d = document.createElement("img"); if (d.setAttribute("width", "300"), d.setAttribute("height", "300"), d.classList.add("lazy", "entered", "loaded"), null != a._sys_foto_id && "" != a._sys_foto_id && a._sys_foto_id > 0 ? d.setAttribute("src", `${this.path}/images/pflanzen/${a.pflanzen_id}/${a._sys_foto_id}-300sq.jpg`) : d.setAttribute("src", `${this.path}/img/assets/plant_img.png`), d.setAttribute("alt", a.name), d.setAttribute("data-ll-status", "loaded"), l.appendChild(d), null != a._sys_foto_quelle && "" != a._sys_foto_quelle) { const t = document.createElement("div"); t.classList.add("card__image__source"), t.innerHTML = `Quelle: ${this.encodeLink(a._sys_foto_quelle)}`, l.appendChild(t) } const c = document.createElement("div"); c.classList.add("card__content"); const r = document.createElement("span"); r.classList.add("card__pre-title"), r.textContent = a.name_wissenschaftlich, c.appendChild(r); const o = document.createElement("a"); o.classList.add("card__title", "no-link"), o.setAttribute("href", `${this.path}/pflanzen/${a.url}/`), o.setAttribute("target", "_blank"), o.textContent = a.name, c.appendChild(o), i.appendChild(l), i.appendChild(c), s.appendChild(i), e.appendChild(s) } )), n.appendChild(e), this.widgetContent.appendChild(n), this.container.querySelectorAll(".is--clickable").forEach((t=>{ t.addEventListener("click", (()=>{ let e = t.querySelectorAll("a"); var n = e[e.length - 1]; if (n) { let t = n.getAttribute("href"); window.open(t, "_blank") } } )) } )) } renderStats(t) { const e = document.createElement("div"); e.classList.add("widget__stats"); const n = document.createElement("div"); n.classList.add("widget__stats"), t.pflanzen && (e.innerHTML += `\n\t\t\t\t

Statistiken

\n\t\t\t\t\n\t\t\t`), t.tiere && (n.innerHTML += `\n\t\t\t\t

Wert für Insekten und Vögel

\n\t\t\t\t\n\t\t\t`), this.widgetContent.prepend(e), this.widgetContent.appendChild(n) } connectedCallback() { console.log("Widget component connected to DOM") } }