You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
64 lines
1.9 KiB
import React, {useState} from "react";
|
|
import {Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
|
|
import useGroups from "../../Hooks/group";
|
|
import Loading from "../Loading";
|
|
import {changeLight} from "../../Helpers/lights";
|
|
|
|
function LightPropertiesModal({id, gValue, nValue, onClose}) {
|
|
const [groupId, setGroupId] = useState(gValue);
|
|
const [name, setName] = useState(nValue);
|
|
const groups = useGroups();
|
|
if (groups === null) {
|
|
return <Modal isOpen={true}><Loading/></Modal>;
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={true}>
|
|
<ModalHeader>Lysegenskaper</ModalHeader>
|
|
<ModalBody style={{margin: "0 auto"}}>
|
|
<Form>
|
|
<FormGroup row>
|
|
<Label sm={3} for="text-name">
|
|
Navn:
|
|
</Label>
|
|
<Col sm={9}>
|
|
<Input type="text"
|
|
id="text-name"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
</Form>
|
|
<Form>
|
|
<FormGroup row>
|
|
<Label sm={3} for="sel-group">
|
|
Gruppe:
|
|
</Label>
|
|
<Col sm={9}>
|
|
<Input type="select"
|
|
value={groupId}
|
|
onChange={e => setGroupId(parseInt(e.target.value, 10))}>
|
|
{groups.map(g => <option value={g.id}>{g.name}</option>)}
|
|
</Input>
|
|
</Col>
|
|
</FormGroup>
|
|
</Form>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button color="primary"
|
|
onClick={() => {
|
|
changeLight(id, name, groupId);
|
|
onClose();
|
|
}}
|
|
>
|
|
Lagre
|
|
</Button>
|
|
{" "}
|
|
<Button color="secondary" onClick={onClose}>Avbryt</Button>
|
|
</ModalFooter>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default LightPropertiesModal;
|