121 lines
2.9 KiB
JavaScript
121 lines
2.9 KiB
JavaScript
class PrintingMultiplePrintJobsSample extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
jobs: []
|
|
};
|
|
}
|
|
|
|
removeJob(i) {
|
|
let arr = this.state.jobs;
|
|
arr.splice(i, 1);
|
|
this.setState({ jobs: arr });
|
|
}
|
|
|
|
addJob() {
|
|
let arr = this.state.jobs;
|
|
arr.push(new JSPM.ClientPrintJob());
|
|
this.setState({ jobs: arr });
|
|
}
|
|
|
|
updateJob(i, pj) {
|
|
//no need to re-render
|
|
this.state.jobs[i] = pj;
|
|
}
|
|
|
|
doPrinting() {
|
|
var cpjg = new JSPM.ClientPrintJobGroup();
|
|
for (var i = 0; i < this.state.jobs.length; i++) {
|
|
cpjg.jobs.push(this.state.jobs[i]);
|
|
}
|
|
cpjg.sendToClient();
|
|
}
|
|
|
|
render() {
|
|
let printButton;
|
|
if (this.state.jobs.length > 0) {
|
|
printButton = (
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<br />
|
|
<div className="text-center">
|
|
<button
|
|
className="btn btn-success btn-lg"
|
|
onClick={this.doPrinting.bind(this)}
|
|
>
|
|
<i className="fa fa-print" /> Print Now...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="row">
|
|
<div className="col-md-1">
|
|
<button
|
|
className="btn btn-dark btn-lg"
|
|
onClick={() => this.props.setSample(0)}
|
|
>
|
|
<i className="fa fa-arrow-left" />
|
|
</button>
|
|
</div>
|
|
<div className="col-md-11">
|
|
<h2 className="text-center">
|
|
<i className="fa fa-barcode" />+
|
|
<i className="fa fa-file-text" /> Print Multiple Jobs
|
|
in one shot!
|
|
</h2>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-3">
|
|
<button
|
|
className="btn btn-info btn-lg"
|
|
onClick={this.addJob.bind(this)}
|
|
>
|
|
<i className="fa fa-plus" /> Add Print Job
|
|
</button>
|
|
</div>
|
|
<div className="col-md-9">
|
|
<div
|
|
className="alert alert-warning alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
<i className="fa fa-info-circle" />{" "}
|
|
<small>
|
|
You can print raw commands and files to different client
|
|
printers if needed!
|
|
</small>
|
|
<button
|
|
type="button"
|
|
className="close"
|
|
data-dismiss="alert"
|
|
aria-label="Close"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="accordion">
|
|
{this.state.jobs.map((pj, i) => {
|
|
return (
|
|
<PrintJob
|
|
jobIndex={i}
|
|
removeJobHandler={this.removeJob.bind(this)}
|
|
updateJobHandler={this.updateJob.bind(this)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
{printButton}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
window.PrintingMultiplePrintJobsSample = PrintingMultiplePrintJobsSample; |