1
0
Fork 0

More semicolons deleted and functions created

This commit is contained in:
Gregory Eremin 2017-11-04 22:11:43 +01:00
parent 9f1efeee7d
commit 9a7f3fd0cc
6 changed files with 123 additions and 127 deletions

View File

@ -1,5 +1,4 @@
import React, { Component } from 'react';
import './alert.css';
export default class Alert extends Component {

View File

@ -1,21 +1,19 @@
import React, { Component } from 'react';
import React, { Component } from 'react'
import './header.css'
import './header.css';
class Header extends Component {
export default class Header extends Component {
render() {
let user = this.props.user
return (
<header>
<div className="header-container">
<div className="go-api">go-api<span>commands</span></div>
<div className="auth">
<div className="name">{this.props.user.name}</div>
<img src={this.props.user.picture} alt="" />
<div className="name">{user.name}</div>
<img src={user.picture} alt={"Picture of "+ user.name} />
</div>
</div>
</header>
);
)
}
}
export default Header;

View File

@ -1,13 +1,13 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Timestamp from './timestamp.js';
import './job_list.css';
import Timestamp from './timestamp.js'
import './job_list.css'
export default class JobList extends Component {
render() {
if (this.props.jobs === undefined) {
return null;
return null
}
return (
@ -26,7 +26,7 @@ export default class JobList extends Component {
}
renderJob(job) {
let shortID = job.id.substring(0, 8);
let shortID = job.id.substring(0, 8)
return (
<div key={job.id} className={"job-details short"}>
<div className={"dot "+ job.state}></div>
@ -36,7 +36,7 @@ export default class JobList extends Component {
<div className="started"><Timestamp date={job.started_at} /></div>
<div className="took"><Timestamp from={job.started_at} until={job.finished_at} /></div>
</div>
);
)
}
}

View File

@ -1,40 +1,37 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import './nav.css';
import './nav.css'
export default class Nav extends Component {
constructor(props) {
super(props);
this.state = {
query: "",
};
super(props)
this.state = {query: ""}
}
render() {
return (
<nav>
<input className="search" type="search" placeholder="Search for commands"
value={this.props.query} onChange={this.props.onQueryChange} results="0" />
<ul>
{Object.keys(this.props.commands).map((name) => {
let cmd = this.props.commands[name];
{Object.keys(this.props.commands).map(this.renderItem)}
</ul>
</nav>
)
}
renderItem(name) {
let cmd = this.props.commands[name]
if (cmd.name.indexOf(this.props.query) === -1) {
return null;
}
var className = "";
if (this.props.active && cmd.name === this.props.active) {
className = "active";
return null
}
let className = this.props.active && cmd.name === this.props.active ? "active" : ""
return (
<li key={cmd.name}>
<Link to={"/cmd/" + cmd.name} className={className}>{cmd.name}</Link>
</li>
);
})}
</ul>
</nav>
);
)
}
}

View File

@ -1,75 +1,75 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Timestamp from './timestamp.js';
import { api, httpGET, httpStreamGET } from '../http.js';
import './output.css';
import Timestamp from './timestamp.js'
import { api, httpGET, httpStreamGET } from '../http.js'
import './output.css'
export default class Output extends Component {
constructor(props) {
super(props);
super(props)
this.state = {
job: null,
xhr: null
};
}
}
componentDidMount() {
let jobID = this.props.jobID;
let jobID = this.props.jobID
if (jobID !== null) {
this.loadCommandLog(jobID);
this.loadJobDetails(jobID);
this.loadCommandLog(jobID)
this.loadJobDetails(jobID)
}
}
componentWillUnmount() {
if (this.state.xhr !== null) {
this.state.xhr.abort();
this.state.xhr.abort()
}
}
loadJobDetails(id) {
if (id === null) {
return;
return
}
httpGET(api("/jobs/" + id),
(status, body) => {
this.setState({job: JSON.parse(body)});
this.setState({job: JSON.parse(body)})
},
(error) => {
console.log("Failed to load job details:", error);
console.log("Failed to load job details:", error)
}
);
)
}
loadCommandLog(id) {
if (id === null || this.state.xhr !== null) {
return;
return
}
let xhr = httpStreamGET(api("/jobs/" + id + "/log"),
(chunk) => { // Progress
let target = this.refs["output"];
target.innerHTML += chunk.replace(/\n/g, "<br/>");
this.autoScroll();
let target = this.refs["output"]
target.innerHTML += chunk.replace(/\n/g, "<br/>")
this.autoScroll()
},
(status) => { // Complete
// Request cancelled
if (status === 0) {
return;
return
}
// Reload job details
this.setState({xhr: null});
this.loadJobDetails(id);
this.setState({xhr: null})
this.loadJobDetails(id)
},
(error) => {
let target = this.refs["output"];
target.innerHTML = "Failed to fetch command log: "+ error;
let target = this.refs["output"]
target.innerHTML = "Failed to fetch command log: "+ error
}
);
this.setState({xhr: xhr});
)
this.setState({xhr: xhr})
}
autoScroll() {
@ -77,32 +77,28 @@ export default class Output extends Component {
}
render() {
var outputClass = "output";
if (this.state.job) {
outputClass += " visible";
}
let className = this.state.job ? "output visible" : "output"
return (
<div>
{this.renderJobDetails()}
<div ref="output" className={outputClass}></div>
<div ref="output" className={className}></div>
</div>
);
)
}
renderJobDetails() {
let details = this.state.job;
let details = this.state.job
if (!details) {
return (<div></div>);
return null
}
// let shortID = details.id.substring(0, 8);
var state = details.state;
state = state.charAt(0).toUpperCase() + state.substr(1);
// let shortID = details.id.substring(0, 8)
var state = details.state
state = state.charAt(0).toUpperCase() + state.substr(1)
var args;
var args
if (details.args !== "") {
args = <span className="args">{details.args}</span>;
args = <span className="args">{details.args}</span>
}
return (
<div className="job-details full">
@ -126,22 +122,25 @@ export default class Output extends Component {
{this.renderStarted()}
{this.renderFinished()}
</div>
);
)
}
renderStarted() {
let details = this.state.job;
let details = this.state.job
return (
<div className="item started_at">
<div className="name">Started</div>
<div className="val"><Timestamp date={details.started_at} relative={details.finished_at === null} /></div>
</div>
);
)
}
renderFinished() {
let details = this.state.job;
if (details.finished_at !== null) {
let details = this.state.job
if (details.finished_at === null) {
return null
}
return [
<div className="item finished_at" key="finished_at">
<div className="name">Finished</div>
@ -151,9 +150,6 @@ export default class Output extends Component {
<div className="name">Took</div>
<div className="val"><Timestamp from={details.started_at} until={details.finished_at} /></div>
</div>
];
} else {
return null;
}
]
}
}

View File

@ -1,46 +1,52 @@
import React, { Component } from 'react';
import React, { Component } from 'react'
import { api, httpGET } from '../http.js';
import './user.css';
import { api, httpGET } from '../http.js'
import './user.css'
export default class User extends Component {
constructor(props) {
super(props);
this.state = {user: undefined};
super(props)
this.state = {user: undefined}
}
componentDidMount() {
if (this.props.id === undefined || this.props.id === null) {
return;
if (!this.props.id) {
return
}
httpGET(api("/users/"+ this.props.id),
(status, body) => {
this.setState({user: JSON.parse(body)});
this.setState({user: JSON.parse(body)})
},
(error) => {
console.log("Failed to load user details:", error);
console.log("Failed to load user details:", error)
}
);
)
}
render() {
if (this.props.id === undefined || this.props.id === null || this.state.user === undefined) {
return null;
} else if (this.state.user === null) {
let shortID = this.props.id.substring(0, 8);
return (
<div className="user-details">
User
<div className="user-id">{shortID}</div>
</div>
);
} else {
let details = this.state.user;
let details = this.state.user
if (!this.props.id || details === undefined) {
return null
}
if (details === null) {
return this.renderUnknownUser()
}
return (
<div className="user-details">
<img src={details.picture} alt={details.name +" picture"} />
<div className="name">{details.name}</div>
</div>
);
)
}
renderUnknownUser() {
let shortID = this.props.id.substring(0, 8)
return (
<div className="user-details">
User
<div className="user-id">{shortID}</div>
</div>
)
}
}