<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Battery life calculator</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Awake (mS)</th>
<th>Times (No/h)</th>
<th>Current (mA)</th>
<th>Current per hour (mA)</th>
<th>Current per year (mA)</th>
<th>Battery use (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="vert-align">Force all</td>
<td></td>
<td><input type="text" class="form-control" id="t_all" value=""></td>
<td></td>
<td class="vert-align"></td>
<td class="vert-align"></td>
<td class="vert-align"></td>
</tr>
<tr>
<td class="vert-align">Transmit</td>
<td><input type="text" class="form-control" id="mS_1" value="70"></td>
<td><input type="text" class="form-control t_force" id="t_1" value="12"></td>
<td><input type="text" class="form-control" id="mA_1" value="38"></td>
<td class="vert-align" id="mAh_1">1234</td>
<td class="vert-align may" id="mAy_1">12345</td>
<td class="vert-align" id="per_1">12%</td>
</tr>
<tr>
<td class="vert-align">Receive 1</td>
<td><input type="text" class="form-control" id="mS_2" value="70"></td>
<td><input type="text" class="form-control t_force" id="t_2" value="12"></td>
<td><input type="text" class="form-control" id="mA_2" value="15"></td>
<td class="vert-align" id="mAh_2">1234</td>
<td class="vert-align may" id="mAy_2">12345</td>
<td class="vert-align" id="per_2">12%</td>
</tr>
<tr>
<td class="vert-align">Receive 2</td>
<td><input type="text" class="form-control" id="mS_3" value="70"></td>
<td><input type="text" class="form-control t_force" id="t_3" value="12"></td>
<td><input type="text" class="form-control" id="mA_3" value="15"></td>
<td class="vert-align" id="mAh_3">1234</td>
<td class="vert-align may" id="mAy_3">12345</td>
<td class="vert-align" id="per_3">12%</td>
</tr>
<tr>
<td class="vert-align">Temperature</td>
<td><input type="text" class="form-control" id="mS_4" value="20"></td>
<td><input type="text" class="form-control t_force" id="t_4" value="12"></td>
<td><input type="text" class="form-control" id="mA_4" value="15"></td>
<td class="vert-align" id="mAh_4">1234</td>
<td class="vert-align may" id="mAy_4">12345</td>
<td class="vert-align" id="per_4">12%</td>
</tr>
<tr>
<td class="vert-align">Humidity</td>
<td><input type="text" class="form-control" id="mS_5" value="20"></td>
<td><input type="text" class="form-control t_force" id="t_5" value="12"></td>
<td><input type="text" class="form-control" id="mA_5" value="15"></td>
<td class="vert-align" id="mAh_5">1234</td>
<td class="vert-align may" id="mAy_5">12345</td>
<td class="vert-align" id="per_5">12%</td>
</tr>
<tr>
<td class="vert-align">Light</td>
<td><input type="text" class="form-control" id="mS_6" value="20"></td>
<td><input type="text" class="form-control t_force" id="t_6" value="12"></td>
<td><input type="text" class="form-control" id="mA_6" value="15"></td>
<td class="vert-align" id="mAh_6">1234</td>
<td class="vert-align may" id="mAy_6">12345</td>
<td class="vert-align" id="per_6">12%</td>
</tr>
<tr>
<td class="vert-align">Motion</td>
<td><input type="text" class="form-control" id="mS_7" value="1000"></td>
<td><input type="text" class="form-control t_force" id="t_7" value="3600"></td>
<td><input type="text" class="form-control" id="mA_7" value="0.002"></td>
<td class="vert-align" id="mAh_7"></td>
<td class="vert-align may" id="mAy_7"></td>
<td class="vert-align" id="per_7"></td>
</tr>
<tr>
<td class="vert-align">CO2</td>
<td><input type="text" class="form-control" id="mS_8" value="60"></td>
<td><input type="text" class="form-control t_force" id="t_8" value="12"></td>
<td><input type="text" class="form-control" id="mA_8" value="130"></td>
<td class="vert-align" id="mAh_8"></td>
<td class="vert-align may" id="mAy_8"></td>
<td class="vert-align" id="per_8"></td>
</tr>
<tr>
<td class="vert-align">Leveling (acceleration)</td>
<td><input type="text" class="form-control" id="mS_9" value="1000"></td>
<td><input type="text" class="form-control t_force" id="t_9" value="3600"></td>
<td><input type="text" class="form-control" id="mA_9" value="0.002"></td>
<td class="vert-align" id="mAh_9"></td>
<td class="vert-align may" id="mAy_9"></td>
<td class="vert-align" id="per_9"></td>
</tr>
<tr>
<td class="vert-align">Sleep</td>
<td><input type="text" class="form-control" id="mS_10" value="1000" readonly="readonly"></td>
<td><input type="text" class="form-control t_force" id="t_10" value="3600" readonly="readonly"></td>
<td><input type="text" class="form-control" id="mA_10" value="0.004" readonly="readonly"></td>
<td class="vert-align" id="mAh_10"></td>
<td class="vert-align may" id="mAy_10"></td>
<td class="vert-align" id="per_10"></td>
</tr>
<tr>
<td class="vert-align">Custom 1</td>
<td><input type="text" class="form-control" id="mS_11" value="0"></td>
<td><input type="text" class="form-control t_force" id="t_11" value="0"></td>
<td><input type="text" class="form-control" id="mA_11" value="0"></td>
<td class="vert-align" id="mAh_11"></td>
<td class="vert-align may" id="mAy_11"></td>
<td class="vert-align" id="per_11"></td>
</tr>
<tr>
<td class="vert-align">Custom 2</td>
<td><input type="text" class="form-control" id="mS_12" value="0"></td>
<td><input type="text" class="form-control t_force" id="t_12" value="0"></td>
<td><input type="text" class="form-control" id="mA_12" value="0"></td>
<td class="vert-align" id="mAh_12"></td>
<td class="vert-align may" id="mAy_12"></td>
<td class="vert-align" id="per_12"></td>
</tr>
<tr>
<td class="vert-align"></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="vert-align"></td>
<td></td>
<td></td>
<td></td>
<td>Sum:</td>
<td id="sum_mAy"></td>
<td></td>
</tr>
<tr>
<td class="vert-align"></td>
<td></td>
<td></td>
<td></td>
<td>Battery (mAh):</td>
<td><input type="text" class="form-control" id="battery" value="1200"></td>
<td></td>
</tr>
<tr class="success" >
<td class="vert-align"></td>
<td></td>
<td></td>
<td></td>
<td class="success" style="font-size:24px">Years:</td>
<td class="success" style="font-size:24px" id="years">ee</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
.table tbody>tr>td.vert-align{
vertical-align: middle;
}
function sumYears(){
var mAySum=0;
var mayMax=0;
var mayMaxRow="";
$('.may').each(function( index ){
mAySum+=parseFloat($(this).html());
});
$('.may').each(function( index ){
var row=$(this).attr('id').split('_')[1];
var may=parseFloat($("#mAy_"+row).html());
if (may>mayMax){
mayMax=may;
mayMaxRow=row;
}
$("#per_"+row).closest("tr").removeClass("danger");
$("#per_"+row).html((may/mAySum*100).toFixed(0)+"%");
});
$("#per_"+mayMaxRow).closest("tr").addClass("danger");
$("#sum_mAy").html(mAySum.toFixed(0));
var batt=parseInt($("#battery").val(),10);
$("#years").html((batt/mAySum).toFixed(2));
return mAySum;
}
function calcmAh(row){
var ms=parseInt($("#mS_"+row).val(),10);
var no=parseInt($("#t_"+row).val(),10);
var ma=parseFloat($("#mA_"+row).val());
var mah=(ma/1000*no)*(ms/3600);
var may=mah*24*365;
$("#mAh_"+row).html(mah.toFixed(4));
$("#mAy_"+row).html(may.toFixed(2));
var sum=sumYears();
}
//console.log("ch");
//console.log($("#mS_1").val());
//var ms=parseInt($("#mS_1").val(),10);
//var no=parseInt($("#t_1").val(),10);
//var ma=parseInt($("#mA_1").val(),10);
//var mah=(ma/1000*no)*(ms/3600);
//var may=mah*24*365;
//$("#mAh_1").html(mah.toFixed(4));
//$("#mAy_1").html(may.toFixed(2));
$(function() {
console.log( "ready!" );
calcmAh("1");
calcmAh("2");
calcmAh("3");
calcmAh("4");
calcmAh("5");
calcmAh("6");
calcmAh("7");
calcmAh("8");
calcmAh("9");
calcmAh("10");
calcmAh("11");
calcmAh("12");
$('#mS_1, #t_1, #mA_1').on("change, keyup",function(){calcmAh("1");});
$('#mS_2, #t_2, #mA_2').on("change, keyup",function(){calcmAh("2");});
$('#mS_3, #t_3, #mA_3').on("change, keyup",function(){calcmAh("3");});
$('#mS_4, #t_4, #mA_4').on("change, keyup",function(){calcmAh("4");});
$('#mS_5, #t_5, #mA_5').on("change, keyup",function(){calcmAh("5");});
$('#mS_6, #t_6, #mA_6').on("change, keyup",function(){calcmAh("6");});
$('#mS_7, #t_7, #mA_7').on("change, keyup",function(){calcmAh("7");});
$('#mS_8, #t_8, #mA_8').on("change, keyup",function(){calcmAh("8");});
$('#mS_9, #t_9, #mA_9').on("change, keyup",function(){calcmAh("9");});
$('#mS_10, #t_10, #mA_10').on("change, keyup",function(){calcmAh("10");});
$('#mS_11, #t_11, #mA_11').on("change, keyup",function(){calcmAh("11");});
$('#mS_12, #t_12, #mA_12').on("change, keyup",function(){calcmAh("12");});
$('#t_all').on("change, keyup",function(){
var v=$(this).val();
console.log(v);
$('.t_force').val(v);
for(i=1;i<=12;i++)
calcmAh(i+"");
});
});