Price test calculation

by Michael Dibbets

HTML

<table>
  <thead>
    <tr>
      <td data-type="Room" data-day="0">mon</td>
      <td data-type="Room" data-day="1">tue</td>
      <td data-type="Room" data-day="2">wed</td>
      <td data-type="Room" data-day="3">thu</td>
      <td data-type="Room" data-day="4">fri</td>
      <td data-type="Room" data-day="5">sat</td>
      <td data-type="Room" data-day="6">sun</td>
      <td data-type="Room" data-day="7">mon</td>
      <td data-type="Room" data-day="8">tue</td>
      <td  data-day="9">wed</td>
    </tr>
    </thead>
    <tbody>
  <tr>
    <td data-type="Room" data-day="0">100</td>
    <td data-type="Room" data-day="1">100</td>
    <td data-type="Room" data-day="2">100</td>
    <td data-type="Room" data-day="3">100</td>
    <td data-type="Room" data-day="4">100</td>
    <td data-type="Room" data-day="5">100</td>
    <td data-type="Room" data-day="6">100</td>
    <td data-type="Room" data-day="7">100</td>
    <td data-type="Room" data-day="8">100</td>
    <td data-type="Room" data-day="9">100</td>
  </tr>
  <tr>
    <td data-type="easer special" data-day="0"></td>
    <td data-type="easer special" data-day="1"></td>
    <td data-type="easer special" data-day="2"></td>
    <td data-type="easer special" data-day="3"></td>
    <td data-type="easer special" data-day="4">90</td>
    <td data-type="easer special" data-day="5">90</td>
    <td data-type="easer special" data-day="6">90</td>
    <td data-type="easer special" data-day="7">90</td>
    <td data-type="easer special" data-day="8"></td>
    <td data-type="easer special" data-day="9"></td>
  </tr>
  <tr>
    <td data-type="stay after easter, extra cheap" data-day="0"></td>
    <td data-type="stay after easter, extra cheap" data-day="1"></td>
    <td data-type="stay after easter, extra cheap" data-day="2"></td>
    <td data-type="stay after easter, extra cheap" data-day="3"></td>
    <td data-type="stay after easter, extra cheap" data-day="4"></td>
    <td data-type="stay after easter, extra cheap"...

CSS

table {
  width:100%;
  font-family: tahoma;
}
thead {
  background-color:#202020;
  color:#eee;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 5px;
  cursor: pointer;
  cursor: hand;
}
tbody td.highlight {
  background-color:#484893;
  color:#fff;
}
#output {
  margin-top:50px;
  max-width:50%;
}

JavaScript

function PriceObject(name, price, day) {
  this.name = name;
	this.day = day;
	this.price = price;
  
}

function recalc() {
  var prices = [];
	$('.highlight').each(function(index,elem) {
  		var $elem = $(elem);
      var price = new PriceObject($elem.data('type'), $elem.text().trim(),$elem.data('day'));
      prices.push(price);
  });
  prices.sort(function(a,b) {if(a.day == b.day) {return 0} return a-b;});
  var table = $('<table>');
  var total = 0;
  for(var c=0;c<prices.length;c++) {
  	var price = prices[c];
    total += parseFloat(price.price);
    var tr = $('<tr>');
    
    var name = $('<td>');
    name.append(price.name);
    tr.append(name);
    
    var day = $('<td>');
    day.text(price.day);
    tr.append(day);
    
    var pricecell = $('<td>');
    pricecell.text(price.price);
    tr.append(pricecell);
    
    table.append(tr);
  }
    
    
    var tr = $('<tr>');
    
    var name = $('<td>');
    name.append("<b>Total</b>");
    tr.append(name);
    
    var day = $('<td>');
    day.text('');
    tr.append(day);
    
    var pricecell = $('<td>');
    pricecell.text(total);
    tr.append(pricecell);
    
    table.append(tr);
    
  $output = $('#output');
  $output.empty();
  $output.append(table);
}

$('[data-day]').on('click',function(e) {
    var target = $(e.currentTarget);
    if(!target.hasClass("highlight")) {
      var day = target.data('day');
      var text = target.text();
      if(text.trim().length > 0) { 
        $('[data-day="'+day+'"]').removeClass('highlight');
        target.addClass('highlight');
      }
		}
    else {
    	target.removeClass('highlight');
    }
    recalc();
});