131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Separator } from "../separator.js";
|
|
|
|
// import JSONInput from "react-json-editor-ajrm/index";
|
|
// import locale from "react-json-editor-ajrm/locale/en";
|
|
|
|
const checkLinksAreOk = (links, listOfElements) => {
|
|
let linkSourceNames = links.map((link) => link.source.name);
|
|
let linkTargetNames = links.map((link) => link.target.name);
|
|
let allLinkNames = [...linkSourceNames, ...linkTargetNames];
|
|
let uniqueNames = [...new Set(allLinkNames)];
|
|
|
|
let listOfElementNames = listOfElements.map((element) => element.name);
|
|
let anyInvalidNames = uniqueNames.indexOf(
|
|
(name) => !listOfElementNames.includes(name)
|
|
);
|
|
let anyElementsWithoutDistances = links.indexOf(
|
|
(link) => !link.distance && link.distance != 0
|
|
);
|
|
if (anyInvalidNames == -1 && anyElementsWithoutDistances == -1) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
export function ComparisonsChanger({
|
|
setLinks,
|
|
listOfElements,
|
|
show,
|
|
moveToNextStep,
|
|
links,
|
|
}) {
|
|
let [value, setValue] = useState(JSON.stringify(links, null, 4));
|
|
const [displayingDoneMessage, setDisplayingDoneMessage] = useState(false);
|
|
const [displayingDoneMessageTimer, setDisplayingDoneMessageTimer] =
|
|
useState(null);
|
|
|
|
let handleTextChange = (event) => {
|
|
setValue(event.target.value);
|
|
};
|
|
|
|
let handleSubmitInner = (event) => {
|
|
clearTimeout(displayingDoneMessageTimer);
|
|
event.preventDefault();
|
|
|
|
try {
|
|
let newData = JSON.parse(value);
|
|
|
|
if (checkLinksAreOk(newData, listOfElements)) {
|
|
setLinks(newData);
|
|
moveToNextStep({
|
|
listOfElements,
|
|
whileChangingStuff: true,
|
|
newLinksFromChangingStuff: newData,
|
|
});
|
|
setDisplayingDoneMessage(true);
|
|
let timer = setTimeout(() => setDisplayingDoneMessage(false), 3000);
|
|
setDisplayingDoneMessageTimer(timer);
|
|
} else {
|
|
throw Error("Links are not ok");
|
|
}
|
|
} catch (error) {
|
|
setDisplayingDoneMessage(false);
|
|
alert(error);
|
|
}
|
|
};
|
|
|
|
useEffect(async () => {
|
|
setValue(JSON.stringify(links, null, 4));
|
|
// console.log(JSON.stringify(config, null, 10));
|
|
}, [links]);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmitInner}
|
|
className={`inline ${show ? "" : "hidden"}`}
|
|
>
|
|
<Separator />
|
|
<h3 className="text-lg mt-8">Load comparisons</h3>
|
|
<p>These can be edited, which will override your current comparisons.</p>
|
|
<br />
|
|
<textarea
|
|
value={value}
|
|
onChange={handleTextChange}
|
|
rows={4 + JSON.stringify(links, null, 4).split("\n").length}
|
|
cols={90}
|
|
className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
|
|
/>
|
|
{/* */}
|
|
{/*
|
|
<div className="flex text-left text-xl justify-around ">
|
|
<JSONInput
|
|
placeholder={value} // data to display
|
|
theme="dark_vscode_tribute" //"light_mitsuketa_tribute" //
|
|
locale={locale}
|
|
colors={{
|
|
string: "#DAA520", // overrides theme colors with whatever color value you want
|
|
}}
|
|
height="550px"
|
|
style={{
|
|
body: {
|
|
fontSize: "20px",
|
|
},
|
|
}}
|
|
onChange={onChangeForJsonEditor}
|
|
/>
|
|
</div>
|
|
|
|
*/}
|
|
<br />
|
|
<button
|
|
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5 p-10"
|
|
onClick={handleSubmitInner}
|
|
>
|
|
Change comparisons
|
|
</button>
|
|
|
|
<button
|
|
className={
|
|
displayingDoneMessage
|
|
? "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10"
|
|
: "hidden"
|
|
}
|
|
>
|
|
Done!
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|