react-bootstrap#ProgressBar JavaScript Examples
The following examples show how to use
react-bootstrap#ProgressBar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ContentUpgradeLayout.js From Edlib with GNU General Public License v3.0 | 5 votes |
|
ContentUpgradeLayout = ({
onClick,
libraries,
showConfirm,
onConfirm,
upgradeComplete,
onToggleConfirm,
onUndoUpgrade,
percentProgress,
inProgress,
translations,
selectedLibraryId,
}) => {
return (
<div className="upgradeVersionContainer">
{(upgradeComplete !== true && inProgress !== true) && (
<>
<FormGroup controlId="formControlsSelect">
<FormControl
componentClass="select"
onChange={onClick}
value={selectedLibraryId}
>
<option value="">{translations.selectVersion}</option>
{libraries.map((library, index) => {
return (
<option key={index} value={library.id}>{library.version}</option>
);
})}
</FormControl>
</FormGroup>
<ModalWindow
show={showConfirm}
onHide={onToggleConfirm}
header={
<div>
{translations.confirmation}
</div>
}
footer={
<div>
<Button onClick={onConfirm} bsStyle="success">
{translations.yes}
</Button>
<Button onClick={onToggleConfirm} bsStyle="danger">
{translations.no}
</Button>
</div>
}
>
{translations.upgradeConfirmation}
</ModalWindow>
</>
)}
{(inProgress === true || upgradeComplete === true) && (
<>
<ControlLabel>{translations.progress}</ControlLabel>
<ProgressBar
now={percentProgress}
label={`${percentProgress}%`}
/>
</>
)}
{upgradeComplete === true && (
<div className="contentupgrade-complete">
<div>{translations.undoTextHTML}</div>
<Button
bsStyle="danger"
onClick={onUndoUpgrade}
>
{translations.undo}
</Button>
</div>
)}
</div>
);
}
Example #2
| Source File: Dashboard.js From Purple-React with MIT License | 4 votes |
|
render () {
return (
<div>
<div className="proBanner">
<div>
<span className="d-flex align-items-center purchase-popup">
<p>Get tons of UI components, Plugins, multiple layouts, 20+ sample pages, and more!</p>
<a href="https://www.bootstrapdash.com/product/purple-react/?utm_source=organic&utm_medium=banner&utm_campaign=free-preview" rel="noopener noreferrer" target="_blank" className="btn btn-sm purchase-button ml-auto">Check Pro Version</a>
<i className="mdi mdi-close bannerClose" onClick={this.toggleProBanner}></i>
</span>
</div>
</div>
<div className="page-header">
<h3 className="page-title">
<span className="page-title-icon bg-gradient-primary text-white mr-2">
<i className="mdi mdi-home"></i>
</span> Dashboard </h3>
<nav aria-label="breadcrumb">
<ul className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">
<span></span>Overview <i className="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
</li>
</ul>
</nav>
</div>
<div className="row">
<div className="col-md-4 stretch-card grid-margin">
<div className="card bg-gradient-danger card-img-holder text-white">
<div className="card-body">
<img src={require("../../assets/images/dashboard/circle.svg")} className="card-img-absolute" alt="circle" />
<h4 className="font-weight-normal mb-3">Weekly Sales <i className="mdi mdi-chart-line mdi-24px float-right"></i>
</h4>
<h2 className="mb-5">$ 15,0000</h2>
<h6 className="card-text">Increased by 60%</h6>
</div>
</div>
</div>
<div className="col-md-4 stretch-card grid-margin">
<div className="card bg-gradient-info card-img-holder text-white">
<div className="card-body">
<img src={require("../../assets/images/dashboard/circle.svg")} className="card-img-absolute" alt="circle" />
<h4 className="font-weight-normal mb-3">Weekly Orders <i className="mdi mdi-bookmark-outline mdi-24px float-right"></i>
</h4>
<h2 className="mb-5">45,6334</h2>
<h6 className="card-text">Decreased by 10%</h6>
</div>
</div>
</div>
<div className="col-md-4 stretch-card grid-margin">
<div className="card bg-gradient-success card-img-holder text-white">
<div className="card-body">
<img src={require("../../assets/images/dashboard/circle.svg")} className="card-img-absolute" alt="circle" />
<h4 className="font-weight-normal mb-3">Visitors Online <i className="mdi mdi-diamond mdi-24px float-right"></i>
</h4>
<h2 className="mb-5">95,5741</h2>
<h6 className="card-text">Increased by 5%</h6>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-7 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<div className="clearfix mb-4">
<h4 className="card-title float-left">Visit And Sales Statistics</h4>
<div id="visit-sale-chart-legend" className="rounded-legend legend-horizontal legend-top-right float-right">
<ul>
<li>
<span className="legend-dots bg-primary">
</span>CHN
</li>
<li>
<span className="legend-dots bg-danger">
</span>USA
</li>
<li>
<span className="legend-dots bg-info">
</span>UK
</li>
</ul>
</div>
</div>
<Bar ref='chart' className="chartLegendContainer" data={this.state.visitSaleData} options={this.state.visitSaleOptions} id="visitSaleChart"/>
</div>
</div>
</div>
<div className="col-md-5 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Traffic Sources</h4>
<Doughnut data={this.state.trafficData} options={this.state.trafficOptions} />
<div id="traffic-chart-legend" className="rounded-legend legend-vertical legend-bottom-left pt-4">
<ul>
<li>
<span className="legend-dots bg-info"></span>Search Engines
<span className="float-right">30%</span>
</li>
<li>
<span className="legend-dots bg-success"></span>Direct Click
<span className="float-right">30%</span>
</li>
<li>
<span className="legend-dots bg-danger"></span>Bookmarks Click
<span className="float-right">40%</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 grid-margin">
<div className="card">
<div className="card-body">
<h4 className="card-title">Recent Tickets</h4>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th> Assignee </th>
<th> Subject </th>
<th> Status </th>
<th> Last Update </th>
<th> Tracking ID </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src={require("../../assets/images/faces/face1.jpg")} className="mr-2" alt="face" /> David Grey </td>
<td> Fund is not recieved </td>
<td>
<label className="badge badge-gradient-success">DONE</label>
</td>
<td> Dec 5, 2017 </td>
<td> WD-12345 </td>
</tr>
<tr>
<td>
<img src={require("../../assets/images/faces/face2.jpg")} className="mr-2" alt="face" /> Stella Johnson </td>
<td> High loading time </td>
<td>
<label className="badge badge-gradient-warning">PROGRESS</label>
</td>
<td> Dec 12, 2017 </td>
<td> WD-12346 </td>
</tr>
<tr>
<td>
<img src={require("../../assets/images/faces/face3.jpg")} className="mr-2" alt="face" /> Marina Michel </td>
<td> Website down for one week </td>
<td>
<label className="badge badge-gradient-info">ON HOLD</label>
</td>
<td> Dec 16, 2017 </td>
<td> WD-12347 </td>
</tr>
<tr>
<td>
<img src={require("../../assets/images/faces/face4.jpg")} className="mr-2" alt="face" /> John Doe </td>
<td> Loosing control on server </td>
<td>
<label className="badge badge-gradient-danger">REJECTED</label>
</td>
<td> Dec 3, 2017 </td>
<td> WD-12348 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-5 grid-margin stretch-card">
<div className="card">
<div className="card-body p-0 d-flex">
<div className="dashboard-custom-date-picker">
<DatePicker inline selected={this.state.startDate} onChange={this.handleChange}/>
</div>
</div>
</div>
</div>
<div className="col-lg-7 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Recent Updates</h4>
<div className="d-flex">
<div className="d-flex align-items-center mr-4 text-muted font-weight-light">
<i className="mdi mdi-account-outline icon-sm mr-2"></i>
<span>jack Menqu</span>
</div>
<div className="d-flex align-items-center text-muted font-weight-light">
<i className="mdi mdi-clock icon-sm mr-2"></i>
<span>October 3rd, 2018</span>
</div>
</div>
<div className="row mt-3">
<div className="col-6 pr-1">
<img src={require("../../assets/images/dashboard/img_1.jpg")} className="mb-2 mw-100 w-100 rounded" alt="face" />
<img src={require("../../assets/images/dashboard/img_4.jpg")} className="mw-100 w-100 rounded" alt="face" />
</div>
<div className="col-6 pl-1">
<img src={require("../../assets/images/dashboard/img_2.jpg")} className="mb-2 mw-100 w-100 rounded" alt="face" />
<img src={require("../../assets/images/dashboard/img_3.jpg")} className="mw-100 w-100 rounded" alt="face "/>
</div>
</div>
<div className="d-flex mt-5 align-items-start">
<img src={require("../../assets/images/faces/face3.jpg")} className="img-sm rounded-circle mr-3" alt="face" />
<div className="mb-0 flex-grow">
<h5 className="mr-2 mb-2">School Website - Authentication Module.</h5>
<p className="mb-0 font-weight-light">It is a long established fact that a reader will be distracted by the readable content of a page.</p>
</div>
<div className="ml-auto">
<i className="mdi mdi-heart-outline text-muted"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-xl-7 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Project Status</h4>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th> # </th>
<th> Name </th>
<th> Due Date </th>
<th> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Herman Beck </td>
<td> May 15, 2015 </td>
<td>
<ProgressBar variant="gradient-success" now={25}/>
</td>
</tr>
<tr>
<td> 2 </td>
<td> Messsy Adam </td>
<td> Jul 01, 2015 </td>
<td>
<ProgressBar variant="gradient-danger" now={75}/>
</td>
</tr>
<tr>
<td> 3 </td>
<td> John Richards </td>
<td> Apr 12, 2015 </td>
<td>
<ProgressBar variant="gradient-warning" now={90}/>
</td>
</tr>
<tr>
<td> 4 </td>
<td> Peter Meggik </td>
<td> May 15, 2015 </td>
<td>
<ProgressBar variant="gradient-primary" now={50}/>
</td>
</tr>
<tr>
<td> 5 </td>
<td> Edward </td>
<td> May 03, 2015 </td>
<td>
<ProgressBar variant="gradient-danger" now={50}/>
</td>
</tr>
<tr>
<td> 5 </td>
<td> Ronald </td>
<td> Jun 05, 2015 </td>
<td>
<ProgressBar variant="gradient-info" now={65}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-xl-5 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title text-white">Todo</h4>
<form className="add-items d-flex" onSubmit={this.addTodo}>
<input
type="text"
className="form-control h-auto"
placeholder="What do you need to do today?"
value={this.state.inputValue}
onChange={this.inputChangeHandler}
required />
<button type="submit" className="btn btn-gradient-primary font-weight-bold px-lg-4 px-3">Add</button>
</form>
<div className="list-wrapper">
<ul className="d-flex flex-column todo-list">
{this.state.todos.map((todo, index) =>{
return <ListItem
isCompleted={todo.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todo.id}
remove={() => this.removeTodo(index) }
>{todo.task}</ListItem>
})}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Example #3
| Source File: BasicTable.js From Purple-React with MIT License | 4 votes |
|
render() {
return (
<div>
<div className="page-header">
<h3 className="page-title"> Basic Tables </h3>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
<li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Tables</a></li>
<li className="breadcrumb-item active" aria-current="page">Basic tables</li>
</ol>
</nav>
</div>
<div className="row">
<div className="col-lg-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Basic Table</h4>
<p className="card-description"> Add className <code>.table</code>
</p>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>Profile</th>
<th>VatNo.</th>
<th>Created</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jacob</td>
<td>53275531</td>
<td>12 May 2017</td>
<td><label className="badge badge-danger">Pending</label></td>
</tr>
<tr>
<td>Messsy</td>
<td>53275532</td>
<td>15 May 2017</td>
<td><label className="badge badge-warning">In progress</label></td>
</tr>
<tr>
<td>John</td>
<td>53275533</td>
<td>14 May 2017</td>
<td><label className="badge badge-info">Fixed</label></td>
</tr>
<tr>
<td>Peter</td>
<td>53275534</td>
<td>16 May 2017</td>
<td><label className="badge badge-success">Completed</label></td>
</tr>
<tr>
<td>Dave</td>
<td>53275535</td>
<td>20 May 2017</td>
<td><label className="badge badge-warning">In progress</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-lg-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Hoverable Table</h4>
<p className="card-description"> Add className <code>.table-hover</code>
</p>
<div className="table-responsive">
<table className="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Sale</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jacob</td>
<td>Photoshop</td>
<td className="text-danger"> 28.76% <i className="mdi mdi-arrow-down"></i></td>
<td><label className="badge badge-danger">Pending</label></td>
</tr>
<tr>
<td>Messsy</td>
<td>Flash</td>
<td className="text-danger"> 21.06% <i className="mdi mdi-arrow-down"></i></td>
<td><label className="badge badge-warning">In progress</label></td>
</tr>
<tr>
<td>John</td>
<td>Premier</td>
<td className="text-danger"> 35.00% <i className="mdi mdi-arrow-down"></i></td>
<td><label className="badge badge-info">Fixed</label></td>
</tr>
<tr>
<td>Peter</td>
<td>After effects</td>
<td className="text-success"> 82.00% <i className="mdi mdi-arrow-up"></i></td>
<td><label className="badge badge-success">Completed</label></td>
</tr>
<tr>
<td>Dave</td>
<td>53275535</td>
<td className="text-success"> 98.05% <i className="mdi mdi-arrow-up"></i></td>
<td><label className="badge badge-warning">In progress</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-lg-12 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Striped Table</h4>
<p className="card-description"> Add className <code>.table-striped</code>
</p>
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th> User </th>
<th> First name </th>
<th> Progress </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face1.jpg")} alt="user icon" />
</td>
<td> Herman Beck </td>
<td>
<ProgressBar variant="success" now={25} />
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face2.jpg")} alt="user icon" />
</td>
<td> Messsy Adam </td>
<td>
<ProgressBar variant="danger" now={75} />
</td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face3.jpg")} alt="user icon" />
</td>
<td> John Richards </td>
<td>
<ProgressBar variant="warning" now={90} />
</td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face4.jpg")} alt="user icon" />
</td>
<td> Peter Meggik </td>
<td>
<ProgressBar variant="primary" now={50} />
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face5.jpg")} alt="user icon" />
</td>
<td> Edward </td>
<td>
<ProgressBar variant="danger" now={60} />
</td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face6.jpg")} alt="user icon" />
</td>
<td> John Doe </td>
<td>
<ProgressBar variant="info" now={65} />
</td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td className="py-1">
<img src={require("../../assets/images/faces/face7.jpg")} alt="user icon" />
</td>
<td> Henry Tom </td>
<td>
<ProgressBar variant="warning" now={20} />
</td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-lg-12 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Bordered table</h4>
<p className="card-description"> Add className <code>.table-bordered</code>
</p>
<div className="table-responsive">
<table className="table table-bordered">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Progress </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Herman Beck </td>
<td>
<ProgressBar variant="success" now={25} />
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 2 </td>
<td> Messsy Adam </td>
<td>
<ProgressBar variant="danger" now={75} />
</td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td> 3 </td>
<td> John Richards </td>
<td>
<ProgressBar variant="warning" now={90} />
</td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td> 4 </td>
<td> Peter Meggik </td>
<td>
<ProgressBar variant="primary" now={50} />
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 5 </td>
<td> Edward </td>
<td>
<ProgressBar variant="danger" now={35} />
</td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td> 6 </td>
<td> John Doe </td>
<td>
<ProgressBar variant="info" now={65} />
</td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td> 7 </td>
<td> Henry Tom </td>
<td>
<ProgressBar now={60} />
<ProgressBar variant="warning" now={20} />
</td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-lg-12 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Inverse table</h4>
<p className="card-description"> Add className <code>.table-dark</code>
</p>
<div className="table-responsive">
<table className="table table-dark">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Herman Beck </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 2 </td>
<td> Messsy Adam </td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td> 3 </td>
<td> John Richards </td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td> 4 </td>
<td> Peter Meggik </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 5 </td>
<td> Edward </td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td> 6 </td>
<td> John Doe </td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td> 7 </td>
<td> Henry Tom </td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-lg-12 stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Table with contextual classNames</h4>
<p className="card-description"> Add className <code>.table-{color}</code>
</p>
<div className="table-responsive">
<table className="table table-bordered">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Product </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr className="table-info">
<td> 1 </td>
<td> Herman Beck </td>
<td> Photoshop </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr className="table-warning">
<td> 2 </td>
<td> Messsy Adam </td>
<td> Flash </td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr className="table-danger">
<td> 3 </td>
<td> John Richards </td>
<td> Premeire </td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr className="table-success">
<td> 4 </td>
<td> Peter Meggik </td>
<td> After effects </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr className="table-primary">
<td> 5 </td>
<td> Edward </td>
<td> Illustrator </td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #4
| Source File: Timer.js From DayPlanner with Creative Commons Attribution 4.0 International | 4 votes |
|
render() {
return (
<div>
<ReactTooltip />
{!this.state.isPlayed && this.state.progressVariant !== 'primary' && !this.state.isBack ? (
<Sound url={soundfile} playStatus={Sound.status.PLAYING} />
) : null}
<div className="text-center">
<span style={{ position: 'absolute', left: '1rem' }}>
<i className="fas fa-arrow-left" data-tip="Back to tasks page" onClick={this.handleBack}></i>
</span>
<h4 className="d-inline-block">{this.state.taskInTimer.title}</h4>
</div>
<div className="row">
<div className="col-4">
<div style={{ width: '90%' }}>
{/* Deprecated because there is a bug */}
{/* <AnimatedProgressProvider
valueStart={0}
valueEnd={100}
duration={11.0}
easingFunction={easeQuadInOut}
>
{value => {
let roundedValue = Math.round(value);
return (
<CircularProgressbar
value={value}
text={`${roundedValue}%`}
styles={buildStyles({
pathTransition: 'none',
trailColor: '#e8e8e8',
textColor: '#28A745',
pathColor: '#28A745',
})}
/>
);
}}
</AnimatedProgressProvider> */}
</div>
</div>
<div className="col-12">
<div className="row">
<div
className="col-6"
style={{ display: this.state.progressVariant === 'primary' ? '' : 'none' }}></div>
<div
className="col-6"
style={{
display:
this.state.isBreak || this.state.progressVariant === 'primary' ? 'none' : '',
}}>
<small>
<i
className="fas fa-check"
data-tip="End the session"
onClick={this.endSession}></i>
</small>
<small>
<i
className="fas fa-check-double"
data-tip="End the session & complete the task"
onClick={this.endAndCompleteSession}></i>
</small>
</div>
<div
className="col-6"
style={{
display:
!this.state.isBreak || this.state.progressVariant === 'primary' ? 'none' : '',
}}>
<small>
<i className="fas fa-forward" data-tip="Skip break" onClick={this.skipBreak}></i>
</small>
</div>
<div className="col-6">
<small className="float-right">
{this.state.remainMinute}:
{this.state.remainSecond.toString().length < 2
? `0${this.state.remainSecond}`
: this.state.remainSecond}
</small>
</div>
</div>
<ProgressBar
variant={this.state.progressVariant}
animated={this.state.progressAnimated}
now={
this.state.secondCounter < 1 ? 999 * 999 : this.state.secondCounter //temporary solve way
}
min={0}
max={this.state.isBreak ? this.state.breakTime * 60 : this.state.workTime * 60}
label={this.state.progressLabel}
onClick={this.startSession}
/>
<p className="text-center text-muted">
<small>{this.state.totalTimeWorked ? `${this.state.totalTimeWorked} min` : null}</small>
</p>
</div>
<div className="w-100">
<p className="text-center pr-3 pl-3">{this.state.taskInTimer.note}</p>
</div>
</div>
</div>
);
}
Example #5
| Source File: Dashboard.js From project-avocado-web with MIT License | 4 votes |
|
render () {
return (
<div>
<div className="row proBanner">
<div className="col-12">
<span className="d-flex align-items-center purchase-popup">
<p>Like what you see? Check out our premium version for more.</p>
<a href="https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template" target="_blank" rel="noopener noreferrer" className="btn ml-auto download-button">Download Free Version</a>
<a href="http://www.bootstrapdash.com/demo/star-admin-pro-react/template/demo_1/preview/dashboard" rel="noopener noreferrer" target="_blank" className="btn purchase-button">Upgrade To Pro</a>
<i className="mdi mdi-close bannerClose" onClick={this.toggleProBanner}></i>
</span>
</div>
</div>
<div className="row">
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
<div className="card card-statistics">
<div className="card-body">
<div className="clearfix">
<div className="float-left">
<i className="mdi mdi-cube text-danger icon-lg"></i>
</div>
<div className="float-right">
<p className="mb-0 text-right text-dark">Total Revenue</p>
<div className="fluid-container">
<h3 className="font-weight-medium text-right mb-0 text-dark">$65,650</h3>
</div>
</div>
</div>
<p className="text-muted mt-3 mb-0">
<i className="mdi mdi-alert-octagon mr-1" aria-hidden="true"></i> 65% lower growth </p>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
<div className="card card-statistics">
<div className="card-body">
<div className="clearfix">
<div className="float-left">
<i className="mdi mdi-receipt text-warning icon-lg"></i>
</div>
<div className="float-right">
<p className="mb-0 text-right text-dark">Orders</p>
<div className="fluid-container">
<h3 className="font-weight-medium text-right mb-0 text-dark">3455</h3>
</div>
</div>
</div>
<p className="text-muted mt-3 mb-0">
<i className="mdi mdi-bookmark-outline mr-1" aria-hidden="true"></i> Product-wise sales </p>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
<div className="card card-statistics">
<div className="card-body">
<div className="clearfix">
<div className="float-left">
<i className="mdi mdi-poll-box text-success icon-lg"></i>
</div>
<div className="float-right">
<p className="mb-0 text-right text-dark">Sales</p>
<div className="fluid-container">
<h3 className="font-weight-medium text-right mb-0 text-dark">5693</h3>
</div>
</div>
</div>
<p className="text-muted mt-3 mb-0">
<i className="mdi mdi-calendar mr-1" aria-hidden="true"></i> Weekly Sales </p>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
<div className="card card-statistics">
<div className="card-body">
<div className="clearfix">
<div className="float-left">
<i className="mdi mdi-account-box-multiple text-info icon-lg"></i>
</div>
<div className="float-right">
<p className="mb-0 text-right text-dark">Employees</p>
<div className="fluid-container">
<h3 className="font-weight-medium text-right mb-0 text-dark">246</h3>
</div>
</div>
</div>
<p className="text-muted mt-3 mb-0">
<i className="mdi mdi-reload mr-1" aria-hidden="true"></i> Product-wise sales </p>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12 grid-margin">
<div className="card">
<div className="card-body">
<div className="d-flex justify-content-between align-items-center mb-4">
<h2 className="card-title mb-0">Product Analysis</h2>
<div className="wrapper d-flex">
<div className="d-flex align-items-center mr-3">
<span className="dot-indicator bg-success"></span>
<p className="mb-0 ml-2 text-muted">Product</p>
</div>
<div className="d-flex align-items-center">
<span className="dot-indicator bg-primary"></span>
<p className="mb-0 ml-2 text-muted">Resources</p>
</div>
</div>
</div>
<div className="chart-container">
<Line data={this.areaData} options={this.areaOptions} datasetKeyProvider={this.datasetKeyProvider} height={80} />
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-xl-4 col-lg-6 col-sm-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Todo</h4>
<form className="add-items d-lg-flex" onSubmit={this.addTodo}>
<input
type="text"
className="form-control h-auto"
placeholder="What do you need to do today?"
value={this.state.inputValue}
onChange={this.inputChangeHandler}
required />
<button type="submit" className="btn btn-primary font-weight-bold ml-0 mt-2 mt-lg-0">Add</button>
</form>
<div className="list-wrapper">
<ul className="d-flex flex-column todo-list todo-padding-lg">
{this.state.todos.map((todo, index) =>{
return <ListItem
isCompleted={todo.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todo.id}
remove={() => this.removeTodo(index) }
>{todo.task}</ListItem>
})}
</ul>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-sm-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Schedules</h4>
<div className="shedule-list d-xl-flex align-items-center justify-content-between mb-3">
<h3>27 Sep 2018</h3>
<small>21 Events</small>
</div>
<div className="event border-bottom py-3">
<p className="mb-2 font-weight-medium">Skype call with alex</p>
<div className="d-flex align-items-center">
<div className="badge badge-success">3:45 AM</div>
<small className="text-muted ml-2">London, UK</small>
<div className="image-grouped ml-auto mt-2 mt-xl-0">
<img src={require("../../assets/images/faces/face10.jpg")} alt="profile" />
<img src={require("../../assets/images/faces/face13.jpg")} alt="profile" /> </div>
</div>
</div>
<div className="event py-3 border-bottom">
<p className="mb-2 font-weight-medium">Data Analysing with team</p>
<div className="d-flex align-items-center">
<div className="badge badge-warning">12.30 AM</div>
<small className="text-muted ml-2">San Francisco, CA</small>
<div className="image-grouped ml-auto mt-2 mt-xl-0">
<img src={require("../../assets/images/faces/face20.jpg")} alt="profile "/>
<img src={require("../../assets/images/faces/face17.jpg")} alt="profile "/>
<img src={require("../../assets/images/faces/face14.jpg")} alt="profile " /> </div>
</div>
</div>
<div className="event py-3">
<p className="mb-2 font-weight-medium">Meeting with client</p>
<div className="d-flex align-items-center">
<div className="badge badge-danger">4.15 AM</div>
<small className="text-muted ml-2">San Diego, CA</small>
<div className="image-grouped ml-auto mt-2 mt-xl-0">
<img src={require("../../assets/images/faces/face21.jpg")} alt="profile"/>
<img src={require("../../assets/images/faces/face16.jpg")} alt="profile" /> </div>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-12 col-sm-12 grid-margin stretch-card">
<div className="row flex-grow">
<div className="col-xl-12 col-lg-6 col-sm-6 grid-margin-0 grid-margin-xl stretch-card">
<div className="card card-revenue">
<div className="card-body">
<div className="d-flex w-100 h-100 justify-content-between align-items-center">
<div className="mr-auto">
<p className="highlight-text text-white"> $168.90 </p>
<p className="text-white"> This Month </p>
<div className="badge badge-pill"> 18% </div>
</div>
<div className="ml-auto mt-2 mt-xl-0">
<Sparklines data={[4,3,10,9,4,3,8,6,7,8]} style={{ width: "110px", height:"70px" }}>
<SparklinesBars barWidth = {4} style={{ fill: "#fff" }} />
</Sparklines>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-12 col-lg-6 col-sm-6 stretch-card">
<div className="card card-revenue-table mt-4 mt-sm-0 mt-xl-4">
<div className="card-body">
<div className="revenue-item d-flex">
<div className="revenue-desc">
<h6>Member Profit</h6>
<p className="font-weight-light"> Average Weekly Profit </p>
</div>
<div className="revenue-amount">
<p className="text-secondary"> +168.900 </p>
</div>
</div>
<div className="revenue-item d-flex">
<div className="revenue-desc">
<h6>Total Profit</h6>
<p className="font-weight-light"> Weekly Customer Orders </p>
</div>
<div className="revenue-amount">
<p className="text-primary"> +6890.00 </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-6 col-md-6 col-lg-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-5 d-flex align-items-center">
<Doughnut data={this.usersDoughnutChartData} options={this.usersDoughnutChartOptions} width= {180} />
</div>
<div className="col-md-7">
<h4 className="card-title font-weight-medium mb-0 d-none d-md-block">Active Users</h4>
<div className="wrapper mt-4">
<div className="d-flex justify-content-between mb-2">
<div className="d-flex align-items-center">
<p className="mb-0 font-weight-medium">67,550</p>
<small className="text-muted ml-2">Email account</small>
</div>
<p className="mb-0 font-weight-medium">80%</p>
</div>
<ProgressBar variant="primary" now={80}/>
</div>
<div className="wrapper mt-4">
<div className="d-flex justify-content-between mb-2">
<div className="d-flex align-items-center">
<p className="mb-0 font-weight-medium">21,435</p>
<small className="text-muted ml-2">Requests</small>
</div>
<p className="mb-0 font-weight-medium">34%</p>
</div>
<ProgressBar variant="success" now={34}/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-md-6 col-lg-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-7">
<h4 className="card-title font-weight-medium mb-3">Amount Due</h4>
<h1 className="font-weight-medium mb-0 text-dark">$5998</h1>
<p className="text-muted">Milestone Completed</p>
<p className="mb-0">Payment for next week</p>
</div>
<div className="col-md-5 d-flex align-items-end mt-4 mt-md-0">
<Bar data={this.amountDueBarData} options={this.amountDueBarOptions} />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4 grid-margin stretch-card">
<div className="card">
<div className="card-body py-5">
<div className="d-flex flex-row justify-content-center align-items">
<i className="mdi mdi-facebook text-facebook icon-lg"></i>
<div className="ml-3">
<h6 className="text-facebook font-weight-semibold mb-0">2.62 Subscribers</h6>
<p className="text-muted card-text">You main list growing</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-4 grid-margin stretch-card">
<div className="card">
<div className="card-body py-5">
<div className="d-flex flex-row justify-content-center align-items">
<i className="mdi mdi-google-plus text-google icon-lg"></i>
<div className="ml-3">
<h6 className="text-google font-weight-semibold mb-0">3.4k Followers</h6>
<p className="text-muted card-text">You main list growing</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-4 grid-margin stretch-card">
<div className="card">
<div className="card-body py-5">
<div className="d-flex flex-row justify-content-center align-items">
<i className="mdi mdi-twitter text-twitter icon-lg"></i>
<div className="ml-3">
<h6 className="text-twitter font-weight-semibold mb-0">3k followers</h6>
<p className="text-muted card-text">You main list growing</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 grid-margin">
<div className="card">
<div className="card-body">
<h4 className="card-title">Orders</h4>
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Progress </th>
<th> Amount </th>
<th> Sales </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td className="font-weight-medium"> 1 </td>
<td> Herman Beck </td>
<td>
<ProgressBar variant="success" striped now={25}/>
</td>
<td> $ 77.99 </td>
<td className="text-danger"> 53.64% <i className="mdi mdi-arrow-down"></i>
</td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td className="font-weight-medium"> 2 </td>
<td> Messsy Adam </td>
<td>
<ProgressBar variant="danger" striped now={75}/>
</td>
<td> $245.30 </td>
<td className="text-success"> 24.56% <i className="mdi mdi-arrow-up"></i>
</td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td className="font-weight-medium"> 3 </td>
<td> John Richards </td>
<td>
<ProgressBar variant="warning" striped now={90}/>
</td>
<td> $138.00 </td>
<td className="text-danger"> 28.76% <i className="mdi mdi-arrow-down"></i>
</td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td className="font-weight-medium"> 4 </td>
<td> Peter Meggik </td>
<td>
<ProgressBar variant="primary" striped now={50}/>
</td>
<td> $ 77.99 </td>
<td className="text-danger"> 53.45% <i className="mdi mdi-arrow-down"></i>
</td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td className="font-weight-medium"> 5 </td>
<td> Edward </td>
<td>
<ProgressBar variant="danger" striped now={35}/>
</td>
<td> $ 160.25 </td>
<td className="text-success"> 18.32% <i className="mdi mdi-arrow-up"></i>
</td>
<td> May 03, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 grid-margin">
<div className="card">
<div className="card-body">
<h5 className="card-title mb-4">Manage Tickets</h5>
<div className="fluid-container">
<div className="row ticket-card mt-3 pb-2 border-bottom pb-3 mb-3">
<div className="col-md-1">
<img className="img-sm rounded-circle mb-4 mb-md-0 d-block mx-md-auto" src={require("../../assets/images/faces/face1.jpg")} alt="profile" /> </div>
<div className="ticket-details col-md-9">
<div className="d-lg-flex">
<p className="text-dark font-weight-semibold mr-2 mb-0 no-wrap">James :</p>
<p className="text-primary mr-1 mb-0">[#23047]</p>
<p className="mb-0 ellipsis">Donec rutrum congue leo eget malesuada.</p>
</div>
<p className="text-gray ellipsis mb-2">Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim vivamus. </p>
<div className="row text-gray d-md-flex d-none">
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted text-muted">Last responded :</small>
<small className="Last-responded mr-2 mb-0 text-muted text-muted">3 hours ago</small>
</div>
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted text-muted">Due in :</small>
<small className="Last-responded mr-2 mb-0 text-muted text-muted">2 Days</small>
</div>
</div>
</div>
<div className="ticket-actions col-md-2">
<div className="btn-group dropdown">
<Dropdown>
<Dropdown.Toggle className="btn btn-success btn-sm">
Manage
</Dropdown.Toggle>
<Dropdown.Menu className="navbar-dropdown preview-list">
<Dropdown.Item>
Quick reply
</Dropdown.Item>
<Dropdown.Item>
Another action
</Dropdown.Item>
<Dropdown.Item>
Resolve Issue
</Dropdown.Item>
<Dropdown.Item>
Close Issue
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
<div className="row ticket-card mt-3 pb-2 border-bottom pb-3 mb-3">
<div className="col-md-1">
<img className="img-sm rounded-circle mb-4 mb-md-0 d-block mx-md-auto" src={require("../../assets/images/faces/face2.jpg")} alt="profile" /> </div>
<div className="ticket-details col-md-9">
<div className="d-lg-flex">
<p className="text-dark font-weight-semibold mr-2 mb-0 no-wrap">Stella :</p>
<p className="text-primary mr-1 mb-0">[#23135]</p>
<p className="mb-0 ellipsis">Curabitur aliquet quam id dui posuere blandit.</p>
</div>
<p className="text-gray ellipsis mb-2">Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl. </p>
<div className="row text-gray d-md-flex d-none">
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted">Last responded :</small>
<small className="Last-responded mr-2 mb-0 text-muted">3 hours ago</small>
</div>
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted">Due in :</small>
<small className="Last-responded mr-2 mb-0 text-muted">2 Days</small>
</div>
</div>
</div>
<div className="ticket-actions col-md-2">
<div className="btn-group dropdown">
<Dropdown>
<Dropdown.Toggle className="btn btn-success btn-sm">
Manage
</Dropdown.Toggle>
<Dropdown.Menu className="navbar-dropdown preview-list">
<Dropdown.Item>
Quick reply
</Dropdown.Item>
<Dropdown.Item>
Another action
</Dropdown.Item>
<Dropdown.Item>
Resolve Issue
</Dropdown.Item>
<Dropdown.Item>
Close Issue
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
<div className="row ticket-card mt-3">
<div className="col-md-1">
<img className="img-sm rounded-circle mb-4 mb-md-0 d-block mx-md-auto" src={require("../../assets/images/faces/face3.jpg")} alt="profile" /> </div>
<div className="ticket-details col-md-9">
<div className="d-lg-flex">
<p className="text-dark font-weight-semibold mr-2 mb-0 no-wrap">John Doe :</p>
<p className="text-primary mr-1 mb-0">[#23246]</p>
<p className="mb-0 ellipsis">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>
</div>
<p className="text-gray ellipsis mb-2">Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Lorem ipsum dolor sit amet.</p>
<div className="row text-gray d-md-flex d-none">
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted">Last responded :</small>
<small className="Last-responded mr-2 mb-0 text-muted">3 hours ago</small>
</div>
<div className="col-4 d-flex">
<small className="mb-0 mr-2 text-muted">Due in :</small>
<small className="Last-responded mr-2 mb-0 text-muted">2 Days</small>
</div>
</div>
</div>
<div className="ticket-actions col-md-2">
<div className="btn-group dropdown">
<Dropdown>
<Dropdown.Toggle className="btn btn-success dropdown-toggle btn-sm">
Manage
</Dropdown.Toggle>
<Dropdown.Menu className="navbar-dropdown preview-list">
<Dropdown.Item>
Quick reply
</Dropdown.Item>
<Dropdown.Item>
Another action
</Dropdown.Item>
<Dropdown.Item>
Resolve Issue
</Dropdown.Item>
<Dropdown.Item>
Close Issue
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Example #6
| Source File: Grbl.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const none = '–';
const panel = state.panel;
const controllerState = state.controller.state || {};
const parserState = _.get(controllerState, 'parserstate', {});
const activeState = _.get(controllerState, 'status.activeState') || none;
const feedrate = _.get(controllerState, 'status.feedrate', _.get(parserState, 'feedrate', none));
const spindle = _.get(controllerState, 'status.spindle', _.get(parserState, 'spindle', none));
const tool = _.get(parserState, 'tool', none);
const ov = _.get(controllerState, 'status.ov', []);
const [
ovF = 0,
ovR = 0,
ovS = 0,
] = ov;
const buf = _.get(controllerState, 'status.buf', {});
const modal = _.mapValues(parserState.modal || {}, mapGCodeToText);
const receiveBufferStyle = ((rx) => {
// danger: 0-7
// warning: 8-15
// info: >=16
rx = Number(rx) || 0;
if (rx >= 16) {
return 'info';
}
if (rx >= 8) {
return 'warning';
}
return 'danger';
})(buf.rx);
this.plannerBufferMax = Math.max(this.plannerBufferMax, buf.planner) || this.plannerBufferMax;
this.receiveBufferMax = Math.max(this.receiveBufferMax, buf.rx) || this.receiveBufferMax;
return (
<div>
<Overrides
controller={this.workspace.controller}
ovF={ovF}
ovS={ovS}
ovR={ovR}
/>
{!_.isEmpty(buf) && (
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={actions.toggleQueueReports}
title={panel.queueReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Queue Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.queueReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.queueReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Planner Buffer')}>
{i18n._('Planner Buffer')}
</div>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={this.plannerBufferMin}
max={this.plannerBufferMax}
now={buf.planner}
label={(
<span className={styles.progressbarLabel}>
{buf.planner}
</span>
)}
/>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Receive Buffer')}>
{i18n._('Receive Buffer')}
</div>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle={receiveBufferStyle}
min={this.receiveBufferMin}
max={this.receiveBufferMax}
now={buf.rx}
label={(
<span className={styles.progressbarLabel}>
{buf.rx}
</span>
)}
/>
</div>
</div>
</Panel.Body>
)}
</Panel>
)}
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleStatusReports();
}}
title={panel.statusReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Status Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.statusReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.statusReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('State')}>
{i18n._('State')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{activeState}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{feedrate}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{spindle}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Tool Number')}>
{i18n._('Tool Number')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{tool}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleModalGroups();
}}
title={panel.modalGroups.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Modal Groups')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.modalGroups.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.modalGroups.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Motion')}>
{i18n._('Motion')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.motion}>
{modal.motion || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coordinate')}>
{i18n._('Coordinate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.wcs}>
{modal.wcs || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Plane')}>
{i18n._('Plane')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.plane}>
{modal.plane || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Distance')}>
{i18n._('Distance')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.distance}>
{modal.distance || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.feedrate}>
{modal.feedrate || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Units')}>
{i18n._('Units')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.units}>
{modal.units || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Program')}>
{i18n._('Program')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.program}>
{modal.program || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.spindle}>
{modal.spindle || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coolant')}>
{i18n._('Coolant')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{ensureArray(modal.coolant).map(coolant => (
<div title={coolant} key={coolant}>{coolant || none}</div>
))}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
</div>
);
}
Example #7
| Source File: Marlin.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const none = '–';
const panel = state.panel;
const controllerState = state.controller.state || {};
const ovF = get(controllerState, 'ovF', 0);
const ovS = get(controllerState, 'ovS', 0);
const feedrate = get(controllerState, 'feedrate') || none;
const spindle = get(controllerState, 'spindle') || none;
const extruder = get(controllerState, 'extruder') || {};
const heatedBed = get(controllerState, 'heatedBed') || {};
const showExtruderTemperature = (extruder.deg !== undefined && extruder.degTarget !== undefined);
const showExtruderPower = (extruder.power !== undefined);
const showHeatedBedTemperature = (heatedBed.deg !== undefined && heatedBed.degTarget !== undefined);
const showHeatedBedPower = (heatedBed.power !== undefined);
const showHeaterStatus = [
showExtruderTemperature,
showExtruderPower,
showHeatedBedTemperature,
showHeatedBedPower
].some(x => !!x);
const canSetExtruderTemperature = isNumber(state.heater.extruder);
const canSetHeatedBedTemperature = isNumber(state.heater.heatedBed);
const modal = mapValues(controllerState.modal || {}, mapGCodeToText);
const extruderIsHeating = (Number(extruder.degTarget) > Number(extruder.deg));
const heatedBedIsHeating = (Number(heatedBed.degTarget) > Number(heatedBed.deg));
const extruderPower = Number(extruder.power) || 0;
const heatedBedPower = Number(heatedBed.power) || 0;
this.extruderPowerMax = Math.max(this.extruderPowerMax, extruderPower);
this.heatedBedPowerMax = Math.max(this.heatedBedPowerMax, heatedBedPower);
return (
<div>
<Overrides controller={this.workspace.controller} ovF={ovF} ovS={ovS} />
<Panel className={styles.panel}>
<Panel.Heading className={styles.panelHeading}>
<Toggler
className="clearfix"
onToggle={actions.toggleHeaterControl}
title={panel.heaterControl.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Heater Control')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.heaterControl.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.heaterControl.expanded && (
<Panel.Body>
<div
className="table-form"
style={{
marginBottom: showHeaterStatus ? 15 : 0
}}
>
<div className="table-form-row">
<div className="table-form-col table-form-col-label">
<FadeInOut disabled={!extruderIsHeating} from={0.3} to={1}>
<IconExtruder
color={extruderIsHeating ? '#000' : '#666'}
size={24}
/>
</FadeInOut>
<Space width="4" />
{i18n._('Extruder')}
</div>
<div className="table-form-col">
<div className="input-group input-group-sm">
<input
type="number"
value={state.heater.extruder}
step="1"
min="0"
className="form-control"
onChange={actions.changeExtruderTemperature}
/>
<span className="input-group-addon">{i18n._('°C')}</span>
</div>
</div>
<div className="table-form-col">
<Space width="8" />
</div>
<div className="table-form-col">
<Button
compact
btnSize="xs"
btnStyle="danger"
disabled={!canSetExtruderTemperature}
onClick={this.setExtruderTemperature(state.heater.extruder)}
title={i18n._('Set the target temperature for the extruder')}
>
<i
className="fa fa-fw fa-check"
style={{ fontSize: 16 }}
/>
</Button>
</div>
<div className="table-form-col">
<Space width="8" />
</div>
<div className="table-form-col">
<Button
compact
btnSize="xs"
btnStyle="flat"
title={i18n._('Cancel')}
onClick={this.setExtruderTemperature(0)}
>
<i
className="fa fa-fw fa-close"
style={{ fontSize: 16 }}
/>
</Button>
</div>
</div>
<div className="table-form-row">
<div className="table-form-col table-form-col-label">
<FadeInOut disabled={!heatedBedIsHeating} from={0.3} to={1}>
<IconHeatedBed
color={heatedBedIsHeating ? '#000' : '#666'}
size={24}
/>
</FadeInOut>
<Space width="4" />
{i18n._('Heated Bed')}
</div>
<div className="table-form-col">
<div className="input-group input-group-sm">
<input
type="number"
value={state.heater.heatedBed}
step="1"
min="0"
className="form-control"
onChange={actions.changeHeatedBedTemperature}
/>
<span className="input-group-addon">{i18n._('°C')}</span>
</div>
</div>
<div className="table-form-col">
<Space width="8" />
</div>
<div className="table-form-col">
<Button
compact
btnSize="xs"
btnStyle="danger"
disabled={!canSetHeatedBedTemperature}
onClick={this.setHeatedBedTemperature(state.heater.heatedBed)}
title={i18n._('Set the target temperature for the heated bed')}
>
<i
className="fa fa-fw fa-check"
style={{ fontSize: 16 }}
/>
</Button>
</div>
<div className="table-form-col">
<Space width="8" />
</div>
<div className="table-form-col">
<Button
compact
btnSize="xs"
btnStyle="flat"
onClick={this.setHeatedBedTemperature(0)}
title={i18n._('Cancel')}
>
<i
className="fa fa-fw fa-close"
style={{ fontSize: 16 }}
/>
</Button>
</div>
</div>
</div>
{showExtruderTemperature && (
<div className="row no-gutters">
<div className="col col-xs-7">
<div className={styles.textEllipsis} title={i18n._('Extruder Temperature')}>
{i18n._('Extruder Temperature')}
</div>
</div>
<div className="col col-xs-5">
<div className={styles.well}>
{`${extruder.deg}°C / ${extruder.degTarget}°C`}
</div>
</div>
</div>
)}
{showHeatedBedTemperature && (
<div className="row no-gutters">
<div className="col col-xs-7">
<div className={styles.textEllipsis} title={i18n._('Heated Bed Temperature')}>
{i18n._('Heated Bed Temperature')}
</div>
</div>
<div className="col col-xs-5">
<div className={styles.well}>
{`${heatedBed.deg}°C / ${heatedBed.degTarget}°C`}
</div>
</div>
</div>
)}
{showExtruderPower && (
<div className="row no-gutters">
<div className="col col-xs-7">
<div className={styles.textEllipsis} title={i18n._('Extruder Power')}>
{i18n._('Extruder Power')}
</div>
</div>
<div className="col col-xs-5">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={0}
max={this.extruderPowerMax}
now={extruderPower}
label={(
<span className={styles.progressbarLabel}>
{extruderPower}
</span>
)}
/>
</div>
</div>
)}
{showHeatedBedPower && (
<div className="row no-gutters">
<div className="col col-xs-7">
<div className={styles.textEllipsis} title={i18n._('Heated Bed Power')}>
{i18n._('Heated Bed Power')}
</div>
</div>
<div className="col col-xs-5">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={0}
max={this.heatedBedPowerMax}
now={heatedBedPower}
label={(
<span className={styles.progressbarLabel}>
{heatedBedPower}
</span>
)}
/>
</div>
</div>
)}
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles.panelHeading}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleStatusReports();
}}
title={panel.statusReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Status Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.statusReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.statusReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{feedrate}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{spindle}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles.panelHeading}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleModalGroups();
}}
title={panel.modalGroups.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Modal Groups')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.modalGroups.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.modalGroups.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Motion')}>
{i18n._('Motion')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.motion}>
{modal.motion || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coordinate')}>
{i18n._('Coordinate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.wcs}>
{modal.wcs || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Plane')}>
{i18n._('Plane')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.plane}>
{modal.plane || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Distance')}>
{i18n._('Distance')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.distance}>
{modal.distance || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.feedrate}>
{modal.feedrate || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Units')}>
{i18n._('Units')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.units}>
{modal.units || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Program')}>
{i18n._('Program')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.program}>
{modal.program || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.spindle}>
{modal.spindle || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coolant')}>
{i18n._('Coolant')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{ensureArray(modal.coolant).map(coolant => (
<div title={coolant} key={coolant}>{coolant || none}</div>
))}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
</div>
);
}
Example #8
| Source File: MaslowPanels.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const { settingsEdits } = this.state;
const none = '–';
const panel = state.panel;
const controllerState = state.controller.state || {};
const parserState = _.get(controllerState, 'parserstate', {});
const activeState = _.get(controllerState, 'status.activeState') || none;
const feedrate = _.get(controllerState, 'status.feedrate', _.get(parserState, 'feedrate', none));
const spindle = _.get(controllerState, 'status.spindle', _.get(parserState, 'spindle', none));
const positionError = _.get(controllerState, 'status.feedback.positionError', false);
const tool = _.get(parserState, 'tool', none);
const buf = _.get(controllerState, 'status.buf', {});
const modal = _.mapValues(parserState.modal || {}, mapGCodeToText);
const receiveBufferStyle = ((rx) => {
// danger: 0-7
// warning: 8-15
// info: >=16
rx = Number(rx) || 0;
if (rx >= 16) {
return 'info';
}
if (rx >= 8) {
return 'warning';
}
return 'danger';
})(buf.rx);
this.plannerBufferMax = Math.max(this.plannerBufferMax, buf.planner) || this.plannerBufferMax;
this.receiveBufferMax = Math.max(this.receiveBufferMax, buf.rx) || this.receiveBufferMax;
const allSettings = this.workspace.machineSettings.all;
const firmware = this.workspace.firmware;
const hardware = this.workspace.hardware;
const compatibility = hardware.getFirmwareCompatibility(firmware);
return (
<div>
{positionError && (
<ToastNotification
style={{ marginBottom: '10px' }}
type="warning"
dismissible={false}
>
The Maslow cannot find its position. Calibration may have been corrupted.
<Button
btnSize="medium"
btnStyle="flat"
onClick={event => this.reset()}
>
{i18n._('Reset Calibration Settings')}
</Button>
</ToastNotification>
)}
{firmware && hardware.hasFirmware && firmware.requiredVersion && (
<div style={{ marginBottom: 10 }}>
<FirmwareRequirement firmware={firmware} compatibility={compatibility} />
</div>
)}
<button
type="button"
className="btn btn-default"
style={{ width: '100%' }}
onClick={() => {
actions.openModal(MODAL_CALIBRATION);
}}
title={i18n._('Calibrate')}
>
<i className="fa fa-bullseye" />
<Space width="8" />
{i18n._('Calibrate')}
</button>
<hr style={{ marginTop: '10px', marginBottom: '10px' }} />
{!_.isEmpty(buf) && (
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={actions.toggleQueueReports}
title={panel.queueReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Queue Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.queueReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.queueReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Planner Buffer')}>
{i18n._('Planner Buffer')}
</div>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={this.plannerBufferMin}
max={this.plannerBufferMax}
now={buf.planner}
label={(
<span className={styles.progressbarLabel}>
{buf.planner}
</span>
)}
/>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Receive Buffer')}>
{i18n._('Receive Buffer')}
</div>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle={receiveBufferStyle}
min={this.receiveBufferMin}
max={this.receiveBufferMax}
now={buf.rx}
label={(
<span className={styles.progressbarLabel}>
{buf.rx}
</span>
)}
/>
</div>
</div>
</Panel.Body>
)}
</Panel>
)}
{!this.workspace.machineSettings.isValid && (
<span style={{ fontStyle: 'italic' }}>
{'Problems detected with Maslow settings:'}
<ul>
{this.workspace.machineSettings.errors.map((err) => {
return (
<li key={err}>{err}</li>
);
})}
</ul>
</span>
)}
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleSettings();
}}
title={panel.settings.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Settings')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.settings.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.settings.expanded && (
<Panel.Body>
<span style={{ fontStyle: 'italic' }}>
Hover over setting names for information.
</span>
<hr style={{ marginTop: '10px', marginBottom: '10px' }} />
{Object.keys(allSettings).map((code) => {
const setting = allSettings[code];
const name = (setting.message && setting.message.length > 0) ? setting.message : setting.name;
const title = `${setting.name}: ${setting.message}`;
return (
<div key={code} className="row no-gutters">
<div className="col col-xs-5">
<div className={styles.textEllipsis} title={title}>
{name}
</div>
</div>
<div className="col col-xs-4">
<input
type="text"
className={styles.setting}
value={settingsEdits[code]}
onChange={(e) => {
this.setState({
settingsEdits: {
...settingsEdits,
[code]: e.target.value
}
});
}}
/>
</div>
<div className="col col-xs-1" style={{ textAlign: 'right', fontStyle: 'italic', fontSize: '-2em' }}>
{setting.units}
</div>
<div className="col col-xs-2" style={{ textAlign: 'right' }}>
<button
type="button"
className="btn btn-sm btn-default"
onClick={() => {
this.saveSetting(code);
}}
title={i18n._('Save')}
>
<i className="fa fa-save" />
</button>
</div>
</div>
);
})}
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleStatusReports();
}}
title={panel.statusReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Status Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.statusReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.statusReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('State')}>
{i18n._('State')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{activeState}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{feedrate}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{spindle}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Tool Number')}>
{i18n._('Tool Number')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{tool}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleModalGroups();
}}
title={panel.modalGroups.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Modal Groups')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.modalGroups.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.modalGroups.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Motion')}>
{i18n._('Motion')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.motion}>
{modal.motion || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coordinate')}>
{i18n._('Coordinate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.wcs}>
{modal.wcs || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Distance')}>
{i18n._('Distance')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.distance}>
{modal.distance || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.feedrate}>
{modal.feedrate || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Units')}>
{i18n._('Units')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.units}>
{modal.units || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Program')}>
{i18n._('Program')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.program}>
{modal.program || none}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={() => {
actions.toggleAbout();
}}
title={panel.about.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('About')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.about.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.about.expanded && (
<Panel.Body>
{this.workspace.hardware.hasFirmware && (
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Firmware')}>
{i18n._('Firmware')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{this.workspace.hardware.firmwareStr}
</div>
</div>
</div>
)}
{this.workspace.hardware.hasProtocol && (
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Protocol')}>
{i18n._('Protocol')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{this.workspace.hardware.protocolStr}
</div>
</div>
</div>
)}
{this.workspace.hardware.hasPlainVersion && (
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Version')}>
{i18n._('Version')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{this.workspace.hardware.versionStr}
</div>
</div>
</div>
)}
</Panel.Body>
)}
</Panel>
</div>
);
}
Example #9
| Source File: TinyG.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const none = '–';
const controllerState = state.controller.state;
const controllerSettings = state.controller.settings;
const { fv, mfo, mto, sso } = controllerSettings;
// https://github.com/cncjs/cncjs/issues/160
// Firmware | mfo | sso | mto
// -------- | --- | --- | ----
// 0.97 | No | No | No
// 0.98 | No | Yes | No
// 0.99 | Yes | Yes | Yes
const ovF = (fv >= 0.99) ? Math.round(mfo * 100) || 0 : 0;
const ovS = (fv >= 0.98) ? Math.round(sso * 100) || 0 : 0;
const ovT = (fv >= 0.99) ? Math.round(mto * 100) || 0 : 0;
const pwr = get(controllerState, 'pwr');
const machineState = get(controllerState, 'sr.machineState');
const machineStateText = {
[TINYG_MACHINE_STATE_INITIALIZING]: i18n.t('controller:TinyG.machineState.initializing'),
[TINYG_MACHINE_STATE_READY]: i18n.t('controller:TinyG.machineState.ready'),
[TINYG_MACHINE_STATE_ALARM]: i18n.t('controller:TinyG.machineState.alarm'),
[TINYG_MACHINE_STATE_STOP]: i18n.t('controller:TinyG.machineState.stop'),
[TINYG_MACHINE_STATE_END]: i18n.t('controller:TinyG.machineState.end'),
[TINYG_MACHINE_STATE_RUN]: i18n.t('controller:TinyG.machineState.run'),
[TINYG_MACHINE_STATE_HOLD]: i18n.t('controller:TinyG.machineState.hold'),
[TINYG_MACHINE_STATE_PROBE]: i18n.t('controller:TinyG.machineState.probe'),
[TINYG_MACHINE_STATE_CYCLE]: i18n.t('controller:TinyG.machineState.cycle'),
[TINYG_MACHINE_STATE_HOMING]: i18n.t('controller:TinyG.machineState.homing'),
[TINYG_MACHINE_STATE_JOG]: i18n.t('controller:TinyG.machineState.jog'),
[TINYG_MACHINE_STATE_INTERLOCK]: i18n.t('controller:TinyG.machineState.interlock'),
[TINYG_MACHINE_STATE_SHUTDOWN]: i18n.t('controller:TinyG.machineState.shutdown'),
[TINYG_MACHINE_STATE_PANIC]: i18n.t('controller:TinyG.machineState.panic')
}[machineState];
const plannerBuffer = get(controllerState, 'qr') || 0;
const feedrate = get(controllerState, 'sr.feedrate');
const velocity = get(controllerState, 'sr.velocity');
const line = get(controllerState, 'sr.line');
const modal = mapValues(get(controllerState, 'sr.modal', {}), mapGCodeToText);
const panel = state.panel;
this.plannerBufferMax = Math.max(this.plannerBufferMax, Number(plannerBuffer) || 0);
return (
<div>
<Overrides
controller={this.workspace.controller}
ovF={ovF}
ovS={ovS}
ovT={ovT}
/>
<Panel className={styles.panel}>
<Panel.Heading className={styles.panelHeading}>
<Toggler
className="clearfix"
onToggle={actions.togglePowerManagement}
title={panel.powerManagement.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Power Management')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.powerManagement.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.powerManagement.expanded && pwr && (
<Panel.Body>
<div className="row no-gutters" style={{ marginBottom: 10 }}>
<div className="col col-xs-6" style={{ paddingRight: 5 }}>
<Button
className={styles.textEllipsis}
btnStyle="flat"
onClick={this.enableMotors}
title={i18n._('Enable Motors')}
>
<i className="fa fa-flash" />
{i18n._('Enable Motors')}
</Button>
</div>
<div className="col col-xs-6" style={{ paddingLeft: 5 }}>
<Button
className={styles.textEllipsis}
btnStyle="flat"
onClick={this.disableMotors}
title={i18n._('Disable Motors')}
>
<i className="fa fa-remove" />
{i18n._('Disable Motors')}
</Button>
</div>
</div>
{map(pwr, (value, key) => (
<div key={key} className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Motor {{n}}', { n: key })}>
{i18n._('Motor {{n}}', { n: key })}
</div>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={0}
max={1}
now={value}
label={<span className={styles.progressbarLabel}>{value}</span>}
/>
</div>
</div>
))}
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={actions.toggleQueueReports}
title={panel.queueReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Queue Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.queueReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.queueReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<span className="text-ellipsis" title={i18n._('Planner Buffer')}>
{i18n._('Planner Buffer')}
</span>
</div>
<div className="col col-xs-8">
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={this.plannerBufferMin}
max={this.plannerBufferMax}
now={plannerBuffer}
label={<span className={styles.progressbarLabel}>{plannerBuffer}</span>}
/>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={actions.toggleStatusReports}
title={panel.statusReports.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Status Reports')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.statusReports.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.statusReports.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('State')}>
{i18n._('State')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>{machineStateText || none}</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>{Number(feedrate) || 0}</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Velocity')}>
{i18n._('Velocity')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>{Number(velocity) || 0}</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Line')}>
{i18n._('Line')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>{Number(line) || 0}</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
<Panel className={styles.panel}>
<Panel.Heading className={styles['panel-heading']}>
<Toggler
className="clearfix"
onToggle={actions.toggleModalGroups}
title={panel.modalGroups.expanded ? i18n._('Hide') : i18n._('Show')}
>
<div className="pull-left">{i18n._('Modal Groups')}</div>
<Toggler.Icon
className="pull-right"
expanded={panel.modalGroups.expanded}
/>
</Toggler>
</Panel.Heading>
{panel.modalGroups.expanded && (
<Panel.Body>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Motion')}>
{i18n._('Motion')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.motion}>
{modal.motion || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coordinate')}>
{i18n._('Coordinate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.wcs}>
{modal.wcs || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Plane')}>
{i18n._('Plane')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.plane}>
{modal.plane || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Distance')}>
{i18n._('Distance')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.distance}>
{modal.distance || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Feed Rate')}>
{i18n._('Feed Rate')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.feedrate}>
{modal.feedrate || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Units')}>
{i18n._('Units')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.units}>
{modal.units || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Path')}>
{i18n._('Path')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.path}>
{modal.path || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Spindle')}>
{i18n._('Spindle')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well} title={modal.spindle}>
{modal.spindle || none}
</div>
</div>
</div>
<div className="row no-gutters">
<div className="col col-xs-4">
<div className={styles.textEllipsis} title={i18n._('Coolant')}>
{i18n._('Coolant')}
</div>
</div>
<div className="col col-xs-8">
<div className={styles.well}>
{ensureArray(modal.coolant).map(coolant => (
<div title={coolant} key={coolant}>{coolant || none}</div>
))}
</div>
</div>
</div>
</Panel.Body>
)}
</Panel>
</div>
);
}
Example #10
| Source File: Dashboard.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { show, state } = this.props;
const style = {
display: show ? 'block' : 'none'
};
const filename = state.gcode.name || 'noname.nc';
const filesize = state.gcode.ready ? formatBytes(state.gcode.size, 0) : '';
const { sent = 0, total = 0 } = state.gcode;
const { virtualList } = this.state;
const rowHeight = 20;
return (
<Panel
className={cx(styles.dashboard)}
style={style}
>
<Panel.Heading style={{ height: 30 }}>
{i18n._('G-code')}
</Panel.Heading>
<Panel.Body
style={{ height: 'calc(100% - 30px)' }}
>
<div className="clearfix" style={{ marginBottom: 10 }}>
<div className="pull-left text-nowrap">
{state.gcode.ready && (
<Anchor
onClick={() => {
api.downloadGCode({ port: state.port });
}}
>
<strong>{filename}</strong>
</Anchor>
)}
{!state.gcode.ready && i18n._('G-code not loaded')}
</div>
<div className="pull-right text-nowrap">
{filesize}
</div>
</div>
<div style={{ marginBottom: 10 }}>
<ProgressBar
style={{ marginBottom: 0 }}
bsStyle="info"
min={0}
max={total}
now={sent}
label={total > 0 && (
<span className={styles.progressbarLabel}>
{sent} / {total}
</span>
)}
/>
</div>
<div
ref={node => {
this.node.virtualList = node;
}}
className={cx(
styles.gcodeViewer,
{ [styles.gcodeViewerDisabled]: this.lines.length === 0 }
)}
>
{this.lines.length > 0 && (
<VirtualList
width="100%"
height={virtualList.visibleHeight}
style={{
padding: '0 5px'
}}
itemCount={this.lines.length}
itemSize={rowHeight}
renderItem={this.renderItem}
scrollToIndex={sent}
/>
)}
{this.lines.length === 0 && (
<div className={styles.absoluteCenter}>
<img src="images/logo-badge-32x32.png" style={{ maxWidth: '32px' }} alt="" />
</div>
)}
</div>
</Panel.Body>
</Panel>
);
}
