Stian Aune
5 years ago
7 changed files with 118 additions and 15 deletions
-
6webui/src/Components/Group.jsx
-
70webui/src/Components/LGroup.jsx
-
21webui/src/Components/LGroups.jsx
-
17webui/src/Components/Misc/BrightnessSlider.jsx
-
12webui/src/Components/Misc/ColorPicker.jsx
-
3webui/src/Components/Pages/IndexPage.jsx
-
4webui/src/Helpers/random.js
@ -0,0 +1,70 @@ |
|||||
|
import React, {useEffect, useState} from "react"; |
||||
|
import useLights from "../Hooks/light"; |
||||
|
import {Card, CardBody, CardHeader, Col, CustomInput, FormGroup} from "reactstrap"; |
||||
|
import ColorPicker from "./Misc/ColorPicker"; |
||||
|
import {changeColor} from "../Helpers/lights"; |
||||
|
import BrightnessSlider from "./Misc/BrightnessSlider"; |
||||
|
|
||||
|
function LGroup({id, name}) { |
||||
|
const lights = useLights({groupId: id}); |
||||
|
|
||||
|
const light = lights !== null && lights.length > 0 ? lights[0] : null; |
||||
|
const [color, setColor] = useState(null); |
||||
|
const [brightness, setBrightness] = useState(null); |
||||
|
const [power, setPower] = useState(null); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (light !== null) { |
||||
|
setColor(light.color); |
||||
|
setBrightness(light.brightness); |
||||
|
setPower(light.on); |
||||
|
} |
||||
|
}, [light]); |
||||
|
|
||||
|
if (light === null || color === null || brightness === null || power === null) { |
||||
|
return <></>; |
||||
|
} |
||||
|
|
||||
|
function recolor(newColor) { |
||||
|
setColor(newColor); |
||||
|
lights.forEach(l => changeColor(l.id, newColor, null, null)); |
||||
|
} |
||||
|
|
||||
|
function rebrightness(newBrightness) { |
||||
|
setBrightness(newBrightness); |
||||
|
lights.forEach(l => changeColor(l.id, null, newBrightness, null)); |
||||
|
} |
||||
|
|
||||
|
function repower(newPower) { |
||||
|
setPower(newPower); |
||||
|
lights.forEach(l => changeColor(l.id, null, null, newPower)); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Col lg={4} md={6} sm={12}> |
||||
|
<Card className="mt-3"> |
||||
|
<CardHeader> |
||||
|
{name} |
||||
|
</CardHeader> |
||||
|
<CardBody> |
||||
|
<FormGroup> |
||||
|
{power && <ColorPicker color={color} onChange={recolor}/>} |
||||
|
</FormGroup> |
||||
|
<FormGroup> |
||||
|
{power && <BrightnessSlider brightness={brightness} onChange={rebrightness}/>} |
||||
|
</FormGroup> |
||||
|
<FormGroup className="on-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id={`switch-power-${id}`} |
||||
|
name="power" |
||||
|
label={power ? "På" : "Av"} |
||||
|
checked={power} |
||||
|
onChange={e => repower(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
</CardBody> |
||||
|
</Card> |
||||
|
</Col> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default LGroup; |
@ -0,0 +1,21 @@ |
|||||
|
import React from "react"; |
||||
|
import useGroups from "../Hooks/group"; |
||||
|
import Loading from "./Groups"; |
||||
|
import LGroup from "./LGroup"; |
||||
|
import {Row} from "reactstrap"; |
||||
|
|
||||
|
function LGroups() { |
||||
|
const groups = useGroups(); |
||||
|
|
||||
|
if (groups === null) { |
||||
|
return <Loading/>; |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Row> |
||||
|
{groups.map(group => <LGroup key={group.id} {...group} />)} |
||||
|
</Row> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default LGroups; |
@ -1,8 +1,9 @@ |
|||||
import React from "react"; |
import React from "react"; |
||||
|
import LGroups from "../LGroups"; |
||||
|
|
||||
function IndexPage() { |
function IndexPage() { |
||||
return ( |
return ( |
||||
<div/> |
|
||||
|
<LGroups/> |
||||
); |
); |
||||
} |
} |
||||
|
|
||||
|
@ -1,11 +1,11 @@ |
|||||
const POSSIBLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; |
const POSSIBLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; |
||||
const POSSIBLE_LENGHTH = POSSIBLE.length; |
|
||||
|
const POSSIBLE_LENGTH = POSSIBLE.length; |
||||
|
|
||||
export function randId() { |
export function randId() { |
||||
let text = ""; |
let text = ""; |
||||
|
|
||||
for (let i = 0; i < 16; i++) { |
for (let i = 0; i < 16; i++) { |
||||
text += POSSIBLE.charAt(Math.floor(Math.random() * POSSIBLE_LENGHTH)); |
|
||||
|
text += POSSIBLE.charAt(Math.floor(Math.random() * POSSIBLE_LENGTH)); |
||||
} |
} |
||||
|
|
||||
return text; |
return text; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue