Stian Aune
5 years ago
5 changed files with 119 additions and 27 deletions
-
41webui/src/Components/Group.jsx
-
13webui/src/Components/Light.jsx
-
61webui/src/Components/Modals/LightPropertiesModal.jsx
-
12webui/src/Helpers/groups.js
-
19webui/src/Helpers/lights.js
@ -0,0 +1,61 @@ |
|||||
|
import React, {useState} from "react"; |
||||
|
import {Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap"; |
||||
|
import {addGroup} from "../../Helpers/groups"; |
||||
|
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> |
||||
|
<Label for="text-name"> |
||||
|
Navn |
||||
|
</Label> |
||||
|
<Input type="text" |
||||
|
id="text-name" |
||||
|
value={name} |
||||
|
onChange={e => setName(e.target.value)} |
||||
|
/> |
||||
|
</FormGroup> |
||||
|
</Form> |
||||
|
<Form> |
||||
|
<FormGroup> |
||||
|
<Label for="sel-group"> |
||||
|
Navn |
||||
|
</Label> |
||||
|
<Input type="select" |
||||
|
value={groupId} |
||||
|
onChange={e => setGroupId(parseInt(e.target.value, 10))}> |
||||
|
{groups.map(g => <option value={g.id}>{g.name}</option>)} |
||||
|
</Input> |
||||
|
</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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue