i18n
This commit is contained in:
@@ -23,16 +23,9 @@ import {
|
||||
Paper,
|
||||
Chip
|
||||
} from '@mui/material';
|
||||
import { useI18n } from './I18nContext';
|
||||
|
||||
const DAYS = [
|
||||
{ key: 'mon', label: 'Mon' },
|
||||
{ key: 'tue', label: 'Tue' },
|
||||
{ key: 'wed', label: 'Wed' },
|
||||
{ key: 'thu', label: 'Thu' },
|
||||
{ key: 'fri', label: 'Fri' },
|
||||
{ key: 'sat', label: 'Sat' },
|
||||
{ key: 'sun', label: 'Sun' }
|
||||
];
|
||||
const DAYS_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
|
||||
const OPERATORS = [
|
||||
{ value: '>', label: '>' },
|
||||
@@ -122,6 +115,7 @@ function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
}
|
||||
|
||||
export default function RuleEditor({ open, rule, onSave, onClose, sensors = [], outputs = [], colorTags: availableColorTags = [], saving }) {
|
||||
const { t } = useI18n();
|
||||
const [name, setName] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState([]); // array of tag ids
|
||||
|
||||
@@ -312,18 +306,18 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
}}
|
||||
>
|
||||
<DialogTitle>
|
||||
{rule ? '✏️ Edit Rule' : '➕ Create New Rule'}
|
||||
{rule ? t('ruleEditor.editTitle') : t('ruleEditor.createTitle')}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, pt: 1 }}>
|
||||
{/* Rule Name */}
|
||||
<TextField
|
||||
label="Rule Name"
|
||||
label={t('ruleEditor.ruleName')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
fullWidth
|
||||
placeholder="e.g., Daytime High Humidity Fan"
|
||||
placeholder={t('ruleEditor.ruleNamePlaceholder')}
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
@@ -379,7 +373,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
{/* TRIGGERS SECTION */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" color="text.secondary" gutterBottom>
|
||||
TRIGGERS (When to activate)
|
||||
{t('ruleEditor.triggersSection')}
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
@@ -393,13 +387,13 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={<Typography fontWeight={600}>🕐 Scheduled Time (trigger at exact time)</Typography>}
|
||||
label={<Typography fontWeight={600}>{t('ruleEditor.scheduledTime')}</Typography>}
|
||||
/>
|
||||
|
||||
{useScheduledTime && (
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Trigger At"
|
||||
label={t('ruleEditor.triggerAt')}
|
||||
type="time"
|
||||
value={scheduledTime}
|
||||
onChange={(e) => setScheduledTime(e.target.value)}
|
||||
@@ -410,7 +404,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
/>
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Days
|
||||
{t('ruleEditor.days')}
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={scheduledDays}
|
||||
@@ -418,10 +412,10 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
{DAYS.map(day => (
|
||||
{DAYS_KEYS.map(key => (
|
||||
<ToggleButton
|
||||
key={day.key}
|
||||
value={day.key}
|
||||
key={key}
|
||||
value={key}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
bgcolor: '#d3869b',
|
||||
@@ -430,7 +424,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
}
|
||||
}}
|
||||
>
|
||||
{day.label}
|
||||
{t(`days.${key}`)}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
@@ -477,7 +471,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Days
|
||||
{t('ruleEditor.days')}
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={timeRangeDays}
|
||||
@@ -485,10 +479,10 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
{DAYS.map(day => (
|
||||
{DAYS_KEYS.map(key => (
|
||||
<ToggleButton
|
||||
key={day.key}
|
||||
value={day.key}
|
||||
key={key}
|
||||
value={key}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
bgcolor: '#8ec07c',
|
||||
@@ -497,7 +491,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
}
|
||||
}}
|
||||
>
|
||||
{day.label}
|
||||
{t(`days.${key}`)}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
@@ -709,7 +703,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
|
||||
<DialogActions sx={{ px: 3, py: 2 }}>
|
||||
<Button onClick={onClose} color="inherit" disabled={saving}>
|
||||
Cancel
|
||||
{t('ruleEditor.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
@@ -725,10 +719,10 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
{saving ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CircularProgress size={16} color="inherit" />
|
||||
Saving...
|
||||
{t('ruleEditor.saving')}
|
||||
</Box>
|
||||
) : (
|
||||
rule ? 'Save Changes' : 'Create Rule'
|
||||
rule ? t('ruleEditor.saveChanges') : t('ruleEditor.createRule')
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
Reference in New Issue
Block a user