You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.9 KiB
101 lines
2.9 KiB
import React, {useState} from "react";
|
|
import {Button, Card, CardBody, CardFooter, CardHeader, ListGroup} from "reactstrap";
|
|
import useLights from "../Hooks/light";
|
|
import Light from "./Light";
|
|
import Loading from "./Loading";
|
|
import {deleteGroup} from "../Helpers/groups";
|
|
import ColorModal from "./Modals/ColorModal";
|
|
import {changeColor} from "../Helpers/lights";
|
|
import GroupPropertiesModal from "./Modals/GroupPropertiesModal";
|
|
import useAuth from "../Hooks/auth";
|
|
|
|
function Group({id, name, permissions}) {
|
|
const {user} = useAuth();
|
|
const lights = useLights({groupId: id});
|
|
|
|
const [colorModal, setColorModal] = useState(false);
|
|
const [propModal, setPropModal] = useState(false);
|
|
|
|
const ready = lights !== null;
|
|
const noLights = ready && lights.length === 0;
|
|
const hasLights = ready && lights.length > 0;
|
|
|
|
if (id === 0 && noLights && user.name !== "Admin") {
|
|
return <></>;
|
|
}
|
|
|
|
function onDelete() {
|
|
if (window.confirm(`Vil du virkelig fjerne "${name}"?`)) {
|
|
deleteGroup(id);
|
|
}
|
|
}
|
|
|
|
let cValue = null;
|
|
let bValue = null;
|
|
let pValue = null;
|
|
if (hasLights) {
|
|
cValue = lights[0].color;
|
|
bValue = lights[0].brightness;
|
|
pValue = lights[0].on;
|
|
}
|
|
|
|
function iCan(name) {
|
|
if (permissions === null) {
|
|
return false;
|
|
}
|
|
|
|
const perm = permissions.find(p => p.userId === user.id);
|
|
|
|
return typeof perm !== "undefined"
|
|
? perm[name]
|
|
: false;
|
|
}
|
|
|
|
return (
|
|
<Card className="mt-3">
|
|
<CardHeader>{name}</CardHeader>
|
|
<CardBody>
|
|
{ready
|
|
? <ListGroup>{lights.map(light => <Light key={light.id} {...light} />)}</ListGroup>
|
|
: <Loading/>}
|
|
</CardBody>
|
|
{(iCan("manage") || iCan("write") || iCan("delete")) && (
|
|
<CardFooter>
|
|
{iCan("manage") && (
|
|
<Button color="primary" onClick={() => setPropModal(true)}>Detaljer</Button>
|
|
)}
|
|
{" "}
|
|
{hasLights && iCan("write") && (
|
|
<Button color="secondary" onClick={() => setColorModal(true)}>Skift farger</Button>
|
|
)}
|
|
{" "}
|
|
{iCan("delete") && (id > 0) && (
|
|
<Button color="danger" onClick={onDelete}>Fjern</Button>
|
|
)}
|
|
</CardFooter>
|
|
)}
|
|
{colorModal && (
|
|
<ColorModal cValue={cValue}
|
|
bValue={bValue}
|
|
pValue={pValue}
|
|
onConfirm={(color, brightness, power) => {
|
|
lights.forEach(light => {
|
|
changeColor(light.id, color, brightness, power);
|
|
setColorModal(false);
|
|
});
|
|
}}
|
|
onCancel={() => setColorModal(false)}
|
|
/>
|
|
)}
|
|
{propModal && (
|
|
<GroupPropertiesModal id={id}
|
|
nValue={name}
|
|
permissions={permissions}
|
|
onClose={() => setPropModal(false)}
|
|
/>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default Group;
|