This commit is contained in:
William Moore 2024-05-12 17:21:30 -05:00
parent 030b44c084
commit 44ea9cae00
14 changed files with 111 additions and 53 deletions

43
package-lock.json generated
View File

@ -9,7 +9,8 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"date-fns": "^2.30.0",
"date-fns": "^3.0.0",
"date-fns-tz": "^3.1.3",
"dotenv": "^16.1.4",
"lit": "^2.7.5",
"typescript": "^5.1.3"
@ -280,22 +281,6 @@
"node": ">=6.0.0"
}
},
"node_modules/@babel/runtime": {
"version": "7.23.8",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
"integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime/node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/@babel/template": {
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@ -1813,18 +1798,20 @@
}
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/date-fns-tz": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.1.3.tgz",
"integrity": "sha512-ZfbMu+nbzW0mEzC8VZrLiSWvUIaI3aRHeq33mTe7Y38UctKukgqPR4nTDwcwS4d64Gf8GghnVsroBuMY3eiTeA==",
"peerDependencies": {
"date-fns": "^3.0.0"
}
},
"node_modules/debug": {

View File

@ -1,19 +1,20 @@
{
"name": "lavender",
"name": "mosaic-widgets",
"version": "1.0.0",
"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",
"deploy": "rm -rf ~/www/html/mosaic-widgets && cp -R build ~/www/html/mosaic-widgets",
"clean": "rm -rf build && rm -rf dist",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"date-fns": "^2.30.0",
"date-fns": "^3.0.0",
"date-fns-tz": "^3.1.3",
"dotenv": "^16.1.4",
"lit": "^2.7.5",
"typescript": "^5.1.3"

View File

@ -5,6 +5,6 @@
<script type="module" src="./js/Affirmations.js"></script>
</head>
<body>
<lavender-affirmations></lavender-affirmations>
<mosaic-affirmations></mosaic-affirmations>
</body>
</html>

View File

@ -4,6 +4,6 @@
<script type="module" src="./js/Rainfall.js"></script>
</head>
<body>
<lavender-rainfall></lavender-rainfall>
<mosaic-rainfall></mosaic-rainfall>
</body>
</html>

View File

@ -5,6 +5,6 @@
<script type="module" src="./js/RSS.js"></script>
</head>
<body>
<lavender-rss></lavender-rss>
<mosaic-rss></mosaic-rss>
</body>
</html>

View File

@ -7,6 +7,6 @@
</head>
<body>
<h2 style="text-align: center">Splork MOTD (<a href="https://codeberg.org/caranmegil/splork" alt="Source Code" target="_blank"><i class="fa-brands fa-square-git"></i></a>)</h2>
<lavender-splork></lavender-splork>
<mosaic-splork></mosaic-splork>
</body>
</html>

10
public/time.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="120">
<script type="module" src="./js/Time.js"></script>
</head>
<body>
<mosaic-time></mosaic-time>
</body>
</html>

View File

@ -5,6 +5,6 @@
<script type="module" src="./js/Weather.js"></script>
</head>
<body>
<lavender-weather></lavender-weather>
<mosaic-weather></mosaic-weather>
</body>
</html>

View File

@ -1,7 +1,7 @@
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('lavender-affirmations')
@customElement('mosaic-affirmations')
export class Affirmations extends LitElement {
replaceShe = ["her", "she", "her", "herself", "she is"];
replaceThey = ["them", "they", "their", "themself", "they are"];
@ -95,6 +95,6 @@ export class Affirmations extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'lavender-affirmations': Affirmations;
'mosaic-affirmations': Affirmations;
}
}

View File

@ -6,7 +6,7 @@ type RSSItem = {
link: string | null;
}
@customElement('lavender-rss')
@customElement('mosaic-rss')
export class RSS extends LitElement {
rssItems: RSSItem[] = [];
rssTitle = '';
@ -116,6 +116,6 @@ export class RSS extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'lavender-rss': RSS;
'mosaic-rss': RSS;
}
}

View File

@ -1,7 +1,7 @@
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('lavender-rainfall')
@customElement('mosaic-rainfall')
export class Rainfall extends LitElement {
value = 0.0;
@ -13,11 +13,7 @@ export class Rainfall extends LitElement {
async pullValueFromBackend() {
const response = await fetch('RAINFALL_URI');
const data = await response.json();
const result = data
.map((datum: any) => datum.value)
.reduce((accum: number, datum: number) => accum + datum, 0);
this.setValue(result);
this.setValue(data.total_moisture);
setTimeout(() => this.pullValueFromBackend(), 1000);
}
@ -46,7 +42,7 @@ export class Rainfall extends LitElement {
return html`
<div class="gauge-body">
<div class="gauge-label">Rainfall (inches and mm water)</div>
<div>${this.value / 25.4} / ${this.value}</div>
<div>${Math.round((this.value / 25.4) * 100)/100} / ${Math.round(this.value*100)/100}</div>
</div>
`;
}
@ -54,6 +50,6 @@ export class Rainfall extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'lavender-rainfall': Rainfall;
'mosaic-rainfall': Rainfall;
}
}

View File

@ -1,7 +1,7 @@
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('lavender-splork')
@customElement('mosaic-splork')
export class Splork extends LitElement {
value = 0.0;
@ -49,6 +49,6 @@ export class Splork extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'lavender-splork': Splork;
'mosaic-splork': Splork;
}
}

64
src/Time.ts Normal file
View File

@ -0,0 +1,64 @@
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { format } from 'date-fns-tz';
@customElement('mosaic-time')
export class Time extends LitElement {
time = '';
constructor() {
super();
this.reloadTime();
}
async reloadTime() {
const date = new Date();
const hours = date.getUTCHours();
const minutes = date.getUTCMinutes();
const seconds = date.getUTCSeconds();
let beats = (hours * 3600 + 60 * minutes + seconds) / 86.4;
beats = Math.round(beats * 1000) / 1000;
this.setData(`${format(date, 'yyyy-MM-dd', {timeZone: 'UTC'})}@${beats.toFixed(4)}`);
setTimeout(() => this.reloadTime(), 10);
}
setData(time: string) {
this.time = time;
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">Universal Decimal Time</div>
<div>${this.time}</div>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'mosaic-time': Time;
}
}

View File

@ -1,7 +1,7 @@
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('lavender-weather')
@customElement('mosaic-weather')
export class Weather extends LitElement {
temp = 0.0;
@ -47,7 +47,7 @@ export class Weather extends LitElement {
<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>${Math.round((this.temp*9)/5 + 32)}</div>
</div>
`;
}
@ -55,6 +55,6 @@ export class Weather extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'lavender-weather': Weather;
'mosaic-weather': Weather;
}
}