Stian Aune
5 years ago
16 changed files with 225 additions and 52 deletions
-
2webui/package.json
-
4webui/src/App.css
-
2webui/src/App.js
-
2webui/src/Components/Group.jsx
-
39webui/src/Components/Light.jsx
-
34webui/src/Components/Misc/BrightnessSlider.jsx
-
34webui/src/Components/Modals/BrightnessModal.jsx
-
26webui/src/Components/Modals/ColorModal.jsx
-
2webui/src/Components/Pages/GroupPage.jsx
-
3webui/src/Components/Pages/IndexPage.jsx
-
25webui/src/Components/Pages/LightPage.jsx
-
17webui/src/Helpers/fetcher.js
-
6webui/src/Helpers/groups.js
-
78webui/src/Helpers/lights.js
-
1webui/src/Hooks/auth.js
-
2webui/src/Hooks/light.js
@ -0,0 +1,34 @@ |
|||||
|
import React, {useLayoutEffect} from "react"; |
||||
|
import {randId} from "../../Helpers/random"; |
||||
|
import iro from "@jaames/iro"; |
||||
|
|
||||
|
function BrightnessSlider({brightness, onChange}) { |
||||
|
const random = randId(); |
||||
|
|
||||
|
useLayoutEffect(() => { |
||||
|
console.log(brightness); |
||||
|
const colorPicker = new iro.ColorPicker("#color-picker-" + random, { |
||||
|
color: `rgb(${brightness}, ${brightness}, ${brightness})`, |
||||
|
layout: [ |
||||
|
{ |
||||
|
component: iro.ui.Slider, |
||||
|
options: { |
||||
|
borderColor: '#888' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
colorPicker.on("input:end", color => { |
||||
|
onChange(color.rgb.r); |
||||
|
}) |
||||
|
}, []); |
||||
|
|
||||
|
return ( |
||||
|
<div id={`color-picker-${random}`}> |
||||
|
|
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default BrightnessSlider; |
@ -0,0 +1,34 @@ |
|||||
|
import React, {useState} from "react"; |
||||
|
import {Button, CustomInput, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap"; |
||||
|
import BrightnessSlider from "../Misc/BrightnessSlider"; |
||||
|
|
||||
|
function BrightnessModal({bValue, pValue, onConfirm, onCancel}) { |
||||
|
const [brightness, setBrightness] = useState(bValue); |
||||
|
const [power, setPower] = useState(pValue); |
||||
|
|
||||
|
return ( |
||||
|
<Modal isOpen={true}> |
||||
|
<ModalHeader>Lysstyrke</ModalHeader> |
||||
|
<ModalBody style={{margin: "0 auto"}}> |
||||
|
<FormGroup> |
||||
|
<BrightnessSlider brightness={brightness} onChange={setBrightness}/> |
||||
|
</FormGroup> |
||||
|
<FormGroup> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-power" |
||||
|
name="power" |
||||
|
label={power ? "På" : "Av"} |
||||
|
checked={power} |
||||
|
onChange={e => setPower(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
</ModalBody> |
||||
|
<ModalFooter> |
||||
|
<Button color="primary" onClick={() => onConfirm(brightness, power)}>Lagre</Button> |
||||
|
{" "} |
||||
|
<Button color="secondary" onClick={onCancel}>Avbryt</Button> |
||||
|
</ModalFooter> |
||||
|
</Modal> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default BrightnessModal; |
@ -1,9 +1,8 @@ |
|||||
import React from "react"; |
import React from "react"; |
||||
import Groups from "../Groups"; |
|
||||
|
|
||||
function IndexPage() { |
function IndexPage() { |
||||
return ( |
return ( |
||||
<Groups/> |
|
||||
|
<div/> |
||||
); |
); |
||||
} |
} |
||||
|
|
||||
|
@ -0,0 +1,25 @@ |
|||||
|
import React from "react"; |
||||
|
import useLights from "../../Hooks/light"; |
||||
|
import Light from "../Light"; |
||||
|
import Loading from "../Loading"; |
||||
|
import {Card, CardBody, CardHeader} from "reactstrap"; |
||||
|
|
||||
|
function LightPage() { |
||||
|
const lights = useLights(); |
||||
|
if (lights === null) { |
||||
|
return <Loading/>; |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Card className="mt-3"> |
||||
|
<CardHeader> |
||||
|
Tilgjengelige lys |
||||
|
</CardHeader> |
||||
|
<CardBody> |
||||
|
{lights.map(light => <Light {...light} />)} |
||||
|
</CardBody> |
||||
|
</Card> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default LightPage; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue