Update to include RSS reader
This commit is contained in:
parent
a9ade8948e
commit
768d262f34
@ -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'])
|
||||
|
9
public/rss.html
Normal file
9
public/rss.html
Normal file
@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="3600">
|
||||
<script type="module" src="./js/RSS.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-rss></lavender-rss>
|
||||
</body>
|
||||
</html>
|
104
src/RSS.ts
Normal file
104
src/RSS.ts
Normal file
@ -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`
|
||||
<div class="gauge-body">
|
||||
<div class="gauge-label">RSS Feed for ${this.rssTitle}${this.rssLink ? html`<a href="${this.rssLink}">link</a>` : ''}</div>
|
||||
${this.rssItems.map(rssItem => html`
|
||||
<div>
|
||||
<div>${rssItem.link ? html`<a href="${rssItem.link}">${rssItem.title}</a>` : rssItem.title}</div>
|
||||
</div>
|
||||
`)}
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lavender-rss': RSS;
|
||||
}
|
||||
}
|
@ -19,7 +19,7 @@ export class Rainfall extends LitElement {
|
||||
|
||||
this.setValue(result);
|
||||
|
||||
setTimeout(() => this.pullValueFromBackend(), 5000);
|
||||
setTimeout(() => this.pullValueFromBackend(), 1000);
|
||||
}
|
||||
|
||||
setValue(newValue: number) {
|
||||
|
Loading…
Reference in New Issue
Block a user