141 lines
4.2 KiB
JavaScript
141 lines
4.2 KiB
JavaScript
import dynamic from "next/dynamic";
|
|
import { useEffect, useState } from "react";
|
|
import { CODE_SEPARATOR, PYTHON_DEFAULT } from "../../utils/constant.js";
|
|
import styles from "../../styles/exos/ModelInput.module.scss";
|
|
import { parseClassName } from "../../utils/utils.js";
|
|
|
|
import { MdOutlineOpenInNew } from "react-icons/md";
|
|
import { RiErrorWarningFill } from "react-icons/ri";
|
|
import { FiUpload } from "react-icons/fi";
|
|
import { FaDownload } from "react-icons/fa";
|
|
import { getExoModelFile } from "../../requests/requests.exos.js";
|
|
let CustomEditor;
|
|
|
|
if (typeof window !== "undefined") {
|
|
CustomEditor = dynamic(() => import("./Editor.jsx"));
|
|
}
|
|
|
|
export default function ModelInput({
|
|
model,
|
|
onChange,
|
|
setModel,
|
|
setFull,
|
|
full,
|
|
step,
|
|
tempSpec,
|
|
}) {
|
|
const [python, setPython] = useState("");
|
|
useEffect(() => {
|
|
if (full) {
|
|
setPython(model.data ? model.data : PYTHON_DEFAULT);
|
|
}
|
|
return () => {
|
|
setPython("");
|
|
};
|
|
}, [full]);
|
|
|
|
return (
|
|
<>
|
|
{!full && (
|
|
<div
|
|
className={parseClassName([
|
|
styles["model-input__full-container"],
|
|
styles["exo-edit"],
|
|
])}
|
|
>
|
|
<div className={styles["input-container"]}>
|
|
<button
|
|
className={parseClassName([
|
|
styles["open-btn"],
|
|
styles["button-lang"],
|
|
styles["button-lang-python"],
|
|
])}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
//setActive(!active);
|
|
setFull(true);
|
|
}}
|
|
>
|
|
<MdOutlineOpenInNew />
|
|
Ouvrir l'éditeur
|
|
</button>
|
|
{/* {python !== model.model && <RiErrorWarningFill className="red" />} */}
|
|
<p>ou</p>
|
|
<div className={styles["fileinput-container"]}>
|
|
<input
|
|
type="file"
|
|
id="file"
|
|
name="file"
|
|
accept=".py"
|
|
onChange={async (e) => {
|
|
let text = await e.target.files[0].text().then((res) => res);
|
|
var filename = e.target.files[0].name;
|
|
var splitting = filename.split(".");
|
|
if (splitting[splitting.length - 1] != "py") {
|
|
console.log("nope");
|
|
} else {
|
|
setModel({ filename: e.target.files[0].name, data: text });
|
|
}
|
|
}}
|
|
className={styles["inputfile"]}
|
|
/>
|
|
<label htmlFor="file">Choisir un fichier</label>
|
|
<div className={styles["filename"]}>
|
|
{model.filename == "" || !model.filename
|
|
? "..."
|
|
: model.filename}
|
|
{model.download && <FaDownload onClick={() => {
|
|
getExoModelFile(step.id_code)
|
|
}}/>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{full && (
|
|
<>
|
|
{CustomEditor && full && (
|
|
<CustomEditor
|
|
step={step}
|
|
placeholder="Fonction main qui renvoie un un objet avec calcul = le calcul à afficher "
|
|
mode="python"
|
|
name="blah2"
|
|
fontSize={14}
|
|
//showPrintMargin={true}
|
|
showGutter={true}
|
|
highlightActiveLine={true}
|
|
value={python}
|
|
onChange={(e) => {
|
|
setPython(e);
|
|
}}
|
|
setOptions={{
|
|
showLineNumbers: true,
|
|
tabSize: 2,
|
|
}}
|
|
//editorProps={{ $blockScrolling: true }}
|
|
enableBasicAutocompletion={false}
|
|
enableLiveAutocompletion={true}
|
|
//enableSnippets={true}
|
|
className="model_input-code_input"
|
|
showPrintMargin={false}
|
|
validate={(e) => {
|
|
e.preventDefault();
|
|
onChange &&
|
|
onChange({ data: python, filename: model.filename });
|
|
|
|
setFull(false);
|
|
}}
|
|
cancel={() => {
|
|
setFull(false);
|
|
setPython(tempSpec.exo_model.data);
|
|
}}
|
|
filename={model.filename}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|