1
0
Fork 0

Introduce alerts

This commit is contained in:
Gregory Eremin 2017-11-04 21:49:53 +01:00
parent 9bd7b91e83
commit dd66be1d75
4 changed files with 25 additions and 19 deletions

View File

@ -0,0 +1,9 @@
.alert {
overflow: auto;
margin: 0 0 20px 0;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.alert.error { background-color: #f55; }

View File

@ -0,0 +1,14 @@
import React, { Component } from 'react';
import './alert.css';
export default class Alert extends Component {
render() {
if (!this.props.message) {
return null
}
return (
<div className={"alert "+ this.props.type}>{this.props.message}</div>
)
}
}

View File

@ -75,12 +75,3 @@ a.history {
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
} }
.error {
overflow: auto;
margin: 0 0 20px 0;
background-color: #f55;
color: #fff;
border-radius: 4px;
padding: 10px;
}

View File

@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
import Nav from '../blocks/nav.js' import Nav from '../blocks/nav.js'
import Output from '../blocks/output.js' import Output from '../blocks/output.js'
import Alert from '../blocks/alert.js'
import { api, httpPOST } from '../http.js' import { api, httpPOST } from '../http.js'
import './command.css' import './command.css'
@ -43,7 +44,7 @@ export default class Command extends Component {
query={this.props.query} onQueryChange={this.props.onQueryChange} /> query={this.props.query} onQueryChange={this.props.onQueryChange} />
<main> <main>
{this.renderForm()} {this.renderForm()}
{this.renderError()} <Alert type="error" message={this.state.error} />
<Output jobID={this.state.jobID} /> <Output jobID={this.state.jobID} />
</main> </main>
</div> </div>
@ -110,15 +111,6 @@ export default class Command extends Component {
} }
} }
renderError() {
if (this.state.error === null) {
return null
}
return (
<div className="error">{this.state.error}</div>
)
}
submitHandler(event) { submitHandler(event) {
event.preventDefault() event.preventDefault()
httpPOST(api("/exec"), formQuery(this.state.form), httpPOST(api("/exec"), formQuery(this.state.form),