Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F66312258
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
Sun, Jun 9, 18:03
Size
12 KB
Mime Type
text/x-c++
Expires
Tue, Jun 11, 18:03 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
18202140
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')
Stats.RecordEvent('Export', 'clipboard', 0)
}
make_output (rdata) {
const data = this.read_export(rdata, this.state.typexp)
const hcol = this.cols
// Generate a stat export
Stats.RecordEvent('Export', this.state.typexp, 0)
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 = ''
if (projectduration > 1) disps = 's'
let movecol = 3
let Convcol = null
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'
let movecol = 3
let Convcol = null
if (this.props.conv.Enable) {
movecol = 4
Convcol = <span><td align="center"> <strong>{ConvCurrency(this.props.data.total)}</strong></td></span>
}
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 - movecol} align="right"><strong>Total Cost</strong></td><td align="center"><strong>
{this.props.data.total}</strong></td>
{Convcol}
<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) => '---')
let movecol = 3
let Convcol = null
if (this.props.conv.Enable) {
movecol = 4
Convcol = <span>{ConvCurrency(this.props.data.total)}|</span>
}
const col = Array.from({ length: hcol.length - movecol }, (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}|{Convcol}<br/>
</code></pre>
</div>
)
}
csvout (hcol, data) {
let disps = ''
if (projectduration > 1) disps = 's'
let movecol = 3
let Convcol = null
if (this.props.conv.Enable) {
movecol = 4
Convcol = <span>{ConvCurrency(this.props.data.total)},</span>
}
const col = Array.from({ length: hcol.length - movecol }, (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},{Convcol}<br/>
</code></pre>
</div>
)
}
makecol (cols, style, head) {
const 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) {
const items = []
for (let i = 0; i < data.length; i++) {
const row = Object.values(data[i])
const children = this.makecol(row, 'html')
items.push(<tr key={i}>{children}</tr>)
}
return items
}
htmlsrctable (data) {
const items = []
for (let i = 0; i < data.length; i++) {
const row = Object.values(data[i])
const children = this.makecol(row, 'htmlsrc')
items.push(<span key={i}><tr> {children} </tr><br key={i}/></span>)
}
return items
}
marktable (data) {
const items = []
for (let i = 0; i < data.length; i++) {
const row = Object.values(data[i])
const children = this.makecol(row, 'mark')
items.push(<span key={i}>|{children}<br key={i}/></span>)
}
return items
}
csvtable (data) {
const items = []
for (let i = 0; i < data.length; i++) {
const row = Object.values(data[i])
const children = this.makecol(row, 'csv')
items.push(<span key={i}>{children}<br key={i}/></span>)
}
return items
}
read_export (rawexport, n) {
const 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) {
const 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
case 'csv':
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