Skip to content

Commit

Permalink
add general files to setup the workflow in the app
Browse files Browse the repository at this point in the history
  • Loading branch information
kisna72 committed Mar 25, 2020
1 parent a1f83d2 commit 374095b
Show file tree
Hide file tree
Showing 14 changed files with 287 additions and 66 deletions.
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "jssp-frontend/src/sharedComponents"]
path = jssp-frontend/src/sharedComponents
url = [email protected]:kisna72/sharedComponents.git
2 changes: 2 additions & 0 deletions jssp-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
"node-sass": "^4.13.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-vis": "^1.11.7"
},
Expand Down
14 changes: 9 additions & 5 deletions jssp-frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { NavBar } from './components/navbar';
import TwoDPlot from './TwoDPlot';

// Create a new instance of JSSPProblemInstance and assign jobs for water bottle plant.
const problem = new JSSPProblemInstance(4,6) // Instantiate with no data. j jobs and m machines.

const problem = new JSSPProblemInstance(5,6) // Instantiate with no data. j jobs and m machines.
/**
* Water Bottoling Plant that does 4 different types of water bottles.
* Job 0 - Spring Water 16oz
Expand All @@ -28,11 +29,13 @@ const problem = new JSSPProblemInstance(4,6) // Instantiate with no data. j jobs
*/
problem.jobs = [
// Read it as follows:
// first job can run on 2 machines. Machine 0 for time 10 OR Machine 5 for time 20, next it runs on 1 machine - machine 1 for time 10 etc.
[2, 0, 10, 5, 20, 1, 1, 10, 1, 2, 10, 1, 3, 10, 1, 4, 8, 1, 4, 10, 1, 4, 10], // first job can run in 1 machine.
[2, 0, 50, 5, 30, 1, 1, 15, 1, 2, 10, 1, 3, 10, 1, 4, 16],
// first job -> first step can run on 2 machines. Machine 0 for time 10 OR Machine 5 for time 20, next it runs on 1 machine - machine 1 for time 10 etc.
[2, 0, 10, 5, 20, 1, 1, 10, 1, 2, 10, 1, 3, 10, 1, 4, 8, 1, 4, 10, 1, 4, 10],
// second Job -> first step can run on 2 machines. Machine 0 for time 50 OR machine 5 for time 30, second step on 1 machine - machine 1 for 15 times
[2, 0, 50, 5, 30, 1, 1, 15, 1, 2, 10, 1, 3, 10,],// 1, 4, 16], // Very Very Flexible...
[2, 0, 30, 5, 50, 1, 1, 12, 1, 2, 20, 1, 3, 10, 1, 4, 16],
[2, 0, 15, 5, 20, 1, 1, 30, 1, 2, 20, 1, 3, 10, 1, 4, 10],
[1, 2, 120]
]

// Infer number of machines the job needs to run based on job definition.
Expand All @@ -41,7 +44,7 @@ problem.jobs.forEach(jobDefArr => {
let numMachines = 0
let nextIndexToCheck = 0;
for(let i = 0; i < jobDefArr.length; i++ ){
if(i == nextIndexToCheck){
if(i === nextIndexToCheck){
numMachines += 1
nextIndexToCheck = i + jobDefArr[i]*2 + 1
}
Expand Down Expand Up @@ -87,6 +90,7 @@ class App extends React.Component {
}
}
startJobShopWorker = () => {
console.log("started worker")
const workerInstance = new Worker(WebWorkerScript);

workerInstance.addEventListener("message", e => {
Expand Down
6 changes: 6 additions & 0 deletions jssp-frontend/src/JSSP.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/**
* Returns a new instance of JSSP Problem Instance.
* @param {*} n number of Jobs
* @param {*} m number of Machines
* @param {*} mbar Don't Use
*/
function JSSPProblemInstance(n,m,mbar){
this.numJobs = n;
this.numMachines = m;
Expand Down
11 changes: 11 additions & 0 deletions jssp-frontend/src/JobSetup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

class JobSetup extends React.Component {


render(){
return(<p>I M Job Setup </p>)
}
}

export default JobSetup
78 changes: 78 additions & 0 deletions jssp-frontend/src/Pages/Categories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';
import { TextInput } from '../sharedComponents/react/Input';
import '../styles/kr-card.css';
import '../styles/kr-form.css';
/**
*
*/
class Categories extends React.Component {
constructor(props) {
super(props)
this.state = {
name:''
}
}
handleChange = (event) =>{
this.setState({
name:event.target.value
})
console.log(event.target.value)
}
handleSubmit = (event) => {
event.preventDefault()
this.props.createCategory({
id:2,
name:this.state.name,
machines:[]
})
this.setState({
name:''
})
}
render() {
return (
<div className="machines-wrapper__categories ml-3 kr-card">

<h3>Categories</h3>
<table>
<thead>
{this.props.categories.length > 0 &&
<tr>
<th>Id</th>
<th>Name</th>
</tr>
}
</thead>
<tbody>
{this.props.categories.map(category => {
return (
<tr>
<td>{category.id}</td>
<td>{category.name}</td>
</tr>
)
})}
</tbody>
</table>
<p className="machines-wrapper__categories--intro">
Please Enter a new category below. Once saved,
the categories will appear as a selection option
in each machine. You'll have to individually apply
new categories to existing machines.
</p>
<form onSubmit={this.handleSubmit}>
<TextInput
id="category-input"
value={this.state.name}
onChange={this.handleChange}
label="Enter new category"
smallLabel="You will be able to apply each category to multiple machines"
/>
<button type="submit" className="btn btn-primary" disabled={this.state.name === ""}>Add Category</button>
</form>
</div>
)
}
}

export default Categories
65 changes: 65 additions & 0 deletions jssp-frontend/src/Pages/Machines.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';
import '../styles/machines.scss';
import { randomID } from '../helpers';
import { TextInput } from '../sharedComponents/react/Input';

class Machines extends React.Component {
constructor(props){
super(props) //props gets the machines object.
this.state = {
name:''
}
}
handleChange = (event) => {
this.setState({name:event.target.value})
}
addMachine = (event) => {
event.preventDefault();
// CODE to call the API.
this.props.createMachine({
name:this.state.name,
id: randomID()
},
this.setState({
name:''
})
);

console.log("Submitting a new machine with name ", this.state.name)
}
render(){
return (
<div className="machines-wrapper">
<div className="machines-wrapper__main">
<h3 className="machines-wrapper__main__title">Machines</h3>
<table>
<tbody>
{this.props.machines.map(machine => {
return (
<tr>
<td>{machine.id}</td>
<td>{machine.name}</td>
</tr>)
})}
</tbody>
</table>
<p>
Please enter the machine below. Each machine must have a name.
Once all machines are entered, you can create categories and apply categories to each machines.
</p>
<form class="" onSubmit={this.addMachine}>
<TextInput
id="machine-name"
label="Name for your machine"
smallLabel="Give your machine a recognizable name"
value={this.state.name}
onChange={this.handleChange}
/>
<button type="submit" class="btn btn-primary mb-2" disabled={this.state.name === "" }>Add Machine</button>
</form>
</div>
</div>)
}
}

export default Machines
103 changes: 87 additions & 16 deletions jssp-frontend/src/factoryOptimizationApp.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import React from 'react';
import MainAppNavBar from './mainAppComponents/mainAppNavBar';
import Machines from './mainAppComponents/Machines';
import Machines from './Pages/Machines';
import Categories from './Pages/Categories';
import Jobs from './mainAppComponents/Jobs';
import Parameters from './mainAppComponents/Parameters';
import JobSetup from './JobSetup';
import App from './App';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
NavLink
} from "react-router-dom";
/**
* Main component that handles state of the solver, machines, jobs etc.
*/
Expand All @@ -14,11 +24,11 @@ class FactoryOptimizationApp extends React.Component {
this.state = {
activeMenu: 'Machines', // machine or jobs or params or solution
machines: [
{ id: 1, name: 'Water Bottle Expansion', categories: [1] },
{ id: 1, name: 'Water Bottle Expansion'},
{ id: 2, name: 'Water Cleaning' }
],
categories: [
{ id: 1, name: 'waterBottle' }
{ id: 1, name: 'Expansion', machines:[]}
],
jobs: [
{
Expand Down Expand Up @@ -49,16 +59,17 @@ class FactoryOptimizationApp extends React.Component {

/**
* CRUD Operations for machines (minus read obvs)
*
*/
createMachine = (machine) => {
this.setState({
createMachine = async (machine) => {
await this.setState({
machines: [...this.state.machines,machine]
})
}
updateMachine = (machine) => {
// get machine by id and replace its value with the value contained in machine and save in state.
const machines = this.state.machines
for(let i; i < machines.length; i++){
for(let i =0 ; i < machines.length; i++){
if(machines[i].id === machine.id){
machines[i] = [...machine]
break;
Expand All @@ -70,7 +81,7 @@ class FactoryOptimizationApp extends React.Component {
}
deleteMachine = (machine) => {
const machines = this.state.machines
for(let i; i < machines.length; i++){
for(let i =0; i < machines.length; i++){
if(machines[i].id === machine.id){
delete machines[i]
break;
Expand All @@ -81,24 +92,84 @@ class FactoryOptimizationApp extends React.Component {
})
}

/**
* CRUD Operations for Categories
*/
createCategory = (category) => {
this.setState({
categories: [...this.state.categories, category]
})
console.log(category)
}
updateCategory = (category) => {
// get machine by id and replace its value with the value contained in machine and save in state.
const categories = [...this.state.categories]
for(let i =0 ; i < categories.length; i++){
if(categories[i].id === category.id){
categories[i] = [...category]
break;
}
}
this.setState({
categories: [...categories]
})

}

/**
* CRUD Operations for Jobs
*/
createJob = (job) => {

console.log("create job")
}


render(){
render() {
return (
<>
<MainAppNavBar handleClick={this.handleNavBarClick} activeMenu={this.state.activeMenu}/>
{this.state.activeMenu === "Machines" ? <Machines createMachine updateMachine deleteMachine /> : null}
{this.state.activeMenu === "Jobs" ? <Jobs /> : null}
{this.state.activeMenu === "Parameters" ? <Parameters /> : null}
</>
<Router>
<nav>
<ul className='factory-navbar'>
<NavLink to="">
<li className='factory-navbar__menu-item'>Machines</li>
</NavLink>
<NavLink to="jobs">
<li className='factory-navbar__menu-item'>Jobs</li>
</NavLink>
<NavLink to="parameters">
<li className='factory-navbar__menu-item'>Solution Parameters</li>
</NavLink>
<NavLink to="solution">
<li className='factory-navbar__menu-item'>Solve</li>
</NavLink>
</ul>
</nav>
<Switch>
<Route path="/" exact={true}>
<Machines
createMachine={this.createMachine}
updateMachine={this.updateMachine}
deleteMachine={this.deleteMachine}
machines={this.state.machines}
/>
<Categories
categories={this.state.categories}
machines={this.state.machines}
createCategory={this.createCategory}
/>
</Route>
<Route path="/jobs">
<Jobs />
</Route>
<Route path="/parameters">
<Parameters />
</Route>
<Route path="/solution">
<App/>
</Route>
</Switch>
</Router>
)
}
}
};

export default FactoryOptimizationApp
10 changes: 10 additions & 0 deletions jssp-frontend/src/helpers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
var randomID = function () {
// Math.random should be unique because of its seeding algorithm.
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
return '_' + Math.random().toString(36).substr(2, 9);
};

export {
randomID
}
Loading

0 comments on commit 374095b

Please sign in to comment.