2021-09-14 02:37:35 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import Accordion from "@material-ui/core/Accordion";
|
|
|
|
import AccordionSummary from "@material-ui/core/AccordionSummary";
|
|
|
|
import AccordionDetails from "@material-ui/core/AccordionDetails";
|
|
|
|
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
|
|
|
|
2021-09-14 04:27:43 +02:00
|
|
|
import Button from "@material-ui/core/Button";
|
|
|
|
import Select from "@material-ui/core/Select";
|
2021-09-14 02:37:35 +02:00
|
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
2021-09-14 04:27:43 +02:00
|
|
|
import { generateContract, generateRandomContract, generateRandomContractOnHome } from "../../CodingContractGenerator";
|
2021-09-14 02:37:35 +02:00
|
|
|
import { CodingContractTypes } from "../../CodingContracts";
|
|
|
|
|
2021-09-14 04:27:43 +02:00
|
|
|
export function CodingContracts(): React.ReactElement {
|
2021-09-14 02:37:35 +02:00
|
|
|
const [codingcontract, setCodingcontract] = useState("Find Largest Prime Factor");
|
|
|
|
function setCodingcontractDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
|
|
|
|
setCodingcontract(event.target.value as string);
|
|
|
|
}
|
|
|
|
|
|
|
|
function specificContract(): void {
|
|
|
|
generateContract({
|
|
|
|
problemType: codingcontract,
|
|
|
|
server: "home",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Accordion>
|
|
|
|
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
|
|
|
<h2>Coding Contracts</h2>
|
|
|
|
</AccordionSummary>
|
|
|
|
<AccordionDetails>
|
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<Button onClick={generateRandomContract}>Generate Random Contract</Button>
|
|
|
|
<Button onClick={generateRandomContractOnHome}>Generate Random Contract on Home Comp</Button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<Select
|
|
|
|
id="contract-types-dropdown"
|
|
|
|
className="dropdown"
|
|
|
|
onChange={setCodingcontractDropdown}
|
|
|
|
value={codingcontract}
|
|
|
|
>
|
|
|
|
{Object.values(CodingContractTypes).map((cc) => (
|
|
|
|
<MenuItem key={cc.name} value={cc.name}>
|
|
|
|
{cc.name}
|
|
|
|
</MenuItem>
|
|
|
|
))}
|
|
|
|
</Select>
|
|
|
|
<Button onClick={specificContract}>Generate Specified Contract Type on Home Comp</Button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</AccordionDetails>
|
|
|
|
</Accordion>
|
|
|
|
);
|
|
|
|
}
|