Commit 1784e094 authored by dcoudrin's avatar dcoudrin
Browse files

gui not completed

parent c2971907
{
"name": "gui",
"version": "1.0.0",
"description": "",
"main": "src/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-amd": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"lodash": "^4.17.5",
"react-draggable": "^3.0.5",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11"
},
"dependencies": {
"phosphor-gridpanel": "^1.0.0-beta.1",
"phosphor-widget": "^1.0.0-rc.1",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-autocomplete": "^1.8.1",
"react-bootstrap": "^0.32.1",
"react-burger-menu": "^2.4.2",
"react-dock": "^0.2.4",
"react-dom": "^16.2.0",
"react-grid-layout": "^0.16.6",
"react-input-completion": "^1.0.2",
"react-resizable": "^1.7.5",
"react-tabs": "^2.2.1",
"react-transition-group": "^2.3.0",
"requirejs": "^2.3.5",
"styled-components": "^3.2.3"
}
}
import React from 'react';
import PropTypes from 'prop-types';
import Menu from './components/menu/Menu'
import Grid from './components/grid/Grid'
import Editor from './components/edition/Editor'
import { menu } from "../../biocham_kernel/cmd_tree"
export default class App extends React.Component {
static propTypes = {
menu: PropTypes.object.isRequired,
}
static defaultProps = {
//the tree.tree object contains all the commands, etc
menu: menu
}
initLayout = () => {
}
render() {
return (
<div style={{width: '100%'}}>
<Grid>
</Grid>
</div>
)
}
}
import React, { Component } from 'react';
export default class Edition extends Component {
render () {
const commands = this.props.items;
let commandsInput = (
<div>
<span className="drag-handle">{this.props.name}</span>
<br/>
{commands.map((command) => (<label>{command.name} : <input/><br/></label>))}
</div>
);
return (
<div>
{commandsInput}
</div>
)
}
}
import React, { Component } from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';
import Editor from '../Edition/Editor';
const ResponsiveGridLayout = WidthProvider(Responsive);
export default class Grid extends Component {
static defaultProps = {
className: "layout",
cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
rowHeight: 80,
draggableHandle: '.drag-handle',
onLayoutChange: function () {},
}
state = {
layouts: {
lg: [
{i: 'initial_state', x: 0, y: 0, w: 4, h:5},
{i: 'parameters', x: 0, y: 3, w: 4, h:2},
{i: 'numerical_simulation', x: 0, y: 6, w: 4, h:2}]
},
parameters: [],
molecules: [],
reactions: []
}
generateLayout = () => {
return (this.state.layouts.lg.map((lg) => (
<div key={lg.i}>
<Editor items={[{name: "input"}, {name: "input"}]} name={"Drag me here"}/>
</div>
)))
}
componentDidMount = () => {
}
handleClick = () => {
}
addParam = () => {
const parameterName = document.getElementById('param-id');
const parameterValue = document.getElementById('param-value');
let newParam = {name: parameterName.value, value: parameterValue.value};
this.setState({parameters: [...this.state.parameters, newParam]});
parameterValue.value = '';
parameterName.value = '';
}
addMolecule = () => {
const molName = document.getElementById("molecule");
this.setState({molecules: [...this.state.molecules, molName.value]})
molName.value = '';
}
addReaction = () => {
const reacName = document.getElementById("reaction");
this.setState({reactions: [...this.state.reactions, reacName.value]})
reacName.value = '';
}
render () {
return (
<ResponsiveGridLayout {...this.props} layouts={this.state.layouts}>
<div key={"initial_state"} className={'scrollable'}>
<div className={"drag-handle"}>Molecules and reactions</div><br/>
<div>
<label>Molecule : <input type={"text"} id={"molecule"}/></label>
<button onClick={this.addMolecule}>Add</button><br/>
<label>Reaction : <input type={"text"} id={"reaction"}/></label>
<button onClick={this.addReaction}>Add</button><br/>
<h5>List molecules</h5>
<ul>
{this.state.molecules.map( (mol) =>
<li>
{mol}
</li>)}
</ul><br/>
<h5>List reactions</h5>
<ul>
{this.state.reactions.map( (mol) =>
<li>
{mol}
</li>)}
</ul>
</div>
</div>
<div key={"parameters"} className={'scrollable'}>
<div className={"drag-handle"}>Parameters</div><br/>
<div>
<label>Parameter : <input id={"param-id"} type={"text"}/> </label>
<label>Value : <input id={"param-value"} type={"number"}/></label>
<button onClick={this.addParam}>Add</button><br/>
<h5>List parameters</h5>
<ul>
{this.state.parameters.map( (param) =>
<li>
Parameter: <strong>{param.name} </strong> value : {param.value}
</li>)}
</ul>
</div>
</div>
</ResponsiveGridLayout>
)
}
}
import React, { Component } from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import Chapter from "./Chapter"
export default class Menu extends Component {
render () {
const items = this.props.menu.map(item => {
return (<Chapter id={item.id} item={item} handler={this.props.handler}/>)
})
return (
<BurgerMenu>
{items}
</BurgerMenu>
)
}
}
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