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 React from "react"; |
||||
import useGroups from "../Hooks/lights"; |
|
||||
import {Button, Card, CardFooter, CardHeader, Spinner} from "reactstrap"; |
|
||||
|
import Groups from "./Groups"; |
||||
|
|
||||
function IndexPage() { |
function IndexPage() { |
||||
const groups = useGroups(); |
|
||||
|
|
||||
if (groups === null) { |
|
||||
return ( |
|
||||
<div> |
|
||||
<Spinner color="primary" style={{width: "4rem", height: "4rem"}}/> |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
return ( |
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