caranmegil
/
mosaic-widgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to widget ideas

This commit is contained in:
William Moore 2024-02-14 10:13:22 -06:00
parent 84f8228c0c
commit 030b44c084
13 changed files with 1257 additions and 1098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulpfile.js
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -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
public/affirmations.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="86400">

1
public/biblevotd.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3600">

9
public/merrysky.html
View File

@ -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
public/rainfall.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<script type="module" src="./js/Rainfall.js"></script>

1
public/rss.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3600">

1
public/splork.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="86400">

1
public/teasense.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<script type="module" src="./js/TeaSense.js"></script>

10
public/weather.html Normal file
View 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>

15
src/MerrySky.ts
View File

@ -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
View 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;
}
}