v1.0

- added task rendering instead of molecule
- fied a lot of errors
- changes experiment page to show generic experiment info

src/Pages/TaskPage/TaskPage.tsx

@@ -1,13 +1,100 @@
 import { Helmet } from "react-helmet";
-import { IconCancel, IconPlus, IconSettings } from "@tabler/icons-react";
+import { IconCancel, IconPlus } from "@tabler/icons-react";
 import { useParams } from "react-router";
 import CustomButton from "Components/CustomButton/CustomButton";
 import { IframePlugin } from "Api/PluginLoader/PluginLoader";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import type { InstanceData } from "Types/Experiment/Experiment";
+import {
+  getFrontendFile,
+  getInstanceById,
+  updateInstance,
+} from "Api/QuantumBackend/ExperimentsManagment";
+import { useAuthenticationStore } from "Stores/AuthenticationStore";
+import { useExperimentStore } from "Stores/ExperimentStore";
+import { SimpleGrid, TextInput, Title } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import "./TaskPage.css";
 
 function TaskPage() {
   const { task_id } = useParams();
-  const [data, setData] = useState<{ text: string }>({ text: "" });
+
+  const [instance, set_instance] = useState<InstanceData>();
+  const { loadedHtmlFiles, addLoadedHtml, setInstances } = useExperimentStore();
+  const { profile, is_loading } = useAuthenticationStore();
+  const [, set_is_loading] = useState(true);
+  const [data, setData] = useState<string>();
+  const [progress, setProgress] = useState<string>();
+  const [qubits_needed, set_qubits_needed] = useState<number>();
+
+  const [name, setName] = useState<string>();
+  const [descr, setDescr] = useState<string>("");
+  const [reload, setReload] = useState<number>(0);
+
+  const saveData = () => {
+    if (instance && qubits_needed) {
+      updateInstance({
+        instance_id: instance.instance_id,
+        name: name,
+        description: descr,
+        instance_data: JSON.stringify(data),
+        qubits_needed: qubits_needed,
+      }).then((updated) => {
+        set_instance({
+          instance_id: instance.instance_id,
+          name: updated.name,
+          description: updated.description,
+          instance_data: updated.instance_data,
+          qubits_needed: updated.qubits_needed,
+          simulation_result: instance.simulation_result,
+        });
+        setName(updated.name);
+        setDescr(updated.description || "");
+        setData(updated.instance_data);
+      });
+    } else {
+      if (!qubits_needed) {
+        notifications.show({
+          message: "Количество кубит не было определено",
+        });
+      }
+    }
+  };
+
+  const ResetData = () => {
+    if (instance) {
+      setData(instance.instance_data);
+      setName(instance.name);
+      setDescr(instance.description || "");
+      setReload(reload + 1);
+    }
+  };
+
+  useEffect(() => {
+    if (profile && !is_loading && task_id) {
+      getInstanceById(Number(task_id))
+        .then((inst) => {
+          set_instance(inst);
+          setData(inst.instance_data);
+          setProgress(inst.simulation_result?.simulation_result);
+          setName(inst.name);
+          setDescr(inst.description || "");
+          set_qubits_needed(inst.qubits_needed);
+          getFrontendFile(1).then((file) => {
+            addLoadedHtml(1, file);
+          });
+          set_is_loading(false);
+        })
+        .catch(() => {
+          set_is_loading(false);
+        });
+    }
+
+    return () => {
+      setInstances([]);
+    };
+  }, [profile, is_loading]);
+
   return (
     <>
       <Helmet>
@@ -29,39 +116,77 @@ function TaskPage() {
             marginBottom: "15px",
           }}
         >
-          <div className="experimentButtons">
-            <CustomButton
-              color="accent"
-              onClick={() => {}}
-              icon={<IconPlus />}
-              text="Сохранить"
-            />
-            <CustomButton
-              color="red"
-              style="outline"
-              onClick={() => {}}
-              icon={<IconCancel />}
-              text="Отменить"
-            />
+          {(!instance?.simulation_result ||
+            instance?.simulation_result?.status == "DRAFT") && (
+            <>
+              <div className="taskButtons">
+                <CustomButton
+                  color="accent"
+                  onClick={saveData}
+                  disabled={
+                    JSON.stringify(data) ==
+                      JSON.stringify(instance?.instance_data) &&
+                    instance?.name == name &&
+                    (instance?.description || "") == (descr || "")
+                  }
+                  icon={<IconPlus />}
+                  text="Сохранить"
+                />
+                <CustomButton
+                  color="red"
+                  style="outline"
+                  onClick={ResetData}
+                  icon={<IconCancel />}
+                  text="Отменить"
+                  disabled={
+                    JSON.stringify(data) ==
+                      JSON.stringify(instance?.instance_data) &&
+                    instance?.name == name &&
+                    (instance?.description || "") == (descr || "")
+                  }
+                />
+              </div>
+            </>
+          )}
+          <div>
+            <SimpleGrid verticalSpacing="lg" cols={2}>
+              <Title size="lg">Имя:</Title>
+              <TextInput
+                size="md"
+                value={name}
+                onChange={
+                  (e) => {
+                    setName(e.target.value);
+                  } //set_username(e.currentTarget.value)
+                }
+              />
+              <Title size="lg">Описание:</Title>
+              <TextInput
+                size="md"
+                value={descr}
+                onChange={
+                  (e) => {
+                    setDescr(e.target.value);
+                  } //set_email(e.currentTarget.value)
+                }
+              />
+            </SimpleGrid>
           </div>
         </div>
-        <IframePlugin
-          pluginUrl={
-            window.location.origin +
-            "/" +
-            import.meta.env.VITE_BASE_PATH +
-            "/" +
-            "index.html"
-          }
-          mode="editor"
-          taskData={{
-            id: Number(task_id),
-            name: "Молекула 1",
-            description: "",
-            data: data,
-          }}
-          onUpdate={setData}
-        />
+        {instance && (
+          <IframePlugin
+            plugin={loadedHtmlFiles.get(1) || ""}
+            mode="Editor"
+            taskData={JSON.stringify(data)}
+            qubits_needed={qubits_needed || 0}
+            onUpdate={(data, qubits_need) => {
+              setData(JSON.parse(data));
+              set_qubits_needed(qubits_need);
+            }}
+            index={instance.instance_id + reload}
+            simProgress={JSON.stringify(progress)}
+          />
+        )}
       </div>
     </>
   );