diff --git a/gulpfile.js b/gulpfile.js index 03ba8e9..ef5b871 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,6 +8,9 @@ function replaceTemplate() { .pipe(replace(/TEASENSE_URI/g, process.env.TEASENSE_URI)) .pipe(replace(/RAINFALL_URI/g, process.env.RAINFALL_URI)) .pipe(replace(/SPLORK_URI/g, process.env.SPLORK_URI)) + .pipe(replace(/RSS_ORIGIN/g, process.env.RSS_ORIGIN)) + .pipe(replace(/RSS_API_HOST/g, process.env.RSS_API_HOST)) + .pipe(replace(/RSS_API_KEY/g, process.env.RSS_API_KEY)) .pipe(dest('./dist/js')); return src(['./dist/**/*.html']) diff --git a/public/rss.html b/public/rss.html new file mode 100644 index 0000000..8ae79e6 --- /dev/null +++ b/public/rss.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/RSS.ts b/src/RSS.ts new file mode 100644 index 0000000..ed8eae2 --- /dev/null +++ b/src/RSS.ts @@ -0,0 +1,104 @@ +import { LitElement, html, css } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +type RSSItem = { + title: string; + link: string | null; +} + +@customElement('lavender-rss') +export class RSS extends LitElement { + rssItems: RSSItem[] = []; + rssTitle = ''; + rssLink: string | null = null; + + constructor() { + super(); + this.pullValueFromBackend(); + } + + async pullValueFromBackend() { + const urlParams = new URLSearchParams(window.location.search); + + const url = 'https://RSS_API_HOST/'; + const options = { + method: 'POST', + headers: { + 'content-type': 'application/json', + Origin: 'RSS_ORIGIN', + 'X-Requested-With': 'RSS_ORIGIN', + 'X-RapidAPI-Key': 'RSS_API_KEY', + 'X-RapidAPI-Host': 'RSS_API_HOST' + }, + body: JSON.stringify({ + url: urlParams.get('rss'), + }), + }; + + try { + const response = await fetch(url, options); + const result = await response.text(); + const rss = (new DOMParser()).parseFromString(result, 'text/xml'); + console.log(rss); + const title = rss.getElementsByTagName('title')[0] ?? null; + const link = rss.getElementsByTagName('link')[0] ?? null; + this.rssTitle = title?.textContent ?? 'Undefined'; + this.rssLink = link?.textContent ?? null; + const items = rss.getElementsByTagName('item'); + const allItems: RSSItem[] = []; + for (let itemsI = 0; itemsI < items.length; itemsI++) { + const item = items.item(itemsI); + const itemTitle = item?.getElementsByTagName('title')[0] ?? null; + const itemLink = item?.getElementsByTagName('link')[0] ?? null; + allItems.push({ + title: itemTitle?.textContent ?? 'Undefined', + link: itemLink?.textContent ?? null, + }); + } + + this.rssItems = allItems; + + this.requestUpdate(); + + } catch (error) { + console.error(error); + } + + // setTimeout(() => this.pullValueFromBackend(), 1000); + } + + static override styles = [ + css` + .gauge-body { + display: flex; + flex-direction: column; + justify-content: space-between; + align-content: space-between; + text-align: center; + } + + .gauge-label { + font-weight: bold; + } + ` + ] + override render() { + return html` +
+
RSS Feed for ${this.rssTitle}${this.rssLink ? html`link` : ''}
+ ${this.rssItems.map(rssItem => html` +
+
${rssItem.link ? html`${rssItem.title}` : rssItem.title}
+
+ `)} + +
+`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'lavender-rss': RSS; + } +} \ No newline at end of file diff --git a/src/Rainfall.ts b/src/Rainfall.ts index 7dd41ad..d40ae9d 100644 --- a/src/Rainfall.ts +++ b/src/Rainfall.ts @@ -19,7 +19,7 @@ export class Rainfall extends LitElement { this.setValue(result); - setTimeout(() => this.pullValueFromBackend(), 5000); + setTimeout(() => this.pullValueFromBackend(), 1000); } setValue(newValue: number) {