106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
import React from "react";
|
|
import Emblem from "../Emblem";
|
|
import { FormattedMessage } from "react-intl";
|
|
import css from "../css/Config.css";
|
|
|
|
const Options = props => {
|
|
const emblem = (t1, t2) =>
|
|
<Emblem text1={t1} text2={t2} color1="#61dafb" color2="#fff" size={20}/>
|
|
|
|
const renderOptions = () => {
|
|
let c = props.pattern.config;
|
|
let rows = [];
|
|
if (typeof c.options !== "undefined") {
|
|
let list = [];
|
|
for (let item of Object.keys(c.options).sort()) {
|
|
let values = null;
|
|
if (typeof c.options[item] === "boolean") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.true}>{c.options[item] ? "TRUE" : "FALSE"}</span>
|
|
</td></tr>);
|
|
} else if (typeof c.options[item] !== "object") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.val}>{c.options[item]}</span>
|
|
</td></tr>);
|
|
} else {
|
|
if (typeof c.options[item].pct !== "undefined") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.val}>
|
|
{c.options[item].min}%
|
|
{" / "}
|
|
<b>{c.options[item].pct}%</b>
|
|
{" / "}
|
|
{c.options[item].max}%
|
|
</span>
|
|
</td></tr>);
|
|
} else if (typeof c.options[item].deg !== "undefined") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.val}>
|
|
{c.options[item].min}°
|
|
{" / "}
|
|
<b>{c.options[item].deg}°</b>
|
|
{" / "}
|
|
{c.options[item].max}°
|
|
</span>
|
|
</td></tr>);
|
|
} else if (typeof c.options[item].mm !== "undefined") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.val}>
|
|
{c.options[item].min}mm;
|
|
{" / "}
|
|
<b>{c.options[item].mm}mm</b>
|
|
{" / "}
|
|
{c.options[item].max}mm
|
|
</span>
|
|
</td></tr>);
|
|
} else if (typeof c.options[item].bool !== "undefined") {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
{c.options[item].bool
|
|
? <React.Fragment><span className={css.true}>TRUE</span><span> / FALSE</span></React.Fragment>
|
|
: <React.Fragment><span>TRUE / </span><span className={css.false}>FALSE</span></React.Fragment>
|
|
}
|
|
</td></tr>);
|
|
} else if (typeof c.options[item].list !== "undefined") {
|
|
let list = [];
|
|
for (let opt of c.options[item].list) {
|
|
if (opt === c.options[item].dflt) list.push(<li><b>{opt}</b> «</li>);
|
|
else list.push(<li>{opt}</li>);
|
|
}
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<ul className={css.config}>{list}</ul>
|
|
</td></tr>);
|
|
} else {
|
|
rows.push(<tr><td>
|
|
<span className={css.key}>{item}:</span>
|
|
<span className={css.val}>FIXME</span>
|
|
</td></tr>);
|
|
}
|
|
}
|
|
}
|
|
} else return null;
|
|
return (
|
|
<table className={css.config}>
|
|
<thead>
|
|
<tr><th>{emblem(c.name+".config",".options")}</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={css.config}>
|
|
{renderOptions()}
|
|
</div>
|
|
);
|
|
}
|
|
export default Options;
|