gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新html

Browse Source
This commit is contained in:
2569718930@qq.com
2026-05-13 21:26:26 +08:00
parent d97bb76480
commit 7555da8e6a
1 changed files with 143 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
monitoring-web/templates/monitor.html
+47 -44
View File
@@ -1,32 +1,33 @@
{% if full_page %} {% if full_page %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Market Monitor — PolyWeather</title> <title>Market Monitor — PolyWeather</title>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<meta http-equiv="refresh" content="120"> <meta http-equiv="refresh" content="120">
</head> </head>
<body> <body>
<div class="page"> <div class="page">
<header class="header"> <header class="header">
<h1>🔥 Market Monitor</h1> <h1>🔥 Market Monitor</h1>
<div class="header-right"> <div class="header-right">
<button id="notify-toggle" class="notify-btn" onclick="toggleNotify()" title="新高提醒"> <button id="notify-toggle" class="notify-btn" onclick="toggleNotify()" title="新高提醒">
<span id="notify-icon">🔔</span> <span id="notify-icon">🔔</span>
</button> </button>
<span class="updated" id="update-time">更新中…</span>
</div> </div>
</header> </header>
{% endif %} {% endif %}
<div id="card-grid" class="card-grid" <div id="card-grid" class="card-grid" hx-get="/api/data" hx-trigger="every 30s" hx-swap="outerHTML"
hx-get="/api/data" hx-trigger="every 30s" hx-swap="outerHTML" hx-indicator="#spinner"> hx-indicator="#spinner">
<span class="updated" style="display:block;grid-column:1/-1;text-align:right;margin-bottom:2px"> <span class="updated" style="display:block;grid-column:1/-1;text-align:right;margin-bottom:2px">
{{ generated_at }}</span> {{ generated_at }}</span>
{% for c in cities %} {% for c in cities %}
<div class="card{% if c.new_high %} new-high-card{% endif %}" data-new-high="{{ c.new_high }}"> <div class="card{% if c.new_high %} new-high-card{% endif %}" data-new-high="{{ c.new_high }}">
<div class="card-top"> <div class="card-top">
<span class="city-name">{{ c.en_name }}</span> <span class="city-name">{{ c.en_name }}</span>
<span class="airport">/ {{ c.airport }}</span> <span class="airport">/ {{ c.airport }}</span>
@@ -36,7 +37,8 @@
<div class="card-temp"> <div class="card-temp">
{% match c.current_temp %} {% match c.current_temp %}
{% when Some with (t) %} {% when Some with (t) %}
<span class="temp-value{% if c.temp_warm %} warm{% endif %}{% if c.new_high %} new-high-val{% endif %}">{{ "{:.1}"|format(t) }}</span><span class="temp-unit">°C</span> <span class="temp-value{% if c.temp_warm %} warm{% endif %}{% if c.new_high %} new-high-val{% endif %}">{{
"{:.1}"|format(t) }}</span><span class="temp-unit">°C</span>
{% when None %} {% when None %}
<span class="temp-value na">--</span> <span class="temp-value na">--</span>
{% endmatch %} {% endmatch %}
@@ -69,29 +71,29 @@
<span class="trend {{ c.trend.css_class() }}">{{ c.trend.symbol() }}</span> <span class="trend {{ c.trend.css_class() }}">{{ c.trend.symbol() }}</span>
</div> </div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div id="spinner" class="htmx-indicator">Refreshing…</div> <div id="spinner" class="htmx-indicator">Refreshing…</div>
{% if full_page %} {% if full_page %}
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script> <script>
// ── Notification ── // ── Notification ──
var NOTIFY_ENABLED = localStorage.getItem('monitor_notify') !== 'off'; var NOTIFY_ENABLED = localStorage.getItem('monitor_notify') !== 'off';
var NOTIFIED_HIGHS = JSON.parse(localStorage.getItem('monitor_notified_highs') || '{}'); var NOTIFIED_HIGHS = JSON.parse(localStorage.getItem('monitor_notified_highs') || '{}');
function toggleNotify() { function toggleNotify() {
NOTIFY_ENABLED = !NOTIFY_ENABLED; NOTIFY_ENABLED = !NOTIFY_ENABLED;
localStorage.setItem('monitor_notify', NOTIFY_ENABLED ? 'on' : 'off'); localStorage.setItem('monitor_notify', NOTIFY_ENABLED ? 'on' : 'off');
updateNotifyIcon(); updateNotifyIcon();
if (NOTIFY_ENABLED && Notification.permission === 'default') { if (NOTIFY_ENABLED && Notification.permission === 'default') {
Notification.requestPermission(); Notification.requestPermission();
} }
} }
function updateNotifyIcon() { function updateNotifyIcon() {
var icon = document.getElementById('notify-icon'); var icon = document.getElementById('notify-icon');
var btn = document.getElementById('notify-toggle'); var btn = document.getElementById('notify-toggle');
if (NOTIFY_ENABLED) { if (NOTIFY_ENABLED) {
@@ -101,9 +103,9 @@ function updateNotifyIcon() {
icon.textContent = '🔕'; icon.textContent = '🔕';
btn.classList.add('muted'); btn.classList.add('muted');
} }
} }
function fireNotification(enName, temp) { function fireNotification(enName, temp) {
if (!NOTIFY_ENABLED) return; if (!NOTIFY_ENABLED) return;
if (Notification.permission !== 'granted') return; if (Notification.permission !== 'granted') return;
@@ -125,40 +127,41 @@ function fireNotification(enName, temp) {
tag: key, tag: key,
requireInteraction: true, requireInteraction: true,
}); });
} }
updateNotifyIcon(); updateNotifyIcon();
// ── Flash on temp change + notifications ── // ── Flash on temp change + notifications ──
(function(){ (function () {
let prev = {}; let prev = {};
document.body.addEventListener('htmx:afterSwap', function(evt){ document.body.addEventListener('htmx:afterSwap', function (evt) {
if(evt.detail.target.id !== 'card-grid') return; if (evt.detail.target.id !== 'card-grid') return;
document.querySelectorAll('.card').forEach(function(card){ document.querySelectorAll('.card').forEach(function (card) {
var name = card.querySelector('.city-name').textContent; var name = card.querySelector('.city-name').textContent;
var tv = card.querySelector('.temp-value').textContent; var tv = card.querySelector('.temp-value').textContent;
var old = prev[name]; var old = prev[name];
prev[name] = tv; prev[name] = tv;
// Flash if changed // Flash if changed
if(old && old !== tv && tv !== '--'){ if (old && old !== tv && tv !== '--') {
card.style.transition = 'none'; card.style.transition = 'none';
card.style.boxShadow = '0 0 14px rgba(52,211,153,0.40)'; card.style.boxShadow = '0 0 14px rgba(52,211,153,0.40)';
requestAnimationFrame(function(){ requestAnimationFrame(function () {
card.style.transition = 'box-shadow 2s ease-out'; card.style.transition = 'box-shadow 2s ease-out';
card.style.boxShadow = ''; card.style.boxShadow = '';
}); });
} }
// Notification for new high // Notification for new high
if(card.dataset.newHigh === 'true'){ if (card.dataset.newHigh === 'true') {
fireNotification(name, tv); fireNotification(name, tv);
} }
}); });
}); });
})(); })();
</script> </script>
</div> </div>
</body> </body>
</html> </html>
{% endif %} {% endif %}