hotel-manage-stack/portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MQTT clients tab: show broker host/port and Tasmota setup hint

Browse source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-10-15 10:22:24 +00:00
parent ad65e41395
commit fe78bcfc49
1 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/pages/AdminSettings.tsx
View file

@ -949,10 +949,15 @@ function MqttClientsTab() {
const [isService, setIsService] = useState(false)
const [creating, setCreating] = useState(false)
const [error, setError] = useState('')
const [broker, setBroker] = useState<{ host: string; port: number } | null>(null)
const [revealed, setRevealed] = useState<{ id: number; username: string; password: string } | null>(null)
const [copied, setCopied] = useState(false)
useEffect(() => { load() }, [])
useEffect(() => {
load()
fetch('/settings/api/mqtt-broker', { credentials: 'include' })
.then(r => r.ok ? r.json() : null).then(b => b && setBroker(b)).catch(() => {})
}, [])
async function load() {
setLoading(true)
@ -1057,6 +1062,25 @@ function MqttClientsTab() {
</button>
</div>
{broker && (
<div style={{
background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 'var(--radius)',
padding: '0.85rem 1rem', marginBottom: '1.25rem', boxShadow: 'var(--shadow-sm)',
}}>
<p style={{ fontSize: '0.78rem', fontWeight: 600, color: 'var(--text-mid)', marginBottom: '0.4rem' }}>
Point devices at this broker
</p>
<div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', fontSize: '0.85rem', color: 'var(--text-dark)' }}>
<span>Host <code style={{ background: 'var(--surface-2)', padding: '0.1em 0.4em', borderRadius: 3 }}>{broker.host}</code></span>
<span>Port <code style={{ background: 'var(--surface-2)', padding: '0.1em 0.4em', borderRadius: 3 }}>{broker.port}</code></span>
</div>
<p style={{ fontSize: '0.74rem', color: 'var(--text-mid)', marginTop: '0.4rem' }}>
Tasmota: Configuration → Configure MQTT. Enter the host and port above, a client's username and password
(use the Password button below), and a unique Topic per switch. The switch must be able to reach this address from its network.
</p>
</div>
)}
{showForm && (
<form onSubmit={create} style={{
background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 'var(--radius)',