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

Update to add Splork

Browse Source
This commit is contained in:
William Moore 2023-06-06 16:57:43 -05:00
parent b5d9849c9a
commit e129f3cd57
3 changed files with 64 additions and 0 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() {
return src(['./public/js/**/*.js'])
.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(dest('./public/js'));
};

8
public/splork.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<script type="module" src="./js/Splork.js"></script>
</head>
<body>
<lavender-splork></lavender-splork>
</body>
</html>

55
src/Splork.ts Normal file
View File

@ -0,0 +1,55 @@
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('lavender-splork')
export class Splork extends LitElement {
value = 0.0;
constructor() {
super();
this.pullValueFromBackend();
}
async pullValueFromBackend() {
const response = await fetch('SPLORK_URI');
const data = await response.json();
const result = data.message;
this.setValue(result);
}
setValue(newValue: number) {
this.value = newValue;
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">Splork MOTD</div>
<div>${this.value}</div>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'lavender-splork': Splork;
}
}