root/daily-briefing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add MQTT integration for real-time entity updates

Browse source 
- aiomqtt async client with auto-reconnect and topic store
- MQTT router: GET /api/mqtt, GET /api/mqtt/topic/{path}, POST /api/mqtt/publish
- MQTT entities included in /api/all + WebSocket broadcast
- MqttCard frontend component with category filters, entity list
- Configurable via ENV: MQTT_HOST, MQTT_PORT, MQTT_USERNAME,
  MQTT_PASSWORD, MQTT_TOPICS (comma-separated or JSON array)
- Gracefully disabled when MQTT_HOST is not set

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam 2026-03-02 10:13:50 +01:00
parent 9f7330e217
commit 89ed0c6d0a
11 changed files with 542 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

175
web/src/components/MqttCard.tsx Normal file
View file

@ -0,0 +1,175 @@
import { useState, useMemo } from "react";
import { Radio, ChevronDown, ChevronUp, Zap, ZapOff } from "lucide-react";
import type { MqttData, MqttEntity } from "../api";
interface Props {
data: MqttData;
}
export default function MqttCard({ data }: Props) {
const [expanded, setExpanded] = useState(false);
const [filter, setFilter] = useState<string | null>(null);
// Group entities by category
const grouped = useMemo(() => {
const map: Record<string, MqttEntity[]> = {};
for (const e of data.entities) {
const cat = e.category || "other";
if (!map[cat]) map[cat] = [];
map[cat].push(e);
}
return map;
}, [data.entities]);
const categories = Object.keys(grouped).sort();
const filtered = filter ? grouped[filter] || [] : data.entities;
const shown = expanded ? filtered : filtered.slice(0, 8);
return (
<div className="glass-card p-5">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<Radio className="w-4 h-4 text-violet-400" />
<h3 className="text-sm font-semibold text-white">MQTT</h3>
<span className="text-[10px] text-slate-500 font-mono">
{data.entities.length} Entit{data.entities.length === 1 ? "ät" : "äten"}
</span>
</div>
<div className="flex items-center gap-1.5">
{data.connected ? (
<Zap className="w-3.5 h-3.5 text-violet-400" />
) : (
<ZapOff className="w-3.5 h-3.5 text-slate-600" />
)}
<span
className={`text-[10px] font-medium ${
data.connected ? "text-violet-400" : "text-slate-600"
}`}
>
{data.connected ? "Verbunden" : "Getrennt"}
</span>
</div>
</div>
{/* Category filter tabs */}
{categories.length > 1 && (
<div className="flex gap-1.5 mb-3 flex-wrap">
<button
onClick={() => setFilter(null)}
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
filter === null
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
}`}
>
Alle
</button>
{categories.map((cat) => (
<button
key={cat}
onClick={() => setFilter(filter === cat ? null : cat)}
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
filter === cat
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
}`}
>
{cat}
<span className="ml-1 opacity-50">{grouped[cat].length}</span>
</button>
))}
</div>
)}
{/* Entity list */}
{data.entities.length === 0 ? (
<div className="text-center py-6">
<Radio className="w-8 h-8 text-slate-700 mx-auto mb-2" />
<p className="text-xs text-slate-600">
{data.connected
? "Warte auf MQTT-Nachrichten..."
: "MQTT nicht konfiguriert"}
</p>
</div>
) : (
<div className="space-y-1.5">
{shown.map((entity) => (
<EntityRow key={entity.topic} entity={entity} />
))}
</div>
)}
{/* Expand/collapse */}
{filtered.length > 8 && (
<button
onClick={() => setExpanded(!expanded)}
className="mt-3 w-full flex items-center justify-center gap-1 text-[10px] text-slate-500 hover:text-slate-300 transition-colors"
>
{expanded ? (
<>
<ChevronUp className="w-3 h-3" />
Weniger anzeigen
</>
) : (
<>
<ChevronDown className="w-3 h-3" />
Alle {filtered.length} anzeigen
</>
)}
</button>
)}
</div>
);
}
function EntityRow({ entity }: { entity: MqttEntity }) {
const age = Math.round((Date.now() / 1000 - entity.timestamp));
const ageStr =
age < 60
? `${age}s`
: age < 3600
? `${Math.floor(age / 60)}m`
: `${Math.floor(age / 3600)}h`;
// Format value for display
const displayValue = formatValue(entity.value);
const isNumeric = typeof entity.value === "number";
return (
<div className="flex items-center justify-between gap-3 px-2.5 py-1.5 rounded-lg bg-white/[0.02] hover:bg-white/[0.04] transition-colors group">
<div className="flex-1 min-w-0">
<p className="text-[11px] text-slate-300 truncate">{entity.name}</p>
<p className="text-[9px] text-slate-600 truncate font-mono">{entity.topic}</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<span
className={`text-xs font-mono font-medium ${
isNumeric ? "text-violet-300" : "text-slate-300"
}`}
>
{displayValue}
</span>
<span className="text-[9px] text-slate-700 w-6 text-right">{ageStr}</span>
</div>
</div>
);
}
function formatValue(value: any): string {
if (value === null || value === undefined) return "—";
if (typeof value === "boolean") return value ? "ON" : "OFF";
if (typeof value === "number") {
return Number.isInteger(value) ? value.toString() : value.toFixed(1);
}
if (typeof value === "object") {
return JSON.stringify(value).slice(0, 40);
}
const str = String(value);
// Common HA/MQTT states → nicer display
if (str === "on" || str === "ON") return "ON";
if (str === "off" || str === "OFF") return "OFF";
if (str === "online") return "Online";
if (str === "offline") return "Offline";
return str.length > 30 ? str.slice(0, 30) + "…" : str;
}