Updates
This commit is contained in:
parent
030b44c084
commit
44ea9cae00
43
package-lock.json
generated
43
package-lock.json
generated
@ -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": {
|
||||
|
@ -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"
|
||||
|
@ -5,6 +5,6 @@
|
||||
<script type="module" src="./js/Affirmations.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-affirmations></lavender-affirmations>
|
||||
<mosaic-affirmations></mosaic-affirmations>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -4,6 +4,6 @@
|
||||
<script type="module" src="./js/Rainfall.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-rainfall></lavender-rainfall>
|
||||
<mosaic-rainfall></mosaic-rainfall>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -5,6 +5,6 @@
|
||||
<script type="module" src="./js/RSS.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-rss></lavender-rss>
|
||||
<mosaic-rss></mosaic-rss>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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
10
public/time.html
Normal 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>
|
@ -5,6 +5,6 @@
|
||||
<script type="module" src="./js/Weather.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<lavender-weather></lavender-weather>
|
||||
<mosaic-weather></mosaic-weather>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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
64
src/Time.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user