lani/fxl.codes.Weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaks

Browse Source
This commit is contained in:
Lani Aung
2025-08-13 22:54:31 -07:00
parent b48b9d8af3
commit 529a3cd86c
5 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.less
+9 -6
View File
@@ -56,20 +56,23 @@ body {
.material { .material {
font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24; font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24;
vertical-align: sub; line-height: inherit;
} }
} }
#hourly { #hourly,
#daily {
display: flex; display: flex;
font-size: .75rem; font-size: .7rem;
margin: 1rem 0; justify-content: space-between;
text-align: center; text-align: center;
} }
#daily { #hourly {
display: flex; margin: 1rem 0;
}
#daily {
.daily-slot { .daily-slot {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/weather.ts
+13 -8
View File
@@ -11,6 +11,7 @@ export default class Weather {
current: CurrentWeather current: CurrentWeather
hourly: HourlyWeather[] = [] hourly: HourlyWeather[] = []
daily: DailyWeather[] = [] daily: DailyWeather[] = []
offset: number
constructor(latitude?: number, longitude?: number) { constructor(latitude?: number, longitude?: number) {
this.options = new WeatherOptions(latitude ?? 47.61002138071677, longitude ?? -122.17906310779568) this.options = new WeatherOptions(latitude ?? 47.61002138071677, longitude ?? -122.17906310779568)
@@ -36,11 +37,14 @@ export default class Weather {
const current = response.current() const current = response.current()
const hourly = response.hourly() const hourly = response.hourly()
const daily = response.daily() const daily = response.daily()
me.offset = response.utcOffsetSeconds()
if (current != null) me.current = new CurrentWeather(current) if (current != null) me.current = new CurrentWeather(current)
if (hourly != null) me.setHourlyData(hourly) if (hourly != null) me.setHourlyData(hourly)
if (daily != null) me.setDailyData(daily) if (daily != null) me.setDailyData(daily)
} }
console.info(`Timezone: ${responses[0].timezone()} ${responses[0].timezoneAbbreviation()}\nTimezone difference to GMT+0: ${me.offset}s`);
} }
private needsUpdate(parameters: any): boolean { private needsUpdate(parameters: any): boolean {
@@ -88,8 +92,9 @@ export default class Weather {
this.hourly.length = 0 this.hourly.length = 0
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
new Date()
this.hourly.push({ this.hourly.push({
time: new Date(new Date().getTime() + i * 3600000), time: new Date((Number(hourly.time()) + i * hourly.interval()) * 1000),
temperature: temperatures[i], temperature: temperatures[i],
precipitation: precipitationTotals[i], precipitation: precipitationTotals[i],
precipitationProbability: precipitationProbabilities[i] precipitationProbability: precipitationProbabilities[i]
@@ -147,8 +152,8 @@ export default class Weather {
for (const day of this.daily) { for (const day of this.daily) {
dailySlots.push(`<div class="daily-slot"> dailySlots.push(`<div class="daily-slot">
<span class="date">${day.time.getDate()}</span> <span class="date">${day.time.getDate()}</span>
<span class="range">${Math.round(day.minTemperature)} - ${Math.round(day.maxTemperature)}</span> <span class="range">${Math.round(day.minTemperature)}&mdash;${Math.round(day.maxTemperature)}</span>
<span class="uv ${day.uvRating()}">${Math.round(day.maxUV)}</span> <span class="uv ${day.uvRating()}" title="${day.uvRating()}">${Math.round(day.maxUV)}</span>
<span class="sunrise">${day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span> <span class="sunrise">${day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span>
<span class="sunset">${day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span> <span class="sunset">${day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span>
</div>`) </div>`)
@@ -160,13 +165,14 @@ export default class Weather {
if (!this.hourly) return if (!this.hourly) return
const hourlySlots: string[] = [] const hourlySlots: string[] = []
for (let i = 0; i < 12; i++) { const startHour = this.hourly.findIndex(x => x.time.getTime() > (new Date().getTime()) - 3600000)
const hour = this.hourly[i] for (let i = 0; i < 10; i++) {
const hour = this.hourly[i + startHour]
hourlySlots.push(`<div class="hourly-slot"> hourlySlots.push(`<div class="hourly-slot">
<span class="hour">${hour.time.getHours()}</span> <span class="hour">${hour.time.getHours()}</span>
<span class="temp">${Math.round(hour.temperature)}</span> <span class="temp">${Math.round(hour.temperature)}</span>
<span class="precipitation">${hour.precipitation}<sup>"</sup></span> <span class="precipitation">${Math.round(hour.precipitation)}<sup>"</sup></span>
<span class="chance">${hour.precipitationProbability}<sup>%</sup></span> <span class="chance">${Math.round(hour.precipitationProbability)}<sup>%</sup></span>
</div>`) </div>`)
} }
@@ -194,7 +200,6 @@ class WeatherOptions {
"wind_speed_unit" = "mph" "wind_speed_unit" = "mph"
"temperature_unit" = "fahrenheit" "temperature_unit" = "fahrenheit"
"precipitation_unit" = "inch" "precipitation_unit" = "inch"
"forecast_hours": 12
constructor(latitude: number, longitude: number, timezone = "America/Los_Angeles") { constructor(latitude: number, longitude: number, timezone = "America/Los_Angeles") {
this.latitude = latitude this.latitude = latitude
www/main.js
+9 -5
View File
@@ -2350,6 +2350,7 @@ var Weather = /** @class */ (function () {
current = response.current(); current = response.current();
hourly = response.hourly(); hourly = response.hourly();
daily = response.daily(); daily = response.daily();
me.offset = response.utcOffsetSeconds();
if (current != null) if (current != null)
me.current = new CurrentWeather(current); me.current = new CurrentWeather(current);
if (hourly != null) if (hourly != null)
@@ -2357,6 +2358,7 @@ var Weather = /** @class */ (function () {
if (daily != null) if (daily != null)
me.setDailyData(daily); me.setDailyData(daily);
} }
console.info("Timezone: ".concat(responses[0].timezone(), " ").concat(responses[0].timezoneAbbreviation(), "\nTimezone difference to GMT+0: ").concat(me.offset, "s"));
return [2 /*return*/]; return [2 /*return*/];
} }
}); });
@@ -2403,8 +2405,9 @@ var Weather = /** @class */ (function () {
var precipitationProbabilities = hourly.variables(2).valuesArray(); var precipitationProbabilities = hourly.variables(2).valuesArray();
this.hourly.length = 0; this.hourly.length = 0;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
new Date();
this.hourly.push({ this.hourly.push({
time: new Date(new Date().getTime() + i * 3600000), time: new Date((Number(hourly.time()) + i * hourly.interval()) * 1000),
temperature: temperatures[i], temperature: temperatures[i],
precipitation: precipitationTotals[i], precipitation: precipitationTotals[i],
precipitationProbability: precipitationProbabilities[i] precipitationProbability: precipitationProbabilities[i]
@@ -2451,16 +2454,17 @@ var Weather = /** @class */ (function () {
var dailySlots = []; var dailySlots = [];
for (var _i = 0, _a = this.daily; _i < _a.length; _i++) { for (var _i = 0, _a = this.daily; _i < _a.length; _i++) {
var day = _a[_i]; var day = _a[_i];
dailySlots.push("<div class=\"daily-slot\">\n <span class=\"date\">".concat(day.time.getDate(), "</span>\n <span class=\"range\">").concat(Math.round(day.minTemperature), " - ").concat(Math.round(day.maxTemperature), "</span>\n <span class=\"uv ").concat(day.uvRating(), "\">").concat(Math.round(day.maxUV), "</span>\n <span class=\"sunrise\">").concat(day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n <span class=\"sunset\">").concat(day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n</div>")); dailySlots.push("<div class=\"daily-slot\">\n <span class=\"date\">".concat(day.time.getDate(), "</span>\n <span class=\"range\">").concat(Math.round(day.minTemperature), "&mdash;").concat(Math.round(day.maxTemperature), "</span>\n <span class=\"uv ").concat(day.uvRating(), "\" title=\"").concat(day.uvRating(), "\">").concat(Math.round(day.maxUV), "</span>\n <span class=\"sunrise\">").concat(day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n <span class=\"sunset\">").concat(day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n</div>"));
} }
var daily = document.getElementById("daily"); var daily = document.getElementById("daily");
daily.innerHTML = dailySlots.join("\r\n"); daily.innerHTML = dailySlots.join("\r\n");
if (!this.hourly) if (!this.hourly)
return; return;
var hourlySlots = []; var hourlySlots = [];
for (var i = 0; i < 12; i++) { var startHour = this.hourly.findIndex(function (x) { return x.time.getTime() > (new Date().getTime()) - 3600000; });
var hour = this.hourly[i]; for (var i = 0; i < 10; i++) {
hourlySlots.push("<div class=\"hourly-slot\">\n <span class=\"hour\">".concat(hour.time.getHours(), "</span>\n <span class=\"temp\">").concat(Math.round(hour.temperature), "</span>\n <span class=\"precipitation\">").concat(hour.precipitation, "<sup>\"</sup></span>\n <span class=\"chance\">").concat(hour.precipitationProbability, "<sup>%</sup></span>\n</div>")); var hour = this.hourly[i + startHour];
hourlySlots.push("<div class=\"hourly-slot\">\n <span class=\"hour\">".concat(hour.time.getHours(), "</span>\n <span class=\"temp\">").concat(Math.round(hour.temperature), "</span>\n <span class=\"precipitation\">").concat(Math.round(hour.precipitation), "<sup>\"</sup></span>\n <span class=\"chance\">").concat(Math.round(hour.precipitationProbability), "<sup>%</sup></span>\n</div>"));
} }
var hourly = document.getElementById("hourly"); var hourly = document.getElementById("hourly");
hourly.innerHTML = hourlySlots.join("\r\n"); hourly.innerHTML = hourlySlots.join("\r\n");
www/main.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
www/styles.css
+9 -7
View File
@@ -57,18 +57,20 @@ body #weather-panel #time {
html #weather-panel #time .material, html #weather-panel #time .material,
body #weather-panel #time .material { body #weather-panel #time .material {
font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24; font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24;
vertical-align: sub; line-height: inherit;
} }
html #weather-panel #hourly, html #weather-panel #hourly,
body #weather-panel #hourly { body #weather-panel #hourly,
display: flex;
font-size: 0.75rem;
margin: 1rem 0;
text-align: center;
}
html #weather-panel #daily, html #weather-panel #daily,
body #weather-panel #daily { body #weather-panel #daily {
display: flex; display: flex;
font-size: 0.7rem;
justify-content: space-between;
text-align: center;
}
html #weather-panel #hourly,
body #weather-panel #hourly {
margin: 1rem 0;
} }
html #weather-panel #daily .daily-slot, html #weather-panel #daily .daily-slot,
body #weather-panel #daily .daily-slot { body #weather-panel #daily .daily-slot {