adding control emails to control component settings form
This commit is contained in:
Carter
parent
7dd7504415
commit
c4999a0ba5
4 changed files with 275 additions and 38 deletions
|
|
@ -8,6 +8,7 @@ import {
|
|||
DialogContentText,
|
||||
DialogTitle,
|
||||
Divider,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Grid2 as Grid,
|
||||
IconButton,
|
||||
|
|
@ -41,8 +42,10 @@ import {
|
|||
GetComponentTypeOptions,
|
||||
getFriendlyName,
|
||||
getMeasurements,
|
||||
isController
|
||||
isController,
|
||||
} from "pbHelpers/ComponentType";
|
||||
import PeriodSelect from "common/time/PeriodSelect";
|
||||
import { bestUnit, milliToX } from "common/time/duration";
|
||||
import {
|
||||
ComponentAvailabilityMap,
|
||||
DeviceAvailabilityMap,
|
||||
|
|
@ -177,6 +180,7 @@ export default function ComponentSettings(props: Props) {
|
|||
const [formValid, setFormValid] = useState(false);
|
||||
const [excludedNodes, setExcludedNodes] = useState<number[]>([]);
|
||||
const [nodeToExclude, setNodeToExclude] = useState(0);
|
||||
const [controlEmail, setControlEmail] = useState("");
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
|
||||
setTabVal(newValue);
|
||||
|
|
@ -498,6 +502,7 @@ export default function ComponentSettings(props: Props) {
|
|||
component={formComponent}
|
||||
device={device}
|
||||
canEdit={canEdit}
|
||||
hideControllerFields={isController(formComponent.settings.type)}
|
||||
componentChanged={(formComp, isValid) => {
|
||||
formComponent.settings = formComp.settings;
|
||||
setFormValid(isValid);
|
||||
|
|
@ -867,6 +872,145 @@ export default function ComponentSettings(props: Props) {
|
|||
);
|
||||
};
|
||||
|
||||
const addControlEmail = () => {
|
||||
const trimmed = controlEmail.trim().toLowerCase();
|
||||
if (trimmed === "" || formComponent.settings.controlEmails.includes(trimmed)) return;
|
||||
let f = cloneDeep(formComponent);
|
||||
f.settings.controlEmails.push(trimmed);
|
||||
setFormComponent(f);
|
||||
setControlEmail("");
|
||||
};
|
||||
|
||||
const removeControlEmail = (index: number) => {
|
||||
let f = cloneDeep(formComponent);
|
||||
f.settings.controlEmails.splice(index, 1);
|
||||
setFormComponent(f);
|
||||
};
|
||||
|
||||
const handleOutputModeChanged = (event: any) => {
|
||||
let f = cloneDeep(formComponent);
|
||||
f.settings.defaultOutputState = event.target.value;
|
||||
setFormComponent(f);
|
||||
};
|
||||
|
||||
const handleMinCycleTimeChanged = (ms: number) => {
|
||||
let f = cloneDeep(formComponent);
|
||||
f.settings.minCycleTimeMs = Number(ms);
|
||||
setFormComponent(f);
|
||||
};
|
||||
|
||||
const isMinCycleTimeValid = () => {
|
||||
const ext = extension(formComponent.settings.type, formComponent.settings.subtype);
|
||||
if (!ext.isController) return true;
|
||||
let min = Math.max(0, ext.minCycleTimeMs ? ext.minCycleTimeMs : 0);
|
||||
return formComponent.settings.minCycleTimeMs >= min;
|
||||
};
|
||||
|
||||
const minCycleTimeDescription = () => {
|
||||
const ext = extension(formComponent.settings.type, formComponent.settings.subtype);
|
||||
if (!ext.isController) return "";
|
||||
const min = Math.max(0, ext.minCycleTimeMs ? ext.minCycleTimeMs : 0);
|
||||
const unit = bestUnit(min);
|
||||
const value = milliToX(min, unit).toString();
|
||||
return "Must be at least " + value + " " + unit;
|
||||
};
|
||||
|
||||
const controlContent = () => {
|
||||
return (
|
||||
<DialogContent>
|
||||
<TextField
|
||||
id="output-mode"
|
||||
name="outputMode"
|
||||
select
|
||||
label="Output Mode"
|
||||
value={formComponent.settings.defaultOutputState}
|
||||
onChange={handleOutputModeChanged}
|
||||
margin="normal"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
disabled={!canEdit}>
|
||||
<MenuItem value={0}>Auto</MenuItem>
|
||||
<MenuItem value={1}>On</MenuItem>
|
||||
<MenuItem value={2}>Off</MenuItem>
|
||||
</TextField>
|
||||
<FormControl fullWidth>
|
||||
<PeriodSelect
|
||||
id="minCycleTimeMs"
|
||||
label="Minimum cycle time"
|
||||
units={["seconds", "minutes"]}
|
||||
isDisabled={!canEdit}
|
||||
isError={!isMinCycleTimeValid()}
|
||||
initialMs={
|
||||
formComponent.settings.minCycleTimeMs
|
||||
? formComponent.settings.minCycleTimeMs
|
||||
: undefined
|
||||
}
|
||||
onChange={handleMinCycleTimeChanged}
|
||||
helperText={
|
||||
isMinCycleTimeValid()
|
||||
? "The minimum amount of time that the component spends in a state"
|
||||
: minCycleTimeDescription()
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography variant="subtitle2" style={{ marginTop: 16, marginBottom: 8 }}>
|
||||
Authorized Control Emails
|
||||
</Typography>
|
||||
<Grid container spacing={1} alignItems="center">
|
||||
<Grid size={{ xs: 9 }}>
|
||||
<TextField
|
||||
label="Email address"
|
||||
type="email"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="small"
|
||||
value={controlEmail}
|
||||
onChange={e => setControlEmail(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addControlEmail();
|
||||
}
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 3 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={addControlEmail}
|
||||
disabled={!canEdit || controlEmail.trim() === ""}>
|
||||
Add
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{formComponent.settings.controlEmails.map((email, i) => (
|
||||
<Grid
|
||||
container
|
||||
key={i}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
style={{ marginTop: 4 }}>
|
||||
<Grid>
|
||||
<Typography variant="body2">{email}</Typography>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => removeControlEmail(i)}
|
||||
disabled={!canEdit}
|
||||
className={classNames(classes.redButton)}>
|
||||
<RemoveIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
))}
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const actions = () => {
|
||||
return (
|
||||
<DialogActions>
|
||||
|
|
@ -1042,36 +1186,55 @@ export default function ComponentSettings(props: Props) {
|
|||
scroll="paper">
|
||||
{title()}
|
||||
<Divider />
|
||||
{!isController(formComponent.settings.type) && (
|
||||
<Tabs
|
||||
value={tabVal}
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
onChange={handleChange}>
|
||||
<Tab label="General" />
|
||||
<Tab label="Overlays" />
|
||||
<Tab label="Nodes" disabled={!prevComponent} />
|
||||
</Tabs>
|
||||
{isController(formComponent.settings.type) ? (
|
||||
<React.Fragment>
|
||||
<Tabs
|
||||
value={tabVal}
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
onChange={handleChange}>
|
||||
<Tab label="General" />
|
||||
<Tab label="Control" />
|
||||
</Tabs>
|
||||
<TabPanelMine value={tabVal} index={0}>
|
||||
{content()}
|
||||
</TabPanelMine>
|
||||
<TabPanelMine value={tabVal} index={1}>
|
||||
{controlContent()}
|
||||
</TabPanelMine>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Tabs
|
||||
value={tabVal}
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
onChange={handleChange}>
|
||||
<Tab label="General" />
|
||||
<Tab label="Overlays" />
|
||||
<Tab label="Nodes" disabled={!prevComponent} />
|
||||
</Tabs>
|
||||
<TabPanelMine value={tabVal} index={0}>
|
||||
{content()}
|
||||
</TabPanelMine>
|
||||
<TabPanelMine value={tabVal} index={1}>
|
||||
<DialogContent>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
alignContent="center"
|
||||
spacing={1}>
|
||||
{overlayGroup()}
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
</TabPanelMine>
|
||||
<TabPanelMine value={tabVal} index={2}>
|
||||
{componentPrefs()}
|
||||
</TabPanelMine>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<TabPanelMine value={tabVal} index={0}>
|
||||
{content()}
|
||||
</TabPanelMine>
|
||||
<TabPanelMine value={tabVal} index={1}>
|
||||
<DialogContent>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
alignContent="center"
|
||||
spacing={1}>
|
||||
{overlayGroup()}
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
</TabPanelMine>
|
||||
<TabPanelMine value={tabVal} index={2}>
|
||||
{componentPrefs()}
|
||||
</TabPanelMine>
|
||||
{actions()}
|
||||
</ResponsiveDialog>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue