288 lines
9.2 KiB
JavaScript
288 lines
9.2 KiB
JavaScript
define(["jquery"], function ($) {
|
|
"use strict";
|
|
|
|
var data;
|
|
|
|
return {
|
|
init: function(datapath){
|
|
$().ready(function(){
|
|
// hook into the on change events to update things when user input happens
|
|
$("#temps input,#temps select").change(function(){
|
|
calc_dt();
|
|
populate_table();
|
|
});
|
|
$("#hc_product").change(function(){
|
|
draw_table();
|
|
populate_table();
|
|
check_scroll();
|
|
});
|
|
$("#filters").change(function(){
|
|
populate_table();
|
|
});
|
|
|
|
$("#right").click(function(event) {
|
|
event.preventDefault();
|
|
$("#table_container").animate({
|
|
scrollLeft: "+=300px"
|
|
}, "slow", function() {
|
|
check_scroll();
|
|
});
|
|
});
|
|
|
|
$("#left").click(function(event) {
|
|
event.preventDefault();
|
|
$("#table_container").animate({
|
|
scrollLeft: "-=300px"
|
|
}, "slow", function() {
|
|
check_scroll();
|
|
});
|
|
});
|
|
//calc the inital dt
|
|
calc_dt();
|
|
//init the scroller icons
|
|
check_scroll();
|
|
|
|
$(window).scroll(check_scroll);
|
|
$("#table_container").scroll(check_scroll);
|
|
|
|
$.getJSON(datapath, function(d) {
|
|
data=d;
|
|
// create the product switcher
|
|
var sel=$("#hc_product");
|
|
// loop through the product names and create the options
|
|
$.each(data, function(idx, obj) {
|
|
sel.append( $("<option>",{"value":idx}).text(idx) );
|
|
});
|
|
|
|
//finally display the calculator
|
|
$("#heatcalc_loading").hide();
|
|
$("#heatcalc").show();
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
function check_scroll(){
|
|
//
|
|
$("#hc_table thead.table").find('tr').eq(0).children().each(function(i, e){
|
|
$($("#hc_table thead.fixed").find('tr').eq(0).children()[i]).width($(e).width());
|
|
});
|
|
$("#hc_table thead.table").find('tr').eq(1).children().each(function(i, e){
|
|
$($("#hc_table thead.fixed").find('tr').eq(1).children()[i]).width($(e).width());
|
|
});
|
|
|
|
// make sure the left/right buttons are hidden if already at far left/right
|
|
var sl=$("#table_container").scrollLeft();
|
|
var sl_max = $("#hc_table").outerWidth() - $("#table_container").width();
|
|
if(sl>0){
|
|
$("#left").show();
|
|
}else{
|
|
$("#left").hide();
|
|
}
|
|
if(sl<(sl_max-1)){
|
|
$("#right").show();
|
|
}else{
|
|
$("#right").hide();
|
|
}
|
|
|
|
// make sure buttons are not scrolled off the top of the page
|
|
// and same for the thead
|
|
var scrollTop = $(window).scrollTop();
|
|
var tableTop = $("#table_container").offset().top;
|
|
var buttonTop = $('#button_container').offset().top;
|
|
console.log("tt:"+tableTop+" st:"+scrollTop+" bt:"+buttonTop);
|
|
|
|
if( scrollTop > tableTop ){
|
|
$("#button_container").css('top', 0);
|
|
$("#button_container").css('position', 'fixed');
|
|
}else{
|
|
$("#button_container").css('top', 'auto');
|
|
$("#button_container").css('position', 'absolute');
|
|
}
|
|
|
|
$('#heatcalc tbody th').css("left", $("#table_container").scrollLeft());
|
|
$('#heatcalc thead th:nth-child(1)').css("left", $("#table_container").scrollLeft());
|
|
|
|
/*
|
|
|
|
buttonOffset = $('#button_container').offset().top;
|
|
//buttonOffset = parseInt(buttonOffset, 10) || 0;
|
|
if(scrollPosition > buttonOffset){
|
|
$("#button_container").css('top', scrollPosition-buttonOffset);
|
|
$("#heatcalc thead th").css('top', scrollPosition-buttonOffset-1);
|
|
}else{
|
|
$("#button_container").css('top', 0);
|
|
$("#heatcalc thead th").css('top', 0);
|
|
}*/
|
|
|
|
|
|
}
|
|
|
|
function draw_table(){
|
|
var prod_name = $("#hc_product option:selected").val();
|
|
|
|
// creates the empty table
|
|
// each cell has id=type-x-y for targeting during population
|
|
|
|
// get the data for just this product
|
|
var prod_data=data[prod_name];
|
|
|
|
//get a list of y values unique and complete for all type/depth and x combos
|
|
var y_vals={};
|
|
$.each(prod_data, function(idx1,val1) { // type/depth
|
|
$.each(val1, function(idx2,val2) { // x
|
|
$.each(val2, function(idx3,val3) { // y
|
|
y_vals[idx3]=true;
|
|
});
|
|
});
|
|
});
|
|
|
|
//delete any old table
|
|
$("#hc_table").remove();
|
|
|
|
// create the new table
|
|
var table=$("<table id='hc_table'>");
|
|
var thead=$("<thead>");
|
|
|
|
//header row 1: type/depths
|
|
var row=$("<tr>");
|
|
var cell=$("<th>").text("Type/Depth");
|
|
row.append(cell);
|
|
$.each(prod_data, function(idx1,val1) {
|
|
// each "type/depth" will contain multiple x vales, so the cell needs to span them
|
|
// count into x_count
|
|
var x_count=0;
|
|
$.each(val1, function(idx2,val2) {
|
|
x_count++;
|
|
});
|
|
//create the cell
|
|
var cell=$("<th colspan='"+x_count+"'>").text(idx1);
|
|
row.append(cell);
|
|
});
|
|
thead.append(row);
|
|
|
|
//header row 2: height x"s
|
|
var row=$("<tr>");
|
|
var cell=$("<th>").text("Length \\ Height");
|
|
row.append(cell);
|
|
$.each(prod_data, function(idx1,val1) {
|
|
// each "type/depth" will contain multiple x vales
|
|
$.each(val1, function(idx2,val2) {
|
|
cell=$("<th>").text(idx2);
|
|
row.append(cell);
|
|
});
|
|
});
|
|
thead.append(row);
|
|
table.append(thead);
|
|
|
|
//data row, for all y_vals
|
|
$.each(y_vals, function(y) {
|
|
var row=$("<tr>");
|
|
var cell=$("<th>").text(y);
|
|
row.append(cell);
|
|
//now all the x"s
|
|
$.each(prod_data, function(idx1,val1) {
|
|
// each "type/depth" will contain multiple x vales
|
|
$.each(val1, function(idx2,val2) {
|
|
cell=$("<td>").text("-").attr("id",idx1.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+idx2.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+y.replace(/\s/g,"").replace(/[\.\/]/g,"_"));
|
|
row.append(cell);
|
|
});
|
|
});
|
|
|
|
table.append(row);
|
|
|
|
});
|
|
|
|
// display the table
|
|
$("#table_container").append(table);
|
|
|
|
//clone the thead
|
|
var org_thead=$("#hc_table thead");
|
|
org_thead.clone().attr('class','fixed').css('position','fixed').prependTo("#hc_table");
|
|
org_thead.attr('class','table');
|
|
|
|
//enable highlighting
|
|
$("#hc_table td").on("mouseover", function() {
|
|
$(this).closest("tr").addClass("hover");
|
|
$(this).closest("table").find("td:nth-child(" + ($(this).index() + 1) + ")").addClass("hover");
|
|
});
|
|
$("#hc_table td").on("mouseout", function() {
|
|
$(this).closest("table").find("td,tr").removeClass("hover");
|
|
});
|
|
}
|
|
|
|
function populate_table(){
|
|
var prod_name = $("#hc_product option:selected").val();
|
|
|
|
var dt=calc_dt();
|
|
var mode=$("[name='mode']").val();
|
|
var dtr;
|
|
if(mode=="a"){
|
|
dtr=dt/50;
|
|
}
|
|
if(mode=="l"){
|
|
dtr=dt/49.83;
|
|
}
|
|
|
|
var w_min=parseFloat($("[name='w_min']").val());
|
|
var w_max=parseFloat($("[name='w_max']").val());
|
|
var l_min=parseFloat($("[name='l_min']").val());
|
|
var l_max=parseFloat($("[name='l_max']").val());
|
|
var h_min=parseFloat($("[name='h_min']").val());
|
|
var h_max=parseFloat($("[name='h_max']").val());
|
|
|
|
// get the data for just this product
|
|
var prod_data=data[prod_name];
|
|
|
|
//lets do the calcs!
|
|
$.each(prod_data, function(type,type_vals) {
|
|
$.each(type_vals, function(x,x_vals) {
|
|
$.each(x_vals, function(y,vals) {
|
|
if(vals.w==0){
|
|
return;
|
|
}
|
|
var target_cell=$("#"+type.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+x.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+y.replace(/\s/g,"").replace(/[\.\/]/g,"_"));
|
|
var n=parseFloat(vals.n);
|
|
var k=Math.pow(dtr,n);
|
|
var w=(parseFloat(vals.w)*k).toFixed(0);
|
|
target_cell.text( w + "W");
|
|
if(
|
|
(w_min>0 && w<w_min) ||
|
|
(w_max>0 && w>w_max) ||
|
|
(l_min>0 && y<l_min) ||
|
|
(l_max>0 && y>l_max) ||
|
|
(h_min>0 && x<h_min) ||
|
|
(h_max>0 && x>h_max)
|
|
){
|
|
target_cell.addClass("filtered");
|
|
}else{
|
|
target_cell.removeClass("filtered");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function calc_dt(){
|
|
var mode=$("[name='mode']").val();
|
|
|
|
var t_flow=parseInt($("[name='t_flow']").val());
|
|
var t_return=parseInt($("[name='t_return']").val());
|
|
var t_room=parseInt($("[name='t_room']").val());
|
|
|
|
var dt;
|
|
|
|
if(mode=="a"){
|
|
dt=((t_flow+t_return)/2)-t_room;
|
|
}
|
|
if(mode=="l"){
|
|
dt=((t_flow-t_return)/Math.log((t_flow-t_room)/(t_return-t_room)));
|
|
}
|
|
|
|
$("[name='dt']").val(dt.toFixed(2));
|
|
return dt;
|
|
}
|
|
|
|
|
|
});
|