pixies

1import "./styles.sass";
2import NodeHeader from "@/pages/Nodes/components/NodeHeader";
3import NodeContainer from "@/pages/Nodes/components/NodeContainer";
4import {useContext, useEffect, useState} from "react";
5import {NodeContext} from "@/common/contexts/Node";
6import {t} from "i18next";
7import CreateNodeDialog from "@/pages/Nodes/components/CreateNodeDialog";
8import {ConfigContext} from "@/common/contexts/Config";
9import {useAlert} from "@/common/contexts/Alert";
10import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
11import {faPlus} from "@fortawesome/free-solid-svg-icons";
12
13export const Nodes = () => {
14    const [config] = useContext(ConfigContext);
15    const [nodes, updateNodes] = useContext(NodeContext);
16    const alert = useAlert();
17    const [createDialogOpen, setCreateDialogOpen] = useState(false);
18
19    const openPreviewInfoDialog = () => {
20        alert.openAlert(t("preview.title"), t("nodes.preview_active"), {buttonText: t("dialog.close")});
21    }
22
23    useEffect(() => {
24        updateNodes();
25    }, []);
26
27    return (
28        <div className="node-page">
29            <CreateNodeDialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)}/>
30            <NodeHeader/>
31            <div className="node-area">
32                <NodeContainer name={t("nodes.this_server")} url={location.host} currentNode={true} id={0}/>
33
34                {nodes.map(node => <NodeContainer {...node} key={node.id} />)}
35
36                <div className={"node-add" + (config.previewMode ? " node-disabled" : "")} onClick={() => config.previewMode
37                    ? openPreviewInfoDialog() : setCreateDialogOpen(true)}>
38                    <FontAwesomeIcon icon={faPlus}/>
39                    <h1>{t("nodes.add")}</h1>
40                </div>
41            </div>
42        </div>
43    )
44}