Difference between revisions of "Team:William and Mary/Database"

Line 1: Line 1:
−
{{Team:William_and_Mary/CSS_RESET}}
+
{{Team:William_and_Mary/CSS_RESET}} {{Team:William_and_Mary/CSS_FIX}} {{Team:William_and_Mary/SOURCE}} {{Team:William_and_Mary/HEADER2}}
−
{{Team:William_and_Mary/CSS_FIX}}
+
−
{{Team:William_and_Mary/SOURCE}}
+
−
{{Team:William_and_Mary/HEADER2}}
+
 
<html lang="en">
 
<html lang="en">
  
  
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
  <meta charset="UTF-8">
−
<title>Outreach Database: select tags for search</title>
+
  <title>Outreach Database: select tags for search</title>
−
<style>
+
  <style>
−
ul.tag-type{
+
    ul.tag-type {
−
column-width: 300px;
+
      column-width: 300px;
−
list-style: none;
+
      list-style: none;
−
}
+
    }
−
div.search-result{
+
−
margin-top: 30px;
+
−
}
+
−
.school-info{
+
−
color: #006621;
+
−
}
+
−
</style>
+
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
+
−
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+
−
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
+
−
<script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
+
−
<script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
+
−
<!--script src='outreach_db.js'></script-->
+
−
+
  
 +
    div.search-result {
 +
      margin-top: 30px;
 +
    }
  
 +
    .school-info {
 +
      color: #006621;
 +
    }
  
−
<script id="checkbox-area-template" type="text/x-handlebars-template">
+
    input[type=checkbox]
−
{{#each this}}
+
    {
−
<fieldset id='{{@key}}' value='{{@key}}'>
+
        vertical-align: middle;
−
<legend>{{@key}}</legend>
+
    }
−
<ul class='tag-type'>
+
  </style>
−
{{#each this}}
+
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
−
<li class='tag'>
+
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
−
<input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' style='float:left;'/><label class='tag-label'><div style='font-size:
+
  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
 +
  <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
 +
  <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
 +
  <!--script src='outreach_db.js'></script-->
 +
 
 +
 
 +
 
 +
 
 +
  <script id="checkbox-area-template" type="text/x-handlebars-template">
 +
    {{#each this}}
 +
    <fieldset id='{{@key}}' value='{{@key}}'>
 +
      <legend>{{@key}}</legend>
 +
      <ul class='tag-type'>
 +
        {{#each this}}
 +
        <li class='tag'>
 +
          <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' style='float:left;' /><label class='tag-label'><div style='font-size:
 
  16px;'>{{this}}</div></label>
 
  16px;'>{{this}}</div></label>
−
</li>
+
        </li>
−
<br>
+
        <br> {{/each}}
−
{{/each}}
+
      </ul>
−
</ul>
+
    </fieldset>
−
</fieldset>
+
    {{/each}}
−
{{/each}}
+
  </script>
−
</script>
+
  
  
  
  
−
<script id="querystring-template" type="text/x-handlebars-template">
+
  <script id="querystring-template" type="text/x-handlebars-template">
−
{{#each this}}
+
    {{#each this}} {{#if @first}} WHERE {{/if}} ( {{#each this}} [{{@../key}}] LIKE ("%{{this}}%") {{#unless @last}} OR {{/unless}} {{/each}} ) {{#unless @last}}AND{{/unless}} {{/each}}
−
{{#if @first}}
+
  </script>
−
WHERE
+
−
{{/if}}
+
−
(
+
−
{{#each this}}
+
−
[{{@../key}}] LIKE ("%{{this}}%")
+
−
{{#unless @last}} OR {{/unless}}
+
−
{{/each}}
+
−
)
+
  
−
{{#unless @last}}AND{{/unless}}
 
−
{{/each}}
 
−
</script>
 
  
  
Line 71: Line 63:
  
  
 +
  <!-----Search Results------>
  
−
<!-----Search Results------>
 
  
 +
  <script id="search-results-template" type="text/x-handlebars-template">
  
−
<script id="search-results-template" type="text/x-handlebars-template">
+
    {{#each this}}
 +
    <div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
 +
      <div class='project-title' style='font-size: 30px; margin-right: 250px;'>{{[Outreach Project]}}</div>
 +
      <div style='font-size: 20px; padding-top: 0px; padding-bottom: 6px;margin-top:-30px;'><span class="pull-right"><a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}} {{[Year]}} {{[School Level]}}</a></span></div>
  
−
{{#each this}}
+
      <div style='font-size: 20px; padding-top: 26px; padding-bottom: px;'><span class="pull-right"><span class='outreach-category'>{{[Outreach Category]}}</span></span>
−
<div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
+
      </div>
−
<div class='project-title' style='font-size: 30px; margin-right: 250px;'>{{[Outreach Project]}}</div>
+
      <div style='font-size: 17px; padding-bottom: 15px;margin-top: 5px; margin-right: 350px;text-indent: 15px;'>
−
<div style='font-size: 20px; padding-top: 0px; padding-bottom: 6px;margin-top:-30px;'><span class="pull-right"><a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}} {{[Year]}} {{[School Level]}}</a></span></div>
+
        {{[Description]}}
−
+
      </div>
−
<div style='font-size: 20px; padding-top: 26px; padding-bottom: px;'><span class="pull-right"><span class='outreach-category'>{{[Outreach Category]}}</span></span></div>
+
      <dl>
−
<div style='font-size: 17px; padding-bottom: 15px;margin-top: 5px; margin-right: 350px;text-indent: 15px;'>
+
        <dt>
−
{{[Description]}}
+
−
</div>
+
−
<dl>
+
−
<dt>
+
 
Award
 
Award
 
</dt>
 
</dt>
−
<dd><div style='font-size: 20px;'>
+
        <dd>
−
{{[Award]}}</div>
+
          <div style='font-size: 20px;'>
−
</dd>
+
            {{[Award]}}</div>
−
<dt>
+
        </dd>
 +
        <dt>
 
Project Tag
 
Project Tag
 
</dt>
 
</dt>
−
<dd><div style='font-size: 20px;'>
+
        <dd>
−
{{[Project Tag]}}</div>
+
          <div style='font-size: 20px;'>
−
</dd>
+
            {{[Project Tag]}}</div>
−
</dl>
+
        </dd>
−
<a class='details-link' href='#' outreach-id='{{id}}'>Details</a>
+
      </dl>
−
</div>
+
      <a class='details-link' href='#' outreach-id='{{id}}'>Details</a>
−
{{/each}}
+
    </div>
 +
    {{/each}}
  
−
</script>
+
  </script>
−
<!---end of search results--->
+
  <!---end of search results--->
  
  
  
−
<script id=mv>
+
  <script id=mv type=text/x-handlebars-template>
  
−
<div class='details-page'>
+
    <div class='details-page'>
−
<h1 class='project-title'>{{[Outreach Project]}}</h1>
+
      <h1 class='project-title'>{{[Outreach Project]}}</h1>
−
<a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}}-{{[Year]}}-{{[School Level]}}</a>
+
      <a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}}-{{[Year]}}-{{[School Level]}}</a>
−
<br/>
+
      <br/>
−
<span class='outreach-category'>{{[Outreach Category]}}</span>
+
      <span class='outreach-category'>{{[Outreach Category]}}</span>
−
<p>
+
      <p>
−
{{{[Product Description]}}}
+
        {{{[Product Description]}}}
−
</p>
+
      </p>
  
−
{{#each this}}
+
      {{#each this}}
−
<h2>{{@key}}:</h2>
+
      <h2>{{@key}}:</h2>
  
−
<div>
+
      <div>
−
{{{this}}}
+
        {{{this}}}
−
</div>
+
      </div>
−
{{/each}}
+
      {{/each}}
−
</div>
+
    </div>
 +
  </script>
  
  
  
  
 +
  <script type='text/javascript'>
 +
    $(document).ready(function() {
 +
      var OUTREACH_URL = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true'
 +
      outreach_db.init().then( // scrape all tags from data
 +
        outreach_db.list_tags
 +
      ).then( // initialize checkbox area using tag data
 +
        init_checkbox_area
 +
      ).then( // now that we have the checkboxes, we can hook them up with the search function
 +
        function() {
 +
          $('#checkbox-area input').change(search);
 +
        }
 +
      );
  
−
</script>
+
    });
  
 +
    function read_checkbox_area() {
 +
      var checked_tags = {}
 +
      // returns array of form {tag_type: [tag, tag, tag], tag_type2: [tag, tag, tag]}
 +
      $('#checkbox-area fieldset').each(function(idx, elm) {
 +
        checked_tags[$(elm).attr('value')] = $(elm).find('input:checked').map(function(idx1, elm1) {
 +
          return $(elm1).attr('value')
 +
        }).get()
 +
      })
 +
      console.log(checked_tags)
 +
      return checked_tags;
 +
    }
  
  
  
−
<script type='text/javascript' >
+
    function search() {
−
$(document).ready(function(){
+
−
var OUTREACH_URL = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true'
+
−
outreach_db.init(
+
−
).then(  // scrape all tags from data
+
−
outreach_db.list_tags
+
−
).then(  // initialize checkbox area using tag data
+
−
init_checkbox_area
+
−
).then(  // now that we have the checkboxes, we can hook them up with the search function
+
−
function(){
+
−
$('#checkbox-area input').change(search);
+
−
}
+
−
);
+
  
−
});
+
      // From light comes darkness, and from darkness, light.
 +
      // i.e. Don't filter types of which no tags has been selected
  
−
function read_checkbox_area(){
+
      var ordburl = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true';
−
var checked_tags = {}
+
      selected_tags = read_checkbox_area()
−
// returns array of form {tag_type: [tag, tag, tag], tag_type2: [tag, tag, tag]}
+
      everything =
−
$('#checkbox-area fieldset').each(function(idx, elm){
+
        "CAST([id] AS STRING), CAST([School] AS STRING), CAST([Section] AS STRING), CAST([Year] AS STRING), CAST([Wiki hyperlink] AS STRING), CAST([Award] AS STRING),  CAST([Outreach Category] AS  STRING),  CAST([Outreach Project] AS STRING),    CAST([Project Tag] AS STRING), CAST([Product] AS STRING), CAST([Product Description] AS STRING), CAST([Product Tag] AS STRING), CAST([Audience] AS STRING), CAST([Goal] AS STRING), CAST([Objectives] AS STRING), CAST([Data Type] AS STRING),CAST([Data] AS STRING), CAST([Reach] AS STRING), CAST([Analysis] AS STRING), CAST([References] AS STRING), CAST([Description] AS STRING)"
−
checked_tags[$(elm).attr('value')] = $(elm).find('input:checked').map(function(idx1, elm1){
+
      qString = 'SELECT * FROM outreach  ' + outreach_db.compile_sql(selected_tags)
−
return $(elm1).attr('value')
+
      console.time(qString);
−
}).get()
+
      alasql(qString, [], callback = function(data) {
−
})
+
        show_results(search_result = data);
−
console.log(checked_tags)
+
        console.log(data);
−
return checked_tags;
+
        console.timeEnd(qString);
−
}
+
      });
 +
    }
  
 +
    function show_details(outreach_id) {
 +
      datastring = encodeURIComponent(
 +
        JSON.stringify(
 +
          outreach_db.get_by_id(
 +
            outreach_id
 +
          )
 +
        )
 +
      );
 +
      console.log(decodeURIComponent(datastring));
 +
      window.open('https://2017.igem.org/Team:William_and_Mary/Outreach_DB/Details?datastring=' + datastring);
 +
    }
 +
    var test;
  
 +
    function show_results(search_result) {
 +
      show_results.template = show_results.template || Handlebars.compile($('#search-results-template').html())
 +
      //$('#search-results').html(show_results.template(search_result));
 +
      $('#search-results').html(show_results.template(search_result));
 +
      // bind click event to new links
 +
      $('.details-link').click(
 +
        function(e) {
 +
          clicked_outreach_id = e.target.getAttribute('outreach-id');
 +
          show_details(clicked_outreach_id);
 +
          console.log(clicked_outreach_id);
 +
          return false; // return false to intercept event and prevent other things from handling link click
 +
        }
 +
      )
 +
    }
  
−
function search(){
+
    function init_checkbox_area(tag_data) {
−
 
+
      var checkbox_area_template_function = Handlebars.compile($("#checkbox-area-template").html())
−
// From light comes darkness, and from darkness, light.
+
      checkbox_area_html = checkbox_area_template_function(tag_data)
−
// i.e. Don't filter types of which no tags has been selected
+
      $('#checkbox-area').html(checkbox_area_html)
−
 
+
    }
−
var ordburl = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true';
+
  </script>
−
selected_tags = read_checkbox_area()
+
</head>
−
everything = "CAST([id] AS STRING), CAST([School] AS STRING),  CAST([Section] AS STRING), CAST([Year] AS STRING), CAST([Wiki hyperlink] AS STRING), CAST([Award] AS STRING),  CAST([Outreach Category] AS  STRING),  CAST([Outreach Project] AS STRING),    CAST([Project Tag] AS STRING), CAST([Product] AS STRING), CAST([Product Description] AS STRING), CAST([Product Tag] AS STRING), CAST([Audience] AS STRING), CAST([Goal] AS STRING), CAST([Objectives] AS STRING), CAST([Data Type] AS STRING),CAST([Data] AS STRING), CAST([Reach] AS STRING), CAST([Analysis] AS STRING), CAST([References] AS STRING), CAST([Description] AS STRING)"
+
−
qString = 'SELECT * FROM outreach  ' + outreach_db.compile_sql(selected_tags)
+
−
console.time(qString);
+
−
alasql(qString, [], callback= function(data){
+
−
show_results(search_result=data);
+
−
console.log(data);
+
−
console.timeEnd(qString);
+
−
});
+
−
}
+
  
−
function show_details(outreach_id){
 
−
datastring = encodeURIComponent(
 
−
JSON.stringify(
 
−
outreach_db.get_by_id(
 
−
outreach_id
 
−
)
 
−
)
 
−
);
 
−
console.log(decodeURIComponent(datastring));
 
−
window.open('https://2017.igem.org/Team:William_and_Mary/Outreach_DB/Details?datastring='+datastring);
 
−
}
 
−
var test;
 
−
function show_results(search_result){
 
−
show_results.template = show_results.template || Handlebars.compile($('#search-results-template').html())
 
−
//$('#search-results').html(show_results.template(search_result));
 
−
$('#search-results').html(show_results.template(search_result));
 
−
// bind click event to new links
 
−
$('.details-link').click(
 
−
function(e){
 
−
clicked_outreach_id = e.target.getAttribute('outreach-id');
 
−
show_details(clicked_outreach_id);
 
−
console.log(clicked_outreach_id);
 
−
return false; // return false to intercept event and prevent other things from handling link click
 
−
}
 
−
)
 
−
}
 
−
 
−
function init_checkbox_area(tag_data){
 
−
var checkbox_area_template_function = Handlebars.compile($("#checkbox-area-template").html())
 
−
checkbox_area_html = checkbox_area_template_function(tag_data)
 
−
$('#checkbox-area').html(checkbox_area_html)
 
−
}
 
−
</script>
 
−
</head>
 
 
<body>
 
<body>
−
<br></br>
+
  <br></br>
  
−
<center>DATABASE</center>
+
  <center>DATABASE</center>
−
<br></br>
+
  <br></br>
−
<center>
+
  <center>
−
<div>
+
    <div>
−
<form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString())">
+
      <form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString())">
−
Quick ID Jump: <input type="number" name="id" id="input-id">
+
        Quick ID Jump: <input type="number" name="id" id="input-id">
−
<input type="submit" id="getid" value="Go">
+
        <input type="submit" id="getid" value="Go">
−
</form>
+
      </form>
−
</div>
+
    </div>
−
</center>
+
  </center>
−
<br></br>
+
  <br></br>
  
−
<!----start's here---->
+
  <!----start's here---->
  
−
        <div class="container">
+
  <div class="container">
−
<div id='checkbox-area' style='padding-top: 150px;'>
+
    <div id='checkbox-area' style='padding-top: 150px;'>
  
−
</div>
+
    </div>
  
  
  
  
−
<div id='search-results'>
+
    <div id='search-results'>
  
−
</div>
+
    </div>
−
        </div>
+
  </div>
 
</body>
 
</body>
 +
 
</html>
 
</html>
  
 
{{Team:William_and_Mary/FOOTER_SMALL}}
 
{{Team:William_and_Mary/FOOTER_SMALL}}

Revision as of 22:35, 30 October 2017

Outreach Database: select tags for search

DATABASE


Quick ID Jump: