Initial commit

src/Pages/ExperimentsPage/ExperimentPage.tsx

@@ -0,0 +1,108 @@
+import { Alert, Center, Text } from "@mantine/core";
+import "./ExperimentPage.css";
+import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
+import { NewMoleculeModal } from "Modals/NewMolecule/NewMolecule";
+import { useState } from "react";
+import { Helmet } from "react-helmet";
+import { IconPlus, IconSettings } from "@tabler/icons-react";
+import { useParams } from "react-router";
+import {
+  useExperimentStore,
+  useSelectedExperiment,
+} from "Stores/ExperimentStore";
+import CustomButton from "Components/CustomButton/CustomButton";
+function ExperimentPage() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { experiment_id } = useParams();
+  const { selectedExperimentId, selectExperiment } = useExperimentStore();
+
+  if (
+    !selectedExperimentId ||
+    (Number(experiment_id) != selectedExperimentId && experiment_id)
+  ) {
+    console.log(Number(experiment_id));
+    selectExperiment(Number(experiment_id));
+  }
+
+  const experiment = useSelectedExperiment();
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {experiment
+            ? "Experiment " + experiment.id + " | QMolSim"
+            : "Error |QmolSim"}
+        </title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      {experiment && (
+        <div className="ExperimentPage">
+          <NewMoleculeModal
+            isOpened={isOpen}
+            setIsOpened={(toOpen: boolean) => setIsOpen(toOpen)}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              marginBottom: "15px",
+            }}
+          >
+            <div className="experimentButtons">
+              <CustomButton
+                color="contrast"
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+                icon={<IconPlus />}
+                text="Добавить задачу"
+              />
+              <CustomButton
+                color="contrast"
+                style="outline"
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+                icon={<IconSettings />}
+                text="Параметры эксперимента"
+              />
+            </div>
+          </div>
+          {experiment.tasks_ids.length > 0 && (
+            <PaginationContainer>
+              {experiment.tasks_ids.map((task: ExperimentTask) => {
+                return <div>{task.data.name}</div>;
+              })}
+            </PaginationContainer>
+          )}
+          {experiment.tasks_ids.length == 0 && (
+            <Alert>
+              <Center>
+                <Text size={"xl"} c="contrast">
+                  Нет задач
+                </Text>
+              </Center>
+            </Alert>
+          )}
+        </div>
+      )}
+      {!experiment && (
+        <Alert color="red">
+          <Center>
+            {" "}
+            <Text c="contrast" size={"xl"} size="md">
+              Ошибка. Эксперимент не найден
+            </Text>{" "}
+          </Center>
+        </Alert>
+      )}
+    </>
+  );
+}
+
+export default ExperimentPage;