Datatables Inactive Ingredients

datatables-scripts.js

/*
// does brand name always have same ingredients? Scrape anyway? Include one with generics?

Where use exipient as keywords? Tagline - Because exipients can be harmful.

row highlight - rgba() in tandum with column highlight. Also on top of table background. 

Misc
spinning pill: http://v3.preloaders.net/en/science/pill-spinning/

medical gifs: https://icons8.com/preloaders/en/search/medical

Sweep to right:
https://codepen.io/vulchivijay/pen/KwBGjX
rotate headers:
https://css-tricks.com/rotated-table-column-headers/

Checkboxes - removing/filtering ingredients
https://codepen.io/shshaw/pen/WXMdwE
https://codepen.io/JonasBadalic/pen/MYaMBz


** Saving data - save metadata to generic_drugs and brand_drugs
** Ingredients Class - replaces non-alphabetic characters
** drug background label bg-$present - save literally "present" or "absent"
** sort/filter - text absent/present? A or P?

  1. Warning for small screen?
  2. Advanced options?
    - tooltips on hover/touch? Option to show drug or ingredient?
    - Columns or makers sticky?
    - change size of everything? Compress?
    
  3. When filter, hide column? Make small?
  4. Scroll or static? https://datatables.net/examples/basic_init/scroll_xy.html
  5. Pagination? - Yes. Way easier to keep track. 


Categorize ingredients? Filter groups? Later. Way too complicated. 
  Uses - https://www.nps.org.au/australian-prescriber/articles/pharmaceutical-excipients-where-do-we-begin#t1
  https://en.wikipedia.org/wiki/Excipient#Antiadherents
  Colorings (shellac). Flavorings. Other categories? Vegan? Kosher, other?
  Label ingredients with icons? 

Compress
.compressed .drugs-header th { max-width: 25px; }
.compressed table .drugs-header .rotated{ font-size:10px; }
.compressed .drug-maker{font-size:12px;}
*/

/*
  scroll xy https://datatables.net/examples/basic_init/scroll_xy.html // sticky headers - if yes, need to use API for search filter
  highlight https://datatables.net/examples/api/highlight.html
  remove - add class? Or add css? 
  col reorder - https://datatables.net/extensions/colreorder/
  col filter - https://datatables.net/extensions/colreorder/examples/initialisation/col_filter.html
  tooltips? - https://stackoverflow.com/questions/39240361/datatables-and-bootstrap-tooltips
  
  
// print and export - datatables api - print filtered columns? Other data?

var advanced_options = {
  fixed_header:true,      // warning - this will reset table filter and selection options. 
  compress_table: false,
  tooltips:false,         // show tooltips of drug and ingredients on hover? Not now. Helpful on small screens. 
}
<div id="advanced-options>
  <ul>
    <li><input type="checkbox" id="" value=""/><label for=""></label></li>
    <li><input type="checkbox" id="" value=""/><label for=""></label></li>
    <li><input type="checkbox" id="" value=""/><label for=""></label></li>
  </ul>
</div>


Add maker as class 
<td drug maker><span class="remove-row close-button" style="border-radius:100;border:1px solid #000;color:#e55;">&times;</span>
<div class="removed-rows" id="generic-removed-rows"></div>


// Is this even relevant? Filtering rows should be the only thing that matters. 

// Use datatables api instead as to not screw up pagination? https://datatables.net/reference/api/row().remove()
// remove row. save name to .removed-rows
$('.ingredients tr .remove-row').on('click',function(){
  $tr = $(this).closest('tr');
  $tr.addClass('hide-row');
  var row_id = $tr.attr('id');
  var maker_html = '<div class="removed-row" data-row-id="'+row_id+'"><span class="add-button">+</span>'+$(this).closest('td').html()+'</div>';
  $('#generic-removed-rows').append(maker_html);
});

// restore row based on name
$('.removed-rows .removed-row').on('click',function(){
  var row_id = $(this).parent().data('row-id');
  $('#'+row_id).removeClass('hide-row');
  $(this).remove();
});

*/

// label everything g_ and b_ for brand an generic? Add everything to two element array?



function ingredients_to_headers(all_ingredients){
  var dt_cols = []; 
  var i=0;
  var max = all_ingredients.length;
  for(i;i<max;i++){
    dt_cols.push({title:all_ingredients[i]}); 
  }
  return dt_cols;
}
// var columns: [{ title: "Name" }, { title: "Position" },{ title: "Office" }];

var all_ingredients = [];
var drug_ingredients_array = [ [], [], [] ];
var dt_cols = ingredients_to_headers(all_ingredients);

var dt_init_options = {
  data: drug_ingredients_array,
  columns: dt_cols,
  scrollY: 200,
  scrollX: true,
  fixedHeader: {    // use quotes? not in example
    header: true
  },
  colReorder: true
};

var generic_init = { data:drug_ingredients_array, columns:dt_cols };
$.extend( generic_init, dt_init_options );

var brand_init = { data:b_drug_ingredients_array, columns:b_dt_cols };
$.extend( brand_init, dt_init_options );

// init brand and generic tables
$('#generic-ingredients').DataTable( generic_init );
$('#brand-ingredients').DataTable( brand_init );


function custom_ingredient_filter(){
  // add checkboxes when creating table - wrap input inside label? // second label for check icon?
  // <input type="checkbox" name="check-'+ingredient+'" id="filter-'+ingredient+'" value="'+ingredient+'"/><label for="check-'+ingredient+'">'+ingredient+'</label>
  // filter row based on checkbox?
  $(".ingredients thead input").on( 'change', function () {
        table
            .column( $(this).closest('th').index()+':visible' ) //example used .parent() instead
            .search( this.value )
            .draw();
    } );
}

// select rows option
 $('.ingredients tbody').on( 'click', 'tr', function () {
      $(this).toggleClass('selected');
  });