Update to widget ideas
This commit is contained in:
parent
84f8228c0c
commit
030b44c084
@ -7,6 +7,7 @@ function replaceTemplate() {
|
||||
src(['./dist/js/**/*.js'])
|
||||
.pipe(replace(/TEASENSE_URI/g, process.env.TEASENSE_URI))
|
||||
.pipe(replace(/RAINFALL_URI/g, process.env.RAINFALL_URI))
|
||||
.pipe(replace(/OPENWEATHER_API_KEY/g, process.env.OPENWEATHER_API_KEY))
|
||||
.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))
|
||||
|
2252
package-lock.json
generated
2252
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,7 +4,9 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "npm run build && npm run deploy",
|
||||
"build": "npx tsc && cp -R public dist && npx gulp && npx rollup -c",
|
||||
"deploy": "rm -rf ~/www/html/lavender-widgets && cp -R build ~/www/html/lavender-widgets",
|
||||
"clean": "rm -rf build && rm -rf dist",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="86400">
|
||||
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="3600">
|
||||
|
@ -1,9 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="86400">
|
||||
<script type="module" src="./js/MerrySky.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<merry-sky></merry-sky>
|
||||
</body>
|
||||
</html>
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="module" src="./js/Rainfall.js"></script>
|
||||
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="3600">
|
||||
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="86400">
|
||||
|
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="module" src="./js/TeaSense.js"></script>
|
||||
|
10
public/weather.html
Normal file
10
public/weather.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="120">
|
||||
<script type="module" src="./js/Weather.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-weather></lavender-weather>
|
||||
</body>
|
||||
</html>
|
@ -1,15 +0,0 @@
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
|
||||
@customElement('merry-sky')
|
||||
export class MerrySky extends LitElement {
|
||||
override render() {
|
||||
return html`<iframe framespacing="0" width="100%" height="100%" frameborder="no" src="https://merrysky.net">View MerrySky</iframe>`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'merry-sky': MerrySky;
|
||||
}
|
||||
}
|
60
src/Weather.ts
Normal file
60
src/Weather.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
|
||||
@customElement('lavender-weather')
|
||||
export class Weather extends LitElement {
|
||||
temp = 0.0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.pullFromBackend();
|
||||
}
|
||||
|
||||
|
||||
async pullFromBackend() {
|
||||
const apiUri = `https://api.openweathermap.org/data/2.5/weather?q=Olathe,Kansas,USA&appid=OPENWEATHER_API_KEY&units=metric`;
|
||||
const response = await fetch(apiUri);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
this.setData(data.main.temp);
|
||||
}
|
||||
|
||||
setData(temp: number) {
|
||||
this.temp = temp;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
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">Temperature in Olathe, Kansas, United States of America</div>
|
||||
<div class="gauge-label">Temperature (in C)</div>
|
||||
<div>${this.temp}</div>
|
||||
<div class="gauge-label">Temperature (in F)</div>
|
||||
<div>${(this.temp*9)/5 + 32}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lavender-weather': Weather;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user