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.
97 lines
3.2 KiB
97 lines
3.2 KiB
import React, {useCallback, useContext, useEffect, useMemo} from "react";
|
|
import ProgramContext from "../contexts/ProgramContext";
|
|
import {useNavigate, useParams} from "react-router";
|
|
import LoadingPage from "./LoadingPage";
|
|
import Header, {HeaderButton, HeaderTitle} from "../primitives/header/Header";
|
|
import {Icon} from "../primitives/Shared";
|
|
import {
|
|
faArrowUpRightDots,
|
|
faCheck,
|
|
faChevronLeft,
|
|
faPencilAlt, faStopwatch,
|
|
faTag,
|
|
faTrashCan
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import Page, {PageBody, PageFlexColumn, PageFlexRow} from "../primitives/page/Page";
|
|
import {Size, valuesToString} from "../models/Shared";
|
|
import {TitleLine} from "../primitives/misc/Misc";
|
|
import Blob, {BlobInput, BlobText} from "../primitives/blob/Blob";
|
|
import deviceRepo from "../actions/devices";
|
|
import programRepo from "../actions/programs";
|
|
|
|
export default function ProgramPage() {
|
|
const {programs, refreshPrograms} = useContext(ProgramContext);
|
|
const navigate = useNavigate();
|
|
const {id} = useParams();
|
|
const program = useMemo(() => programs?.find(p => p.id === id), [programs, id]);
|
|
|
|
useEffect(() => {
|
|
if (programs && !program) {
|
|
navigate("/");
|
|
}
|
|
}, [programs, program]);
|
|
|
|
|
|
const onDelete = useCallback(() => {
|
|
if (!program || !window.confirm("Vil du fjerne denne enheten?")) return;
|
|
|
|
programRepo().delete(program).then(() => {
|
|
refreshPrograms();
|
|
navigate("/");
|
|
})
|
|
}, [program, navigate, refreshPrograms]);
|
|
|
|
if (!program) {
|
|
return <LoadingPage text="Henter programmer"/>;
|
|
}
|
|
|
|
return (
|
|
<Page title={program.name}>
|
|
<Header>
|
|
<HeaderButton onClick={() => navigate("/")}>
|
|
<Icon value={faChevronLeft}/>
|
|
</HeaderButton>
|
|
<HeaderTitle>{program.name}</HeaderTitle>
|
|
</Header>
|
|
<PageBody>
|
|
<PageFlexRow collapseOn={Size.Mobile}>
|
|
<PageFlexColumn flex={1}>
|
|
<TitleLine>Programm</TitleLine>
|
|
<Blob>
|
|
<BlobText>
|
|
<Icon value={faTag}/> {program.name}
|
|
</BlobText>
|
|
</Blob>
|
|
<Blob color="indigo" onClick={() => navigate(`/programs/${program.id}/edit`)}>
|
|
<BlobText>
|
|
<Icon value={faPencilAlt}/>
|
|
</BlobText>
|
|
</Blob>
|
|
<Blob color="red" onClick={onDelete}>
|
|
<BlobText>
|
|
<Icon value={faTrashCan}/>
|
|
</BlobText>
|
|
</Blob>
|
|
</PageFlexColumn>
|
|
<PageFlexColumn flex={1}>
|
|
<TitleLine>Steg</TitleLine>
|
|
{program.steps.map((s, i) => (
|
|
<PageFlexRow key={i}>
|
|
<Blob>
|
|
<BlobText>
|
|
<Icon value={faArrowUpRightDots}/> {s.values.level}
|
|
</BlobText>
|
|
</Blob>
|
|
<Blob>
|
|
<BlobText>
|
|
<Icon value={faStopwatch}/> {valuesToString(s.duration || {}) || "Manuell"}
|
|
</BlobText>
|
|
</Blob>
|
|
</PageFlexRow>
|
|
))}
|
|
</PageFlexColumn>
|
|
</PageFlexRow>
|
|
</PageBody>
|
|
</Page>
|
|
);
|
|
}
|