Skip to content

Dashboard Configuration Variable Highlighting #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Dashboard Configuration Variable Highlighting #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 90 additions & 72 deletions client/src/components/views/ConfigView/BasicVariable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@ type Props = {
};

class BasicVariable extends React.Component<Props> {
originalValue = this.props.state.__value;

render() {
const { name, path, state } = this.props;

const modified = state.__value !== state.__newValue;
const updated = this.originalValue !== state.__newValue;

const onChange = (validatedValue: {
value: string | number | boolean;
Expand Down Expand Up @@ -63,14 +66,14 @@ class BasicVariable extends React.Component<Props> {
case 'int':
case 'long':
input = (
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateInt}
onChange={onChange}
onSave={onSave}
/>
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateInt}
onChange={onChange}
onSave={onSave}
/>
);
break;
case 'float':
Expand All @@ -79,96 +82,111 @@ class BasicVariable extends React.Component<Props> {
input = <p>{state.__value}</p>;
} else {
input = (
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateDouble}
onChange={onChange}
onSave={onSave}
/>
{state.__valid && (
<p
className="mx-3"
<div
style={{
opacity: 0.5,
display: 'flex',
alignItems: 'center',
}}
>
({Number(state.__newValue)})
</p>
)}
</div>
>
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateDouble}
onChange={onChange}
onSave={onSave}
/>

</div>
);
}
break;
case 'string':
input = (
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateString}
onChange={onChange}
onSave={onSave}
/>
<TextInput
id={path}
value={state.__newValue as number | string}
valid={state.__valid}
validate={validateString}
onChange={onChange}
onSave={onSave}
/>
);
break;
case 'boolean':
input = (
<BooleanInput
id={path}
value={state.__newValue as boolean}
onChange={onChange}
onSave={onSave}
/>
<BooleanInput
id={path}
value={state.__newValue as boolean}
onChange={onChange}
onSave={onSave}
/>
);
break;
case 'enum':
input = (
<EnumInput
id={path}
value={state.__newValue as string}
enumValues={state.__enumValues}
onChange={onChange}
onSave={onSave}
/>
<EnumInput
id={path}
value={state.__newValue as string}
enumValues={state.__enumValues}
onChange={onChange}
onSave={onSave}
/>
);
break;
}
}

return (
<tr>
<td>
<label htmlFor={path}>
<tr>

<td>
<label htmlFor={path}>
<span
style={
modified
? {
userSelect: 'auto',
opacity: 1.0,
}
: {
userSelect: 'none',
opacity: 0.0,
}
}
style={
modified
? {
userSelect: 'auto',
opacity: 1.0,
}
: {
userSelect: 'none',
opacity: 0.0,
}
}
>
*
</span>
{name}
</label>
</td>
<td>{input}</td>
</tr>
{name}
</label>
</td>
<td>{input}</td>
<td style={{ position: 'relative', paddingRight: '10px' }}>
{updated && (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '5px',
}}
>
<div
/>
<span
style={{
fontSize: '16px',
color: '#FFF',
opacity: 0.5,
}}
>
{`(${this.originalValue})`}
</span>
</div>
)}
</td>
</tr>
);
}
}

export default BasicVariable;
export default BasicVariable;