Commit 01453233 authored by charlie-ablett's avatar charlie-ablett

Rename API component, fix execution hiccup, add breadcrumbs

parent bfc2c77a
......@@ -84,7 +84,8 @@
"keywords:": [
"file-conversion",
"open-source",
"FOSS"
"FOSS",
"publishing"
],
"repository": {
"type": "git",
......
......@@ -17,7 +17,7 @@ export function fetchSignIn(email, password, appState) {
return function(dispatch) {
dispatch({type: types.SIGN_IN_REQUEST});
fetch(settings.apiBaseUrl + '/api/auth/sign_in', {
fetch(`${settings.apiBaseUrl}/api/auth/sign_in`, {
method: 'POST',
headers: api_headers,
body: JSON.stringify({
......@@ -79,7 +79,7 @@ export function fetchSignOut(appState) {
const { authToken, tokenType, client, expiry, uid } = appState.session;
fetch(settings.apiBaseUrl + '/api/auth/sign_out', {
fetch(`${settings.apiBaseUrl}/api/auth/sign_out`, {
method: 'DELETE',
headers: {
'Accept': 'application/json;application/vnd.ink.v1',
......
......@@ -14,7 +14,7 @@ export function executeRecipe(recipe_id, form_data, signedIn, authToken, tokenTy
return function(dispatch) {
dispatch({type: actions.EXECUTE_RECIPE_REQUEST});
fetch(settings.apiBaseUrlBaseURL + '/api/recipes/${recipe_id}/execute', {
fetch(`${settings.apiBaseUrl}/api/recipes/${recipe_id}/execute`, {
method: 'POST',
headers: {
'Accept': 'application/json;application/vnd.ink.v1',
......@@ -73,7 +73,7 @@ export function getRecipe(recipe_id, appState) {
return function(dispatch) {
dispatch({type: actions.GET_RECIPE_REQUEST});
fetch(settings.apiBaseUrl + '/api/recipes/${recipe_id}/', {
fetch(`${settings.apiBaseUrl}/api/recipes/${recipe_id}/`, {
method: 'GET',
headers: {
'Accept': 'application/json;application/vnd.ink.v1',
......@@ -128,7 +128,7 @@ export function getAllRecipesWithTokens(signedIn, authToken, tokenType, client,
return function(dispatch) {
dispatch({type: actions.GET_ALL_RECIPES_REQUEST});
fetch(settings.apiBaseUrl + '/api/recipes', {
fetch(`${settings.apiBaseUrl}/api/recipes`, {
method: 'GET',
headers: {
'Accept': 'application/json;application/vnd.ink.v1',
......
......@@ -17,15 +17,15 @@ export class ConversionDetail extends Component {
renderOutputFileLink(output_file_path, handleOutputFileDownload) {
return(
<a href="#" onClick={handleOutputFileDownload}>Conversion Result <span className="fa fa-download"/></a>
<a href="#" onClick={handleOutputFileDownload}>Processed Result <span className="fa fa-download"/></a>
);
}
renderTitle() {
let { conversion } = this.props;
const success_or_failure = conversion.successful === true ? "Successful" : "Failed";
const time_string = this.display(conversion.executed_at);
return(`${success_or_failure} conversion of ${conversion.input_file_name} (${time_string})`);
let { result } = this.props;
const success_or_failure = result.successful === true ? "Successful" : "Failed";
const time_string = this.display(result.executed_at);
return(`${success_or_failure} processing of ${result.input_file_name} (${time_string})`);
}
renderLinkText(file_name) {
......@@ -35,20 +35,20 @@ export class ConversionDetail extends Component {
return(<span>{file_name} <span className="fa fa-download"/></span>);
}
conversionResult() {
let { conversion } = this.props;
let className = conversion.successful ? 'successful' : 'failed';
let status = conversion.successful ? 'Successful' : 'Failed';
executionResult() {
let { result } = this.props;
let className = result.successful ? 'successful' : 'failed';
let status = result.successful ? 'Successful' : 'Failed';
return(<p className={className}>{this.renderTitle()}</p>);
}
renderConversionResult() {
let { conversion } = this.props;
renderExecutionResult() {
let { result } = this.props;
if(conversion.successful) {
if(result.successful) {
return(
<span>
Result: {this.renderOutputFileLink(conversion.output_file_path, this.handleOutputFileDownload)}
Result: {this.renderOutputFileLink(result.output_file_path, this.handleOutputFileDownload)}
</span>
);
}
......@@ -59,25 +59,25 @@ export class ConversionDetail extends Component {
handleInputFileDownload = (e) => {
e.preventDefault();
const { conversion, dispatch, appState } = this.props;
downloadFile(conversion.input_file_path, conversion.input_file_name, appState);
const { result, dispatch, appState } = this.props;
downloadFile(result.input_file_path, result.input_file_name, appState);
}
handleOutputFileDownload = (e) => {
e.preventDefault();
const { conversion, dispatch, appState } = this.props;
downloadFile(conversion.output_file_path, `converted_${conversion.input_file_name}`, appState);
const { result, dispatch, appState } = this.props;
downloadFile(result.output_file_path, `result_${result.input_file_name}`, appState);
}
render() {
const { conversion, dispatch, appState } = this.props;
const { result, dispatch, appState } = this.props;
return (
<div className="conversion-result-border">
{this.conversionResult()}
{this.executionResult()}
<p>Original: <a href="/download_file" onClick={this.handleInputFileDownload}>{this.renderLinkText(conversion.input_file_name)}</a>
<p>Original: <a href="/download_file" onClick={this.handleInputFileDownload}>{this.renderLinkText(result.input_file_name)}</a>
<br/>
{this.renderConversionResult()}
{this.renderExecutionResult()}
</p>
<table className="table">
<thead>
......@@ -89,7 +89,7 @@ export class ConversionDetail extends Component {
</tr>
</thead>
<tbody>
{conversion.conversion_steps.map(step => <ConversionDetailStep key={step.id} step={step} dispatch={dispatch} appState={appState} />)}
{result.process_steps.map(step => <ConversionDetailStep key={step.id} step={step} dispatch={dispatch} appState={appState} />)}
</tbody>
</table>
</div>
......@@ -99,7 +99,7 @@ export class ConversionDetail extends Component {
ConversionDetail.propTypes = {
dispatch: PropTypes.func,
conversion: PropTypes.object.isRequired,
result: PropTypes.object.isRequired,
appState: PropTypes.object
};
......
......@@ -22,17 +22,17 @@ export class ConversionFileForm extends Component {
render() {
let { recipe } = this.props;
if(recipe && recipe.executeRecipeInProgress) {
return(
<span className="grey">
<div>
<input type="file-picker file-picker--disabled" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
<br/>
<input type="file-button file-button--disabled" disabled><i className="fa fa-spinner fa-pulse grey fa-lg"></i> Converting...</input>
</div>
</span>
);
}
// if(recipe && recipe.executeRecipeInProgress) {
// return(
// <span className="grey">
// <div>
// <input type="file-picker file-picker--disabled" label="Input File" ref="input_file" id="input_file" help="Select a file to convert!" />
// <br/>
// <input type="file-button file-button--disabled" disabled><i className="fa fa-spinner fa-pulse grey fa-lg"></i> Converting...</input>
// </div>
// </span>
// );
// }
return(
<div className="choose-file-container">
......
......@@ -14,7 +14,7 @@ export class ConversionList extends Component {
if(_.isNull(session.user)) {
return(
<div className="light-border disabled">
<h4>File conversions <span className="fa fa-file"/></h4>
<h4>Finished process chains<span className="fa fa-file"/></h4>
</div>
);
}
......@@ -23,10 +23,10 @@ export class ConversionList extends Component {
return (
<div>
<div className="conversion-result-border__top">
{recipe.conversion_chains.map(conversion =>
{recipe.process_chains.map(chain =>
<ConversionDetail
key={conversion.id}
conversion={conversion}
key={chain.id}
result={chain}
/>)
}
</div>
......@@ -36,7 +36,7 @@ export class ConversionList extends Component {
return(
<div className="light-border disabled">
<h4>File conversions</h4>
<h4>Finished process chains</h4>
<p className="help-block disabled">No recipe selected</p>
</div>
);
......
......@@ -4,11 +4,11 @@ const SignInButton = (props) => {
if(props.authInProgress === false) {
return (
<button className="action-button" onClick={props.handleSignIn}>sign in</button>
<button className="action-button" type="submit">sign in</button>
);
} else {
return (
<button className="action-button action-button--disabled" onClick={props.handleSignIn}>signing in...</button>
<button className="action-button action-button--disabled">signing in...</button>
);
}
};
......
......@@ -20,19 +20,21 @@ export class SignInForm extends React.Component {
const { appState } = this.props;
return (
<div className="sign-in-form-container">
<div className="form-input-container">
<div className="form-input-labels">
<div className="form-label">user</div>
<div className="form-label">password</div>
<form onSubmit={this.handleSignIn}>
<div className="form-input-container">
<div className="form-input-labels">
<div className="form-label">user</div>
<div className="form-label">password</div>
</div>
<div className="form-input-boxes">
<input type="text" ref="email" className="input input--sign-in" />
<input type="password" ref="password" className="input input--sign-in" />
</div>
</div>
<div className="form-input-boxes">
<input type="text" ref="email" className="input input--sign-in" />
<input type="password" ref="password" className="input input--sign-in" />
<div className="sign-in-button-container">
<SignInButton handleSignIn={this.handleSignIn} authInProgress={appState.authInProgress} />
</div>
</div>
<div className="sign-in-button-container">
<SignInButton handleSignIn={this.handleSignIn} authInProgress={appState.authInProgress} />
</div>
</form>
</div>
);
}
......
......@@ -51,9 +51,9 @@ class HomePage extends Component {
<Header
appState={appState}
/>
<AlertList
alerts={appState.alerts} />
<div className="content-container">
<AlertList
alerts={appState.alerts} />
<h1>INK alpha</h1>
<h2>by the Collaborative Knowledge Foundation</h2>
<h3>Here are some things to click on:</h3>
......
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { browserHistory, Link } from 'react-router';
import _ from 'lodash';
import * as actions from '../../actions/authenticationActions';
......@@ -70,9 +70,15 @@ class RecipeIndexPage extends Component {
<Header
appState={appState}
/>
<AlertList
alerts={appState.alerts} />
<div className="content-container">
<div className="breadcrumb-container">
<Link to="/" className="breadcrumb">Home</Link>
<span className="breadcrumb-divider">&gt;&gt;</span>
<Link to="/recipes" className="breadcrumb">Recipes</Link>
</div>
<AlertList
alerts={appState.alerts} />
{this.pageContent(appState)}
</div>
</div>
......
......@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { Link } from 'react-router';
import * as actions from '../../actions/recipeActions';
import _ from 'lodash';
......@@ -54,7 +55,11 @@ class RecipeShowPage extends Component {
return(recipe);
}
renderConversionList(recipe) {
currentRecipeLink(recipe) {
return(`/recipes/${recipe.id}`);
}
renderExecutionList(recipe) {
let { session } = this.props.appState;
if(recipe){
return(
......@@ -68,7 +73,7 @@ class RecipeShowPage extends Component {
}
}
content(recipe) {
content(recipe, appState) {
if (!recipe) {
return (
<div>Recipe loading...</div>
......@@ -77,6 +82,17 @@ class RecipeShowPage extends Component {
return (
<div className="content-container">
<div className="breadcrumb-container">
<Link to="/" className="breadcrumb">Home</Link>
<span className="breadcrumb-divider">&gt;&gt;</span>
<Link to="/recipes" className="breadcrumb">Recipes</Link>
<span className="breadcrumb-divider">&gt;&gt;</span>
<Link to={this.currentRecipeLink(recipe)} className="breadcrumb">{recipe.name}</Link>
</div>
<AlertList
alerts={appState.alerts} />
<div className="recipe-detail-view">
<h1>Recipe - {recipe.name}</h1>
<h4>{recipe.description}</h4>
......@@ -95,8 +111,8 @@ class RecipeShowPage extends Component {
</div>
</div>
<div className="recipe-conversion-history-container">
<h3>Previous conversions ({recipe.times_executed})</h3>
{this.renderConversionList(recipe)}
<h3>Previous processes ({recipe.times_executed})</h3>
{this.renderExecutionList(recipe)}
</div>
</div>
</div>
......@@ -113,10 +129,7 @@ class RecipeShowPage extends Component {
<Header
appState={appState}
/>
<AlertList
alerts={appState.alerts} />
{this.content(recipe)}
{this.content(recipe, appState)}
</div>
);
}
......
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<title>INK File Convertifier</title>
<title>INK - Ingest 'n' Konvert</title>
</head>
<body>
<div id="app"></div>
......
......@@ -17,6 +17,7 @@
// molecules
@import "molecules/alerts.sass"
@import "molecules/breadcrumbs.sass"
@import "molecules/conversion-result.sass"
@import "molecules/file-chooser.sass"
@import "molecules/logo.sass"
......
.breadcrumb
color: $studio
padding: $spacing/2
.breadcrumb-divider
color: $black
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment