diff --git a/index-dev.html b/index-dev.html index 86dc9f1..1d02e3c 100644 --- a/index-dev.html +++ b/index-dev.html @@ -1,48 +1,48 @@ Cost Calculator + + + - + + + - - - - -
diff --git a/index-pres.html b/index-pres.html index 41f478e..7ee0fe9 100644 --- a/index-pres.html +++ b/index-pres.html @@ -1,42 +1,42 @@ Cost Calculator - + - +
diff --git a/index.html b/index.html index 5451544..b5fc575 100644 --- a/index.html +++ b/index.html @@ -1,48 +1,53 @@ Cost Calculator + + - + + + +
diff --git a/js/costcalc_main.jsx b/js/costcalc_main.jsx index d471caf..576597b 100644 --- a/js/costcalc_main.jsx +++ b/js/costcalc_main.jsx @@ -1,1506 +1,1540 @@ "use strict"; var projectname=''; var projectduration=0; // Functions Tools // --------------------- // --------------------- //function loop for react js function Repeat(props) { let items = []; for (let i = 0; i < props.numTimes; i++) { items.push(props.children(i)); } return
{items}
; } //convert string to numeric function tonumeric (value) { return parseFloat( value.toString().replace(/[^0-9\.]+/g, '') ); } // Covert numeric to money string -function tomoney(numeric) { +function tomoney(numeric,currency) { if (typeof numeric == 'string') { numeric = parseFloat(numeric); } - - return numeric.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') + ' '+MainData.Currency; + let strcur=''; + if(currency===undefined){ + strcur=MainData.Currency; + } + else { + strcur=currency; + } + return numeric.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') + ' '+strcur; } // return the sum of an array function sum(obj) { const val=Object.values(obj); var total = 0; for (var i = 0; i < val.length; i++) { total = total + tonumeric(val[i]); } return total; } // Comapare two obj return true is similar Object.compare = function (obj1, obj2) { //Loop through properties in object 1 for (var p in obj1) { //Check property exists on both objects if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p)) return false; switch (typeof (obj1[p])) { //Deep compare objects case 'object': if (!Object.compare(obj1[p], obj2[p])) return false; break; //Compare function code case 'function': if (typeof (obj2[p]) == 'undefined' || (p != 'compare' && obj1[p].toString() != obj2[p].toString())) return false; break; //Compare values default: if (obj1[p] != obj2[p]) return false; } } //Check object 2 for any extra properties for (var p in obj2) { if (typeof (obj1[p]) == 'undefined') return false; } return true; }; // Generate a random int function randomint(not){ var rnd; do { rnd=Math.floor(Math.random() * 100); var cont=false; for (let i = 0; i < not.length ; i++) { if (not[i]===rnd){ cont=true; } } } while(cont); return rnd; } // Inputs Definition // --------------------- // --------------------- // Display the amount selector class AmountInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.props.onChange(e.target.value); } render() { const value = this.props.value; return (
{this.props.name} : {value} {this.props.unit}
); } } // Display a select input box class SelectorInput extends React.Component { constructor(props) { super(props); // this.state={listoptions:this.makelist(props.options)}; this.handleChange = this.handleChange.bind(this); } rate(i){ return i; } makelist(data){ var listoptions=[]; for (var i = 0; i < data.length; i++) { listoptions.push(); } return listoptions; } handleChange(select) { this.props.onChange(select.target.value); } makerate(){ if (this.props.rate!=null){ - return( Rate : {this.props.rate} {this.props.unit} );} + return( Rate : {this.props.rate} {this.props.unit} );} } maketitle(title){ const maxstr=20 if (title.length>maxstr){ title=title.substr(0,maxstr)+"..."; } return title; } render() { return (
{this.makelist(this.props.options)}
{this.makerate()}
) } } // Make the know more button class MakeknowmoreInput extends React.Component { constructor(props) { super(props); this.state={btnsize:20} } render() { const data = this.props.data; if (((data.Url !== '') )) { // if (data.Url.length==1){ // return( // } url={data.Url[0].Url} // id="btn-plugin-knowmore" // class="btn-primary btn-sm" tips={"Know more about " + data.Name}/> // ); // }else { return (} options={data.Url} id="btn-plugin-knowmore" class="btn-primary btn-sm" tips={"Know more about " + data.Name}/>); //} } else{ return null } } } // Display a checkbox class CheckboxInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state={checked:this.props.defaults}; } handleChange() { this.setState({checked: !this.state.checked}); this.props.onChange(!this.state.checked); } render() { return (
); } } // Display a btn with link class ButtonHrefInput extends React.Component { constructor(props) { super(props); } render() { return ( {this.props.name} ); } } // Button with validation popup class ButtonInputWpop extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state={target:"Modal"+this.props.idp}; } handleChange() { const out={n:this.props.n,target:this.state.target}; this.props.onClick(out); } render() { return ( ); } } // Display a button class ButtonInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange() { this.props.onClick(this.props.n); } render() { return ( ); } } // Display a menu class MenuInput extends React.Component { constructor(props) { super(props); this.state={listoptions:this.makelist(props.options)}; } makelist(data){ var listoptions=[]; for (var i = 0; i < data.length; i++) { listoptions.push({data[i].Name}); } return listoptions; } render() { return (
{this.state.listoptions}
); } } // Text input box class TxtInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.props.onChange(e.target.value); } render() { return (
{this.props.Prepend}
{this.props.InvalidMessage}
); } } // Outputs definition // --------------------- // --------------------- // Display the cost output box class CostOutput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange() { this.props.onCostChange(this.props.display); } render() { return (
); } } // Display a text box for display function Textoutput(props){ return(
{props.text}
); } // Plugins definition // --------------------- // --------------------- class AmountRatesCost extends React.Component { constructor(props) { super(props); this.handleAmountChange = this.handleAmountChange.bind(this); this.handleRateChange = this.handleRateChange.bind(this); this.state={ Amount : 1, SelectRate : 0 , Rate : this.props.data.Rates[Object.keys(this.props.data.Rates)[0]], Adaptive:false, }; if(typeof this.props.data.Adaptive!=='undefined' && this.props.data.Adaptive===true){ this.state.Adaptive=true; } this.make_export(); } handleAmountChange(amount) { this.setState({Amount: amount}); } handleRateChange(select) { this.setState({SelectRate: select}); this.setState({Rate: this.props.data.Rates[Object.keys(this.props.data.Rates)[select]]}); } make_export(){ this.export=[ {Name:"Amount",Value:this.state.Amount+" "+this.props.data.AmountUnit}, {Name:this.props.data.RateName,Value:Object.keys(this.props.data.Rates)[this.state.SelectRate]} ]; this.props.export(this.export); } componentDidUpdate(){ this.makecost(this.state.Amount,this.state.Rate); this.make_export(); } render() { let Amount_min; let Amount_max; let Amount_stp; if(this.state.Adaptive){ Amount_min=this.props.data.AmountMin[this.state.SelectRate]; Amount_max=this.props.data.AmountMax[this.state.SelectRate]; Amount_stp=this.props.data.AmountStep[this.state.SelectRate]; } else { Amount_min=this.props.data.AmountMin; Amount_max=this.props.data.AmountMax; Amount_stp=this.props.data.AmountStep; } if(this.state.Amount>Amount_max){ this.state.Amount=Amount_max; } if(this.state.Amount
); } makecost(amount,rate) { let free; if(this.state.Adaptive){ free=this.props.data.AmountFree[this.state.SelectRate]; } else { free=this.props.data.AmountFree; } let total = (amount - free) * rate; if(this.props.data.ByYear) total=total*projectduration; total=tomoney(total); this.props.onCostChange(this.props.n,total); return total; } } class CategoryAmountRatesCost extends React.Component { constructor(props) { super(props); this.handleCatChange = this.handleCatChange.bind(this); this.handleAmountChange = this.handleAmountChange.bind(this); this.handleRateChange = this.handleRateChange.bind(this); this.state={ SelectCat : 0, Cat : this.props.data.Cat[Object.keys(this.props.data.Cat)[0]], Amount : 1, SelectRate : 0 , Rate : this.props.data.Rates[Object.keys(this.props.data.Rates)[0]], Adaptive: false, }; if(typeof this.props.data.Adaptive!=='undefined' && this.props.data.Adaptive===true){ this.state.Adaptive=true; } this.make_export(); } handleAmountChange(amount) { this.setState({Amount: amount}); } handleRateChange(select) { this.setState({SelectRate: select}); this.setState({Rate: this.props.data.Rates[Object.keys(this.props.data.Rates)[select]]}); } handleCatChange(select) { this.setState({SelectCat: select}); this.setState({Cat: this.props.data.Cat[Object.keys(this.props.data.Cat)[select]]}); } make_export(){ this.export=[ {Name:this.props.data.CatName,Value:Object.keys(this.props.data.Cat)[this.state.SelectCat]}, {Name:"Amount",Value:this.state.Amount+" "+this.props.data.AmountUnit}, {Name:this.props.data.RateName,Value:Object.keys(this.props.data.Rates)[this.state.SelectRate]} ]; this.props.export(this.export); } componentDidUpdate(){ this.makecost(this.state.Cat,this.state.Amount,this.state.Rate); this.make_export(); } render() { let Amount_min; let Amount_max; let Amount_stp; if(this.state.Adaptive){ Amount_min=this.props.data.AmountMin[this.state.SelectRate]; Amount_max=this.props.data.AmountMax[this.state.SelectRate]; Amount_stp=this.props.data.AmountStep[this.state.SelectRate]; } else { Amount_min=this.props.data.AmountMin; Amount_max=this.props.data.AmountMax; Amount_stp=this.props.data.AmountStep; } if(this.state.Amount>Amount_max){ this.state.Amount=Amount_max; } if(this.state.Amount
); } makecost(cat,amount,rate) { let free; if(this.state.Adaptive){ free=this.props.data.AmountFree[this.state.SelectRate]; } else { free=this.props.data.AmountFree; } var total=cat+(amount-free)*rate; total=tomoney(total); this.props.onCostChange(this.props.n,total); return total; } } class CategoryCost extends React.Component { constructor(props) { super(props); this.handleCatChange = this.handleCatChange.bind(this); this.state={SelectCat : 0, Cat : this.props.data.Cat[Object.keys(this.props.data.Cat)[0]] }; this.make_export(); } handleCatChange(select) { this.setState({SelectCat: select}); this.setState({Cat: this.props.data.Cat[Object.keys(this.props.data.Cat)[select]]}); } make_export(){ this.export=[ {Name:this.props.data.CatName,Value:Object.keys(this.props.data.Cat)[this.state.SelectCat]}, ]; this.props.export(this.export); } componentDidUpdate(){ this.makecost(this.state.Cat); this.make_export(); } render() { return (
); } makecost(cat) { var total=cat; total=tomoney(total); this.props.onCostChange(this.props.n,total); return total; } } class NoneSelect extends React.Component { constructor(props) { super(props); this.export=[] } render() { const Cost=tomoney(0); this.props.onCostChange(this.props.n,Cost); this.props.export(this.export); return (
Please select a provider in the list.
); } } class UserCost extends React.Component { constructor(props) { super(props); this.handleCostChange = this.handleCostChange.bind(this); this.handleProviderChange = this.handleProviderChange.bind(this); this.handleServiceChange = this.handleServiceChange.bind(this); this.handleYearChange = this.handleYearChange.bind(this); this.state={ total:0, CostError:false, ProviderError:true, ServiceError:true, ByYear:false, }; this.export=[]; } handleYearChange(state){ this.setState({ByYear: state}); } handleCostChange(value){ value=value.replace(/ /g, ""); if (isNaN(value)||value===''||typeof value == 'number'){ this.setState({CostError: true}); value=0; }else{ this.setState({CostError: false}); } if(this.state.ByYear) value=value*projectduration; this.setState({total:value}); this.props.onCostChange(this.props.n,tomoney(value)); } handleProviderChange(txt){ this.props.handleProviderChange(txt); if(txt ===''){ this.setState({ProviderError: true}); } else { this.setState({ProviderError: false}); } } handleServiceChange(txt){ this.props.handleServiceChange(txt); if(txt ===''){ this.setState({ServiceError: true}); } else { this.setState({ServiceError: false}); } } classtxt(error){ if(error){ return "is-invalid"; } else { return "is-valid"; } } render() { let Costname="Cost"; if(this.state.ByYear) Costname="Cost by year"; this.props.export(this.export); return (
); } } // Combine plugins // --------------------- // --------------------- // Manages what's display inside a plugin : provider selector, select the components... class ProviderPluginsSelector extends React.Component { constructor(props) { super(props); this.handleCostChange = this.handleCostChange.bind(this); this.handleProviderChange = this.handleProviderChange.bind(this); this.handleCommentChange = this.handleCommentChange.bind(this); this.handleAddPlugin = this.handleAddPlugin.bind(this); this.handleRmvPlugin = this.handleRmvPlugin.bind(this); this.handleProviderChangetxt = this.handleProviderChangetxt.bind(this); this.handleServiceChangetxt = this.handleServiceChangetxt.bind(this); this.make_exportcmp = this.make_exportcmp.bind(this); this.make_export = this.make_export.bind(this); this.state={ selected:0, keys:this.ProvidersName(props.data), n:1, cost:0, comments:"", Provider:"", Name:"", manualname:false, show_plus:false, exportcmp:"", }; } handleCostChange(n,e) { if (this.state.cost !== e ) { this.setState({cost: e}); this.props.handleCostChange(n,e); } } handleProviderChange(select){ this.setState({selected:select}); if (select>0){ this.setState({show_plus:true}); }else { this.setState({show_plus:false}); } this.state.Provider=this.props.data.Data[select].Provider; this.state.Name=this.props.data.Data[select].Name; this.props.handleCostChange(this.props.n,this.state.cost); } componentDidUpdate(){ this.props.handleCostChange(this.props.n,this.state.cost); this.make_export(); } make_exportcmp(data){ this.state.exportcmp=data } make_export(){ const out={ Category:this.props.data.Name, Provider:this.state.Provider, Name:this.state.Name, Comments:this.state.comments, ExportCmp:this.state.exportcmp, Cost:this.state.cost, }; this.props.export(out,this.props.n) } handleCommentChange(com){ this.setState({comments:com}); } handleAddPlugin(n){ this.props.handleAddPlugin(n); } handleRmvPlugin(n){ this.props.handleRmvPlugin(n); } handleProviderChangetxt(txt){ this.setState({Provider:txt}); // this.props.handleCostChange(this.props.n,this.state.cost);//provoke export update on the parent } handleServiceChangetxt(txt){ this.setState({Name:txt}); // this.props.handleCostChange(this.props.n,this.state.cost);//provoke export update on the parent } // Manage extra display info for a selected provider extrainfo(Cdata){ let Extra_inf=""; let Extra_infUrl=""; if ( typeof Cdata.ExtraInfoUrl !=='undefined' && Cdata.ExtraInfoUrl !==''){ Extra_infUrl=

To know more

; } if ( typeof Cdata.ExtraInfo !=='undefined' && Cdata.ExtraInfo !==''){ Extra_inf=
  {Cdata.ExtraInfo} {Extra_infUrl}
; } return(Extra_inf); } render() { const selected=this.state.selected; this.state.manualname=false; this.state.keys=this.ProvidersName(this.props.data); const Cmp=this.cmp2string(this.cmpdata(selected).Style); const Cdata=this.cmpdata(selected); const id=this.props.data.Name.replace(/\s/g,'')+this.props.n; return(
+ keys={this.state.keys} show_minus={this.props.show_minus} show_plus={this.state.show_plus} conv={this.props.conv}/>
-
+
{this.extrainfo(Cdata)}
); } cmpdata(select){ let out=this.props.data.Data[select]; if (this.state.manualname){ out.Name=this.state.Name; if ( this.state.Provider ==='') { this.state.keys[select] = 'Please provide a Provider'; }else { this.state.keys[select]=this.state.Provider; } } return out; } // return the correct style fct from the str input cmp2string(str){ switch (str) { case "AmountRatesCost" : return AmountRatesCost; case "CategoryCost" : return CategoryCost; case "CategoryAmountRatesCost" : return CategoryAmountRatesCost; case "NoneSelect":return NoneSelect; case "UserCost":{this.state.manualname=true; return UserCost;} } } ProvidersName(main){ const data = main.Data; var providers=[]; for (var i = 0; i < data.length; i++) { providers.push(data[i].Provider); } return providers; } } // Displays the header of a plugin (button +- name cost ...) class ModuleHeader extends React.Component{ constructor(props) { super(props); this.handleAddPlugin = this.handleAddPlugin.bind(this); this.handleRmvPlugin = this.handleRmvPlugin.bind(this); } handleAddPlugin(n){ this.props.handleAddPlugin(n); } handleRmvPlugin(n){ this.props.handleRmvPlugin(n); } byyear(by){ if(by){ return({projectduration} years); } else { return(); } } render() { let minus=''; let plus=''; + let convout=''; if (this.props.show_minus){ minus=} onClick={this.handleRmvPlugin} n={this.props.n} tips={"Remove this line"} idp={this.props.id} info={this.props.data.Name}/>; } if (this.props.show_plus){ plus= } - onClick={this.handleAddPlugin} n={this.props.n} tips={"Add a new "+this.props.data.Name}/> + onClick={this.handleAddPlugin} n={this.props.n} tips={"Add a new "+this.props.data.Name}/>; + } + if (this.props.conv.Enable) { + let value=Money.convert(tonumeric(this.props.Cost)); + value=tomoney(value,this.props.conv.Cur); + convout=; } - return( - -
{plus}
{minus}
{this.makeinfo(this.props.keys,this.props.selected,this.props.Cdata)}
{this.props.comments}
- + + {convout}
{this.byyear(this.props.Cdata.ByYear)}
); } makeinfo(keys,selected,Cdata){ let name=Cdata.Name; if ( name ===''&&keys[selected]===''){ name='Please provide a Provider'; return ({name}); }else if(keys[selected]==='None'){ return ({name}); }else{ return ({keys[selected]} : {name}); } } } //displays one kind plugin it manages the add and removes option class ManagePlugins extends React.Component{ constructor(props) { super(props); this.handleCostChange = this.handleCostChange.bind(this); this.handleAddPlugin = this.handleAddPlugin.bind(this); this.handleRmvPlugin = this.handleRmvPlugin.bind(this); this.make_exportplug=this.make_exportplug.bind(this); this.make_export = this.make_export.bind(this); this.state={ displayed:[], varsum:{}, plugins:[], export:[], }; this.state.displayed.push(randomint(this.state.displayed)); } handleRmvPlugin(n){ $('#'+n.target).modal('hide'); var tmp=this.state.displayed; tmp.splice(n.n,1); this.setState({displayed:tmp}); this.handleCostChange(n.n,0); } handleAddPlugin(n){ var tmp=this.state.displayed; tmp.splice(n+1,0,randomint(this.state.displayed)); this.setState({displayed:tmp}); } handleCostChange(n,cost) { this.state.varsum[n]=cost; this.props.handleCostChange(this.props.n,sum(this.state.varsum)); } make_exportplug(data,n) { this.state.export[n] = data; this.make_export() } make_export(){ if (this.state.export.length === this.give_n()) { this.props.export(this.state.export, this.props.n) } } give_id(index){ return this.state.displayed[index] } give_n(){ const disp=this.state.displayed; return disp.length } componentDidUpdate(){ this.make_export(); } render() { let show_minus = false; if (this.give_n()>1) { show_minus=true; } this.make_export(); return(
{(index) => } + handleRmvPlugin={this.handleRmvPlugin} export={this.make_exportplug} + conv={this.props.conv}/>}
);} } // displays all the plugins defined in the Maindata class PluginsMain extends React.Component { constructor(props) { super(props); this.handleCostChange = this.handleCostChange.bind(this); this.make_exportplug=this.make_exportplug.bind(this); this.make_export = this.make_export.bind(this); this.state={ varsum:{}, export:[], }; } handleCostChange(name,e) { this.state.varsum[name]=e; this.props.TotalCost(sum(this.state.varsum)); } make_exportplug(data,n) { this.state.export[n] = data; this.make_export(); } make_export(){ if (this.state.export.length === this.props.data.length) { this.props.export(this.state.export); } } render() { return(
Line controls
Category
Provider information
Cost
+
{(index) => } + export={this.make_exportplug} n={index} handleCostChange={this.handleCostChange} + conv={this.props.conv}/>} +
); } } // MAIN // --------------------- // --------------------- class Main extends React.Component { constructor(props) { + Money_GetRates(); super(props); this.handleCostChange = this.handleCostChange.bind(this); this.make_exportmain = this.make_exportmain.bind(this); this.handleNameChange = this.handleNameChange.bind(this); this.handleDurationChange = this.handleDurationChange.bind(this); + this.handleConvMoneyChange = this.handleConvMoneyChange.bind(this); + this.state= { total: 0, export: [], exportmain:[], name:'', duration:MainData.DefaultDuration, + conv:{Enable:false,Cur:''}, }; projectduration=this.state.duration; this.init=true; + + + } handleCostChange(total) { if (this.state.total !== total){ this.setState({total:total}); } } make_exportmain(idata) { const tmp=JSON.parse(JSON.stringify(idata)); let disp=false; if(!this.init){ if(!Object.compare(tmp,this.state.exportmain.data)){ disp=true; } } if((this.init)||(disp)){ this.setState({exportmain: {data: tmp, total: tomoney(this.state.total)}}); this.init=false; } } handleNameChange(name){ this.setState({name:name}); projectname=name; } handleDurationChange(d){ this.setState({duration:d}); projectduration=d; } - + handleConvMoneyChange(conv){ + this.setState({conv:conv}); + } render() { return(
{this.page_head()}
{this.project_info()} - + - {this.final_cost()} + {this.final_cost(this.state.conv)} - + {this.howto()}
{this.page_foot()}
); } + project_info(){ return(
+
+ +
); } // Display the total cost - final_cost(){ + final_cost(conv){ let disps=''; if(projectduration>1) disps='s'; + let convout=''; + if (conv.Enable) { + let value=Money.convert(this.state.total); + value=tomoney(value,conv.Cur); + convout=; + } return(
{/**/}

Total Cost for {projectduration} year{disps}

+ {convout}
); } // Define the head (top) of the page page_head(){ return(

EPFL Library
Cost Calculator for Data Management

Welcome to our cost calculator this tool will help researcher to have an estimate of the cost of managing, storing and publishing data.

Many providers are included in the service and you will be able to calculate a cost based on your needs.
Total cost is calculated dynamically based on your inputs.

We hope you will enjoy this tool and it will be useful for you.

   I need help with my DMP
); } //Define the foot (bottom) of the page page_foot(){ return(

This service has been developed by the Resarch Data Management Team of the EPFL Library
This software is publish under GPL-3.0-only license and your are using Version {MainData.Version}
Source code can be download here

Icons are from the Noun Project (Book by Randi NI, Storage by I Pitu, Database by Novalyi, data cloud by Vectors Market, Information and Next by Gregor Cresnar, Database by Creative Mahira)

); } // Define the howto (user guide) howto(){ return(

HOWTO

Categories
This tool is divided by categories (for example Activate storage). Click on the category name, and it will expand.
Providers

Providers can be chosen from the Select a provider box. You can then tune your setting for this provider to fit your needs.

If the provider you want is not registered, you can add it manually with Provide your own provider and then enter your provider/service and cost.

Add or Remove Line

If you want to add a new provider use the } tips={"Add a new category"} onClick={this.fctnull}/> button.

You can also remove a provider with } tips={"Remove this line"} onClick={this.fctnull}/> button.

To know more about
Some extra information about the category or the provider can be obtained with the } tips={"Know more"} onClick={this.fctnull}/> button.
Comments your input
Comments are for your own usage, you can use for remembering what each section is and for a nice export.
Export
You can export your work into different format :
HTML : This format can be used in any wordprocessing software (such as Microsoft Word or Libreoffice).
HTML Source code, Markdown, and CSV formats are also possible.
Click on the in order to copy your work into your clipboard. A simple Paste will transfer your work into any software.
); } // Function use by the howto btn to move the page move2howto(){ $('html,body').animate({ scrollTop: $("#howto").offset().top}, 'slow'); } fctnull(){} } //Main Declaration // --------------------- // --------------------- ReactDOM.render(
,document.getElementById('root')); $(function () { $('[data-toggle="tooltip"]').tooltip() }); diff --git a/js/costcalc_money.jsx b/js/costcalc_money.jsx new file mode 100644 index 0000000..a7c281a --- /dev/null +++ b/js/costcalc_money.jsx @@ -0,0 +1,112 @@ +"use strict"; +// Money is the http://openexchangerates.github.io/money.js/#playground Lib +var Money = fx.noConflict(); +// Become true if money conv is configured and connected correctly +var Money_Enable=false; + +class CurrencySelect extends React.Component { + constructor(props) { + super(props); + this.handleCurChange = this.handleCurChange.bind(this); + let selectable=MainData.Conv; + selectable.unshift(MainData.Currency); + this.state={ + Enable:false, + SelectCur : 0, + Cur : selectable[0], + Selectable: selectable, + prevselec:-1, + }; + //this.make_export(); + this.moneyset(0); + } + + moneyset(select){ + Money.settings = + { + from: MainData.Currency, + to: this.state.Selectable[select], + }; + } + handleCurChange(select) { + if(select==='0'){ + this.setState({Enable: false}); + } + else{ + this.setState({Enable: true}); + } + this.setState({SelectCur: select}); + this.setState({Cur: this.state.Selectable[select]}); + this.moneyset(select); + } + // make_export(){ + // this.export=[ + // {Name:this.props.data.CurName,Value:Object.keys(this.props.data.Cur)[this.state.SelectCurt]}, + // ]; + // this.props.export(this.export); + // } + componentDidUpdate(){ + // this.makecost(this.state.Cat); + // this.make_export(); + if(this.state.prevselec!==this.state.SelectCur) { + this.props.money({Enable: this.state.Enable, Cur: this.state.Cur}); + this.state.prevselec = this.state.SelectCur; + } + + } + render() { + if (Money_Enable) { + if(this.state.Enable){ + let r = Money.convert(1).toFixed(2);; + let rate = '1' + MainData.Currency + '=' + r + this.state.Cur; + return ( + + ); + }else{ + return( + + ); + } + } else { + return (null); + } + } + makecost(cat) { + var total=cat; + total=tomoney(total); + this.props.onCostChange(this.props.n,total); + return total; + } +} + +/** + * @return {boolean} + */ +function Money_GetRates(){ + // Load exchange rates data via AJAX: + if(MainData.OEXRApi!=='') { + let com = $.ajax({ + // NB: using Open Exchange Rates here, but you can use any source! + url:'https://openexchangerates.org/api/latest.json?app_id=' +MainData.OEXRApi, + dataType: 'json', + async: false, + success: function(data) { + Money.rates = data.rates; + Money.base = data.base; + }, + + }) + .done(function(){ + console.log("Money data loaded"); + Money_Enable = true; + }) + .fail(function(){ + console.log("Error loading data money"); + Money_Enable = false; + }); + } + return Money_Enable; +} \ No newline at end of file diff --git a/js/data.js b/js/data.js index 5056945..b671bb1 100644 --- a/js/data.js +++ b/js/data.js @@ -1,476 +1,478 @@ // Providers // ---------------------------------------------------- // ---------------------------------------------------- // Storage const NasEpfl = { Style: "AmountRatesCost", Provider : "EPFL-VPSI", Name:'NAS', Url : [ {Name:'VPSI-Website',Url:'https://support.epfl.ch/help/epfl?id=epfl_service_status&service=49a363acdb34c700ef64731b8c96191f'}, {Name:'SV-IT Storage Website',Url:'https://sv-it.epfl.ch/stockage'} ], ExtraInfo:"The first TB is free", ByYear:true, Adaptive:false, AmountName: "Amount", AmountUnit: "TB", AmountMin : 1, AmountMax : 500, AmountStep : 1, AmountFree:1, AmountFreeCumulative:false, RateName : 'Performance', Rates : { 'Collaborative': 165, 'On-line archive': 110, 'Raw': 55 }, RateUnit : "CHF / TB" }; const SwitchEpfl = { Style : 'CategoryCost', Provider : "Switch-EPFL", Name:'Online Storage', ByYear:true, Url : [ {Name:'Switch Website',Url:'https://drive.switch.ch/'} ], CatName:'Options', Cat:{ 'Cloud Based max 50GB':0, }, CatUnit:'CHF', }; const GoogleDriveEdu = { Style : 'CategoryCost', Provider : "Google Drive Educ", Name:'Online Storage', ByYear:true, Adaptive:false, ExtraInfo : "Google Storage is not recommended as the data are stored outside of Switzerland", ExtraInfoUrl :"https://support.epfl.ch/kb_view_customer.do?sysparm_article=KB0012829", Url : [ {Name :'Google Education Page',Url:'https://edu.google.com/?modal_active=none'} ], CatName:'Options', Cat:{ 'Cloud Based illimited':0, }, CatUnit:'CHF', }; const Dropbox_perso = { Style : 'CategoryCost', Provider : "Dropbox Personnal", Name:'Online Storage', ByYear:true, ExtraInfo : "Dropbox is not recommended as the data are stored outside of Switzerland", ExtraInfoUrl :"https://support.epfl.ch/kb_view_customer.do?sysparm_article=KB0012829", Url : [ {Name :'Dropbox',Url:'https://www.dropbox.com/plans?trigger=nr'} ], CatName:'Plan', Cat:{ 'Personal Free 2Go':0, 'Personal Plus 1TB':112, 'Personal Pro 2TB':226, }, CatUnit:'CHF', }; const Dropbox_team = { Style : 'AmountRatesCost', Provider : "Dropbox for Team", Name:'Online Storage', ByYear:true, ExtraInfo : "Dropbox is not recommended as the data are stored outside of Switzerland", ExtraInfoUrl :"https://support.epfl.ch/kb_view_customer.do?sysparm_article=KB0012829", Url : [ {Name :'Dropbox',Url:'https://www.dropbox.com/plans?trigger=nr'} ], Adaptive:false, AmountName: "Number of Users", AmountUnit: "Users", AmountMin : 1, AmountMax : 500, AmountStep : 1, AmountFree:0, AmountFreeCumulative:false, RateName : 'Plan', Rates : { 'Standard': 136, 'Advanced': 204, }, RateUnit : "CHF / User" }; // ELN const SLIMSEpfl = { Style:'CategoryAmountRatesCost', Provider : "EPFL-SV-IT", Name:'SLIMS', ByYear:true, Url : [ {Name:'SLIMS on SV-IT Website',Url:'https://sv-it.epfl.ch/lims'}, {Name: 'Genohm (SLIMS Company)',Url:'https://www.genohm.com/'} ], CatName:'PI Status', Cat:{ 'Full Professor':3000, 'Associate Professor':2000, 'Tenure Track Assistant Professor or Core Facility':1000 }, CatUnit:'CHF', Adaptive:false, AmountName: "Storage", AmountUnit: "TB", AmountMin : 1, AmountMax : 100, AmountStep : 1, AmountFree:0, AmountFreeCumulative:false, RateName: 'ELN Storage', Rates : { 'Stored on EPFL Server': 165, }, RateUnit : "CHF / TB" }; const ELNEpfl = { Style : 'CategoryCost', Provider : "ELN-EPFL", Name:'ELN', ByYear:true, Url : [ {Name:'ELN Website',Url:'https://eln.epfl.ch/'} ], CatName:'Options', Cat:{ 'Free for EPFL community':0, }, CatUnit:'CHF', }; const Rspace = { Style : 'CategoryCost', Provider : "Rspace community", Name:'Rspace', ByYear:true, Url : [ {Name:'Rspace Website',Url:'https://www.researchspace.com/'} ], CatName:'Options', Cat:{ 'Cloud Based unlimited storage and user':0, }, CatUnit:'CHF', }; const Benchling = { Style : 'CategoryCost', Provider : "Benchling", Name:'ELN', ByYear:true, ExtraInfo : "The first 10GB are free", ExtraInfoUrl :"", Url : [ {Name :'Benchling website',Url:'https://benchling.com/academic'} ], CatName:'Options', Cat:{ 'Cloud Based 10GB':0, }, CatUnit:'CHF', }; // Database const MysqlEpfl = { Style : 'CategoryCost', Provider : "EPFL-VPSI", Name:'MySql', ByYear:true, Adaptive:false, Url : [ {Name:'EPFL VPSI ',Url:'https://support.epfl.ch/epfl?id=epfl_service_status&service=eb026fa0db34c700ef64731b8c96198e'} ], CatName:'Options', Cat:{ 'MySQL max 2GB':0, }, CatUnit:'CHF', }; // Repository const Zenodo = { Style : 'CategoryCost', Provider : "Zenodo-CERN", Name:'Zenodo', ByYear:false, Adaptive:false, Url : [ {Name:'Zenodo Website',Url:'https://www.zenodo.org/'}, {Name:'About Zenodo',Url:'http://about.zenodo.org/'}, ], CatName:'Options', Cat:{ 'Max 50GB per Dataset':0, }, CatUnit:'CHF', }; const C4science = { Style : 'CategoryCost', Provider : "EPFL-SCITAS", Name:'C4Science', Url : [ {Name:'C4Science Website',Url:'https://www.c4science.ch/'} ], ByYear:true, Adaptive:false, ExtraInfo:'C4Science is the repository recommended by EPFL for code repository', CatName:'Options', Cat:{ 'Free for text file':0, }, CatUnit:'CHF', }; const Github = { Style: "AmountRatesCost", Provider : "GitHub", Name:'GitHub', Url : [ {Name:'Github Website Pricing',Url:'https://github.com/pricing'} ], AmountName: "Number of user", AmountUnit: "User(s)", Adaptive:true, ByYear:true, AmountMin : [1,1,5,10], AmountMax : [100,1,100,100], AmountStep : [1,1,1,1], AmountFree:[0,0,0,0], AmountFreeCumulative:false, RateName:'Plan', Rates:{ 'OpenSource project':0, 'Developer (for one user)':81.6, 'Team (min 5 users)':104.9, 'Business Cloud':244.7 }, RateUnit:'CHF / Users', }; const Bitbucket= { Style: "AmountRatesCost", Provider : "Bitbucket", Name:'BitBucket', Url : [ {Name:'Bitbucket Website Pricing',Url:'https://bitbucket.org/product/pricing'} ], AmountName: "Number of user", AmountUnit: "User(s)", Adaptive:true, ByYear:true, AmountMin : [1,5,5], AmountMax : [5,100,100], AmountStep : [1,1,1], AmountFree:[0,0,0], AmountFreeCumulative:false, RateName:'Plan', Rates:{ 'Free (up to 5 users)':0, 'Standard for growing teams (min 5 users)':24, 'Premium for large teams (min 5 users)':60, }, RateUnit:'CHF / Users', }; const Gitlab= { Style: "AmountRatesCost", Provider : "Gitlab", Name:'Gitlab', Url : [ {Name:'Gitlab Website Pricing',Url:'https://about.gitlab.com/pricing/'} ], AmountName: "Number of user", AmountUnit: "User(s)", AmountMin : 1, AmountMax : 100, AmountStep : 1, AmountFree:0, Adaptive:false, AmountFreeCumulative:false, ByYear:true, RateName:'Plan', Rates:{ 'Core Self Hosted':0, 'Free Cloud Based' : 0, 'Starter Self Hosted':48, 'Bronze Cloud based':48, 'Premium Self Hosted':228, 'Silver Cloud Based':228 }, RateUnit:'CHF / Users', }; const Figshare = { Style : 'CategoryCost', Provider : "FigShare", Name:'Figshare', ByYear:false, Adaptive:false, Url : [ {Name:'Figshare website',Url:'https://figshare.com/'}, {Name:'Figshare Pricing',Url:'https://www.g2crowd.com/products/figshare/pricing'} ], ExtraInfo:'The costs of enabling access to research data under an SNSF grant are eligible. The data archives (data repositories) have to meet the FAIR principles.', ExtraInfoUrl:'http://www.snf.ch/SiteCollectionDocuments/snsf-general-implementation-regulations-for-the-funding-regulations-e.pdf#page=14', CatName:'Options', Cat:{ 'Free 1GB':0, '10GB':96, '15GB':132, '20GB':180 }, CatUnit:'CHF', }; const Dryad = { Style : 'CategoryAmountRatesCost', Provider : "Dryad", Name:'Dyrad', Url : [ {Name:'Dryad Website Pricing',Url:'https://Datadryad.org/pages/payment'} ], ByYear:false, ExtraInfo:'The costs of enabling access to research data under an SNSF grant are eligible. The data archives (data repositories) have to meet the FAIR principles.', ExtraInfoUrl:'http://www.snf.ch/SiteCollectionDocuments/snsf-general-implementation-regulations-for-the-funding-regulations-e.pdf#page=14', CatName:'Options', Cat:{ 'up to 20GB if DPC covered':0, 'up to 20GB if no DPC covered':120 }, CatUnit:'CHF', AmountName: "Storage", AmountUnit: "GB", Adaptive:false, AmountMin : 20, AmountMax : 100, AmountStep : 10, AmountFree:20, AmountFreeCumulative:false, RateName: 'Storage', Rates : { 'Extra Storage': 50, }, RateUnit : "CHF / GB" }; // System variable definition // ---------------------------------------------------- // ---------------------------------------------------- const NoneSelected={ Style: 'NoneSelect', Provider:'None', Name:'Select a Provider', Url:'', ByYear:false, }; const UserCostSelect={ Style : 'UserCost', Provider:'Manual Provider', Name:'', Url:'', ByYear:false, }; // Categories definition // ---------------------------------------------------- // ---------------------------------------------------- const storage={ Name : 'Active Storage', Icon : 'storage.png', Url : [ {Name:'EPFL RDM',Url:'https://researchData.epfl.ch/work-with-Data/storage/'}, {Name:'Comparison of file synchronization software',Url:'https://en.wikipedia.org/wiki/Comparison_of_file_synchronization_software'} ], Data :[NoneSelected, NasEpfl, SwitchEpfl, GoogleDriveEdu, Dropbox_perso, Dropbox_team, UserCostSelect, ] }; const ELN={ Name : 'Electronic LabBook', Icon : 'eln.png', Url : [ {Name: 'EPFL RDM',Url:'https://researchData.epfl.ch/work-with-Data/active-Data-management/'} ], Data :[NoneSelected, SLIMSEpfl, ELNEpfl, Rspace, Benchling, UserCostSelect, ] }; const Database={ Name : 'Database', Icon : 'database.png', Url : '', Data :[NoneSelected, MysqlEpfl, UserCostSelect, ] }; const datarepository={ Name : 'Data Repository', Icon : 'drepos.png', Url : [ {Name:'EPFL RDM WebPage',Url:'https://researchData.epfl.ch/publish-preserve/'} ], Data :[ NoneSelected, Zenodo, Figshare, Dryad, UserCostSelect, ] }; const coderepository={ Name : 'Collaborative Repository', Icon : 'crepos.png', Url : '', Data :[ NoneSelected, C4science, Github, Bitbucket, Gitlab, UserCostSelect, ] }; // Combine Categories // ---------------------------------------------------- // ---------------------------------------------------- const MainData={ Updated:'30/01/2019', HelpUrl:'mailto:researchdata@epfl.ch', Currency:'CHF', + OEXRApi:'cd8d785bdb6646b0a7e4c0eba5a74199', + Conv:['EUR','USD','GBP'], Version : 'v1.5', DefaultDuration:1, Data:[storage,ELN,Database,datarepository,coderepository], }; diff --git a/js/money.js b/js/money.js new file mode 100644 index 0000000..359df37 --- /dev/null +++ b/js/money.js @@ -0,0 +1,166 @@ +/*! + * money.js / fx() v0.2 + * Copyright 2014 Open Exchange Rates + * + * JavaScript library for realtime currency conversion and exchange rate calculation. + * + * Freely distributable under the MIT license. + * Portions of money.js are inspired by or borrowed from underscore.js + * + * For details, examples and documentation: + * http://openexchangerates.github.io/money.js/ + */ +(function(root, undefined) { + + // Create a safe reference to the money.js object for use below. + var fx = function(obj) { + return new fxWrapper(obj); + }; + + // Current version. + fx.version = '0.2'; + + + /* --- Setup --- */ + + // fxSetup can be defined before loading money.js, to set the exchange rates and the base + // (and default from/to) currencies - or the rates can be loaded in later if needed. + var fxSetup = root.fxSetup || { + rates : {}, + base : "" + }; + + // Object containing exchange rates relative to the fx.base currency, eg { "GBP" : "0.64" } + fx.rates = fxSetup.rates; + + // Default exchange rate base currency (eg "USD"), which all the exchange rates are relative to + fx.base = fxSetup.base; + + // Default from / to currencies for conversion via fx.convert(): + fx.settings = { + from : fxSetup.from || fx.base, + to : fxSetup.to || fx.base + }; + + + /* --- Conversion --- */ + + // The base function of the library: converts a value from one currency to another + var convert = fx.convert = function(val, opts) { + // Convert arrays recursively + if (typeof val === 'object' && val.length) { + for (var i = 0; i< val.length; i++ ) { + val[i] = convert(val[i], opts); + } + return val; + } + + // Make sure we gots some opts + opts = opts || {}; + + // We need to know the `from` and `to` currencies + if( !opts.from ) opts.from = fx.settings.from; + if( !opts.to ) opts.to = fx.settings.to; + + // Multiple the value by the exchange rate + return val * getRate( opts.to, opts.from ); + }; + + // Returns the exchange rate to `target` currency from `base` currency + var getRate = function(to, from) { + // Save bytes in minified version + var rates = fx.rates; + + // Make sure the base rate is in the rates object: + rates[fx.base] = 1; + + // Throw an error if either rate isn't in the rates array + if ( !rates[to] || !rates[from] ) throw "fx error"; + + // If `from` currency === fx.base, return the basic exchange rate for the `to` currency + if ( from === fx.base ) { + return rates[to]; + } + + // If `to` currency === fx.base, return the basic inverse rate of the `from` currency + if ( to === fx.base ) { + return 1 / rates[from]; + } + + // Otherwise, return the `to` rate multipled by the inverse of the `from` rate to get the + // relative exchange rate between the two currencies + return rates[to] * (1 / rates[from]); + }; + + + /* --- OOP wrapper and chaining --- */ + + // If fx(val) is called as a function, it returns a wrapped object that can be used OO-style + var fxWrapper = function(val) { + // Experimental: parse strings to pull out currency code and value: + if ( typeof val === "string" ) { + this._v = parseFloat(val.replace(/[^0-9-.]/g, "")); + this._fx = val.replace(/([^A-Za-z])/g, ""); + } else { + this._v = val; + } + }; + + // Expose `wrapper.prototype` as `fx.prototype` + var fxProto = fx.prototype = fxWrapper.prototype; + + // fx(val).convert(opts) does the same thing as fx.convert(val, opts) + fxProto.convert = function() { + var args = Array.prototype.slice.call(arguments); + args.unshift(this._v); + return convert.apply(fx, args); + }; + + // fx(val).from(currency) returns a wrapped `fx` where the value has been converted from + // `currency` to the `fx.base` currency. Should be followed by `.to(otherCurrency)` + fxProto.from = function(currency) { + var wrapped = fx(convert(this._v, {from: currency, to: fx.base})); + wrapped._fx = fx.base; + return wrapped; + }; + + // fx(val).to(currency) returns the value, converted from `fx.base` to `currency` + fxProto.to = function(currency) { + return convert(this._v, {from: this._fx ? this._fx : fx.settings.from, to: currency}); + }; + + + /* --- Module Definition --- */ + + // Export the fx object for CommonJS. If being loaded as an AMD module, define it as such. + // Otherwise, just add `fx` to the global object + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = fx; + } + exports.fx = fx; + } else if (typeof define === 'function' && define.amd) { + // Return the library as an AMD module: + define([], function() { + return fx; + }); + } else { + // Use fx.noConflict to restore `fx` back to its original value before money.js loaded. + // Returns a reference to the library's `fx` object; e.g. `var money = fx.noConflict();` + fx.noConflict = (function(previousFx) { + return function() { + // Reset the value of the root's `fx` variable: + root.fx = previousFx; + // Delete the noConflict function: + fx.noConflict = undefined; + // Return reference to the library to re-assign it: + return fx; + }; + })(root.fx); + + // Declare `fx` on the root (global/window) object: + root['fx'] = fx; + } + + // Root will be `window` in browser or `global` on the server: +}(this)); diff --git a/js/money.min.js b/js/money.min.js new file mode 100644 index 0000000..0b22ca2 --- /dev/null +++ b/js/money.min.js @@ -0,0 +1,2 @@ +/* money.js 0.2, MIT license, http://openexchangerates.github.io/money.js */ +(function(g,j){var b=function(a){return new i(a)};b.version="0.1.3";var c=g.fxSetup||{rates:{},base:""};b.rates=c.rates;b.base=c.base;b.settings={from:c.from||b.base,to:c.to||b.base};var h=b.convert=function(a,e){if("object"===typeof a&&a.length){for(var d=0;d