mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-06 14:11:35 +02:00
396 lines
16 KiB
TypeScript
396 lines
16 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { Gauge, Loader2, Save, Search, X } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { api } from '../api/client';
|
|
import type { HADisplayEntity, Printer, PrinterHASensor } from '../api/client';
|
|
import { Button } from './Button';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
import { HA_SENSOR_BINARY_LABELS } from '../utils/haSensorDisplay';
|
|
|
|
/**
|
|
* Bind a Home Assistant entity to a printer, or edit an existing binding
|
|
* (#1148, #448).
|
|
*
|
|
* The entity picker is the load-bearing part: kind, device_class and unit all
|
|
* come from the entity rather than from the user, because getting any of them
|
|
* wrong is a validation error from the backend that nobody could act on.
|
|
*/
|
|
|
|
interface Props {
|
|
sensor?: PrinterHASensor | null;
|
|
printers: Printer[];
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function HASensorModal({ sensor, printers, onClose }: Props) {
|
|
const { t } = useTranslation();
|
|
const queryClient = useQueryClient();
|
|
const { showToast } = useToast();
|
|
const isEditing = !!sensor;
|
|
|
|
const [printerId, setPrinterId] = useState<number | ''>(sensor?.printer_id ?? printers[0]?.id ?? '');
|
|
const [entityId, setEntityId] = useState(sensor?.entity_id ?? '');
|
|
const [kind, setKind] = useState<'binary' | 'numeric'>(sensor?.kind ?? 'binary');
|
|
const [deviceClass, setDeviceClass] = useState<string | null>(sensor?.device_class ?? null);
|
|
const [unit, setUnit] = useState<string | null>(sensor?.unit ?? null);
|
|
const [name, setName] = useState(sensor?.name ?? '');
|
|
const [alertState, setAlertState] = useState<'on' | 'off' | ''>(sensor?.alert_state ?? '');
|
|
const [alertAbove, setAlertAbove] = useState(sensor?.alert_above?.toString() ?? '');
|
|
const [alertBelow, setAlertBelow] = useState(sensor?.alert_below?.toString() ?? '');
|
|
const [showOnCard, setShowOnCard] = useState(sensor?.show_on_printer_card ?? true);
|
|
const [notifyOnAlert, setNotifyOnAlert] = useState(sensor?.notify_on_alert ?? false);
|
|
const [blockPrint, setBlockPrint] = useState(sensor?.block_print ?? false);
|
|
const [search, setSearch] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [onClose]);
|
|
|
|
// Same gate and the same wording as AddSmartPlugModal: without a configured
|
|
// Home Assistant the picker can only return an error, so say why up front
|
|
// instead of showing an empty list.
|
|
const { data: settings } = useQuery({
|
|
queryKey: ['settings'],
|
|
queryFn: api.getSettings,
|
|
});
|
|
const haConfigured = !!(settings?.ha_enabled && settings?.ha_url && settings?.ha_token);
|
|
|
|
const { data: entities, isLoading: entitiesLoading, error: entitiesError } = useQuery({
|
|
queryKey: ['bindableHAEntities'],
|
|
queryFn: () => api.getBindableHAEntities(),
|
|
enabled: haConfigured,
|
|
});
|
|
|
|
const filtered = useMemo(() => {
|
|
const needle = search.trim().toLowerCase();
|
|
const all = entities ?? [];
|
|
if (!needle) return all;
|
|
return all.filter(
|
|
(e) => e.entity_id.toLowerCase().includes(needle) || e.friendly_name.toLowerCase().includes(needle)
|
|
);
|
|
}, [entities, search]);
|
|
|
|
const selectEntity = (entity: HADisplayEntity) => {
|
|
setEntityId(entity.entity_id);
|
|
setDeviceClass(entity.device_class);
|
|
setUnit(entity.unit_of_measurement);
|
|
const nextKind = entity.domain === 'binary_sensor' ? 'binary' : 'numeric';
|
|
setKind(nextKind);
|
|
// Switching kind strands the other kind's alert fields, and the backend
|
|
// rejects a numeric sensor that still carries an alert_state.
|
|
if (nextKind === 'numeric') setAlertState('');
|
|
else {
|
|
setAlertAbove('');
|
|
setAlertBelow('');
|
|
}
|
|
// Sliced to the column width: Home Assistant friendly names have no length
|
|
// limit, and a long one would come back as a Pydantic error on a field the
|
|
// user did not type into.
|
|
if (!name.trim()) setName(entity.friendly_name.slice(0, 100));
|
|
};
|
|
|
|
const invalidate = () => {
|
|
queryClient.invalidateQueries({ queryKey: ['haSensors'] });
|
|
queryClient.invalidateQueries({ queryKey: ['haSensorReadings'] });
|
|
};
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: () => {
|
|
const payload = {
|
|
name: name.trim(),
|
|
entity_id: entityId,
|
|
kind,
|
|
device_class: deviceClass,
|
|
unit,
|
|
alert_state: kind === 'binary' && alertState ? alertState : null,
|
|
alert_above: kind === 'numeric' && alertAbove !== '' ? Number(alertAbove) : null,
|
|
alert_below: kind === 'numeric' && alertBelow !== '' ? Number(alertBelow) : null,
|
|
block_print: blockPrint,
|
|
notify_on_alert: notifyOnAlert,
|
|
show_on_printer_card: showOnCard,
|
|
};
|
|
return isEditing
|
|
? api.updateHASensor(sensor.id, payload)
|
|
: api.createHASensor({ ...payload, printer_id: Number(printerId) });
|
|
},
|
|
onSuccess: () => {
|
|
invalidate();
|
|
showToast(isEditing ? t('haSensors.toast.updated') : t('haSensors.toast.created'), 'success');
|
|
onClose();
|
|
},
|
|
onError: (err: Error) => setError(err.message),
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: () => api.deleteHASensor(sensor!.id),
|
|
onSuccess: () => {
|
|
invalidate();
|
|
showToast(t('haSensors.toast.deleted'), 'success');
|
|
onClose();
|
|
},
|
|
onError: (err: Error) => setError(err.message),
|
|
});
|
|
|
|
const hasAlertCondition =
|
|
kind === 'binary' ? alertState !== '' : alertAbove !== '' || alertBelow !== '';
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
if (!entityId) return setError(t('haSensors.error.pickEntity'));
|
|
if (!name.trim()) return setError(t('haSensors.error.nameRequired'));
|
|
if (printerId === '') return setError(t('haSensors.error.printerRequired'));
|
|
// Mirrors the backend rule, so the user is told before the round trip
|
|
// rather than by a 422.
|
|
if ((blockPrint || notifyOnAlert) && !hasAlertCondition) {
|
|
return setError(t('haSensors.error.alertRequired'));
|
|
}
|
|
saveMutation.mutate();
|
|
};
|
|
|
|
const alertLabels = HA_SENSOR_BINARY_LABELS[deviceClass ?? ''];
|
|
const stateLabel = (which: 'on' | 'off') => {
|
|
const key = alertLabels?.[which] ?? which;
|
|
return t(`haSensors.states.${key}`, { defaultValue: key });
|
|
};
|
|
|
|
const isPending = saveMutation.isPending || deleteMutation.isPending;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4" onClick={onClose}>
|
|
<div
|
|
className="bg-bambu-dark-secondary rounded-xl border border-bambu-dark-tertiary w-full max-w-lg max-h-[90vh] overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-bambu-dark-tertiary">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-full bg-bambu-green/20 text-bambu-green">
|
|
<Gauge className="w-5 h-5" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-white">
|
|
{isEditing ? t('haSensors.editTitle') : t('haSensors.addTitle')}
|
|
</h2>
|
|
</div>
|
|
<button onClick={onClose} className="text-bambu-gray hover:text-white transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{error && (
|
|
<div className="p-3 bg-red-100 dark:bg-red-500/20 border border-red-300 dark:border-red-500/50 rounded-lg text-sm text-red-700 dark:text-red-400">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!isEditing && (
|
|
<div>
|
|
<label className="block text-sm text-bambu-gray mb-1">{t('haSensors.printer')}</label>
|
|
<select
|
|
value={printerId}
|
|
onChange={(e) => setPrinterId(e.target.value === '' ? '' : Number(e.target.value))}
|
|
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white"
|
|
>
|
|
{printers.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{!haConfigured && (
|
|
<div className="p-3 bg-yellow-100 dark:bg-yellow-500/20 border border-yellow-400 dark:border-yellow-500/50 rounded-lg text-sm text-yellow-700 dark:text-yellow-400">
|
|
{t('smartPlugs.haNotConfigured')}{' '}
|
|
<span className="font-medium">{t('smartPlugs.haSettingsPath')}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className={`block text-sm text-bambu-gray mb-1 ${haConfigured ? '' : 'opacity-50'}`}>
|
|
{t('haSensors.entity')}
|
|
</label>
|
|
{entitiesError && (
|
|
<div className="p-3 mb-2 bg-red-100 dark:bg-red-500/20 rounded-lg text-sm text-red-700 dark:text-red-400">
|
|
{(entitiesError as Error).message}
|
|
</div>
|
|
)}
|
|
<div className="relative mb-2">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray" />
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder={t('haSensors.searchPlaceholder')}
|
|
disabled={!haConfigured}
|
|
className="w-full pl-9 pr-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`max-h-44 overflow-y-auto rounded-lg border border-bambu-dark-tertiary ${
|
|
haConfigured ? '' : 'opacity-50'
|
|
}`}
|
|
>
|
|
{!haConfigured && (
|
|
<div className="p-3 text-sm text-bambu-gray">{t('haSensors.noEntities')}</div>
|
|
)}
|
|
{haConfigured && entitiesLoading && (
|
|
<div className="flex items-center gap-2 p-3 text-sm text-bambu-gray">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
{t('common.loading')}
|
|
</div>
|
|
)}
|
|
{haConfigured && !entitiesLoading && filtered.length === 0 && (
|
|
<div className="p-3 text-sm text-bambu-gray">{t('haSensors.noEntities')}</div>
|
|
)}
|
|
{haConfigured &&
|
|
!entitiesLoading &&
|
|
filtered.map((entity) => (
|
|
<button
|
|
key={entity.entity_id}
|
|
type="button"
|
|
onClick={() => selectEntity(entity)}
|
|
className={`w-full text-left px-3 py-2 text-sm transition-colors ${
|
|
entity.entity_id === entityId
|
|
? 'bg-bambu-green/20 text-bambu-green'
|
|
: 'text-white hover:bg-bambu-dark'
|
|
}`}
|
|
>
|
|
<div className="font-medium">{entity.friendly_name}</div>
|
|
<div className="text-xs text-bambu-gray">
|
|
{entity.entity_id}
|
|
{entity.state !== null && ` — ${entity.state}`}
|
|
{entity.unit_of_measurement ? ` ${entity.unit_of_measurement}` : ''}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm text-bambu-gray mb-1">{t('haSensors.name')}</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm text-bambu-gray mb-1">{t('haSensors.alertWhen')}</label>
|
|
{kind === 'binary' ? (
|
|
<select
|
|
value={alertState}
|
|
onChange={(e) => setAlertState(e.target.value as 'on' | 'off' | '')}
|
|
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white"
|
|
>
|
|
<option value="">{t('haSensors.alertNever')}</option>
|
|
<option value="on">{stateLabel('on')}</option>
|
|
<option value="off">{stateLabel('off')}</option>
|
|
</select>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<span className="block text-xs text-bambu-gray mb-1">
|
|
{t('haSensors.alertAbove')} {unit ?? ''}
|
|
</span>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
value={alertAbove}
|
|
onChange={(e) => setAlertAbove(e.target.value)}
|
|
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<span className="block text-xs text-bambu-gray mb-1">
|
|
{t('haSensors.alertBelow')} {unit ?? ''}
|
|
</span>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
value={alertBelow}
|
|
onChange={(e) => setAlertBelow(e.target.value)}
|
|
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<p className="mt-1 text-xs text-bambu-gray">{t('haSensors.alertHint')}</p>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={showOnCard}
|
|
onChange={(e) => setShowOnCard(e.target.checked)}
|
|
className="w-4 h-4"
|
|
/>
|
|
<span className="text-sm text-white">{t('haSensors.showOnCard')}</span>
|
|
</label>
|
|
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifyOnAlert}
|
|
onChange={(e) => setNotifyOnAlert(e.target.checked)}
|
|
disabled={!hasAlertCondition}
|
|
className="w-4 h-4"
|
|
/>
|
|
<span className={`text-sm ${hasAlertCondition ? 'text-white' : 'text-bambu-gray'}`}>
|
|
{t('haSensors.notifyOnAlert')}
|
|
</span>
|
|
</label>
|
|
|
|
<label className="flex items-start gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={blockPrint}
|
|
onChange={(e) => setBlockPrint(e.target.checked)}
|
|
disabled={!hasAlertCondition}
|
|
className="w-4 h-4 mt-0.5"
|
|
/>
|
|
<span>
|
|
<span className={`block text-sm ${hasAlertCondition ? 'text-white' : 'text-bambu-gray'}`}>
|
|
{t('haSensors.blockPrint')}
|
|
</span>
|
|
<span className="block text-xs text-bambu-gray">{t('haSensors.blockPrintHint')}</span>
|
|
</span>
|
|
</label>
|
|
|
|
<div className="flex items-center justify-between pt-2">
|
|
{isEditing ? (
|
|
<Button type="button" variant="danger" onClick={() => deleteMutation.mutate()} disabled={isPending}>
|
|
{t('common.delete')}
|
|
</Button>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<Button type="button" variant="secondary" onClick={onClose} disabled={isPending}>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
{/* An unconfigured Home Assistant leaves nothing to bind to.
|
|
Editing an existing sensor still saves — its alert rule and
|
|
card visibility are Bambuddy's own settings and do not need
|
|
Home Assistant to be reachable to change. */}
|
|
<Button type="submit" disabled={isPending || (!haConfigured && !isEditing)}>
|
|
{isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
|
{t('common.save')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|