aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js')
-rw-r--r--web/src/js/components/Modal/OptionMaster.jsx57
-rw-r--r--web/src/js/components/Modal/OptionModal.jsx3
-rw-r--r--web/src/js/ducks/options.js19
3 files changed, 61 insertions, 18 deletions
diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index ac65a22a..32f5bb4b 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -1,5 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import classnames from 'classnames'
+import { update as updateOptions } from '../../ducks/options'
PureBooleanOption.PropTypes = {
value: PropTypes.bool.isRequired,
@@ -7,16 +10,12 @@ PureBooleanOption.PropTypes = {
}
function PureBooleanOption({ value, onChange, ...props}) {
- let onFocus = () => { props.onFocus() },
- onBlur = () => { props.onBlur() },
- onMouseEnter = () => { props.onMouseEnter() },
+ let onMouseEnter = () => { props.onMouseEnter() },
onMouseLeave = () => { props.onMouseLeave() }
return (
<input type="checkbox"
checked={value}
onChange={onChange}
- onFocus={onFocus}
- onBlur={onBlur}
onMouseOver={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
@@ -35,8 +34,10 @@ function PureStringOption( { value, onChange, ...props }) {
onMouseEnter = () => { props.onMouseEnter() },
onMouseLeave = () => { props.onMouseLeave() }
return (
+ <div className={classnames('input-group', {'has-error': props.error})}>
<input type="text"
value={value}
+ className='form-control'
onChange={onChange}
onKeyDown={onKeyDown}
onFocus={onFocus}
@@ -44,6 +45,7 @@ function PureStringOption( { value, onChange, ...props }) {
onMouseOver={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
+ </div>
)
}
@@ -61,6 +63,7 @@ function PureNumberOption( {value, onChange, ...props }) {
return (
<input type="number"
+ className="form-control"
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
@@ -85,6 +88,7 @@ function PureChoicesOption( { value, onChange, name, choices, ...props}) {
return (
<select
name={name}
+ className="form-control"
onChange={onChange}
selected={value}
onFocus={onFocus}
@@ -108,6 +112,8 @@ class PureStringSequenceOption extends Component {
this.onBlur = this.onBlur.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
this.onChange = this.onChange.bind(this)
+ this.onMouseEnter = this.onMouseEnter.bind(this)
+ this.onMouseLeave = this.onMouseLeave.bind(this)
}
onFocus() {
@@ -120,28 +126,41 @@ class PureStringSequenceOption extends Component {
this.props.onBlur()
}
+ onMouseEnter() {
+ this.props.onMouseEnter()
+ }
+
+ onMouseLeave() {
+ this.props.onMouseLeave()
+ }
+
onKeyDown(e) {
e.stopPropagation()
}
onChange(e) {
const value = e.target.value.split("\n")
- console.log(value)
this.props.onChange(e)
this.setState({ value })
}
render() {
const {height, value} = this.state
+ const {error} = this.props
return (
+ <div className={classnames('input-group', {'has-error': error})}>
<textarea
rows={height}
value={value}
+ className="form-control"
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onFocus={this.onFocus}
onBlur={this.onBlur}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}
/>
+ </div>
)
}
}
@@ -154,16 +173,16 @@ const OptionTypes = {
"sequence of str": PureStringSequenceOption,
}
-export default class OptionMaster extends Component {
+class OptionMaster extends Component {
constructor(props, context) {
super(props, context)
this.state = {
- updateOptions: this.props.updateOptions,
option: this.props.option,
name: this.props.name,
mousefocus: false,
focus: false,
+ error: false,
}
if (props.option.choices) {
@@ -179,11 +198,17 @@ export default class OptionMaster extends Component {
}
componentWillReceiveProps(nextProps) {
- this.setState({ option: nextProps.option })
+ if (nextProps.option.value !== this.state.option.value){
+ this.setState({ error: true })
+ }
+ else{
+ this.setState({ option: nextProps.option, error: false })
+ }
}
onChange(e) {
- const { updateOptions, option, name } = this.state
+ const { option, name } = this.state
+ this.setState({ option: {...option, value: e.target.value}})
switch (option.type) {
case 'bool' :
updateOptions({[name]: !option.value})
@@ -201,7 +226,6 @@ export default class OptionMaster extends Component {
}
onMouseEnter() {
- console.log(this.state)
this.setState({ mousefocus: true })
}
@@ -210,7 +234,6 @@ export default class OptionMaster extends Component {
}
onFocus() {
- console.log(this.state)
this.setState({ focus: true })
}
@@ -220,7 +243,7 @@ export default class OptionMaster extends Component {
render() {
const { name, children } = this.props
- const { option, focus, mousefocus } = this.state
+ const { option, focus, mousefocus, error } = this.state
const WrappedComponent = this.WrappedComponent
return (
<div className="row">
@@ -238,6 +261,7 @@ export default class OptionMaster extends Component {
onBlur={this.onBlur}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
+ error={error}
/>
{(focus || mousefocus) && (
<div className="tooltip tooltip-bottom" role="tooltip" style={{opacity: 1}}>
@@ -250,3 +274,10 @@ export default class OptionMaster extends Component {
)
}
}
+
+export default connect(
+ null,
+ {
+ updateOptions: updateOptions
+ }
+)(OptionMaster)
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index ec59fa29..a4dd95d0 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,7 +1,6 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as modalAction from '../../ducks/ui/modal'
-import { update as updateOptions } from '../../ducks/options'
import Option from './OptionMaster'
class PureOptionModal extends Component {
@@ -37,7 +36,6 @@ class PureOptionModal extends Component {
<Option
key={index}
name={key}
- updateOptions={updateOptions}
option={option}
/>)
})
@@ -58,6 +56,5 @@ export default connect(
}),
{
hideModal: modalAction.hideModal,
- updateOptions: updateOptions,
}
)(PureOptionModal)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index 39c2f3fc..ed82d7f3 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -4,6 +4,7 @@ export const RECEIVE = 'OPTIONS_RECEIVE'
export const UPDATE = 'OPTIONS_UPDATE'
export const REQUEST_UPDATE = 'REQUEST_UPDATE'
export const UNKNOWN_CMD = 'OPTIONS_UNKNOWN_CMD'
+export const ERROR = 'OPTIONS_ERROR'
const defaultState = {
@@ -21,12 +22,26 @@ export default function reducer(state = defaultState, action) {
...action.data,
}
+ case ERROR:
+ return {
+ ...state,
+ ...action.data,
+ }
+
default:
return state
}
}
export function update(options) {
- fetchApi.put('/options', options)
- return { type: REQUEST_UPDATE }
+ let error = ''
+ fetchApi.put('/options', options).then(
+ (response) => {
+ response.text().then(errorMsg => {
+ error = errorMsg
+ console.log(error)
+ })
+ }
+ )
+ return {type: ERROR, error}
}