daily
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { NavLink, Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
import PomodoroWidget from "./components/PomodoroWidget";
|
||||
import WeatherWidget from "./components/WeatherWidget";
|
||||
|
||||
import RequireAuth from "./components/RequireAuth";
|
||||
|
||||
@@ -76,6 +77,7 @@ function AppShell() {
|
||||
|
||||
<NavLink to="/reminders">Календарь</NavLink>
|
||||
|
||||
<WeatherWidget compact />
|
||||
<PomodoroWidget compact />
|
||||
|
||||
{user && (
|
||||
|
||||
@@ -147,6 +147,73 @@ export interface PomodoroStatus {
|
||||
cycle: PomodoroCycle;
|
||||
}
|
||||
|
||||
export interface WeatherCurrent {
|
||||
time?: string | null;
|
||||
temperature_c?: number | null;
|
||||
apparent_temperature_c?: number | null;
|
||||
humidity_pct?: number | null;
|
||||
precipitation_mm?: number | null;
|
||||
wind_speed_kmh?: number | null;
|
||||
weather_code?: number | null;
|
||||
conditions?: string;
|
||||
}
|
||||
|
||||
export interface WeatherHourly {
|
||||
time?: string;
|
||||
temperature_c?: number | null;
|
||||
precipitation_mm?: number | null;
|
||||
precipitation_probability?: number | null;
|
||||
weather_code?: number | null;
|
||||
conditions?: string;
|
||||
}
|
||||
|
||||
export interface WeatherSnapshot {
|
||||
ok: boolean;
|
||||
location?: string;
|
||||
error?: string;
|
||||
field_coverage?: { current: string[]; hourly: string[] };
|
||||
local_field_coverage?: { current: string[]; hourly: string[] };
|
||||
data_source?: string;
|
||||
sync_hint?: string;
|
||||
current?: WeatherCurrent;
|
||||
hourly?: WeatherHourly[];
|
||||
}
|
||||
|
||||
export interface WeatherDashboard {
|
||||
weather: WeatherSnapshot;
|
||||
rain_summary: string;
|
||||
assistant_context: string;
|
||||
cache: {
|
||||
has_data: boolean;
|
||||
cached: boolean;
|
||||
fetched_at: number | null;
|
||||
age_sec: number | null;
|
||||
ttl_sec: number;
|
||||
expires_in_sec: number | null;
|
||||
source?: string;
|
||||
};
|
||||
config: {
|
||||
location: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
openmeteo_base_url: string;
|
||||
cache_ttl_sec: number;
|
||||
forecast_days: number;
|
||||
timezone: string;
|
||||
};
|
||||
available_fields: {
|
||||
current: string[];
|
||||
hourly: string[];
|
||||
};
|
||||
field_coverage: { current: string[]; hourly: string[] };
|
||||
local_field_coverage: { current: string[]; hourly: string[] };
|
||||
data_source: string;
|
||||
sync_hint: string;
|
||||
recommended_sync: { domains: string; variables: string };
|
||||
assistant_tools: Record<string, string>;
|
||||
system_prompt: string;
|
||||
}
|
||||
|
||||
export interface CharacterCardData {
|
||||
name: string;
|
||||
description: string;
|
||||
@@ -567,6 +634,9 @@ export const api = {
|
||||
{ method: "POST" }
|
||||
),
|
||||
|
||||
weatherDashboard: (hoursAhead = 12) =>
|
||||
request<WeatherDashboard>(`/api/v1/homelab/weather?hours_ahead=${hoursAhead}`),
|
||||
|
||||
getCharacter: () => request<CharacterCardV2>("/api/v1/character"),
|
||||
|
||||
saveCharacter: (card: CharacterCardV2) =>
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
.weather-widget {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weather-widget-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #c5ccd6;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.weather-widget.compact .weather-widget-trigger {
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
|
||||
.weather-widget-trigger:hover,
|
||||
.weather-widget.open .weather-widget-trigger {
|
||||
background: #2b3445;
|
||||
border-color: #3a4254;
|
||||
}
|
||||
|
||||
.weather-widget-icon {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.weather-widget-summary {
|
||||
font-size: 0.78rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.weather-widget-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.45rem);
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
width: min(420px, calc(100vw - 1.5rem));
|
||||
max-height: min(70vh, 640px);
|
||||
overflow: auto;
|
||||
padding: 0.85rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3142;
|
||||
background: #151922;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.weather-widget-panel-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.weather-widget-panel-head strong {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.weather-widget-sub {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.72rem;
|
||||
color: #8b95a5;
|
||||
}
|
||||
|
||||
.weather-widget-refresh {
|
||||
padding: 0.25rem 0.45rem;
|
||||
border: 1px solid #3a4254;
|
||||
border-radius: 6px;
|
||||
background: #1b2130;
|
||||
color: #c5ccd6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weather-widget-refresh:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.weather-widget-section + .weather-widget-section {
|
||||
margin-top: 0.85rem;
|
||||
padding-top: 0.85rem;
|
||||
border-top: 1px solid #2a2f3a;
|
||||
}
|
||||
|
||||
.weather-widget-section h4 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #8b95a5;
|
||||
}
|
||||
|
||||
.weather-widget-dl {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.45rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.weather-widget-dl div {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.weather-widget-dl dt {
|
||||
margin: 0;
|
||||
color: #8b95a5;
|
||||
}
|
||||
|
||||
.weather-widget-dl dd {
|
||||
margin: 0;
|
||||
color: #e8ebf0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.weather-widget-dl.compact-dl div {
|
||||
grid-template-columns: 110px 1fr;
|
||||
}
|
||||
|
||||
.weather-widget-note {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
color: #c5ccd6;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.weather-widget-context {
|
||||
margin: 0.5rem 0 0;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: #0f1218;
|
||||
border: 1px solid #2a3142;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
white-space: pre-wrap;
|
||||
color: #b8c0cc;
|
||||
}
|
||||
|
||||
.weather-widget-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.weather-widget-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.weather-widget-table th,
|
||||
.weather-widget-table td {
|
||||
padding: 0.35rem 0.4rem;
|
||||
border-bottom: 1px solid #2a2f3a;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.weather-widget-table th {
|
||||
color: #8b95a5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weather-widget-tools {
|
||||
margin: 0.5rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
font-size: 0.78rem;
|
||||
color: #a8b0bd;
|
||||
}
|
||||
|
||||
.weather-widget-tools code {
|
||||
color: #9ec5ff;
|
||||
}
|
||||
|
||||
.weather-widget-error {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.82rem;
|
||||
color: #ff8a8a;
|
||||
}
|
||||
|
||||
.weather-widget-warn {
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 180, 80, 0.08);
|
||||
border: 1px solid rgba(255, 180, 80, 0.25);
|
||||
font-size: 0.78rem;
|
||||
color: #e8c98a;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.weather-widget-panel {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
max-height: 75vh;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.weather-widget-summary {
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { api, WeatherDashboard } from "../api/client";
|
||||
import "./WeatherWidget.css";
|
||||
|
||||
const REFRESH_MS = 5 * 60 * 1000;
|
||||
|
||||
function formatTime(iso?: string | null): string {
|
||||
if (!iso) return "—";
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return iso;
|
||||
return d.toLocaleString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function formatHour(iso?: string): string {
|
||||
if (!iso) return "—";
|
||||
return iso.slice(11, 16);
|
||||
}
|
||||
|
||||
function cacheLabel(cache: WeatherDashboard["cache"]): string {
|
||||
if (!cache.has_data) return "нет данных";
|
||||
if (cache.cached && cache.expires_in_sec != null) {
|
||||
return `кэш ${cache.age_sec ?? 0} с, обновление через ${cache.expires_in_sec} с`;
|
||||
}
|
||||
return "только что загружено";
|
||||
}
|
||||
|
||||
interface WeatherWidgetProps {
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export default function WeatherWidget({ compact = false }: WeatherWidgetProps) {
|
||||
const [data, setData] = useState<WeatherDashboard | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const dash = await api.weatherDashboard(12);
|
||||
setData(dash);
|
||||
setError(dash.weather.ok ? null : dash.weather.error ?? "OpenMeteo недоступен");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
load().catch(() => undefined);
|
||||
const timer = window.setInterval(() => {
|
||||
load().catch(() => undefined);
|
||||
}, REFRESH_MS);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
load().catch(() => undefined);
|
||||
}, [open, load]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onPointerDown = (event: MouseEvent) => {
|
||||
if (!rootRef.current?.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", onPointerDown);
|
||||
return () => document.removeEventListener("mousedown", onPointerDown);
|
||||
}, [open]);
|
||||
|
||||
const cur = data?.weather.current;
|
||||
const compactLabel =
|
||||
cur?.temperature_c != null
|
||||
? `${Math.round(cur.temperature_c)}° · ${cur.conditions ?? "—"}`
|
||||
: error
|
||||
? "погода ?"
|
||||
: loading
|
||||
? "…"
|
||||
: "погода";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
className={`weather-widget ${compact ? "compact" : ""} ${open ? "open" : ""}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="weather-widget-trigger"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
title="OpenMeteo — что видит ассистент"
|
||||
>
|
||||
<span className="weather-widget-icon" aria-hidden>
|
||||
🌤
|
||||
</span>
|
||||
<span className="weather-widget-summary">{compactLabel}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="weather-widget-panel">
|
||||
<div className="weather-widget-panel-head">
|
||||
<div>
|
||||
<strong>OpenMeteo</strong>
|
||||
<span className="weather-widget-sub">
|
||||
{data?.config.location ?? "—"} · {cacheLabel(data?.cache ?? { has_data: false, cached: false, fetched_at: null, age_sec: null, ttl_sec: 300, expires_in_sec: null })}
|
||||
{data?.data_source === "fallback" && " · данные с api.open-meteo.com"}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" className="weather-widget-refresh" onClick={() => load()} disabled={loading}>
|
||||
{loading ? "…" : "↻"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && !data?.weather.ok && <p className="weather-widget-error">{error}</p>}
|
||||
|
||||
{data?.sync_hint && (
|
||||
<p className="weather-widget-warn">
|
||||
{data.sync_hint}
|
||||
{data.recommended_sync && (
|
||||
<>
|
||||
<br />
|
||||
<code>SYNC_DOMAINS={data.recommended_sync.domains}</code>
|
||||
<br />
|
||||
<code>SYNC_VARIABLES={data.recommended_sync.variables}</code>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{data?.field_coverage &&
|
||||
data.data_source !== "fallback" &&
|
||||
(data.field_coverage.current.length < data.available_fields.current.length ||
|
||||
data.field_coverage.hourly.length < data.available_fields.hourly.length) && (
|
||||
<p className="weather-widget-warn">
|
||||
OpenMeteo вернул не все поля. Пришло: current —{" "}
|
||||
{data.field_coverage.current.join(", ") || "ничего"}; hourly —{" "}
|
||||
{data.field_coverage.hourly.join(", ") || "ничего"}. Проверь sync на{" "}
|
||||
{data.config.openmeteo_base_url}.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{data?.local_field_coverage &&
|
||||
data.data_source === "fallback" &&
|
||||
(data.local_field_coverage.current.length < data.available_fields.current.length ||
|
||||
data.local_field_coverage.hourly.length < data.available_fields.hourly.length) && (
|
||||
<p className="weather-widget-warn">
|
||||
Локальный OpenMeteo ({data.config.openmeteo_base_url}) отдаёт только: current —{" "}
|
||||
{data.local_field_coverage.current.join(", ") || "ничего"}; hourly —{" "}
|
||||
{data.local_field_coverage.hourly.join(", ") || "ничего"}. Показаны данные fallback.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{data?.weather.ok && cur && (
|
||||
<section className="weather-widget-section">
|
||||
<h4>Сейчас</h4>
|
||||
<dl className="weather-widget-dl">
|
||||
<div>
|
||||
<dt>Время наблюдения</dt>
|
||||
<dd>{formatTime(cur.time)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Температура</dt>
|
||||
<dd>
|
||||
{cur.temperature_c}°C (ощущается {cur.apparent_temperature_c ?? "—"}°C)
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Условия</dt>
|
||||
<dd>
|
||||
{cur.conditions} (code {cur.weather_code ?? "—"})
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Влажность</dt>
|
||||
<dd>{cur.humidity_pct ?? "—"}%</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Осадки сейчас</dt>
|
||||
<dd>{cur.precipitation_mm ?? 0} мм</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Ветер</dt>
|
||||
<dd>{cur.wind_speed_kmh ?? "—"} км/ч</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{data?.rain_summary && (
|
||||
<section className="weather-widget-section">
|
||||
<h4>Осадки (12 ч)</h4>
|
||||
<p className="weather-widget-note">{data.rain_summary}</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{(data?.weather.hourly?.length ?? 0) > 0 && (
|
||||
<section className="weather-widget-section">
|
||||
<h4>По часам</h4>
|
||||
<div className="weather-widget-table-wrap">
|
||||
<table className="weather-widget-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>°C</th>
|
||||
<th>Осадки</th>
|
||||
<th>Вероятн.</th>
|
||||
<th>Условия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data!.weather.hourly!.map((row) => (
|
||||
<tr key={row.time}>
|
||||
<td>{formatHour(row.time)}</td>
|
||||
<td>{row.temperature_c ?? "—"}</td>
|
||||
<td>{row.precipitation_mm ?? 0} мм</td>
|
||||
<td>{row.precipitation_probability ?? "—"}%</td>
|
||||
<td>{row.conditions}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{data?.assistant_context && (
|
||||
<section className="weather-widget-section">
|
||||
<h4>Контекст ассистента</h4>
|
||||
<p className="weather-widget-note">{data.system_prompt}</p>
|
||||
<pre className="weather-widget-context">{data.assistant_context}</pre>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{data && (
|
||||
<section className="weather-widget-section">
|
||||
<h4>Источник</h4>
|
||||
<dl className="weather-widget-dl compact-dl">
|
||||
<div>
|
||||
<dt>Координаты</dt>
|
||||
<dd>
|
||||
{data.config.latitude}, {data.config.longitude}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>API</dt>
|
||||
<dd>{data.config.openmeteo_base_url}/v1/forecast</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>TTL кэша</dt>
|
||||
<dd>{data.config.cache_ttl_sec} с</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Current fields</dt>
|
||||
<dd>
|
||||
запрошено: {data.available_fields.current.join(", ")}
|
||||
<br />
|
||||
получено: {data.field_coverage.current.join(", ") || "—"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Hourly fields</dt>
|
||||
<dd>
|
||||
запрошено: {data.available_fields.hourly.join(", ")}
|
||||
<br />
|
||||
получено: {data.field_coverage.hourly.join(", ") || "—"}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<ul className="weather-widget-tools">
|
||||
{Object.entries(data.assistant_tools).map(([name, desc]) => (
|
||||
<li key={name}>
|
||||
<code>{name}</code> — {desc}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user