Created
May 30, 2017 05:13
-
-
Save RedDevilHat/bb4d47fecfc07a15285bf370d9e2054d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {observable, computed, action, extendObservable} from 'mobx'; | |
import './App.css'; | |
import FileInput from 'react-file-input'; | |
import React, {Component} from 'react'; | |
import {inject, observer} from 'mobx-react'; | |
import {Link} from 'react-router'; | |
import Table from 'react-json-table'; | |
import {Modal, Button, ProgressBar} from 'react-bootstrap'; | |
import NavBar from '../Layout/NavBar'; | |
let XLSX = require('xlsx'); | |
const App = inject('routing', 'UserStore')(observer(class App extends Component { | |
constructor(props, context) { | |
super(props, context); | |
this.state = {excel: null}; | |
this.setState({showModal: false}); | |
this.setState({file: null}); | |
} | |
close = () => { | |
this.setState({showModal: false}); | |
}; | |
open = (e, column) => { | |
this.setState({showModal: true}); | |
this.setState({column: column}); | |
}; | |
load = () => { | |
return ( | |
<div className="loader">Loading...</div> | |
) | |
}; | |
render = () => { | |
const {location, push, goBack} = this.props.routing; | |
const {UserStore} = this.props; | |
if (!UserStore.me.isAuth) { | |
push('/login') | |
} | |
if (this.state.excel !== null) { | |
const items = this.prepareJson(); | |
return ( | |
<div> | |
<NavBar/> | |
<div> | |
<form> | |
</form> | |
</div> | |
<div className="table-responsive"> | |
<Table rows={items} | |
className="table-hover table-bordered table-condensed" | |
headerClass="alert" | |
onClickHeader={this.open}/> | |
</div> | |
<Modal show={this.state.showModal} onHide={this.close}> | |
<Modal.Header closeButton> | |
<Modal.Title>{this.state.column}</Modal.Title> | |
</Modal.Header> | |
<Modal.Body> | |
</Modal.Body> | |
<Modal.Footer> | |
<Button onClick={this.close}>Close</Button> | |
</Modal.Footer> | |
</Modal> | |
</div> | |
) | |
} else { | |
return ( | |
<div> | |
<NavBar/> | |
<form className="form-horizontal" method="post" | |
action="http://mercadoserver.local/api/compines/price"> | |
<div className="form-group"> | |
<label htmlFor="excel" className="col-sm-2 control-label">Price</label> | |
<div className="form-group"> | |
<div className="col-sm-8"> | |
<FileInput name="excel" | |
accept=".xls,.xlsx" | |
placeholder="Select excel price..." | |
className="form-control" | |
onChange={this.handleFiles} | |
id="excel"/> | |
</div> | |
</div> | |
</div> | |
</form> | |
</div> | |
); | |
} | |
} | |
handleFiles = (e) => { | |
let files = e.target.files; | |
let i, f; | |
for (i = 0; i != files.length; ++i) { | |
f = files[i]; | |
this.state.file = f; | |
let reader = new FileReader(); | |
let name = f.name; | |
let loaded = 0; | |
let total = files.length; | |
reader.onload = (e) => { | |
let data = e.target.result; | |
loaded++; | |
let workbook; | |
workbook = XLSX.read(data, {type: 'binary'}); | |
this.setState({excel: workbook}); | |
}; | |
reader.readAsBinaryString(f); | |
} | |
}; | |
prepareJson = (list = 0) => { | |
let SheetsNames = this.state.excel.SheetNames; | |
let Sheet = this.state.excel.Sheets[SheetsNames[list]]; | |
return XLSX.utils.sheet_to_json(Sheet, {range: 'A1:W5', header: 'A'}); | |
}; | |
})); | |
export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment