Last active
August 29, 2015 14:09
-
-
Save hartmamt/a262bc958bf72a6cb3a4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @jsx React.DOM | |
*/ | |
var MealCalc = React.createClass({ | |
render: function() { | |
var total = this.props.meals.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
Breakfast: previousValue.Breakfast + currentValue.Breakfast, | |
Lunch: previousValue.Lunch + currentValue.Lunch, | |
Dinner: previousValue.Dinner + currentValue.Dinner | |
}; | |
}); | |
return ( | |
<tr> | |
<td colSpan="2">Total (include Tips)</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td>{total.Breakfast + total.Lunch + total.Dinner}</td> | |
<td></td> | |
</tr> | |
); | |
} | |
} | |
); | |
var MilesCalc = React.createClass({ | |
render: function() { | |
var total = this.props.miles.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
distance: (previousValue.distance) + (currentValue.distance) | |
}; | |
}); | |
return ( | |
<tr> | |
<td colSpan="2">Mult. By Allow per mile (.45 cents)</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td>${total.distance * .45}</td> | |
<td></td> | |
</tr> | |
); | |
} | |
} | |
); | |
var MilesRow = React.createClass({ | |
render: function() { | |
var total = this.props.miles.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
distance: previousValue.distance + currentValue.distance | |
}; | |
}); | |
return ( | |
<tr> | |
<td colSpan="2"><strong>Miles Driven</strong></td> | |
<td>{this.props.miles[0].distance}</td> | |
<td>{this.props.miles[1].distance}</td> | |
<td>{this.props.miles[2].distance}</td> | |
<td>{this.props.miles[3].distance}</td> | |
<td>{this.props.miles[4].distance}</td> | |
<td>{this.props.miles[5].distance}</td> | |
<td>{this.props.miles[6].distance}</td> | |
<td>{total}</td> | |
<td></td> | |
</tr> | |
); | |
} | |
} | |
); | |
var MealRow = React.createClass({ | |
render: function() { | |
var total=0; | |
if (this.props.meal=="Breakfast") { | |
var total = this.props.meals.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
Breakfast: previousValue.Breakfast + currentValue.Breakfast | |
}; | |
}); | |
return ( | |
<tr> | |
<td></td> | |
<td>{this.props.meal}</td> | |
<td>{this.props.meals[0].Breakfast}</td> | |
<td>{this.props.meals[1].Breakfast}</td> | |
<td>{this.props.meals[2].Breakfast}</td> | |
<td>{this.props.meals[3].Breakfast}</td> | |
<td>{this.props.meals[4].Breakfast}</td> | |
<td>{this.props.meals[5].Breakfast}</td> | |
<td>{this.props.meals[6].Breakfast}</td> | |
<td>{total}</td> | |
<td></td> | |
</tr> | |
); | |
} else if (this.props.meal=="Lunch") { | |
var total = this.props.meals.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
Lunch: previousValue.Lunch + currentValue.Lunch | |
}; | |
}); | |
return ( | |
<tr> | |
<td></td> | |
<td>{this.props.meal}</td> | |
<td>{this.props.meals[0].Lunch}</td> | |
<td>{this.props.meals[1].Lunch}</td> | |
<td>{this.props.meals[2].Lunch}</td> | |
<td>{this.props.meals[3].Lunch}</td> | |
<td>{this.props.meals[4].Lunch}</td> | |
<td>{this.props.meals[5].Lunch}</td> | |
<td>{this.props.meals[6].Lunch}</td> | |
<td>{total}</td> | |
<td></td> | |
</tr> | |
); | |
} else if (this.props.meal=="Dinner") { | |
var total = this.props.meals.reduce( | |
function(previousValue, currentValue, index, array) { | |
return { | |
Dinner: previousValue.Dinner + currentValue.Dinner | |
}; | |
}); | |
return ( | |
<tr> | |
<td></td> | |
<td>{this.props.meal}</td> | |
<td>{this.props.meals[0].Dinner}</td> | |
<td>{this.props.meals[1].Dinner}</td> | |
<td>{this.props.meals[2].Dinner}</td> | |
<td>{this.props.meals[3].Dinner}</td> | |
<td>{this.props.meals[4].Dinner}</td> | |
<td>{this.props.meals[5].Dinner}</td> | |
<td>{this.props.meals[6].Dinner}</td> | |
<td>{total}</td> | |
<td></td> | |
</tr> | |
); | |
} | |
} | |
} | |
); | |
var DateRow = React.createClass({ | |
render: function() { | |
return ( | |
<tr> | |
<td colSpan="2">Date</td> | |
<td>Sunday<br/>Sept 7, 2014</td> | |
<td>Monday<br/>Sept 8, 2014</td> | |
<td>Tuesday<br/>Sept 9, 2014</td> | |
<td>Wednesday<br />Sept 10, 2014</td> | |
<td>Thursday<br />Sept 11, 2014</td> | |
<td>Friday<br />Sept 12, 2014</td> | |
<td>Saturday<br />Sept 13, 2014</td> | |
<td>Totals</td> | |
<td></td> | |
</tr> | |
); | |
} | |
} | |
); | |
var ExpenseReport = React.createClass({ | |
render: function() { | |
var miles = this.props.miles; | |
var meals = this.props.meals; | |
return ( | |
<table width="100%" border="1"> | |
<tr> | |
<th>Section 1</th> | |
<th colSpan="9">Auto and Meals Expense</th> | |
<th> Section 3 Comments</th> | |
</tr> | |
<DateRow startDate = "09/07/2014" /> | |
<MilesRow miles={miles} /> | |
<MilesCalc miles={miles} /> | |
<MealRow meals={meals} meal="Breakfast"/> | |
<MealRow meals={meals} meal="Lunch"/> | |
<MealRow meals={meals} meal="Dinner"/> | |
<MealCalc meals={meals}/> | |
</table> | |
); | |
}, | |
}); | |
/* mock data */ | |
var miles = [ | |
{distance:3.3}, | |
{distance:4.0}, | |
{distance:2.0}, | |
{distance:0.0}, | |
{distance:0.0}, | |
{distance:0.0}, | |
{distance:22} | |
]; | |
var meals = [ | |
{Breakfast:2.0,Lunch:3.5,Dinner:9.9}, | |
{Breakfast:9.0,Lunch:3.5,Dinner:9.9}, | |
{Breakfast:0.0,Lunch:12.5,Dinner:20}, | |
{Breakfast:8.4,Lunch:5,Dinner:30}, | |
{Breakfast:9.9,Lunch:3.5,Dinner:32}, | |
{Breakfast:2.0,Lunch:3.5,Dinner:9}, | |
{Breakfast:5,Lunch:8,Dinner:22.30} | |
]; | |
React.renderComponent(<ExpenseReport miles={miles} meals={meals} />, document.body); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table width="100%" border="1"> | |
<tr> | |
<th>Section 1</th> | |
<th colspan="9">Auto & Meals Expense</th> | |
<th> Section 3 Comments</th> | |
</tr> | |
<tr> | |
<td colspan="2" style="font-weight: 700">Date</td> | |
<td style="font-weight: 700">Sunday<br />Sept 7, 2014</td> | |
<td style="font-weight: 700">Monday<br />Sept 8, 2014</td> | |
<td style="font-weight: 700">Tuesday<br />Sept 9, 2014</td> | |
<td style="font-weight: 700">Wednesday<br />Sept 10, 2014</td> | |
<td style="font-weight: 700">Thursday<br />Sept 11, 2014</td> | |
<td style="font-weight: 700">Friday<br />Sept 12, 2014</td> | |
<td style="font-weight: 700">Saturday<br />Sept 13, 2014</td> | |
<td style="font-weight: 700">Totals</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="2"><strong>Miles Driven</strong></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="2" style="font-weight: 700">Mult. By Allow per mile (.45 cents)</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>Breakfast</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>Lunch</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>Dinner</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="2" style="font-weight: 700">Total (include Tips)</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr><td colspan="11"> </td></tr> | |
<tr> | |
<td colspan="2" style="font-weight: 700">Entertainment</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="2" style="text-align:right; font-weight: 700;">Totals</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="9" style="text-align:right; font-weight: 700;">Section 1 Subtotal</td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<th>Section 2</th> | |
<th colspan="9">Other Expenses</th> | |
<th>Section 4 Accouting Use Only</th> | |
</tr> | |
<tr> | |
<td colspan="2"></td> | |
<td style="font-weight: 700">Sept 7, 2014</td> | |
<td style="font-weight: 700">Sept 8, 2014</td> | |
<td style="font-weight: 700">Sept 9, 2014</td> | |
<td style="font-weight: 700">Sept 10, 2014</td> | |
<td style="font-weight: 700">Sept 11, 2014</td> | |
<td style="font-weight: 700">Sept 12, 2014</td> | |
<td style="font-weight: 700">Sept 13, 2014</td> | |
<td style="font-weight: 700">Totals</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td rowspan="4" style="font-weight: 700">Transportation</td> | |
<td>Car Rental</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Plane, Bus, etc</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Taxi, Parking, etc</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Fuel</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td style="font-weight: 700">Lodging</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td rowspan="6" style="font-weight: 700">Misc</td> | |
<td>Misc</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Hotel</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Supplies</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Training / Seminar</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Vehicle Expense</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td>Tool Bow Towing</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="2" style="text-align:right; font-weight: 700;">Totals</td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="9" style="text-align:right; font-weight: 700;">Section 2 Subtotal</td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="9" style="text-align:right; font-weight: 700;">Total Expenses</td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="9" style="text-align:right; font-weight: 700;">Less Amount Advanced</td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td colspan="9" style="text-align:right; font-weight: 700;">Amout Due to Employee</td> | |
<td></td> | |
<td></td> | |
</tr> | |
</table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="http://jsfiddle.net/4TpnG/444/">Expense Fiddle</a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment