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", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"date-fns": "^2.30.0", "date-fns": "^3.0.0",
"date-fns-tz": "^3.1.3",
"dotenv": "^16.1.4", "dotenv": "^16.1.4",
"lit": "^2.7.5", "lit": "^2.7.5",
"typescript": "^5.1.3" "typescript": "^5.1.3"
@ -280,22 +281,6 @@
"node": ">=6.0.0" "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": { "node_modules/@babel/template": {
"version": "7.22.15", "version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@ -1813,18 +1798,20 @@
} }
}, },
"node_modules/date-fns": { "node_modules/date-fns": {
"version": "2.30.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": { "funding": {
"type": "opencollective", "type": "github",
"url": "https://opencollective.com/date-fns" "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": { "node_modules/debug": {

View File

@ -1,19 +1,20 @@
{ {
"name": "lavender", "name": "mosaic-widgets",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "npm run build && npm run deploy", "start": "npm run build && npm run deploy",
"build": "npx tsc && cp -R public dist && npx gulp && npx rollup -c", "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", "clean": "rm -rf build && rm -rf dist",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"date-fns": "^2.30.0", "date-fns": "^3.0.0",
"date-fns-tz": "^3.1.3",
"dotenv": "^16.1.4", "dotenv": "^16.1.4",
"lit": "^2.7.5", "lit": "^2.7.5",
"typescript": "^5.1.3" "typescript": "^5.1.3"

View File

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

View File

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

View File

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

View File

@ -7,6 +7,6 @@
</head> </head>
<body> <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> <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> </body>
</html> </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> <script type="module" src="./js/Weather.js"></script>
</head> </head>
<body> <body>
<lavender-weather></lavender-weather> <mosaic-weather></mosaic-weather>
</body> </body>
</html> </html>

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import { LitElement, html, css } from 'lit'; import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
@customElement('lavender-splork') @customElement('mosaic-splork')
export class Splork extends LitElement { export class Splork extends LitElement {
value = 0.0; value = 0.0;
@ -49,6 +49,6 @@ export class Splork extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { 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 { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
@customElement('lavender-weather') @customElement('mosaic-weather')
export class Weather extends LitElement { export class Weather extends LitElement {
temp = 0.0; temp = 0.0;
@ -47,7 +47,7 @@ export class Weather extends LitElement {
<div class="gauge-label">Temperature (in C)</div> <div class="gauge-label">Temperature (in C)</div>
<div>${this.temp}</div> <div>${this.temp}</div>
<div class="gauge-label">Temperature (in F)</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> </div>
`; `;
} }
@ -55,6 +55,6 @@ export class Weather extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'lavender-weather': Weather; 'mosaic-weather': Weather;
} }
} }