Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F61993501
costcalc_export.jsx
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Fri, May 10, 06:40
Size
12 KB
Mime Type
text/x-c++
Expires
Sun, May 12, 06:40 (2 d)
Engine
blob
Format
Raw Data
Handle
17588081
Attached To
rCOSTCALC Cost Calculator Source code
costcalc_export.jsx
View Options
"use strict";
// This code manages the export part of the engine
class ManageExport extends React.Component {
constructor(props) {
super(props);
this.make_export = this.make_export.bind(this);
this.make_copy = this.make_copy.bind(this);
this.rmvempty = this.rmvempty.bind(this);
this.hide = this.hide.bind(this);
this.colsdef=["Category","Provider","Name","Comments","Options","Cost"];
this.colconv="Cost";
this.state={
output:'',
disp:false,
rmvempty:false,
typexp:"",
ConvEnable:this.props.conv.Enable,
};
this.cols=this.colsdef.slice(0);
this.colsconv=this.cols.slice(0);
this.colsconv.push(this.colconv);
}
render() {
if(this.props.conv.Enable){
this.cols=this.colsconv;
}else{
this.cols=this.colsdef;}
let opt="";
let output="";
if (this.state.disp){
opt=this.options_btn();
output=this.make_output(this.props.data.data);
}
return (
<div id="export-group">
<div className="card">
<div className="card-header">
{this.export_btn()}
</div>
<div className="card-body">
<div id="export-output" >
{output}
</div>
</div>
<div className="card-footer">
{opt}
</div>
</div>
</div>
);
}
export_btn(){
return(
<div className="row" id="export-btn">
<div className="col-auto">
<ButtonInput class="btn-primary" onClick={this.make_export} id="btn-export" name="Export HTML" tips="Export in HTML, can also be used into Word"
n="html"/>
</div>
<div className="col-auto">
<ButtonInput class="btn-secondary" onClick={this.make_export} id="btn-export" name="Export HTML Source" tips="Export in HTML source code"
n="htmlsrc"/>
</div>
<div className="col-auto">
<ButtonInput class="btn-success" onClick={this.make_export} id="btn-export" name="Export Markdown" tips="Export in Markdown source code"
n="mark"/>
</div>
<div className="col-auto">
<ButtonInput class="btn-warning" onClick={this.make_export} id="btn-warning" name="Export CSV" tips="Export in CSV source code"
n="csv"/>
</div>
</div>
)
}
options_btn(opt){
let Namermv="";
if (this.state.rmvempty){
Namermv="Display Empty Lines";
}else {
Namermv="Remove Empty Lines";
}
return(
<div className="row">
<div className="col-auto">
<ButtonInput class="btn-secondary" onClick={this.make_copy} id="btn-export" name="Copy to Clipboard" tips="Copy the output into your clipboard"
n="mark"/>
</div>
<div className="col-auto">
<ButtonInput class="btn-primary" onClick={this.rmvempty} id="btn-export" name={Namermv} tips="Remove line(s) that don't have a provider"
n="mark"/>
</div>
<div className="col-auto">
<ButtonInput class="btn-dark" onClick={this.hide} id="btn-export" name="Hide Export" tips="Hide export"
n="mark"/>
</div>
</div>
);
}
rmvempty(){
this.setState({rmvempty:!this.state.rmvempty});
// this.make_export(this.typexp)
}
hide(){
this.setState({disp:false})
}
make_copy(){
this.fnSelect("export-output");
document.execCommand("copy");
this.fnDeSelect()
alert("Copied");
}
make_output(rdata){
const data=this.read_export(rdata,this.state.typexp);
const hcol=this.cols;
switch(this.state.typexp){
case 'html':
return this.htmlout(hcol,data);
case 'htmlsrc':
return this.htmlsrcout(hcol,data);
case 'mark':
return this.markout(hcol,data);
case 'csv':
return this.csvout(hcol,data);
}
}
make_export(typ){
this.setState({typexp:typ});
this.setState({disp:true});
}
htmlout(hcol,data){
let disps='';
let Convcol=null;
let movecol=3;
if(projectduration>1) disps='s';
if(this.props.conv.Enable){
movecol=4;
Convcol=<td align="center"><strong>{ConvCurrency(this.props.data.total)}</strong></td>;
}
return(
<div id="htmlexport" className="container">
<table className="table table-striped table-bordered" width="100%">
<thead className="thead-dark">
<tr>
{this.makecol(hcol,'html',true)}
</tr>
</thead>
<tbody>
{this.htmltable(data)}
<tr className="table-info">
<td>{projectname}</td>
<td> {projectduration} year{disps}</td>
<td colSpan={hcol.length-movecol} align="right"><strong>Total Cost</strong></td>
<td align="center"><strong>{this.props.data.total}</strong></td>
{Convcol}
</tr>
</tbody>
</table>
</div>
);
}
htmlsrcout(hcol,data){
let disps='';
if(projectduration>1) disps='s';
return(
<div id="htmlexport">
<pre><code>
<table><br/>
<thead><br/>
{this.makecol(hcol,'htmlsrc',true)}
</thead><br/>
<tbody><br/>
{this.htmlsrctable(data)}
<tr ><br/>
<td>{projectname}</td>
<td>{projectduration} year{disps}</td>
<td colSpan={hcol.length-3} align="right"><strong>Total Cost</strong></td><td align="center"><strong>
{this.props.data.total}</strong></td><br/>
</tr><br/>
</tbody><br/>
</table><br/>
</code></pre>
</div>
);
}
markout(hcol,data){
let disps='';
if(projectduration>1) disps='s';
const Head=Array.from({length: this.cols.length}, (v, k) => "---");
const col=Array.from({length: hcol.length-3}, (v, k) => "| ");
return(
<div id="htmlexport">
<pre><code>
|{this.makecol(hcol,'mark',true)}<br/>
|{this.makecol(Head,'mark')}<br/>
{this.marktable(data)}
|{projectname}|{projectduration} year{disps}{col} Total Cost |{this.props.data.total}|<br/>
</code></pre>
</div>
);
}
csvout(hcol,data){
let disps='';
if(projectduration>1) disps='s';
const col=Array.from({length: hcol.length-3}, (v, k) => ",");
return(
<div id="htmlexport">
<pre><code>
{this.makecol(hcol,'csv',true)}<br/>
{this.csvtable(data)}
{projectname},{projectduration} year{disps}{col} Total Cost ,{this.props.data.total},<br/>
</code></pre>
</div>
);
}
makecol(cols,style,head){
let children = [];
switch(style) {
case 'html':
for (let j = 0; j < cols.length; j++) {
if(head){
children.push(<th key={j}>{cols[j]}</th>);
}else {
children.push(<td key={j}>{cols[j]}</td>);
}
}
return children;
case 'htmlsrc':
for (let j = 0; j < cols.length; j++) {
if(head){
children.push(<span key={j}><th> {cols[j]} </th></span>);
}else {
children.push(<span key={j}><td> {cols[j]} </td></span>);
}
}
return children;
case 'mark':
for (let j = 0; j < cols.length; j++) {
children.push(<span key={j}> {cols[j]}|</span>);
}
return children
case 'csv':
for (let j = 0; j < cols.length; j++) {
children.push(<span key={j}> {cols[j]},</span>);
}
return children;
}
}
htmltable(data){
var items=[];
for(let i=0;i<data.length;i++){
const row=Object.values(data[i]);
let children = this.makecol(row,'html')
items.push(<tr key={i}>{children}</tr>);
}
return items;
}
htmlsrctable(data){
var items=[];
for(let i=0;i<data.length;i++){
const row=Object.values(data[i]);
let children = this.makecol(row,'htmlsrc')
items.push(<span key={i}><tr> {children} </tr><br key={i}/></span>);
}
return items;
}
marktable(data){
var items=[];
for(let i=0;i<data.length;i++){
const row=Object.values(data[i]);
let children = this.makecol(row,'mark');
items.push(<span key={i}>|{children}<br key={i}/></span>);
}
return items;
}
csvtable(data){
var items=[];
for(let i=0;i<data.length;i++){
const row=Object.values(data[i]);
let children = this.makecol(row,'csv');
items.push(<span key={i}>{children}<br key={i}/></span>);
}
return items;
}
read_export(rawexport,n) {
var output = [];
for (let cat = 0; cat < rawexport.length; cat++) {
const state = rawexport[cat];
for (let mod = 0; mod < state.length; mod++) {
if((!this.state.rmvempty) || (state[mod].Provider!=='')){
let tmp ={};
tmp={
Category:state[mod].Category,
Provider: state[mod].Provider,
Name: state[mod].Name,
Comments: state[mod].Comments,
Options: this.read_options(state[mod].ExportCmp),
Cost: state[mod].Cost,
};
if(this.props.conv.Enable) tmp["Cost2"]=ConvCurrency(state[mod].Cost);
output.push(tmp);
}}}
return output;
}
read_options(Options){
let output=[];
for (let i = 0; i < Options.length; i++) {
switch(this.state.typexp) {
case 'html':
output.push(<span key={i}><b>{Options[i].Name}</b> : <i>{Options[i].Value}</i> </span>);
break;
case 'htmlsrc':
output.push(<span key={i}><b>{Options[i].Name}</b> : <i>{Options[i].Value}</i> </span>);
break;
case 'mark':
output.push(<span key={i}>__{Options[i].Name}__ : *{Options[i].Value}* </span>);
break;
}
if(i< Options.length-1){
output.push(<br key={i+1000}/>)
}
}
return output
}
fnSelect(objId){
this.fnDeSelect();
if (document.selection){
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}else if (window.getSelection){
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
fnDeSelect(){
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
}
Event Timeline
Log In to Comment