Stian Aune
5 years ago
8 changed files with 160 additions and 26 deletions
-
22webui/src/Components/Group.jsx
-
24webui/src/Components/Groups.jsx
-
8webui/src/Components/Header.jsx
-
24webui/src/Components/IndexPage.jsx
-
4webui/src/Helpers/groups.js
-
78webui/src/Helpers/lights.js
-
2webui/src/Hooks/group.js
-
24webui/src/Hooks/light.js
@ -0,0 +1,22 @@ |
|||
import React from "react"; |
|||
import {Button, Card, CardFooter, CardHeader} from "reactstrap"; |
|||
import useLights from "../Hooks/light"; |
|||
|
|||
function Group({id, name, permissions}) { |
|||
const lights = useLights({groupId: id}); |
|||
|
|||
return ( |
|||
<Card className="mt-3"> |
|||
<CardHeader>{name}</CardHeader> |
|||
<CardFooter> |
|||
<Button color="primary">Detaljer</Button> |
|||
{" "} |
|||
<Button color="secondary">Skift farger</Button> |
|||
{" "} |
|||
<Button color="danger">Fjern</Button> |
|||
</CardFooter> |
|||
</Card> |
|||
); |
|||
} |
|||
|
|||
export default Group; |
@ -0,0 +1,24 @@ |
|||
import React from "react"; |
|||
import {Spinner} from "reactstrap"; |
|||
import useGroups from "../Hooks/group"; |
|||
import Group from "./Group"; |
|||
|
|||
function Groups() { |
|||
const groups = useGroups(); |
|||
|
|||
if (groups === null) { |
|||
return ( |
|||
<div> |
|||
<Spinner color="primary" style={{width: "4rem", height: "4rem"}}/> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<div> |
|||
{groups.map(group => <Group {...group} />)} |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default Groups; |
@ -1,29 +1,9 @@ |
|||
import React from "react"; |
|||
import useGroups from "../Hooks/lights"; |
|||
import {Button, Card, CardFooter, CardHeader, Spinner} from "reactstrap"; |
|||
import Groups from "./Groups"; |
|||
|
|||
function IndexPage() { |
|||
const groups = useGroups(); |
|||
|
|||
if (groups === null) { |
|||
return ( |
|||
<div> |
|||
<Spinner color="primary" style={{width: "4rem", height: "4rem"}}/> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<div> |
|||
{groups.map(group => ( |
|||
<Card className="mt-3"> |
|||
<CardHeader>{group.name}</CardHeader> |
|||
<CardFooter> |
|||
<Button color="secondary">Endre</Button> |
|||
</CardFooter> |
|||
</Card> |
|||
))} |
|||
</div> |
|||
<Groups/> |
|||
); |
|||
} |
|||
|
|||
|
@ -0,0 +1,78 @@ |
|||
import {randId} from "./random"; |
|||
import {notNullish, nullish} from "./null"; |
|||
import {fetchGet} from "./fetcher"; |
|||
|
|||
const localData = {}; |
|||
const callbacks = []; |
|||
|
|||
export function subscribeToLight(lightId, callback) { |
|||
const callbackId = randId(); |
|||
|
|||
callbacks.push({callbackId, lightId, callback}); |
|||
|
|||
if (lightId >= 0) { |
|||
if (notNullish(localData[lightId])) { |
|||
dispatch(localData[lightId]); |
|||
} |
|||
|
|||
fetchOne(lightId); |
|||
} else { |
|||
const list = []; |
|||
for (let key in localData) { |
|||
if (localData.hasOwnProperty(key) && notNullish(localData[key])) { |
|||
list.push(localData[key]); |
|||
} |
|||
} |
|||
dispatch(list); |
|||
|
|||
fetchAll(); |
|||
} |
|||
} |
|||
|
|||
function fetchAll() { |
|||
fetchGet(`/light/`).then(({data, error}) => { |
|||
if (error === null) { |
|||
handleLights(data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function fetchOne(id) { |
|||
fetchGet(`/light/${id}`).then(({data, error}) => { |
|||
if (error === null) { |
|||
handleLight(data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function handleLights(lights) { |
|||
lights.forEach(l => handleLight(l)); |
|||
|
|||
for (let key in localData) { |
|||
if (localData.hasOwnProperty(key) && nullish(lights.find(l => l.id === key))) { |
|||
delete localData[key]; |
|||
} |
|||
} |
|||
|
|||
dispatch(lights); |
|||
} |
|||
|
|||
function handleLight(light) { |
|||
localData[light.id] = light; |
|||
|
|||
dispatch(light); |
|||
} |
|||
|
|||
function dispatch(data) { |
|||
if (Array.isArray(data)) { |
|||
callbacks |
|||
.filter(c => c !== null) |
|||
.filter(c => c.lightId === -1) |
|||
.forEach(c => c.callback(data)); |
|||
} else { |
|||
callbacks |
|||
.filter(c => c !== null) |
|||
.filter(c => c.lightId === data.id) |
|||
.forEach(c => c.callback(data)); |
|||
} |
|||
} |
@ -0,0 +1,24 @@ |
|||
import {useEffect, useState} from "react"; |
|||
import {subscribeToLight} from "../Helpers/lights"; |
|||
|
|||
export default function useLights({groupId = -1, id = -1}) { |
|||
const [light, setLight] = useState(null); |
|||
|
|||
function onChange() { |
|||
setLight(light); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
const cbId = subscribeToLight(id, onChange); |
|||
|
|||
return () => { |
|||
subscribeToLight(cbId); |
|||
}; |
|||
}, []); |
|||
|
|||
if (groupId >= 0 && light !== null) { |
|||
return light.filter(l => l.groupId === groupId); |
|||
} |
|||
|
|||
return light; |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue